/* Каталог: тёмная полка с обложками. Цвет ученика — в --accent, задаётся из catalog.js. */
:root{
  color-scheme:dark;
  --bg:#17131C; --bg2:#231D2A; --line:#3A3242;
  --ink:#F4EEF8; --soft:#A79CB2; --faint:#5E5468;
  --accent:#8F54B9; --accent-light:#C79BEA; --accent-hi:var(--accent-light);
  --gold:#E6B455;
  --display:"Unbounded", "Golos Text", system-ui, sans-serif;
}
/* Светлая тема: выбирается переключателем, хранится у каждого своя. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F6F3F8; --bg2:#EAE4EF; --line:#DAD2E0;
  --ink:#1F1A24; --soft:#6F6577; --faint:#B3A9BB;
  --accent-hi:var(--accent);
}
:root[data-theme="light"] body::before{opacity:.18}
:root[data-theme="light"] .cover{box-shadow:inset 6px 0 0 rgba(0,0,0,.14), 0 18px 34px -22px rgba(40,20,60,.55)}
:root[data-theme="light"] .cover.done{filter:saturate(.5) brightness(1.08) opacity(.85)}
:root[data-theme="light"] .meter .bar i{background:var(--bg2)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none !important}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif; font-size:16px; line-height:1.45;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.4;
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%),
    radial-gradient(600px 400px at -10% 110%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%);
}
.wrap{position:relative; max-width:1080px; margin:0 auto; padding:48px 24px 80px}

/* ── шапка ─────────────────────────────── */
.top{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px}
.topline{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px}

/* ── переключатель темы ────────────────── */
.theme{display:inline-flex; padding:3px; border-radius:999px; background:var(--bg2); border:1px solid var(--line)}
.theme button{font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  border:0; border-radius:999px; padding:6px 12px; background:transparent; color:var(--soft)}
.theme button[aria-pressed=true]{background:var(--ink); color:var(--bg)}
.theme button:focus-visible{outline:2px solid var(--accent-hi); outline-offset:2px}
.who{font-family:var(--display); font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-hi)}
h1{font-family:var(--display); font-weight:800; font-size:clamp(40px,8vw,84px); line-height:.95; letter-spacing:-.04em; margin:10px 0 0}
.meter{min-width:240px}
.meter .row{display:flex; justify-content:space-between; font-size:13px; color:var(--soft); margin-bottom:8px}
.meter .row b{color:var(--ink); font-family:var(--display); font-weight:600}
.meter .bar{display:flex; gap:4px}
.meter .bar i{flex:1; height:10px; border-radius:2px; background:var(--bg2)}
.meter .bar i.f{background:var(--accent-hi)}
.meter .bar i.h{background:linear-gradient(90deg, var(--accent-hi) var(--p, 50%), var(--bg2) var(--p, 50%))}

/* ── фильтры (вид учителя) ─────────────── */
.tools{display:grid; gap:12px; margin-bottom:30px}
input[type=search], select{
  font:inherit; color:var(--ink); background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:10px 13px; min-width:0;
}
input[type=search]::placeholder{color:var(--faint)}
input[type=search]:focus, select:focus{outline:2px solid var(--accent-hi); outline-offset:1px; border-color:transparent}
.selects{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-family:var(--display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  border-radius:999px; padding:7px 13px; background:transparent; color:var(--c, var(--soft));
  border:1px solid color-mix(in srgb, var(--c, var(--soft)) 60%, transparent);
}
.chip[aria-pressed=true]{background:var(--c, var(--ink)); color:#fff; border-color:transparent}
.chip:not([style])[aria-pressed=true]{color:var(--bg)}
.chip:focus-visible{outline:2px solid var(--accent-hi); outline-offset:2px}

/* ── полка ─────────────────────────────── */
h2{font-family:var(--display); font-weight:400; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin:44px 0 16px}
h2:first-child{margin-top:0}
h2 .dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c); margin-right:9px; vertical-align:1px}
.shelf{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px}

.cover{
  position:relative; aspect-ratio:3/4; border-radius:6px 14px 14px 6px; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; padding:18px 18px 16px 24px; text-decoration:none; color:#fff;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.18), 0 20px 40px -24px rgba(0,0,0,.8);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .25s;
  animation:rise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes rise{from{opacity:0; transform:translateY(14px)}}
.cover:hover{transform:translateY(-6px) rotate(-.6deg); box-shadow:inset 6px 0 0 rgba(0,0,0,.18), 0 30px 50px -24px rgba(0,0,0,.9)}
.cover:focus-visible{outline:3px solid var(--accent-hi); outline-offset:4px}
.cover svg.pat{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.cover .n{font-family:var(--display); font-weight:800; font-size:92px; line-height:.8; letter-spacing:-.05em}
.cover .t{margin-top:auto; font-family:var(--display); font-weight:600; font-size:20px; line-height:1.1; letter-spacing:-.02em; overflow-wrap:anywhere}
.cover .s{font-size:14px; opacity:.82; margin-top:5px; line-height:1.3}
.cover .foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.25); font-size:12.5px}
.cover .lv{display:flex; gap:3px; flex-wrap:wrap}
.cover .lv i{width:14px; height:5px; border-radius:1px; background:rgba(255,255,255,.28)}
.cover .lv i.f{background:#fff}
.badge{position:absolute; top:14px; right:14px; font-family:var(--display); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:#241B2B; font-weight:600}
.badge.new{background:var(--gold); color:#2A1E08}
.cover.done{filter:saturate(.55) brightness(.82)}
.cover.done:hover, .cover.done:focus-visible{filter:none}
.cover.done .badge{background:rgba(0,0,0,.35); color:#fff}

/* ── лента (вид учителя) ───────────────── */
.rail .track{display:grid; grid-auto-flow:column; grid-auto-columns:220px; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:10px 4px 36px; margin:-10px -4px -18px; scroll-padding:0 4px}
.rail .track::-webkit-scrollbar{display:none}
.rail .cover{scroll-snap-align:start}
.slide{display:flex; align-items:center; gap:12px; margin-top:4px}
.slide[hidden]{display:none}
.slide button{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--bg2);
  color:var(--ink); font:inherit; font-size:16px; line-height:1; cursor:pointer}
.slide button:disabled{opacity:.35; cursor:default}
.slide button:focus-visible{outline:2px solid var(--accent-hi); outline-offset:2px}
.slide input[type=range]{flex:1; -webkit-appearance:none; appearance:none; height:34px; background:transparent; cursor:pointer; margin:0}
.slide input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:var(--line)}
.slide input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--line)}
.slide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:var(--thumb, 60px); height:14px; margin-top:-5px; border-radius:7px; background:var(--c, var(--accent-hi))}
.slide input[type=range]::-moz-range-thumb{width:var(--thumb, 60px); height:14px; border:0; border-radius:7px; background:var(--c, var(--accent-hi))}
.slide input[type=range]:focus-visible{outline:2px solid var(--accent-hi); outline-offset:2px}
.slide .cnt{flex:none; font-size:12.5px; color:var(--soft); font-variant-numeric:tabular-nums; min-width:62px; text-align:right}

.empty{color:var(--soft); text-align:center; padding:40px 16px; border:1px dashed var(--line); border-radius:14px; margin:0}

@media (max-width:640px){
  .wrap{padding:28px 16px 60px}
  .top{margin-bottom:28px}
  .meter{width:100%}
  .selects{grid-template-columns:1fr 1fr}
  .selects select:first-child{grid-column:1/-1}
  .shelf{grid-template-columns:1fr 1fr; gap:12px}
  .cover{padding:14px 12px 12px 16px}
  .cover .n{font-size:60px}
  .cover .t{font-size:15px}
  .cover .s{font-size:12.5px}
  .cover .foot .d{display:none}
  .rail .track{grid-auto-columns:46vw; gap:12px}
  .who{font-size:11.5px; letter-spacing:.14em}
  .theme button{padding:6px 9px; font-size:10px}
  .slide .cnt{display:none}
  .badge{top:10px; right:10px; font-size:9.5px; padding:4px 7px}
}
@media (prefers-reduced-motion:reduce){
  .cover{animation:none; transition:none}
  .cover:hover{transform:none}
}