:root{
  --bg:#0b0b0f; --panel:#15151c; --panel-2:#1d1d26; --line:#2a2a36;
  --text:#f4f4f6; --muted:#9a9aa8; --accent:#e50914; --accent-2:#ff3d47;
  --ok:#22c55e; --warn:#f59e0b;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 80% -10%, #24101a 0%, transparent 60%),var(--bg);
  color:var(--text);font-family:Barlow,system-ui,sans-serif;min-height:100vh;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.02em;margin:0 0 .4em;font-weight:400}
h1{font-size:2.6rem}h2{font-size:1.9rem}h3{font-size:1.35rem}
.wrap{max-width:1240px;margin:0 auto;padding:28px 20px 60px}
.foot{text-align:center;color:var(--muted);padding:28px;font-size:.85rem}

.topbar{display:flex;align-items:center;gap:22px;padding:14px 22px;background:rgba(12,12,16,.9);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);flex-wrap:wrap}
.brand{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;display:flex;align-items:center;gap:8px}
.brand b{color:var(--accent)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{padding:7px 13px;border-radius:999px;color:var(--muted);font-weight:600;font-size:.93rem}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--muted)}

.panel{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat b{display:block;font-family:'Bebas Neue',sans-serif;font-size:2.2rem;line-height:1}
.stat span{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}

.posters{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.poster{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;display:block}
.poster:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.55);border-color:#3a3a48}
.poster .art{aspect-ratio:2/3;background:linear-gradient(160deg,#241019,#14141c);display:flex;
  align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:#5c5c6e;position:relative}
.poster .art img{width:100%;height:100%;object-fit:cover}
.poster .meta{padding:10px 12px 13px}
.poster .meta strong{display:block;font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poster .meta small{color:var(--muted);display:block;margin-top:3px}
.bar{height:4px;background:#2a2a36;border-radius:3px;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.badge.reading{background:rgba(229,9,20,.15);color:#ff8b90;border-color:rgba(229,9,20,.35)}
.badge.completed{background:rgba(34,197,94,.14);color:#7ee2a8;border-color:rgba(34,197,94,.3)}

label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:6px;font-weight:600}
input,select,textarea{width:100%;background:#101018;border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:10px;font:inherit;font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(229,9,20,.18)}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:14px}
.cols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 18px}
legend{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;padding:0 8px;color:var(--accent)}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;
  padding:11px 20px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{background:var(--panel-2)}
.btn.sm{padding:6px 12px;font-size:.85rem}
.btn.danger{background:#7f1d1d}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;border:1px solid var(--line);background:var(--panel)}
.flash.ok{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}
.flash.err{border-color:rgba(229,9,20,.5);background:rgba(229,9,20,.12)}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:.93rem}
th{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.85rem;font-weight:600}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.muted{color:var(--muted)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.tabs a{padding:10px 16px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.res{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:12px}
.res .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700}
.note{border-left:3px solid var(--accent);background:var(--panel);padding:14px 16px;border-radius:0 12px 12px 0;margin-bottom:12px}
.note blockquote{margin:0;font-style:italic}
iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}

/* login */
.wrap:has(> .login-wrap){max-width:none;margin:0;padding:0}
.wrap:has(> .login-wrap) ~ .foot{display:none}
.login-wrap{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;overflow:hidden}
.login-hero{display:none;position:relative;overflow:hidden}
.login-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.login-hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,18,20,.55),rgba(18,18,20,.94))}
.login-hero .copy{position:absolute;left:56px;bottom:56px;max-width:30rem}
.login-hero .copy h2{font-family:'Bebas Neue',system-ui,sans-serif;font-size:4rem;line-height:.95;letter-spacing:.02em;margin:0}
.login-hero .copy .grad{background:linear-gradient(135deg,var(--accent),#ff7a45);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-hero .copy p{margin-top:16px}
.login-side{display:flex;flex-direction:row;align-items:center;justify-content:center;min-width:0;min-height:100vh;min-height:100svh;padding:32px 24px}
.login-card{width:min(100%,430px);padding:34px 32px;margin:0;border-radius:18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.login-brand{font-family:'Bebas Neue',system-ui,sans-serif;font-size:2rem;letter-spacing:.02em;display:block;margin-bottom:18px}
.login-card h1{font-size:2rem;margin:0}
.login-card input{min-height:44px}
.login-card .btn{min-height:44px}

@media(max-width:479px){
  .login-side{padding:20px 16px}
  .login-card{padding:28px 24px}
  .login-brand{font-size:1.85rem;margin-bottom:16px}
}

@media(min-width:640px) and (max-width:1023px){
  .login-wrap{grid-template-rows:minmax(250px,34svh) minmax(0,1fr)}
  .login-hero{display:block;min-height:250px}
  .login-hero img{object-position:center 43%}
  .login-hero .veil{background:linear-gradient(180deg,rgba(18,18,20,.28),rgba(11,11,15,.96))}
  .login-hero .copy{left:clamp(28px,6vw,52px);right:28px;bottom:28px;max-width:34rem}
  .login-hero .copy h2{font-size:clamp(2.65rem,7vw,3.6rem)}
  .login-hero .copy p{margin:10px 0 0;max-width:32rem}
  .login-side{min-height:0;padding:28px 24px 40px;align-items:flex-start}
}

@media(min-width:1024px){
  .login-wrap{grid-template-columns:minmax(0,1.15fr) minmax(440px,1fr)}
  .login-hero{display:block}
  .login-side{min-height:100vh;min-height:100svh;padding:48px 32px}
}

@media(max-height:650px) and (max-width:639px){
  .login-side{align-items:flex-start;padding-top:18px;padding-bottom:18px}
  .login-card{padding-top:24px;padding-bottom:24px}
}

/* ============================ SandyReads layer ============================ */
.brand span{display:flex;flex-direction:column;line-height:1}
.brand span em{font-family:Barlow,sans-serif;font-style:normal;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.brand .blogo{color:var(--accent)}
.nav a.on{background:rgba(229,9,20,.16);color:#fff;border:1px solid rgba(229,9,20,.35)}
.wrap.has-bottomnav{padding-bottom:96px}

.bottomnav{display:none}
@media (max-width:860px){
  .topbar .nav{display:none}
  .bottomnav{display:flex;position:fixed;inset:auto 0 0 0;z-index:40;background:rgba(12,12,16,.96);
    border-top:1px solid var(--line);backdrop-filter:blur(10px);padding:6px 4px 8px}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;
    color:var(--muted);font-weight:600}
  .bottomnav a span{font-size:1.15rem}
  .bottomnav a.on{color:var(--accent)}
  .who .btn.sm{padding:5px 10px}
  h1{font-size:2rem}
}

.hero-greet{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.hero-greet h1{margin:0}
.hero-greet p{margin:4px 0 0;color:var(--muted)}
.lvl{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px}
.lvl b{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--accent)}
.lvl .bar{width:120px;margin:0}

.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.kpi small{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.09em}
.kpi b{display:block;font-family:'Bebas Neue',sans-serif;font-size:2.3rem;line-height:1.05;margin-top:4px}
.kpi.accent{border-color:rgba(229,9,20,.4);background:linear-gradient(180deg,rgba(229,9,20,.16),rgba(229,9,20,.03))}
.kpi.accent b{color:#ff6a70}

.now-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.now{display:flex;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.now .cover{width:86px;min-width:86px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:#241019;
  display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.7rem;color:#5c5c6e}
.now .cover img{width:100%;height:100%;object-fit:cover}
.now h3{margin:0 0 2px}
.now .facts{font-size:.8rem;color:var(--muted);margin:8px 0 6px;line-height:1.6}
.now .row{margin-top:10px}

.task-hero{background:linear-gradient(120deg,rgba(229,9,20,.18),rgba(255,255,255,.03));
  border:1px solid rgba(229,9,20,.32);border-radius:18px;padding:22px}
.task-hero h2{margin-bottom:4px}
.tasklist{list-style:none;margin:0;padding:0}
.tasklist li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tasklist li:last-child{border-bottom:none}
.tasklist .tt{flex:1;min-width:180px}
.tasklist .tt small{display:block;color:var(--muted)}
.tasklist li.done .tt strong{text-decoration:line-through;color:var(--muted)}
.xp{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);color:#fbbf24;
  border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:700;white-space:nowrap}

.bar.lg{height:9px;border-radius:6px}
.progline{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:5px}

.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:4px}
.heat i{display:block;aspect-ratio:1;border-radius:3px;background:#1c1c25;border:1px solid #23232e}
.heat i.l1{background:rgba(229,9,20,.3)}.heat i.l2{background:rgba(229,9,20,.55)}
.heat i.l3{background:rgba(229,9,20,.8)}.heat i.l4{background:#ff3d47}

.ach{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ach .a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;opacity:.42}
.ach .a.on{opacity:1;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08)}
.ach .a em{font-size:1.7rem;font-style:normal;display:block}
.ach .a b{display:block;margin-top:6px;font-size:.9rem}
.ach .a small{color:var(--muted);font-size:.76rem}

.timer{font-family:'Bebas Neue',sans-serif;font-size:5rem;line-height:1;letter-spacing:.04em;text-align:center;margin:10px 0}
.card-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tag{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.hot{border-color:rgba(229,9,20,.4);color:#ff8b90}
.chartbars{display:flex;align-items:flex-end;gap:6px;height:170px}
.chartbars div{flex:1;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:5px 5px 0 0;min-height:2px;position:relative}
.chartlabels{display:flex;gap:6px;margin-top:6px}
.chartlabels span{flex:1;text-align:center;font-size:.66rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;background:rgba(229,9,20,.95);
  color:#fff;padding:14px 24px;border-radius:14px;font-weight:700;box-shadow:0 18px 40px rgba(0,0,0,.6);
  animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translate(-50%,16px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}