/* ---------- motyw ---------- */
:root{
  --accent:#7c5cff; --accent-ink:#ffffff;
  --radius:14px; --radius-sm:9px;
  --maxw:1240px;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0e1016; --bg-2:#151823; --surface:#171b27; --surface-2:#1d2230;
  --line:#262c3b; --text:#e7e9f0; --muted:#9aa3b8; --thumb-bg:#0a0c12;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
}
[data-theme="light"]{
  --bg:#f6f6f4; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f1f2f6;
  --line:#e6e7ec; --text:#1a1c22; --muted:#6b7180; --thumb-bg:#e9eaef;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit; text-decoration:none}
.muted{color:var(--muted)}
img{display:block; max-width:100%}

/* ---------- topbar ---------- */
.topbar{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.brand-mark{display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:800}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:12px}
.who{color:var(--muted); font-size:14px}
.icon-btn{display:grid; place-items:center; width:36px; height:36px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer;
  font-size:16px; line-height:1}
.icon-btn:hover{border-color:var(--accent)}

/* ---------- search ---------- */
.search{position:relative; flex:1; max-width:560px}
#search{width:100%; padding:10px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-size:15px; outline:none}
#search:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.search-results{position:absolute; top:46px; left:0; right:0; max-height:60vh; overflow:auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px}
.sr-item{display:block; padding:10px 12px; border-radius:9px}
.sr-item:hover{background:var(--surface-2)}
.sr-top{display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--muted)}
.sr-time{color:var(--accent); font-weight:700}
.sr-text{margin-top:2px; font-size:14px}
.sr-text b{background:color-mix(in srgb,var(--accent) 30%,transparent); border-radius:3px; padding:0 2px}
.sr-empty{padding:14px; color:var(--muted); font-size:14px}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:26px 20px 80px;
  display:grid; grid-template-columns:64px 1fr; gap:26px}
.week-rail{position:sticky; top:90px; align-self:start; display:flex; flex-direction:column; gap:10px}
.rail-item{display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0; border-radius:10px; color:var(--muted)}
.rail-item:hover,.rail-item.active{color:var(--text)}
.rail-num{font-variant-numeric:tabular-nums; font-weight:700; font-size:13px}
.rail-bar{width:4px; height:42px; border-radius:4px; background:var(--surface-2); overflow:hidden; display:block}
.rail-bar i{display:block; width:100%; background:var(--accent); height:0%}

/* ---------- weeks ---------- */
.week{margin-bottom:46px; scroll-margin-top:84px}
.week-head{display:flex; flex-direction:column; gap:2px; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--line)}
.week-eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700}
.week-head h2{margin:0; font-size:22px; font-weight:700}
.course{margin:22px 0}
.course-title{margin:0 0 12px; font-size:15px; font-weight:600; color:var(--muted)}

/* ---------- grid + karty ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .12s ease, border-color .12s ease}
.card:hover{transform:translateY(-3px); border-color:var(--accent)}
.thumb{position:relative; aspect-ratio:16/9; background:var(--thumb-bg)}
.thumb img{width:100%; height:100%; object-fit:cover}
.play{position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 92%,#000);
  color:#fff; font-size:15px; opacity:0; transition:opacity .12s; padding-left:3px}
.card:hover .play{opacity:1}
.badge-done{position:absolute; top:8px; left:8px; font-size:11px; font-weight:700;
  background:var(--accent); color:var(--accent-ink); padding:3px 8px; border-radius:20px}
.resume-bar{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.35)}
.resume-bar i{display:block; height:100%; background:var(--accent)}
.card.done .thumb img{opacity:.55}
.card-title{padding:11px 12px 13px; font-size:13.5px; font-weight:500; line-height:1.35}

/* ---------- auth ---------- */
.auth{min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent), var(--bg)}
.auth-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:30px; box-shadow:var(--shadow)}
.auth-brand{text-align:center; margin-bottom:22px}
.auth-brand .brand-mark{width:46px; height:46px; font-size:18px; margin:0 auto 12px; border-radius:12px}
.auth-brand h1{margin:0 0 4px; font-size:21px}
.auth-form{display:flex; flex-direction:column; gap:14px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.auth-form input{padding:11px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--text); font-size:15px; outline:none}
.auth-form input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.btn-primary{margin-top:4px; padding:12px; border:0; border-radius:10px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-size:15px; font-weight:600}
.btn-primary:hover{filter:brightness(1.06)}
.form-error{background:color-mix(in srgb,#ff5470 18%,transparent); color:#ff8097;
  border:1px solid color-mix(in srgb,#ff5470 40%,transparent); padding:10px 12px; border-radius:10px; font-size:14px}

/* ---------- player ---------- */
.player-wrap{max-width:1000px; margin:0 auto; padding:24px 20px 80px}
#player{width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius); box-shadow:var(--shadow)}
.player-meta{margin:18px 2px 0}
.player-meta .eyebrow{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700}
.player-meta h1{margin:6px 0 0; font-size:22px; line-height:1.3}
.pager{display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:22px}
.pager-btn{padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  font-size:14px; color:var(--text); max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pager-btn:hover{border-color:var(--accent)}
.pager-btn.ghost{background:transparent; color:var(--muted)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .wrap{grid-template-columns:1fr; gap:0; padding:18px 14px 60px}
  .week-rail{display:none}
  .topbar-in{flex-wrap:wrap; gap:10px; padding:10px 14px}
  .search{order:3; flex-basis:100%; max-width:none}
  .brand span:not(.brand-mark){display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .player-meta h1{font-size:19px}
  .pager-btn{max-width:none}
  .pager .pager-btn.ghost{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}