/* Presenze QR — App utente (cellulare) — tema dark */
:root{
  --bg:#12151c; --bg-2:#171b24; --bg-3:#1e232e;
  --line:#2a303c; --line-2:#353c4a;
  --txt:#e6e9ef; --txt-2:#9aa3b2; --txt-3:#646d7d;
  --ok:#3dd7a0; --ok-dim:rgba(61,215,160,.12);
  --warn:#e0a458; --warn-dim:rgba(224,164,88,.12);
  --bad:#e0685f; --bad-dim:rgba(224,104,95,.12);
  --info:#6ba7e0; --info-dim:rgba(107,167,224,.12);
  --mono:ui-monospace,'SF Mono','Roboto Mono',Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);background:var(--bg);color:var(--txt);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
}
.wrap{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* Header app */
.app-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10;
}
.app-head .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.app-head .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-dim)}
.app-head .me{font-family:var(--mono);font-size:13px;color:var(--txt-2);background:var(--bg-2);border:1px solid var(--line);padding:4px 10px;border-radius:20px;letter-spacing:1px}

.content{flex:1;padding:20px 18px;display:flex;flex-direction:column}

/* Tab bar in basso */
.tabbar{
  display:flex;border-top:1px solid var(--line);background:var(--bg-2);position:sticky;bottom:0;
}
.tabbar a{
  flex:1;text-align:center;padding:11px 0 13px;color:var(--txt-3);text-decoration:none;font-size:11px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.tabbar a svg{width:22px;height:22px;stroke-width:1.8}
.tabbar a.active{color:var(--ok)}

/* Pulsanti */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:12px;border:none;font-size:15px;font-weight:650;
  cursor:pointer;font-family:inherit;width:100%;transition:.12s;text-decoration:none;
}
.btn-primary{background:var(--ok);color:#0a1310}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:var(--bg-2);color:var(--txt);border:1px solid var(--line)}
.btn svg{width:19px;height:19px;stroke-width:2.2}
.btn:disabled{opacity:.5}

/* Scanner */
.scanner-box{
  position:relative;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:#000;border:1px solid var(--line);margin-bottom:8px;
}
.scanner-box video{width:100%;height:100%;object-fit:cover}
.scanner-box canvas{display:none}
.scan-frame{
  position:absolute;inset:16%;border:2px solid var(--ok);border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
}
.scan-frame::before,.scan-frame::after,.scan-corner::before,.scan-corner::after{content:'';position:absolute;width:22px;height:22px;border:3px solid var(--ok)}
.scan-frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.scan-frame::after{top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.scan-corner::before{bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.scan-corner::after{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.scan-hint{text-align:center;color:var(--txt-3);font-size:13px;margin:10px 0 4px}

/* Stato/esito */
.esito{
  border-radius:16px;padding:28px 22px;text-align:center;margin:auto 0;
}
.esito .ico{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.esito .ico svg{width:38px;height:38px;stroke-width:2.5}
.esito.ok .ico{background:var(--ok-dim);color:var(--ok)}
.esito.ko .ico{background:var(--bad-dim);color:var(--bad)}
.esito.wait .ico{background:var(--info-dim);color:var(--info)}
.esito h2{font-size:20px;margin-bottom:6px}
.esito p{color:var(--txt-2);font-size:14px}
.esito .big-nome{font-weight:700;font-size:18px;color:var(--txt);margin:2px 0}
.esito .ora{font-family:var(--mono);font-size:15px;color:var(--ok);margin-top:8px}

/* Card generica */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px}
.card + .card{margin-top:12px}

/* Storico */
.hist-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.hist-row:last-child{border:none}
.hist-date{flex:1}
.hist-date .g{font-weight:600;font-size:14px}
.hist-date .d{color:var(--txt-3);font-size:12px}
.hist-ora{font-family:var(--mono);font-size:15px;color:var(--ok)}
.hist-check{color:var(--ok)}

/* Form */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--txt-2);margin-bottom:7px;font-weight:550}
.field input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--txt);font-size:16px;font-family:inherit}
.field input:focus{outline:none;border-color:var(--ok)}

/* Login a caselle */
.otp-input{display:flex;gap:8px;justify-content:center;margin:8px 0 4px}
.otp-input input{
  width:44px;height:54px;text-align:center;font-size:22px;font-family:var(--mono);font-weight:700;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;color:var(--txt);text-transform:uppercase;
}
.otp-input input:focus{outline:none;border-color:var(--ok);background:var(--ok-dim)}

.msg{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:16px}
.msg-err{background:var(--bad-dim);border:1px solid var(--bad);color:var(--bad)}
.msg-ok{background:var(--ok-dim);border:1px solid var(--ok);color:var(--ok)}
.msg-info{background:var(--info-dim);border:1px solid var(--info);color:var(--info)}

.center-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px;max-width:460px;margin:0 auto}
.logo-big{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:700;margin-bottom:4px;justify-content:center}
.logo-big .dot{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-dim)}
.sub-big{text-align:center;color:var(--txt-3);font-size:14px;margin-bottom:32px}

.spinner{width:28px;height:28px;border:3px solid var(--line-2);border-top-color:var(--ok);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

.link{color:var(--info);text-decoration:none;font-size:14px}
.txt-center{text-align:center}
.mt{margin-top:16px}