/* style.css — Base SSE */

:root {
  --bg:        #07101e;
  --surface:   #0e1e32;
  --panel:     #152840;
  --border:    #254060;
  --border-hi: #4a70a0;
  --amber:     #fbbf24;
  --amber-bg:  #3a2a00;
  --green:     #34d399;
  --green-bg:  #003a22;
  --blue:      #60a5fa;
  --blue-bg:   #0a2040;
  --red:       #f87171;
  --red-bg:    #1a0505;
  --t1:        #f0f4ff;
  --t2:        #c8daf5;
  --t3:        #92aed0;
  --mono:      'JetBrains Mono', monospace;
  --display:   'Barlow Condensed', sans-serif;
  --body:      'Barlow', sans-serif;
}

body.day {
  --bg:        #f4f6fa;
  --surface:   #ffffff;
  --panel:     #e8edf5;
  --border:    #c8d4e8;
  --border-hi: #7a96c0;
  --amber-bg:  #fff3cc;
  --green-bg:  #d4f5e7;
  --blue-bg:   #ddeeff;
  --red-bg:    #ffeaea;
  --t1:        #0d1b2e;
  --t2:        #2a3f5a;
  --t3:        #5a7090;
}

/* ── Reset ────────────────────────────────── */
* {
  margin:0; padding:0; box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-x pan-y;
}
html { touch-action:pan-x pan-y; }

html, body {
  width:100%; min-height:100vh;
  background:var(--bg); color:var(--t1);
  font-family:var(--body); font-size:16px;
  overflow-x:hidden;
}

/* ── Schermate ───────────────────────────── */
.screen {
  display:none; min-height:100vh; flex-direction:column;
  background:var(--bg); color:var(--t1);
  animation:fadeIn .3s ease;
}
.screen.active { display:flex; }
.hidden { display:none !important; }

@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── Topbar ──────────────────────────────── */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem;
  background:var(--surface);
  border-bottom:2px solid var(--border);
  gap:.4rem;
  flex-shrink:0;
  position:relative; z-index:200;
}
.topbar-left  { display:flex; align-items:center; gap:.5rem; }
.topbar-right { display:flex; align-items:center; gap:.35rem; }

.tb-appname {
  font-family:var(--display); font-size:1rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; color:var(--t1);
}
.tb-appname em { color:var(--amber); font-style:normal; }

.tb-badge {
  font-family:var(--mono); font-size:.65rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:#e53e3e;
  border:1px solid #fc8181;
  padding:.2rem .5rem; border-radius:4px;
  flex-shrink:0;
}

.tb-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--panel); border:2px solid var(--border-hi);
  border-radius:9px; cursor:pointer;
  color:var(--t1); font-family:var(--display);
  font-size:.9rem; font-weight:700;
  transition:all .15s; flex-shrink:0;
}
.tb-btn:active { transform:scale(.93); background:var(--border); }
.tb-btn.disabled { opacity:.25; pointer-events:none; }
.tb-btn svg { width:18px; height:18px; }

/* ── Bottoni ─────────────────────────────── */
.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--amber); color:#000;
  font-family:var(--display); font-size:1.15rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  border:none; border-radius:12px; padding:1rem 1.5rem;
  cursor:pointer; width:100%; transition:all .15s;
}
.btn-primary:active { transform:scale(.97); }

.btn-ghost {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--panel); color:var(--t2);
  border:2px solid var(--border-hi);
  font-family:var(--display); font-size:1rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  border-radius:12px; padding:.85rem 1.5rem;
  cursor:pointer; width:100%; transition:all .15s;
}
.btn-ghost:active { transform:scale(.97); }

/* ── Splash ──────────────────────────────── */
#splash { flex-direction:column; position:relative; overflow:hidden; }

.splash-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(#254060 1px,transparent 1px),linear-gradient(90deg,#254060 1px,transparent 1px);
  background-size:44px 44px; opacity:.18;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black 15%,transparent 100%);
}
.splash-glow {
  position:absolute; top:-15%; left:50%; transform:translateX(-50%);
  width:500px; height:380px;
  background:radial-gradient(ellipse,#1d4ed825 0%,transparent 70%);
  pointer-events:none;
}
.splash-content {
  position:relative; text-align:center;
  padding:1.5rem 1.8rem; max-width:420px; width:100%;
  display:flex; flex-direction:column;
  flex:1; align-items:center; justify-content:center;
  margin:0 auto;
}
.logo-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:20px;
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  box-shadow:0 0 0 2px #3b82f640,0 20px 60px #2563eb30;
  margin:0 auto 1.4rem;
  animation:logoIn .6s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes logoIn { from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)} }
.logo-wrap svg { width:40px; height:40px; }

.splash-eyebrow {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); background:var(--amber-bg);
  border:1px solid #fbbf2440; border-radius:100px;
  padding:.32rem .9rem; margin-bottom:1.2rem;
}
.splash-eyebrow::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--amber); animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

.splash-title { font-family:var(--display); font-size:3.4rem; font-weight:800; line-height:.9; text-transform:uppercase; color:var(--t1); margin-bottom:.9rem; }
.splash-title em { color:var(--amber); font-style:normal; }
.splash-sub { font-size:1rem; color:var(--t2); line-height:1.6; margin-bottom:1.4rem; }
.divider { width:44px; height:2px; background:linear-gradient(90deg,var(--amber),transparent); margin:0 auto 1.4rem; }
.stat-row { display:flex; justify-content:center; gap:2.2rem; margin-bottom:1.8rem; }
.stat-val { font-family:var(--display); font-size:1.7rem; font-weight:700; color:var(--t1); }
.stat-lbl { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--t3); text-transform:uppercase; margin-top:.1rem; }
.splash-btns { display:flex; flex-direction:column; gap:.8rem; }

/* ── Onboarding ──────────────────────────── */
.ob-hdr {
  padding:1.2rem 1.4rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.back-btn {
  display:flex; align-items:center; gap:.3rem;
  background:none; border:none; color:var(--t2);
  font-family:var(--body); font-size:.9rem;
  cursor:pointer; padding:.4rem; border-radius:8px;
}
.back-btn svg { width:16px; height:16px; }
.step-ctr {
  font-family:var(--mono); font-size:.7rem; color:var(--t2);
  letter-spacing:.1em; background:var(--panel);
  padding:.3rem .8rem; border-radius:100px; border:1px solid var(--border);
}
.prog-track { height:3px; background:var(--border); flex-shrink:0; }
.prog-fill  { height:100%; background:linear-gradient(90deg,var(--blue),var(--amber)); transition:width .4s; }

.ob-body { flex:1; padding:1.8rem 1.4rem 1rem; overflow-y:auto; }
.step-tag { font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; color:var(--amber); text-transform:uppercase; margin-bottom:.6rem; }
.step-q { font-family:var(--display); font-size:2rem; font-weight:800; line-height:1.05; text-transform:uppercase; color:var(--t1); margin-bottom:.5rem; }
.step-hint { font-size:.9rem; color:var(--t2); line-height:1.55; margin-bottom:1.6rem; }

.name-wrap { position:relative; }
.name-input {
  width:100%; background:var(--panel);
  border:2px solid var(--border); border-radius:14px;
  padding:1.1rem 3.5rem 1.1rem 1.3rem;
  font-family:var(--display); font-size:1.6rem; font-weight:700;
  color:var(--t1); outline:none; text-transform:capitalize;
  transition:border-color .2s; caret-color:var(--amber);
}
.name-input::placeholder { color:var(--t3); font-weight:300; font-size:1.2rem; text-transform:none; }
.name-input:focus { border-color:var(--amber); }
.name-check { position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); font-size:1.4rem; opacity:0; transition:opacity .25s; }

.opts { display:flex; flex-direction:column; gap:.7rem; }
.opt {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem; border-radius:14px;
  border:2px solid var(--border); background:var(--surface);
  cursor:pointer; transition:all .15s;
}
.opt:active, .opt.sel { border-color:var(--amber); background:var(--amber-bg); }
.opt-icon { width:40px; height:40px; border-radius:10px; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.opt-title { font-family:var(--display); font-size:1.1rem; font-weight:700; text-transform:uppercase; color:var(--t1); }
.opt-sub { font-size:.82rem; color:var(--t2); margin-top:.15rem; }
.opt-radio { margin-left:auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--border-hi); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.opt.sel .opt-radio { background:var(--amber); border-color:var(--amber); }
.opt.sel .opt-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:#000; }

.ob-footer { padding:1rem 1.4rem 2rem; flex-shrink:0; }
.btn-next {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--amber); color:#000;
  font-family:var(--display); font-size:1.1rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  border:none; border-radius:12px; padding:1rem;
  cursor:pointer; width:100%; transition:all .15s;
}
.btn-next:disabled { opacity:.25; pointer-events:none; }

/* ── Lezioni ─────────────────────────────── */
#lessons-dynamic { flex-direction:column; }
.lessons-scroll { flex:1; overflow-y:auto; padding:1.4rem; }

/* ── Recap ───────────────────────────────── */
#recap { flex-direction:column; }
.recap-body { flex:1; overflow-y:auto; padding:1.4rem; }
.rc-date { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--t3); text-transform:uppercase; margin-bottom:.6rem; }
.rc-greeting { font-family:var(--display); font-size:2.1rem; font-weight:800; text-transform:uppercase; line-height:1; color:var(--t1); margin-bottom:1.6rem; }
.rc-greeting em { color:var(--amber); font-style:normal; }
.sec-lbl { font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin-bottom:.8rem; margin-top:1.2rem; }
.rc-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.3rem; margin-bottom:.4rem; }
.rc-stat { flex:1; background:var(--panel); border-radius:10px; padding:.8rem; text-align:center; }
.rc-stat-val { font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--t1); line-height:1; }
.rc-stat-val.g { color:var(--green); }
.rc-stat-val.a { color:var(--amber); }
.rc-stat-lbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-top:.25rem; }
.rc-today { background:var(--blue-bg); border:2px solid #60a5fa35; border-radius:14px; padding:1.2rem 1.3rem; margin-bottom:.4rem; }
.rc-today-lbl { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--blue); text-transform:uppercase; margin-bottom:.4rem; }
.rc-today-title { font-family:var(--display); font-size:1.2rem; font-weight:800; text-transform:uppercase; color:var(--t1); margin-bottom:.4rem; }
.rc-today-desc { font-size:.88rem; color:var(--t2); line-height:1.55; }
.rc-streak { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.3rem; display:flex; align-items:center; gap:1rem; margin-bottom:.4rem; }
.rc-streak-icon { font-size:2rem; flex-shrink:0; }
.rc-streak-val { font-family:var(--display); font-size:1.6rem; font-weight:800; color:var(--amber); }
.rc-streak-lbl { font-size:.85rem; color:var(--t2); margin-top:.1rem; }
.rc-streak-badge { margin-left:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:var(--green-bg); border:1px solid #34d39930; padding:.28rem .7rem; border-radius:100px; }

/* ── Dashboard ───────────────────────────── */
#dashboard { flex-direction:column; }
.dash-hdr { padding:1rem 1.4rem; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.dash-body { flex:1; overflow-y:auto; padding:1.4rem; }
.act-row {
  display:flex; align-items:center; gap:.9rem;
  padding:.95rem 1.1rem; border-radius:12px;
  border:2px solid var(--border); background:var(--surface);
  cursor:pointer; transition:all .15s; margin-bottom:.6rem;
}
.act-row:active:not(.lkd) { border-color:var(--border-hi); }
.act-row.cur { border-color:var(--amber); background:var(--amber-bg); }
.act-row.lkd { opacity:.35; pointer-events:none; }
.act-icon { width:40px; height:40px; border-radius:10px; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.act-title { font-family:var(--display); font-size:1rem; font-weight:700; text-transform:uppercase; color:var(--t1); line-height:1; }
.act-sub { font-size:.8rem; color:var(--t2); margin-top:.15rem; }
.act-bdg { margin-left:auto; flex-shrink:0; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:.18rem .6rem; border-radius:100px; }
.bdg-done { color:var(--green); background:var(--green-bg); border:1px solid #34d39940; }
.bdg-cur  { color:#000; background:var(--amber); font-weight:700; }
.bdg-lkd  { color:var(--t3); background:var(--panel); border:1px solid var(--border); }

/* ── Teoria ──────────────────────────────── */
#teoria { flex-direction:column; }
.teoria-prog-bar { height:3px; background:var(--border); flex-shrink:0; }
.teoria-scroll { flex:1; overflow-y:auto; padding:1.4rem; }
.teoria-page { display:block; }
.teoria-nav {
  padding:.9rem 1.4rem;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-shrink:0;
}
.nav-btn {
  display:flex; align-items:center; gap:.4rem;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:.6rem 1rem;
  font-family:var(--display); font-size:.9rem; font-weight:700;
  text-transform:uppercase; color:var(--t2); cursor:pointer;
}
.nav-btn.next { background:var(--amber); border:none; color:#000; }
.nav-btn svg { width:16px; height:16px; }
.page-ind { font-family:var(--mono); font-size:.7rem; color:var(--t3); }

/* ── Flashcard ───────────────────────────── */
#flashcard { flex-direction:column; }
.fc-subhdr { padding:.8rem 1.4rem; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.fc-body { flex:1; display:flex; flex-direction:column; padding:1.4rem; gap:1.2rem; }
.fc-card {
  flex:1; border-radius:18px; border:2px solid var(--border);
  background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1.5rem; text-align:center; cursor:pointer;
  min-height:200px; transition:all .25s;
}
.fc-eval { display:none; flex-direction:column; gap:.6rem; }
.rate-btn { flex:1; background:var(--surface); border-radius:12px; padding:.9rem; font-family:var(--display); font-size:1rem; font-weight:700; text-transform:uppercase; cursor:pointer; }

/* ── Quiz ────────────────────────────────── */
#quiz { flex-direction:column; }
.qz-subhdr { padding:.8rem 1.4rem; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.qz-body { flex:1; overflow-y:auto; padding:1.4rem; }
.qz-opt { display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; border-radius:12px; border:2px solid var(--border); background:var(--surface); cursor:pointer; margin-bottom:.65rem; }
.qz-num { width:28px; height:28px; border-radius:50%; background:var(--panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.7rem; color:var(--t3); flex-shrink:0; }

/* ── Quiz result ─────────────────────────── */
#quiz-result { flex-direction:column; }
.qr-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; text-align:center; }

/* ── Highlight ───────────────────────────── */
#hl-tooltip {
  display:none; position:fixed; z-index:999;
  background:var(--amber); color:#000;
  font-family:var(--display); font-size:.85rem; font-weight:700;
  text-transform:uppercase; padding:.4rem .9rem;
  border-radius:100px; cursor:pointer;
  box-shadow:0 4px 16px #0006;
}
mark.hl { background:#fbbf2450; color:inherit; border-radius:3px; padding:0 2px; cursor:pointer; }

/* ── TTS button ──────────────────────────── */
#tts-btn { border-color:var(--border-hi); }

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--border-hi); border-radius:99px; }