:root{
  --bg:#0a0a0c; --bg2:#121216; --panel:#16161b; --panel2:#1c1c22;
  --line:#26262d; --txt:#f1f1f4; --mut:#8c8c97; --gold:#e7b53c; --gold-dk:#b38621;
  --r:14px; --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;padding:0;background:var(--bg);color:var(--txt)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:calc(28px + var(--safe-b));
  overscroll-behavior-y:none;
}
a{color:var(--gold)}
img{display:block}

/* ── Плеер ─────────────────────────────── */
#stage{
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding-top:var(--safe-t);
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}
.player-wrap{position:relative; width:100%; aspect-ratio:16/9; background:#000}
#player{width:100%; height:100%; background:#000; display:block; object-fit:contain}
.player-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; color:var(--mut);
  background:radial-gradient(120% 90% at 50% 35%, #1a1a20 0%, #0a0a0c 70%);
}
.player-empty p{margin:0; font-size:14px; letter-spacing:.3px}
.logo-ring{
  width:64px; height:64px; border-radius:50%;
  border:3px solid var(--gold); position:relative;
  box-shadow:0 0 30px rgba(231,181,60,.25);
}
.logo-ring::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--gold);
}

.now-bar{
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
.now-text{flex:1 1 auto; min-width:0}
.now-num{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); font-weight:700}
.now-title{font-size:15px; font-weight:600; line-height:1.25; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.quality-switch{display:flex; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; flex:0 0 auto}
.quality-switch .q{appearance:none; border:0; background:transparent; color:var(--mut);
  font-size:12px; font-weight:600; padding:7px 11px; cursor:pointer}
.quality-switch .q.active{background:var(--gold); color:#1a1308}

/* ── Офлайн-панель ─────────────────────── */
.offline-panel{margin:14px 16px 0; background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border:1px solid var(--line); border-radius:var(--r); padding:14px}
.op-row{display:flex; align-items:center; gap:12px}
.op-info{flex:1 1 auto; min-width:0}
.op-title{font-size:15px; font-weight:600}
.op-sub{font-size:12.5px; color:var(--mut); margin-top:2px}
.op-btn{appearance:none; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--gold); color:#1a1308; font-weight:700; font-size:14px;
  padding:11px 16px; border-radius:11px}
.op-btn:disabled{opacity:.5}
.op-btn.ghost{background:transparent; color:var(--gold); border:1px solid var(--gold-dk)}
.op-btn.done{background:#1f3a22; color:#7fe08a; border:1px solid #2f5a34}
.op-progress{display:flex; align-items:center; gap:10px; margin-top:12px}
.op-bar{flex:1 1 auto; height:7px; background:#000; border-radius:6px; overflow:hidden; border:1px solid var(--line)}
.op-bar-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--gold-dk),var(--gold)); transition:width .25s}
.op-pct{flex:0 0 auto; font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums; min-width:36px; text-align:right}

/* ── Списки ────────────────────────────── */
.list-section{margin:22px 16px 0}
.section-h{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut);
  margin:0 2px 10px; font-weight:700}

.playlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.item{display:flex; align-items:center; gap:12px; padding:9px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:background .15s,border-color .15s}
.item:active{background:var(--panel2)}
.item.active{border-color:var(--gold); background:#1a160c}
.thumb{position:relative; flex:0 0 auto; width:104px; height:60px; border-radius:8px; overflow:hidden; background:#000}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb .dur{position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.78);
  color:#fff; font-size:10.5px; padding:1px 5px; border-radius:5px; font-variant-numeric:tabular-nums}
.thumb .play-ov{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; background:rgba(0,0,0,.25)}
.item.active .thumb .play-ov{opacity:1}
.play-ov span{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--gold)}
.meta{flex:1 1 auto; min-width:0}
.meta .t{font-size:14px; font-weight:600; line-height:1.3}
.item.active .meta .t{color:var(--gold)}
.meta .s{font-size:11.5px; color:var(--mut); margin-top:3px; display:flex; align-items:center; gap:8px}
.badge-off{display:inline-flex; align-items:center; gap:4px; color:#7fe08a}
.badge-off svg{width:12px;height:12px}
.watched-dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* прогрес перегляду під item */
.seen-bar{height:3px;background:#000;border-radius:3px;overflow:hidden;margin-top:6px}
.seen-fill{height:100%;width:0;background:var(--gold-dk)}

/* ── Матеріали ─────────────────────────── */
.materials{display:flex; flex-direction:column; gap:8px}
.doc{display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--txt)}
.doc:active{background:var(--panel2)}
.doc .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#241d0c;
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px}
.doc .dt{flex:1 1 auto;min-width:0}
.doc .dt b{display:block;font-size:14px;font-weight:600}
.doc .dt span{font-size:12px;color:var(--mut)}
.doc .arr{color:var(--mut)}

.foot{margin:26px 16px 0; text-align:center; color:var(--mut); font-size:12px; line-height:1.6}

/* ── Тост ──────────────────────────────── */
.toast{position:fixed; left:50%; bottom:calc(20px + var(--safe-b)); transform:translateX(-50%);
  background:#000; color:#fff; border:1px solid var(--line); padding:11px 16px; border-radius:12px;
  font-size:13px; z-index:50; max-width:88%; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* ── Планшет/десктоп ───────────────────── */
@media (min-width:760px){
  body{max-width:1100px; margin:0 auto}
  #stage{border-radius:0 0 18px 18px}
  .player-wrap{aspect-ratio:16/9; max-height:62vh}
}

/* ── Екран встановлення ── */
.install-gate{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  background:radial-gradient(120% 80% at 50% 18%, #1c1710 0%, #0a0a0c 72%);}
.install-gate.hidden{display:none}
.ig-card{width:100%; max-width:360px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:13px}
.ig-icon{width:124px; height:124px; border-radius:27px;
  box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(231,181,60,.18)}
.ig-title{font-size:25px; font-weight:800; letter-spacing:.5px; margin-top:2px}
.ig-sub{font-size:13.5px; color:var(--mut); line-height:1.5; margin-top:-5px}
.ig-btn{margin-top:8px; width:100%; padding:16px; border:0; border-radius:14px; cursor:pointer;
  background:var(--gold); color:#1a1308; font-size:17px; font-weight:800;
  box-shadow:0 10px 26px rgba(231,181,60,.28)}
.ig-btn:active{transform:translateY(1px)}
.ig-open{background:none; border:0; color:var(--mut); font-size:14px; cursor:pointer; padding:6px;
  text-decoration:underline}
.ig-steps{margin-top:6px; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:15px 16px; font-size:14px; line-height:1.55; color:var(--txt)}
.ig-steps b{color:var(--gold)}
.ig-steps .row{display:flex; align-items:flex-start; gap:10px; padding:5px 0}
.ig-steps .n{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#1a1308;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center}
.ig-steps svg{vertical-align:-5px}

/* ── Матеріал одразу після уроку (інлайн, менший) ── */
.mat-link{display:flex; align-items:center; gap:10px; margin:-3px 0 1px 16px; padding:8px 12px;
  background:#161108; border:1px solid #2a2210; border-left:3px solid var(--gold);
  border-radius:0 11px 11px 0; text-decoration:none; color:var(--txt)}
.mat-link:active{background:#1d1609}
.mat-link .mi{flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:#2a2110; color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:13px}
.mat-link .mt{flex:1 1 auto; min-width:0}
.mat-link .mt b{display:block; font-size:12.5px; font-weight:600; line-height:1.25}
.mat-link .mt span{color:var(--mut); font-size:11px}
.mat-link .marr{flex:0 0 auto; color:var(--mut); font-size:15px}