/* Komponen bersama Akalmatika (audit UI/UX #10, 13 Okt 2026).
   Satu sumber untuk kartu, tombol, lencana, bilah progres, chip penyaring, dan tautan kembali di keempat ruang.
   Kelas baru memakai awalan u-; kelas lama (lab-*, d-*, f-back, c-back) dipetakan ke sini sebagai alias sementara
   supaya tampilan seragam tanpa menulis ulang markup sekaligus. Kartu pintu masuk #bab TIDAK diatur di sini
   (kontrak kartu v1.3.3 di docs/WEB-STANDARDS.md). Warna diambil dari tema yang sudah dipakai, bukan palet baru. */
:root{
 --u-bg:#17191c;--u-panel:#1e252d;--u-panel-2:#243039;--u-line:#3c4f5e;--u-line-strong:#5d8199;
 --u-ink:#f3f5f7;--u-muted:#a9b8c4;--u-link:#a6d7ef;--u-accent:#91d4f2;--u-accent-ink:#08131d;--u-accent-soft:#2f5368;
 --u-ok:#9bceb0;--u-ok-line:#4f8a6b;--u-radius:14px;--u-radius-sm:10px;--u-tap:44px
}
/* Kartu */
.u-card,.lab-lesson-card,.d-skill,.d-next,.lab-item a{border:1px solid var(--u-line);border-radius:var(--u-radius);background:var(--u-panel);color:var(--u-ink)}
.u-card.is-highlight,.lab-lesson-card[open],.lab-item a:hover{border-color:var(--u-line-strong)}
.u-card.is-current,.d-skill.is-next,.d-next{border-color:var(--u-accent)}
.u-card.is-done,.d-skill.is-done{border-color:var(--u-ok-line)}
.u-card.is-planned{border-style:dashed;background:transparent}
/* Tombol */
.u-btn,.lab-btn{font:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;min-width:var(--u-tap);padding:9px 16px;border-radius:var(--u-radius-sm);border:1px solid var(--u-line);background:var(--u-panel-2);color:var(--u-ink);cursor:pointer;text-decoration:none;line-height:1.3}
.u-btn.is-primary,.lab-btn.is-primary,.d-start,.d-next .primary{background:var(--u-accent);border:1px solid var(--u-accent);color:var(--u-accent-ink);font-weight:650;border-radius:var(--u-radius-sm);min-height:46px}
.u-btn.is-quiet{background:none;border-color:transparent;color:var(--u-muted)}
.u-btn:disabled,.lab-btn:disabled{opacity:.45;cursor:not-allowed}
.u-btn:focus-visible,.lab-btn:focus-visible,.u-chip:focus-visible,.lab-chip:focus-visible,.u-back:focus-visible,.lab-back:focus-visible,.f-back:focus-visible,.c-back:focus-visible{outline:2px solid var(--u-accent);outline-offset:2px}
/* Lencana status */
.u-badge,.lab-tag{display:inline-flex;align-items:center;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--u-line);color:var(--u-muted);white-space:nowrap}
.u-badge.is-ok{border-color:var(--u-ok-line);color:var(--u-ok)}
.u-badge.is-current{border-color:var(--u-accent);color:var(--u-accent)}
.u-badge.is-soon{border-style:dashed}
/* Bilah progres */
.u-progress,.lab-card-bar,.d-bar{display:block;height:6px;border-radius:3px;background:var(--u-bg);overflow:hidden}
.u-progress>i,.lab-card-bar>i,.d-bar>i{display:block;height:100%;background:var(--u-ok)}
/* Chip penyaring / pilihan */
.u-chip,.lab-chip{font:inherit;min-height:var(--u-tap);min-width:var(--u-tap);padding:4px 12px;border-radius:var(--u-radius-sm);border:1px solid var(--u-line);background:var(--u-panel-2);color:var(--u-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.u-chip[aria-pressed=true],.lab-chip[aria-pressed=true]{border-color:var(--u-accent);background:var(--u-accent-soft)}
/* Tautan kembali */
.u-back,.lab-back,.f-back,.c-back{display:inline-flex;align-items:center;gap:6px;min-height:var(--u-tap);font-size:14px;color:var(--u-link);text-decoration:none}
.u-back:hover,.lab-back:hover,.f-back:hover,.c-back:hover{text-decoration:underline;text-underline-offset:3px}
/* Tombol utama katalog (.primary) memakai warna aksen yang sama dengan u-btn.is-primary.
   :where() menjaga spesifisitas rendah sehingga tombol khusus (hero beranda, kartu pintu masuk) tetap memakai gayanya sendiri. */
:where(.primary):not(:disabled){background:var(--u-accent);border-color:var(--u-accent);color:var(--u-accent-ink)}
:where(.primary):not(:disabled):hover{background:#b5e6fc;border-color:#b5e6fc}