:root{
  --bg-0:#0b1220; --bg-1:#0f1830; --bg-2:#0a1426;
  --card:#111c34; --card-2:#16223d; --field:#0f1a30;
  --ink:#eef2f9; --ink-soft:#c7d2e4; --muted:#8a99b5; --faint:#5b6b88;
  --line:#26344f; --line-soft:#1d2a45;
  --accent:#38bdf8; --accent-2:#0ea5e9; --accent-ink:#04141f;
  --danger:#f87171; --ok:#34d399;
  --r-card:18px; --r-ctrl:12px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(900px 500px at 50% -8%, #16264a 0%, rgba(22,38,74,0) 60%),
    radial-gradient(700px 600px at 110% 10%, #122a44 0%, rgba(18,42,68,0) 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 60%,var(--bg-2));
  color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:18px;
}
.app{width:min(460px,94vw); display:flex; flex-direction:column; min-height:min(760px,90dvh); justify-content:center}

/* Header / wordmark */
.top{text-align:center; margin:0 0 22px}
.top h1{
  margin:0; font-size:25px; font-weight:600; letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:9px;
}
.top h1::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #7dd3fc, var(--accent-2));
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
}
.top .sub{margin:7px 0 0; color:var(--muted); font-size:13.5px; letter-spacing:.01em}

/* Screens */
.screen{display:none}
.screen.active{display:block}

/* Card */
.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:24px 22px; box-shadow:var(--shadow);
  animation:rise .28s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(8px) scale(.99)}to{opacity:1; transform:none}}
.card h2{margin:0 0 4px; font-size:19px; font-weight:600; letter-spacing:-.01em; text-align:center}

/* Registrazione */
.rec-card{display:flex; flex-direction:column; align-items:center; gap:16px; padding:34px 22px}
.rec-btn{
  width:148px; height:148px; border-radius:50%; border:none; cursor:pointer; position:relative;
  background:radial-gradient(circle at 50% 40%, #213a61 0%, #102038 72%);
  box-shadow:0 18px 50px -12px rgba(56,189,248,.28), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(125,211,252,.10);
  display:flex; align-items:center; justify-content:center; transition:transform .14s ease, box-shadow .25s ease;
}
.rec-btn:active{transform:scale(.96)}
.rec-dot{width:50px; height:50px; border-radius:16px; background:linear-gradient(180deg,#fb7185,#ef4444); transition:all .22s cubic-bezier(.2,.7,.2,1); box-shadow:0 6px 18px rgba(239,68,68,.4)}
.rec-btn.recording{animation:pulse 1.5s ease-in-out infinite}
.rec-btn.recording .rec-dot{width:36px; height:36px; border-radius:9px}
@keyframes pulse{0%,100%{box-shadow:0 18px 50px -12px rgba(239,68,68,.30), inset 0 0 0 1px rgba(248,113,113,.2)}50%{box-shadow:0 18px 70px -6px rgba(239,68,68,.55), inset 0 0 0 1px rgba(248,113,113,.35)}}
.timer{font-variant-numeric:tabular-nums; font-size:34px; font-weight:600; letter-spacing:.04em}
.hint{color:var(--muted); font-size:13.5px; min-height:18px}
.wave{opacity:.65}

/* Card body */
.playback{width:100%; margin-bottom:16px}
.field{display:block; margin-bottom:15px}
.field>span{display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px; font-weight:500; letter-spacing:.01em}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; border-radius:var(--r-ctrl); border:1px solid var(--line);
  background:var(--field); color:var(--ink); font-size:16px; outline:none; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease; resize:vertical;
}
.field textarea{overflow:hidden; min-height:46px; line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,.14);
}
.field select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a99b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:40px;
}

/* Buttons */
.row{display:flex; gap:12px; margin-top:18px}
.btn{
  flex:1; padding:14px 16px; border-radius:var(--r-ctrl); border:1px solid transparent;
  font-size:15.5px; font-weight:600; cursor:pointer; transition:filter .12s ease, transform .08s ease, background .15s ease; letter-spacing:.01em;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#5ec8fb,var(--accent-2)); color:var(--accent-ink); box-shadow:0 8px 20px -8px rgba(14,165,233,.6)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:rgba(255,255,255,.02); border-color:var(--line); color:var(--ink-soft)}
.btn.ghost:hover{background:rgba(255,255,255,.05)}

/* Toggle "altra email" */
.wa-block{margin:2px 0 4px; border-radius:var(--r-ctrl); overflow:hidden}
.wa-block summary{
  cursor:pointer; color:var(--accent); font-size:13.5px; font-weight:500; list-style:none;
  display:inline-flex; align-items:center; gap:7px; padding:6px 2px;
}
.wa-block summary::-webkit-details-marker{display:none}
.wa-block summary::before{content:"+"; font-weight:600; font-size:15px; line-height:1}
.wa-block[open] summary::before{content:"\2013"}

/* Stato */
.spinner{
  width:44px; height:44px; margin:2px auto 16px; border-radius:50%;
  border:3.5px solid rgba(255,255,255,.08); border-top-color:var(--accent);
  animation:spin .9s linear infinite; transform-origin:50% 50%; will-change:transform;
}
@keyframes spin{to{transform:rotate(360deg)}}
.status-msg{text-align:center; color:var(--muted); font-size:13.5px; line-height:1.55; margin:0 0 6px}
.report{
  white-space:pre-wrap; background:var(--field); border:1px solid var(--line-soft);
  border-radius:var(--r-ctrl); padding:14px; font-size:13px; line-height:1.55; max-height:42vh; overflow:auto; color:var(--ink-soft);
}
#statusTitle{font-size:19px; font-weight:600; text-align:center; margin-bottom:8px}
.ok .spinner{display:none}
.ok #statusTitle{color:var(--ok)}
.err .spinner{display:none}
.err #statusTitle{color:var(--danger)}

/* Trust footer */
.trust{margin:18px auto 0; text-align:center; color:var(--faint); font-size:11.5px; letter-spacing:.01em; line-height:1.5}
.trust b{color:var(--muted); font-weight:500}

/* fix: hidden vince su display di classe */
[hidden]{display:none !important}

/* Dialog accesso */
dialog{border:none; background:transparent; padding:0}
dialog::backdrop{background:rgba(5,9,20,.72); backdrop-filter:blur(6px)}
dialog .card{width:min(380px,92vw)}

@media (max-width:430px){
  .card{padding:22px 18px}
  .rec-btn{width:132px; height:132px}
}