:root{
  --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#F0F3F8; --ink:#1A2233; --ink-2:#4A5568; --ink-3:#7A8599;
  --line:#E2E7EF; --primary:#1F5FA8; --primary-2:#174C88; --primary-soft:#E6EFFA;
  --red:#D23B3B; --red-soft:#FCEAEA; --gold:#E39B2F; --gold-soft:#FDF2E1; --green:#2A9364; --green-soft:#E3F4EB;
  --violet:#7A4FD0; --violet-soft:#EFE8FC; --teal:#16928A; --teal-soft:#E0F4F2;
  --doc:#FFFFFF; --shadow:0 1px 2px rgba(26,34,51,.06),0 4px 14px rgba(26,34,51,.05);
  --sky1:#CFE3F5; --sky2:#EAF2FA; --sidebar:248px;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#10151F; --surface:#171E2B; --surface-2:#1E2636; --ink:#E8EDF5; --ink-2:#B3BDCD; --ink-3:#8590A3;
  --line:#2A3446; --primary:#5B97E0; --primary-2:#7AAEEB; --primary-soft:#1C2C45;
  --red:#F07171; --red-soft:#3A1F24; --gold:#F0B55A; --gold-soft:#3A2C17; --green:#5CC491; --green-soft:#173327;
  --violet:#A685EE; --violet-soft:#2A2142; --teal:#4CC3BA; --teal-soft:#153331; --doc:#1B2230;
  --shadow:0 1px 2px rgba(0,0,0,.3); --sky1:#1C2B44; --sky2:#141D2D; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#10151F; --surface:#171E2B; --surface-2:#1E2636; --ink:#E8EDF5; --ink-2:#B3BDCD; --ink-3:#8590A3;
  --line:#2A3446; --primary:#5B97E0; --primary-2:#7AAEEB; --primary-soft:#1C2C45;
  --red:#F07171; --red-soft:#3A1F24; --gold:#F0B55A; --gold-soft:#3A2C17; --green:#5CC491; --green-soft:#173327;
  --violet:#A685EE; --violet-soft:#2A2142; --teal:#4CC3BA; --teal-soft:#153331; --doc:#1B2230;
  --shadow:0 1px 2px rgba(0,0,0,.3); --sky1:#1C2B44; --sky2:#141D2D; color-scheme:dark;
}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;letter-spacing:-.01em}
h1{font-size:28px;line-height:1.2;font-weight:700}
h2{font-size:20px;font-weight:700}
h3{font-size:16px;font-weight:650}
.muted{color:var(--ink-3)} .small{font-size:13px} .tiny{font-size:12px}
.hidden{display:none!important}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;padding:14px 10px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--primary);color:#fff}
.brand small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3);letter-spacing:0}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-weight:550;font-size:14px}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--primary-soft);color:var(--primary);font-weight:650}
.nav a svg{width:18px;height:18px;flex:none}
.nav .sub{margin:0 0 4px 28px}
.nav .sub a{padding:5px 10px;font-size:13.5px;font-weight:500}
.nav .badge{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--primary);color:#fff}
.nav .badge.red{background:var(--red)}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.main{display:flex;flex-direction:column;min-width:0;height:100%}
.top{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.burger{display:none;border:0;background:none;padding:6px;border-radius:8px}
.search{position:relative;flex:0 1 340px}
.search input{width:100%;padding:8px 12px 8px 34px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;color:var(--ink-3)}
.search-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:40;max-height:340px;overflow:auto;padding:6px}
.search-res button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px}
.search-res button:hover{background:var(--surface-2)}
.top-stats{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-weight:700;font-size:13px;border:1px solid var(--line);background:var(--surface)}
.pill.streak{color:var(--gold)} .pill.xp{color:var(--violet)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.view{flex:1;overflow-y:auto;position:relative}
.wrap{max-width:1120px;margin:0 auto;padding:24px 24px 120px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head p{margin:4px 0 0;color:var(--ink-3)}

/* ---------- primitives ---------- */
.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:14px;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.app{overflow:hidden}.main{overflow:hidden}body:has(.app){overflow:hidden}
.btn.primary:hover{background:var(--primary-2)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.card.flat{box-shadow:none}
.row{display:flex;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;font-weight:550}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
button.chip:hover{border-color:var(--ink-3)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:650;background:var(--surface-2);color:var(--ink-2)}
.tag.lpdp{background:var(--primary-soft);color:var(--primary)} .tag.univ{background:var(--violet-soft);color:var(--violet)}
.tag.pribadi{background:var(--gold-soft);color:var(--gold)} .tag.red{background:var(--red-soft);color:var(--red)}
.tag.green{background:var(--green-soft);color:var(--green)} .tag.teal{background:var(--teal-soft);color:var(--teal)}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
textarea.input{resize:vertical;min-height:90px;line-height:1.55}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 12px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tabs button.on{color:var(--primary);border-bottom-color:var(--primary)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}
.empty{padding:28px;text-align:center;color:var(--ink-3);border:1px dashed var(--line);border-radius:14px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;z-index:90}
.src{font-size:12px;color:var(--ink-3)} .src a{color:inherit}

/* ---------- hero (beranda) ---------- */
.hero{position:relative;border-radius:18px;overflow:hidden;min-height:250px;background:linear-gradient(var(--sky1),var(--sky2));margin-bottom:22px}
.hero svg.scene{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;padding:28px 30px;max-width:560px}
.hero-in h1{font-size:30px}
.hero-in p{margin:6px 0 16px;color:var(--ink-2);font-weight:500}
.count{display:inline-flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.count b{font-size:26px;line-height:1;color:var(--red);font-weight:800}
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.mod{position:relative;border-radius:14px;padding:16px;min-height:132px;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:0;text-align:left}
.mod h3{font-size:16px;color:#fff}
.mod .meta{font-size:12.5px;opacity:.9;font-weight:500}
.mod .open{align-self:flex-start;background:rgba(255,255,255,.95);color:#1A2233;padding:4px 12px;border-radius:8px;font-weight:700;font-size:12.5px}
.mod svg.deco{position:absolute;right:-10px;bottom:-14px;width:110px;height:110px;opacity:.28}
.mod.m1{background:#3769C9}.mod.m2{background:#7B4CCB}.mod.m3{background:#D4573F}.mod.m4{background:#15877F}
.mod .mbar{height:5px;background:rgba(255,255,255,.3);border-radius:9px;margin-top:8px}.mod .mbar i{display:block;height:100%;background:#fff;border-radius:9px}

/* ---------- week strip / agenda ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 4px;text-align:center;position:relative}
.day .dn{font-size:12px;color:var(--ink-3);font-weight:600}
.day .dd{font-size:18px;font-weight:700}
.day.today .dd{color:var(--red)}
.day.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dots{display:flex;gap:3px;justify-content:center;height:6px;margin-top:3px}
.dots i{width:6px;height:6px;border-radius:50%}
.dot-lpdp{background:var(--primary)}.dot-univ{background:var(--violet)}.dot-pribadi{background:var(--gold)}
.agenda-day{margin-top:18px}
.agenda-day h3{font-size:14px;color:var(--ink-3);font-weight:650;margin-bottom:8px}
.ev{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;border-left-width:4px}
.ev.lpdp{border-left-color:var(--primary)}.ev.univ{border-left-color:var(--violet)}.ev.pribadi{border-left-color:var(--gold)}
.ev .t{font-weight:650}
.ev .x{margin-left:auto;border:0;background:none;color:var(--ink-3);padding:2px 6px;border-radius:6px}

/* ---------- onboarding ---------- */
.ob{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:24px 18px 120px;background:var(--surface)}
.ob-top{width:100%;max-width:640px;display:flex;align-items:center;gap:12px;margin-bottom:28px}
.ob-dashes{display:flex;gap:6px;flex:1}
.ob-dashes i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.ob-dashes i.on{background:var(--ink)}
.ob-body{width:100%;max-width:560px}
.ob-body h2{font-size:22px;margin:22px 0 4px}
.ob-body .lede{color:var(--ink-3);margin:0 0 14px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);text-align:left;font-weight:600}
.opt .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none}
.opt.on{border-color:var(--ink);background:var(--surface-2)}
.opt.on .radio{border-color:var(--ink);background:radial-gradient(var(--ink) 45%,transparent 50%)}
.opt small{display:block;font-weight:500;color:var(--ink-3)}
.ob-cta{position:fixed;left:0;right:0;bottom:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;background:linear-gradient(transparent,var(--surface) 35%)}
.ob-cta .btn{width:100%;max-width:420px;padding:13px}
.ob-art{width:100%;max-width:560px;height:150px;border-radius:16px;overflow:hidden;background:linear-gradient(var(--sky1),var(--sky2));position:relative}
.ob-art svg{position:absolute;inset:0;width:100%;height:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.group-h{font-weight:700;margin:16px 0 8px;font-size:14px}

/* ---------- essay workspace ---------- */
.ws{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0;height:100%}
.ws-left{overflow-y:auto;padding:20px 24px 140px;border-right:1px solid var(--line)}
.ws-right{overflow-y:auto;background:var(--surface);padding:0 0 140px}
.ws-right .tabs button{padding:10px 8px;font-size:14px}
.ws-right .tabs{padding:0 10px;position:sticky;top:0;background:var(--surface);z-index:2;margin-bottom:0}
.panel{padding:16px 18px}
.prompt-pin{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;gap:10px}
.prompt-pin svg{flex:none;color:var(--red);margin-top:2px}
.prompt-pin p{margin:0;font-family:var(--serif);font-size:15px;line-height:1.6}
.doc-paper{background:var(--doc);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.doc-paper textarea{display:block;width:100%;min-height:560px;border:0;background:transparent;padding:34px 40px;font-family:var(--serif);font-size:16.5px;line-height:1.75;resize:vertical;outline:none;color:var(--ink)}
.doc-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.wc b{color:var(--ink)}
.plan-item{display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.plan-item .n{width:24px;height:24px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:12px;font-weight:700}
.plan-item.ok .n{background:var(--green);color:#fff}
.plan-item.cur .n{background:var(--primary);color:#fff}
.plan-item .t{font-weight:650;font-size:14px}
.plan-item .d{font-size:13px;color:var(--ink-3)}
.plan-item .w{font-size:12px;color:var(--ink-3);text-align:right;white-space:nowrap}
.scorebar{position:relative;height:16px;border-radius:99px;background:linear-gradient(90deg,#F2A3A3 0%,#F4D58D 50%,#7CCB8E 85%,#2EAF5E 100%);margin:28px 0 6px}
.scorebar .mk{position:absolute;top:50%;width:30px;height:30px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);transform:translate(-50%,-50%);display:grid;place-items:center;font-size:11px;font-weight:800}
.scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.crit{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;font-size:14px}
.lvl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650}
.lvl i{width:12px;height:12px;border-radius:50%}
.fb{list-style:none;padding:0;margin:0}
.fb li{display:flex;gap:8px;padding:5px 0;font-size:14px}
.fb li svg{flex:none;margin-top:3px}
.hist{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.meter{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.ring{width:64px;height:64px;flex:none}
.flag{background:var(--gold-soft);border-radius:4px;padding:0 2px}
.flag.sim{background:var(--red-soft)}

/* samples (document view) */
.sample-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px}
.paper{background:var(--doc);border:1px solid var(--line);border-radius:12px;padding:40px 48px;font-family:var(--serif);font-size:16px;line-height:1.75;box-shadow:var(--shadow)}
.paper h2{font-family:var(--serif);text-align:center;font-size:21px;margin-bottom:4px}
.paper .sub{text-align:center;color:var(--ink-3);font-family:var(--sans);font-size:13px;margin-bottom:24px}
.paper p{margin:0 0 14px;padding:2px 4px;border-radius:4px}
.paper p.hl-k{background:var(--green-soft)} .paper p.hl-s{background:var(--gold-soft)}
.paper p.focus{outline:2px solid var(--primary)}
.note{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface);font-size:13.5px;text-align:left;width:100%}
.note b{display:block;font-size:12px;margin-bottom:2px}
.note.k b{color:var(--green)} .note.s b{color:var(--gold)}

/* interview / tbs */
.q-list .q{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;width:100%;text-align:left}
.q .chk{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);flex:none;margin-top:2px;display:grid;place-items:center}
.q.done .chk{background:var(--green);border-color:var(--green);color:#fff}
.cheat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.slot{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}
.slot .lab{font-size:12.5px;font-weight:700;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.slot .num{width:20px;height:20px;border-radius:6px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;color:var(--ink-2)}
.slot textarea{border:0;background:transparent;width:100%;resize:none;min-height:54px;padding:6px 0 0;font-size:14px;outline:none}
.slot.auto{border-color:var(--teal)}
.opt-ans{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;font-weight:550}
.opt-ans .k{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.opt-ans.right{border-color:var(--green);background:var(--green-soft)} .opt-ans.wrong{border-color:var(--red);background:var(--red-soft)}

/* universities */
.uni{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.uni .flag-e{font-size:24px;line-height:1}
.uni-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:10px;overflow-x:auto}
.col{background:var(--surface-2);border-radius:12px;padding:10px;min-height:120px}
.col h3{font-size:13px;color:var(--ink-3);margin-bottom:8px;display:flex;justify-content:space-between}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;font-size:13.5px}

/* changes */
.chg{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.chg .when{font-size:13px;color:var(--ink-3);font-weight:600}
.impact{margin-top:8px;padding:10px 12px;background:var(--primary-soft);border-radius:10px;font-size:14px}

/* assistant */
.fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:11px 18px 11px 14px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.drawer{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));top:calc(70px + env(safe-area-inset-top,0px));width:400px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:70;display:flex;flex-direction:column}
.drawer-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer-b{flex:1;overflow-y:auto;padding:14px 16px}
.drawer-f{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px}
.drawer-f textarea{flex:1;min-height:42px;max-height:120px;resize:none}
.msg{margin-bottom:12px;font-size:14px;white-space:pre-wrap}
.msg.u{background:var(--primary-soft);padding:9px 12px;border-radius:12px 12px 4px 12px;margin-left:40px}
.msg.a{padding:2px 0}
.cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cites a{font-size:12px;text-decoration:none;padding:3px 8px;border-radius:7px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.sugg{display:flex;flex-direction:column;gap:6px}
.sugg button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;font-size:13.5px}
.scrim{display:none}

@media (max-width:1100px){
  .ws{grid-template-columns:1fr;height:auto}
  .ws-left{border-right:0;padding-bottom:20px}
  .ws-right{border-top:1px solid var(--line)}
  .mods{grid-template-columns:repeat(2,1fr)}
  .sample-wrap{grid-template-columns:1fr}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:80;transform:translateX(-100%);transition:transform .2s ease;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .app.nav-open .side{transform:none}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:75}
  .burger{display:inline-flex}
  .top{padding:10px 12px}
  .top-stats .pill.xp{padding:4px 8px}
  .wrap{padding:16px 14px 120px}
  .grid2,.grid3,.cheat,.uni-grid,.opt-grid{grid-template-columns:1fr}
  .hero-in{padding:20px}
  .hero-in h1{font-size:24px}
  .doc-paper textarea{padding:20px 18px;font-size:16px}
  .paper{padding:24px 18px}
  .chg{grid-template-columns:1fr;gap:4px}
  .week{gap:4px}
  .day .dd{font-size:15px}
  .fab span:not(.fab-j){display:none} .fab{padding:13px}
  .drawer{right:8px;left:8px;width:auto;max-width:none;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){.split,.split.even{grid-template-columns:1fr}}
.top-title{font-weight:700;font-size:16px}
.brand-mark{background:var(--green)}
.view.lock{overflow:hidden}
.app{overflow:hidden}.main{overflow:hidden}body:has(.app){overflow:hidden}
.btn{text-decoration:none;color:inherit}.btn.primary{color:#fff}
.ob-body h1{font-size:26px}.ob .lede{color:var(--ink-3);margin:6px 0 18px}
.summary{padding:22px}
.headline{font-size:24px;line-height:1.25;margin:4px 0 18px;max-width:640px}
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;counter-reset:s}
.stepper li{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.stepper li::before{content:"";position:absolute;top:13px;left:28px;right:-8px;height:2px;background:var(--line)}
.stepper li:last-child::before{display:none}
.stepper li.done::before{background:var(--green)}
.stepper .dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-3);border:2px solid var(--line)}
.stepper li.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.stepper li.cur .dot{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-soft)}
.stepper li.fail .dot{background:var(--red);border-color:var(--red);color:#fff}
.stepper b{display:block;font-size:13.5px;line-height:1.25}
.stepper li.cur b{color:var(--primary)}
.stepper span:not(.dot){display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.st-sel{margin-top:6px;font-size:12px;padding:3px 6px;border:1px solid var(--line);border-radius:7px;background:var(--surface);max-width:100%}
.todo-list{display:grid;gap:8px;margin-top:12px}
.todo{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:var(--surface)}
.todo:hover{border-color:var(--ink-3)}
.tdot{width:10px;height:10px;border-radius:50%;background:var(--primary);flex:none}
.todo.urgent .tdot{background:var(--red)}
.todo.urgent{border-left:3px solid var(--red)}
details.help{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
details.help summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-2)}
details.help ul{margin:8px 0 0;padding-left:20px;font-size:14px;display:grid;gap:4px}
.dl{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.dl:last-of-type{border-bottom:0}
.dl-d{width:44px;flex:none;text-align:center;border-radius:9px;padding:4px 0;background:var(--surface-2)}
.dl-d b{display:block;font-size:17px;line-height:1.1}.dl-d span{font-size:11px;color:var(--ink-3);font-weight:600}
.dl.lpdp .dl-d{background:var(--primary-soft);color:var(--primary)}.dl.kampus .dl-d{background:var(--violet-soft);color:var(--violet)}.dl.pribadi .dl-d{background:var(--gold-soft);color:var(--gold)}
.dl .x{border:0;background:none;color:var(--ink-3)}
.meterrow{display:grid;grid-template-columns:130px 1fr 64px;gap:10px;align-items:center;padding:8px 0;text-decoration:none;color:inherit}
.meterrow .tiny{text-align:right}
.check{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.docrow{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.docrow:last-child{border-bottom:0}
.dstate{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.dstate.s1{border-color:var(--gold);background:linear-gradient(90deg,var(--gold) 50%,transparent 50%)}
.dstate.s2{background:var(--green);border-color:var(--green);color:#fff}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink-3)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--ink);color:var(--bg)}
.rec{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.pstep{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.pstep input{width:18px;height:18px;margin-top:2px;flex:none}
.pstep input:checked+span b{text-decoration:line-through;color:var(--ink-3)}
.unis{display:grid;gap:10px}
.uni-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:14px}
.input.slim{padding:6px 9px;margin-top:4px}
.fieldc{display:flex;flex-direction:column}
.qitem{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px}
.qhead{display:flex;gap:12px;align-items:center;width:100%;border:0;background:none;padding:12px 14px}
.qhead .chk{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.qitem.done .chk{background:var(--green);border-color:var(--green);color:#fff}
.qbody{padding:0 14px 14px 46px}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.link{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit}
.link:hover{border-color:var(--primary)}
.bnav{display:none}
#toast .btn{color:var(--ink);background:var(--bg)}
@media (max-width:1100px){.stepper{grid-template-columns:repeat(3,1fr);row-gap:18px}.stepper li:nth-child(3n)::before{display:none}}
@media (max-width:820px){
  .stepper{grid-template-columns:1fr;gap:0}
  .stepper li{flex-direction:row;gap:12px;padding-bottom:14px}
  .stepper li::before{top:28px;bottom:0;left:13px;right:auto;width:2px;height:auto;display:block!important}
  .stepper li:last-child::before{display:none!important}
  .st-sel{margin-top:4px}
  .headline{font-size:20px}
  .links{grid-template-columns:1fr}
  .meterrow{grid-template-columns:110px 1fr 56px}
  .qbody{padding-left:14px}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--ink-3);text-decoration:none;padding:4px 0}
  .bnav a.on{color:var(--primary)}
  .main{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .fab{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .top-stats .pill{font-size:12px}
}
/* ---- Garu & gamification ---- */
.brand-mark{background:none;width:36px;height:36px}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.bubble{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.5;position:relative;box-shadow:var(--shadow)}
.bubble.left{flex:1}
.bubble.left::after{content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.ob-intro{display:flex;align-items:center;gap:14px}
.guide{display:flex;align-items:center;gap:12px;margin-top:12px}
.guide .jaya{flex:none}
.ach .ach-top{display:flex;gap:12px;align-items:center}
.streak-pill{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--gold-soft);color:var(--gold)}
.badgerow{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:14px}
.bdg{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);font-size:18px;display:grid;place-items:center;filter:grayscale(1);opacity:.45;padding:0}
.bdg.on{filter:none;opacity:1;background:var(--gold-soft);border-color:var(--gold)}
.bdg.sel{box-shadow:0 0 0 2px var(--primary)}
.ms-info{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.pill.gm{text-decoration:none;color:var(--violet)} .pill.streakp{color:var(--gold)}
.fab{padding:6px 18px 6px 8px}
.fab-j{display:grid;place-items:center;width:36px;height:36px}
.jrow{gap:8px;margin-bottom:12px}.jrow .jaya,.drawer-b .row>.jaya{flex:none}
.msg.jmsg{background:var(--surface-2);padding:9px 12px;border-radius:4px 12px 12px 12px;margin:0;flex:1;min-width:0}
.celebrate{position:fixed;inset:0;z-index:100;background:rgba(16,21,31,.45);display:grid;place-items:center;padding:20px;overflow:hidden}
.cel-card{position:relative;background:var(--surface);border-radius:20px;padding:24px 24px 18px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.cel-card h2{margin:8px 0 6px;font-size:21px}.cel-card p{margin:0 0 16px;color:var(--ink-2)}
.cel-badge{width:76px;height:76px;margin:0 auto 4px;border-radius:50%;background:var(--gold-soft);border:3px solid var(--gold);display:grid;place-items:center;font-size:38px}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.8}}
@media (max-width:820px){
  .fab{padding:4px} .fab .fab-t{display:none}
  .guide .jaya{width:64px;height:64px}
  .top-stats .pill.tahap{display:none}
  .badgerow{grid-template-columns:repeat(5,1fr)}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none}.bob{animation:none}}
/* ---- v4 ---- */
.tag.violet{background:var(--violet-soft);color:var(--violet)}
.fab{display:none}
.fab-jaya{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:72px;height:72px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 50% 35%,#FFF6E8,#FFE2C4);box-shadow:0 8px 24px rgba(0,0,0,.2);display:grid;place-items:center;padding:0;overflow:hidden;transition:transform .15s}
.fab-jaya:hover{transform:scale(1.06)}
.fab-jaya .jaya{margin-top:8px}
.pill.lvp{background:var(--violet-soft);color:var(--violet);border-color:transparent;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.pill .mini{display:inline-block;width:40px;height:5px;border-radius:9px;background:rgba(122,79,208,.2);overflow:hidden}.pill .mini i{display:block;height:100%;background:var(--violet)}
.hero2{display:flex;gap:16px;align-items:center;padding:22px 24px;background:linear-gradient(120deg,var(--surface) 55%,var(--primary-soft))}
.hero2 .hero-j{flex:none}
.lvbar{display:flex;flex-direction:column;gap:6px;width:100%;max-width:440px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;text-align:left}
.lvbar:hover{border-color:var(--violet)}
.next{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;border:2px solid var(--primary);background:var(--primary-soft);text-decoration:none;color:inherit;margin-bottom:12px}
.next.urgent{border-color:var(--red);background:var(--red-soft)}
.next b{font-size:17px}
.next-h{display:flex;justify-content:space-between;align-items:center}
.tnum{width:24px;height:24px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;color:var(--ink-2)}
.todo.urgent .tnum{background:var(--red);color:#fff}
/* timeline */
.chip i[class^="dot-"]{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-kampus{background:var(--violet)}
.tl{margin-top:10px}
.tl-m{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.tl ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line)}
.tl-i{position:relative;padding:6px 0 10px 14px}
.tl-dot{position:absolute;left:-21px;top:10px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface);background:var(--ink-3)}
.tl-i.lpdp .tl-dot{background:var(--primary)}.tl-i.kampus .tl-dot{background:var(--violet)}.tl-i.pribadi .tl-dot{background:var(--gold)}
.tl-i.on .tl-dot{box-shadow:0 0 0 4px var(--primary-soft)}
.tl-i.on .tl-b{background:var(--primary-soft);border-radius:10px;padding:8px 10px;margin:-4px 0 0 -6px}
.tl-i.past{opacity:.55}
.tl-i .x{border:0;background:none;color:var(--ink-3)}
.tl-today{position:relative;padding:4px 0 8px 14px}
.tl-today::before{content:"";position:absolute;left:-21px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--red)}
.tl-today span{font-size:12px;font-weight:700;color:var(--red)}
/* achievements */
.ach-card{max-width:440px;text-align:left;max-height:86vh;overflow:auto}
.ach-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ach-list li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.ach-list .bdg{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;filter:grayscale(1);opacity:.5;background:var(--surface);flex:none;border:1px solid var(--line)}
.ach-list li.on .bdg{filter:none;opacity:1;background:var(--gold-soft);border-color:var(--gold)}
/* syarat */
.verdict{padding:12px 14px;border-radius:12px;font-weight:700;margin-bottom:6px}
.verdict.ok{background:var(--green-soft);color:var(--green)}.verdict.bad{background:var(--red-soft);color:var(--red)}.verdict.todo{background:var(--surface-2);color:var(--ink-2)}
.cks{display:grid;gap:6px}
.ck{display:flex;gap:8px;align-items:center;font-size:14px}.ck input{width:17px;height:17px}
/* berkas */
.tabs-add{margin-left:auto;align-self:center;display:inline-flex;gap:4px;align-items:center;font-size:13px;font-weight:600;text-decoration:none}
.empty-cta{display:flex;gap:14px;align-items:center}
.pstep{border-bottom:1px solid var(--line)}
/* esai */
.tgroup{display:grid;gap:6px;margin-bottom:12px}
.tnavs{display:flex;flex-wrap:wrap;gap:6px}
.tnav{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 12px;font-weight:600;font-size:13.5px}
.tnav.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tnav .sc{font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:99px;background:var(--green-soft);color:var(--green)}
.tnav .sc.dim{background:var(--surface-2);color:var(--ink-3)}
.plan-d{margin-bottom:12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface)}
.plan-d summary{cursor:pointer;font-weight:700;font-size:14px}
.ws-right{padding:16px!important;display:flex;flex-direction:column;gap:14px;background:var(--bg)!important}
.rev-hero{background:var(--surface);border:2px solid var(--violet);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 20px rgba(122,79,208,.12)}
.btn.big{padding:13px;font-size:15px;background:var(--violet);border-color:var(--violet)}
.btn.big:hover{background:#6a3fc0}
.rev-score{display:flex;gap:14px;align-items:center}
.rev-h{font-size:15px;margin:2px 0 0}
.prio{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:8px}
.prio li{counter-increment:p;position:relative;padding:10px 12px 10px 42px;border-radius:12px;background:var(--violet-soft);font-size:14px;line-height:1.45}
.prio li::before{content:counter(p);position:absolute;left:10px;top:9px;width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.rev-what{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:grid;gap:4px}
.hist-row{display:flex;gap:10px;align-items:flex-end;height:58px;border-top:1px solid var(--line);padding-top:8px}
.hist-row span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--ink-3)}
.hist-row i{width:18px;border-radius:4px;background:var(--violet);opacity:.7}
.cons-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.cons-card h3{display:flex;gap:6px;align-items:center}
.conf{border-left:3px solid var(--red);background:var(--red-soft);border-radius:8px;padding:8px 10px;margin-bottom:8px;display:grid;gap:4px}
.conf .q{font-family:var(--serif);font-size:13.5px;color:var(--ink-2)}
/* kampus */
.add-uni{border:2px dashed var(--line)}
.unis{display:grid;gap:12px;margin-top:14px}
.uni-card .uni-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.uni-card a.tag{text-decoration:none}
.linkbtn{border:0;background:none;color:var(--primary);font-weight:600;padding:0;font-size:inherit;text-decoration:underline}
.import{display:flex;gap:12px;margin-top:12px;padding:12px;border-radius:12px;background:var(--surface-2)}
.import .jaya{flex:none}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.kpi b{display:block;font-size:26px;letter-spacing:-.02em}.kpi span{font-size:13px;color:var(--ink-3)}
.bars-h{display:grid;gap:6px}
.bh{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 54px;gap:8px;align-items:center;font-size:13px}
.bh-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-l b{color:var(--ink-3);font-weight:700;margin-right:2px}
.bh-b{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}.bh-b i{display:block;height:100%;background:var(--primary);border-radius:99px}
.bh.me .bh-b i{background:var(--violet)}.bh.me{font-weight:700}
.bh-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.insight{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px;border-radius:12px;background:var(--violet-soft)}
.insight .jaya{flex:none}
/* wawancara read-only facts */
.slot.ro p{margin:6px 0 0;font-size:14px}
.slot .lock{margin-left:auto;color:var(--ink-3)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .fab-jaya{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:14px;width:62px;height:62px}
  .fab-jaya .jaya{width:52px;height:52px}
  .hero2{padding:16px}.hero2 .hero-j{width:72px;height:72px;align-self:flex-start}
  .top-stats .pill.tahap{display:none}
  .bh{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 46px}
  .import{flex-direction:column}
  .empty-cta{flex-direction:column;text-align:center}
}
.tl-now{display:flex;align-items:center;gap:8px;margin:12px 0 2px;color:var(--red);font-size:12px;font-weight:800}.tl-now::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--red);margin-left:-5px}.tl-now::after{content:"";flex:1;height:2px;background:var(--red);opacity:.35}
.import.waiting{background:var(--violet-soft)}
.dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--violet);animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.7}}
/* ---- Ceritaku ---- */
.story-progress{margin-bottom:16px}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.theme{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left}
.theme:hover{border-color:var(--violet);box-shadow:0 4px 14px rgba(122,79,208,.12)}
.theme.has{border-color:var(--violet);background:var(--violet-soft)}
.te{font-size:22px;line-height:1}
.interview{border:2px solid var(--violet);display:grid;gap:12px}
.iv-msgs{max-height:380px;overflow-y:auto;display:grid;gap:4px;padding:4px 2px}
.iv-msgs .msg.u{margin-left:60px}
.stories{display:grid;gap:10px}
.story{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px}
.story.open{border-color:var(--violet)}
.story-h{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;padding:0}
.story-b{margin-top:10px;display:grid;gap:8px}
.sfield{display:grid;gap:3px}.sfield span{font-size:12px;font-weight:700;color:var(--ink-3)}
.sfield textarea{border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--surface);resize:vertical;font-size:14px}
.pd-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.pd-checks{display:grid;gap:4px;margin-top:10px}
.pd-checks .small{display:flex;gap:6px;align-items:flex-start}
.plan-tip{margin-top:4px;font-size:12.5px;display:flex;gap:5px;align-items:flex-start;color:var(--violet)}
.plan-tip.gap{color:var(--gold)}
.plan-tip a{font-weight:600}
/* ---- Ceritaku chat (ChatGPT-style) ---- */
.cs-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:100%;min-height:0}
.cs-chat{display:flex;flex-direction:column;min-height:0;height:100%}
.cs-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.cs-msgs{flex:1;overflow-y:auto;padding:20px 16px 8px}
.cs-col{max-width:740px;margin:0 auto;width:100%}
.cs-m{display:flex;gap:10px;margin-bottom:16px;align-items:flex-start}
.cs-m .jaya{flex:none;margin-top:2px}
.cs-m.me{justify-content:flex-end}
.cs-m .cs-b{font-size:15.5px;line-height:1.6;max-width:85%}
.cs-m.jaya .cs-b{padding:2px 0}
.cs-m.me .cs-b{background:var(--surface-2);border:1px solid var(--line);padding:10px 14px;border-radius:18px 18px 4px 18px}
.cs-note{text-align:center;margin:-4px 0 16px;font-size:13px}
.cs-note .linkbtn{background:var(--violet-soft);color:var(--violet);text-decoration:none;padding:5px 12px;border-radius:99px;font-weight:600}
.cs-note.err{color:var(--red)}
.cs-foot{padding:8px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%)}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cs-chips .chip{background:var(--surface);border-radius:99px;padding:7px 14px}
.cs-chips .chip:hover{border-color:var(--violet);color:var(--violet)}
.cs-input{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:8px 8px 8px 16px;box-shadow:var(--shadow)}
.cs-input:focus-within{border-color:var(--violet)}
.cs-input textarea{flex:1;border:0;background:transparent;resize:none;font-size:15.5px;line-height:1.5;max-height:180px;outline:none;padding:6px 0}
.cs-send{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;flex:none}
.cs-send:disabled{opacity:.35}
.cs-panel{border-left:1px solid var(--line);background:var(--surface);overflow-y:auto;padding:16px}
.cs-cov{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cs-cov .chip{font-size:12px;padding:4px 9px}
.cs-cov .chip.on{background:var(--violet-soft);color:var(--violet);border-color:var(--violet)}
.cs-close,.cs-scrim{display:none}
.cs-cards-btn{display:none}
@media (max-width:1100px){
  .cs-wrap{grid-template-columns:1fr}
  .cs-cards-btn{display:inline-flex}
  .cs-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:85;transform:translateX(100%);transition:transform .2s;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .panel-open .cs-panel{transform:none}
  .panel-open .cs-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:84}
  .cs-close{display:inline-flex}
}
@media (max-width:820px){.cs-msgs{padding:14px 10px 6px}.cs-foot{padding:6px 10px 10px}.cs-m .cs-b{max-width:92%}}
body:has(.cs-wrap) .fab-jaya{display:none}
/* ===================== Garuda Scholar · playful edtech system =====================
   Reference: Duolingo / Khan Academy — white canvas, one saturated brand colour,
   colour-coded sections, rounded type, chunky pressable buttons, 2px borders. */
:root{
  --brand:#2F6BFF; --brand-d:#1D4ED8; --brand-soft:#EAF0FF;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F7FB; --ink:#1E2235; --ink-2:#4B5168; --ink-3:#8A90A6;
  --line:#E6E8F0; --line-2:#F0F2F7;
  --c-blue:#2F6BFF; --c-blue-s:#EAF0FF; --c-blue-d:#1D4ED8;
  --c-green:#1FAF78; --c-green-s:#E3F7EE; --c-green-d:#14895C;
  --c-orange:#FF8A1F; --c-orange-s:#FFF1E2; --c-orange-d:#D96C06;
  --c-coral:#FF6B4A; --c-coral-s:#FFEDE8; --c-coral-d:#DA4A2A;
  --c-yellow:#FFC21A; --c-yellow-s:#FFF6D8; --c-yellow-d:#B98700;
  --c-teal:#12B5B0; --c-teal-s:#DFF6F5; --c-teal-d:#0B8C88;
  --c-pink:#F25C9A; --c-pink-s:#FDE8F1; --c-pink-d:#C93D78;
  --c-red:#FF4B4B; --c-red-s:#FFE9E9; --c-red-d:#D93030;
  --c-gray:#8A90A6; --c-gray-s:#F0F2F7; --c-gray-d:#5F6680;
  /* legacy aliases */
  --primary:var(--brand); --primary-2:var(--brand-d); --primary-soft:var(--brand-soft);
  --violet:var(--brand); --violet-soft:var(--brand-soft); --teal:var(--c-teal); --teal-soft:var(--c-teal-s);
  --red:var(--c-red-d); --red-soft:var(--c-red-s); --gold:var(--c-yellow-d); --gold-soft:var(--c-yellow-s);
  --green:var(--c-green-d); --green-soft:var(--c-green-s); --accent:var(--c-yellow); --accent-ink:var(--c-yellow-d); --accent-soft:var(--c-yellow-s);
  --doc:#FFFFFF; --shadow:none; --sky1:#EAF0FF; --sky2:#FFFFFF;
  --sans:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:var(--sans);
  --r:14px; --r-lg:18px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#12162A; --surface:#191E36; --surface-2:#1F2540; --ink:#EEF1FA; --ink-2:#B9C0D6; --ink-3:#8790AD; --line:#2C3354; --line-2:#242A48;
  --brand:#5B8CFF; --brand-d:#3A64D8; --brand-soft:#22305C;
  --c-blue:#5B8CFF; --c-blue-s:#22305C; --c-green-s:#173A30; --c-orange-s:#3E2C16; --c-coral-s:#40241E; --c-yellow-s:#3B3214; --c-teal-s:#123A3A; --c-pink-s:#3E2033; --c-red-s:#40222A; --c-gray-s:#262C48;
  --doc:#191E36; --sky1:#22305C; --sky2:#191E36;
}}
:root[data-theme="dark"]{
  --bg:#12162A; --surface:#191E36; --surface-2:#1F2540; --ink:#EEF1FA; --ink-2:#B9C0D6; --ink-3:#8790AD; --line:#2C3354; --line-2:#242A48;
  --brand:#5B8CFF; --brand-d:#3A64D8; --brand-soft:#22305C;
  --c-blue:#5B8CFF; --c-blue-s:#22305C; --c-green-s:#173A30; --c-orange-s:#3E2C16; --c-coral-s:#40241E; --c-yellow-s:#3B3214; --c-teal-s:#123A3A; --c-pink-s:#3E2033; --c-red-s:#40222A; --c-gray-s:#262C48;
  --doc:#191E36; --sky1:#22305C; --sky2:#191E36;
}
body{font-size:16px;line-height:1.55;font-weight:600;color:var(--ink);background:var(--bg)}
b,strong{font-weight:800}
h1{font-size:30px;line-height:1.15;font-weight:900;letter-spacing:-.015em}
h2{font-size:19px;font-weight:850;letter-spacing:-.005em}
h3{font-size:16px;font-weight:800}
.small{font-size:14px}.tiny{font-size:13px}.muted{color:var(--ink-3)}
a{color:var(--brand);font-weight:700;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:10px}

/* colour tiles */
.ni{width:32px;height:32px;border-radius:10px;display:inline-grid;place-items:center;flex:none}
.ni svg{stroke-width:2.2}
.c-blue{--c:var(--c-blue);--cs:var(--c-blue-s);--cd:var(--c-blue-d)}
.c-green{--c:var(--c-green);--cs:var(--c-green-s);--cd:var(--c-green-d)}
.c-orange{--c:var(--c-orange);--cs:var(--c-orange-s);--cd:var(--c-orange-d)}
.c-coral{--c:var(--c-coral);--cs:var(--c-coral-s);--cd:var(--c-coral-d)}
.c-yellow{--c:var(--c-yellow);--cs:var(--c-yellow-s);--cd:var(--c-yellow-d)}
.c-teal{--c:var(--c-teal);--cs:var(--c-teal-s);--cd:var(--c-teal-d)}
.c-pink{--c:var(--c-pink);--cs:var(--c-pink-s);--cd:var(--c-pink-d)}
.c-red{--c:var(--c-red);--cs:var(--c-red-s);--cd:var(--c-red-d)}
.c-gray{--c:var(--c-gray);--cs:var(--c-gray-s);--cd:var(--c-gray-d)}
.ni{background:var(--cs);color:var(--cd)}

/* shell */
.side{background:var(--surface);border-right:2px solid var(--line);padding:18px 14px}
.brand{gap:10px;font-size:19px;font-weight:900;letter-spacing:-.01em;padding:4px 8px 22px;color:var(--brand)}
.brand-mark{color:var(--brand);width:34px;height:34px;display:grid;place-items:center;background:none}
.brand-mark svg{width:34px;height:34px}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;border-radius:14px;padding:6px 10px 6px 6px;font-weight:800;font-size:15px;color:var(--ink-2);border:2px solid transparent}
.nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav a.on{background:var(--brand-soft);border-color:#C9D8FF;color:var(--brand)}
.nav a > svg{display:none}
.nav .badge,.nav .badge.red{background:var(--c-red);color:#fff;font-weight:900;margin-left:auto}
.top{background:var(--bg);border-bottom:2px solid var(--line);height:60px}
.top-title{font-weight:900;font-size:18px}
.pill{background:var(--surface);border:2px solid var(--line);color:var(--ink-2);font-weight:800;border-radius:99px;height:34px;padding:0 12px}
.pill.lvp,.pill.gm{background:var(--c-yellow-s);border-color:transparent;color:var(--c-yellow-d)}
.pill .mini{background:rgba(0,0,0,.08);height:8px;border-radius:99px;width:48px}.pill .mini i{background:var(--c-yellow);border-radius:99px}
.avatar{background:var(--brand);color:#fff;font-weight:900}
.wrap{max-width:1120px;padding:28px 32px 96px}
.page-head{margin-bottom:22px;display:flex;align-items:flex-end;gap:16px;justify-content:space-between}
.page-head > div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.page-head > div:first-child > .ni{width:46px;height:46px;border-radius:14px;grid-row:span 2}
.page-head > div:first-child > p{grid-column:2;margin:2px 0 0;color:var(--ink-3);font-size:15px;font-weight:600}
.view[data-sec] .page-head .ni{background:var(--cs);color:var(--cd)}

/* buttons: chunky + pressable */
.btn{height:42px;padding:0 18px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);color:var(--ink-2);font-weight:850;font-size:15px;gap:8px;box-shadow:none;transition:transform .06s}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn:active{transform:translateY(2px);border-bottom-width:2px}
.btn.primary,.btn.dark{background:var(--brand);border-color:var(--brand-d);color:#fff}
.btn.primary:hover,.btn.dark:hover{background:#4079FF}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.ghost:active{transform:none;border-bottom-width:4px}
.btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:12px;border-bottom-width:3px}
.btn.lg{height:52px;padding:0 26px;font-size:17px;border-radius:16px}
.btn:disabled{opacity:.5;transform:none}
.input,select.input,textarea.input{border:2px solid var(--line);border-radius:14px;background:var(--surface-2);font-weight:600;padding:10px 14px}
.input:focus,select.input:focus,textarea.input:focus{border-color:var(--brand);background:var(--surface);outline:none;box-shadow:none}
.input.slim{padding:6px 10px;border-radius:10px}
.field label,.fieldc{font-weight:800;color:var(--ink-2)}
.chip{border-radius:99px;border:2px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:800;padding:6px 14px}
.chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.tag{border-radius:99px;font-weight:800;font-size:12px;padding:3px 9px;background:var(--surface-2);color:var(--ink-2)}
.tag.lpdp,.tag.violet{background:var(--brand-soft);color:var(--brand)}
.tag.red{background:var(--c-red-s);color:var(--c-red-d)}
.tag.green{background:var(--c-green-s);color:var(--c-green-d)}
.tabs{border-bottom:2px solid var(--line);gap:6px;margin-bottom:22px}
.tabs button{font-weight:850;color:var(--ink-3);padding:10px 14px;border-radius:12px 12px 0 0}
.tabs button.on{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.bar{height:12px;border-radius:99px;background:var(--line-2)}.bar i{border-radius:99px;background:var(--c-green)}
.src{display:inline-flex;vertical-align:-2px;color:var(--ink-3);margin-left:3px}
.src:hover{color:var(--brand)}
.toast{background:var(--ink);color:#fff;border-radius:14px;font-weight:800}

/* cards */
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:none}
.split{gap:20px;align-items:start}
.grid2{gap:20px}
.card h2{margin:0 0 14px}
.col-stack{display:grid;gap:16px;align-content:start}

/* Beranda hero */
.home .focus{position:relative;overflow:hidden;background:var(--brand);color:#fff;border-radius:24px;padding:28px 32px 26px;margin-bottom:22px;border-bottom:6px solid var(--brand-d);max-width:none}
.home .focus::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08)}
.home .focus::before{content:"";position:absolute;right:90px;bottom:-110px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}
.home .hello{color:rgba(255,255,255,.8);margin:0 0 8px;font-weight:800}
.home .flag{display:inline-block;background:#fff;color:var(--c-red-d);font-weight:900;font-size:13px;border-radius:99px;padding:3px 10px;margin-bottom:10px}
.home .focus-t{font-size:36px;line-height:1.1;font-weight:900;letter-spacing:-.02em;margin:0 0 8px;max-width:20ch;color:#fff}
.home .focus-d{color:rgba(255,255,255,.88);font-size:17px;margin:0 0 20px;max-width:56ch;font-weight:600}
.home .focus .btn.primary{background:#fff;color:var(--brand);border-color:#C9D8FF;position:relative;z-index:1}
.journey{display:flex;align-items:center;gap:14px;margin-top:22px;background:none;border:0;padding:0;color:#fff;position:relative;z-index:1}
.journey .track{display:flex;gap:5px;width:min(360px,60vw)}
.journey .track i{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.25)}
.journey .track i.on{background:var(--c-yellow)}
.journey .small{font-weight:800;color:#fff}
.home-split{grid-template-columns:1.15fr 1fr}
.todo-list{display:grid;gap:10px}
.todo{display:flex;gap:14px;align-items:center;padding:12px 14px;border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;background:var(--surface);color:var(--ink);text-decoration:none}
.todo:hover{background:var(--surface-2);text-decoration:none}
.todo:active{transform:translateY(2px);border-bottom-width:2px}
.todo b{font-weight:850}
.todo svg:last-child{color:var(--ink-3)}
.todo.urgent{border-color:#FFC9C9;background:var(--c-red-s)}
.countdown{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--c-yellow-s);border-radius:var(--r-lg);border:2px solid #FFE7A3}
.countdown b{display:block;font-size:16px;font-weight:900}.countdown span:not(.ni){display:block;color:var(--ink-2);font-size:14px;margin-top:2px}
.tl-dot{background:var(--c-gray);width:12px;height:12px;border:3px solid var(--surface)}
.tl-i.lpdp .tl-dot{background:var(--brand)}
.tl-i.kampus .tl-dot{background:var(--c-teal)}
.tl-i.pribadi .tl-dot{background:var(--c-orange)}
.tl-now span{color:var(--c-red-d);font-weight:900}
.tl-m{color:var(--ink-3);font-weight:900;font-size:13px}
.when{margin-left:6px;color:var(--brand);font-weight:800}
.when::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ink-3);vertical-align:middle;margin-right:6px}

/* Berkas */
.docrow{border-bottom:2px solid var(--line-2);padding:12px 0;gap:12px;align-items:center}
.docrow:last-child{border-bottom:0}
.dstate{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none}
.dstate.s1{border-color:var(--c-orange);background:var(--c-orange-s)}
.dstate.s2{border-color:var(--c-green);background:var(--c-green);color:#fff}
.stbtn{height:32px;padding:0 12px 0 26px;border-radius:99px;border:2px solid var(--line);border-bottom-width:3px;background:var(--surface);font-size:13px;font-weight:850;color:var(--ink-3);position:relative;flex:none;min-width:92px;text-align:left}
.stbtn::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--c-gray)}
.stbtn.s1{color:var(--c-orange-d);border-color:#FFD2A6;background:var(--c-orange-s)}.stbtn.s1::before{background:var(--c-orange)}
.stbtn.s2{color:var(--c-green-d);border-color:#A9E5CB;background:var(--c-green-s)}.stbtn.s2::before{background:var(--c-green)}
.stbtn:active{transform:translateY(1px);border-bottom-width:2px}

/* Esai */
.rev-hero{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg)}
.prio{background:var(--brand-soft)!important;border:0!important;border-radius:14px!important}
.prio .n,.prio b.n{background:var(--brand)!important;color:#fff!important}
.pd-card,.cons-card{border:2px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.prompt-pin{background:var(--c-yellow-s);border:2px solid #FFE7A3;border-radius:var(--r-lg)}
.prompt-pin svg{color:var(--c-yellow-d)}
.doc-paper{border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:none}
.doc-paper textarea{font-family:var(--sans);font-size:17px;line-height:1.75;font-weight:500}
.plan-item .n{background:var(--surface-2);color:var(--ink-2);font-weight:900}
.plan-item.ok .n{background:var(--c-green);color:#fff}
.plan-item.cur .n{background:var(--brand);color:#fff}
.plan-tip{color:var(--brand)}.plan-tip.gap{color:var(--c-orange-d)}

/* boxes that stay boxes */
.uni-card,.qitem,.story,.import,.chg,.kpi,.empty-cta,.next,.theme{border:2px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:none}
.qitem{border-bottom-width:4px}
.import.waiting{background:var(--brand-soft);border-color:#C9D8FF}
.ico-soft{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--brand-soft);color:var(--brand);flex:none}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid #C9D8FF;border-top-color:var(--brand);animation:spin .8s linear infinite;flex:none;margin:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.dots i{background:var(--brand)}
.verdict.bad{background:var(--c-red-s);color:var(--c-red-d);border-radius:14px;font-weight:900}
.verdict.ok{background:var(--c-green-s);color:var(--c-green-d);border-radius:14px;font-weight:900}
.verdict.todo{background:var(--c-yellow-s);color:var(--c-yellow-d);border-radius:14px;font-weight:900}

/* chat */
.msg.a{background:var(--surface-2);border-radius:18px}
.msg.u{background:var(--brand);color:#fff;border-radius:18px}
.cs-head{border-bottom:2px solid var(--line)}
.cs-m.me .cs-b{background:var(--brand);color:#fff;border:0;border-radius:20px 20px 6px 20px}
.cs-note .linkbtn{background:var(--c-coral-s);color:var(--c-coral-d);display:inline-flex;gap:6px;align-items:center;font-weight:850}
.cs-chips .chip{border-bottom-width:3px}
.cs-cov .chip.on{background:var(--c-coral-s);color:var(--c-coral-d);border-color:transparent;display:inline-flex;gap:4px;align-items:center}
.cs-input{border:2px solid var(--line);border-radius:20px;box-shadow:none}
.cs-input:focus-within{border-color:var(--brand)}
.cs-send{background:var(--brand);color:#fff;border-radius:12px}
.cs-panel{background:var(--surface-2);border-left:2px solid var(--line)}
.story.open{border-color:var(--c-coral)}

/* floating ask */
.fab,.fab-jaya{display:none!important}
.fab-ask{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;height:50px;padding:0 20px 0 16px;border-radius:99px;border:0;border-bottom:4px solid var(--brand-d);background:var(--brand);color:#fff;display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:15px}
.fab-ask:active{transform:translateY(2px);border-bottom-width:2px}
body:has(.cs-wrap) .fab-ask{display:none}

/* bottom nav */
.bnav{border-top:2px solid var(--line);background:var(--surface)}
.bnav a{font-weight:800;color:var(--ink-3)}
.bnav a.on{color:var(--cd,var(--brand))}
.bnav a.on svg{background:var(--cs);border-radius:10px;padding:2px}

/* celebration */
.cel-card{border-radius:24px;border-bottom:6px solid var(--line)}
.cel-badge{background:var(--c-yellow-s)!important;border:0!important}
.ach-list .bdg{background:var(--surface-2);color:var(--ink-3);font-weight:900}
.ach-list li.on .bdg{background:var(--c-green);color:#fff}

@media (max-width:1000px){.home-split{grid-template-columns:1fr}}
@media (max-width:820px){
  .wrap{padding:18px 16px 110px}
  .home .focus{padding:22px 20px;border-radius:20px}
  .home .focus-t{font-size:27px}
  .home .focus-d{font-size:15.5px}
  .journey{flex-direction:column;align-items:flex-start;gap:8px}
  h1{font-size:25px}
  .card{padding:16px}
  .page-head > div:first-child > .ni{width:40px;height:40px}
  .fab-ask{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:14px;width:54px;padding:0;justify-content:center}
  .fab-ask span{display:none}
}
@media (prefers-reduced-motion:reduce){.spin{animation:none}.btn,.todo{transition:none}}
.tnav{border:2px solid var(--line);border-bottom-width:3px;border-radius:12px;padding:6px 12px;font-weight:850;font-size:14px;color:var(--ink-2)}
.tnav.on{background:var(--c-yellow-s);border-color:#FFD866;color:var(--ink)}
.tnav .sc{background:var(--c-green-s);color:var(--c-green-d)}
.tgroup > .tiny{font-weight:850}
.side-foot{border-top:2px solid var(--line);padding-top:10px}
.lvbar,.ob .btn.primary{border-radius:14px}
.opt{border:2px solid var(--line);border-bottom-width:4px;border-radius:16px}
.opt.on{border-color:var(--brand);background:var(--brand-soft)}
.ob-dashes i.on{background:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav a.on,:root:not([data-theme="light"]) .import.waiting{border-color:var(--brand-d)}
  :root:not([data-theme="light"]) .countdown,:root:not([data-theme="light"]) .prompt-pin,:root:not([data-theme="light"]) .tnav.on{border-color:#5C4A12}
  :root:not([data-theme="light"]) .todo.urgent{border-color:#5A2A30}
  :root:not([data-theme="light"]) .stbtn.s1{border-color:#5C3A12}:root:not([data-theme="light"]) .stbtn.s2{border-color:#1D5A42}}
:root[data-theme="dark"] .nav a.on,:root[data-theme="dark"] .import.waiting{border-color:var(--brand-d)}
:root[data-theme="dark"] .countdown,:root[data-theme="dark"] .prompt-pin,:root[data-theme="dark"] .tnav.on{border-color:#5C4A12}
:root[data-theme="dark"] .todo.urgent{border-color:#5A2A30}
:root[data-theme="dark"] .stbtn.s1{border-color:#5C3A12}:root[data-theme="dark"] .stbtn.s2{border-color:#1D5A42}
:root[data-theme="dark"] .home .focus .btn.primary{color:var(--brand-d)}
/* hero v2: text left, progress panel right */
.home .focus{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:center;padding:28px 30px}
.home .focus-main{position:relative;z-index:1;min-width:0}
.home .focus-t{font-size:clamp(26px,2.6vw,34px);max-width:24ch;text-wrap:balance}
.home .focus-d{margin-bottom:18px;font-size:16px}
.journey{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:10px;row-gap:10px;margin:0;padding:20px;border-radius:18px;background:rgba(255,255,255,.12);text-align:left;color:#fff;width:100%}
.journey:hover{background:rgba(255,255,255,.18)}
.journey .j-num{font-size:20px;font-weight:800;line-height:1}.journey .j-num b{font-size:44px;font-weight:900}
.journey .j-lab{font-weight:800;font-size:14px;line-height:1.25;padding-bottom:4px}
.journey .track{grid-column:1/-1;width:100%;gap:4px}
.journey .j-lvl{grid-column:1/-1;font-size:13px;font-weight:800;color:rgba(255,255,255,.85)}
@media (max-width:900px){.home .focus{grid-template-columns:1fr;gap:20px}}
.chg{margin-bottom:12px;padding:16px 18px}
.ws-left{padding:24px 28px 40px}
.ws-right{padding:24px 20px 40px}
.tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;flex:none}
.uni-card{padding:20px 22px}
.page-head h1{overflow-wrap:anywhere}
@media (max-width:820px){.ws-left,.ws-right{padding:16px}.page-head{flex-wrap:wrap}}
.rev-score{display:block}
.rev-top{display:flex;gap:16px;align-items:center}
.score-ring{flex:none;width:96px;height:96px}
.rev-verdict{display:block;font-size:19px;font-weight:900;margin-bottom:4px}
.rev-sum{margin:14px 0 0;font-size:15px;line-height:1.6}
.tag.gold{background:var(--c-yellow-s);color:var(--c-yellow-d)}
.aks-note{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--brand-soft);margin-bottom:14px}
.aks-note b{color:var(--brand)}
.unggulan-list{margin:0 0 16px}
.ug-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.ug-grid ul{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.7}
@media (max-width:640px){.ug-grid{grid-template-columns:1fr}}
/* sidebar: RevisionDojo-style filled grey icons */
.nav{gap:2px}
.nav a{gap:12px;padding:9px 12px;border:0;border-radius:12px;font-weight:650;font-size:15.5px;color:var(--ink)}
.nav a .nico{color:#9CA3AF;flex:none}
.nav a:hover{background:var(--surface-2)}
.nav a.on{background:#E8F0FD;color:var(--brand);border:0}
.nav a.on .nico{color:var(--brand)}
.side{background:#FAFBFC}
:root[data-theme="dark"] .side{background:var(--surface)}
:root[data-theme="dark"] .nav a.on{background:var(--brand-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .side{background:var(--surface)}:root:not([data-theme="light"]) .nav a.on{background:var(--brand-soft)}}
.nav a > svg.nico{display:block}
.nav .badge,.nav .badge.red{background:#3B82C4;color:#fff;border-radius:8px;font-size:12px;padding:2px 8px}
.cons-bar{border:2px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px;background:var(--surface)}
.cons-bar.bad{border-color:#FFC9C9;background:var(--c-red-s)}
.cons-bar.ok{border-color:#A9E5CB;background:var(--c-green-s)}
.cons-bar.stale{border-color:#FFE7A3;background:var(--c-yellow-s)}
.cons-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cons-main b{font-size:15.5px}
.cons-list{margin-top:10px}
.cons-list .conf{margin-top:8px;background:var(--surface);border-radius:12px;padding:10px 12px}
@media (max-width:820px){.cons-main .btn{width:100%}}
/* Wawancara: bank + cheatsheet */
.wrap.wide{max-width:1280px}
.ww{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start}
.ww-sheet{position:sticky;top:16px;max-height:calc(100vh - 100px);overflow-y:auto}
.sheet-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.sh-sec{border-top:2px solid var(--line-2);padding:12px 0}
.sh-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.sh-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}
.sh-facts dt{color:var(--ink-3);font-weight:700}.sh-facts dd{margin:0}
.sh-stories{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sh-stories .ck{align-items:flex-start;gap:8px}
.sh-stories li.off b{color:var(--ink-3)}
.sh-q{padding:10px 12px;border-radius:12px;background:var(--surface-2);margin-bottom:8px}
.sh-a{font-size:14px;line-height:1.6;margin-top:6px;white-space:normal}
.sh-q .x{border:0;background:none;color:var(--ink-3);padding:2px}
.add-q{display:flex;gap:8px}.add-q .input{flex:1}
.hint-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--brand-soft);margin-bottom:10px}
@media (max-width:1100px){.ww{grid-template-columns:1fr}.ww-sheet{position:static;max-height:none}}
@media print{
  body.print-sheet *{visibility:hidden}
  body.print-sheet #sheetBox,body.print-sheet #sheetBox *{visibility:visible}
  body.print-sheet #sheetBox{position:absolute;left:0;top:0;width:100%;max-height:none;overflow:visible}
  body.print-sheet .sheet-card{border:0}
  body.print-sheet .btn,body.print-sheet .x,body.print-sheet input[type=checkbox]{display:none}
}
/* Garu animation */
.jaya .j-all{transform-box:view-box;transform-origin:60px 112px;animation:jBob 3.2s ease-in-out infinite}
.jaya .j-eyes{transform-box:view-box;transform-origin:60px 52px;animation:jBlink 5s infinite}
.jaya .j-wl{transform-box:view-box;transform-origin:30px 64px;animation:jWingL 3.2s ease-in-out infinite}
.jaya .j-wr{transform-box:view-box;transform-origin:90px 64px;animation:jWingR 3.2s ease-in-out infinite}
.jaya .j-crest{transform-box:view-box;transform-origin:60px 24px;animation:jCrest 3.2s ease-in-out infinite}
.jaya.m-cheer .j-all{animation:jHop .9s ease-in-out infinite}
.jaya.m-cheer .j-wl{transform-origin:30px 64px;animation:jFlapL .35s ease-in-out infinite alternate}
.jaya.m-cheer .j-wr{transform-origin:90px 64px;animation:jFlapR .35s ease-in-out infinite alternate}
.jaya.m-cheer .j-spark{animation:jTwinkle 1s ease-in-out infinite}
.jaya.m-think .j-all{animation:jTilt 3s ease-in-out infinite}
.jaya.m-think .j-dots circle{animation:jDot 1.4s ease-in-out infinite}
.jaya.m-think .j-dots circle:nth-child(2){animation-delay:.2s}.jaya.m-think .j-dots circle:nth-child(3){animation-delay:.4s}
.jaya.m-sleepy .j-all{animation:jBreathe 4s ease-in-out infinite}
.jaya.m-sleepy .j-eyes{animation:none}
.jaya.m-sleepy .j-zz{animation:jFloat 3s ease-in-out infinite}
.jaya.m-sad .j-all{animation:jBreathe 4s ease-in-out infinite}
.jaya.m-sad .j-tear{animation:jTear 2.4s ease-in infinite}
@keyframes jBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes jHop{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-6px) scale(.98,1.03)}70%{transform:translateY(0) scale(1.04,.96)}}
@keyframes jBlink{0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes jWingL{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes jWingR{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes jFlapL{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
@keyframes jFlapR{from{transform:rotate(14deg)}to{transform:rotate(-10deg)}}
@keyframes jCrest{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes jTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes jBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.98)}}
@keyframes jTwinkle{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes jDot{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes jFloat{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-6px);opacity:.3}}
@keyframes jTear{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.jaya *{animation:none!important}}
/* Tanya Garu = the mascot itself */
.fab-jaya2{position:fixed;right:18px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 8px 14px rgba(30,34,53,.22))}
.fab-jaya2 .fab-bird{display:block;transition:transform .15s}
.fab-jaya2:hover .fab-bird{transform:scale(1.08) rotate(-4deg)}
.fab-jaya2:active .fab-bird{transform:scale(.94)}
.fab-bubble{background:var(--surface);color:var(--ink);font-weight:850;font-size:13px;padding:5px 11px;border-radius:12px;border:2px solid var(--line);margin-bottom:-4px;position:relative;white-space:nowrap;animation:bubbleIn 4s ease-in-out infinite}
.fab-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--line);border-bottom:0}
.fab-jaya2:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:50%}
@keyframes bubbleIn{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.fab-jaya2.hidden{display:none}
body:has(.cs-wrap) .fab-jaya2{display:none}
@media (max-width:820px){.fab-jaya2{bottom:calc(72px + env(safe-area-inset-bottom,0px));right:10px}.fab-jaya2 .fab-bird{width:66px;height:66px}.fab-bubble{font-size:12px;padding:4px 9px}}
@media (prefers-reduced-motion:reduce){.fab-bubble{animation:none}}
/* cheatsheet facts: label above value so answers get the full width */
.sh-facts{display:block;margin:0}
.sh-facts dt{font-size:12.5px;font-weight:800;color:var(--ink-3);margin:10px 0 2px}
.sh-facts dt:first-child{margin-top:0}
.sh-facts dd{margin:0;font-size:14.5px;line-height:1.55}
.lang-tg{display:inline-flex;background:var(--surface-2);border:2px solid var(--line);border-radius:99px;padding:2px;height:34px;align-items:center}
.lang-tg button{border:0;background:none;font-weight:850;font-size:12.5px;color:var(--ink-3);padding:0 10px;height:26px;border-radius:99px}
.lang-tg button.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ob-top .lang-tg{margin-left:auto}
/* Contoh esai */
.samples-link{background:var(--brand-soft)!important;border-color:#C9D8FF!important;color:var(--brand)!important;text-decoration:none}
.sample-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--surface-2);margin-bottom:18px;color:var(--ink-2)}
.sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sample-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
.sample-card:hover{border-color:var(--brand);text-decoration:none}
.sample-card h3{margin:6px 0 0;font-size:17px}.sample-card p{margin:0}
.sc-top{display:flex;gap:12px;align-items:center}.sc-top .score-ring{width:72px;height:72px}
.sc-top .tag{margin:2px 4px 0 0}
.sc-cta{margin-top:auto;padding-top:8px;color:var(--brand);font-weight:850;display:inline-flex;gap:4px;align-items:center}
.sample-back{margin-bottom:8px}.sample-back a{display:inline-flex;gap:4px;align-items:center;font-weight:800}
.sample-essay{display:grid;gap:12px}
.legend{display:flex;gap:8px;flex-wrap:wrap}
.lg{padding:3px 10px;border-radius:99px;font-weight:800}
.lg.good{background:var(--c-green-s);color:var(--c-green-d)}.lg.mix{background:var(--c-yellow-s);color:var(--c-yellow-d)}.lg.fix{background:var(--c-red-s);color:var(--c-red-d)}
.sp{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-lg);border:2px solid var(--line);border-left-width:6px;background:var(--surface)}
.sp.good{border-left-color:var(--c-green)}.sp.mix{border-left-color:var(--c-yellow)}.sp.fix{border-left-color:var(--c-red)}
.sp-n{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font-weight:900;font-size:13px;display:grid;place-items:center;flex:none}
.sp-body{min-width:0}
.sp-text{margin:0 0 10px;font-size:16px;line-height:1.75;font-weight:500}
.sp-note{font-size:14px;line-height:1.55;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.sp-note .tag{margin-right:4px}
.esai-tabs{margin-bottom:16px}
.esai-tabs button{display:inline-flex;gap:6px;align-items:center}
/* align: Esai workspace, example list, and example detail share the same left padding */
.esai-wrap{padding:24px 28px 80px}
.ws-left{padding:24px 28px 40px}
/* example detail split (RevisionDojo-style) */
.ex-split{display:grid;grid-template-columns:minmax(380px,42%) minmax(0,1fr);height:100%;min-height:0}
.ex-left{overflow-y:auto;padding:24px 28px 60px;border-right:2px solid var(--line);background:var(--surface)}
.ex-right{overflow-y:auto;background:#EEF0F5;padding:0 28px 60px;position:relative}
.ex-nav{display:flex;align-items:center;gap:12px;margin:-4px 0 10px}
.ex-tabs{margin-bottom:16px}.ex-tabs button{display:inline-flex;gap:6px;align-items:center}
.ex-title{font-size:21px;line-height:1.3;margin:0 0 14px}
.ex-card{border:2px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;background:var(--surface)}
.ex-card h3{margin:0;font-size:16.5px}
.ex-score{display:flex;gap:16px;align-items:center}.ex-score .score-ring{width:96px;height:96px}
.ex-res{font-size:18px}.ex-num{font-weight:900;font-size:16px}
.ex-cta{display:flex;align-items:center;gap:10px;justify-content:space-between;border:2px solid #C9D8FF;background:linear-gradient(135deg,#EEF3FF,#F6F0FF);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px}
.ex-cta h3{margin:0 0 8px;color:var(--brand);font-size:17px}
.ex-cta ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:14px}
.ex-cta li{display:flex;gap:6px;align-items:center}.ex-cta li svg{color:var(--brand)}
.gbar{margin:14px 0 10px}
.gtrack{position:relative;height:16px;border-radius:99px;background:linear-gradient(90deg,#F9C4C4 0%,#FAD9B0 35%,#EDE7A6 60%,#BCE4A4 80%,#8BD17C 100%)}
.gfill{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#9ACD32,#22C55E)}
.gmark{position:absolute;top:50%;transform:translate(-50%,-70%)}
.gmark .jaya{display:block}
.gscale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:6px;font-weight:700}
.ex-fb{display:grid;gap:8px;margin-top:10px}
.ex-fb div{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5}
.ex-fb .ok svg{color:var(--c-green);flex:none;margin-top:2px}.ex-fb .no svg{color:var(--c-red);flex:none;margin-top:2px}
.ex-com{border-top:2px solid var(--line-2);padding:10px 0 2px}
.ex-com p{margin:6px 0 0}
.ex-k{font-weight:900}.ex-k.good{color:var(--c-green-d)}.ex-k.mix{color:var(--c-orange-d)}.ex-k.fix{color:var(--c-red-d)}
.ex-strand{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.ex-strand .lvl{flex:none;font-weight:800}
.rub{border-top:2px solid var(--line-2);padding:10px 0}.rub p{margin:4px 0 0}
.rub-lv{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--ink-2)}.rub-lv i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.ex-others{display:grid;gap:12px}
.ex-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;background:#EEF0F5;margin:0 -28px 18px;border-bottom:1px solid var(--line)}
.ex-paper{max-width:800px;margin:0 auto;background:#fff;color:#1f1f1f;border-radius:6px;box-shadow:0 2px 16px rgba(20,24,40,.12);padding:56px 64px 64px;font-family:"Times New Roman",Times,Georgia,serif;line-height:1.7}
.ex-doc-title{font-family:inherit;font-size:1.45em;text-align:center;font-weight:700;line-height:1.35;margin:0 0 28px;color:#111}
.ex-p{position:relative;border-radius:3px;margin:0 -6px 14px;padding:2px 6px;cursor:pointer;outline:none}
.ex-p p{margin:0;text-align:justify}
.ex-p.good{background:rgba(34,197,94,.13)}.ex-p.mix{background:rgba(255,194,26,.18)}.ex-p.fix{background:rgba(255,75,75,.13)}
.ex-p:hover,.ex-p:focus-visible{box-shadow:0 0 0 2px rgba(47,107,255,.35)}
.ex-p.sel.good{background:rgba(34,197,94,.3);box-shadow:0 0 0 2px #22C55E}.ex-p.sel.mix{background:rgba(255,194,26,.35);box-shadow:0 0 0 2px #E0A800}.ex-p.sel.fix{background:rgba(255,75,75,.25);box-shadow:0 0 0 2px #FF4B4B}
.ex-pop{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:min(340px,90%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(20,24,40,.18);padding:12px 14px;z-index:3;font-family:var(--sans);color:var(--ink);cursor:default}
.ex-p:first-of-type .ex-pop{bottom:auto;top:calc(100% + 8px)}
@media (max-width:1100px){.ex-split{grid-template-columns:1fr;height:auto}.ex-left{border-right:0;overflow:visible}.ex-right{overflow:visible;padding:0 12px 60px}.ex-bar{margin:0 -12px 14px}.ex-paper{padding:28px 20px}}
:root[data-theme="dark"] .ex-right,:root[data-theme="dark"] .ex-bar{background:#0E1222}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ex-right,:root:not([data-theme="light"]) .ex-bar{background:#0E1222}}
.ex-paper{font-weight:400}
.ex-paper p{font-weight:400}
.ex-pop{bottom:auto;top:-12px;transform:translate(-50%,-100%)}
.ex-p:first-of-type .ex-pop{top:calc(100% + 8px);transform:translateX(-50%)}
.ex-stale{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--c-yellow-s);margin-bottom:12px}
.ex-cta.mine{background:linear-gradient(135deg,#EEF3FF,#ECFBF3)}
.ex-p.none{cursor:default}
.btn.big{height:46px;padding:0 16px;font-size:15px;background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn.big:hover{background:var(--surface-2)}
.btn.primary.big{background:var(--brand);border-color:var(--brand-d);color:#fff}
.btn.primary.big:hover{background:#4079FF}
.countdown.cd-top{margin-bottom:16px;align-items:center;padding:12px 18px}.countdown.cd-top span:not(.ni){display:inline;margin:0 0 0 6px}.countdown.cd-top b{display:inline}
@media (max-width:820px){.countdown.cd-top{align-items:flex-start;padding:12px 14px}.countdown.cd-top b{display:block}.countdown.cd-top span:not(.ni){display:block;margin:2px 0 0}}
/* timeline legend dots match the timeline item dots */
.chip i.dot-lpdp{background:var(--brand)!important}
.chip i.dot-kampus{background:var(--c-teal)!important}
.chip i.dot-pribadi{background:var(--c-orange)!important}
.ext-link{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--brand);margin-top:4px}
/* collapsible sections: consistent summary row with a right-side chevron */
body :is(details, details.help, details.card, details.plan-d, details.cons-list) > summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:800;font-size:15px;line-height:1.4;color:var(--ink);padding:2px 0;user-select:none}
details > summary::-webkit-details-marker{display:none}
details > summary::marker{content:""}
body :is(details, details.help) > summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
body :is(details, details.help)[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
body :is(details, details.help) > summary:hover{color:var(--brand)}
body :is(details, details.help) > summary:hover::after{border-color:var(--brand)}
details.card{padding:16px 22px}
details.card[open] > summary{margin-bottom:12px}
details.help{margin-top:14px;border-top:2px solid var(--line-2);padding-top:12px}
body details.help > summary{font-size:14.5px;color:var(--ink)}
details.help[open] > summary{margin-bottom:6px}
body details.plan-d > summary{font-size:14.5px;padding:12px 14px}
.cons-list > summary{font-size:14px}
.unggulan-list{border:2px solid var(--line);border-radius:var(--r-lg);padding:12px 16px;margin:0 0 16px;background:var(--surface)}
.unggulan-list.help{border-top-width:2px;margin-top:0}
@media (prefers-reduced-motion:reduce){details > summary::after{transition:none}}
.cs-new{gap:6px}
@media (max-width:520px){.cs-new span{display:none}}
.tl-i.past b,.tl-i.past .tiny{color:var(--ink-3)!important}
.tl-i.past .tl-dot{background:var(--line)!important}
.tl-i.past .st-sel{opacity:.7}
.tl-more{margin-bottom:6px}
/* brand: Garu face box + one-word black title (RevisionDojo-style) */
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);padding:4px 8px 22px}
.brand .brand-mark{width:32px;height:32px;flex:none;display:block;background:none;border-radius:9px}
.brand-name{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
/* page titles: no icon tiles, just type */
.page-head > div:first-child{display:block}
.page-head > div:first-child > p{margin:6px 0 0}
.page-head h1{font-size:32px;letter-spacing:-.02em}
/* study goal + recommendations */
.goal-card{border:2px solid #C9D8FF;background:var(--brand-soft);border-radius:var(--r-lg);padding:12px 14px;margin:12px 0 14px}
.goal-card b{font-size:14.5px}
.goal-opts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.goal-opts .chip{text-align:left;height:auto;padding:6px 12px;line-height:1.3}
.cs-focus{color:var(--brand);font-weight:800}
.reco-basis{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2)}
.reco-wait{display:flex;align-items:center;gap:12px;margin:16px 0}
.reco-card{margin-top:16px}
.reco-stories{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.reco-unis{display:grid;gap:10px;margin-top:12px}
.reco-uni{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 14px;border:2px solid var(--line);border-radius:14px;flex-wrap:wrap}
/* ---------- Garu: more animations ---------- */
/* idle glance: eyes look left/right now and then */
.jaya .j-look{transform-box:view-box;animation:jLook 7s ease-in-out infinite}
@keyframes jLook{0%,40%,100%{transform:translateX(0)}45%,55%{transform:translateX(-2.5px)}60%,70%{transform:translateX(2.5px)}75%{transform:translateX(0)}}
.jaya.m-sleepy .j-look,.jaya.m-cheer .j-look,.jaya.m-love .j-look{animation:none}
/* wave hello */
.jaya.m-wave .j-wr{transform-origin:90px 64px;animation:jWave 1.1s ease-in-out infinite}
@keyframes jWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-24deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-20deg)}}
.jaya.m-wave .j-all{animation:jTilt 2.2s ease-in-out infinite}
/* talking: beak flaps while Garu writes */
.jaya.m-talk .j-beak-o{animation:jBeakO .32s steps(1) infinite}
.jaya.m-talk .j-beak-c{animation:jBeakC .32s steps(1) infinite}
@keyframes jBeakO{0%{opacity:0}50%{opacity:1}}
@keyframes jBeakC{0%{opacity:1}50%{opacity:0}}
.jaya.m-talk .j-all{animation:jNod .64s ease-in-out infinite}
@keyframes jNod{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(1px) rotate(-2deg)}}
/* love: floating hearts + bounce */
.jaya.m-love .j-all{animation:jHop 1s ease-in-out infinite}
.jaya.m-love .j-hearts path{transform-box:fill-box;transform-origin:center;animation:jHeart 1.6s ease-in infinite}
.jaya.m-love .j-hearts path:nth-child(2){animation-delay:.4s}.jaya.m-love .j-hearts path:nth-child(3){animation-delay:.8s}
@keyframes jHeart{0%{transform:translateY(4px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-10px) scale(1.1);opacity:0}}
/* celebration: one spin when it appears, then hop */
.cel-card .jaya .j-all{animation:jSpinIn .9s cubic-bezier(.3,1.4,.5,1) 1, jHop .9s ease-in-out .9s infinite}
@keyframes jSpinIn{0%{transform:scale(.3) rotate(-30deg);opacity:0}60%{transform:scale(1.1) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
/* one-off actions (added by JS for ~1.6s) */
.jaya.act-hop .j-all{animation:jHop .5s ease-in-out 3}
.jaya.act-look .j-look{animation:jLookFast 1.4s ease-in-out 1}
@keyframes jLookFast{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
.jaya.act-wave .j-wr{transform-origin:90px 64px;animation:jWave 1s ease-in-out 2}
.jaya.act-crest .j-crest{animation:jCrestShake .25s ease-in-out 5}
@keyframes jCrestShake{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.jaya.act-spin .j-all{animation:jSpin .8s ease-in-out 1}
@keyframes jSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
/* poke: squish + hearts pop */
.jaya.act-poke .j-all{animation:jPoke .45s ease-out 1}
@keyframes jPoke{0%{transform:scale(1,1)}30%{transform:scale(1.12,.86)}60%{transform:scale(.94,1.08)}100%{transform:scale(1,1)}}
.garu-heart{position:fixed;z-index:200;pointer-events:none;font-size:18px;animation:garuHeart 1s ease-out forwards}
@keyframes garuHeart{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),-60px) scale(1.2);opacity:0}}
/* dozing: chat button falls asleep when idle */
.fab-jaya2.dozing .jaya .j-eyes{animation:none;transform-box:view-box;transform-origin:60px 52px;transform:scaleY(.15)}
.fab-jaya2.dozing .jaya .j-all{animation:jBreathe 3.5s ease-in-out infinite}
.fab-jaya2.dozing .fab-bubble::before{content:"z z z";position:absolute;right:-6px;top:-16px;font-size:12px;color:#8AA0C8;animation:jFloat 2.5s ease-in-out infinite}
.fab-jaya2.dozing .fab-bubble{opacity:.6}
.fab-jaya2:hover .jaya .j-wr{transform-origin:90px 64px;animation:jWave 1s ease-in-out infinite}
.jaya{cursor:default}
.ob-intro .jaya,.cs-m.jaya .jaya,.cel-card .jaya,.gate-card .jaya,.reco-wait .jaya{cursor:pointer}
@media (prefers-reduced-motion:reduce){.garu-heart{display:none}.cel-card .jaya .j-all{animation:none}}
/* thinking: nerd glasses that get pushed up now and then, with a moving glint */
.jaya .j-glasses{transform-box:view-box;animation:jPushUp 2.6s ease-in-out infinite}
@keyframes jPushUp{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-3px)}86%{transform:translateY(-1px)}}
.jaya .j-glint{animation:jGlint 2.6s ease-in-out infinite}
@keyframes jGlint{0%,55%{opacity:0;transform:translateX(-3px)}65%{opacity:.95}80%,100%{opacity:0;transform:translateX(4px)}}
.jaya.m-think .j-look{animation:jThinkLook 2.6s ease-in-out infinite}
@keyframes jThinkLook{0%,100%{transform:translate(0,0)}40%,60%{transform:translate(2px,-2px)}}