:root { --navy:#0b1f6b; --navy2:#06164d; --blue:#1d4ed8; --blue-soft:#eaf1ff; --orange:#f7941d; --orange-soft:#fff3e4; --green:#84c225; --green-soft:#eff9df; --ink:#18233d; --muted:#687691; --line:#dce5f1; --canvas:#f5f7fb; --danger:#c93449; --shadow:0 13px 34px rgba(8,31,91,.11); --radius:18px; --side:280px; --side-collapsed:82px; }
    * { box-sizing:border-box; }
    html,body { min-height:100%; }
    body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 88% 3%,rgba(132,194,37,.1),transparent 27rem),radial-gradient(circle at 11% 2%,rgba(247,148,29,.08),transparent 24rem),var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
    body.theme-professional { --navy:#0b1f6b; --navy2:#06164d; --blue:#1d4ed8; --orange:#f7941d; --green:#84c225; --canvas:#f5f7fb; }
    body.theme-modern { --navy:#24115d; --navy2:#10072f; --blue:#7c3aed; --orange:#ec4899; --green:#10b981; --blue-soft:#f0eaff; --green-soft:#e5fbf3; --canvas:#f7f5ff; background:radial-gradient(circle at 88% 3%,rgba(236,72,153,.13),transparent 27rem),radial-gradient(circle at 9% 4%,rgba(124,58,237,.13),transparent 25rem),var(--canvas); }
    button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.55; cursor:not-allowed; } [hidden] { display:none !important; }
    input,select,textarea { width:100%; border:1px solid #cdd8e9; border-radius:10px; color:var(--ink); background:#fff; outline:none; transition:border .18s,box-shadow .18s; }
    input,select { height:42px; padding:0 12px; } textarea { min-height:68px; padding:9px 10px; resize:vertical; line-height:1.35; }
    input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,78,216,.14); }
    input:disabled,textarea:disabled,select:disabled { color:#65728b; background:#f2f5f9; cursor:not-allowed; }
    .button { min-height:41px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:1px solid transparent; border-radius:11px; font-size:13px; font-weight:800; transition:transform .17s,box-shadow .17s,background .17s; }
    .button:hover:not(:disabled) { transform:translateY(-1px); } .button svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
    .button.primary { color:#fff;background:var(--navy);box-shadow:0 7px 17px rgba(11,31,107,.2); } .button.primary:hover:not(:disabled){background:#102a8d;}
    .button.accent { color:#fff;background:#e8810d;box-shadow:0 7px 17px rgba(247,148,29,.22);} .button.accent:hover:not(:disabled){background:var(--orange);}
    .button.secondary { color:var(--navy);background:#fff;border-color:#cdd8e9; } .button.secondary:hover:not(:disabled){background:#f7f9fd;}
    .button.danger { color:var(--danger);background:#fff3f4;border-color:#f0c8ce; } .button.compact { min-height:34px;padding:0 10px;font-size:12px; }
    .form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; } .form-grid.three {grid-template-columns:repeat(3,minmax(0,1fr));}.field{min-width:0}.field.wide{grid-column:1/-1}.field label{display:block;margin:0 0 7px;color:#40506d;font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.field small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.35}

    /* Layar aktivasi dan login */
    .auth-screen { position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:24px;background:linear-gradient(145deg,#06164d,#12398e 58%,#1c4ab2); }
    .auth-screen.has-login-background { background-image:linear-gradient(145deg,rgba(6,22,77,.88),rgba(18,57,142,.72) 58%,rgba(28,74,178,.66)),var(--login-background); background-size:cover; background-position:center; background-attachment:fixed; }
    .password-field{position:relative}.password-field input{padding-right:48px}.password-toggle{position:absolute;right:6px;top:50%;width:34px;height:32px;display:grid;place-items:center;padding:0;color:var(--navy);background:transparent;border:0;border-radius:8px;transform:translateY(-50%)}.password-toggle:hover{background:var(--blue-soft)}.password-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .auth-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35}.auth-orb.one{width:340px;height:340px;background:#f7941d;top:-150px;right:-80px}.auth-orb.two{width:300px;height:300px;background:#84c225;left:-110px;bottom:-130px}
    .auth-card{position:relative;width:min(960px,100%);display:grid;grid-template-columns:330px minmax(0,1fr);overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.3);border-radius:24px;box-shadow:0 26px 70px rgba(0,0,0,.28)}
    .auth-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 26px;color:#fff;text-align:center;background:linear-gradient(165deg,#0b1f6b,#1745aa)}.auth-logo{width:113px;height:113px;border:4px solid rgba(255,255,255,.88);border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.2)}.auth-brand h1{margin:19px 0 7px;font-size:23px;line-height:1.1}.auth-brand p{margin:0;color:rgba(255,255,255,.76);font-size:13px;line-height:1.5}.auth-foot{margin-top:27px;color:rgba(255,255,255,.6);font-size:11px}
    .auth-form{padding:36px clamp(24px,5vw,52px)}.auth-form h2{margin:0;color:var(--navy);font-size:25px;letter-spacing:-.03em}.auth-form>p{margin:8px 0 22px;color:var(--muted);font-size:13px;line-height:1.5}.setup-rule{display:flex;gap:10px;margin:0 0 20px;padding:12px;color:#405b23;background:var(--green-soft);border:1px solid #d8ebba;border-radius:12px;font-size:12px;line-height:1.45}.setup-rule svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:#5b8a15;stroke-width:2}.auth-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.auth-status{margin-top:13px;color:#64718a;font-size:12px;line-height:1.4}

    /* Aplikasi */
    .app-shell{min-height:100vh}.app-shell.is-hidden{display:none}.sidebar{position:fixed;z-index:30;inset:0 auto 0 0;width:var(--side);display:flex;flex-direction:column;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--navy2),var(--navy) 54%,#173b99);box-shadow:7px 0 27px rgba(5,21,68,.15);transition:width .28s,transform .28s}.brand-area{display:flex;align-items:center;gap:13px;min-height:102px;padding:18px;border-bottom:1px solid rgba(255,255,255,.14)}.logo-toggle{flex:0 0 58px;width:58px;height:58px;padding:0;overflow:hidden;border:2px solid #fff;border-radius:50%;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.2);transition:transform .18s}.logo-toggle:hover{transform:scale(1.06)}.logo-toggle img{width:100%;height:100%;object-fit:cover}.brand-copy{min-width:0}.brand-copy strong{display:block;font-size:14px;line-height:1.15;letter-spacing:.05em}.brand-copy small{display:block;margin-top:4px;color:rgba(255,255,255,.72);font-size:11px;line-height:1.25}.side-caption{margin:21px 23px 9px;color:rgba(255,255,255,.55);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}.nav-list{display:grid;gap:6px;padding:0 12px}.nav-item{position:relative;width:100%;height:48px;display:flex;align-items:center;gap:14px;padding:0 13px;overflow:hidden;color:rgba(255,255,255,.79);border:0;border-radius:12px;background:transparent;text-align:left;transition:background .18s,color .18s,transform .18s}.nav-item:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateX(2px)}.nav-item.active{color:var(--navy);background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.14)}.nav-item.sidebar-logout{color:#ffd5db;background:rgba(201,52,73,.16)}.nav-item.sidebar-logout:hover{color:#fff;background:rgba(201,52,73,.32)}.nav-icon{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center}.nav-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nav-label{overflow:hidden;font-size:14px;font-weight:700;white-space:nowrap}.side-footer{margin-top:auto;padding:16px 20px 19px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.64);font-size:11px;line-height:1.45}.side-footer b{display:block;margin-bottom:3px;color:#fff;font-size:11px}
    .main{min-height:100vh;margin-left:var(--side);padding:26px clamp(18px,3vw,44px) 45px;transition:margin-left .28s}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}.eyebrow{display:block;margin-bottom:3px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.topbar-title strong{color:var(--navy);font-size:20px;letter-spacing:-.02em}.account-area{display:flex;align-items:center;gap:9px}.account-chip{display:flex;align-items:center;gap:9px;max-width:360px;padding:8px 12px;border:1px solid #d5dfef;border-radius:999px;background:rgba(255,255,255,.83);box-shadow:0 5px 14px rgba(12,33,82,.05)}.account-avatar{width:28px;height:28px;display:grid;place-items:center;color:#fff;background:var(--navy);border-radius:50%;font-size:11px;font-weight:900}.account-text{min-width:0}.account-text b,.account-text span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-text b{font-size:12px;color:var(--navy)}.account-text span{color:var(--muted);font-size:10px}.logout-button{width:38px;height:38px;display:grid;place-items:center;padding:0;color:var(--danger);border:1px solid #efcbd0;border-radius:11px;background:#fff5f6}.logout-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
    .view{display:none;animation:viewin .22s ease both}.view.active{display:block}@keyframes viewin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:17px;margin-bottom:19px}.page-heading h1{margin:0;color:var(--navy);font-size:clamp(23px,2.4vw,31px);letter-spacing:-.045em;line-height:1.1}.page-heading p{max-width:720px;margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.header-actions,.inline-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.header-actions{justify-content:flex-end}.panel{overflow:hidden;background:rgba(255,255,255,.94);border:1px solid #dce5f1;border-radius:var(--radius);box-shadow:var(--shadow)}.panel+.panel{margin-top:19px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 19px 15px;border-bottom:1px solid #e4eaf3}.panel-head h2{margin:0;color:var(--navy);font-size:16px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.4}.panel-body{padding:19px}.notice{display:flex;align-items:flex-start;gap:11px;margin:0 0 18px;padding:13px 15px;color:#3c577d;background:linear-gradient(90deg,#edf4ff,#f9fbff);border:1px solid #d4e2fc;border-radius:13px;font-size:13px;line-height:1.45}.notice svg{flex:0 0 19px;width:19px;height:19px;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2}.notice strong{color:var(--navy)}.layout-two{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:19px}.muted{color:var(--muted)}.tag{padding:5px 8px;color:#405e15;background:var(--green-soft);border:1px solid #dbeebb;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em;white-space:nowrap}

    /* Materi dinamis */
    .materials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(315px,1fr));gap:15px}.material-card{overflow:hidden;border:1px solid #dce5f2;border-radius:14px;background:#fff}.material-top{display:flex;align-items:center;gap:9px;padding:11px;background:#f7f9ff;border-bottom:1px solid #e3eaf4}.scope-number{flex:0 0 31px;width:31px;height:31px;display:grid;place-items:center;color:#fff;background:var(--navy);border-radius:9px;font-size:13px;font-weight:900}.material-title{height:38px;font-size:13px;font-weight:700}.material-top .tiny-icon{margin-left:auto}.tp-list{display:grid;gap:9px;padding:12px}.tp-row{display:grid;grid-template-columns:42px minmax(0,1fr) 29px;gap:8px;align-items:start}.tp-tag{height:30px;display:grid;place-items:center;color:#527018;background:var(--green-soft);border-radius:8px;font-size:10px;font-weight:900}.tp-row textarea{min-height:53px;padding:8px 9px;font-size:12px}.material-footer{display:flex;justify-content:flex-end;padding:0 12px 12px}.tiny-icon{width:32px;height:32px;display:inline-grid;place-items:center;padding:0;color:var(--danger);background:#fff4f5;border:1px solid #f2ced2;border-radius:9px}.tiny-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.student-order-actions{display:inline-flex;align-items:center;justify-content:center;gap:4px}.tiny-icon.move{color:var(--navy);background:#f2f6ff;border-color:#d4e0f4}.tiny-icon.neutral{color:var(--navy);background:#f3f7ff;border-color:#d6e1f3}

    /* Tabel */
    .table-shell{overflow:auto;border:1px solid #dbe3f0;border-radius:14px;background:#fff}table{width:100%;border-spacing:0;border-collapse:separate}.data-table{min-width:610px}th,td{border-right:1px solid #e1e7f1;border-bottom:1px solid #e1e7f1}th:last-child,td:last-child{border-right:0}tbody tr:last-child td{border-bottom:0}.data-table th{padding:11px 10px;color:#fff;background:var(--navy);font-size:11px;font-weight:800;letter-spacing:.04em;text-align:center;text-transform:uppercase}.data-table td{padding:8px 10px;color:#30415f;font-size:13px;vertical-align:middle}.data-table tbody tr:nth-child(even) td{background:#fbfcff}.data-table tbody tr:hover td{background:#f2f7ff}.center{text-align:center}.cell-input{min-width:180px;height:35px;padding:0 9px;border-color:transparent;background:transparent;font-size:13px}.cell-input:focus{border-color:var(--blue);background:#fff}.empty-state{padding:32px 18px;color:var(--muted);text-align:center}.empty-state svg{width:37px;height:37px;margin-bottom:8px;fill:none;stroke:#9cadca;stroke-width:1.7}.empty-state b{display:block;color:#4b5e7e;font-size:14px}.empty-state span{display:block;margin-top:4px;font-size:12px;line-height:1.45}
    .class-strip{display:flex;align-items:center;gap:10px;margin:0 0 17px;padding:12px 14px;color:#456015;background:var(--green-soft);border:1px solid #d6ebae;border-radius:13px;font-size:13px}.class-strip svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:2}.class-strip b{color:#38530b}.student-tools{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.mini-tool{padding:15px;background:#f9fbff;border:1px solid #e0e8f4;border-radius:14px}.mini-tool h3{margin:0 0 5px;color:var(--navy);font-size:14px}.mini-tool p{margin:0 0 11px;color:var(--muted);font-size:12px;line-height:1.4}.add-line{display:flex;gap:8px;align-items:center}

    /* Tabel nilai serta bilah geser atas */
    .score-info{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#54637e;font-size:12px;line-height:1.45}.score-info .pill{padding:4px 8px;color:var(--navy);background:var(--blue-soft);border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em;white-space:nowrap}.table-shell[data-score-scroll-body]{scrollbar-width:none;-ms-overflow-style:none}.table-shell[data-score-scroll-body]::-webkit-scrollbar{width:0;height:0}.score-scroll-toolbar{position:sticky;top:8px;z-index:12;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px 12px;margin-bottom:9px;padding:9px 10px 10px 12px;background:rgba(248,251,255,.98);border:1px solid #d8e4f5;border-radius:11px;box-shadow:0 5px 13px rgba(18,54,113,.07)}.score-scroll-caption{display:flex;align-items:center;gap:8px;min-width:0;color:#53627d;font-size:11px;line-height:1.3}.score-scroll-caption b{color:var(--navy);white-space:nowrap}.score-scroll-caption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-scroll-actions{display:flex;gap:6px}.scroll-shift-button{width:34px;height:30px;display:inline-grid;place-items:center;padding:0;color:var(--navy);background:#fff;border:1px solid #cdd9ea;border-radius:8px}.scroll-shift-button:hover{background:var(--blue-soft)}.scroll-shift-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.score-range-wrap{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0;padding:2px 1px 0}.score-range-label{flex:0 0 auto;color:#53627d;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.score-range-slider{flex:1;min-width:100px;height:18px;accent-color:var(--navy);cursor:grab}.score-range-slider:active{cursor:grabbing}.score-range-slider:disabled{opacity:.45;cursor:not-allowed}.score-table{min-width:1480px}.formative-table{min-width:3150px}.score-table th{padding:8px 6px;color:#fff;background:var(--navy);border-color:rgba(255,255,255,.2);font-size:10px;font-weight:800;text-align:center;vertical-align:middle}.score-table .group-formative:nth-of-type(odd),.score-table .asam-group{background:#e8800e}.score-table .group-formative:nth-of-type(even),.score-table .asas-group{background:#6da91a}.score-table th .group-sub{display:block;margin-top:3px;color:rgba(255,255,255,.82);font-size:9px;font-weight:600}.score-table .objective-head{width:68px;min-width:68px;color:#254371;background:#edf2fb;border-color:#d7e0ed;font-size:9px;line-height:1.25}.score-table .objective-head small{display:block;max-width:70px;overflow:hidden;color:#6f7c94;font-size:8px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.score-table td{height:46px;padding:5px;color:#2f4162;background:#fff;font-size:12px}.score-table tbody tr:nth-child(even) td{background:#fbfcff}.score-table tbody tr:hover td{background:#f4f8ff}.score-table .sticky-no,.score-table .sticky-name{position:sticky;z-index:3}.score-table th.sticky-no,.score-table th.sticky-name{z-index:6;background:var(--navy)}.score-table .sticky-no{left:0;min-width:55px;text-align:center}.score-table .sticky-name{left:55px;min-width:215px;max-width:215px}.score-table tbody tr:nth-child(even) .sticky-no,.score-table tbody tr:nth-child(even) .sticky-name{background:#fbfcff}.score-table tbody tr:nth-child(odd) .sticky-no,.score-table tbody tr:nth-child(odd) .sticky-name{background:#fff}.score-table tbody tr:hover .sticky-no,.score-table tbody tr:hover .sticky-name{background:#f4f8ff}.score-table .name-cell{padding:8px 10px;font-weight:700}.score-input{width:59px;min-width:59px;height:33px;padding:0 4px;border:1px solid #d8e0ec;border-radius:8px;color:var(--navy);font-size:12px;font-weight:700;text-align:center}.score-input.invalid-score{border-color:var(--danger);background:#fff2f3;color:var(--danger)}.score-average{min-width:78px;color:var(--navy);background:#fff5e7 !important;font-size:13px;font-weight:900;text-align:center}.score-readonly{display:block;min-width:59px;padding:7px 3px;color:#52627e;text-align:center;font-weight:700}.recap-table{min-width:700px}.recap-table .average{color:var(--navy);font-weight:800;text-align:center}.recap-table .final-score{color:#865004;background:#fff5e7 !important;font-weight:900;text-align:center}

    .formula-card{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px;padding:15px 16px;background:linear-gradient(105deg,#fff8ed,#fff);border:1px solid #fae0b9;border-radius:14px}.formula-icon{flex:0 0 37px;width:37px;height:37px;display:grid;place-items:center;color:#9b5901;background:#fff1d9;border-radius:11px}.formula-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.formula-card b{display:block;margin-bottom:3px;color:#814b02;font-size:13px}.formula-card p{margin:0;color:#755a35;font-size:12px;line-height:1.45}.role-note{display:flex;align-items:flex-start;gap:11px;margin-bottom:17px;padding:13px 14px;color:#4c5b75;background:#f5f8fd;border:1px solid #dce6f3;border-radius:13px;font-size:12px;line-height:1.45}.role-note svg{flex:0 0 19px;width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:2}.wali-materials-wrap{margin-top:17px}.wali-materials-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;color:var(--navy);font-size:14px;font-weight:900}.wali-material-list{display:grid;gap:10px}.wali-material-card{padding:13px 14px;background:#f7faff;border:1px solid #dce7f6;border-radius:12px}.wali-material-card b{display:block;margin-bottom:7px;color:var(--navy);font-size:13px}.wali-material-card ul{margin:0;padding-left:20px;color:#4d5e7c;font-size:12px;line-height:1.55}.copy-tabs{display:flex;gap:7px;margin:14px 0}.copy-tab{min-height:34px;padding:0 12px;color:#50617f;background:#f3f6fb;border:1px solid #d9e2ee;border-radius:9px;font-size:12px;font-weight:800}.copy-tab.active{color:#fff;background:var(--navy);border-color:var(--navy)}

    /* Panel pengaturan admin */
    .admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}.access-panel{margin-top:19px}.access-role{padding:6px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em}.access-role.ADMIN{color:#fff;background:var(--navy)}.access-role.GURU{color:#764300;background:#fff0d9}.access-role.WALI_KELAS{color:#456015;background:var(--green-soft)}.access-table{min-width:680px}.access-table th,.access-table td{text-align:center;vertical-align:middle}.access-table th{white-space:nowrap}.access-table td .access-role{display:inline-flex;align-items:center;justify-content:center}.presence-status{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:4px;color:#56657d;font-size:10px;font-weight:800}.presence-dot{width:8px;height:8px;display:inline-block;border-radius:50%;background:#aeb9ca;box-shadow:0 0 0 2px #eef2f7}.presence-dot.online{background:#28b463;box-shadow:0 0 0 2px #e2f8eb,0 0 8px rgba(40,180,99,.65)}.presence-dot.offline{background:#aeb9ca}.homeroom-input{min-width:175px;height:34px;padding:0 8px;font-size:12px}.subject-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;max-height:192px;overflow:auto;padding:9px;border:1px solid #d7e1ef;border-radius:10px;background:#fbfcff}.subject-check-option{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 7px;color:#455675;background:#fff;border:1px solid #e1e7f1;border-radius:8px;font-size:11px;font-weight:700;line-height:1.25}.subject-check-option input{width:15px;height:15px;flex:0 0 15px;accent-color:var(--navy)}.storage-chip{padding:7px 10px;color:#456015;background:var(--green-soft);border:1px solid #d7ebaf;border-radius:10px;font-size:11px;font-weight:800}.appearance-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);gap:18px;align-items:start}.appearance-preview{min-height:155px;display:grid;place-items:center;overflow:hidden;color:#62708a;background:#f3f6fb;border:1px dashed #cbd7e8;border-radius:13px;font-size:12px;text-align:center}.appearance-preview img{width:100%;height:190px;object-fit:cover}.about-card{padding:clamp(20px,3vw,32px);background:linear-gradient(135deg,#f6f9ff,#fff);border:1px solid #dde7f4;border-radius:15px;color:#435270;font-size:14px;line-height:1.68}.about-card strong{color:var(--navy)}.about-intro{margin:0 0 23px;color:#455778;text-align:justify}.about-section{margin:23px 0 0}.about-section h3{margin:0 0 10px;color:var(--navy);font-size:16px;letter-spacing:-.01em}.about-section p{margin:0;color:#455778;text-align:justify}.about-feature-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}.about-feature-list li{position:relative;padding-left:20px;color:#455778;text-align:justify}.about-feature-list li::before{position:absolute;left:2px;top:10px;width:7px;height:7px;background:var(--orange);border-radius:50%;content:''}.about-system{display:grid;gap:4px;margin-top:7px;padding:13px 15px;background:#f4f8ff;border:1px solid #dae5f4;border-radius:10px}.about-system div{color:#455778}.about-system b{display:inline-block;min-width:145px;color:var(--navy)}

    /* Sidebar runtuh: icon benar-benar di pusat */
    .app-shell.sidebar-collapsed .sidebar{width:var(--side-collapsed)}.app-shell.sidebar-collapsed .main{margin-left:var(--side-collapsed)}.app-shell.sidebar-collapsed .brand-area{justify-content:center;padding-left:11px;padding-right:11px}.app-shell.sidebar-collapsed .brand-copy{width:0;flex:0 0 0;overflow:hidden}.app-shell.sidebar-collapsed .brand-copy,.app-shell.sidebar-collapsed .side-caption,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .side-footer{opacity:0;pointer-events:none}.app-shell.sidebar-collapsed .nav-list{padding-left:12px;padding-right:12px}.app-shell.sidebar-collapsed .nav-item{width:58px;margin-inline:auto;justify-content:center;gap:0;padding:0}.app-shell.sidebar-collapsed .nav-icon{flex:0 0 22px;margin:0}.app-shell.sidebar-collapsed .nav-label{width:0;flex:0 0 0;margin:0;overflow:hidden}.app-shell.sidebar-collapsed .nav-item:hover{transform:none}.app-shell.sidebar-collapsed .nav-item::after{position:absolute;left:76px;z-index:50;display:none;width:max-content;padding:7px 9px;color:#fff;background:#152961;border-radius:7px;box-shadow:0 5px 15px rgba(0,0,0,.16);content:attr(data-tooltip);font-size:11px;font-weight:700;white-space:nowrap}.app-shell.sidebar-collapsed .nav-item:hover::after{display:block}
    .loading-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(245,248,253,.72);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s}.loading-overlay.show{opacity:1;pointer-events:auto}.loading-card{display:flex;align-items:center;gap:13px;padding:17px 21px;color:var(--navy);background:#fff;border:1px solid #dce5f1;border-radius:15px;box-shadow:0 16px 50px rgba(8,30,95,.2);font-size:13px;font-weight:800}.spinner{width:23px;height:23px;border:3px solid #dfe9ff;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toastStack{position:fixed;right:20px;bottom:20px;z-index:310;display:grid;gap:9px;width:min(390px,calc(100vw - 40px))}.toast{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;color:#24426d;background:#fff;border:1px solid #d5e0f1;border-left:4px solid var(--blue);border-radius:12px;box-shadow:0 10px 30px rgba(12,34,85,.15);font-size:13px;line-height:1.4;animation:toastin .25s ease both}.toast.success{border-left-color:var(--green)}.toast.error{border-left-color:var(--danger)}.toast svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2}@keyframes toastin{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}
    @media(max-width:1120px){.layout-two,.admin-grid,.appearance-grid{grid-template-columns:1fr}.student-tools{grid-template-columns:1fr}}@media(max-width:820px){.auth-card{grid-template-columns:1fr;max-width:560px}.auth-brand{padding:26px}.auth-logo{width:82px;height:82px}.auth-brand h1{margin-top:13px}.sidebar{width:var(--side);transform:translateX(-100%)}.main,.app-shell.sidebar-collapsed .main{margin-left:0;padding:19px 15px 34px}.app-shell:not(.sidebar-collapsed) .sidebar{width:var(--side);transform:translateX(0)}.app-shell.sidebar-collapsed .sidebar{width:var(--side);transform:translateX(-100%)}.app-shell.sidebar-collapsed .brand-area{justify-content:flex-start;padding-left:18px;padding-right:18px}.app-shell.sidebar-collapsed .brand-copy{width:auto;flex:initial;overflow:visible}.app-shell.sidebar-collapsed .brand-copy,.app-shell.sidebar-collapsed .side-caption,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .side-footer{opacity:1;pointer-events:auto}.app-shell.sidebar-collapsed .nav-item{width:100%;margin:0;justify-content:flex-start;gap:14px;padding:0 13px}.app-shell.sidebar-collapsed .nav-label{width:auto;flex:initial;overflow:visible}.app-shell.sidebar-collapsed .nav-item::after{display:none!important}.topbar{align-items:flex-start;flex-direction:column;margin-bottom:19px}.page-heading{display:block}.header-actions{justify-content:flex-start;margin-top:14px}}@media(max-width:590px){.auth-screen{padding:14px}.auth-form{padding:25px 20px}.form-grid,.form-grid.three{grid-template-columns:1fr}.page-heading h1{font-size:25px}.header-actions,.header-actions .button{width:100%}.header-actions .button{justify-content:center}.add-line{align-items:stretch;flex-direction:column}.add-line .button{width:100%}.materials-grid{grid-template-columns:1fr}.score-scroll-toolbar{display:flex;align-items:flex-start;flex-wrap:wrap}.score-scroll-caption{width:100%}.score-scroll-caption span{white-space:normal}.score-scroll-actions{width:100%}.scroll-shift-button{flex:1}.score-range-wrap{width:100%}.panel-body{padding:15px}.panel-head{padding:16px 15px 13px}.account-area{width:100%;justify-content:space-between}.account-chip{max-width:calc(100% - 48px)}}