/* Pola bersama Lab: banner kursus, daftar bab, pemutar per langkah, laci bab, kamus, Daftar Soal, kartu Case dan Interview.
   Dimuat paling akhir di semua Lab. Warna hanya dari token style.css, kecuali bidang ink banner yang sengaja sama di tema terang dan gelap. */
:root{--band:#15353B;--band-ink:#F3F1EA;--band-mute:#B9CDCC;--band-line:rgba(243,241,234,.18);--band-acc:#62C8CD;--band-bad:#FF9C8A}

/* tombol Hint: teks amber di atas teal gagal kontras, jadi latar hangat + teks gelap */
.btn.hint,.learn .btn.hint{background:var(--warm-soft);border-color:color-mix(in srgb,var(--warm) 55%,transparent);color:var(--warm-ink)}
.btn.hint:hover:not(:disabled){filter:brightness(.97)}

/* ---------- kerangka Belajar ---------- */
.learn{display:block;max-width:1080px;padding:20px 16px 64px}
.learn-main{min-width:0}
.learn-main.playing{max-width:800px;margin:0 auto}
.learn-main>h1{font-size:clamp(var(--t-3xl),3.4vw,var(--t-4xl));line-height:1.15;letter-spacing:-.015em;margin:0 0 4px;text-wrap:balance}
{display:none}

/* laci daftar bab */
.learn-side{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(340px,calc(100vw - 40px));max-height:none;border:0;border-right:1px solid var(--line);border-radius:0;padding:18px 14px 28px;transform:translateX(-102%);visibility:hidden;transition:transform .22s cubic-bezier(.22,1,.36,1),visibility .22s;box-shadow:0 10px 40px var(--sh-2)}
.learn.side-open .learn-side{transform:none;visibility:visible}
.learn-scrim{display:none;position:fixed;inset:0;z-index:69;background:var(--scrim)}
.learn.side-open .learn-scrim{display:block}
.learn-side .grp{font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin:16px 0 4px}
.learn-side a{font-size:var(--t-sm)}
.learn-side a .no{font-size:var(--t-xs)}
.learn-side .lead{font-size:var(--t-xs)}
.learn-side a .meta,.learn-side a .st{font-size:var(--t-xs)}

/* ---------- banner kursus ---------- */
.chero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:28px;background:var(--band);color:var(--band-ink);border-radius:var(--r-band);padding:28px 30px;margin-bottom:18px}
.chero h1{font-family:var(--f-display);font-size:clamp(var(--t-3xl),3.6vw,var(--t-5xl));font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 8px;color:var(--band-ink);text-wrap:balance}
.ch-lead{margin:0 0 18px;color:var(--band-mute);font-size:var(--t-md);max-width:58ch}
.cstats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:18px}
.cstats>div{display:flex;flex-direction:column;line-height:1.15}
.cstats b{font-family:var(--f-display);font-size:var(--t-3xl);font-weight:700}
.cstats span{font-size:var(--t-xs);color:var(--band-mute)}
.ch-prog{display:flex;flex-direction:column;gap:6px;max-width:460px;margin-bottom:18px;font-size:var(--t-sm);color:var(--band-mute)}
.cbar{height:9px;border-radius:var(--r-pill);background:var(--band-line);overflow:hidden}
.cbar i{display:block;height:100%;min-width:9px;border-radius:var(--r-pill);background:var(--band-acc)}
.ch-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cbtn,.lrow,.pbtn{box-sizing:border-box}
.cbtn{line-height:1.2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 15px;border-radius:var(--r-ctl);border:1px solid var(--band-line);background:transparent;color:var(--band-ink);font:inherit;font-weight:600;font-size:var(--t-base);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.cbtn:hover{background:rgba(243,241,234,.1);border-color:rgba(243,241,234,.4)}
.cbtn.pri{background:var(--band-ink);border-color:var(--band-ink);color:#15353B}
.cbtn.pri:hover{background:#fff;border-color:#fff}
.cbtn:focus-visible{outline:2px solid var(--band-acc);outline-offset:2px}
.cdone{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--band-acc)}
.ch-note{margin:14px 0 0;font-size:var(--t-sm);color:var(--band-mute)}
.ctrack{list-style:none;margin:0;padding:0 0 0 26px;border-left:1px solid var(--band-line);display:flex;flex-direction:column;justify-content:center;gap:13px}
.ctrack li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:var(--t-sm)}
.ct-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-c{color:var(--band-mute);font-variant-numeric:tabular-nums}
.ct-bar{grid-column:1/-1;grid-row:2;height:5px;border-radius:var(--r-pill);background:var(--band-line);overflow:hidden}
.ct-bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--band-acc)}

/* ---------- daftar bab ---------- */
.chapters{display:flex;flex-direction:column;gap:14px}
.chap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px 8px}
.chap-h{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:10px}
.chap-n{width:42px;height:42px;border-radius:var(--r-card);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:var(--t-xl);background:var(--accent-soft);color:var(--accent-ink)}
.chap.full .chap-n{background:var(--good-soft);color:var(--good-ink)}
.chap-t{min-width:0}
.chap-t h2{font-family:var(--f-display);font-size:var(--t-xl);line-height:1.2;margin:0}
.chap-t p{margin:1px 0 0;font-size:var(--t-sm);color:var(--muted)}
.chap-c{font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
.chap-x{margin:0 0 8px}
.linkb{border:0;background:none;padding:4px 0;font:inherit;font-weight:600;font-size:var(--t-sm);color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lrows li+li{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:20px 26px minmax(0,1fr) auto auto 64px;gap:10px;align-items:center;min-height:44px;padding:7px 8px;margin:0 -8px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none;transition:background .12s}
.lrow:hover{background:var(--bg)}
.lrow.next{background:var(--accent-soft)}
.lic{display:grid;place-items:center;color:var(--muted)}
.lrow.done .lic{color:var(--good-ink)}
.lrow.go .lic,.lrow.next .lic{color:var(--accent-ink)}
.lno{font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.lt{min-width:0;font-weight:600;font-size:var(--t-base);line-height:1.3}
.lt em{font-style:normal;font-weight:600;font-size:var(--t-xs);color:var(--accent-ink);margin-left:8px;white-space:nowrap}
.lrow.off .lt{font-weight:500;color:var(--muted)}
.lvtag{font-style:normal;font-size:var(--t-xs);font-weight:600;color:var(--muted)}
.lvtag.pendalaman{color:var(--warm-ink)}
.lm{font-size:var(--t-xs);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lp{height:5px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.lrow.next .lp{background:var(--surface)}
.lp i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.lrow.done .lp i{background:var(--good)}

/* ---------- pemutar bab ---------- */
.phead{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-bottom:14px}
.phead .sp{flex:1}
.pbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 11px 5px 8px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:var(--t-sm);cursor:pointer}
.pbtn[data-long]{padding-left:11px;border-color:transparent;background:none;color:var(--muted);font-weight:500}
.pbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.learn-main .sub{margin:0 0 10px;font-size:var(--t-sm)}
.lesson-nav{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;padding:7px 0 9px;border-bottom:0;margin-bottom:14px}
.lesson-nav a,.lesson-nav a.done{position:relative;display:block;height:20px;padding:0;border:0;border-radius:0;background:none;color:transparent;font-size:0;overflow:hidden;cursor:pointer}
.lesson-nav a::before{content:"";position:absolute;left:0;right:0;top:7px;height:6px;border-radius:var(--r-pill);background:var(--line);transition:background .15s}
.lesson-nav a:hover::before{background:var(--accent)}
.lesson-nav a.seen::before{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.lesson-nav a.done::before{background:var(--good)}
.lesson-nav a.cur::before{background:var(--accent);top:5px;height:10px}
.lesson-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#lessonBody.stepped>.blk{display:none}
#lessonBody.stepped>.blk.cur{display:block;animation:stepin .22s cubic-bezier(.22,1,.36,1)}
@keyframes stepin{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px}
.blk>h2{flex-wrap:wrap;font-size:var(--t-2xl);letter-spacing:-.01em}
.blk>h2 .n{font-size:var(--t-xs);background:none;padding:0;color:var(--muted);font-weight:600;order:2;margin-left:auto}
.blk .card,.blk .step,.blk .mist .m,.blk .flow{background:var(--bg)}
.blk .sumcards .c{font-size:var(--t-base)}
.stepfoot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:14px}
.stepfoot>:first-child{justify-self:start}
.stepfoot>:last-child{justify-self:end}
#lessonBody.stepped>.blk>h2 .n{display:none}
.stepfoot:empty{display:none}
.stepfoot .btn{min-height:40px;font-size:var(--t-base)}
.stepfoot .btn.pri{max-width:100%}
.stepfoot .btn.pri span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepn{font-size:var(--t-sm);color:var(--muted)}
.learn-main .learn-nextprev{display:none}
.learn-main.at-end .learn-nextprev{display:flex}

/* ---------- kamus ---------- */
.gloss h1{font-size:clamp(var(--t-3xl),3.4vw,var(--t-4xl));margin:0 0 4px}
.gloss input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);font:inherit;color:var(--ink);margin-bottom:12px}
.gloss dl{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:4px 18px}
.gloss dl>div{padding:11px 0}
.gloss dl>div+div{border-top:1px solid var(--line)}
.gloss dt{font-weight:700}
.gloss dd{margin:2px 0 0;color:var(--muted)}
.gloss dd a{color:var(--accent-ink);white-space:nowrap}

/* ---------- Daftar Soal ---------- */
.plist{max-width:1080px;margin:0 auto;padding:22px 16px 56px;box-sizing:border-box}
.lhero{display:flex;justify-content:space-between;gap:16px 24px;align-items:flex-end;flex-wrap:wrap;background:var(--band);color:var(--band-ink);border-radius:var(--r-band);padding:24px 28px;margin-bottom:14px}
.lhero h1{font-family:var(--f-display);font-size:clamp(var(--t-3xl),3.4vw,var(--t-4xl));font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 4px;color:var(--band-ink)}
.lhero .lead{margin:0;color:var(--band-mute);font-size:var(--t-base);max-width:56ch}
.lstats{display:flex;gap:10px 24px;flex-wrap:wrap}
.lstats>div{display:flex;flex-direction:column;line-height:1.15}
.lstats b{font-family:var(--f-display);font-size:var(--t-3xl);font-weight:700}
.lstats span{font-size:var(--t-xs);color:var(--band-mute)}
.pfilters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px}
.pfilters label{display:flex;flex-direction:column;gap:3px;font-size:var(--t-xs);color:var(--muted)}
.pfilters select,.pfilters input{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);font:inherit;font-size:var(--t-xs);color:var(--ink)}
.plisttbl tbody tr{cursor:pointer}
.plisttbl tbody tr:hover{background:var(--accent-soft,#D7ECED)}
.pfilters{align-items:end;gap:10px;margin-bottom:12px}
.pfilters label{font-size:var(--t-xs)}
.pfilters select,.pfilters input{font-size:var(--t-sm);min-height:36px;box-sizing:border-box}
.pfilters input[type=search]{flex:1 1 220px;min-width:0}
.qwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto}
.plisttbl{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-base);font-family:var(--f-body)}
.plisttbl th{position:static;background:none;font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.plisttbl td{font-family:var(--f-body);font-size:var(--t-base);padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:normal}
.plisttbl tbody tr:last-child td{border-bottom:0}
.plisttbl td:first-child{color:var(--muted);font-variant-numeric:tabular-nums;width:1%}
.plisttbl td b{font-weight:600}
.plisttbl tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lvl{display:inline-flex;font-size:var(--t-xs);font-weight:700;border-radius:var(--r-sm);padding:1px 9px;line-height:1.55;white-space:nowrap}
.lvl.E{background:var(--good-soft);color:var(--good-ink)}
.lvl.M{background:var(--warm-soft);color:var(--warm-ink)}
.lvl.H{background:var(--bad-soft);color:var(--bad-ink)}
.cm.lv1{background:var(--good-soft);color:var(--good-ink)}
.cm.lv2{background:var(--warm-soft);color:var(--warm-ink)}
.cm.lv3{background:var(--bad-soft);color:var(--bad-ink)}
.favb{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer}
.favb:hover{color:var(--warm);background:var(--warm-soft)}
.favb.on{color:var(--warm)}

/* ---------- Latihan: kartu soal ---------- */
.task-k{font-size:var(--t-xs);letter-spacing:0;text-transform:none;color:var(--accent-ink)}
.prompt .task p{margin:0}
.dfc{display:inline-flex;font-size:var(--t-xs);font-weight:700;border-radius:var(--r-sm);padding:1px 9px;line-height:1.55;white-space:nowrap}
.dfc.E{background:var(--good-soft);color:var(--good-ink)}
.dfc.M{background:var(--warm-soft);color:var(--warm-ink)}
.dfc.H{background:var(--bad-soft);color:var(--bad-ink)}
.lvlrow td{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:0;text-transform:none;color:var(--ink)}
.filters input,.filters select{font-size:var(--t-sm);min-height:36px;box-sizing:border-box;border-radius:var(--r-ctl)}
.prompt .tag{font-size:var(--t-xs);font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.cm{font-size:var(--t-xs)}
.prompt h2{font-size:var(--t-xl);letter-spacing:-.01em}
.prompt>p{font-size:var(--t-base)}

/* ---------- Case Study dan Interview ---------- */
.lab-hero{background:var(--band);color:var(--band-ink);border-radius:var(--r-band);padding:24px 28px}
.lab-hero h1{font-family:var(--f-display);font-size:clamp(var(--t-3xl),3.4vw,var(--t-4xl));font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 6px;color:var(--band-ink)}
.lab-hero .lead{margin:0;color:var(--band-mute);font-size:var(--t-base);max-width:64ch}
.csc{border-radius:var(--r-card);padding:18px 20px;gap:10px}
.csc h2{font-family:var(--f-display);font-size:var(--t-xl);line-height:1.2;margin:0}
.csc .lpbar{width:100%;height:6px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.csc .lpbar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.ivgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.ivp-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.ivp-list button{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 12px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
.ivp-list button b{font-weight:700}
.ivp-list button span{font-size:var(--t-xs);color:var(--muted);line-height:1.35}
.ivp-list button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}

/* ---------- responsif ---------- */
@media (max-width:860px){
  .chero{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px 20px}
  .ctrack{padding:16px 0 0;border-left:0;border-top:1px solid var(--band-line)}
  .ivgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .learn{padding:12px 12px 48px}
  .lhero,.lab-hero{padding:20px}
  .chap{padding:14px 14px 6px}
  .chap-h{grid-template-columns:38px minmax(0,1fr);gap:11px}
  .chap-n{width:38px;height:38px;font-size:var(--t-lg)}
  .chap-c{display:none}
  .lrow{grid-template-columns:20px minmax(0,1fr) auto;gap:8px}
  .lno,.lvtag,.lp{display:none}
  .lt em{display:block;margin:1px 0 0}
  .blk{padding:16px 14px}
  .blk>h2{font-size:var(--t-xl)}
  .pbtn[data-long]{display:none}
  .stepfoot{grid-template-columns:auto minmax(0,1fr)}
  .stepn{grid-row:2;grid-column:1/-1;text-align:center}
  .stepfoot .btn.pri{justify-self:stretch;justify-content:space-between}
  .ivp-list{grid-template-columns:minmax(0,1fr)}
  .plist{padding:12px 12px 44px}
}
@media (prefers-reduced-motion:reduce){
  #lessonBody.stepped>.blk.cur{animation:none}
  .learn-side{transition:none}
}

/* rapikan kartu */
.ivgrid:has(>:only-child){grid-template-columns:minmax(0,1fr)}
.task p{margin:0;max-width:none}
.tag{font-size:var(--t-xs);letter-spacing:0;text-transform:none}
.csc .btn{margin-top:auto}
.csc p{margin:0}

/* ikon tombol lewat mask, jadi teks tombol tetap teks biasa */
.btn.hint::before,.btn.dim::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.btn.hint{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 00-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0012 3z'/%3E%3C/svg%3E")}
.btn.dim{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='11' width='13' height='9' rx='2'/%3E%3Cpath d='M8.5 11V8a3.5 3.5 0 017 0v3'/%3E%3C/svg%3E")}

/* Daftar Soal di ponsel: kolom pilar pindah ke filter, tabel muat tanpa geser */
@media (max-width:640px){
  .plisttbl{min-width:0}
  .plisttbl th:nth-child(1),.plisttbl tr:not(.lvlrow) td:nth-child(1):not(.empty),.plisttbl th:nth-child(4),.plisttbl td:nth-child(4){display:none}
  .plisttbl th,.plisttbl td{padding:9px 8px}
  .pfilters label{flex:1 1 30%;min-width:0}
  .pfilters select{width:100%}
}

/* teks tombol utama mengikuti warna permukaan, supaya tetap terbaca saat aksen jadi terang di tema gelap */
.learn .btn.pri,.learn .btn.pri:hover,.learn .btn.pri:active{color:var(--surface)}
@media (max-width:640px){
  .stepfoot>span:empty{display:none}
  .stepfoot{display:flex;flex-wrap:wrap}
  .stepfoot .btn.pri{flex:1 1 0;min-width:0}
  .stepn{order:3;flex-basis:100%}
}

/* bar gelap Case dan Interview: posisi, langkah, timer selalu terlihat di atas soal */
.prow:has(#ivbar),.prow:has(#cs-back){background:var(--band);color:var(--band-ink);border-radius:var(--r-ctl);padding:8px 12px;gap:8px 14px}
.prow:has(#ivbar) .tag,.prow:has(#cs-back) .tag{color:var(--band-ink);font-weight:600}
.prow:has(#cs-back) .ib{background:none;border:1px solid var(--band-line);color:var(--band-ink);border-radius:var(--r-sm);min-height:30px;padding:2px 9px;cursor:pointer}
.prow:has(#cs-back) .ib:hover{border-color:var(--band-mute)}
.prow:has(#ivbar) .ctrl{gap:10px;font-size:var(--t-sm)}
.prow:has(#ivbar) .timer{background:none;color:var(--band-ink);padding:0;font-size:var(--t-xl);font-weight:600}
.prow:has(#ivbar) .timer.low{color:var(--band-bad)}
.prow:has(#ivbar) .btn.warn{background:none;border-color:var(--band-line);color:var(--band-ink)}
.prow:has(#ivbar) .btn.warn:hover{border-color:var(--band-bad);color:var(--band-bad)}
.prow:has(#ivbar) .qpills,.prow:has(#cs-back) .qpills{flex-wrap:wrap}
.prow:has(#ivbar) .qpills button,.prow:has(#cs-back) .qpills button{display:inline-flex;align-items:center;gap:6px;justify-content:center;min-width:30px;min-height:30px;box-sizing:border-box;border:1px solid var(--band-line);border-radius:var(--r-sm);background:none;color:var(--band-ink);font-size:var(--t-sm);font-weight:600;padding:2px 8px}
.prow:has(#ivbar) .qpills button[aria-current="true"],.prow:has(#cs-back) .qpills button[aria-current="true"]{border-color:var(--band-acc);color:var(--band-ink);background:rgba(98,200,205,.16)}
.prow:has(#ivbar) .qpills button.ok,.prow:has(#cs-back) .qpills button.ok{background:var(--band-acc);border-color:var(--band-acc);color:#15353B}
.qpills .l{display:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qpills button[aria-current="true"] .l{display:inline}
details.ctx{background:var(--accent-soft);border-radius:var(--r-ctl);padding:8px 12px}
details.ctx summary{font-weight:600;color:var(--accent-ink);cursor:pointer}
details.ctx p{margin:6px 0 0}

/* Progres */
.pfhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:16px 32px;align-items:center}
.pfhero .lead{font-size:var(--t-md)}
.pfbar{display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);color:var(--band-mute)}
.tile{border-radius:var(--r-card);padding:14px 16px}
.tile .k{font-size:var(--t-xs);letter-spacing:0;text-transform:none}
.tile .s{font-size:var(--t-xs)}
.panel{border-radius:var(--r-card)}
.panel h2{font-family:var(--f-display);font-size:var(--t-xl);line-height:1.2;margin:0 0 8px}
.panel .lead{color:var(--muted)}
.badge{font-size:var(--t-xs)}
.hc{border-radius:var(--r-ctl)}
@media (max-width:760px){.pfhero{grid-template-columns:minmax(0,1fr)}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:minmax(0,1fr)}}

.prow:has(#cs-back){margin-bottom:6px}
@media (max-width:700px){.edhead{flex-wrap:wrap}}

/* kontras dari audit tema */
.pchip b{color:var(--ink)}
.pchip small{color:var(--warm-ink)}
.sumcards .c{background:var(--band);color:var(--band-ink)}
.sumcards .c code{background:rgba(243,241,234,.14);border-color:transparent;color:var(--band-ink)}
.cost{color:var(--bad-ink)}
.hc .muted,.hc .hv,.hc b{color:var(--ink)}

.learn-side .st svg,.learn-side .no svg{width:14px;height:14px;display:block}
.rvb svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}

/* Latihan dan Case Study: kepala soal, baris Hint dan Solusi, popup (js/labui.js) */
.hintbox{margin:8px 0 0;padding:8px 12px;border-radius:var(--r-ctl);background:var(--warm-soft);border:1px solid color-mix(in srgb,var(--warm) 40%,transparent);font-size:var(--t-xs)}
.hintbox p{margin:4px 0}
.btn.hint.pulse{animation:hintpulse 1.1s ease-in-out 3}
@media (prefers-reduced-motion:reduce){.btn.hint.pulse{animation:none}}
.pmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(21,53,59,.45)}
.pmodal[hidden]{display:none}
.pcard{width:min(460px,100%);max-height:88vh;overflow:auto;padding:20px 22px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px var(--sh-3)}
.pcard.wide{width:min(720px,100%)}
.pcard h3{margin:0 0 8px;font-family:var(--f-display,Georgia,serif);font-size:var(--t-xl);color:var(--ink)}
.pcard h4{margin:14px 0 4px;font-size:var(--t-xs);color:var(--accent-ink)}
.pcard p{margin:6px 0;line-height:1.55}
.pcard ul{margin:6px 0 6px 18px;padding:0}
.pcard .pkey{margin:6px 0;max-height:260px;overflow:auto;white-space:pre}
.pcard .big{font-size:var(--t-5xl);line-height:1;color:var(--good-ink)}
.pcard.win{border:1px solid var(--good)}
.pcard.lose{border:1px solid var(--bad)}
.prow-btn{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn.dim{opacity:.7}
.pcard .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.pcard .btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.pwin{text-align:center}
.pwin .prow-btn{justify-content:center}
.qhead{margin-bottom:2px}
.qsel{max-width:240px;min-height:30px;padding:2px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--t-xs)}
.helprow{gap:8px;padding:0;margin:8px 0 0}
.helprow .cost{margin-left:0}
.btn.hint:disabled{filter:none}
.sactions{margin-top:12px}
.splay .fbar,.splay>.gl{margin-top:10px}
.plisttbl .lvlrow td{width:auto;padding:7px 12px;background:var(--bg);color:var(--ink)}
.plisttbl .chips{margin-top:3px}
.plisttbl .nt{margin-top:2px;font-size:var(--t-xs)}
.plisttbl td.empty{color:var(--muted);padding:14px 12px}
@media (max-width:640px){.qsel{flex:1 1 100%;max-width:100%}}
.hintbox .ladder{gap:6px}
.hintbox pre{margin:4px 0 0;font-size:var(--t-xs);padding:8px;border-radius:var(--r-sm);white-space:pre-wrap}
.pnav{min-width:0;max-width:100%}
@media (max-width:640px){.qsel{width:100%;min-width:0}.plisttbl .cm,.plisttbl .lvl,.plisttbl .dfc{white-space:normal}.plisttbl td b{overflow-wrap:anywhere}}

/* ---------- menu akun bersama (LabUI.account): header beranda + 4 Lab ---------- */
.avatar{overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-lg{width:44px;height:44px;font-size:var(--t-md)}
.pop.accpop{width:min(330px,calc(100vw - 24px));gap:12px;padding:16px}
.acc-head{display:flex;gap:12px;align-items:center}
.acc-who{display:flex;flex-direction:column;min-width:0;flex:1}
.acc-name{font-family:var(--f-display);font-size:var(--t-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-mail{font-size:var(--t-xs);overflow-wrap:anywhere}
.acc-edit{align-self:flex-start;text-decoration:none}
.acc-chips{display:flex;gap:6px;flex-wrap:wrap}
.acc-chip{font-size:var(--t-xs);font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink)}
.acc-chip.on{background:var(--warm-soft);color:var(--warm-ink)}
.acc-lab{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--bg);font-size:var(--t-sm)}
.acc-lab-t{font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.acc-rank{color:var(--warm-ink)}
.acc-lab .muted{font-size:var(--t-xs)}
.acc-link{font-size:var(--t-xs);font-weight:600;color:var(--accent-ink)}
.acc-labs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm)}
.acc-labs li{display:flex;justify-content:space-between;gap:10px}
.acc-labs a{font-weight:600;color:var(--accent-ink);text-decoration:none}
.acc-labs .muted{font-size:var(--t-xs);text-align:right}
.acc-extra{display:flex;flex-direction:column;gap:8px;font-size:var(--t-xs)}
.acc-extra form{display:flex;gap:6px}
.acc-note{margin:0;font-size:var(--t-xs)}
.acc-act{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.acc-act .btn{text-decoration:none}
/* nama di header: tetap terlihat di laptop; baris kecil XP disembunyikan supaya top bar tidak penuh */
.pmenu summary .pchip small{display:none}
@media (max-width:1439px){.top:not(.top-home) .pmenu .pchip{display:flex}.top:not(.top-home) .pmenu summary{padding:3px 10px 3px 3px}}
.pmenu .pchip b{max-width:110px}
/* 1321-1439px: tab mode dan menu akun berbagi satu baris, nama hanya di dropdown supaya tab tidak terpotong */
@media (min-width:1321px) and (max-width:1439px){.top:not(.top-home) .pmenu .pchip{display:none!important}.top:not(.top-home) .pmenu summary{padding:3px}}
@media (max-width:1100px){.top .pmenu .pchip{display:none!important}.top .pmenu summary{padding:3px}}

/* footer bersama (LabUI.footer: beranda + landing) dan pewarna kode (LabUI.hl) */
.code .tk{color:var(--code-kw);font-weight:600}
.code .tf{color:var(--code-fn)}
.code .ts{color:var(--code-str)}
.code .tn{color:var(--code-num)}
.code .tc{color:var(--code-cm);font-style:italic}
.foot{border-top:1px solid var(--line);padding-block:36px 20px;color:var(--muted);font-size:var(--t-base);background:var(--surface)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.fbrand p{margin:10px 0 0;max-width:34ch}
.fcol{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.fcol h2{margin:0 0 3px;font-family:var(--f-display);font-size:var(--t-base);font-weight:700;color:var(--ink)}
.fcol a{color:var(--muted);text-decoration:none}
.fcol a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--t-sm)}
.foot-in+.fbase{max-width:1200px}
@media (max-width:700px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}}
.flogo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-size:var(--t-md)}
.flogo i{font-style:normal;color:var(--accent-ink)}

/* kunci tamu Case Study / Interview (LabUI.lockMode) */
.lab-lock{max-width:620px;margin:24px auto;text-align:left;padding:28px}
.lab-lock-ic{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-ctl);background:var(--accent-soft);color:var(--accent-ink)}
.lab-lock-ic svg{width:22px;height:22px}
.lab-lock h2{margin:12px 0 6px}
.lab-lock-peek{margin:14px 0;padding-left:20px;display:grid;gap:6px}
.lab-lock-act{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
.lab-lock-act .btn{font-size:var(--t-sm);padding:9px 16px;min-height:40px}
.lab-lock-note{font-size:var(--t-xs);margin:0}