/* Digital Business Data Mining Laboratory — tema navy & emas */
:root{
  --navy:#1B2F5B; --navy-2:#12203F; --navy-3:#2A4580; --gold:#C9962F; --gold-2:#E0B24F; --gold-bg:#FBF6E8;
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#F8F9FC; --text:#1A2233; --muted:#5B6783; --border:#DDE2EC;
  --link:#1F4FA8; --ok:#2E7D5B; --ok-bg:#E6F4EC; --warn:#B7791F; --warn-bg:#FFF6E0; --err:#B83A3A; --err-bg:#FCEAEA;
  --info-bg:#EAF0FB; --code-bg:#F3F5FA; --out-bg:#FFFCF2; --shadow:0 1px 2px rgba(18,32,63,.06),0 4px 14px rgba(18,32,63,.06);
  --sidebar:250px; --radius:10px;
  --font-head:Cambria,"Cambria Math",Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
[data-theme="dark"]{
  --bg:#0D1526; --surface:#15203A; --surface-2:#1A2745; --text:#E6EAF3; --muted:#9AA6C2; --border:#2A3859;
  --link:#8FB0F0; --navy:#8FA8E0; --navy-2:#0A1122; --navy-3:#6F8BD0; --gold:#E0B24F; --gold-2:#F0C968; --gold-bg:#2A2414;
  --ok:#59C08F; --ok-bg:#12302A; --warn:#E3B04B; --warn-bg:#31280F; --err:#F08A8A; --err-bg:#3A1A1E; --info-bg:#182544;
  --code-bg:#0F1830; --out-bg:#1E1B10; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.25;color:var(--navy)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:#DCE5FA}
.muted{color:var(--muted)} .small{font-size:.86rem} .center{text-align:center} .nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* ---------- layout aplikasi ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--navy-2);color:#D6DDEF;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40;overflow-y:auto;transition:transform .2s}
.brand{display:flex;gap:.65rem;align-items:center;padding:1.1rem 1.1rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none!important}
.brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--gold),#8F6A1B);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;color:#12203F;font-size:1.05rem;flex:none}
.brand-text{font-family:var(--font-head);font-size:.98rem;line-height:1.15;font-weight:700} .brand-text small{display:block;font-family:var(--font-body);font-weight:400;font-size:.68rem;color:#9FB0D6;letter-spacing:.03em;margin-top:2px}
.nav{padding:.6rem .6rem 1rem;flex:1}
.nav h6{margin:1rem .6rem .35rem;font:600 .68rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:#7F90BA}
.nav a{display:flex;align-items:center;gap:.65rem;padding:.5rem .7rem;border-radius:8px;color:#D6DDEF;font-size:.92rem;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:rgba(201,150,47,.17);color:#F2CE7B;box-shadow:inset 3px 0 0 var(--gold)}
.nav a .cnt{margin-left:auto;font-size:.72rem;background:rgba(255,255,255,.1);border-radius:20px;padding:0 .45rem}
.side-foot{padding:.9rem 1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.84rem}
.side-foot .who{color:#fff;font-weight:600;line-height:1.25} .side-foot .who small{display:block;color:#9FB0D6;font-weight:400}
.side-foot .row{display:flex;gap:.5rem;margin-top:.6rem}
.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.8rem;padding:.6rem 1.4rem}
.topbar form{flex:1;max-width:480px;position:relative}
.topbar input[type=search]{width:100%;padding:.5rem .8rem .5rem 2.2rem;border:1px solid var(--border);border-radius:30px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.92rem}
.topbar form .ico{position:absolute;left:.75rem;top:.62rem;color:var(--muted)}
.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;width:36px;height:36px;display:inline-grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--gold)}
.menu-btn{display:none}
.content{padding:1.6rem 1.6rem 3rem;max-width:1240px;width:100%;margin:0 auto}
.foot{margin-top:auto;padding:1rem 1.6rem;border-top:1px solid var(--border);font-size:.82rem;color:var(--muted);text-align:center}
.backdrop{display:none}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%)} body.nav-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  body.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .main{margin-left:0} .menu-btn{display:inline-grid} .content{padding:1.1rem 1rem 2.5rem}
  .topbar{padding:.55rem 1rem}
}

/* ---------- komponen umum ---------- */
.page-head{margin-bottom:1.3rem} .page-head h1{margin:.1rem 0 .3rem;font-size:1.75rem}
.page-head p{margin:0;color:var(--muted);max-width:75ch}
.crumbs{font-size:.84rem;color:var(--muted)} .crumbs a{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem}
.card h2,.card h3{margin-top:0}
.card.flat{box-shadow:none}
.grid{display:grid;gap:1rem} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media (max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.2rem}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--navy);background:var(--navy);color:#fff!important;padding:.5rem 1rem;border-radius:8px;font:600 .9rem var(--font-body);cursor:pointer;text-decoration:none!important;line-height:1.3}
[data-theme="dark"] .btn{background:var(--gold);border-color:var(--gold);color:#14203A!important}
.btn:hover{filter:brightness(1.1)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#14203A!important}
.btn.ghost{background:transparent;color:var(--navy)!important;border-color:var(--border)} [data-theme="dark"] .btn.ghost{color:var(--text)!important}
.btn.ghost:hover{border-color:var(--gold);filter:none}
.btn.danger{background:var(--err);border-color:var(--err);color:#fff!important}
.btn.sm{padding:.28rem .65rem;font-size:.8rem}
.btn.block{display:flex;justify-content:center;width:100%}
.btn.on{background:var(--gold);border-color:var(--gold);color:#14203A!important}
.badge{display:inline-block;font:600 .7rem var(--font-body);padding:.12rem .5rem;border-radius:20px;background:var(--info-bg);color:var(--navy-3);letter-spacing:.02em;white-space:nowrap}
[data-theme="dark"] .badge{color:#B7C9F5}
.badge.gold{background:var(--gold-bg);color:#8A6414} [data-theme="dark"] .badge.gold{color:#F0C968}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.err{background:var(--err-bg);color:var(--err)}
.badge.py{background:#E7F3EE;color:#1F7A55} [data-theme="dark"] .badge.py{background:#12302A;color:#7FD6AC}
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;border:1px solid;font-size:.93rem}
.flash.ok{background:var(--ok-bg);border-color:#9CD2B6;color:var(--ok)} .flash.error{background:var(--err-bg);border-color:#E2A1A1;color:var(--err)} .flash.info{background:var(--info-bg);border-color:#B9CBEE}
.bar{height:8px;background:var(--border);border-radius:20px;overflow:hidden} .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-3),var(--gold));border-radius:20px;transition:width .4s}
.bar.lg{height:12px}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{background:var(--surface-2);text-align:left;font:600 .78rem var(--font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.6rem .7rem;border-bottom:2px solid var(--border);white-space:nowrap}
.tbl td{padding:.55rem .7rem;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:hover td{background:var(--surface-2)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.tbl-wrap .tbl th:first-child,.tbl-wrap .tbl td:first-child{padding-left:1rem}
label{display:block;font-weight:600;font-size:.86rem;margin:.7rem 0 .25rem}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=file],input[type=email],select,textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:.94rem}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--gold) 55%,transparent);border-color:var(--gold)}
textarea{min-height:120px;resize:vertical;font-family:inherit}
textarea.code{font-family:var(--font-mono);font-size:.85rem;line-height:1.5;tab-size:4}
.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center} .row.end{justify-content:flex-end} .row.between{justify-content:space-between}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500} .check input{width:auto}
.empty{padding:2rem;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius)}
.kpi{display:flex;flex-direction:column;gap:.15rem} .kpi b{font:700 1.9rem var(--font-head);color:var(--navy)} [data-theme="dark"] .kpi b{color:#DCE5FA} .kpi span{font-size:.84rem;color:var(--muted)}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border);margin-bottom:1rem;flex-wrap:wrap}
.tabs a{padding:.5rem .9rem;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none!important;border-bottom:3px solid transparent}
.tabs a.on{color:var(--navy);border-bottom-color:var(--gold)} [data-theme="dark"] .tabs a.on{color:#DCE5FA}
.ring{--p:0;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--border) 0);display:grid;place-items:center;flex:none}
.ring>div{width:86px;height:86px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font:700 1.5rem var(--font-head);color:var(--navy)} [data-theme="dark"] .ring>div{color:#DCE5FA}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{padding:.55rem 0;border-bottom:1px solid var(--border)} .list-plain li:last-child{border:none}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-size:.78rem;padding:.15rem .6rem;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
.chip-link{text-decoration:none!important;color:var(--navy);font-weight:600}
dialog{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow);max-width:560px;width:92%}
dialog::backdrop{background:rgba(0,0,0,.45)}

/* ---------- publik (landing, login) ---------- */
.pub-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;max-width:1200px;margin:0 auto}
.pub-nav .brand{border:none;padding:0;color:var(--navy)} [data-theme="dark"] .pub-nav .brand{color:#fff}
.hero{background:linear-gradient(160deg,#12203F 0%,#1B2F5B 55%,#2A4580 100%);color:#fff;padding:0 0 4.5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,150,47,.35),transparent 65%)}
.hero .pub-nav .brand,.hero .pub-nav a{color:#fff}
.hero-in{max-width:1200px;margin:0 auto;padding:2.5rem 2rem 0;position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.hero h1{color:#fff;font-size:2.7rem;margin:.4rem 0 .8rem} .hero h1 em{color:var(--gold-2);font-style:normal}
.hero p.lead{font-size:1.1rem;color:#D3DCF2;max-width:56ch}
.hero .eyebrow{font:600 .78rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.hero-stats div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1rem}
.hero-stats b{display:block;font:700 2rem var(--font-head);color:var(--gold-2)} .hero-stats span{font-size:.85rem;color:#C2CDE8}
@media (max-width:820px){.hero-in{grid-template-columns:1fr}.hero h1{font-size:2rem}.pub-nav{padding:1rem}}
.section{max-width:1200px;margin:0 auto;padding:3rem 2rem 0}
.section h2{font-size:1.6rem;margin:0 0 .4rem} .section>p{color:var(--muted);margin:0 0 1.4rem;max-width:70ch}
.pillar{border-top:4px solid var(--gold)} .pillar .ico{width:26px;height:26px;color:var(--gold);margin-bottom:.4rem}
.mod-card{display:flex;flex-direction:column;gap:.35rem} .mod-card .no{font:700 .75rem var(--font-body);letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.mod-card h3{margin:0;font-size:1.1rem} .mod-card p{margin:0;color:var(--muted);font-size:.9rem}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-side{background:linear-gradient(160deg,#12203F,#1B2F5B 60%,#2A4580);color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:center}
.login-side h1{color:#fff;font-size:2.1rem} .login-side h1 em{color:var(--gold-2);font-style:normal} .login-side p{color:#C9D4EE;max-width:44ch}
.login-form{display:flex;align-items:center;justify-content:center;padding:2rem}
.login-form .card{width:100%;max-width:400px}
@media (max-width:820px){.login-wrap{grid-template-columns:1fr}.login-side{padding:2rem 1.5rem}}

/* ---------- dashboard & daftar materi ---------- */
.hello{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,var(--navy-2),var(--navy-3));color:#fff;border-radius:14px;padding:1.4rem 1.6rem;margin-bottom:1.2rem}
[data-theme="dark"] .hello{background:linear-gradient(120deg,#142347,#1F3A73)}
.hello h1{color:#fff;margin:0 0 .25rem;font-size:1.55rem} .hello p{margin:0;color:#CBD6F0}
.hello .ring>div{color:var(--navy)}
.continue{border-left:5px solid var(--gold)}
.mod-row{display:flex;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border)} .mod-row:last-child{border:none}
.mod-row .t{flex:1;min-width:0} .mod-row .t a{font-weight:600;color:var(--text)} .mod-row .pct{width:42px;text-align:right;font-weight:700;color:var(--navy)}
[data-theme="dark"] .mod-row .pct{color:#DCE5FA}
.mod-sec{margin-bottom:1.6rem}
.mod-sec>header{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.7rem}
.mod-no{flex:none;width:42px;height:42px;border-radius:10px;background:var(--navy);color:#fff;font:700 1.1rem var(--font-head);display:grid;place-items:center}
[data-theme="dark"] .mod-no{background:var(--gold);color:#14203A}
.mod-sec h2{margin:0;font-size:1.25rem} .mod-sec header p{margin:.15rem 0 0;color:var(--muted);font-size:.9rem;max-width:80ch}
.item{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);text-decoration:none!important;transition:border-color .15s,transform .15s}
.item:hover{border-color:var(--gold);transform:translateY(-1px)}
.item .no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--info-bg);color:var(--navy-3);font:700 .78rem var(--font-body);display:grid;place-items:center;margin-top:2px}
.item.done .no{background:var(--ok);color:#fff}
.item .tt{font-weight:600;line-height:1.3} .item .ss{font-size:.84rem;color:var(--muted);margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .meta{display:flex;gap:.4rem;margin-top:.35rem;flex-wrap:wrap;align-items:center}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.7rem}
.filterbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem;align-items:center}
.filterbar input[type=search]{max-width:320px}
.filterbar select{width:auto}
.lab-card{display:flex;flex-direction:column;gap:.4rem;color:var(--text);text-decoration:none!important;height:100%} .lab-card:hover{border-color:var(--gold)}
.lab-card h3{margin:.1rem 0 0;font-size:1.05rem} .lab-card p{margin:0;font-size:.88rem;color:var(--muted)}
.lab-card .go{margin-top:auto;font-weight:600;font-size:.86rem;color:var(--link)}
.week{display:flex;gap:.35rem;align-items:flex-end;height:64px}
.week div{flex:1;background:var(--info-bg);border-radius:4px 4px 0 0;min-height:4px;position:relative} .week div.hi{background:var(--gold)}
.week-l{display:flex;gap:.35rem} .week-l span{flex:1;text-align:center;font-size:.7rem;color:var(--muted)}

/* ---------- halaman materi ---------- */
.readbar{position:fixed;top:0;left:var(--sidebar);right:0;height:3px;z-index:60;background:transparent} .readbar i{display:block;height:100%;width:0;background:var(--gold)}
@media (max-width:900px){.readbar{left:0}}
.mat-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:1.8rem;align-items:start}
@media (max-width:1100px){.mat-layout{grid-template-columns:1fr}.toc-col{display:none}}
.mat-head h1{font-size:2rem;margin:.3rem 0 .4rem} .mat-head p.sum{color:var(--muted);font-size:1.02rem;margin:.2rem 0 .8rem;max-width:78ch}
.mat-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0 1.2rem;align-items:center}
.dd{position:relative} .dd>summary{list-style:none;cursor:pointer} .dd>summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:.35rem}
.dd-menu a{display:block;padding:.45rem .7rem;border-radius:6px;color:var(--text);font-size:.9rem;text-decoration:none!important} .dd-menu a:hover{background:var(--surface-2)} .dd-menu small{display:block;color:var(--muted)}
.toc-col{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;font-size:.86rem}
.toc-col h4{margin:0 0 .5rem;font:700 .72rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.toc-col a{display:block;padding:.28rem .7rem;color:var(--muted);border-left:2px solid var(--border);line-height:1.35;text-decoration:none!important}
.toc-col a.l3{padding-left:1.4rem;font-size:.82rem} .toc-col a:hover{color:var(--text)} .toc-col a.on{color:var(--navy);border-left-color:var(--gold);font-weight:600} [data-theme="dark"] .toc-col a.on{color:#DCE5FA}
.prose{font-size:1.04rem;line-height:1.75;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem 2rem;box-shadow:var(--shadow);overflow-wrap:break-word}
@media (max-width:640px){.prose{padding:1.1rem 1rem;font-size:1rem}}
.prose>:first-child{margin-top:0}
.prose h2{font-size:1.5rem;margin:2.2rem 0 .8rem;padding-bottom:.35rem;border-bottom:2px solid var(--gold);scroll-margin-top:80px}
.prose h3{font-size:1.2rem;margin:1.6rem 0 .5rem;scroll-margin-top:80px} .prose h4{font-size:1.05rem;margin:1.2rem 0 .4rem}
.prose p{margin:.75rem 0} .prose ul,.prose ol{padding-left:1.4rem} .prose li{margin:.3rem 0}
.prose blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:4px solid var(--gold);background:var(--gold-bg);border-radius:0 8px 8px 0;color:var(--text)}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--code-bg);padding:.1em .35em;border-radius:4px;border:1px solid var(--border)}
.prose pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;overflow:auto;margin:.6rem 0;position:relative;line-height:1.5}
.prose pre code{background:none;border:none;padding:0;font-size:.85rem;display:block}
.prose pre.output{background:var(--out-bg);border-color:#EBDDB0;border-left:4px solid var(--gold);margin-top:0} [data-theme="dark"] .prose pre.output{border-color:#4A4020;border-left-color:var(--gold)}
.out-label{font:700 .68rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#8A6414;margin:.5rem 0 -.2rem;padding-left:.2rem} .out-label.demo{color:var(--muted)} [data-theme="dark"] .out-label{color:var(--gold-2)}
.copy-btn{position:absolute;top:6px;right:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:6px;font-size:.72rem;padding:.12rem .5rem;cursor:pointer;opacity:0;transition:opacity .15s}
.prose pre:hover .copy-btn{opacity:1} .copy-btn:hover{color:var(--text)}
.prose figure{margin:1.3rem 0;text-align:center} .prose figure img{border:1px solid var(--border);border-radius:8px;background:#fff;max-width:100%;height:auto} .prose figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.prose .table-wrap{overflow-x:auto;margin:1rem 0;border:1px solid var(--border);border-radius:8px}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem} .prose th{background:var(--navy);color:#fff;text-align:left;padding:.5rem .7rem;font-weight:600;white-space:nowrap} [data-theme="dark"] .prose th{background:#22345F}
.prose td{padding:.45rem .7rem;border-top:1px solid var(--border)} .prose tr:nth-child(even) td{background:var(--surface-2)}
.prose .math-display{overflow-x:auto;padding:.3rem 0;margin:.5rem 0} .prose .katex-display{margin:.6em 0}
.prose .admonition{margin:1.1rem 0;padding:.2rem 1rem .7rem;border-left:5px solid var(--navy-3);background:var(--info-bg);border-radius:0 8px 8px 0}
.prose .admonition-title{font-weight:700;margin:.6rem 0 .1rem;font-family:var(--font-body);font-size:.94rem;color:var(--navy-3)} [data-theme="dark"] .prose .admonition-title{color:#B7C9F5}
.prose .admonition p{margin:.4rem 0}
.prose .admonition.tip,.prose .admonition.success{border-left-color:var(--ok);background:var(--ok-bg)} .prose .admonition.tip .admonition-title,.prose .admonition.success .admonition-title{color:var(--ok)}
.prose .admonition.warning,.prose .admonition.caution{border-left-color:var(--warn);background:var(--warn-bg)} .prose .admonition.warning .admonition-title,.prose .admonition.caution .admonition-title{color:var(--warn)}
.prose .admonition.danger{border-left-color:var(--err);background:var(--err-bg)} .prose .admonition.danger .admonition-title{color:var(--err)}
.prose .admonition.example,.prose .admonition.definition,.prose .admonition.rumus{border-left-color:var(--gold);background:var(--gold-bg)} .prose .admonition.example .admonition-title,.prose .admonition.definition .admonition-title,.prose .admonition.rumus .admonition-title{color:#8A6414} [data-theme="dark"] .prose .admonition.example .admonition-title,[data-theme="dark"] .prose .admonition.definition .admonition-title,[data-theme="dark"] .prose .admonition.rumus .admonition-title{color:var(--gold-2)}
.prose .mermaid{background:var(--surface);border:1px solid var(--border);text-align:center}
.prose hr{border:none;border-top:1px solid var(--border);margin:1.6rem 0}
.prose dt{font-weight:700;margin-top:.7rem} .prose dd{margin-left:1.2rem}
.prose .footnote{font-size:.85rem;color:var(--muted)}
.side-box{margin-top:1.2rem}
.note-box textarea{min-height:140px}
.savestate{font-size:.78rem;color:var(--muted)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem}
.pager a{flex:1;max-width:48%;padding:.8rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);text-decoration:none!important} .pager a:hover{border-color:var(--gold)}
.pager small{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em} .pager .nx{text-align:right;margin-left:auto}
.dl-list a{display:flex;gap:.5rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border);color:var(--text);font-size:.9rem} .dl-list a:last-child{border:none}
.dl-list .ico{color:var(--gold)}

/* ---------- lab ---------- */
.lab-shell{display:grid;grid-template-columns:300px minmax(0,1fr);gap:1.1rem;align-items:start}
@media (max-width:1000px){.lab-shell{grid-template-columns:1fr}}
.lab-controls{position:sticky;top:76px;display:flex;flex-direction:column;gap:.2rem;max-height:calc(100vh - 96px);overflow:auto}
@media (max-width:1000px){.lab-controls{position:static;max-height:none}}
.lab-controls h3{font:700 .72rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:.6rem 0 .2rem}
.ctl{margin:.45rem 0} .ctl label{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .15rem;font-size:.83rem} .ctl label b{font-family:var(--font-mono);color:var(--navy-3);font-size:.82rem} [data-theme="dark"] .ctl label b{color:var(--gold-2)}
.ctl input[type=range]{width:100%;accent-color:var(--gold)}
.ctl select,.ctl input[type=text],.ctl input[type=number]{padding:.35rem .5rem;font-size:.88rem}
.ctl textarea{font-size:.82rem;min-height:90px}
.ctl .btn-row{display:flex;gap:.4rem;flex-wrap:wrap}
.lab-stage{display:flex;flex-direction:column;gap:1rem;min-width:0}
.lab-stage canvas{width:100%;display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);touch-action:none}
.lab-plots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.lab-note{font-size:.88rem;color:var(--muted)}
.metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}
.metric{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem} .metric b{display:block;font:700 1.15rem var(--font-head);color:var(--navy)} [data-theme="dark"] .metric b{color:#DCE5FA} .metric span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.legend{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.3rem;vertical-align:-1px}
.guide li{margin:.4rem 0}
.lab-res table{border-collapse:collapse;width:100%;font-size:.86rem} .lab-res th{background:var(--surface-2);text-align:left;padding:.4rem .6rem;border-bottom:2px solid var(--border);position:sticky;top:0} .lab-res td{padding:.35rem .6rem;border-bottom:1px solid var(--border)}
.lab-res .scroll{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:8px}
.lab-res pre{background:var(--code-bg);padding:.7rem;border-radius:8px;overflow:auto;font-size:.82rem}

/* ---------- admin ---------- */
.admin-tabs{display:flex;gap:.2rem;flex-wrap:wrap;margin-bottom:1.2rem;padding:.3rem;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.admin-tabs a{padding:.45rem .85rem;border-radius:7px;font-size:.88rem;font-weight:600;color:var(--muted);text-decoration:none!important} .admin-tabs a.on{background:var(--navy);color:#fff} [data-theme="dark"] .admin-tabs a.on{background:var(--gold);color:#14203A}
.editor{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media (max-width:1100px){.editor{grid-template-columns:1fr}}
.editor textarea{min-height:560px} .preview-pane{border:1px solid var(--border);border-radius:8px;padding:1rem;max-height:640px;overflow:auto;background:var(--surface)}
.preview-pane .prose{border:none;box-shadow:none;padding:0}
.chart-box{position:relative;height:280px}
.inline-form{display:inline}
details.acc{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:.6rem} details.acc>summary{cursor:pointer;padding:.7rem 1rem;font-weight:600} details.acc[open]>summary{border-bottom:1px solid var(--border)} details.acc .in{padding:.8rem 1rem}

@media print{
  .sidebar,.topbar,.toc-col,.mat-actions,.pager,.side-box,.foot,.readbar,.copy-btn,.backdrop{display:none!important}
  .main{margin:0} .content{padding:0;max-width:none} .prose{border:none;box-shadow:none;padding:0;font-size:11pt}
  body{background:#fff;color:#000} .mat-layout{display:block}
}