/* Shared visual family. Course content and account behavior are unchanged. */
:root,:root:not([data-theme=light]){--bg:#f4f7fc;--surface:#fff;--ink:#10243f;--muted:#526b87;--line:#d7e3f3;--brand:#1260db;--accent:#1260db;--soft:#eaf2ff;--brand-ink:#fff;--radius:12px;--shadow:0 3px 12px #0b244708;--font:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-padding-top:100px}body{font-family:var(--font);background:var(--bg);color:var(--ink)}
[style*="--c:"]{--c:#1260db!important}
.topbar{padding:16px max(24px,calc((100vw - 1240px)/2));min-height:86px;background:#fff;border-bottom:1px solid #dbe5f3;box-shadow:0 1px 8px #10243f05;gap:18px}
.brand{min-width:0;gap:12px}.logo{border-radius:9px;width:44px;height:44px;background:#0b2447;box-shadow:inset 0 -3px #1260db;font-size:20px}.brand-text{min-width:0}.brand-text b{font-weight:800;font-size:1rem;letter-spacing:-.035em}.brand-text small{font-size:11px;max-width:320px;line-height:1.5;margin-top:3px}
.topnav{flex-wrap:wrap;align-items:center;gap:4px;justify-content:flex-end}.topnav a{font-weight:600;font-size:12px;padding:8px 9px;border-radius:6px}.topnav .navpill{background:#1260db;color:#fff}#userMenu{display:contents}.langsw{border-color:#d7e3f3!important;border-radius:7px!important}.langsw button[aria-pressed=true]{background:#1260db!important;color:white!important}
main{max-width:1240px;padding:30px 24px 56px}.hero{position:relative;background:#0b2447;border-radius:15px;padding:38px 38% 38px 35px;margin-bottom:28px;min-height:260px;overflow:hidden;color:#fff;box-shadow:0 12px 35px #0b244710}
.hero h1{position:relative;z-index:1;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;letter-spacing:-.045em;line-height:1.2;max-width:700px;color:#fff}
.hero .lead{color:#c1d5ee;font-size:.95rem;position:relative;z-index:1;line-height:1.85;max-width:680px}.hero .stats{position:relative;z-index:1}.hero .chip{background:#17395f;color:#deecff;border:1px solid #315478;border-radius:6px;font-size:12px}
.hero::after{content:"";position:absolute;inset:12px 10px 8px auto;width:36%;background:var(--course-art) center/contain no-repeat;pointer-events:none}
body[data-site=anum]{--course-art:url('../img/blue/numerik.webp')}body[data-site=web]{--course-art:url('../img/blue/website.webp')}
h1,h2,h3{letter-spacing:-.035em}#app>h1{color:#10243f!important;font-size:clamp(1.8rem,3vw,2.6rem)}.part h2{color:#526b87;letter-spacing:.11em;font-size:.78rem;font-weight:800}
.grid{gap:20px}.card{border-radius:12px;padding:24px;box-shadow:0 3px 14px #0b244705;min-width:0;transition:transform .2s,box-shadow .2s}.card::before{width:3px;top:22px;bottom:22px;background:#1260db}.card .num{font-size:11px;letter-spacing:.12em;color:#1260db}.card h3{font-size:1.12rem;line-height:1.4}.card p{line-height:1.75}.card:hover{box-shadow:0 10px 24px #0b24470c}.badge.ok{background:#eaf2ff;color:#0b4aaa;border:1px solid #c1d8f8}.badge.soon{background:#f7f9fc;border-color:#d1ddea;opacity:1}
.row{border-radius:10px;padding:16px 18px;gap:16px}.row .n{background:#eaf2ff;color:#1260db;border-radius:8px}.row .t b{font-size:.95rem;line-height:1.5}.row .t span{font-size:.79rem}.row.disabled{opacity:.7;background:#f9fbfe}.row:hover{border-color:#91b7ee}
.btn,.ctl{border-radius:8px}.btn{background:#1260db;color:#fff}.btn.ghost{background:transparent;color:#10243f}.ctl.primary{background:#1260db;color:#fff}.ctl.primary:hover{background:#2272e9}.tabs a[aria-current=page]{background:#1260db!important;color:#fff!important;border-color:#1260db!important}.tabs{border-color:#d7e3f3}
.stage{background:linear-gradient(135deg,#fff,#edf4ff);color:#10243f}.stage .band{background:#1260db}.s-kicker{color:#1260db}.s-code{background:#0b2447;color:#d5e7ff}.s-table tr:nth-child(even) td{background:#f1f6ff}.s-foot{color:#526b87}.s-img img{border-color:#d7e3f3}.stage-wrap,.tcard,.pdfbox{border-color:#d7e3f3;border-radius:12px}.pdfbox{background:#eaf2ff}.controls{background:#fff}.next .nx{--a:#1260db!important;--b:#0b2447!important}
.authcard{border-radius:14px;box-shadow:0 15px 45px #0b24470d;padding:32px}.authcard::before{background:#1260db}.authico{background:#0b2447;border-radius:13px}.authcard .btn{background:#1260db;--c:#1260db}.authcard input:focus,.akun input:focus{outline:3px solid #bfdbfe;border-color:#1260db}
.dhero{border-radius:15px;background:linear-gradient(115deg,#0b2447,#154779);box-shadow:0 10px 30px #0b244715}.dhero .xpbar i{background:#54a9ff}.dhero .dact .btn:first-child{color:#0b2447;background:#fff}.dhero .btn.ghost.light{color:#fff}.dcard,.kpi{border-radius:12px}.dcard h2::before{background:#1260db}.kpi:nth-child(1){background:#0b2447!important}.kpi:nth-child(2){background:#1455ab!important}.kpi:nth-child(3){background:#1e72cf!important}.kpi:nth-child(4){background:#357ea8!important}.hl1{fill:#dbeafe}.hl2{fill:#93c5fd}.hl3{fill:#3b82f6}.hl4{fill:#1d4ed8}.k-materi{--k:#1260db}.k-mulai,.k-ritme{--k:#1d4ed8}
.foot{padding:24px;border-top:1px solid #d7e3f3;background:#fff;color:#526b87;font-size:12px;line-height:1.8}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #54a9ff;outline-offset:3px}
.course-admin{--b:#1260db;--l:#d7e3f3;--t:#10243f;background:#f4f7fc!important;font-family:var(--font)}.course-admin .bar{background:#0b2447;color:#fff;padding:18px 24px}.course-admin .bar a{color:#bddaff}.course-admin .box{border-radius:12px;border-color:#d7e3f3;padding:26px}.course-admin button{background:#1260db;border-radius:7px;min-height:44px}.course-admin button.alt{background:#fff;color:#10243f}.course-admin input{border-color:#c7d8ed!important}.course-admin code{background:#eaf2ff}.course-admin .hint,.course-admin small{color:#526b87}.course-admin .ok{background:#eaf4ff;border-color:#b4d5ff;color:#10243f}
@media(max-width:900px){.topbar{padding:14px 20px;flex-wrap:wrap;gap:10px}.brand-text small{max-width:400px}.topnav{gap:2px}.hero{padding-right:35%;min-height:235px}.hero h1{font-size:2rem}.hero .lead{font-size:.88rem}.player{gap:18px}.dhero{padding:26px}.brand-text b{font-size:.95rem}}
@media(max-width:640px){html{scroll-padding-top:140px}.topbar{padding:12px 16px;gap:10px;position:relative}.brand{width:100%;gap:10px}.logo{width:38px;height:38px}.brand-text b{font-size:.95rem}.brand-text small{font-size:10px;max-width:calc(100vw - 90px)}.topnav{width:100%;justify-content:flex-start;gap:3px;border-top:1px solid #edf2f9;padding-top:8px}.topnav a{font-size:11px;padding:7px 8px}.langsw{margin-left:auto;order:10}.topnav .uname{font-size:11px}main{padding:22px 16px 40px}.hero{padding:26px 24px 190px;border-radius:12px;min-height:0;margin-bottom:24px}.hero h1{font-size:1.9rem;line-height:1.25}.hero .lead{font-size:.9rem;line-height:1.8}.hero::after{inset:auto 12px 0 auto;width:100%;height:185px}.hero .chip{font-size:11px}.grid{grid-template-columns:1fr;gap:14px}.card{padding:22px}.row{padding:14px 12px;gap:10px}.row .n{width:34px;height:34px}.row .t b{font-size:.85rem}.row .t span{font-size:.74rem}.row .badge{padding:3px 6px;font-size:10px}.tabs{gap:4px;overflow-x:auto}.tabs a{padding:10px 8px;font-size:11px}.authcard{padding:26px 21px}.foot{font-size:11px}.course-admin .box{margin:16px;padding:20px}.course-admin table{display:block;overflow-x:auto}.dhero{padding:24px 20px}.kpi{padding:16px}.stage .s-title{font-size:4.3cqw}}
@media(prefers-color-scheme:dark){.chips .r{background:#fee2e2}.chips .a{background:#fef3c7}.chips .g{background:#d1fae5}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}html{scroll-behavior:auto}}
@media print{body{background:#fff!important;color:#111!important}.topbar,.foot,.hero::after{display:none!important}.hero{background:#fff!important;color:#111!important;padding:0}.hero h1,.hero .lead{color:#111!important}.course-admin .bar{background:white!important;color:black!important}}

/* Compact status badges on catalogue cards and chapter rows */
.card .badge,.row .badge{display:inline-flex;align-items:center;justify-content:center;opacity:1;max-width:100%;padding:3px 8px;border-radius:6px;font-size:11px;line-height:1.6;font-weight:500;white-space:nowrap}