:root {
  --bg:#0E0E10; --bg2:#17171B; --bg3:#222228; --fg:#F4F4F5; --muted:#A1A1AA; --muted2:#71717A;
  --accent:#FF6B57; --green:#4ADE80; --blue:#5B9DFF; --tint:#1A1A22;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--fg); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body { overscroll-behavior-y:none; }
button { font-family:inherit; color:inherit; border:0; background:transparent; cursor:pointer; padding:0; }
h1,h2,h3 { font-family:'Space Grotesk',Inter,sans-serif; margin:0; letter-spacing:-.01em; }
[hidden] { display:none !important; }
.screen { max-width:640px; margin:0 auto; min-height:100vh; padding:calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 110px); }

/* ---------- copertine ---------- */
.cov { position:relative; overflow:hidden; background:var(--c, #333); border-radius:8px; aspect-ratio:1; flex-shrink:0; }
.cov img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cov.ph { background:linear-gradient(135deg, var(--c,#444), color-mix(in srgb, var(--c,#444) 35%, #000)); display:flex; align-items:flex-end; }
.cov.ph span { font-family:'Space Grotesk',sans-serif; font-weight:700; color:rgba(255,255,255,.92); padding:10%; line-height:1.05; font-size:var(--fs,15px); }

/* ---------- accesso ---------- */
.login { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:100vh; gap:18px;
  padding:calc(var(--safe-t) + 24px) 28px calc(var(--safe-b) + 24px);
  background:radial-gradient(120% 60% at 50% 0%, rgba(255,107,87,.22), transparent 70%), var(--bg); }
.login .logo { width:88px; height:88px; border-radius:22px; box-shadow:0 18px 50px rgba(255,107,87,.35); }
.login h1 { font-size:30px; }
.login p { color:var(--muted); margin:0; line-height:1.5; font-size:15px; max-width:340px; }
.code { font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; letter-spacing:.18em; text-align:center; width:230px;
  background:var(--bg2); border:1.5px solid var(--bg3); border-radius:14px; color:var(--fg); padding:14px 0 14px .18em; outline:none; }
.code:focus { border-color:var(--accent); }
.btn { background:var(--accent); color:#160806; font-weight:700; font-size:16px; border-radius:999px; padding:15px 28px; min-width:230px; }
.btn:disabled { opacity:.45; }
.btn.ghost { background:transparent; color:var(--muted); font-weight:600; padding:8px; min-width:0; }
.err { color:#FF8A7A; font-size:14px; min-height:20px; }
.steps { text-align:left; background:var(--bg2); border-radius:14px; padding:16px 18px; font-size:15px; line-height:1.7; color:var(--fg); }
.steps b { color:var(--accent); }
.hello { font-size:26px; font-family:'Space Grotesk',sans-serif; font-weight:700; }

/* ---------- home ---------- */
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.top h1 { font-size:28px; }
.avatar { width:38px; height:38px; border-radius:19px; background:var(--accent); color:#160806; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; }
.sect { font-size:20px; margin:26px 0 12px; }
.cont { display:flex; gap:12px; overflow-x:auto; margin:0 -20px; padding:0 20px 4px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cont::-webkit-scrollbar { display:none; }
.card-c { flex:0 0 150px; scroll-snap-align:start; text-align:left; }
.card-c .cov { width:150px; border-radius:10px; }
.card-c b { display:block; font-size:14px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-c small { display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.bar { height:3px; border-radius:2px; background:rgba(255,255,255,.18); margin-top:7px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); border-radius:2px; }
.grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 14px; }
@media (min-width:560px) { .grid { grid-template-columns:repeat(3, 1fr); } }
.card-g { text-align:left; min-width:0; }
.card-g .cov { width:100%; border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.35); --fs:20px; }
.card-g b { display:block; font-size:15px; margin-top:9px; line-height:1.25; }
.card-g small { display:block; font-size:13px; color:var(--muted); margin-top:3px; }
.empty { color:var(--muted); text-align:center; padding:60px 20px; line-height:1.6; }
.menu { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; z-index:60; }
.menu > div { width:100%; max-width:640px; margin:0 auto; background:var(--bg2); border-radius:18px 18px 0 0; padding:20px 20px calc(var(--safe-b) + 20px); }
.menu .who { font-weight:700; font-size:17px; } .menu .role { color:var(--muted); font-size:13px; margin:2px 0 16px; }
.menu button { display:block; width:100%; text-align:left; padding:14px 0; font-size:16px; border-top:1px solid var(--bg3); }
.menu .danger { color:#FF8A7A; }

/* ---------- gruppo ---------- */
.ghead { margin:calc(-1 * (var(--safe-t) + 16px)) -20px 0; padding:calc(var(--safe-t) + 12px) 20px 22px;
  background:linear-gradient(180deg, var(--tint) 0%, var(--tint) 45%, var(--bg) 100%); }
.back { width:40px; height:40px; border-radius:20px; background:rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; }
.ghead .cov { width:min(56vw, 230px); margin:14px auto 18px; border-radius:10px; box-shadow:0 22px 50px rgba(0,0,0,.5); --fs:26px; }
.ghead h1 { font-size:26px; line-height:1.15; }
.ghead .desc { color:rgba(255,255,255,.72); font-size:14px; margin-top:6px; line-height:1.4; }
.ghead .meta { color:rgba(255,255,255,.6); font-size:13px; margin-top:8px; }
.gact { display:flex; align-items:center; justify-content:flex-end; margin-top:6px; }
.bigplay { width:56px; height:56px; border-radius:28px; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(255,107,87,.35); }
.list { margin-top:6px; }
.row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:9px 0; }
.row .cov { width:52px; border-radius:6px; --fs:11px; }
.row .t { flex:1; min-width:0; }
.row .t b { display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.playing .t b { color:var(--accent); }
.row.done .t b { color:var(--muted); }
.row .t small { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-top:3px; }
.row .t .bar { width:70px; margin:0; flex-shrink:0; }
.dot { width:8px; height:8px; border-radius:4px; background:var(--blue); flex-shrink:0; }
.chk { color:var(--green); flex-shrink:0; display:flex; }
.tag { font-size:10px; font-weight:700; letter-spacing:.06em; border:1px solid var(--muted2); color:var(--muted); border-radius:4px; padding:1px 4px; }

/* ---------- mini player ---------- */
.mini { position:fixed; left:8px; right:8px; bottom:calc(var(--safe-b) + 8px); max-width:624px; margin:0 auto; z-index:40;
  background:color-mix(in srgb, var(--mtint, #333) 70%, #000); border-radius:12px; padding:8px; display:flex; align-items:center; gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); overflow:hidden; }
.mini .cov { width:44px; border-radius:6px; --fs:9px; }
.mini .t { flex:1; min-width:0; text-align:left; }
.mini .t b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini .t small { display:block; font-size:12px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini .mp { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.mini .prog { position:absolute; left:8px; right:8px; bottom:0; height:2px; background:rgba(255,255,255,.2); }
.mini .prog i { display:block; height:100%; background:#fff; }

/* ---------- lettore ---------- */
.player { position:fixed; inset:0; z-index:50; overflow-y:auto; background:linear-gradient(180deg, var(--ptint, #333) 0%, color-mix(in srgb, var(--ptint,#333) 40%, #000) 100%);
  transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.player.open { transform:none; }
.pwrap { max-width:460px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; gap:22px;
  padding:calc(var(--safe-t) + 10px) 24px calc(var(--safe-b) + 24px); }
.ptop { display:flex; align-items:center; gap:8px; }
.ptop .c { flex:1; text-align:center; min-width:0; }
.ptop small { display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.65); }
.ptop b { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player .cov.big { width:100%; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5); --fs:34px; }
.prow { display:flex; align-items:center; gap:12px; }
.prow h2 { font-size:22px; line-height:1.2; }
.prow .sub { font-size:14px; color:rgba(255,255,255,.7); margin-top:4px; }
.circle { width:44px; height:44px; border-radius:22px; border:1.5px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.circle.on { background:#1F3D2E; border-color:var(--green); color:var(--green); }
input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:20px; background:transparent; margin:0; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(to right, var(--fg) var(--p,0%), rgba(255,255,255,.25) var(--p,0%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:7px; background:var(--fg); margin-top:-5px; }
input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:rgba(255,255,255,.25); }
input[type=range]::-moz-range-progress { height:4px; border-radius:2px; background:var(--fg); }
.times { display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; font-variant-numeric:tabular-nums; }
.ctrls { display:flex; align-items:center; justify-content:space-between; }
.pill { width:56px; height:44px; border-radius:22px; background:rgba(255,255,255,.14); font-size:14px; font-weight:700; }
.skip { width:56px; height:56px; position:relative; display:flex; align-items:center; justify-content:center; }
.skip span { position:absolute; font-size:10px; font-weight:700; }
.play { width:76px; height:76px; border-radius:38px; background:var(--fg); display:flex; align-items:center; justify-content:center; }
.play:disabled, .skip:disabled { opacity:.35; }
.pnote { font-size:13px; color:rgba(255,255,255,.7); line-height:1.5; text-align:center; margin-top:auto; }

/* ---------- tappa 2.3: video, timer, prossimo ---------- */
.pvid { width:100%; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.pvid video { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.pill { display:flex; align-items:center; justify-content:center; }
.pill.on { background:var(--accent); color:#0E0E10; }
.pill:disabled { opacity:.35; }
.nextbtn { margin-top:10px; padding:10px 18px; border-radius:22px; background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:14px; }