:root {
  --bg: #14121f;
  --deep: #050d1b;
  --card: #232036;
  --input: #302d46;
  --accent: #a78bfa;
  --orange: #ffa538;
  --muted: #a59eb9;
  --blue: #2a7eff;
  --green: #46dc78;
  --red: #ff4337;
  --text: #ffffff;
  --soft: #d2cde6;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body { min-height: 100vh; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; }
button, .btn, .selector, .picker { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.app-home { min-height: 100dvh; padding: calc(46px + env(safe-area-inset-top)) 22px calc(12px + env(safe-area-inset-bottom)); background: var(--deep) url('/assets/volta_home_bg.png') center/cover no-repeat; display: flex; flex-direction: column; align-items: stretch; }
.home-title { text-align: center; font-size: 46px; line-height: 1; font-weight: 800; color: var(--blue); text-shadow: 0 4px 12px #000; letter-spacing: .04em; }
.bolt-row { display: flex; align-items: center; gap: 12px; padding: 6px 58px 0; }
.bolt-row:before, .bolt-row:after { content: ""; height: 1px; flex: 1; background: #ffd200; }
.bolt { color: #ffd200; font-size: 25px; text-shadow: 0 3px 6px #000; }
.subtitle { margin-top: 4px; text-align: center; font-size: 18px; font-weight: 700; text-shadow: 0 2px 5px #000; }
.home-spacer { height: 115px; flex: 0 0 auto; }
.status-home { display:none; text-align:center; color:#ebeeff; font-size:13px; text-shadow:0 1px 4px #000; margin: 8px 0; }
.home-actions { display:flex; flex-direction:column; gap:10px; }
.btn3d { width:100%; min-height:68px; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; color:white; text-align:left; padding: 0 20px 5px 30px; font-size:22px; font-weight:800; text-shadow:0 3px 4px rgba(0,0,0,.85); box-shadow: 0 7px 0 rgba(0,0,0,.9), 0 12px 18px rgba(0,0,0,.35); display:flex; align-items:center; gap:16px; transition: transform .08s, box-shadow .08s, filter .08s; cursor:pointer; }
.btn3d:active { transform: translateY(5px) scale(.99); box-shadow: 0 2px 0 rgba(0,0,0,.9), 0 5px 8px rgba(0,0,0,.35); }
.btn-purple { background: linear-gradient(#c6aaff, #aa58ff, #5217b2, #34105f); }
.btn-green { background: linear-gradient(#7bf29a, #2dd24c, #0d7626, #084817); }
.btn-red { background: linear-gradient(#ff8a80, #ff4337, #b91914, #70110d); }
.btn-orange { background: linear-gradient(#ffc064, #ff9b00, #dc6800, #8f4400); }
.btn-blue { background: linear-gradient(#5a9fff, #0a77ff, #0046b9, #00295f); }
.btn-gray { background: linear-gradient(#b4b4c8, #7d7d96, #46465a, #282836); }
.btn-small { align-self:center; min-height:42px; width:230px; padding:0 12px 3px; justify-content:center; font-size:13px; margin-top:auto; }
.footer { margin-top: 12px; text-align:center; }
.footer-row { display:flex; align-items:center; gap:14px; margin-top:8px; }
.footer-row:before { content:""; flex:1; height:1px; background:#2080ff; }
.footer-row:after { content:""; flex:1; height:1px; background:#ffd200; }
.footer-volta { color:var(--blue); font-size:23px; font-weight:800; text-shadow:0 2px 6px #000; }
.footer-copy { font-size:16px; text-shadow:0 2px 5px #000; }
.version { opacity:.42; font-size:9px; margin-top:4px; }
.screen { min-height:100dvh; background:var(--bg); padding: calc(28px + env(safe-area-inset-top)) 28px calc(96px + env(safe-area-inset-bottom)); }
.header { display:flex; align-items:center; margin-bottom:14px; }
.logo-bolt { width:64px; min-width:64px; min-height:56px; display:grid; place-items:center; font-size:32px; color:#ffd200; background:#322754; }
.header-title { padding-left:18px; }
.header-title strong { display:block; color:#bea5ff; font-size:26px; }
.header-title span { color:#d3d3d3; font-size:13px; }
.kicker { color:var(--muted); font-size:11px; letter-spacing:.08em; margin-bottom:18px; }
.card { background:var(--card); padding:18px 22px; margin: 0 0 18px; border-radius:0; }
.card h2 { margin:0 0 14px; color:var(--orange); font-size:18px; }
label { display:block; margin: 12px 0 7px; color:#d8d2ee; font-size:14px; font-weight:600; }
input:not([type="radio"]):not([type="file"]), textarea, select, .selector, .picker { width:100%; min-height:44px; border:0; border-radius:6px; background:var(--input); color:white; padding:10px 12px; outline: none; }
textarea { min-height: 94px; resize: vertical; }
select { appearance:auto; }
.selector, .picker { display:flex; align-items:center; color:#b4aacd; }
.selector.has-value, .picker.has-value, .operario-select.has-value { color:white; }
.operario-select option { color:#111; background:#fff; }
.radio-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:flex-start; padding:4px 0 0; }
.radio-row label { display:flex; align-items:center; gap:7px; margin:0; color:white; min-width:70px; flex:0 1 auto; white-space:nowrap; }
input[type="radio"] { width:22px; height:22px; min-width:22px; min-height:22px; margin:0; padding:0; accent-color: var(--blue); flex:0 0 auto; }
.file-box { margin-top: 8px; }
.file-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.file-row button { background:var(--accent); color:#14121f; border:0; border-radius:6px; padding:10px 12px; font-weight:800; flex:1 1 145px; }
.file-help { color:#bdb6d2; font-size:12px; line-height:1.35; margin-top:7px; }
.file-count { color:#d2cde6; font-size:13px; margin-top:8px; }
.thumbs { display:flex; gap:12px; overflow-x:auto; padding:10px 0 2px; }
.thumb { position:relative; width:92px; min-width:92px; height:92px; background:#191726; overflow:hidden; display:grid; place-items:center; }
.thumb img, .thumb video { width:100%; height:100%; object-fit:cover; }
.thumb .fileicon { color:#c6b9ff; font-size:30px; }
.thumb .size { position:absolute; bottom:0; left:0; right:0; font-size:10px; text-align:center; background:rgba(0,0,0,.7); padding:3px 0; }
.thumb button { position:absolute; right:0; top:0; width:28px; height:28px; border:0; background:#be465a; color:white; font-size:18px; font-weight:800; }
.primary { width:100%; border:0; border-radius:6px; background:var(--accent); color:#14121f; font-weight:900; font-size:15px; padding:14px; margin: 2px 0 12px; }
.secondary { width:100%; border:0; border-radius:6px; background:#545466; color:white; font-weight:800; padding:12px; margin-bottom:12px; }
.status { min-height:22px; color:#d2cde6; font-size:13px; }
.inline-status { color:#fff; font-size:14px; text-align:center; text-shadow:0 1px 4px #000; margin: 8px 0; }
.modal { position:fixed; inset:0; background:var(--bg); z-index:50; display:flex; align-items:center; justify-content:center; padding:28px; }
.modal-card { width:100%; max-width:520px; text-align:center; }
.modal-title { font-size:23px; font-weight:800; margin-bottom:16px; }
.modal-title.ok { color:var(--green); }
.modal-title.err { color:#ff7878; }
.spinner { width:64px; height:64px; margin: 0 auto 18px; border: 6px solid rgba(255,255,255,.18); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-msg { color:#d2cde6; font-size:16px; margin-bottom:14px; line-height:1.35; }
.modal-warn { color:#ffe0b0; background:rgba(255,165,56,.12); border:1px solid rgba(255,165,56,.35); border-radius:8px; padding:10px; font-size:13px; line-height:1.35; margin: 0 0 14px; }
.modal-actions { display:flex; flex-direction:column; gap:10px; }
.modal-btn { display:none; width:100%; border:0; border-radius:6px; background:var(--green); color:#14121f; font-weight:900; padding:13px; }
.modal-retry { background:var(--accent); }
.modal-btn.show { display:block; }
.register-box { min-height:100dvh; background: var(--deep) url('/assets/volta_home_bg.png') center/cover no-repeat; padding: calc(52px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:center; }
.register-card { background:rgba(20,18,31,.92); border:1px solid rgba(255,255,255,.13); padding:22px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.register-card h1 { margin:0 0 8px; color:#fff; }
.register-card p { color:#d3d3d3; font-size:14px; }
.notice { background:rgba(255,165,56,.12); border:1px solid rgba(255,165,56,.4); padding:10px; font-size:13px; margin:12px 0; color:#ffe0b0; }
.hidden { display:none !important; }
@media (max-width: 390px) {
  .home-title { font-size:40px; }
  .subtitle { font-size:16px; }
  .home-spacer { height:90px; }
  .btn3d { font-size:19px; padding-left:22px; min-height:64px; }
  .screen { padding-left:18px; padding-right:18px; }
  .card { padding-left:16px; padding-right:16px; }
}

.modal-wake{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#d9e8ff;
  font-weight:700;
  font-size:14px;
  line-height:1.25;
}
.modal-wake.wake-ok{
  background:rgba(0,180,90,.18);
  color:#d7ffe8;
}
.modal-wake.wake-warn{
  background:rgba(255,170,0,.18);
  color:#fff1c2;
}