:root{--bg:#f5ebff;--card:#ffffff;--inp:#f8f0ff;--line:rgba(123,0,189,.2);--pu:#A600FF;--pu2:#7B00BD;--cy:#00AEFF;--tx:#2b0f4f;--mu:#6b5a8e}
*{box-sizing:border-box;margin:0}
body{background:linear-gradient(135deg,#f5ebff 0%,#e6f6ff 100%) fixed;color:var(--tx);font:15px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}input,select,button{font:inherit;color:inherit}
.app{display:flex;min-height:100vh}
aside{width:260px;flex:none;background:linear-gradient(180deg,#6A00A3,#A600FF 60%,#0079B5);border-right:0;padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:6px;color:#fff}
.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 18px}.brand b{display:block;line-height:1.25}.brand small{color:#e2d8ff;font-size:12px}
.logo{color:var(--tx);width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:22px;border:2px solid transparent;background:linear-gradient(var(--inp),var(--inp)) padding-box,linear-gradient(135deg,var(--pu),var(--cy)) border-box;box-shadow:0 0 22px rgba(166,0,255,.45);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover}.logo.big{width:84px;height:84px;font-size:36px;margin:0 auto 10px}
nav a{display:block;padding:10px 12px;border-radius:10px;color:#e9ddff}nav a:hover{background:rgba(255,255,255,.15);color:#fff}
nav a.on{background:rgba(255,255,255,.22);color:#fff;box-shadow:inset 3px 0 0 var(--cy)}
.side-foot{margin-top:auto;font-size:12px;color:#e2d8ff;padding:12px 8px;border-top:1px solid rgba(255,255,255,.28)}
main{flex:1;min-width:0;padding:22px clamp(14px,3vw,34px) 40px}
.top{display:flex;align-items:center;gap:14px;margin-bottom:22px}.top h1{font-size:24px;line-height:1.2}.top h1 small{display:block;font-size:13px;color:var(--mu);font-weight:400}
.burger{display:none;background:var(--inp);border:1px solid var(--line);border-radius:10px;width:42px;height:42px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(123,0,189,.1)}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.stat span{color:var(--mu);font-size:13px}.stat strong{display:block;font-size:30px;line-height:1.2;color:#0079B5}.stat:nth-child(even) strong{color:#7B00BD}
h3{font-size:17px;margin-bottom:12px}.mu{color:var(--mu)}.no{color:#e11d48}.ok{color:#059669}.cyt{color:#0079B5}
.btn{display:inline-block;background:linear-gradient(135deg,var(--pu2),var(--pu));border:0;border-radius:10px;padding:9px 16px;cursor:pointer;font-weight:600;color:#fff}
.btn.cy{background:linear-gradient(135deg,#0079B5,var(--cy));color:#00243a}.btn.ghost{background:none;border:1px solid var(--line)}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:520px}th{color:var(--mu);font-weight:500;text-align:left;font-size:13px}
th,td{padding:10px 8px;border-bottom:1px solid rgba(123,0,189,.1)}
.tag{padding:2px 10px;border-radius:99px;font-size:12px;border:1px solid}.tag.ok{border-color:rgba(52,211,153,.4)}.tag.no{border-color:rgba(251,113,133,.4)}
input,select{background:var(--inp);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%}
.ck{width:20px;height:20px;accent-color:var(--pu)}
label{font-size:13px;color:var(--mu);display:block;margin-bottom:4px}
.f{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;margin-bottom:16px}
.bar{display:flex;gap:10px;margin-bottom:14px}.bar input{max-width:280px}
.row{display:flex;align-items:center;gap:10px;margin:8px 0}.row span{width:90px}.row i{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--pu),var(--cy))}
.notice{padding:8px 0;border-bottom:1px solid rgba(166,0,255,.12)}.notice small{color:#0079B5}
.login{display:grid;place-items:center;padding:16px}.lg{width:100%;max-width:380px;text-align:center}.lg label{text-align:left}
.rc{background:#fff;color:#111;border-radius:14px;padding:24px;max-width:420px;text-align:center}.rc p{display:flex;justify-content:space-between;text-align:left}.rc hr{border:0;border-top:1px dashed #999;margin:12px 0}
@media(max-width:820px){aside{position:fixed;z-index:8;left:0;transform:translateX(-100%);transition:transform .25s}aside.open{transform:none}.burger{display:block}}
@media print{aside,.top,.rc .btn{display:none}body{background:#fff}.rc{margin:auto}}
textarea{background:var(--inp);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;font:inherit;color:inherit;resize:vertical}
.bgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.bc{display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--pu)}.bc:nth-child(even){border-top-color:var(--cy)}
.bh{display:flex;gap:12px;align-items:center}.bh h3{margin:0 0 2px;font-size:17px}
.code{font-size:12px;font-weight:600;color:var(--pu2);background:var(--inp);border:1px solid var(--line);padding:1px 8px;border-radius:6px}
.info{font-size:13.5px;color:var(--mu)}.info b{color:var(--tx);font-weight:600}.info span{font-size:12px}
.bf{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;align-items:center}.bf form{margin:0;display:flex;gap:8px}
.sm{padding:5px 12px;font-size:13px}.btn.dg{background:none;border:1px solid rgba(225,29,72,.4);color:#e11d48}
.tabs{display:flex;gap:8px;margin:18px 0 14px;flex-wrap:wrap}.tabs a{padding:9px 18px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--mu);font-weight:600}
.tabs a.on{background:linear-gradient(135deg,var(--pu2),var(--pu));color:#fff;border-color:transparent}
.tag.up{color:#0079B5;border-color:rgba(0,121,181,.4)}.stack{display:grid;gap:12px}
@media(max-width:560px){.f[style*="200px"]{grid-template-columns:1fr!important}}
.pb{height:10px;border-radius:6px;background:var(--inp);border:1px solid var(--line);overflow:hidden;margin:3px 0}
.pb i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pu),#7B00BD)}.pb i.cyan{background:linear-gradient(90deg,#0079B5,var(--cy))}.pb i.red{background:linear-gradient(90deg,#f472b6,#e11d48)}
.brow{margin:14px 0}.brow>div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}.brow small{color:var(--mu);text-align:right}
.rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--pu2),var(--cy));color:#fff;font-weight:700;font-size:13px}
.stat small{display:block;font-size:12.5px}h3 small{font-weight:400;font-size:12.5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:18px}.tl>div{position:relative;margin:0 0 14px}.tl>div::before{content:"";position:absolute;left:-25px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--cy);box-shadow:0 0 0 3px var(--inp)}
.bar select{max-width:190px}.bar input[name=sec]{max-width:130px}
.dn{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.lg{display:grid;gap:6px;font-size:14px}.lg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px}
.ev{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(123,0,189,.1)}
.db{display:grid;place-items:center;flex:none;width:46px;height:50px;border-radius:10px;background:linear-gradient(135deg,var(--pu2),var(--pu));color:#fff;line-height:1.1;font-weight:700}.db small{font-size:10px;font-weight:400}
.tag.ex{color:#7B00BD;border-color:rgba(123,0,189,.4)}.sh{font-size:20px;margin:28px 0 -4px}
.logo.xs{width:34px;height:34px;font-size:14px;border-width:1px;box-shadow:none}
.cards{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.idc{width:85.6mm;height:54mm;background:#fff;color:#2b0f4f;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(123,0,189,.18);border:1px solid var(--line);-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
.idh{display:flex;gap:8px;align-items:center;padding:6px 10px;background:linear-gradient(90deg,#7B00BD,#A600FF 55%,#00AEFF);color:#fff}.idh b{display:block;font-size:12px;line-height:1.2}.idh small{font-size:9.5px;opacity:.9}
.idb{flex:1;display:flex;gap:10px;padding:8px 10px;min-height:0}
.ph{width:22mm;height:27mm;flex:none;border-radius:6px;overflow:hidden;background:#f5ebff;border:2px solid #00AEFF;display:grid;place-items:center;font-size:26px;font-weight:700;color:#7B00BD}.ph img{width:100%;height:100%;object-fit:cover}
.idi h4{font-size:13px;margin:0 0 2px;line-height:1.2}.idi p{margin:0;font-size:10px;line-height:1.45}.idi .mono{font-size:11px;color:#7B00BD;font-weight:700}
.idf{background:#00AEFF;color:#00243a;font-size:8.5px;text-align:center;padding:3px 6px;font-weight:600}
.cert{background:#fff;color:#2b0f4f;border:6px double #A600FF;border-radius:6px;padding:28px 34px;max-width:780px;margin:0 auto;line-height:1.7}
.cert h1{text-align:center;letter-spacing:2px;font-size:26px;color:#7B00BD;margin:14px 0}.cert td{padding:6px 8px;border-bottom:1px dotted #aaa}
.sig{display:flex;justify-content:space-between;gap:16px;margin-top:64px;text-align:center;font-size:13px}.sig div{border-top:1px solid #333;padding-top:4px;min-width:140px}
@media print{.noprint{display:none!important}main{padding:0!important}.cards{margin:0;gap:6mm}.idc{box-shadow:none}.cert{border-color:#7B00BD;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.gh{display:flex;align-items:center}.gh a{flex:1}
.car{background:none;border:0;color:#e9ddff;cursor:pointer;padding:6px 12px;font-size:15px;transition:transform .2s;border-radius:8px}.car:hover{background:rgba(255,255,255,.15)}
.grp.open .car{transform:rotate(180deg)}
.sub{display:none;margin:2px 0 8px 16px;padding-left:10px;border-left:2px solid rgba(255,255,255,.35)}.grp.open .sub{display:block}
.sub a{padding:7px 12px;font-size:14px}
@media(prefers-reduced-motion:reduce){.car{transition:none}}

/* ===== Theme refinement: #A600FF + #00AEFF ===== */
:root{--cyd:#0079B5}
body{background:linear-gradient(135deg,#f6ecff 0%,#e8f6ff 100%) fixed}
aside{background:linear-gradient(180deg,#6A00A3 0%,#A600FF 58%,#0086C7 100%);box-shadow:4px 0 24px rgba(166,0,255,.18)}
.brand{border-bottom:1px solid rgba(255,255,255,.22);margin-bottom:8px}
.logo{box-shadow:0 0 0 3px rgba(255,255,255,.2),0 6px 18px rgba(0,174,255,.4)}
nav a.on{background:rgba(255,255,255,.2);box-shadow:inset 3px 0 0 #00AEFF}
.card{border-radius:18px;box-shadow:0 6px 24px rgba(166,0,255,.08);transition:box-shadow .2s}
.card:hover{box-shadow:0 10px 30px rgba(0,174,255,.16)}
.stat{position:relative;overflow:hidden}.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#A600FF,#00AEFF)}
.top h1{padding-left:14px;border-left:5px solid;border-image:linear-gradient(180deg,#A600FF,#00AEFF) 1}
th{background:linear-gradient(90deg,rgba(166,0,255,.08),rgba(0,174,255,.08));color:var(--tx);font-weight:600}
.btn{background:linear-gradient(135deg,#8A00D9,#A600FF);box-shadow:0 4px 12px rgba(166,0,255,.28)}
.btn.cy{background:linear-gradient(135deg,#00AEFF,#37C6FF);color:#00243a;box-shadow:0 4px 12px rgba(0,174,255,.3)}
.btn.ghost,.btn.dg{box-shadow:none}
input:focus,select:focus,textarea:focus{outline:2px solid #00AEFF;border-color:#00AEFF}
.tabs a.on{background:linear-gradient(135deg,#A600FF,#0086C7)}
.stabs{justify-content:flex-end;margin-top:-6px!important}.stabs a{border-radius:999px;padding:8px 18px}
body.login{background:linear-gradient(135deg,#6A00A3 0%,#A600FF 52%,#00AEFF 100%) fixed}
.lg{border:0;box-shadow:0 24px 60px rgba(40,0,80,.35);padding:30px}
@media(prefers-reduced-motion:reduce){.card{transition:none}}

/* ===== Content area background: #0084FF + #004B8A ===== */
body{background:radial-gradient(900px 520px at 88% -8%,rgba(255,255,255,.22),transparent 62%),radial-gradient(760px 520px at 8% 108%,rgba(0,132,255,.6),transparent 60%),linear-gradient(135deg,#004B8A 0%,#0066C4 52%,#0084FF 100%) fixed}
body.login{background:linear-gradient(135deg,#6A00A3 0%,#A600FF 52%,#00AEFF 100%) fixed}
.top h1{color:#fff;border-image:linear-gradient(180deg,#fff,#7fd0ff) 1}
.top h1 small{color:#cfe8ff}
.sh{color:#fff}
.card{border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 32px rgba(0,30,80,.28)}
.card:hover{box-shadow:0 16px 38px rgba(0,30,80,.36)}
main>p.ok,main>p.no{background:#fff;padding:10px 14px;border-radius:12px;border-left:5px solid currentColor;box-shadow:0 6px 18px rgba(0,30,80,.2)}
.tabs a{box-shadow:0 4px 12px rgba(0,30,80,.18);border-color:transparent}
.burger{background:#fff}
@media print{body{background:#fff!important}.card{box-shadow:none}}

/* Academic / Class Routine */
.opt{display:block;color:inherit;transition:transform .15s}.opt:hover{transform:translateY(-3px)}
details.card>summary{cursor:pointer;font-size:15px;list-style:none}details.card>summary::-webkit-details-marker{display:none}details.card>summary::before{content:"▸ ";color:var(--pu)}details[open].card>summary::before{content:"▾ "}
.rt th,.rt td{border:1px solid rgba(123,0,189,.15);text-align:center;vertical-align:middle;padding:8px}.rt td:first-child{text-align:left;white-space:nowrap;background:var(--inp)}
.rt select{min-width:160px;font-size:13px;padding:6px 8px}.rt select.has{border-color:#00AEFF;background:#e8f6ff;font-weight:600}
.rt tr.brk td{background:linear-gradient(90deg,rgba(166,0,255,.1),rgba(0,174,255,.1));font-weight:600;color:var(--pu2)}
.pt{display:none}.pr{display:none}
@media print{.np{display:none!important}.pt{display:block;font-size:12px}.pr{display:block}.rt th,.rt td{border-color:#999}}