:root{--bg:#f6f7f9;--fg:#1b2430;--card:#fff;--line:#d9dee6;--pri:#0b6b5c;--err:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#10151b;--fg:#e8edf2;--card:#19212a;--line:#2b3644;--pri:#3fb8a3;--err:#ff8a80}}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5}
.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:.75rem 1.25rem;background:var(--card);border-bottom:1px solid var(--line)}
.top .who{margin-left:auto;font-size:.9rem}a{color:var(--pri)}main{max-width:1000px;margin:1.5rem auto;padding:0 1rem;min-height:70vh}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.25rem;margin-bottom:1rem}.narrow{max-width:420px;margin:2rem auto}
label{display:block;margin:.75rem 0 .25rem;font-weight:600}input{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
button{margin-top:1rem;padding:.65rem 1.1rem;border:0;border-radius:8px;background:var(--pri);color:#fff;font-weight:600;cursor:pointer}button.role{display:block;width:100%;text-align:left}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}.error{color:var(--err)}.empty{color:var(--fg);opacity:.75}
.toast{background:var(--card);border:1px solid var(--pri);border-radius:8px;padding:.6rem 1rem;margin-bottom:1rem}footer{text-align:center;font-size:.8rem;padding:1rem;opacity:.7}
select{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:.4rem;text-align:left}code{background:var(--bg);padding:0 .25rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}.chips a{padding:.3rem .7rem;border:1px solid var(--line);border-radius:99px;text-decoration:none}.chips a.on{background:var(--pri);color:#fff}
.inline{display:inline}input.auto{width:auto}.editor{border:1px solid var(--line);border-radius:8px}.editor-bar{display:flex;flex-wrap:wrap;gap:.25rem;padding:.35rem;border-bottom:1px solid var(--line)}.editor-bar button{margin:0;padding:.3rem .6rem;background:var(--bg);color:var(--fg);border:1px solid var(--line)}
.editor-area{min-height:8rem;padding:.6rem}.editor-area td,.post td,.post th{border:1px solid var(--line);padding:.3rem}.post{margin-left:0}.post .post{margin-left:1.25rem}.post img{max-width:100%}
.opsi{font-weight:400}
svg.gpa{width:100%;height:auto;max-width:640px}.g-grid{stroke:var(--line)}.g-txt{fill:var(--fg);font-size:11px}.g-ips,.g-ipk{stroke-width:2}.g-ips{stroke:var(--pri)}.g-ipk{stroke:#b26a00}
.g-ips-d{fill:var(--pri);stroke:none;color:var(--pri)}.g-ipk-d{fill:#b26a00;stroke:none;color:#b26a00}.g-run{fill:none;stroke:var(--fg);stroke-dasharray:3 2}.g-key{font-weight:700}
.badge{background:var(--err);color:#fff;border-radius:99px;padding:0 .45rem;font-size:.75rem}.belum{border-color:var(--pri)}.top nav{display:flex;gap:.75rem}progress{vertical-align:middle}
.lulus{border-color:var(--pri)}.gagal{border-color:var(--err)}
.shell{display:flex;gap:1rem;align-items:flex-start;max-width:1280px;margin:0 auto}#sidebar{width:220px;flex:0 0 220px;padding:1rem 0 1rem 1rem}#sidebar nav{display:flex;flex-direction:column;gap:.25rem}#sidebar a{padding:.5rem .75rem;border-radius:8px;text-decoration:none;color:var(--fg)}#sidebar a:hover,#sidebar a:focus-visible{background:var(--card);outline:2px solid var(--pri)}
.side-tutup #sidebar{display:none}.shell main{flex:1;min-width:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cari input{width:16rem;max-width:100%}.top button{margin:0}#toggle-sidebar{background:var(--bg);color:var(--fg);border:1px solid var(--line)}
@media (max-width:700px){.shell{flex-direction:column;gap:0}#sidebar{width:100%;flex:none;padding:.5rem 1rem}#sidebar nav{flex-direction:row;flex-wrap:wrap}.cari input{width:100%}}