:root {
    --primary: #2563eb;
    --secondary: #14b8a6;
    --accent: #f59e0b;
    --sidebar: #0f2a5f;
    --violet: #7c3aed;
    --danger: #dc2626;
    --success: #059669;
    --ink: #162033;
    --muted: #687386;
    --line: #e4e9f1;
    --surface: #ffffff;
    --surface-soft: #f5f8fc;
    --canvas: #edf2f7;
    --shadow: 0 14px 36px rgba(26, 48, 89, .10);
    --radius: 14px;
    --radius-sm: 10px;
    --sidebar-width: 228px;
}

/* v1.10 — Cetak Nilai, Kirim Nilai Dapodik, Backup & Restore */
.report-tabs{overflow-x:auto}.report-heading,.dapodik-send-heading,.backup-heading{align-items:flex-start}.report-filter{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;align-items:end;gap:14px;margin-bottom:16px}.report-filter label{display:grid;gap:7px}.report-filter label>span{font-size:12px;font-weight:800;color:var(--muted)}.report-summary-strip,.send-readiness{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.report-summary-strip article,.send-readiness article{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm)}.report-summary-strip article>span,.send-readiness article>span{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#4f8fff);font-weight:900}.report-summary-strip small,.report-summary-strip strong,.send-readiness small,.send-readiness strong{display:block}.report-summary-strip small,.send-readiness small{color:var(--muted);font-size:11px}.report-summary-strip strong,.send-readiness strong{margin-top:3px;font-size:18px}.report-primary-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px}.report-primary-actions form{margin:0}.report-settings-panel{margin-bottom:16px}.report-settings-panel>header,.dapodik-send-card>header,.send-process-panel>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}.report-settings-panel>header>div,.dapodik-send-card>header>div{display:flex;align-items:center;gap:12px}.report-settings-panel>header>div>span,.send-main-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--primary),#60a5fa);font-size:20px}.report-settings-panel h2,.report-settings-panel p,.dapodik-send-card h2,.dapodik-send-card p,.send-process-panel h2{margin:0}.report-settings-panel p,.dapodik-send-card p{margin-top:4px;color:var(--muted);font-size:12px}.report-settings-panel form{margin-top:16px}.report-setting-grid{grid-template-columns:repeat(4,minmax(135px,1fr))}.report-setting-grid .checkbox-line{align-self:end;min-height:44px}.report-document-table td small,.backup-history td small{display:block;margin-top:4px;color:var(--muted)}.report-empty{display:flex;align-items:center;justify-content:center;gap:18px;min-height:220px;text-align:left}.report-empty>span{font-size:42px}.report-empty h2,.report-empty p{margin:0}.report-empty p{margin-top:6px;color:var(--muted)}
.dapodik-send-card{margin-bottom:14px}.send-connection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.send-connection-grid article{padding:13px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--line)}.send-connection-grid small,.send-connection-grid strong{display:block}.send-connection-grid small{font-size:11px;color:var(--muted)}.send-connection-grid strong{margin-top:5px;overflow-wrap:anywhere;font-size:13px}.send-readiness article.ready>span{background:linear-gradient(135deg,#059669,#34d399)}.send-readiness article.warning>span{background:linear-gradient(135deg,#d97706,#fbbf24)}.send-process-panel{margin-bottom:14px}.send-process-panel>header small{max-width:390px;color:var(--muted);text-align:right}.send-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.send-process-grid form{position:relative;display:flex;min-height:235px;flex-direction:column;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--surface-soft)}.send-process-grid h3{margin:12px 0 5px}.send-process-grid p{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.55}.send-process-grid .btn{width:100%;margin-top:auto}.step-number{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;color:#fff;background:var(--primary);font-weight:900}.send-confirm{display:flex;align-items:flex-start;gap:7px;margin-bottom:12px;font-size:11px}.send-confirm input{width:auto;margin-top:1px}.send-advanced{margin-bottom:14px}.send-advanced>summary,.backup-sp-card>summary{cursor:pointer;font-weight:800;list-style:none}.send-advanced>summary::-webkit-details-marker,.backup-sp-card>summary::-webkit-details-marker{display:none}.send-advanced[open]>summary,.backup-sp-card[open]>summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.backup-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.backup-create-card,.backup-restore-card{display:grid;grid-template-columns:50px 1fr;gap:14px}.backup-card-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--primary),#60a5fa);font-size:23px}.backup-restore-card>.backup-card-icon{background:linear-gradient(135deg,#dc2626,#fb7185)}.backup-action-grid h2{margin:4px 0 8px}.backup-action-grid p{margin:0 0 13px;color:var(--muted);line-height:1.55}.backup-action-grid form{display:grid;gap:11px}.backup-action-grid label{display:grid;gap:6px;font-size:12px;font-weight:800}.backup-action-grid label small{color:var(--muted);font-weight:500}.backup-safety{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;padding:10px;border-radius:10px;background:color-mix(in srgb,#10b981 10%,var(--panel));color:var(--muted)}.backup-sp-card{margin-bottom:14px}.backup-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#e5e7eb;color:#374151}.backup-status.ready{background:#dcfce7;color:#166534}.backup-status.restored{background:#dbeafe;color:#1d4ed8}.backup-status.failed,.backup-status.missing{background:#fee2e2;color:#b91c1c}.checksum-code{white-space:nowrap;font-size:11px}.schema-error-card{display:flex;gap:18px;align-items:flex-start;max-width:760px;margin:30px auto}.schema-error-card>span{display:grid;min-width:48px;height:48px;place-items:center;border-radius:15px;color:#fff;background:#dc2626;font-size:24px;font-weight:900}.schema-error-card h1{margin:4px 0 8px}
[data-theme="dark"] .backup-status{background:#374151;color:#e5e7eb}[data-theme="dark"] .backup-status.ready{background:#064e3b;color:#a7f3d0}[data-theme="dark"] .backup-status.restored{background:#1e3a8a;color:#bfdbfe}[data-theme="dark"] .backup-status.failed,[data-theme="dark"] .backup-status.missing{background:#7f1d1d;color:#fecaca}
@media(max-width:1050px){.report-setting-grid{grid-template-columns:repeat(2,1fr)}.report-summary-strip,.send-readiness{grid-template-columns:repeat(2,1fr)}.send-process-grid{grid-template-columns:1fr}.send-process-grid form{min-height:0}.backup-action-grid{grid-template-columns:1fr}}
@media(max-width:720px){.report-filter{grid-template-columns:1fr}.report-filter .btn{width:100%}.report-setting-grid,.send-connection-grid,.report-summary-strip,.send-readiness{grid-template-columns:1fr}.report-primary-actions,.report-primary-actions>*{width:100%}.report-primary-actions .btn{width:100%}.backup-create-card,.backup-restore-card{grid-template-columns:1fr}.send-process-panel>header{align-items:flex-start;flex-direction:column}.send-process-panel>header small{text-align:left}}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent); outline-offset: 2px; }

.muted { color: var(--muted); }
.eyebrow { display: inline-block; margin-bottom: 5px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.75); }
.step-chip, .status-badge, .role-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: .77rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.step-chip { padding: 8px 12px; color: #8a5700; background: #fff0bc; }
.status-badge { padding: 8px 11px; }
.status-badge.success { color: #087558; background: #dcf8ed; }
.status-badge.neutral { color: #647085; background: #edf0f4; }
.status-badge.info { color: #1758b7; background: #e4efff; }

.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 10px 18px; border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, var(--secondary))); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 25%, transparent); }
.btn-primary:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 33%, transparent); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-soft { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, white); }
.btn-ghost { color: var(--muted); background: transparent; border: 1px solid var(--line); }
.btn-sm { min-height: 36px; padding: 7px 11px; font-size: .82rem; }
.btn-wide { width: 100%; }
.icon-btn { display: inline-grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border: 0; border-radius: 12px; color: var(--ink); background: var(--surface-soft); cursor: pointer; font-weight: 900; }

.alert { padding: 13px 15px; border: 1px solid transparent; border-radius: 13px; font-size: .9rem; }
.alert-success { color: #096849; background: #e1f8ee; border-color: #b6edd9; }
.alert-warning { color: #805100; background: #fff5d8; border-color: #f5dfa0; }
.alert-danger { color: #a11b2b; background: #fff0f1; border-color: #f2c6cc; }
.page-alerts { display: grid; gap: 8px; padding: 18px 28px 0; }
.toast-stack { position: fixed; z-index: 100; top: 20px; right: 20px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { padding: 13px 16px; border-radius: 13px; color: #fff; box-shadow: var(--shadow); animation: toast-in .35s ease both; }
.toast.success { background: #087558; }.toast.warning { background: #9a6400; }.toast.danger { background: #b42335; }

/* Installation */
.install-page { background: radial-gradient(circle at 6% 4%, #dff6ff 0, transparent 30%), radial-gradient(circle at 100% 100%, #e6e4ff 0, transparent 30%), #eff6ff; }
.install-shell { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(520px, 1.22fr); width: min(1180px, calc(100% - 40px)); margin: 34px auto; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 30px; background: var(--surface); box-shadow: 0 30px 80px rgba(35, 74, 135, .17); }
.install-intro { position: relative; overflow: hidden; padding: 56px 44px; color: #fff; background: linear-gradient(150deg, #0f2a5f, var(--primary) 58%, var(--secondary)); }
.install-intro::before, .install-intro::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.install-intro::before { width: 340px; height: 340px; right: -170px; top: -120px; }.install-intro::after { width: 260px; height: 260px; left: -130px; bottom: -90px; }
.install-intro .eyebrow { color: #bceff1; }.install-intro h1 { max-width: 520px; margin: 18px 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.04em; }.install-intro > p { color: rgba(255,255,255,.76); }
.brand-orbit { position: relative; display: grid; width: 86px; height: 86px; place-items: center; margin-bottom: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 27px; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); transform: rotate(-6deg); }
.brand-orbit strong { font-size: 1.85rem; }.brand-orbit span { position: absolute; top: -13px; right: -12px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #734900; background: #ffd65a; animation: float 2.8s ease-in-out infinite; }
.install-requirements { display: grid; gap: 9px; margin-top: 36px; }.requirement { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: .88rem; background: rgba(255,255,255,.1); }.requirement span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; font-weight: 900; }.requirement.passed span { color: #067056; background: #ccfae9; }.requirement.failed span { color: #a11b2b; background: #ffd9de; }
.install-card { padding: 42px; }.section-heading, .panel-heading, .page-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.section-heading h2 { margin: 10px 0 0; font-size: 1.6rem; }.secure-note { color: var(--muted); font-size: .82rem; }

/* Forms */
.form-stack { display: grid; gap: 18px; }.form-stack fieldset { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; }.form-stack legend { padding: 0 8px; color: var(--ink); font-weight: 850; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 17px; }.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.span-2 { grid-column: span 2; }
label { display: grid; gap: 7px; color: #303b4d; font-size: .87rem; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid #ced6e2; border-radius: 11px; color: var(--ink); background: var(--surface); transition: border .18s ease, box-shadow .18s ease; }
textarea { min-height: 100px; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: #aab7c8; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 11%, transparent); outline: 0; }
input[type="color"] { width: 50px; height: 45px; padding: 4px; cursor: pointer; } input[type="file"] { padding: 9px; background: var(--surface-soft); }
label small { color: var(--muted); font-size: .76rem; font-weight: 500; }.field-error { color: var(--danger) !important; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }.check-row input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--primary); }
.input-icon { position: relative; display: flex; align-items: center; }.input-icon > span { position: absolute; left: 14px; color: #9aa6b7; font-size: .62rem; }.input-icon > span + input { padding-left: 36px; }.input-icon button { position: absolute; right: 7px; width: 34px; height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }.input-icon input { padding-right: 46px; }
.semester-login-field > span + select { padding-left: 36px; padding-right: 38px; font-weight: 750; }.semester-login-help { color: var(--muted); font-size: .71rem; font-weight: 500; line-height: 1.45; }.field-error { margin-top: -10px; color: var(--danger); font-size: .78rem; font-weight: 750; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }.narrow-form { max-width: 850px; margin: 0 auto; }.form-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }.form-section-title > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #e9f1ff; }.form-section-title h2 { margin: 0; font-size: 1.15rem; }.form-section-title p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }.form-section-title.divider { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Login */
.guest-page { overflow-x: hidden; background: #edf5ff; }.sky-decor i { position: fixed; border-radius: 50%; filter: blur(1px); opacity: .45; animation: float 7s ease-in-out infinite; }.sky-decor i:nth-child(1){width:110px;height:110px;left:4%;top:10%;background:#bdefff}.sky-decor i:nth-child(2){width:65px;height:65px;right:5%;top:18%;background:#ffe3a4;animation-delay:-2s}.sky-decor i:nth-child(3){width:140px;height:140px;right:14%;bottom:4%;background:#d9ceff;animation-delay:-4s}.sky-decor i:nth-child(4){width:45px;height:45px;left:12%;bottom:8%;background:#bcf3dd;animation-delay:-1s}
.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; width: min(1060px, calc(100% - 36px)); min-height: min(650px, calc(100vh - 36px)); margin: 18px auto; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: var(--surface); box-shadow: 0 30px 90px rgba(32, 71, 134, .18); }
.login-story { position: relative; display: flex; min-height: min(620px, calc(100vh - 36px)); flex-direction: column; justify-content: space-between; overflow: hidden; padding: 36px 40px; color: #fff; background: linear-gradient(145deg, #10285b 0%, var(--primary) 57%, var(--secondary) 135%); isolation: isolate; }
.login-story::before { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(105deg,rgba(8,25,62,.92) 0%,rgba(20,56,126,.76) 52%,color-mix(in srgb,var(--primary) 58%,transparent) 100%); content: ""; }
.login-story::after { position: absolute; z-index: -1; right: -200px; bottom: -230px; width: 560px; height: 560px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; }
.login-front-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; animation: login-image-breathe 18s ease-in-out infinite alternate; }
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; }.login-brand strong { display: block; font-size: 1.2rem; }.login-brand small { display: block; max-width: 260px; overflow: hidden; color: rgba(255,255,255,.72); text-overflow: ellipsis; white-space: nowrap; }
.school-mark { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; flex: 0 0 auto; border-radius: 15px; color: #fff; background: linear-gradient(140deg, var(--primary), var(--secondary)); font-weight: 900; box-shadow: 0 10px 24px rgba(0,0,0,.13); }.school-mark.large { width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14); }.school-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
.welcome-copy { position: relative; z-index: 2; max-width: 570px; margin: auto 0; padding: 28px 0; }.welcome-copy h1 { margin: 15px 0; font-size: clamp(2.25rem, 4.3vw, 3.75rem); line-height: 1.03; letter-spacing: -.055em; }.welcome-copy mark { color: #ffe077; background: transparent; }.welcome-copy > p { max-width: 500px; color: rgba(255,255,255,.82); font-size: .96rem; }.feature-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.feature-dots span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.12); font-size: .72rem; font-weight: 700; backdrop-filter: blur(5px); }
.learning-orbit { position: absolute; z-index: 2; right: 16px; bottom: 10px; width: 190px; height: 190px; border: 1px dashed rgba(255,255,255,.28); border-radius: 50%; animation: spin-slow 24s linear infinite; }.learning-orbit div { position: absolute; top: 61px; left: 61px; display: grid; width: 68px; height: 68px; place-items: center; border-radius: 22px; background: rgba(255,255,255,.16); font-size: 2.1rem; transform: rotate(0); backdrop-filter: blur(5px); }.learning-orbit i { position: absolute; padding: 6px 9px; border-radius: 9px; color: #17326d; background: #fff; font-size: .7rem; font-style: normal; font-weight: 900; }.learning-orbit i:nth-child(1){left:18px;top:20px}.learning-orbit i:nth-child(2){right:0;top:42px}.learning-orbit i:nth-child(3){left:-5px;bottom:37px}.learning-orbit i:nth-child(4){right:28px;bottom:5px}
.login-panel { display: grid; place-items: center; align-content: center; padding: 32px 40px; background: var(--surface); }.login-card { width: min(370px, 100%); }.login-heading { display: flex; align-items: center; gap: 12px; }.login-heading .wave { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #fff0c5; font-size: 1.3rem; animation: float 3s ease-in-out infinite; }.login-heading p { margin: 0; color: var(--muted); font-size: .77rem; }.login-heading h2 { margin: 1px 0 0; font-size: 1.62rem; letter-spacing: -.03em; }.login-card > .muted { margin: 10px 0 18px; font-size: .84rem; }.login-card .form-stack { gap: 12px; }.login-card label { gap: 5px; font-size: .8rem; }.login-card input,.login-card select { min-height: 42px; padding-block: 8px; }.login-card .btn { min-height: 42px; }.login-card .field-error { margin-top: -6px; }.login-help { display: flex; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); }.login-help p { margin: 0; color: var(--muted); font-size: .72rem; }.login-help strong { color: var(--ink); }.login-version { margin: 14px 0 0; color: var(--muted); font-size: .69rem; text-align: center; }

/* Application shell */
.app-shell { min-height: 100vh; }.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; color: #fff; background: linear-gradient(180deg, var(--sidebar), color-mix(in srgb, var(--sidebar) 72%, #07152e)); box-shadow: 15px 0 40px rgba(10,29,65,.12); }.sidebar::before { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0, rgba(255,255,255,.12), transparent 28%), radial-gradient(circle at 0 100%, color-mix(in srgb,var(--secondary) 20%,transparent), transparent 32%); content: ""; }
.sidebar-brand { position: relative; z-index: 1; display: flex; min-height: 88px; align-items: center; gap: 12px; padding: 17px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }.sidebar-brand .school-mark { width: 51px; height: 51px; }.sidebar-brand strong, .sidebar-brand small { display: block; }.sidebar-brand strong { font-size: 1.03rem; }.sidebar-brand small { width: 152px; overflow: hidden; color: rgba(255,255,255,.62); font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }.sidebar-close { display: none; margin-left: auto; color: #fff; background: rgba(255,255,255,.1); }
.nav-list { position: relative; z-index: 1; display: grid; gap: 4px; overflow-y: auto; padding: 15px 13px; }.nav-label { margin: 17px 10px 6px; color: rgba(255,255,255,.45); font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.nav-list a { display: flex; min-height: 45px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: rgba(255,255,255,.74); font-size: .88rem; font-weight: 700; transition: .18s ease; }.nav-list a span { display: grid; width: 25px; place-items: center; filter: saturate(.9); }.nav-list a em { font-style: normal; }.nav-list a:hover { color: #fff; background: rgba(255,255,255,.08); }.nav-list a.active { color: #fff; background: linear-gradient(100deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-footer { position: relative; z-index: 1; display: grid; gap: 13px; margin-top: auto; padding: 14px; }.phase-mini { padding: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.06); }.phase-mini > span { float: right; padding: 4px 7px; border-radius: 999px; color: #644000; background: #ffd766; font-size: .62rem; font-weight: 900; }.phase-mini strong { display: block; font-size: .8rem; }.phase-mini > div { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }.phase-mini i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--secondary), #75e8d8); }
.user-mini { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.08); }.user-mini > span, .profile-pill > span { display: grid; width: 35px; height: 35px; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #143466; background: #fff; font-weight: 900; }.user-mini strong,.user-mini small,.profile-pill strong,.profile-pill small { display: block; }.user-mini strong { max-width: 160px; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.user-mini small { color: rgba(255,255,255,.55); font-size: .67rem; }
.sidebar-backdrop { display: none; }
.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }.topbar { position: sticky; z-index: 30; top: 0; display: flex; min-height: 72px; align-items: center; gap: 14px; padding: 10px 28px; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px); }.menu-trigger { display: none; }.topbar-title { display: grid; }.topbar-title small { color: var(--muted); font-size: .72rem; }.topbar-title strong { font-size: 1.08rem; }.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }.profile-pill { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }.profile-pill > span { color: #fff; background: linear-gradient(135deg,var(--primary),var(--secondary)); }.profile-pill strong { max-width: 150px; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }.profile-pill small { color: var(--muted); font-size: .64rem; }.logout-btn { color: #a11b2b; background: #fff0f1; }
.active-semester-pill { display:flex;min-height:40px;align-items:center;gap:8px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--header-text) 15%,transparent);border-radius:9px;color:inherit;background:color-mix(in srgb,var(--header-text) 7%,transparent); }.active-semester-pill>i{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:.72rem;font-style:normal}.active-semester-pill span,.active-semester-pill small,.active-semester-pill strong{display:block}.active-semester-pill small{color:color-mix(in srgb,var(--header-text) 60%,transparent);font-size:.56rem;line-height:1.1}.active-semester-pill strong{max-width:160px;overflow:hidden;font-size:.68rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.page-content { max-width: 1500px; min-height: calc(100vh - 130px); margin: 0 auto; padding: 26px 28px 42px; }.app-footer { display: flex; justify-content: space-between; gap: 15px; padding: 17px 28px; color: var(--muted); font-size: .72rem; }

.page-heading-row { margin-bottom: 22px; align-items: flex-end; }.page-heading-row h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.08; letter-spacing: -.035em; }.page-heading-row p { margin: 0; color: var(--muted); }.back-link { display: inline-block; margin-bottom: 13px; color: var(--primary); font-size: .83rem; font-weight: 800; }
.panel { border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 34px rgba(35,59,100,.055); }.panel-heading { margin-bottom: 18px; }.panel-heading > div { display: flex; align-items: center; gap: 11px; }.panel-heading h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.015em; }.panel-heading a { color: var(--primary); font-size: .8rem; font-weight: 800; }.panel-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; }.panel-icon.blue{background:#e6efff}.panel-icon.teal{background:#ddf8f4}.panel-icon.amber{background:#fff0ca}.panel-icon.violet{background:#eee6ff}

/* Dashboard */
.welcome-banner { position: relative; display: flex; min-height: 230px; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; padding: 34px 42px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, var(--sidebar), var(--primary) 62%, var(--secondary) 130%); box-shadow: 0 20px 50px color-mix(in srgb,var(--primary) 18%,transparent); }.welcome-banner::before, .welcome-banner::after { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; content: ""; }.welcome-banner::before{width:310px;height:310px;right:-100px;top:-180px}.welcome-banner::after{width:200px;height:200px;right:120px;bottom:-150px}.welcome-banner > div { position: relative; z-index: 1; }.welcome-banner h1 { max-width: 780px; margin: 8px 0; font-size: clamp(1.85rem,4vw,3.1rem); line-height: 1.06; letter-spacing: -.04em; }.welcome-banner p { max-width: 690px; margin-bottom: 16px; color: rgba(255,255,255,.74); }.period-chip { display: inline-flex; padding: 8px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(255,255,255,.10); font-size: .78rem; font-weight: 750; }.banner-badge { display: grid; width: 142px; height: 142px; place-items: center; align-content: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); border-radius: 42px; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); transform: rotate(4deg); }.banner-badge span { position: absolute; top: -12px; right: -8px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #734900; background: #ffdd68; animation: float 2.8s ease-in-out infinite; }.banner-badge strong { font-size: 3.6rem; line-height: 1; }.banner-badge small { margin-top: 7px; color: rgba(255,255,255,.7); }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin: 18px 0; }.metric-card { position: relative; display: flex; min-width: 0; align-items: center; gap: 15px; overflow: hidden; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }.metric-card::after { position: absolute; right: -25px; bottom: -35px; width: 90px; height: 90px; border-radius: 50%; background: currentColor; content: ""; opacity: .06; }.metric-icon { display: grid; width: 48px; height: 48px; place-items: center; flex: 0 0 auto; border-radius: 15px; font-size: 1.35rem; }.metric-card.blue .metric-icon{background:#e5eeff}.metric-card.teal .metric-icon{background:#dcf7f2}.metric-card.amber .metric-icon{background:#fff0c9}.metric-card.violet .metric-icon{background:#eee7ff}.metric-card small,.metric-card span,.metric-card strong { display: block; }.metric-card small { color: var(--muted); font-size: .72rem; font-weight: 700; }.metric-card strong { margin: 1px 0; font-size: 1.65rem; line-height: 1.15; }.metric-card span { color: var(--muted); font-size: .7rem; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 18px; }.dashboard-grid > .panel { padding: 22px; }.dashboard-grid .span-2 { grid-column: span 2; }.phase-roadmap { display: grid; gap: 8px; }.phase-row { display: grid; grid-template-columns: 38px 150px 1fr; align-items: center; gap: 12px; padding: 10px; border-radius: 13px; }.phase-row.current { background: color-mix(in srgb,var(--secondary) 8%,var(--surface)); }.phase-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--muted); background: var(--surface-soft); font-weight: 850; }.phase-row.current .phase-number { color: #fff; background: var(--secondary); }.phase-row strong,.phase-row small { display: block; }.phase-row strong{font-size:.85rem}.phase-row small{color:var(--muted);font-size:.68rem}.progress { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--secondary)); }
.quick-links { display: grid; gap: 9px; }.quick-links a { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid transparent; border-radius: 13px; background: var(--surface-soft); transition: .18s ease; }.quick-links a:hover { border-color: color-mix(in srgb,var(--primary) 25%,var(--line)); transform: translateX(2px); }.quick-links a > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; background: var(--surface); }.quick-links strong,.quick-links small { display:block }.quick-links strong{font-size:.8rem}.quick-links small{color:var(--muted);font-size:.68rem}.quick-links b{margin-left:auto;color:var(--primary);font-size:1.3rem}
.module-mini-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.module-mini-grid > div { position: relative; display: grid; gap: 4px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; }.module-mini-grid > div > span { font-size: 1.35rem; }.module-mini-grid strong{font-size:.8rem}.module-mini-grid small{min-height:42px;color:var(--muted);font-size:.67rem}.module-mini-grid em{position:absolute;right:10px;top:10px;padding:4px 6px;border-radius:999px;color:#087558;background:#dcf8ed;font-size:.58rem;font-style:normal;font-weight:850}
.activity-list { display: grid; gap: 11px; }.activity-list > div { display: flex; gap: 10px; }.activity-list p { display: grid; margin: 0; color: var(--muted); font-size: .72rem; }.activity-list p strong { color: var(--ink); }.activity-list p small { margin-top: 2px; color: #98a2b3; font-size: .62rem; }.activity-dot { width: 9px; height: 9px; margin-top: 5px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--secondary) 18%,transparent); }

/* Settings, tables and roadmap */
.settings-layout { display: grid; grid-template-columns: minmax(0,1fr) 335px; gap: 18px; align-items: start; }.settings-main { display: grid; gap: 18px; }.settings-side { min-width: 0; }.form-panel { padding: 23px; }.sticky-panel { position: sticky; top: 94px; }.brand-preview { display: grid; place-items: center; padding: 23px; margin-bottom: 20px; border-radius: 17px; text-align: center; background: radial-gradient(circle at 50% 10%,#fff 0,#edf5ff 80%); }.logo-preview { display: grid; width: 96px; height: 96px; place-items: center; overflow: hidden; margin-bottom: 13px; border: 4px solid #fff; border-radius: 29px; color: #fff; background: linear-gradient(140deg,var(--primary),var(--secondary)); box-shadow: 0 14px 30px rgba(32,77,144,.18); font-size: 1.8rem; font-weight: 900; }.logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }.brand-preview small { color: var(--muted); font-size: .72rem; }
.color-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.color-field { padding: 13px; border: 1px solid var(--line); border-radius: 14px; }.color-field > div { display: flex; gap: 9px; }.color-field input[type="text"] { text-transform: uppercase; }
.choice-cards { display: grid; gap: 12px; }.choice-cards.three { grid-template-columns: repeat(3,minmax(0,1fr)); }.choice-cards label { position: relative; display: grid; place-items: center; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; text-align: center; cursor: pointer; }.choice-cards input { position: absolute; width: 1px; height: 1px; opacity: 0; }.choice-cards label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 7%,var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }.choice-cards label > span { font-size: 1.5rem; }.choice-cards label > small { color: var(--muted); font-size: .67rem; }.choice-cards.compact label { padding: 12px; }
.preview-panel > p { color: var(--muted); font-size: .77rem; }.preview-window { margin: 15px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 13px 30px rgba(30,55,95,.1); }.preview-top { display: flex; gap: 5px; padding: 8px 10px; background: #eef2f7; }.preview-top i { width: 6px;height:6px;border-radius:50%;background:#bcc4d0}.preview-body{display:grid;grid-template-columns:55px 1fr;min-height:190px}.preview-body aside{display:grid;align-content:start;gap:11px;padding:12px 9px;background:var(--preview-sidebar,var(--sidebar))}.preview-body aside b{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;color:#fff;background:rgba(255,255,255,.16);font-size:.65rem}.preview-body aside span{height:7px;border-radius:9px;background:rgba(255,255,255,.18)}.preview-body main{padding:13px;background:#f5f8fc}.preview-hero{padding:13px;border-radius:12px;color:#fff;background:linear-gradient(120deg,var(--preview-primary,var(--primary)),var(--preview-secondary,var(--secondary)))}.preview-hero strong,.preview-hero small{display:block}.preview-hero small{opacity:.7;font-size:.55rem}.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.preview-cards i{height:46px;border-radius:9px;background:#fff;border-top:3px solid var(--preview-accent,var(--accent))}
.table-panel { overflow: hidden; }.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }.search-box { position: relative; width: min(440px,100%); }.search-box span { position: absolute; left: 13px; top: 11px; color: var(--muted); }.search-box input { padding-left: 37px; }.result-count { color: var(--muted); font-size: .78rem; }.table-scroll { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; font-size: .81rem; }.data-table th { padding: 12px 15px; color: #586579; background: var(--surface-soft); font-size: .68rem; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }.data-table td { padding: 13px 15px; border-top: 1px solid var(--line); vertical-align: middle; }.data-table tbody tr:hover { background: color-mix(in srgb,var(--primary) 2.5%,var(--surface)); }.data-table td > small,.data-table td > strong { display: block; }.data-table td > small{color:var(--muted);font-size:.68rem}.align-right{text-align:right!important}.person-cell{display:flex;align-items:center;gap:10px}.person-cell>span{display:grid;width:38px;height:38px;place-items:center;flex:0 0 auto;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-weight:900}.person-cell strong,.person-cell small{display:block}.person-cell small{color:var(--muted);font-size:.68rem}.role-chip{padding:7px 9px;color:#28426f;background:#e8effc}.role-super_admin{color:#6b21a8;background:#f1e6ff}.role-admin{color:#174f9d;background:#e1edff}.role-principal{color:#8a4e00;background:#fff0c9}.role-curriculum{color:#087558;background:#dcf8ed}.role-teacher,.role-homeroom{color:#075d70;background:#dff6fa}.role-student,.role-parent{color:#4b5565;background:#edf0f4}.row-actions{display:flex;justify-content:flex-end;gap:6px}.row-actions form{margin:0}.table-empty{padding:35px;text-align:center;color:var(--muted)}.data-table code{padding:4px 7px;border-radius:7px;color:#4b3a85;background:#eee9ff;font-size:.7rem}
.health-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }.health-card { display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.health-card > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; font-weight: 900; }.health-card.passed > span{color:#087558;background:#dcf8ed}.health-card.failed > span{color:#a11b2b;background:#ffe4e7}.health-card small,.health-card strong{display:block}.health-card small{color:var(--muted);font-size:.7rem}.health-card strong{font-size:.88rem}
.roadmap-board { position: relative; display: grid; gap: 14px; max-width: 1050px; margin: 0 auto; }.roadmap-board::before { position: absolute; z-index: 0; top: 45px; bottom: 45px; left: 31px; width: 2px; background: var(--line); content: ""; }.roadmap-phase { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }.roadmap-phase > header { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; padding: 16px 19px; background: var(--surface-soft); }.roadmap-phase > header > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: var(--muted); background: var(--surface); font-weight: 900; }.roadmap-phase.active > header > span { color: #fff; background: var(--secondary); }.roadmap-phase header small { color: var(--muted); font-size: .68rem; }.roadmap-phase header h2 { margin: 0; font-size: 1.02rem; }.roadmap-phase header em { padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .68rem; font-style: normal; font-weight: 800; }.roadmap-phase.active header em { color: #087558; background: #dcf8ed; }.roadmap-modules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); }.roadmap-modules article { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 14px 18px; background: var(--surface); }.roadmap-modules article > span { font-size: 1.25rem; }.roadmap-modules strong,.roadmap-modules small{display:block}.roadmap-modules strong{font-size:.8rem}.roadmap-modules small{color:var(--muted);font-size:.66rem}.roadmap-modules b{padding:5px 7px;border-radius:999px;font-size:.58rem}.roadmap-modules b.ready{color:#087558;background:#dcf8ed}.roadmap-modules b.planned{color:#6c7480;background:#edf0f4}
.profile-grid { display: grid; grid-template-columns: 285px 1fr; gap: 18px; align-items: start; }.profile-card { position: sticky; top: 94px; padding: 28px; text-align: center; }.profile-avatar { position: relative; display: grid; width: 100px; height: 100px; place-items: center; margin: 0 auto 15px; border-radius: 32px; color: #fff; background: linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow: 0 16px 35px color-mix(in srgb,var(--primary) 24%,transparent); font-size: 2.2rem; font-weight: 900; }.profile-avatar i { position:absolute;right:-3px;bottom:3px;width:20px;height:20px;border:4px solid var(--surface);border-radius:50%;background:#18b981}.profile-card h2{margin-bottom:8px;font-size:1.3rem}.profile-card dl{display:grid;gap:0;margin:24px 0 0;text-align:left}.profile-card dl div{padding:12px 0;border-top:1px solid var(--line)}.profile-card dt{color:var(--muted);font-size:.68rem}.profile-card dd{margin:2px 0 0;font-size:.82rem;font-weight:700}.profile-forms{display:grid;gap:18px}
.empty-state { display: grid!important; place-items: center; padding: 25px; color: var(--muted); text-align: center; }.empty-state > span{font-size:1.7rem}.empty-state p{margin:6px 0 0!important}.error-page { display: grid; min-height: 60vh; place-items: center; align-content: center; padding: 35px; text-align: center; }.error-page h1 { max-width: 680px; margin: 12px 0 8px; font-size: clamp(1.8rem,4vw,3rem); letter-spacing: -.04em; }.error-page p { max-width: 600px; color: var(--muted); }.error-orbit { display: grid; width: 115px; height: 115px; place-items: center; margin-bottom: 17px; border: 1px solid color-mix(in srgb,var(--primary) 25%,var(--line)); border-radius: 38px; color: var(--primary); background: color-mix(in srgb,var(--primary) 7%,var(--surface)); font-size: 2.2rem; font-weight: 900; transform: rotate(-5deg); }

/* Dark mode */
html[data-theme="dark"] { --ink:#e8edf6;--muted:#9aa8bb;--line:#2a374b;--surface:#152033;--surface-soft:#1b2940;--canvas:#0e1727;--shadow:0 18px 50px rgba(0,0,0,.25); }
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{border-color:#3a4960;background:#111b2c;color:#e8edf6}html[data-theme="dark"] label{color:#dce4ef}html[data-theme="dark"] .brand-preview{background:radial-gradient(circle at 50% 10%,#22324b 0,#18253a 80%)}html[data-theme="dark"] .preview-window,html[data-theme="dark"] .preview-cards i{background:#172237}html[data-theme="dark"] .preview-body main{background:#0f1929}html[data-theme="dark"] .btn-soft{background:#203452}html[data-theme="dark"] .login-story{background:linear-gradient(145deg,#0a1939 0%,var(--primary) 60%,#0b786f 135%)}html[data-theme="dark"] .login-panel{background:var(--surface)}

/* Motion characters */
.character-tenang * { animation-duration: .01ms !important; }.character-fokus .banner-badge span,.character-fokus .brand-orbit span { animation: none; }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes spin-slow { to{transform:rotate(360deg)} }
@keyframes toast-in { from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none} }

@media (max-width: 1180px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid .span-2{grid-column:span 2}.quick-panel{grid-column:span 2}.metric-grid{grid-template-columns:repeat(2,1fr)}
    .install-shell { grid-template-columns: .85fr 1.15fr; }.install-card{padding:32px}.install-intro{padding:45px 34px}
}
@media (max-width: 920px) {
    .sidebar { transform: translateX(-105%); transition: transform .24s ease; }.sidebar.open{transform:none}.sidebar-close,.menu-trigger{display:inline-grid}.sidebar-backdrop{position:fixed;z-index:45;inset:0;display:block;pointer-events:none;background:rgba(7,16,31,.5);opacity:0;transition:.24s ease}.sidebar.open + .sidebar-backdrop{pointer-events:auto;opacity:1}.main-area{margin-left:0}.topbar{padding-inline:18px}.page-content{padding:22px 18px 35px}.page-alerts{padding-inline:18px}
    .login-shell { grid-template-columns: 1fr; }.login-story{min-height:390px;padding:32px}.welcome-copy{padding:30px 0 82px}.welcome-copy h1{font-size:clamp(2.05rem,7vw,3.35rem)}.learning-orbit{width:160px;height:160px;right:10px;bottom:-10px}.learning-orbit div{left:48px;top:48px;width:62px;height:62px}.login-panel{padding:34px 28px}
    .install-shell { grid-template-columns: 1fr; }.install-intro{padding:38px}.install-requirements{grid-template-columns:repeat(2,1fr)}
    .settings-layout,.profile-grid{grid-template-columns:1fr}.sticky-panel,.profile-card{position:static}.settings-side{order:-1}.appearance-layout .settings-side{order:0}.brand-preview{grid-template-columns:auto 1fr;justify-items:start;gap:14px;text-align:left}.brand-preview .logo-preview{grid-row:span 2;margin:0}
}
@media (max-width: 1120px) {.active-semester-pill span{display:none}.active-semester-pill{padding:5px}.active-semester-pill>i{width:28px}}
@media (max-width: 680px) {
    body{font-size:15px}.topbar-title small{display:none}.profile-pill div{display:none}.profile-pill{padding:5px}.logout-btn{width:38px}.page-content{padding-inline:14px}.page-heading-row{align-items:flex-start;flex-direction:column}.page-heading-row .btn{width:100%}.welcome-banner{min-height:auto;padding:26px 23px}.banner-badge{display:none}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric-card{padding:14px;gap:10px}.metric-icon{width:40px;height:40px}.metric-card strong{font-size:1.35rem}.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .span-2,.quick-panel{grid-column:auto}.module-mini-grid{grid-template-columns:1fr 1fr}.phase-row{grid-template-columns:36px 1fr}.phase-row .progress{grid-column:2}.form-grid.cols-2,.color-grid,.choice-cards.three,.health-grid,.roadmap-modules{grid-template-columns:1fr}.span-2{grid-column:auto}.form-panel{padding:18px}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}.table-toolbar{align-items:stretch;flex-direction:column}.result-count{padding-left:3px}.roadmap-phase>header{grid-template-columns:42px 1fr}.roadmap-phase header em{grid-column:2;justify-self:start}.roadmap-modules article{grid-template-columns:36px 1fr}.roadmap-modules b{grid-column:2;justify-self:start}.app-footer{align-items:center;flex-direction:column}.install-shell{width:calc(100% - 20px);margin:10px auto;border-radius:22px}.install-intro,.install-card{padding:26px 20px}.install-requirements{grid-template-columns:1fr}.install-intro h1{font-size:2.2rem}.section-heading{align-items:flex-start;flex-direction:column}.login-shell{width:calc(100% - 18px);margin:9px auto;border-radius:22px}.login-story{min-height:350px;padding:24px}.login-brand small{max-width:190px}.welcome-copy{padding:28px 0 76px}.welcome-copy h1{font-size:2.15rem}.login-panel{padding:28px 19px}.feature-dots{gap:6px}.feature-dots span{font-size:.66rem}
}
@media (max-width: 420px) {.metric-grid,.module-mini-grid{grid-template-columns:1fr}.metric-card span{display:block}.topbar{gap:8px}.topbar-actions{gap:5px}.topbar-title strong{font-size:.94rem}}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }

/* Dashboard compact v1.1 — mengikuti pola konsol e-Rapor sekolah */
.app-page .sidebar { background: linear-gradient(180deg, color-mix(in srgb,var(--sidebar) 88%,#111827), var(--sidebar)); box-shadow: 8px 0 24px rgba(10,29,65,.10); }
.app-page .sidebar::before { background: linear-gradient(180deg,rgba(255,255,255,.045),transparent 42%); }
.app-page .sidebar-brand { min-height: 64px; padding: 10px 13px; }
.app-page .sidebar-brand .school-mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: none; }
.app-page .sidebar-brand strong { font-size: .94rem; }
.app-page .sidebar-brand small { width: 138px; font-size: .68rem; }
.app-page .nav-list { gap: 2px; padding: 10px 9px; }
.app-page .nav-label { margin: 14px 9px 5px; font-size: .62rem; }
.app-page .nav-list a { min-height: 40px; gap: 9px; padding: 7px 10px; border-radius: 8px; font-size: .82rem; }
.app-page .nav-list a span { width: 23px; }
.app-page .sidebar-footer { gap: 8px; padding: 9px; }
.app-page .phase-mini { padding: 9px; border-radius: 8px; }
.app-page .user-mini { padding: 8px; border-radius: 8px; }

.app-page .topbar { min-height: 58px; padding: 7px 18px; border-color: color-mix(in srgb,var(--header-text) 12%,transparent); color: var(--header-text); background: var(--header); box-shadow: 0 2px 10px rgba(15,32,61,.06); backdrop-filter: none; transition: background .24s ease,color .24s ease; }
.app-page .topbar-title { gap: 0; }
.app-page .topbar-title strong { font-size: .92rem; }
.app-page .topbar-title small { max-width: min(540px,42vw); overflow: hidden; color: color-mix(in srgb,var(--header-text) 63%,transparent); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.app-page .topbar .icon-btn { width: 38px; height: 38px; border-radius: 9px; color: inherit; background: color-mix(in srgb,var(--header-text) 8%,transparent); }
.app-page .profile-pill { min-height: 40px; padding: 4px 9px 4px 5px; border-color: color-mix(in srgb,var(--header-text) 15%,transparent); border-radius: 9px; color: inherit; background: color-mix(in srgb,var(--header-text) 7%,transparent); }
.app-page .profile-pill small { color: color-mix(in srgb,var(--header-text) 60%,transparent); }
.app-page .logout-btn { color: #e11d48; background: color-mix(in srgb,#e11d48 10%,transparent); }
.appearance-trigger { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid color-mix(in srgb,var(--header-text) 16%,transparent); border-radius: 9px; color: inherit; background: color-mix(in srgb,var(--header-text) 7%,transparent); cursor: pointer; }
.appearance-trigger b { font-size: .74rem; }

.app-page .page-content { max-width: none; min-height: calc(100vh - 104px); padding: 16px 18px 28px; }
.app-page .page-alerts { padding: 12px 18px 0; }
.app-page .app-footer { padding: 10px 18px; border-top: 1px solid var(--line); font-size: .68rem; }
.app-page .panel { border-radius: 10px; box-shadow: 0 4px 16px rgba(35,59,100,.05); }
.app-page .page-heading-row { margin-bottom: 16px; }

/* Panel pengubah tampilan */
.appearance-drawer { position: fixed; z-index: 90; inset: 0 0 0 auto; display: flex; width: min(340px,100vw); flex-direction: column; color: var(--ink); background: var(--surface); box-shadow: -18px 0 50px rgba(4,13,28,.20); transform: translateX(105%); transition: transform .26s cubic-bezier(.2,.8,.2,1),background .2s ease; }
.appearance-drawer.open { transform: none; }
.appearance-drawer > header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 11px 18px; border-bottom: 1px solid var(--line); }
.appearance-drawer > header span,.appearance-drawer > header strong { display: block; }
.appearance-drawer > header span { color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.appearance-drawer > header strong { font-size: .88rem; letter-spacing: .03em; }
.appearance-drawer > form { display: grid; gap: 17px; overflow-y: auto; padding: 18px; }
.drawer-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.drawer-section legend { width: 100%; margin-bottom: 9px; padding: 0; color: var(--ink); font-size: .77rem; font-weight: 850; }
.theme-mode-pills { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.theme-mode-pills label { position: relative; }
.theme-mode-pills input,.color-swatch input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.theme-mode-pills span { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: .75rem; font-weight: 800; cursor: pointer; }
.theme-mode-pills input:checked + span { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent); }
.theme-mode-pills input:focus-visible + span,.color-swatch input:focus-visible + span { outline: 3px solid color-mix(in srgb,var(--primary) 28%,transparent); outline-offset: 2px; }
.swatch-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.color-swatch { position: relative; display: block; cursor: pointer; }
.color-swatch span { display: block; height: 33px; border: 2px solid var(--surface); border-radius: 8px; background: var(--swatch); box-shadow: 0 0 0 1px var(--line),inset 0 0 0 1px rgba(255,255,255,.14); transition: transform .16s ease,box-shadow .16s ease; }
.color-swatch:hover span { transform: translateY(-2px); }
.color-swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface),0 0 0 4px var(--primary); transform: scale(.92); }
.color-swatch em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.drawer-note { display: flex; gap: 9px; padding: 11px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); }
.drawer-note p { margin: 0; font-size: .72rem; }
.drawer-advanced { color: var(--primary); font-size: .74rem; font-weight: 800; text-align: center; }
.appearance-backdrop { position: fixed; z-index: 85; inset: 0; pointer-events: none; background: rgba(4,13,28,.48); opacity: 0; transition: opacity .24s ease; }
.appearance-drawer.open + .appearance-backdrop { pointer-events: auto; opacity: 1; }
body.appearance-open { overflow: hidden; }

/* Ringkasan dashboard */
.dashboard-notice { display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 9px; color: #fff; background: linear-gradient(100deg,#0587e6,var(--primary)); box-shadow: 0 8px 20px color-mix(in srgb,var(--primary) 20%,transparent); }
.notice-shield { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; background: rgba(255,255,255,.12); font-size: 1.1rem; animation: notice-pulse 2.8s ease-in-out infinite; }
.dashboard-notice > div { min-width: 0; }
.dashboard-notice strong,.dashboard-notice small { display: block; }
.dashboard-notice > div > strong { font-size: .85rem; }
.dashboard-notice small { margin-top: 2px; color: rgba(255,255,255,.78); font-size: .69rem; }
.notice-period { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(255,255,255,.20); border-radius: 8px; background: rgba(0,0,0,.09); text-align: right; white-space: nowrap; }
.notice-period span { display: block; color: rgba(255,255,255,.70); font-size: .61rem; }
.notice-period strong { font-size: .72rem; }
.dashboard-overview { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 12px; margin-top: 12px; }
.recap-panel,.app-links-panel { overflow: hidden; padding: 0; }
.section-bar { display: flex; min-height: 45px; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--primary) 5%,var(--surface)); }
.section-bar span,.section-bar small { display: block; }
.section-bar span { color: var(--primary); font-size: .73rem; font-weight: 900; letter-spacing: .04em; }
.section-bar small { margin-top: 1px; color: var(--muted); font-size: .64rem; }
.section-bar i { width: 50px; height: 4px; border-radius: 99px; background: linear-gradient(90deg,var(--primary),var(--secondary)); }
.compact-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 11px; }
.compact-metric { position: relative; display: grid; min-height: 88px; grid-template-columns: 1fr auto; align-content: center; gap: 0 10px; overflow: hidden; padding: 11px 12px; border-radius: 8px; color: #fff; box-shadow: 0 6px 13px rgba(25,41,75,.10); animation: metric-in .42s ease both; transition: transform .18s ease,box-shadow .18s ease; }
.compact-metric:nth-child(2){animation-delay:.04s}.compact-metric:nth-child(3){animation-delay:.08s}.compact-metric:nth-child(4){animation-delay:.12s}.compact-metric:nth-child(5){animation-delay:.16s}.compact-metric:nth-child(6){animation-delay:.20s}
.compact-metric::after { position: absolute; right: -22px; bottom: -38px; width: 86px; height: 86px; border: 14px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.compact-metric:hover { z-index: 1; transform: translateY(-3px); box-shadow: 0 10px 18px rgba(25,41,75,.18); }
.compact-metric span,.compact-metric small,.compact-metric strong,.compact-metric em { display: block; }
.compact-metric small { color: rgba(255,255,255,.82); font-size: .69rem; font-weight: 800; }
.compact-metric strong { font-size: 1.35rem; line-height: 1.1; }
.compact-metric b { position: relative; z-index: 1; align-self: center; font-size: 1.28rem; }
.compact-metric em { grid-column: 1 / -1; margin-top: 5px; color: rgba(255,255,255,.72); font-size: .61rem; font-style: normal; }
.metric-purple{background:linear-gradient(125deg,#7c3aed,#5b21b6)}.metric-green{background:linear-gradient(125deg,#10b981,#059669)}.metric-red{background:linear-gradient(125deg,#f43f5e,#dc2626)}.metric-blue{background:linear-gradient(125deg,#316bb9,#1e4f91)}.metric-orange{background:linear-gradient(125deg,#ff6846,#f04422)}.metric-cyan{background:linear-gradient(125deg,#0ea5e9,#0284c7)}
.app-link-list { display: grid; gap: 8px; padding: 11px; }
.app-link { display: flex; min-height: 54px; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: #fff; transition: transform .18s ease,filter .18s ease; }
.app-link:hover { filter: brightness(1.05); transform: translateX(2px); }
.app-link.red{background:linear-gradient(115deg,#ef4444,#be123c)}.app-link.navy{background:linear-gradient(115deg,#0f2a5f,#1d4ed8)}.app-link.teal{background:linear-gradient(115deg,#0f766e,#0d9488)}.app-link.amber{background:linear-gradient(115deg,#f59e0b,#ea580c)}
.app-link > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.13); }
.app-link div { min-width: 0; }
.app-link strong,.app-link small { display: block; }
.app-link strong { font-size: .72rem; }
.app-link small { color: rgba(255,255,255,.72); font-size: .61rem; }
.app-link b { margin-left: auto; font-size: 1.2rem; }
.dashboard-detail-grid { margin-top: 12px; }
.app-page .dashboard-detail-grid > .panel { padding: 18px; }
.front-page-manager { display: grid; grid-template-columns: minmax(0,.86fr) minmax(380px,1.14fr); gap: 22px; margin-top: 12px; padding: 20px; overflow: hidden; }
.front-page-copy { min-width: 0; }.front-page-copy .panel-heading { align-items: flex-start; margin-bottom: 12px; }.front-page-copy > p { margin-bottom: 16px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.front-page-upload-form { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }.front-page-upload-form input[type="file"] { background: var(--surface); }.front-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }.front-page-delete-form { margin-top: 10px; }
.front-page-preview { position: relative; min-height: 270px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(145deg,#10285b 0%,var(--primary) 58%,var(--secondary) 135%); box-shadow: 0 18px 36px rgba(16,40,91,.18); isolation: isolate; }
.front-page-preview > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }.front-page-preview-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg,rgba(8,25,62,.92),rgba(20,56,126,.68) 63%,color-mix(in srgb,var(--primary) 45%,transparent)); }
.front-page-preview-brand { position: absolute; top: 18px; left: 18px; display: flex; align-items: center; gap: 10px; }.front-page-preview-brand > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.15); font-weight: 900; }.front-page-preview-brand strong,.front-page-preview-brand small { display: block; }.front-page-preview-brand strong { font-size: .78rem; }.front-page-preview-brand small { max-width: 210px; overflow: hidden; color: rgba(255,255,255,.72); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.front-page-preview-copy { position: absolute; right: 24px; bottom: 22px; left: 22px; display: grid; }.front-page-preview-copy small { width: max-content; padding: 4px 7px; border-radius: 99px; color: #6d4600; background: #ffe48a; font-size: .55rem; font-weight: 900; }.front-page-preview-copy strong { max-width: 360px; margin-top: 8px; font-size: clamp(1.35rem,3vw,2.15rem); line-height: 1.02; letter-spacing: -.04em; }.front-page-preview-copy span { margin-top: 6px; color: rgba(255,255,255,.76); font-size: .62rem; }
.front-page-preview-placeholder { position: absolute; top: 20px; right: 20px; display: grid; max-width: 150px; gap: 4px; padding: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.10); text-align: center; backdrop-filter: blur(6px); }.front-page-preview-placeholder b { font-size: 1.3rem; }.front-page-preview-placeholder span { color: rgba(255,255,255,.78); font-size: .57rem; }
.choice-cards.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.preview-top { align-items: center; background: var(--preview-header,#fff); }
.preview-top strong { margin-left: auto; color: #172033; font-size: .52rem; }

html[data-theme="dark"] { --ink:#eef3fb;--muted:#9eabc0;--line:#2b3545;--surface:#171c24;--surface-soft:#202731;--canvas:#10141b;--shadow:0 16px 44px rgba(0,0,0,.28); }
html[data-theme="dark"] .app-page .topbar { color: #fff; background: color-mix(in srgb,var(--header) 28%,#0b1018); border-color: #283140; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
html[data-theme="dark"] .app-page .topbar-title small,html[data-theme="dark"] .app-page .profile-pill small { color: rgba(255,255,255,.62); }
html[data-theme="dark"] .app-page .topbar .icon-btn,html[data-theme="dark"] .appearance-trigger,html[data-theme="dark"] .app-page .profile-pill { border-color: rgba(255,255,255,.12); color:#fff; background:rgba(255,255,255,.07); }
html[data-theme="dark"] .app-page .logout-btn { color:#fda4af;background:rgba(244,63,94,.12); }
html[data-theme="dark"] .section-bar { background:#1c2531; }
html[data-theme="dark"] .alert-success{color:#8df0cd;background:#12382f;border-color:#205746}html[data-theme="dark"] .alert-warning{color:#f8d780;background:#3c3015;border-color:#645024}html[data-theme="dark"] .alert-danger{color:#fda4af;background:#411b24;border-color:#6b2b39}
html[data-theme="dark"] .status-badge.success,html[data-theme="dark"] .roadmap-modules b.ready{color:#8df0cd;background:#173d33}html[data-theme="dark"] .status-badge.neutral,html[data-theme="dark"] .roadmap-modules b.planned{color:#bdc7d6;background:#28313e}html[data-theme="dark"] .status-badge.info{color:#a9caff;background:#1e3557}
html[data-theme="dark"] .role-chip{color:#c7d9fa;background:#25354f}html[data-theme="dark"] .panel-icon.blue{background:#213553}html[data-theme="dark"] .panel-icon.teal{background:#183b38}html[data-theme="dark"] .panel-icon.amber{background:#40351c}html[data-theme="dark"] .panel-icon.violet{background:#30264d}
html[data-theme="dark"] .preview-top strong { color:#fff; }
html[data-theme="dark"] .guest-page { background:#0b111b; }
html[data-theme="dark"] .login-shell { border-color:#273243;box-shadow:0 30px 90px rgba(0,0,0,.34); }
html[data-theme="dark"] .data-table th { color:#c6d0df;background:#202731; }
html[data-theme="dark"] .data-table tbody tr:hover { background:#1d2530; }

@keyframes metric-in { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes notice-pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.06)} }
@keyframes login-image-breathe { from{transform:scale(1)}to{transform:scale(1.045)} }

@media (max-width: 1080px) {
    .dashboard-overview { grid-template-columns: 1fr; }
    .app-link-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .front-page-manager { grid-template-columns: 1fr; }.front-page-preview { min-height: 320px; }
}
@media (max-width: 920px) {
    .app-page .topbar { padding-inline: 14px; }
    .app-page .page-content { padding: 14px; }
    .app-page .page-alerts { padding-inline: 14px; }
}
@media (max-width: 700px) {
    .appearance-trigger b { display: none; }
    .appearance-trigger { width: 38px; justify-content: center; padding: 0; }
    .dashboard-notice { align-items: flex-start; flex-wrap: wrap; }
    .notice-period { width: 100%; margin-left: 46px; text-align: left; }
    .compact-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .app-link-list { grid-template-columns: 1fr; }
    .front-page-manager { padding: 15px; }.front-page-preview { min-height: 250px; }.front-page-actions,.front-page-actions .btn { width: 100%; }.front-page-copy .panel-heading { flex-direction: column; }
    .app-page .app-footer { align-items:center;flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
    .login-front-image,.learning-orbit,.login-heading .wave,.sky-decor i { animation: none !important; }
}
@media (max-width: 480px) {
    .app-page .topbar-title small,.app-page .profile-pill { display: none; }
    .app-page .topbar-actions { gap: 4px; }
    .compact-metric-grid { grid-template-columns: 1fr; }
    .compact-metric { min-height: 78px; }
    .notice-period { margin-left: 0; }
    .appearance-drawer > form { padding: 15px; }
}

/* Data Referensi e-Rapor v1.5 */
.nav-group.open .nav-submenu { max-height: 620px; }
.reference-heading { align-items: center; }
.reference-heading p { max-width: 820px; }
.reference-source-note { display:flex; align-items:center; gap:12px; margin:0 0 15px; padding:12px 14px; border:1px solid #b9dfd3; border-radius:10px; color:#08634a; background:#eaf9f4; animation:reference-rise .28s ease both; }
.reference-source-note > span { display:grid; width:34px; height:34px; place-items:center; flex:0 0 auto; border-radius:9px; color:#fff; background:#0b9b70; font-weight:900; }
.reference-source-note strong,.reference-source-note small { display:block; }
.reference-source-note strong { font-size:.78rem; }.reference-source-note small { margin-top:1px; color:inherit; font-size:.68rem; opacity:.86; }
.reference-source-note.warning { border-color:#f0d387; color:#795000; background:#fff7dc; }.reference-source-note.warning > span { background:#d29a18; }
.reference-source-note.inside { margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.reference-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.reference-module-card { display:grid; min-width:0; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; padding:17px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 5px 18px rgba(35,59,100,.05); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; animation:reference-rise .32s ease both; }
.reference-module-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 40%,var(--line)); box-shadow:0 12px 25px rgba(35,59,100,.09); }
.reference-module-card > span { display:grid; width:48px; height:48px; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--primary) 9%,var(--surface)); font-size:1.35rem; }
.reference-module-card strong,.reference-module-card small { display:block; }.reference-module-card strong { font-size:.84rem; }.reference-module-card small { margin-top:2px; color:var(--muted); font-size:.66rem; }
.reference-module-card > b { display:grid; min-width:29px; height:29px; place-items:center; padding:0 7px; border-radius:999px; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,var(--surface)); font-size:.7rem; }
.reference-two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.75fr); gap:15px; align-items:start; }
.reference-detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.reference-detail-list > div { padding:12px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.reference-detail-list > div:nth-child(2n){border-right:0}.reference-detail-list > div.span-2{grid-column:span 2;border-right:0}
.reference-detail-list dt { color:var(--muted); font-size:.65rem; font-weight:800; text-transform:uppercase; }.reference-detail-list dd { margin:3px 0 0; font-size:.82rem; font-weight:700; }
.source-chip { display:inline-flex; align-items:center; padding:6px 8px; border-radius:999px; font-size:.64rem; font-weight:850; white-space:nowrap; }
.source-chip.dapodik { color:#1357a6; background:#e3eeff; }.source-chip.local { color:#7a4700; background:#fff0bd; }
.count-pill { display:inline-grid; min-width:31px; height:31px; place-items:center; border-radius:9px; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,var(--surface)); font-weight:850; }
.reference-readonly-block { margin-bottom:6px; padding:16px; border:1px dashed var(--line); border-radius:11px; background:var(--surface-soft); }.reference-readonly-block > strong { display:block; margin-bottom:13px; font-size:.78rem; }
.reference-tabs { display:flex; gap:5px; margin:0 0 12px; padding:5px; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.reference-tabs a { min-width:max-content; padding:8px 13px; border-radius:7px; color:var(--muted); font-size:.72rem; font-weight:800; }.reference-tabs a.active { color:#fff; background:var(--primary); }
.editable-reference-table input { min-width:90px; min-height:38px; padding:7px 9px; border-radius:7px; font-size:.76rem; }.editable-reference-table td:nth-child(3) input { min-width:230px; }
.switch-label { display:flex; grid-template-columns:none; align-items:center; gap:7px; }.switch-label input { position:absolute; opacity:0; pointer-events:none; }.switch-label span { position:relative; width:38px; height:21px; border-radius:999px; background:#bdc6d2; transition:.2s; }.switch-label span::after { position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; content:""; transition:.2s; }.switch-label input:checked + span { background:#0b9b70; }.switch-label input:checked + span::after { transform:translateX(17px); }.switch-label em { color:var(--muted); font-size:.68rem; font-style:normal; }
.reference-form-footer { display:flex; justify-content:flex-end; padding:14px 18px; border-top:1px solid var(--line); }
.mapping-filter-panel { margin-bottom:12px; padding:14px; }.mapping-filter { display:grid; grid-template-columns:minmax(220px,1fr) 190px auto; align-items:end; gap:10px; }.mapping-filter input,.mapping-filter select { min-height:40px; border-radius:8px; }
.mapping-layout { grid-template-columns:minmax(0,1.6fr) minmax(300px,.6fr); }.mapping-form { position:sticky; top:88px; }
.asset-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }.asset-card { display:flex; min-width:0; flex-direction:column; gap:11px; padding:14px; }.asset-card h2 { margin:0 0 3px; font-size:.86rem; }.asset-card p { margin:0; color:var(--muted); font-size:.65rem; }.asset-card form { display:grid; gap:7px; }.asset-card form:last-child { margin-top:auto; }
.asset-preview { display:grid; height:125px; place-items:center; align-content:center; gap:5px; overflow:hidden; border:1px dashed var(--line); border-radius:10px; color:var(--muted); background:var(--surface-soft); }.asset-preview > span { font-size:1.8rem; }.asset-preview small { font-size:.64rem; }.asset-preview.has-image { border-style:solid; background:#fff; }.asset-preview img { width:100%; height:100%; object-fit:contain; padding:8px; }
.compact-file input,.asset-card input[type="file"] { min-height:38px; padding:6px; border-radius:8px; font-size:.66rem; }
.homeroom-signatures { padding:16px; }.homeroom-signatures .panel-heading > small { color:var(--muted); font-size:.67rem; }.signature-class-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.signature-class-grid > article { display:grid; grid-template-columns:68px minmax(120px,1fr) minmax(210px,.8fr) auto; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:9px; }.signature-mini { display:grid; width:68px; height:54px; place-items:center; overflow:hidden; border-radius:7px; background:var(--surface-soft); }.signature-mini img { width:100%; height:100%; object-fit:contain; }.signature-class-grid strong,.signature-class-grid small { display:block; }.signature-class-grid strong { font-size:.76rem; }.signature-class-grid small { color:var(--muted); font-size:.64rem; }.signature-class-grid form { display:flex; gap:6px; }.signature-class-grid input[type="file"] { min-width:0; min-height:35px; padding:5px; font-size:.62rem; }
.batch-photo-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); align-items:center; gap:18px; margin-bottom:12px; padding:16px; }.batch-photo-panel > div { display:flex; align-items:center; gap:12px; }.batch-photo-panel > div > span { display:grid; width:48px; height:48px; place-items:center; flex:0 0 auto; border-radius:13px; background:color-mix(in srgb,var(--secondary) 12%,var(--surface)); font-size:1.35rem; }.batch-photo-panel h2 { margin:0; font-size:.9rem; }.batch-photo-panel p { margin:2px 0 0; color:var(--muted); font-size:.67rem; }.batch-photo-panel form { display:flex; gap:8px; }.batch-photo-panel input { min-width:0; min-height:40px; padding:6px; font-size:.68rem; }
.student-photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; }.student-photo-card { display:flex; min-width:0; flex-direction:column; gap:8px; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.student-photo-preview { display:grid; height:155px; place-items:center; overflow:hidden; border-radius:9px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); font-size:2.1rem; font-weight:900; }.student-photo-preview img { width:100%; height:100%; object-fit:cover; }.student-photo-info strong,.student-photo-info small { display:block; }.student-photo-info strong { overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.student-photo-info small { overflow:hidden; color:var(--muted); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }.student-photo-card form { display:flex; gap:5px; }.student-photo-card input[type="file"] { min-width:0; min-height:35px; padding:5px; font-size:.6rem; }.span-full { grid-column:1/-1; }
.reference-error-panel { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px; }.reference-error-panel > span { display:grid; width:60px; height:60px; place-items:center; border-radius:17px; background:#fff0bd; font-size:1.6rem; }.reference-error-panel h2 { margin:0 0 5px; }.reference-error-panel p,.reference-error-panel li { color:var(--muted); font-size:.78rem; }.reference-error-panel code { color:var(--primary); }
html[data-theme="dark"] .reference-source-note { border-color:#245745;color:#8df0cd;background:#15372e; }html[data-theme="dark"] .reference-source-note.warning { border-color:#5b4b25;color:#f5d77f;background:#332b18; }html[data-theme="dark"] .source-chip.dapodik { color:#a9c8ff;background:#213553; }html[data-theme="dark"] .source-chip.local { color:#f5d77f;background:#40351c; }html[data-theme="dark"] .asset-preview.has-image { background:#eef2f7; }
@keyframes reference-rise { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }
@media (max-width:1180px){.reference-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-card-grid,.student-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.signature-class-grid{grid-template-columns:1fr}.mapping-layout{grid-template-columns:1fr}.mapping-form{position:static}}
@media (max-width:760px){.reference-two-column,.batch-photo-panel{grid-template-columns:1fr}.reference-detail-list{grid-template-columns:1fr}.reference-detail-list>div,.reference-detail-list>div:nth-child(2n){border-right:0}.reference-detail-list>div.span-2{grid-column:auto}.mapping-filter{grid-template-columns:1fr}.batch-photo-panel form{flex-direction:column}.responsive-reference-table{min-width:0}.responsive-reference-table thead{display:none}.responsive-reference-table,.responsive-reference-table tbody,.responsive-reference-table tr,.responsive-reference-table td{display:block;width:100%}.responsive-reference-table tbody{padding:9px}.responsive-reference-table tr{margin-bottom:9px;overflow:hidden;border:1px solid var(--line);border-radius:9px}.responsive-reference-table td{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:9px 11px}.responsive-reference-table td::before{color:var(--muted);font-size:.64rem;font-weight:850;content:attr(data-label)}.responsive-reference-table td.align-right{text-align:left!important}.responsive-reference-table .row-actions{justify-content:flex-start}.signature-class-grid>article{grid-template-columns:58px minmax(0,1fr)}.signature-class-grid>article form{grid-column:1/-1}.signature-mini{width:58px;height:48px}}
@media (max-width:520px){.reference-module-grid,.asset-card-grid,.student-photo-grid{grid-template-columns:1fr}.responsive-reference-table td{grid-template-columns:1fr;gap:2px}.editable-reference-table{min-width:620px}.reference-form-footer .btn{width:100%}.homeroom-signatures .panel-heading{align-items:flex-start;flex-direction:column}.signature-class-grid>article{grid-template-columns:48px minmax(0,1fr)}.signature-mini{width:48px;height:44px}.signature-class-grid>article form{flex-direction:column}.student-photo-preview{height:210px}}

/* Web Service Dapodik v1.2 */
.dapodik-heading { align-items: center; }
.integration-notice { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; padding: 12px 14px; border: 1px solid #b9ddff; border-radius: 10px; color: #174b7a; background: #eaf6ff; }
.integration-notice > span { display: grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: #1497ee; font-weight: 900; }
.integration-notice strong { font-size: .84rem; }
.integration-notice p { margin: 2px 0 0; font-size: .76rem; }
.integration-notice code { padding: 2px 5px; border-radius: 5px; color: #174b7a; background: rgba(255,255,255,.68); }
.dapodik-schema-alert { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.dapodik-schema-alert span { color:inherit; font-size:.78rem; }
.dapodik-recovery-panel { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; padding:24px; }
.dapodik-recovery-panel .recovery-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,#f97316,#ef4444); font-size:1.4rem; font-weight:900; box-shadow:0 10px 24px rgba(239,68,68,.2); }
.dapodik-recovery-panel h2 { margin:5px 0 7px; font-size:1.15rem; }
.dapodik-recovery-panel p { margin:0 0 12px; color:var(--muted); }
.dapodik-recovery-panel ol { margin:0 0 15px; padding-left:20px; color:var(--ink); }
.dapodik-recovery-panel li { margin:7px 0; }
.dapodik-recovery-panel code { word-break:break-word; }
.dapodik-recovery-panel .recovery-log { font-size:.76rem; }
.dapodik-panel { border-radius: 8px; }
.dapodik-table { min-width: 1040px; }
.dapodik-table thead th { padding-block: 11px; color: #fff; background: #0796ef; font-size: .72rem; letter-spacing: 0; text-transform: none; }
.dapodik-table tbody td { padding-block: 12px; }
.dapodik-table code { color: var(--ink); background: var(--surface-soft); white-space: nowrap; }
.masked-key { display: inline-block; min-width: 90px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .78rem; letter-spacing: .04em; white-space: nowrap; }
.connection-state { display: flex!important; align-items: center; gap: 5px; margin-top: 4px; font-size: .66rem!important; }
.connection-state i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #94a3b8; }
.connection-state.state-success { color: #087558!important; }.connection-state.state-success i{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.13)}
.connection-state.state-failed { color: #b42335!important; }.connection-state.state-failed i{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.13)}
.btn-edit { color: #2c2100; background: #ffba28; box-shadow: 0 5px 12px rgba(245,158,11,.18); }
.btn-danger { color: #fff; background: #f20d38; box-shadow: 0 5px 12px rgba(242,13,56,.18); }
.btn-test { color: #fff; background: #0aa13a; box-shadow: 0 7px 16px rgba(10,161,58,.20); }
.btn-test:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.connection-test-bar { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.connection-test-bar label { width: min(360px,100%); }
.connection-test-bar label > span { color: var(--muted); font-size: .69rem; }
.connection-test-bar select { min-height: 42px; }
.connection-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 13px; }
.connection-steps article { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.connection-steps article > span { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: linear-gradient(135deg,var(--primary),var(--secondary)); font-weight: 900; }
.connection-steps strong,.connection-steps small { display: block; }
.connection-steps strong { font-size: .78rem; }.connection-steps small{color:var(--muted);font-size:.68rem}
.connection-form-layout { display: grid; grid-template-columns: minmax(0,1fr) 315px; gap: 15px; align-items: start; }
.connection-guide { position: sticky; top: 76px; padding: 22px; }
.guide-icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 14px; border-radius: 15px; background: color-mix(in srgb,var(--primary) 10%,var(--surface)); font-size: 1.5rem; }
.connection-guide h2 { margin-bottom: 12px; font-size: 1.05rem; }
.connection-guide ul { display: grid; gap: 9px; margin: 0; padding-left: 20px; color: var(--muted); font-size: .78rem; }
.connection-guide li::marker { color: var(--primary); }
.connection-guide li strong { color: var(--ink); }
.guide-tip { display: grid; gap: 3px; margin-top: 18px; padding: 11px; border-radius: 9px; background: var(--surface-soft); }
.guide-tip strong { color: var(--primary); font-size: .73rem; }.guide-tip span{color:var(--muted);font-size:.69rem}

html[data-theme="dark"] .integration-notice { border-color:#244d6d;color:#b9dcf8;background:#142d41; }
html[data-theme="dark"] .integration-notice code { color:#d7ebfb;background:rgba(255,255,255,.07); }
html[data-theme="dark"] .connection-state.state-success { color:#83e5c1!important; }
html[data-theme="dark"] .connection-state.state-failed { color:#fda4af!important; }

/* Dapodik Local Bridge v2.1 */
.bridge-token-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin-bottom:14px;padding:20px;border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))}.bridge-token-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--accent) 18%,var(--surface));font-size:1.5rem}.bridge-token-panel h2{margin:3px 0 5px;font-size:1rem}.bridge-token-panel p{margin:0 0 12px;color:var(--muted);font-size:.75rem}.bridge-token-value{display:flex;align-items:center;gap:8px}.bridge-token-value code{min-width:0;flex:1;overflow-wrap:anywhere;padding:11px 13px;border:1px dashed color-mix(in srgb,var(--primary) 45%,var(--line));border-radius:9px;color:var(--ink);background:var(--surface);font-size:.78rem}.bridge-token-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:9px;color:var(--muted);font-size:.67rem}.connection-mode{display:inline-flex;margin:5px 0 0;padding:3px 7px;border-radius:999px;font-size:.58rem;font-weight:850}.connection-mode.mode-direct{color:#175b91;background:#e7f4ff}.connection-mode.mode-bridge{color:#6b3aaa;background:#f0e7ff}.bridge-heartbeat{display:flex!important;align-items:center;gap:5px;margin-top:4px;color:var(--muted);font-size:.62rem!important}.bridge-heartbeat i{width:7px;height:7px;border-radius:50%;background:#94a3b8}.bridge-heartbeat.online{color:#087558}.bridge-heartbeat.online i{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.13)}.table-subcopy{display:block;margin-top:3px;color:var(--muted);font-size:.59rem}.connection-mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:17px}.connection-mode-picker label{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft);cursor:pointer;transition:.18s ease}.connection-mode-picker label.active{border-color:color-mix(in srgb,var(--primary) 55%,var(--line));background:color-mix(in srgb,var(--primary) 7%,var(--surface));box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 10%,transparent)}.connection-mode-picker input{position:absolute;opacity:0}.connection-mode-picker label>span{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:1rem}.connection-mode-picker strong,.connection-mode-picker small{display:block}.connection-mode-picker strong{font-size:.76rem}.connection-mode-picker small{margin-top:2px;color:var(--muted);font-size:.62rem;line-height:1.4}.bridge-agent-strip,.bridge-active-job{display:flex;align-items:center;gap:10px;margin:10px 18px 0;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft)}.bridge-agent-strip>span{font-size:1.25rem}.bridge-agent-strip>div,.bridge-active-job>div{min-width:0;flex:1}.bridge-agent-strip strong,.bridge-agent-strip small,.bridge-active-job strong,.bridge-active-job small{display:block}.bridge-agent-strip strong,.bridge-active-job strong{font-size:.73rem}.bridge-agent-strip small,.bridge-active-job small{margin-top:2px;color:var(--muted);font-size:.62rem}.bridge-agent-strip.online{border-color:#a9e5cf;background:#effbf6}.bridge-agent-strip.offline{border-color:#f1d68b;background:#fff9e7}.bridge-active-job{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));background:color-mix(in srgb,var(--primary) 4%,var(--surface))}.bridge-job-pulse{width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 40%,transparent);animation:bridge-pulse 1.5s ease-out infinite}.bridge-history-panel{max-width:1080px;margin:12px auto 0;overflow:hidden;padding:0}.bridge-job-status{display:inline-flex;padding:5px 8px;border-radius:999px;color:#6d4b00;background:#fff0bc;font-size:.62rem;font-weight:850}.bridge-job-status.success{color:#087558;background:#dcf8ed}.bridge-job-status.failed,.bridge-job-status.expired,.bridge-job-status.cancelled{color:#a11b2b;background:#ffe3e7}.bridge-job-status.claimed,.bridge-job-status.processing{color:#174b7a;background:#e6f4ff}.result-queued .sync-result-check{border-color:#b9ddff;color:#1677bd;background:#edf8ff;box-shadow:0 0 0 10px rgba(20,151,238,.07)}
html[data-theme="dark"] .connection-mode.mode-direct{color:#b9dcf8;background:#18344c}html[data-theme="dark"] .connection-mode.mode-bridge{color:#d9c4ff;background:#352650}html[data-theme="dark"] .bridge-agent-strip.online{border-color:#245745;background:#15372e}html[data-theme="dark"] .bridge-agent-strip.offline{border-color:#5b4b25;background:#332b18}html[data-theme="dark"] .bridge-job-status.success{color:#8df0cd;background:#173d33}html[data-theme="dark"] .bridge-job-status.failed,html[data-theme="dark"] .bridge-job-status.expired,html[data-theme="dark"] .bridge-job-status.cancelled{color:#fda4af;background:#411b24}html[data-theme="dark"] .result-queued .sync-result-check{border-color:#244d6d;color:#9bd3fa;background:#142d41}
@keyframes bridge-pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

@media (max-width: 980px) {
    .connection-form-layout { grid-template-columns: 1fr; }
    .connection-guide { position: static; }
    .connection-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .bridge-token-panel{grid-template-columns:1fr}.bridge-token-value{align-items:stretch;flex-direction:column}.connection-mode-picker{grid-template-columns:1fr}.bridge-agent-strip,.bridge-active-job{align-items:flex-start;flex-wrap:wrap}.bridge-agent-strip .btn,.bridge-active-job form,.bridge-active-job .btn{width:100%}
    .dapodik-schema-alert { align-items:flex-start; flex-direction:column; }
    .dapodik-recovery-panel { grid-template-columns:1fr; padding:18px; }
    .dapodik-table { min-width: 0; }
    .dapodik-table thead { display: none; }
    .dapodik-table,.dapodik-table tbody,.dapodik-table tr,.dapodik-table td { display: block; width: 100%; }
    .dapodik-table tbody { padding: 10px; }
    .dapodik-table tbody tr { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
    .dapodik-table tbody tr:last-child { margin-bottom: 0; }
    .dapodik-table tbody td { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 10px; min-height: 43px; align-items: center; padding: 9px 11px; border-top: 1px solid var(--line); text-align: left!important; }
    .dapodik-table tbody td:first-child { border-top: 0; }
    .dapodik-table tbody td::before { color: var(--muted); font-size: .67rem; font-weight: 800; content: attr(data-label); }
    .dapodik-table tbody td[colspan] { display: block; }
    .dapodik-table tbody td[colspan]::before { display: none; }
    .dapodik-table .row-actions { justify-content: flex-start; }
    .connection-test-bar { align-items: stretch; flex-direction: column; }
    .connection-test-bar label,.connection-test-bar .btn { width: 100%; }
}
@media (max-width: 480px) {
    .dapodik-table tbody td { grid-template-columns: 1fr; gap: 3px; }
    .dapodik-table .row-actions { flex-wrap: wrap; }
    .dapodik-table .row-actions .btn { width: auto; }
}

/* Navigasi aplikasi bertingkat v1.3 */
.nav-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-page .nav-list { display: grid; min-height: 0; flex: 1; align-content: start; gap: 2px; padding: 12px 10px 20px; scrollbar-color: rgba(255,255,255,.24) transparent; scrollbar-width: thin; }
.app-page .nav-list::-webkit-scrollbar { width: 6px; }
.app-page .nav-list::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(255,255,255,.22); }
.app-page .nav-list .nav-item,
.app-page .nav-list .nav-parent { display: flex; width: 100%; min-height: 41px; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; color: rgba(255,255,255,.69); background: transparent; font-size: .78rem; font-weight: 750; line-height: 1.22; text-align: left; cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.app-page .nav-list .nav-item:hover,
.app-page .nav-list .nav-parent:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(1px); }
.app-page .nav-list .nav-item.active,
.app-page .nav-list .nav-parent.active { color: #ffe243; background: color-mix(in srgb, var(--sidebar) 68%, #310000); box-shadow: inset 3px 0 0 #ffe243, 0 5px 14px rgba(0,0,0,.12); }
.app-page .nav-list .nav-item em,
.app-page .nav-list .nav-parent em { min-width: 0; flex: 1; font-style: normal; }
.nav-icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-chevron { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .2s ease; }
.nav-group.open .nav-chevron { transform: rotate(90deg); }
.nav-submenu { display: grid; max-height: 0; gap: 2px; overflow: hidden; padding-left: 28px; visibility: hidden; pointer-events: none; opacity: 0; transition: max-height .25s ease, opacity .18s ease, padding .25s ease, visibility 0s linear .25s; }
.nav-group.open .nav-submenu { max-height: 220px; padding-top: 3px; padding-bottom: 5px; visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; }
.app-page .nav-list .nav-submenu a { display: flex; min-height: 33px; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; color: rgba(255,255,255,.60); font-size: .7rem; font-weight: 650; line-height: 1.25; }
.app-page .nav-list .nav-submenu a:hover { color: #fff; background: rgba(255,255,255,.07); }
.app-page .nav-list .nav-submenu a.active { color: #ffe66a; background: rgba(0,0,0,.16); box-shadow: none; }
.nav-submenu a i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: currentColor; opacity: .72; }
.app-page .nav-label { margin: 14px 10px 4px; color: rgba(255,255,255,.35); font-size: .59rem; letter-spacing: .11em; }
.nav-logout { margin: 0; }
.nav-logout .nav-item { color: rgba(255,255,255,.66); }
.nav-logout .nav-item:hover { color: #ffd6dc; background: rgba(244,63,94,.13); }

/* Halaman penanda modul yang dikembangkan bertahap */
.workspace-heading { align-items: center; }
.workspace-heading h1 { margin-bottom: 5px; }
.workspace-heading p { max-width: 760px; margin-bottom: 0; color: var(--muted); }
.workspace-placeholder { position: relative; display: grid; grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr); gap: 38px; min-height: 460px; align-items: center; overflow: hidden; padding: clamp(28px, 5vw, 58px); }
.workspace-placeholder::before { position: absolute; width: 230px; height: 230px; right: -95px; top: -105px; border: 34px solid color-mix(in srgb, var(--secondary) 8%, transparent); border-radius: 50%; content: ""; }
.workspace-illustration { position: relative; display: grid; width: min(230px, 90%); aspect-ratio: 1; place-items: center; justify-self: center; border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line)); border-radius: 35% 65% 58% 42% / 47% 37% 63% 53%; background: radial-gradient(circle at 35% 25%, color-mix(in srgb,var(--secondary) 25%,var(--surface)), color-mix(in srgb,var(--primary) 9%,var(--surface))); animation: workspace-float 5s ease-in-out infinite; }
.workspace-illustration > span { position: relative; z-index: 2; display: grid; width: 92px; height: 92px; place-items: center; border-radius: 29px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 20px 38px color-mix(in srgb,var(--primary) 24%,transparent); font-size: 2.7rem; font-weight: 900; transform: rotate(-5deg); }
.workspace-illustration i { position: absolute; border-radius: 50%; background: var(--accent); opacity: .72; }
.workspace-illustration i:nth-of-type(1) { width: 23px; height: 23px; right: 20px; top: 25px; }
.workspace-illustration i:nth-of-type(2) { width: 12px; height: 12px; left: 27px; bottom: 37px; background: var(--secondary); }
.workspace-illustration i:nth-of-type(3) { width: 8px; height: 8px; right: 42px; bottom: 25px; background: var(--primary); }
.workspace-copy { position: relative; z-index: 1; }
.workspace-copy h2 { max-width: 690px; margin: 15px 0 9px; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.16; letter-spacing: -.035em; }
.workspace-copy > p { max-width: 720px; color: var(--muted); }
.workspace-status-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 22px 0; }
.workspace-status-grid > div { display: grid; grid-template-columns: 31px 1fr; gap: 0 9px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.workspace-status-grid > div > span { display: grid; width: 31px; height: 31px; grid-row: span 2; place-items: center; border-radius: 9px; color: #087558; background: #d8f7ea; font-weight: 900; }
.workspace-status-grid > div.planned > span { color: #8a5700; background: #fff0bc; }
.workspace-status-grid strong,.workspace-status-grid small { display: block; }
.workspace-status-grid strong { font-size: .74rem; }
.workspace-status-grid small { color: var(--muted); font-size: .63rem; }
.workspace-plan { max-width: 720px; padding: 15px 17px; border: 1px dashed color-mix(in srgb,var(--primary) 30%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--primary) 3%,var(--surface)); }
.workspace-plan > strong { font-size: .79rem; }
.workspace-plan ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 19px; color: var(--muted); font-size: .74rem; }
.workspace-plan li::marker { color: var(--primary); }
.workspace-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
html[data-theme="dark"] .workspace-status-grid > div > span { color: #8df0cd; background: #173d33; }
html[data-theme="dark"] .workspace-status-grid > div.planned > span { color: #f8d780; background: #40351c; }

@keyframes workspace-float { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)} }

@media (max-width: 760px) {
    .workspace-placeholder { grid-template-columns: 1fr; min-height: 0; gap: 24px; padding: 26px 20px; }
    .workspace-illustration { width: 150px; }
    .workspace-illustration > span { width: 68px; height: 68px; border-radius: 21px; font-size: 2rem; }
    .workspace-status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
    .app-page .sidebar-close { position: absolute; z-index: 2; top: 13px; right: 9px; }
    .app-page .sidebar-brand > div:nth-child(2) { min-width: 0; padding-right: 34px; }
    .app-page .sidebar-brand small { width: auto; max-width: 105px; }
}
@media (max-width: 480px) {
    .workspace-actions { flex-direction: column; }
    .workspace-actions .btn { width: 100%; }
}

/* Data Pengguna v2.2 */
.user-page-heading{align-items:center}.user-page-heading p{max-width:760px}.user-heading-actions{display:flex;flex-wrap:wrap;gap:8px}.user-heading-actions .btn{min-height:42px}.user-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}.user-summary-grid article{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:3px 11px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 7px 22px rgba(15,42,95,.045)}.user-summary-grid article>span{display:grid;width:42px;height:42px;grid-row:span 2;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-weight:900}.user-summary-grid small,.user-summary-grid strong,.user-summary-grid em{display:block}.user-summary-grid small{color:var(--muted);font-size:.62rem;font-weight:750}.user-summary-grid strong{font-size:1.35rem;line-height:1}.user-summary-grid em{grid-column:2;color:var(--muted);font-size:.57rem;font-style:normal}.user-schema-error{display:flex;align-items:flex-start;gap:13px;padding:20px;border-color:#f0b7bf;background:#fff5f6}.user-schema-error>span{display:grid;width:40px;height:40px;place-items:center;flex:0 0 auto;border-radius:12px;color:#fff;background:var(--danger);font-weight:900}.user-schema-error h2,.user-schema-error p{margin:0}.user-schema-error h2{font-size:.92rem}.user-schema-error p{margin-top:4px;color:var(--muted);font-size:.7rem}.user-generation-warning{margin-bottom:13px}.user-generation-result{display:grid;grid-template-columns:48px 1fr;gap:14px;margin-bottom:13px;padding:17px;border-color:#a9e5cf;background:linear-gradient(100deg,#effbf6,var(--surface))}.user-result-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;color:#fff;background:#0b9b70;font-size:1.25rem;font-weight:900}.user-generation-result h2,.user-generation-result p{margin:0}.user-generation-result h2{margin:2px 0 4px;font-size:.9rem}.user-generation-result p{color:var(--muted);font-size:.68rem;line-height:1.55}.user-result-actions{display:flex;align-items:center;gap:10px;margin-top:10px}.user-result-actions small{color:#087558;font-size:.6rem}.user-tabs{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--surface);scrollbar-width:thin}.user-tabs a{display:flex;min-width:145px;min-height:43px;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:.73rem;font-weight:800;transition:.18s ease}.user-tabs a:hover{color:var(--primary);background:var(--surface-soft)}.user-tabs a>span{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;background:var(--surface-soft)}.user-tabs a>em{display:grid;min-width:24px;height:24px;place-items:center;margin-left:auto;border-radius:999px;background:var(--surface-soft);font-size:.6rem;font-style:normal}.user-tabs a.active{color:#fff;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 58%,var(--secondary)));box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 20%,transparent)}.user-tabs a.active>span,.user-tabs a.active>em{color:#fff;background:rgba(255,255,255,.17)}.user-table-panel{margin-bottom:14px}.user-table-toolbar{display:grid;grid-template-columns:auto auto minmax(230px,1fr);align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line)}.user-row-limit{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.65rem;font-weight:750}.user-row-limit select{width:92px;min-height:37px;padding:6px 24px 6px 9px}.user-search-box{justify-self:end;width:min(410px,100%)}.user-search-box input{min-height:38px}.user-data-table{min-width:1420px}.user-data-table thead th{color:#fff;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 60%,var(--secondary)));text-transform:none;letter-spacing:0}.user-data-table td{font-size:.69rem}.user-data-table td:nth-child(2){min-width:175px}.user-data-table td:nth-child(3){min-width:215px}.user-data-table td:nth-child(4){min-width:230px}.user-data-table td:nth-child(7){min-width:140px}.user-data-table .row-action-menu{min-width:95px}.user-source-label,.password-state{display:block;margin-top:3px!important;font-size:.55rem!important;font-weight:800}.user-source-label{color:#3563aa!important}.password-state{color:#9a6500!important}.online-state{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;font-size:.59rem;font-weight:850}.online-state i{width:7px;height:7px;border-radius:50%;background:currentColor}.online-state.online{color:#087558;background:#dcf8ed}.online-state.offline{color:#5c6878;background:#edf0f4}.row-action-menu .danger-action{color:var(--danger)!important}.user-table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border-top:1px solid var(--line);color:var(--muted);font-size:.63rem}.user-table-footer>div{display:flex;align-items:center;gap:9px}.user-table-footer strong{min-width:48px;text-align:center}.user-generate-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100vh - 30px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:17px;color:var(--ink);background:var(--surface);box-shadow:0 28px 80px rgba(10,25,55,.3)}.user-generate-dialog::backdrop{background:rgba(8,20,40,.62);backdrop-filter:blur(3px)}.user-generate-dialog header,.user-generate-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px}.user-generate-dialog header{border-bottom:1px solid var(--line);background:var(--surface-soft)}.user-generate-dialog header>div{display:flex;align-items:center;gap:10px}.user-generate-dialog header>div>span{display:grid;width:39px;height:39px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:1.1rem}.user-generate-dialog header small,.user-generate-dialog header h2{display:block;margin:0}.user-generate-dialog header small{color:var(--primary);font-size:.55rem;font-weight:850;text-transform:uppercase}.user-generate-dialog header h2{font-size:.9rem}.user-generate-dialog header>button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:10px;color:var(--muted);background:var(--surface);font-size:1.15rem;cursor:pointer}.user-generate-body{display:grid;gap:13px;padding:17px}.generate-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.generate-source-grid article{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}.generate-source-grid article>span{display:grid;width:37px;height:37px;place-items:center;flex:0 0 auto;border-radius:10px;color:var(--primary);background:var(--surface);font-weight:900}.generate-source-grid strong,.generate-source-grid small{display:block}.generate-source-grid strong{font-size:.72rem}.generate-source-grid small{margin-top:2px;color:var(--muted);font-size:.58rem}.generate-password-grid{gap:10px}.generate-password-grid label>small{display:block;margin-top:4px;color:var(--muted);font-size:.57rem}.generate-confirm{padding:11px;border:1px dashed color-mix(in srgb,var(--primary) 28%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--primary) 3%,var(--surface))}.user-generate-dialog footer{border-top:1px solid var(--line)}.user-generated-note{margin-bottom:16px}.temporary-credential{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.temporary-credential>span{display:block;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:.58rem;text-align:left}.temporary-credential code{display:block;margin-top:4px;color:var(--ink);font-size:.78rem;font-weight:850;word-break:break-all}.user-password-result{max-width:500px}
html[data-theme="dark"] .user-generation-result{border-color:#245745;background:linear-gradient(100deg,#15372e,var(--surface))}html[data-theme="dark"] .user-result-actions small{color:#8df0cd}html[data-theme="dark"] .online-state.online{color:#8df0cd;background:#173d33}html[data-theme="dark"] .online-state.offline{color:#c5ced9;background:#2a313b}html[data-theme="dark"] .user-schema-error{border-color:#612b35;background:#3d1d25}
@media(max-width:1050px){.user-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-table-toolbar{grid-template-columns:1fr auto}.user-search-box{grid-column:1/-1;justify-self:stretch;width:100%}}
@media(max-width:760px){.user-page-heading{align-items:stretch}.user-heading-actions{display:grid;grid-template-columns:1fr}.user-heading-actions .btn{width:100%}.user-summary-grid{grid-template-columns:1fr 1fr}.user-generation-result{grid-template-columns:38px 1fr}.user-result-icon{width:38px;height:38px;border-radius:11px}.user-result-actions{align-items:stretch;flex-direction:column}.user-tabs a{min-width:130px}.user-table-toolbar{grid-template-columns:1fr}.user-row-limit{justify-content:space-between}.user-search-box{grid-column:auto}.user-table-footer{align-items:stretch;flex-direction:column}.user-table-footer>div{justify-content:space-between}.generate-source-grid,.generate-password-grid{grid-template-columns:1fr}.user-generate-dialog footer{align-items:stretch;flex-direction:column-reverse}.user-generate-dialog footer .btn{width:100%}.temporary-credential{grid-template-columns:1fr}}
@media(max-width:480px){.user-summary-grid{grid-template-columns:1fr}.user-table-toolbar .table-export-actions{display:grid;grid-template-columns:1fr 1fr}.user-table-toolbar .table-export-actions .btn:last-child{grid-column:1/-1}.user-tabs a{min-width:118px}.user-generation-result{grid-template-columns:1fr}.user-table-footer>div{display:grid;grid-template-columns:1fr auto 1fr}.user-table-footer .btn{padding-inline:7px}}

/* Ambil Data Dapodik v1.6 */
.dapodik-import-heading { align-items: center; }
.dapodik-import-heading h1 { margin-bottom: 5px; }
.dapodik-import-heading p { max-width: 760px; margin: 0; color: var(--muted); }
.dapodik-import-panel { max-width: 980px; margin: 0 auto; overflow: hidden; padding: 0; }
.import-panel-title { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--primary) 4%,var(--surface)); }
.import-panel-title > div { display: flex; align-items: center; gap: 11px; }
.import-panel-title strong,.import-panel-title small { display: block; }
.import-panel-title strong { font-size: 1.05rem; }
.import-panel-title small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.import-title-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow: 0 8px 20px color-mix(in srgb,var(--primary) 20%,transparent); font-size: 1.25rem; font-weight: 900; }
.sync-connection-banner { display: flex; align-items: center; gap: 10px; margin: 15px 18px 0; padding: 11px 13px; border: 1px solid #f1d68b; border-radius: 9px; color: #795000; background: #fff7da; }
.sync-connection-banner.state-success { border-color: #a9e5cf; color: #08684c; background: #e2f8ef; }
.sync-connection-banner.state-failed { border-color: #f2b9c1; color: #9f2130; background: #fff0f2; }
.sync-status-icon { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: #d39a19; font-weight: 900; }
.state-success .sync-status-icon { background: #0b9b70; }
.state-failed .sync-status-icon { background: #e23c52; }
.sync-connection-banner strong,.sync-connection-banner small { display: block; }
.sync-connection-banner strong { font-size: .78rem; }
.sync-connection-banner small { margin-top: 1px; color: inherit; font-size: .68rem; opacity: .86; }
.dapodik-import-form { padding: 18px; }
.import-form-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.import-form-grid label { align-content: start; }
.import-form-grid select,.import-form-grid input { min-height: 43px; border-radius: 8px; font-size: .79rem; }
.import-form-grid input[readonly] { color: var(--ink); background: var(--surface-soft); cursor: default; }
.import-readonly-field { position: relative; }
.import-readonly-field > span { position: absolute; z-index: 1; left: 12px; top: 10px; display: grid; width: 23px; height: 23px; place-items: center; color: var(--primary); font-size: .78rem; }
.import-readonly-field input { padding-left: 41px; }
.import-sequence-note { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 11px 13px; border: 1px solid color-mix(in srgb,var(--primary) 18%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--primary) 4%,var(--surface)); }
.import-sequence-note > span { display: grid; width: 29px; height: 29px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--primary); font-size: .72rem; font-weight: 900; }
.import-sequence-note p { margin: 0; }
.import-sequence-note strong,.import-sequence-note small { display: block; }
.import-sequence-note strong { font-size: .72rem; }
.import-sequence-note small { margin-top: 1px; color: var(--muted); font-size: .64rem; }
.import-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.import-safety-note { display: flex; min-width: 0; align-items: center; gap: 9px; margin-right: auto; }
.import-safety-note > span { display: grid; width: 35px; height: 35px; place-items: center; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb,var(--secondary) 12%,var(--surface)); }
.import-safety-note p { min-width: 0; margin: 0; }
.import-safety-note strong,.import-safety-note small { display: block; }
.import-safety-note strong { font-size: .72rem; }
.import-safety-note small { color: var(--muted); font-size: .64rem; }
.import-form-actions .btn { min-height: 40px; border-radius: 8px; font-size: .76rem; }
.import-flow { display: grid; max-width: 1080px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 12px auto; }
.import-flow article { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 4px 14px rgba(35,59,100,.04); }
.import-flow article.active { border-color: color-mix(in srgb,var(--primary) 38%,var(--line)); background: color-mix(in srgb,var(--primary) 5%,var(--surface)); box-shadow: 0 7px 20px color-mix(in srgb,var(--primary) 11%,transparent); }
.import-flow article.active > span { box-shadow: 0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent); }
.import-flow article > span { display: grid; width: 32px; height: 32px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: linear-gradient(135deg,var(--primary),var(--secondary)); font-size: .75rem; font-weight: 900; }
.import-flow strong,.import-flow small { display: block; }
.import-flow strong { font-size: .73rem; }
.import-flow small { margin-top: 1px; color: var(--muted); font-size: .63rem; line-height: 1.35; }
.import-history-panel { max-width: 1080px; margin: 0 auto; overflow: hidden; padding: 0; }
.import-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.import-history-heading h2 { margin: 1px 0 0; font-size: .98rem; }
.import-history-heading > small { color: var(--muted); font-size: .68rem; }
.import-history-table { min-width: 850px; }
.import-history-table td > strong,.import-history-table td > small { display: block; }
.import-history-table td > small { color: var(--muted); font-size: .64rem; }
.sync-run-status { display: inline-flex; min-width: 76px; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 999px; color: #795000; background: #fff0bc; font-size: .65rem; font-weight: 850; }
.sync-run-status.success { color: #087558; background: #dcf8ed; }
.sync-run-status.failed { color: #a11b2b; background: #ffe3e7; }
.dapodik-import-empty { display: grid; max-width: 900px; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 0 auto; padding: 30px; }
.dapodik-import-empty > span { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 18px; background: color-mix(in srgb,var(--primary) 10%,var(--surface)); font-size: 1.8rem; }
.dapodik-import-empty h2 { margin: 2px 0 5px; font-size: 1.15rem; }
.dapodik-import-empty p { margin: 0; color: var(--muted); font-size: .79rem; }
.sync-progress-overlay,.sync-result-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,13,28,.60); backdrop-filter: blur(4px); }
.sync-progress-overlay[hidden] { display: none; }
.sync-progress-card,.sync-result-card { position: relative; width: min(460px,100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 35px 30px; border: 1px solid rgba(255,255,255,.45); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.30); text-align: center; animation: sync-modal-in .24s ease both; }
.sync-result-card:has(.sync-result-entities) { width: min(590px,100%); }
.sync-progress-card h2,.sync-result-card h2 { margin: 17px 0 5px; font-size: 1.4rem; }
.sync-progress-card p,.sync-result-card p { margin: 0; color: var(--muted); font-size: .79rem; }
.sync-progress-card > div { height: 5px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.sync-progress-card > div i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--secondary)); animation: sync-progress 1.25s ease-in-out infinite; }
.sync-spinner { display: block; width: 62px; height: 62px; margin: 0 auto; border: 5px solid color-mix(in srgb,var(--primary) 14%,var(--line)); border-top-color: var(--primary); border-radius: 50%; animation: sync-spin .8s linear infinite; }
.sync-result-check { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto; border: 2px solid #b7ead5; border-radius: 50%; color: #0d9b70; background: #ebfbf5; font-size: 2rem; font-weight: 900; box-shadow: 0 0 0 10px rgba(13,155,112,.06); }
.result-failed .sync-result-check { border-color: #f4bdc4; color: #c2253a; background: #fff0f2; box-shadow: 0 0 0 10px rgba(194,37,58,.06); }
.sync-result-detail { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 19px; padding: 9px 11px; border-radius: 8px; color: var(--muted); background: var(--surface-soft); font-size: .7rem; }
.sync-result-detail span { color: var(--ink); font-weight: 800; }
.sync-result-entities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: -4px 0 19px; text-align: left; }
.sync-result-entities > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.sync-result-entities span,.sync-result-entities strong,.sync-result-entities small { display: block; }
.sync-result-entities span { overflow: hidden; color: var(--muted); font-size: .6rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sync-result-entities strong { margin: 1px 0; color: var(--ink); font-size: 1rem; }
.sync-result-entities small { color: var(--muted); font-size: .57rem; }
.sync-result-card .btn { min-width: 92px; min-height: 38px; border-radius: 8px; }
.sync-modal-close { position: absolute; top: 10px; right: 10px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: var(--surface-soft); cursor: pointer; }
html[data-theme="dark"] .sync-connection-banner { border-color:#5b4b25;color:#f5d77f;background:#332b18; }
html[data-theme="dark"] .sync-connection-banner.state-success { border-color:#245745;color:#8df0cd;background:#15372e; }
html[data-theme="dark"] .sync-connection-banner.state-failed { border-color:#66303a;color:#fda4af;background:#401d25; }
html[data-theme="dark"] .sync-run-status.success { color:#8df0cd;background:#173d33; }
html[data-theme="dark"] .sync-run-status.failed { color:#fda4af;background:#411b24; }
html[data-theme="dark"] .sync-run-status.running { color:#f8d780;background:#40351c; }
html[data-theme="dark"] .sync-result-check { border-color:#245745;color:#8df0cd;background:#173d33; }
html[data-theme="dark"] .result-failed .sync-result-check { border-color:#66303a;color:#fda4af;background:#401d25; }

@keyframes sync-spin { to{transform:rotate(360deg)} }
@keyframes sync-progress { 0%{transform:translateX(-110%)}50%{transform:translateX(90%)}100%{transform:translateX(250%)} }
@keyframes sync-modal-in { from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none} }

@media (max-width: 760px) {
    .import-form-grid { grid-template-columns: 1fr; }
    .import-form-grid .span-2 { grid-column: auto; }
    .import-form-actions { align-items: stretch; flex-direction: column; }
    .import-safety-note { margin: 0 0 4px; }
    .import-form-actions .btn { width: 100%; }
    .import-flow { grid-template-columns: 1fr; }
    .sync-result-entities { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dapodik-import-empty { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .dapodik-import-empty .btn { width: 100%; }
    .import-history-table { min-width: 0; }
    .import-history-table thead { display: none; }
    .import-history-table,.import-history-table tbody,.import-history-table tr,.import-history-table td { display: block; width: 100%; }
    .import-history-table tbody { padding: 10px; }
    .import-history-table tr { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
    .import-history-table tr:last-child { margin-bottom: 0; }
    .import-history-table td { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line); }
    .import-history-table td:first-child { border-top: 0; }
    .import-history-table td::before { color: var(--muted); font-size: .65rem; font-weight: 850; content: attr(data-label); }
}
@media (max-width: 480px) {
    .import-panel-title { align-items: flex-start; }
    .sync-connection-banner { align-items: flex-start; margin-inline: 12px; }
    .dapodik-import-form { padding: 14px 12px; }
    .import-history-heading { align-items: flex-start; flex-direction: column; }
    .import-history-table td { grid-template-columns: 1fr; gap: 2px; }
    .sync-progress-card,.sync-result-card { padding: 31px 20px 24px; }
    .sync-result-entities { grid-template-columns: 1fr 1fr; }
}

/* Sidebar Data Referensi memuat 12 submenu. */
body .nav-group.open .nav-submenu { max-height: 620px; }

/* Data Kokurikuler v1.7 */
.cocurricular-tabs { display:flex; gap:7px; margin-bottom:16px; overflow-x:auto; padding:5px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 8px 25px rgba(35,59,100,.045); scrollbar-width:thin; }
.cocurricular-tabs a { display:flex; min-height:39px; align-items:center; gap:7px; padding:8px 13px; border-radius:9px; color:var(--muted); font-size:.75rem; font-weight:800; white-space:nowrap; transition:.18s ease; }
.cocurricular-tabs a:hover { color:var(--primary); background:var(--surface-soft); }
.cocurricular-tabs a.active { color:#fff; background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 58%,var(--secondary))); box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 22%,transparent); }
.cocurricular-heading { align-items:center; }
.cocurricular-heading p { max-width:760px; }
.cocurricular-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.cocurricular-summary article { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); animation:cocurricular-rise .35s ease both; }
.cocurricular-summary article:nth-child(2){animation-delay:.05s}.cocurricular-summary article:nth-child(3){animation-delay:.1s}.cocurricular-summary article:nth-child(4){animation-delay:.15s}
.cocurricular-summary article>span { display:grid; width:39px; height:39px; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--primary) 9%,var(--surface-soft)); font-size:1.15rem; }
.cocurricular-summary strong,.cocurricular-summary small { display:block; }.cocurricular-summary strong{font-size:1.25rem}.cocurricular-summary small{color:var(--muted);font-size:.68rem}
.cocurricular-guide { display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; padding:12px 14px; border:1px solid #b6e7d5; border-radius:10px; color:#08684c; background:#e9f9f3; }
.cocurricular-guide.inside { margin:14px; }.cocurricular-guide.warning{border-color:#f1d68b;color:#795000;background:#fff7da}
.cocurricular-guide>span { display:grid; width:28px; height:28px; place-items:center; flex:0 0 auto; border-radius:8px; background:rgba(255,255,255,.7); }
.cocurricular-guide strong,.cocurricular-guide small { display:block; }.cocurricular-guide strong{font-size:.8rem}.cocurricular-guide small{margin-top:2px;font-size:.7rem}
.cocurricular-table thead th { color:#fff; background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 65%,var(--secondary))); text-transform:none; letter-spacing:0; }
.editable-cocurricular-table { min-width:660px; }.editable-cocurricular-table input,.editable-cocurricular-table select{min-height:38px}.editable-cocurricular-table .new-reference-row{background:color-mix(in srgb,var(--secondary) 3%,var(--surface))}
.cocurricular-form-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px; border-top:1px solid var(--line); background:var(--surface-soft); }
.cocurricular-toolbar { padding-block:12px; }.table-export-actions{display:flex; flex-wrap:wrap; gap:6px}.table-export-actions .btn{min-height:37px}
.cocurricular-filter { display:flex; align-items:end; gap:9px; margin-bottom:13px; padding:14px; }.cocurricular-filter label{width:min(340px,100%)}.cocurricular-filter label>span,.source-class-filter label>span{display:block;margin-bottom:5px;color:var(--muted);font-size:.68rem;font-weight:800}.semester-filter label{width:min(480px,100%)}
.activity-table{min-width:980px}.group-table{min-width:1050px}.objective-cell{max-width:480px;margin:0;color:var(--ink);font-size:.76rem;line-height:1.55;white-space:normal}.profile-chip-list{display:flex;max-width:320px;flex-wrap:wrap;gap:4px;margin-bottom:5px}.profile-chip-list span{padding:5px 7px;border-radius:6px;color:#33507b;background:#eaf1fd;font-size:.6rem;font-weight:750}
.row-action-menu { position:relative; display:inline-block; min-width:82px; text-align:left; }.row-action-menu summary{display:inline-flex;min-height:34px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:8px;color:var(--primary);background:var(--surface);font-size:.68rem;font-weight:850;cursor:pointer;list-style:none}.row-action-menu summary::-webkit-details-marker{display:none}.row-action-menu[open] summary{border-color:var(--primary)}
.row-action-menu>div{position:absolute;z-index:30;top:calc(100% + 4px);right:0;width:205px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:0 14px 35px rgba(15,23,42,.18)}.row-action-menu a,.row-action-menu button{display:flex;width:100%;min-height:34px;align-items:center;padding:7px 9px;border:0;border-radius:6px;color:var(--ink);background:transparent;font:inherit;font-size:.68rem;font-weight:750;text-align:left;cursor:pointer}.row-action-menu a:hover,.row-action-menu button:hover{color:var(--primary);background:var(--surface-soft)}.row-action-menu form:last-child button{color:var(--danger)}
.phase-map-badge,.phase-pill{display:inline-flex;align-items:center;border-radius:999px;font-weight:800}.phase-map-badge{padding:9px 12px;color:#35527b;background:var(--surface-soft);font-size:.68rem}.phase-pill{padding:6px 9px;font-size:.65rem}.phase-a{color:#0d5f8b;background:#ddf3ff}.phase-b{color:#6c41a5;background:#eee5ff}.phase-c{color:#087558;background:#dcf8ed}.phase-d{color:#6d3fb0;background:#efe7ff}
.cocurricular-form textarea{resize:vertical}.cocurricular-context-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;margin-bottom:13px;padding:17px}.cocurricular-context-card>span{display:grid;width:47px;height:47px;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--secondary) 12%,var(--surface-soft));font-size:1.35rem}.cocurricular-context-card strong,.cocurricular-context-card small{display:block}.cocurricular-context-card small{margin-top:2px;color:var(--muted);font-size:.68rem}.cocurricular-context-card p{margin:8px 0 0;color:var(--muted);font-size:.74rem;line-height:1.5}
.profile-target-panel,.activity-attach-panel{margin-bottom:13px;padding:16px}.profile-target-panel>header,.activity-attach-panel>header,.relation-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.profile-target-panel>header>div,.activity-attach-panel>header>div,.relation-panel>header>div{display:flex;align-items:center;gap:10px}.profile-target-panel h2,.activity-attach-panel h2,.relation-panel h2{margin:0;font-size:.95rem}.profile-target-panel header p,.activity-attach-panel header p,.relation-panel header p{margin:2px 0 0;color:var(--muted);font-size:.68rem}
.profile-dimension-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-dimension-grid fieldset{min-width:0;margin:0;padding:11px;border:1px solid var(--line);border-radius:10px}.profile-dimension-grid legend{max-width:95%;padding:0 6px;color:var(--ink);font-size:.69rem;font-weight:850}.target-check{display:flex;align-items:center;gap:8px;padding:7px;border-radius:7px;cursor:pointer}.target-check:hover{background:var(--surface-soft)}.target-check.assigned{opacity:.64}.target-check input{width:16px;height:16px;flex:0 0 auto}.target-check strong,.target-check small{display:block}.target-check strong{font-size:.7rem}.target-check small{color:var(--muted);font-size:.6rem}
.cocurricular-panel-heading{margin:0;padding:15px;border-bottom:1px solid var(--line)}.relation-count{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;color:#315fa5;background:#e9f1ff}.relation-count.teal{color:#087558;background:#dcf8ed}.relation-count strong{font-size:.9rem}.relation-count span{font-size:.61rem;font-weight:750}
.cocurricular-relation-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:13px}.relation-panel{min-width:0;overflow:hidden;padding:15px}.source-class-filter{display:flex;align-items:end;gap:8px;margin-bottom:11px}.source-class-filter label{flex:1}.relation-empty{padding:28px 18px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);background:var(--surface-soft);font-size:.73rem;text-align:center}.student-picker{overflow:hidden;border:1px solid var(--line);border-radius:10px}.student-picker>.picker-all{padding:9px 11px;background:var(--surface-soft);font-size:.68rem;font-weight:850}.student-picker>div{max-height:390px;overflow-y:auto;padding:5px}.student-picker label,.activity-picker label{display:flex;align-items:center;gap:9px;padding:8px;border-radius:7px;cursor:pointer}.student-picker label:hover,.activity-picker label:hover{background:var(--surface-soft)}.student-picker input,.activity-picker input{width:16px;height:16px;flex:0 0 auto}.student-picker strong,.student-picker small,.activity-picker strong,.activity-picker small{display:block}.student-picker strong,.activity-picker strong{font-size:.7rem}.student-picker small,.activity-picker small{color:var(--muted);font-size:.61rem}.relation-panel footer{display:flex;flex-wrap:wrap;gap:7px;padding-top:11px}.relation-panel .danger-footer{justify-content:flex-end;border-top:1px solid var(--line)}
.member-list{display:grid;gap:5px;max-height:470px;overflow-y:auto}.member-list article{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px}.member-list article>span{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface-soft));font-size:.68rem;font-weight:900}.member-list strong,.member-list small{display:block}.member-list strong{font-size:.7rem}.member-list small{color:var(--muted);font-size:.6rem}.icon-danger{display:grid;width:29px;height:29px;place-items:center;border:0;border-radius:8px;color:#b42335;background:#fff0f2;font-size:1rem;cursor:pointer}.icon-danger:hover{color:#fff;background:var(--danger)}
.activity-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.activity-picker label{border:1px solid var(--line)}
.cocurricular-assessment-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.cocurricular-assessment-card{display:grid;gap:13px;padding:16px}.cocurricular-assessment-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}.cocurricular-assessment-card header>div{display:flex;align-items:center;gap:10px}.cocurricular-assessment-card h2,.cocurricular-assessment-summary h2{margin:0;font-size:.94rem}.cocurricular-assessment-card p{margin:2px 0 0;color:var(--muted);font-size:.66rem}.assessment-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.assessment-card-stats span{padding:8px;border-radius:8px;color:var(--muted);background:var(--surface-soft);font-size:.6rem;text-align:center}.assessment-card-stats strong{display:block;color:var(--ink);font-size:.9rem}.assessment-progress{height:7px;overflow:hidden;border-radius:999px;background:var(--surface-soft)}.assessment-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .3s ease}.cocurricular-assessment-summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:18px;align-items:center;margin-bottom:13px;padding:17px}.cocurricular-assessment-summary p{margin:7px 0 0;color:var(--muted);font-size:.72rem;line-height:1.5}.cocurricular-assessment-summary aside{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.cocurricular-assessment-summary aside small,.cocurricular-assessment-summary aside strong{display:block}.cocurricular-assessment-summary aside small{margin-bottom:4px;color:var(--muted);font-size:.61rem;font-weight:800;text-transform:uppercase}.cocurricular-assessment-summary aside strong{font-size:.7rem;line-height:1.45}.cocurricular-assessment-table{min-width:1060px}.cocurricular-assessment-table th:nth-child(2){width:230px}.cocurricular-assessment-table th:nth-child(3){width:220px}.cocurricular-assessment-table th:nth-child(5){width:100px}.cocurricular-assessment-table select{min-width:195px}.cocurricular-assessment-table textarea{width:100%;min-width:360px;resize:vertical}.assessment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 15px;border-top:1px solid var(--line);background:var(--surface-soft)}.assessment-form-footer small{max-width:700px;color:var(--muted);font-size:.66rem;line-height:1.5}
html[data-theme="dark"] .cocurricular-guide{border-color:#245745;color:#8df0cd;background:#15372e}html[data-theme="dark"] .cocurricular-guide.warning{border-color:#5b4b25;color:#f5d77f;background:#332b18}html[data-theme="dark"] .profile-chip-list span{color:#b9d2ff;background:#213553}html[data-theme="dark"] .phase-map-badge{color:#c8d3e2}html[data-theme="dark"] .phase-a{color:#a9ddfa;background:#173346}html[data-theme="dark"] .phase-b,html[data-theme="dark"] .phase-d{color:#d2baff;background:#35264d}html[data-theme="dark"] .phase-c,html[data-theme="dark"] .relation-count.teal{color:#8df0cd;background:#173d33}html[data-theme="dark"] .relation-count{color:#a9c8ff;background:#213553}html[data-theme="dark"] .icon-danger{color:#fda4af;background:#401d25}
@keyframes cocurricular-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-width:980px){.cocurricular-relation-layout,.cocurricular-assessment-cards{grid-template-columns:1fr}.profile-dimension-grid{grid-template-columns:1fr}.cocurricular-assessment-summary{grid-template-columns:1fr}}
@media (max-width:760px){.cocurricular-heading{align-items:flex-start}.cocurricular-summary{grid-template-columns:1fr}.cocurricular-filter{align-items:stretch;flex-direction:column}.cocurricular-filter label,.cocurricular-filter .btn{width:100%}.cocurricular-toolbar{align-items:stretch}.table-export-actions .btn{flex:1}.responsive-cocurricular-table{min-width:0}.responsive-cocurricular-table thead{display:none}.responsive-cocurricular-table,.responsive-cocurricular-table tbody,.responsive-cocurricular-table tr,.responsive-cocurricular-table td{display:block;width:100%}.responsive-cocurricular-table tbody{padding:9px}.responsive-cocurricular-table tr{margin-bottom:9px;overflow:visible;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.responsive-cocurricular-table td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px;min-height:39px;align-items:start;padding:9px 11px}.responsive-cocurricular-table td::before{color:var(--muted);font-size:.63rem;font-weight:850;content:attr(data-label)}.responsive-cocurricular-table td[colspan]{display:block}.responsive-cocurricular-table td[colspan]::before{display:none}.objective-cell,.profile-chip-list{max-width:none}.row-action-menu>div{right:auto;left:0}.profile-target-panel>header,.activity-attach-panel>header,.relation-panel>header{align-items:flex-start;flex-direction:column}.profile-target-panel>header .btn,.activity-attach-panel>header .btn{width:100%}.activity-picker{grid-template-columns:1fr}.cocurricular-context-card{grid-template-columns:1fr}.phase-map-badge{white-space:normal}.cocurricular-form-footer{flex-direction:column-reverse}.cocurricular-form-footer .btn{width:100%}.cocurricular-assessment-table select,.cocurricular-assessment-table textarea{min-width:0}.assessment-form-footer{align-items:stretch;flex-direction:column}.assessment-form-footer .btn{width:100%}}
@media (max-width:480px){.cocurricular-tabs a{padding-inline:10px}.responsive-cocurricular-table td{grid-template-columns:1fr;gap:3px}.table-export-actions{display:grid;grid-template-columns:1fr 1fr}.table-export-actions .btn:last-child{grid-column:1/-1}.source-class-filter{align-items:stretch;flex-direction:column}.source-class-filter .btn{width:100%}.member-list article{grid-template-columns:28px minmax(0,1fr) auto}.relation-panel{padding:12px}}
@media (prefers-reduced-motion:reduce){.cocurricular-summary article{animation:none}}

/* Status Penilaian dan Perkembangan Nilai v1.8 */
.assessment-tabs{display:flex;gap:7px;margin-bottom:16px;overflow-x:auto;padding:5px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 8px 25px rgba(35,59,100,.045);scrollbar-width:thin}.assessment-tabs a{display:flex;min-height:39px;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;color:var(--muted);font-size:.75rem;font-weight:800;white-space:nowrap;transition:.18s ease}.assessment-tabs a:hover{color:var(--primary);background:var(--surface-soft)}.assessment-tabs a.active{color:#fff;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,var(--secondary)));box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 22%,transparent)}
.assessment-heading{align-items:center}.assessment-heading p{max-width:820px}.assessment-formula{display:inline-flex;min-height:36px;align-items:center;padding:8px 11px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:var(--surface);font-size:.65rem;font-weight:800;white-space:nowrap}
.assessment-filter,.progress-filter,.ledger-filter{display:grid;align-items:end;gap:10px;margin-bottom:14px;padding:14px}.assessment-filter{grid-template-columns:minmax(190px,1fr) minmax(160px,.75fr) minmax(220px,1.15fr) auto}.progress-filter{grid-template-columns:repeat(4,minmax(150px,1fr)) auto}.ledger-filter{grid-template-columns:minmax(230px,1fr) minmax(190px,.8fr) auto}.assessment-filter label>span,.progress-filter label>span,.ledger-filter label>span{display:block;margin-bottom:5px;color:var(--muted);font-size:.67rem;font-weight:850}.assessment-filter select,.progress-filter select,.ledger-filter select{min-height:40px}.assessment-filter .btn,.progress-filter .btn,.ledger-filter .btn{min-height:40px}
.assessment-guide{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px;padding:12px 14px;border:1px solid #b6e7d5;border-radius:10px;color:#08684c;background:#e9f9f3}.assessment-guide.warning{border-color:#f1d68b;color:#795000;background:#fff7da}.assessment-guide>span{display:grid;width:27px;height:27px;place-items:center;flex:0 0 auto;border-radius:8px;background:rgba(255,255,255,.7);font-weight:900}.assessment-guide strong,.assessment-guide small{display:block}.assessment-guide strong{font-size:.77rem}.assessment-guide small{margin-top:2px;font-size:.68rem;line-height:1.45}
.assessment-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.assessment-metrics.compact-four{grid-template-columns:repeat(4,minmax(0,1fr))}.assessment-metrics article{position:relative;display:flex;min-width:0;align-items:center;gap:11px;overflow:hidden;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);animation:assessment-rise .35s ease both}.assessment-metrics article:nth-child(2){animation-delay:.04s}.assessment-metrics article:nth-child(3){animation-delay:.08s}.assessment-metrics article:nth-child(4){animation-delay:.12s}.assessment-metrics article:nth-child(5){animation-delay:.16s}.assessment-metrics article>span{display:grid;width:40px;height:40px;place-items:center;flex:0 0 auto;border-radius:12px;font-size:1.08rem;font-weight:900}.assessment-metrics small,.assessment-metrics strong,.assessment-metrics em{display:block}.assessment-metrics small{overflow:hidden;color:var(--muted);font-size:.62rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.assessment-metrics strong{margin:1px 0;font-size:1.35rem}.assessment-metrics em{overflow:hidden;color:var(--muted);font-size:.57rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.assessment-metrics .metric-indigo>span{color:#4c45ad;background:#eeeefe}.assessment-metrics .metric-green>span{color:#087558;background:#dcf8ed}.assessment-metrics .metric-amber>span{color:#986600;background:#fff0c7}.assessment-metrics .metric-rose>span{color:#b4233b;background:#ffe7eb}.assessment-metrics .metric-slate>span{color:#506178;background:#e9eef5}
.assessment-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:14px}.assessment-group-card{min-width:0;overflow:hidden}.assessment-group-card>header{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.assessment-group-card>header>span{display:grid;width:31px;height:31px;place-items:center;border-radius:9px;background:var(--surface)}.assessment-group-card header strong,.assessment-group-card header small{display:block}.assessment-group-card header strong{font-size:.76rem}.assessment-group-card header small{color:var(--muted);font-size:.6rem}.assessment-group-card>div{display:grid;gap:10px;max-height:285px;overflow-y:auto;padding:12px}.mini-progress-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}.mini-progress-row strong,.mini-progress-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-progress-row strong{font-size:.68rem}.mini-progress-row small{color:var(--muted);font-size:.58rem}.mini-progress-row>b{align-self:center;color:var(--ink);font-size:.67rem}.mini-progress-row>span{grid-column:1/-1;height:5px;overflow:hidden;border-radius:999px;background:var(--surface-soft)}.mini-progress-row>span>i,.table-progress span i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--secondary),var(--primary))}
.assessment-table-panel{margin-bottom:14px}.assessment-table-panel .table-toolbar>div:first-child strong,.assessment-table-panel .table-toolbar>div:first-child small{display:block}.assessment-table-panel .table-toolbar>div:first-child strong{font-size:.8rem}.assessment-table-panel .table-toolbar>div:first-child small{margin-top:2px;color:var(--muted);font-size:.64rem}.assessment-status-table{min-width:1080px}.assessment-status-table thead th,.responsive-assessment-table thead th,.grade-ledger-table thead th{color:#fff;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 62%,var(--secondary)));text-transform:none;letter-spacing:0}.table-progress{display:flex;min-width:130px;align-items:center;gap:8px}.table-progress>span{width:85px;height:6px;overflow:hidden;border-radius:999px;background:var(--surface-soft)}.table-progress strong{font-size:.67rem}.assessment-badge,.workflow-badge,.component-code,.score-difference{display:inline-flex;align-items:center;border-radius:999px;font-size:.61rem;font-weight:850;white-space:nowrap}.assessment-badge,.workflow-badge{padding:6px 8px}.assessment-badge.state-complete{color:#087558;background:#dcf8ed}.assessment-badge.state-in_progress{color:#8a5c00;background:#fff0c7}.assessment-badge.state-not_started{color:#ad263b;background:#ffe7eb}.assessment-badge.state-needs_configuration{color:#536274;background:#e9eef5}.workflow-badge{color:#455b77;background:#eaf0f7}.workflow-submitted,.workflow-review{color:#155b97;background:#e1f0ff}.workflow-revision{color:#8a5c00;background:#fff0c7}.workflow-approved,.workflow-published{color:#087558;background:#dcf8ed}.workflow-locked{color:#6b35a2;background:#eee5ff}.component-code{padding:5px 7px;color:#315fa5;background:#e9f1ff}.component-code.type-tp{color:#4d3c9e;background:#eeeafe}.component-code.type-asts{color:#986600;background:#fff0c7}.component-code.type-asas{color:#087558;background:#dcf8ed}
.configuration-panel{margin-bottom:14px;overflow:hidden}.configuration-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.configuration-panel>header>div{display:flex;align-items:center;gap:9px}.configuration-panel>header>div>span{display:grid;width:31px;height:31px;place-items:center;border-radius:9px;background:var(--surface)}.configuration-panel header strong,.configuration-panel header small{display:block}.configuration-panel header strong{font-size:.78rem}.configuration-panel header small{color:var(--muted);font-size:.62rem}.configuration-panel header>b{display:grid;min-width:31px;height:31px;place-items:center;border-radius:9px;color:#8a5c00;background:#fff0c7;font-size:.73rem}.configuration-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px}.configuration-list article{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid var(--line);border-radius:8px}.configuration-list article>span{display:grid;width:22px;height:22px;place-items:center;flex:0 0 auto;border-radius:7px;font-size:.62rem;font-weight:900}.configuration-list article.warning>span{color:#8a5c00;background:#fff0c7}.configuration-list article.danger>span{color:#ad263b;background:#ffe7eb}.configuration-list strong,.configuration-list small{display:block}.configuration-list strong{font-size:.67rem}.configuration-list small{margin-top:2px;color:var(--muted);font-size:.6rem}
.student-progress-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px;padding:16px 18px;background:linear-gradient(105deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))}.student-progress-identity{display:flex;min-width:0;align-items:center;gap:12px}.student-progress-identity>span{display:grid;width:48px;height:48px;place-items:center;flex:0 0 auto;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:1.1rem;font-weight:900}.student-progress-identity small,.student-progress-identity h2,.student-progress-identity p{display:block;margin:0}.student-progress-identity small{color:var(--muted);font-size:.61rem;font-weight:800}.student-progress-identity h2{margin:2px 0;font-size:1rem}.student-progress-identity p{color:var(--muted);font-size:.66rem}.student-final-score{display:grid;grid-template-columns:auto auto;align-items:center;gap:1px 10px;text-align:right}.student-final-score small{grid-column:1/-1;color:var(--muted);font-size:.6rem;font-weight:800}.student-final-score strong{grid-row:2/4;font-size:2rem}.student-final-score span{color:var(--muted);font-size:.61rem}.progress-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.75fr);gap:12px;margin-bottom:14px}.grade-chart-panel,.component-summary-panel{min-width:0;overflow:hidden}.grade-chart-panel>header,.component-summary-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)}.grade-chart-panel>header>div{display:flex;align-items:center;gap:9px}.grade-chart-panel>header>div>span{display:grid;width:31px;height:31px;place-items:center;border-radius:9px;color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--surface-soft));font-weight:900}.grade-chart-panel header strong,.grade-chart-panel header small,.component-summary-panel header strong,.component-summary-panel header small{display:block}.grade-chart-panel header strong,.component-summary-panel header strong{font-size:.78rem}.grade-chart-panel header small,.component-summary-panel header small{color:var(--muted);font-size:.61rem}.chart-legend{display:flex!important;gap:12px!important;color:var(--muted);font-size:.6rem}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend span::before{display:block;width:18px;height:3px;border-radius:2px;background:var(--primary);content:""}.chart-legend .class-line::before{height:2px;background:repeating-linear-gradient(90deg,var(--secondary) 0 5px,transparent 5px 8px)}.grade-chart-wrap{width:100%;overflow-x:auto;padding:9px 10px 3px}.grade-chart-wrap canvas{display:block;max-width:none}.component-summary-panel>div{max-height:332px;overflow-y:auto;padding:7px}.component-summary-panel>div>article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}.component-summary-panel>div>article:last-child{border-bottom:0}.component-summary-panel article strong,.component-summary-panel article small{display:block}.component-summary-panel article strong{font-size:.65rem}.component-summary-panel article small{color:var(--muted);font-size:.57rem}.component-summary-panel article>b{min-width:35px;text-align:right;font-size:.83rem}.component-summary-panel article>b.empty{color:var(--muted)}.score-difference{padding:5px 7px}.score-difference.positive{color:#087558;background:#dcf8ed}.score-difference.negative{color:#ad263b;background:#ffe7eb}.score-difference.neutral{color:var(--muted);background:var(--surface-soft)}
.ledger-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;margin-bottom:12px;padding:0;background:var(--line)}.ledger-context>div{display:flex;align-items:center;gap:10px;padding:13px 15px;background:var(--surface)}.ledger-context>div>span{display:grid;width:35px;height:35px;place-items:center;border-radius:10px;background:var(--surface-soft)}.ledger-context small,.ledger-context strong,.ledger-context em{display:block}.ledger-context small{color:var(--muted);font-size:.59rem;font-weight:800}.ledger-context strong{font-size:.83rem}.ledger-context em{color:var(--muted);font-size:.58rem;font-style:normal}.ledger-panel{margin-bottom:14px}.grade-ledger-table{min-width:max(920px,100%)}.grade-ledger-table th{text-align:center}.grade-ledger-table th:nth-child(2),.grade-ledger-table td:nth-child(2){position:sticky;z-index:2;left:0;min-width:180px;text-align:left;background:var(--surface)}.grade-ledger-table thead th:nth-child(2){z-index:3;background:var(--primary)}.grade-ledger-table th>small{display:block;margin-top:2px;color:rgba(255,255,255,.72);font-size:.53rem}.ledger-student strong,.ledger-student small{display:block}.ledger-student small{color:var(--muted);font-size:.58rem}.ledger-grade{position:relative;min-width:70px;text-align:center}.ledger-grade strong{display:inline;font-size:.8rem}.ledger-grade small{display:block;color:var(--muted);font-size:.52rem}.grade-state{display:inline-block;width:7px;height:7px;margin-left:4px;border-radius:50%;vertical-align:middle}.grade-state.complete{background:#16a373;box-shadow:0 0 0 3px rgba(22,163,115,.1)}.grade-state.partial{background:#e7a614;box-shadow:0 0 0 3px rgba(231,166,20,.1)}.grade-state.empty{background:#dc5064;box-shadow:0 0 0 3px rgba(220,80,100,.1)}.rank-pill{display:inline-grid;min-width:29px;height:29px;place-items:center;border-radius:9px;color:#715000;background:#fff0c7;font-weight:900}.grade-ledger-table tfoot th{padding:11px;border-top:2px solid var(--line);color:var(--ink);background:var(--surface-soft);font-size:.66rem;text-transform:none}
html[data-theme="dark"] .assessment-guide{border-color:#245745;color:#8df0cd;background:#15372e}html[data-theme="dark"] .assessment-guide.warning{border-color:#5b4b25;color:#f5d77f;background:#332b18}html[data-theme="dark"] .assessment-metrics .metric-indigo>span,html[data-theme="dark"] .workflow-badge,html[data-theme="dark"] .component-code{color:#b9d2ff;background:#213553}html[data-theme="dark"] .assessment-metrics .metric-green>span,html[data-theme="dark"] .assessment-badge.state-complete,html[data-theme="dark"] .workflow-approved,html[data-theme="dark"] .workflow-published,html[data-theme="dark"] .component-code.type-asas,html[data-theme="dark"] .score-difference.positive{color:#8df0cd;background:#173d33}html[data-theme="dark"] .assessment-metrics .metric-amber>span,html[data-theme="dark"] .assessment-badge.state-in_progress,html[data-theme="dark"] .workflow-revision,html[data-theme="dark"] .component-code.type-asts,html[data-theme="dark"] .rank-pill,html[data-theme="dark"] .configuration-panel header>b,html[data-theme="dark"] .configuration-list article.warning>span{color:#f5d77f;background:#40351c}html[data-theme="dark"] .assessment-metrics .metric-rose>span,html[data-theme="dark"] .assessment-badge.state-not_started,html[data-theme="dark"] .score-difference.negative,html[data-theme="dark"] .configuration-list article.danger>span{color:#fda4af;background:#401d25}html[data-theme="dark"] .assessment-metrics .metric-slate>span,html[data-theme="dark"] .assessment-badge.state-needs_configuration{color:#c6d0dc;background:#273549}html[data-theme="dark"] .component-code.type-tp,html[data-theme="dark"] .workflow-locked{color:#d2baff;background:#35264d}html[data-theme="dark"] .workflow-submitted,html[data-theme="dark"] .workflow-review{color:#a9c8ff;background:#203956}
@keyframes assessment-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.assessment-filter{grid-template-columns:1fr 1fr}.assessment-filter .btn{width:100%}.progress-filter{grid-template-columns:1fr 1fr}.progress-filter .btn{width:100%}.assessment-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.assessment-metrics.compact-four{grid-template-columns:repeat(2,minmax(0,1fr))}.assessment-group-grid{grid-template-columns:1fr 1fr}.assessment-group-card:last-child{grid-column:1/-1}.progress-layout{grid-template-columns:1fr}.component-summary-panel>div{max-height:none}}
@media(max-width:760px){.assessment-heading{align-items:flex-start}.assessment-filter,.progress-filter,.ledger-filter{grid-template-columns:1fr}.assessment-filter .btn,.progress-filter .btn,.ledger-filter .btn{width:100%}.assessment-metrics,.assessment-metrics.compact-four{grid-template-columns:1fr 1fr}.assessment-group-grid{grid-template-columns:1fr}.assessment-group-card:last-child{grid-column:auto}.configuration-list{grid-template-columns:1fr}.responsive-assessment-table{min-width:0}.responsive-assessment-table thead{display:none}.responsive-assessment-table,.responsive-assessment-table tbody,.responsive-assessment-table tr,.responsive-assessment-table td{display:block;width:100%}.responsive-assessment-table tbody{padding:9px}.responsive-assessment-table tr{margin-bottom:9px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.responsive-assessment-table td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px;min-height:39px;align-items:start;padding:9px 11px}.responsive-assessment-table td::before{color:var(--muted);font-size:.63rem;font-weight:850;content:attr(data-label)}.responsive-assessment-table td[colspan]{display:block}.responsive-assessment-table td[colspan]::before{display:none}.student-progress-hero{align-items:flex-start;flex-direction:column}.student-final-score{width:100%;grid-template-columns:1fr auto;text-align:left}.student-final-score strong{grid-row:2/4}.ledger-context{grid-template-columns:1fr}.chart-legend{align-items:flex-start;flex-direction:column;gap:3px!important}}
@media(max-width:480px){.assessment-tabs a{padding-inline:10px}.assessment-formula{white-space:normal}.assessment-metrics,.assessment-metrics.compact-four{grid-template-columns:1fr}.responsive-assessment-table td{grid-template-columns:1fr;gap:3px}.student-progress-identity{align-items:flex-start}.student-progress-identity>span{width:40px;height:40px;border-radius:12px}.assessment-table-panel .table-export-actions{display:grid;grid-template-columns:1fr 1fr}.assessment-table-panel .table-export-actions .btn:last-child{grid-column:1/-1}.grade-chart-panel>header{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.assessment-metrics article{animation:none}}

/* Transkrip Nilai Ijazah v1.9 */
.transcript-tabs{display:flex;gap:7px;margin-bottom:16px;overflow-x:auto;padding:5px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 8px 25px rgba(35,59,100,.045);scrollbar-width:thin}.transcript-tabs a{display:flex;min-height:39px;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:.72rem;font-weight:800;white-space:nowrap;transition:.18s ease}.transcript-tabs a:hover{color:var(--primary);background:var(--surface-soft)}.transcript-tabs a.active{color:#fff;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,var(--secondary)));box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 22%,transparent)}.transcript-tabs a>span{font-size:.85rem}.transcript-heading{align-items:center}.transcript-heading p{max-width:850px}
.transcript-filter{display:grid;grid-template-columns:minmax(250px,1fr) minmax(210px,.8fr) auto;align-items:end;gap:10px;margin-bottom:14px;padding:14px}.transcript-filter.with-subject{grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) minmax(230px,1fr) auto}.transcript-filter label>span,.transcript-semester-picker label>span,.transcript-import-card label>span{display:block;margin-bottom:5px;color:var(--muted);font-size:.67rem;font-weight:850}.transcript-filter select,.transcript-filter .btn,.transcript-semester-picker select,.transcript-semester-picker .btn{min-height:40px}.transcript-semester-picker{display:flex;align-items:end;gap:10px;margin-bottom:14px;padding:14px}.transcript-semester-picker label{width:min(520px,100%)}
.transcript-workflow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:9px;margin-bottom:14px}.transcript-workflow article{display:flex;min-height:75px;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);animation:transcript-rise .35s ease both}.transcript-workflow article:nth-of-type(2){animation-delay:.06s}.transcript-workflow article:nth-of-type(3){animation-delay:.12s}.transcript-workflow article>b{display:grid;width:34px;height:34px;place-items:center;flex:0 0 auto;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary))}.transcript-workflow strong,.transcript-workflow small{display:block}.transcript-workflow strong{font-size:.74rem}.transcript-workflow small{margin-top:2px;color:var(--muted);font-size:.61rem;line-height:1.4}.transcript-workflow>i{color:var(--muted);font-style:normal}
.transcript-import-card{overflow:hidden;margin-bottom:14px;padding:0}.transcript-import-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.transcript-import-card>header>div{display:flex;align-items:center;gap:10px}.transcript-import-card>header>div>span{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:var(--surface);font-size:1.1rem}.transcript-import-card h2,.transcript-import-card p{margin:0}.transcript-import-card h2{font-size:.88rem}.transcript-import-card p{margin-top:2px;color:var(--muted);font-size:.64rem}.transcript-import-card>form{display:grid;grid-template-columns:minmax(280px,1fr) auto;align-items:end;gap:12px;padding:17px}.transcript-import-card label small{display:block;margin-top:5px;color:var(--muted);font-size:.6rem}.transcript-import-card input[type=file]{min-height:43px}.transcript-import-card .btn{min-height:43px}.transcript-table-panel,.transcript-history{margin-bottom:14px}.transcript-table-panel .table-toolbar>div>strong,.transcript-table-panel .table-toolbar>div>small,.transcript-history .table-toolbar strong,.transcript-history .table-toolbar small{display:block}.transcript-table-panel .table-toolbar>div>strong,.transcript-history .table-toolbar strong{font-size:.8rem}.transcript-table-panel .table-toolbar>div>small,.transcript-history .table-toolbar small{margin-top:2px;color:var(--muted);font-size:.63rem}.responsive-transcript-table thead th,.transcript-mapping-table thead th,.transcript-document-table thead th{color:#fff;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 62%,var(--secondary)));text-transform:none;letter-spacing:0}.transcript-state{display:inline-flex;align-items:center;padding:5px 7px;border-radius:999px;font-size:.59rem;font-weight:850;white-space:nowrap}.transcript-state.complete,.transcript-state.visible{color:#087558;background:#dcf8ed}.transcript-state.missing{color:#9a6600;background:#fff0c7}.transcript-state.hidden{color:#59677a;background:#e9eef5}
.transcript-settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px}.transcript-settings-card{padding:0}.transcript-settings-card>header{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.transcript-settings-card>header>span{display:grid;width:32px;height:32px;place-items:center;flex:0 0 auto;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:.72rem;font-weight:900}.transcript-settings-card h2,.transcript-settings-card p{margin:0}.transcript-settings-card h2{font-size:.84rem}.transcript-settings-card p{margin-top:2px;color:var(--muted);font-size:.62rem}.transcript-settings-card>.form-grid,.setting-choice-grid{padding:15px}.setting-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.setting-choice-grid label{position:relative;cursor:pointer}.setting-choice-grid input{position:absolute;opacity:0}.setting-choice-grid label>span{display:block;height:100%;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);transition:.17s ease}.setting-choice-grid input:checked+span{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent)}.setting-choice-grid b,.setting-choice-grid small{display:block}.setting-choice-grid b{font-size:.72rem}.setting-choice-grid small{margin-top:3px;color:var(--muted);font-size:.59rem}.toggle-setting{display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);cursor:pointer}.toggle-setting input{width:18px;height:18px;flex:0 0 auto}.toggle-setting b,.toggle-setting small{display:block}.toggle-setting b{font-size:.71rem}.toggle-setting small{margin-top:2px;color:var(--muted);font-size:.6rem}.print-setting-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.transcript-save-bar{position:sticky;z-index:4;bottom:10px;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 12px 35px rgba(15,23,42,.15);backdrop-filter:blur(12px)}.transcript-save-bar strong,.transcript-save-bar small{display:block}.transcript-save-bar strong{font-size:.76rem}.transcript-save-bar small{margin-top:2px;color:var(--muted);font-size:.61rem}
.transcript-mapping-panel{margin-bottom:14px}.transcript-mapping-table{min-width:980px}.transcript-mapping-table input,.transcript-mapping-table select{min-height:38px}.transcript-mapping-table .sort-input{width:82px}.transcript-table-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px 15px;border-top:1px solid var(--line);background:var(--surface-soft)}.transcript-table-footer>span{margin-right:auto;color:var(--muted);font-size:.63rem}.transcript-context-strip{display:grid;grid-template-columns:1fr 1.4fr .6fr;gap:1px;overflow:hidden;margin-bottom:13px;border:1px solid var(--line);border-radius:11px;background:var(--line)}.transcript-context-strip>div{display:grid;grid-template-columns:auto 1fr;gap:0 9px;padding:11px 13px;background:var(--surface)}.transcript-context-strip>div>span{grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:var(--surface-soft)}.transcript-context-strip small,.transcript-context-strip strong{display:block}.transcript-context-strip small{color:var(--muted);font-size:.58rem}.transcript-context-strip strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.transcript-grade-panel{margin-bottom:14px}.transcript-grade-table{min-width:720px}.grade-input{max-width:130px;min-height:39px;text-align:center;font-weight:850}
.transcript-print-settings{overflow:hidden;margin-bottom:13px;padding:0}.transcript-print-settings>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.transcript-print-settings>header>div{display:flex;align-items:center;gap:9px}.transcript-print-settings>header>div>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:var(--surface)}.transcript-print-settings h2,.transcript-print-settings p{margin:0}.transcript-print-settings h2{font-size:.82rem}.transcript-print-settings p{margin-top:2px;color:var(--muted);font-size:.61rem}.transcript-print-settings>div{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}.transcript-print-settings article{padding:11px;background:var(--surface)}.transcript-print-settings small,.transcript-print-settings strong{display:block}.transcript-print-settings small{color:var(--muted);font-size:.56rem}.transcript-print-settings strong{margin-top:2px;font-size:.68rem}.transcript-print-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}.transcript-print-actions form{margin:0}.transcript-document-panel{margin-bottom:14px}.transcript-document-table{min-width:1400px}.transcript-file-link{color:var(--primary);font-size:.68rem;font-weight:800}.transcript-document-table .row-action-menu form{margin:0}.transcript-empty{display:flex;align-items:center;gap:14px;padding:22px}.transcript-empty>span{display:grid;width:50px;height:50px;place-items:center;flex:0 0 auto;border-radius:15px;color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface-soft));font-size:1.3rem}.transcript-empty h2,.transcript-empty p{margin:0}.transcript-empty h2{font-size:.9rem}.transcript-empty p{margin-top:3px;color:var(--muted);font-size:.68rem}.transcript-empty .btn{margin-left:auto}
html[data-theme="dark"] .transcript-state.complete,html[data-theme="dark"] .transcript-state.visible{color:#8df0cd;background:#173d33}html[data-theme="dark"] .transcript-state.missing{color:#f5d77f;background:#40351c}html[data-theme="dark"] .transcript-state.hidden{color:#c6d0dc;background:#273549}
@keyframes transcript-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.transcript-filter.with-subject{grid-template-columns:1fr 1fr}.transcript-filter.with-subject .btn{width:100%}.transcript-settings-layout{grid-template-columns:1fr}.transcript-print-settings>div{grid-template-columns:repeat(3,1fr)}.print-setting-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:760px){.transcript-filter,.transcript-filter.with-subject{grid-template-columns:1fr}.transcript-filter .btn{width:100%}.transcript-semester-picker{align-items:stretch;flex-direction:column}.transcript-semester-picker .btn{width:100%}.transcript-workflow{grid-template-columns:1fr}.transcript-workflow>i{display:none}.transcript-import-card>header{align-items:stretch;flex-direction:column}.transcript-import-card>header>.btn{width:100%}.transcript-import-card>form{grid-template-columns:1fr}.transcript-import-card>form>.btn{width:100%}.responsive-transcript-table{min-width:0}.responsive-transcript-table thead{display:none}.responsive-transcript-table,.responsive-transcript-table tbody,.responsive-transcript-table tr,.responsive-transcript-table td{display:block;width:100%}.responsive-transcript-table tbody{padding:9px}.responsive-transcript-table tr{margin-bottom:9px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.responsive-transcript-table td{display:grid;grid-template-columns:125px minmax(0,1fr);gap:8px;min-height:39px;align-items:center;padding:9px 11px}.responsive-transcript-table td::before{color:var(--muted);font-size:.63rem;font-weight:850;content:attr(data-label)}.responsive-transcript-table td[colspan]{display:block}.responsive-transcript-table td[colspan]::before{display:none}.transcript-context-strip{grid-template-columns:1fr}.transcript-save-bar{align-items:stretch;flex-direction:column}.transcript-save-bar .btn{width:100%}.transcript-print-settings>div{grid-template-columns:1fr 1fr}.transcript-print-actions{display:grid}.transcript-print-actions .btn{width:100%}.transcript-empty{align-items:flex-start;flex-wrap:wrap}.transcript-empty .btn{width:100%;margin-left:0}}
@media(max-width:480px){.transcript-tabs a{padding-inline:10px}.setting-choice-grid,.print-setting-grid{grid-template-columns:1fr!important}.transcript-settings-card>.form-grid{grid-template-columns:1fr}.transcript-settings-card .span-2{grid-column:auto}.responsive-transcript-table td{grid-template-columns:1fr;gap:3px}.transcript-print-settings>div{grid-template-columns:1fr}.transcript-context-strip strong{white-space:normal}}
@media(prefers-reduced-motion:reduce){.transcript-workflow article{animation:none}}
.btn-secondary{color:var(--ink);background:var(--surface-soft);border:1px solid var(--line)}
.btn-success{color:#fff;background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 8px 18px rgba(5,150,105,.22)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.sync-run-status.partial{color:#8a5700;background:#fff0bc}
.report-summary-strip article,.send-readiness article{background:var(--surface);box-shadow:var(--shadow)}

/* Rapor Hasil Belajar v1.12 */
.semester-content-heading .heading-actions{display:flex;flex-wrap:wrap;gap:8px}.semester-student-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:14px;padding:15px 17px}.semester-student-banner>span{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:1.15rem;font-weight:900}.semester-student-banner h2,.semester-student-banner p,.semester-student-banner small,.semester-student-banner strong{display:block;margin:0}.semester-student-banner h2{font-size:.95rem}.semester-student-banner p,.semester-student-banner small{margin-top:2px;color:var(--muted);font-size:.64rem}.semester-student-banner>div:last-child{text-align:right}.semester-content-form{display:grid;gap:14px}.report-content-card{overflow:hidden;padding:0}.report-content-card>header{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.report-content-card>header>span{display:grid;width:34px;height:34px;place-items:center;flex:0 0 auto;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:.72rem;font-weight:900}.report-content-card h2,.report-content-card p{margin:0}.report-content-card h2{font-size:.84rem}.report-content-card p{margin-top:2px;color:var(--muted);font-size:.62rem}.report-content-body{padding:15px}.report-content-body label>span{display:block;margin-bottom:6px;font-size:.68rem;font-weight:800}.report-content-body label>small{display:block;margin-top:5px;color:var(--muted);font-size:.6rem}.semester-description-table{min-width:960px}.semester-description-table th:nth-child(1){width:55px}.semester-description-table th:nth-child(2){width:240px}.semester-description-table th:nth-child(3){width:105px}.semester-description-table textarea,.semester-extra-table textarea{width:100%;min-height:70px;resize:vertical}.semester-score-pill{display:inline-grid;min-width:52px;padding:8px 10px;place-items:center;border-radius:9px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-weight:900}.semester-extra-table{min-width:760px}.semester-extra-table th:nth-child(1){width:55px}.semester-extra-table th:nth-child(2){width:280px}.semester-extra-table select{width:100%;min-height:40px}.semester-extra-table textarea{min-height:54px}.report-content-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px}.attendance-input-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.attendance-input-grid label{font-size:.67rem;font-weight:800}.attendance-input-grid input{margin-top:6px}.report-result-grid{grid-template-columns:1fr 1fr}.report-result-grid .span-2{grid-column:1/-1}.semester-save-bar{margin-top:0}
@media(max-width:900px){.semester-student-banner{grid-template-columns:auto 1fr}.semester-student-banner>div:last-child{grid-column:1/-1;text-align:left}.report-content-grid{grid-template-columns:1fr}}
@media(max-width:620px){.semester-content-heading .heading-actions{display:grid;width:100%}.semester-content-heading .heading-actions .btn{width:100%}.attendance-input-grid,.report-result-grid{grid-template-columns:1fr}.report-result-grid .span-2{grid-column:auto}.semester-student-banner{grid-template-columns:1fr}.semester-student-banner>span{width:42px;height:42px}.semester-save-bar{align-items:stretch}.semester-save-bar .btn{width:100%}}
.backup-safety{background:color-mix(in srgb,#10b981 10%,var(--surface))}

/* Pelengkap Rapor v1.11 */
.student-complement-form{max-width:1040px}.student-complement-form textarea{min-height:82px}.movement-manager{margin-top:18px}.movement-manager>.panel-heading>div:first-child{align-items:flex-start}.movement-manager>.panel-heading h2,.movement-manager>.panel-heading p{margin:0}.movement-manager>.panel-heading p{margin-top:4px;color:var(--muted);font-size:13px}.movement-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.movement-column{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}.movement-column>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.movement-column>header strong,.movement-column>header small{display:block}.movement-column>header small{margin-top:3px;color:var(--muted)}.movement-column>header>span{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--primary),#16a6c7);font-size:20px}.movement-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px dashed var(--line)}.movement-entry strong,.movement-entry small{display:block}.movement-entry small{max-width:360px;margin-top:3px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.movement-empty{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}.movement-add{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.movement-add>summary{padding:12px 14px;color:var(--primary);font-weight:800;cursor:pointer}.movement-add>form{padding:4px 14px 14px}.movement-add .btn{margin-top:12px}@media(max-width:840px){.movement-columns{grid-template-columns:1fr}.student-complement-form{max-width:none}}

/* Formulir 8355 dan tahap awal SIDANIRA v1.13 */
.form8355-tabs{display:flex;align-items:center;gap:7px;margin-bottom:16px;overflow-x:auto;padding:5px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 8px 25px rgba(35,59,100,.045)}.form8355-tabs a,.form8355-coming{display:flex;min-height:39px;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;color:var(--muted);font-size:.75rem;font-weight:800;white-space:nowrap}.form8355-tabs a{transition:.18s ease}.form8355-tabs a:hover{color:var(--primary);background:var(--surface-soft)}.form8355-tabs a.active{color:#fff;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 58%,var(--secondary)));box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 22%,transparent)}.form8355-coming{margin-left:auto;border:1px dashed var(--line);cursor:default;opacity:.76}.form8355-coming small{padding:3px 6px;border-radius:999px;background:var(--surface-soft);font-size:.56rem}.form8355-heading{align-items:center}.form8355-heading p{max-width:800px}
.form8355-source{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:13px;padding:12px 14px;border:1px solid #b6e7d5;border-radius:11px;color:#08684c;background:#e9f9f3}.form8355-source.warning{border-color:#f1d68b;color:#795000;background:#fff7da}.form8355-source>span{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:rgba(255,255,255,.72);font-weight:900}.form8355-source strong,.form8355-source small{display:block}.form8355-source small{margin-top:2px;font-size:.67rem}.form8355-source>a{color:inherit;font-size:.68rem;font-weight:850;white-space:nowrap}
.form8355-letterhead-status{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;margin:-2px 0 13px;padding:12px 14px;border:1px solid #b8d5ff;border-radius:11px;color:#164e9a;background:#eef6ff}.form8355-letterhead-status.automatic{border-style:dashed;color:#5d4a16;background:#fff9e8}.form8355-letterhead-status>span{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:rgba(255,255,255,.78);font-size:.68rem;font-weight:900}.form8355-letterhead-status strong,.form8355-letterhead-status small{display:block}.form8355-letterhead-status small{margin-top:2px;font-size:.67rem}.form8355-letterhead-status>a{color:inherit;font-size:.68rem;font-weight:850;white-space:nowrap}
.form8355-filter{display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:end;gap:10px;margin-bottom:13px;padding:14px}.form8355-filter.class-filter{grid-template-columns:minmax(230px,1fr) minmax(220px,.9fr) auto}.form8355-filter label>span{display:block;margin-bottom:5px;color:var(--muted);font-size:.67rem;font-weight:850}.form8355-filter select,.form8355-filter .btn{min-height:40px}
.form8355-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}.form8355-metrics.compact-six{grid-template-columns:repeat(6,minmax(0,1fr))}.form8355-metrics article{display:flex;min-width:0;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);animation:form8355-rise .32s ease both}.form8355-metrics article:nth-child(2){animation-delay:.03s}.form8355-metrics article:nth-child(3){animation-delay:.06s}.form8355-metrics article:nth-child(4){animation-delay:.09s}.form8355-metrics article:nth-child(5){animation-delay:.12s}.form8355-metrics article:nth-child(6){animation-delay:.15s}.form8355-metrics article>span{display:grid;width:37px;height:37px;place-items:center;flex:0 0 auto;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:.74rem;font-weight:900}.form8355-metrics article.warning>span{background:linear-gradient(135deg,#d97706,#fbbf24)}.form8355-metrics article.neutral>span{color:var(--muted);background:var(--surface-soft)}.form8355-metrics strong,.form8355-metrics small{display:block}.form8355-metrics strong{margin-top:2px;font-size:1.15rem}.form8355-metrics small{overflow:hidden;color:var(--muted);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}
.form8355-preview-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:13px;margin-bottom:13px}.form8355-profile-card,.form8355-recap-card{min-width:0;overflow:hidden;padding:0}.form8355-profile-card>header,.form8355-recap-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.form8355-profile-card>header>div,.form8355-recap-card>header>div{display:flex;align-items:center;gap:10px}.form8355-profile-card header>div>span,.form8355-recap-card header>div>span{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));font-size:1rem}.form8355-profile-card h2,.form8355-profile-card p,.form8355-recap-card h2,.form8355-recap-card p{margin:0}.form8355-profile-card h2,.form8355-recap-card h2{font-size:.84rem}.form8355-profile-card p,.form8355-recap-card p{margin-top:2px;color:var(--muted);font-size:.62rem}.form8355-profile-card dl{margin:0;padding:10px 15px 15px}.form8355-profile-card dl>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}.form8355-profile-card dl>div:last-child{border-bottom:0}.form8355-profile-card dt{color:var(--muted);font-size:.65rem;font-weight:800}.form8355-profile-card dd{margin:0;font-size:.7rem;font-weight:700;overflow-wrap:anywhere}.form8355-recap-card .table-scroll{max-height:385px}.form8355-recap-card table{min-width:520px}
.form8355-settings{overflow:hidden;margin-bottom:13px;padding:0}.form8355-settings>summary{display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer;list-style:none}.form8355-settings>summary::-webkit-details-marker{display:none}.form8355-settings>summary>span{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary))}.form8355-settings>summary>div{min-width:0;flex:1}.form8355-settings>summary strong,.form8355-settings>summary small{display:block}.form8355-settings>summary small{margin-top:2px;color:var(--muted);font-size:.65rem}.form8355-settings>summary>b{color:var(--primary);font-size:.7rem}.form8355-settings[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-soft)}.form8355-settings form{padding:15px}.form8355-setting-grid{gap:12px}.form8355-setting-grid fieldset{min-width:0;margin:0;padding:13px;border:1px solid var(--line);border-radius:11px}.form8355-setting-grid legend{padding:0 6px;font-size:.7rem;font-weight:850}.form8355-setting-grid fieldset>label,.form8355-setting-grid fieldset>.form-grid{margin-bottom:10px}.form8355-setting-grid fieldset>label:last-child,.form8355-setting-grid fieldset>.form-grid:last-child{margin-bottom:0}.form8355-settings form>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:15px -15px -15px;padding:13px 15px;border-top:1px solid var(--line);background:var(--surface-soft)}.form8355-settings footer strong,.form8355-settings footer small{display:block}.form8355-settings footer strong{font-size:.7rem}.form8355-settings footer small{margin-top:2px;color:var(--muted);font-size:.61rem}
.form8355-class-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px;padding:15px 17px;background:linear-gradient(105deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))}.form8355-class-hero>div:first-child{display:flex;min-width:0;align-items:center;gap:12px}.form8355-class-hero>div:first-child>span{display:grid;width:48px;height:48px;place-items:center;flex:0 0 auto;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:.8rem;font-weight:900}.form8355-class-hero h2,.form8355-class-hero p,.form8355-class-hero small{display:block;margin:0}.form8355-class-hero h2{margin:2px 0;font-size:1rem}.form8355-class-hero p,.form8355-class-hero small{color:var(--muted);font-size:.64rem}.form8355-class-hero>div:last-child{text-align:right}.form8355-class-hero>div:last-child strong{display:block;font-size:1.6rem}.form8355-data-table{min-width:1450px}.form8355-data-table td{font-size:.68rem}.form8355-data-table td small{display:block;margin-top:2px;color:var(--muted);font-size:.57rem}.form8355-data-table td:nth-child(9){min-width:290px;white-space:normal}.form8355-table-panel{margin-bottom:14px}
html[data-theme="dark"] .form8355-source{border-color:#245745;color:#8df0cd;background:#15372e}html[data-theme="dark"] .form8355-source.warning{border-color:#5b4b25;color:#f5d77f;background:#332b18}html[data-theme="dark"] .form8355-letterhead-status{border-color:#274f80;color:#a9cfff;background:#172b45}html[data-theme="dark"] .form8355-letterhead-status.automatic{border-color:#5b4b25;color:#f5d77f;background:#332b18}@keyframes form8355-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.form8355-metrics.compact-six{grid-template-columns:repeat(3,minmax(0,1fr))}.form8355-preview-grid{grid-template-columns:1fr}}
@media(max-width:760px){.form8355-tabs{align-items:stretch}.form8355-coming{margin-left:0}.form8355-heading{align-items:flex-start}.form8355-source,.form8355-letterhead-status{grid-template-columns:auto 1fr}.form8355-source>a,.form8355-letterhead-status>a{grid-column:2}.form8355-filter,.form8355-filter.class-filter{grid-template-columns:1fr}.form8355-filter .btn{width:100%}.form8355-metrics,.form8355-metrics.compact-six{grid-template-columns:repeat(2,minmax(0,1fr))}.form8355-setting-grid{grid-template-columns:1fr!important}.form8355-settings form>footer{align-items:stretch;flex-direction:column}.form8355-settings footer .btn{width:100%}.form8355-class-hero{align-items:flex-start;flex-direction:column}.form8355-class-hero>div:last-child{text-align:left}}
@media(max-width:480px){.form8355-tabs a,.form8355-coming{padding-inline:10px}.form8355-metrics,.form8355-metrics.compact-six{grid-template-columns:1fr}.form8355-profile-card dl>div{grid-template-columns:1fr;gap:3px}.form8355-source,.form8355-letterhead-status{grid-template-columns:1fr}.form8355-source>a,.form8355-letterhead-status>a{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.form8355-metrics article{animation:none}}

/* SIDANIRA SMP v2.2 */
.sidanira-heading{align-items:center}.sidanira-heading p{max-width:820px}.sidanira-filter{display:grid;grid-template-columns:minmax(270px,1fr) auto;align-items:end;gap:10px;margin-bottom:13px;padding:14px}.sidanira-filter label{font-size:.67rem;font-weight:850}.sidanira-filter select{display:block;margin-top:5px;min-height:40px}.sidanira-empty{text-align:center;padding:50px 20px}.sidanira-empty>span{display:grid;width:58px;height:58px;margin:0 auto 12px;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:1.7rem}.sidanira-empty h2,.sidanira-empty p{margin:0}.sidanira-empty p{margin-top:5px;color:var(--muted)}
.sidanira-period-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:13px}.sidanira-period{position:relative;min-width:0;padding:14px;overflow:hidden}.sidanira-period::after{position:absolute;right:-12px;bottom:-18px;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--primary) 8%,transparent);content:""}.sidanira-period>span{display:inline-flex;padding:4px 6px;border-radius:999px;color:#155b97;background:#e1f0ff;font-size:.54rem;font-weight:900;letter-spacing:.06em}.sidanira-period.optional>span{color:#6b35a2;background:#eee5ff}.sidanira-period strong,.sidanira-period small,.sidanira-period em{display:block}.sidanira-period strong{margin-top:7px;font-size:.78rem}.sidanira-period small{margin-top:2px;color:var(--muted);font-size:.6rem}.sidanira-period em{margin-top:7px;color:#6b35a2;font-size:.57rem;font-style:normal;font-weight:750}.sidanira-period.hidden-period{opacity:.62;border-style:dashed}
.sidanira-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:13px}.sidanira-summary-grid article{display:flex;align-items:center;gap:11px;padding:13px}.sidanira-summary-grid .metric-icon{display:grid;width:39px;height:39px;place-items:center;flex:0 0 auto;border-radius:11px;font-weight:900}.sidanira-summary-grid .blue{color:#1d4ed8;background:#dbeafe}.sidanira-summary-grid .violet{color:#6d28d9;background:#ede9fe}.sidanira-summary-grid .orange{color:#b45309;background:#fef3c7}.sidanira-summary-grid .teal{color:#047857;background:#d1fae5}.sidanira-summary-grid small,.sidanira-summary-grid strong{display:block}.sidanira-summary-grid small{color:var(--muted);font-size:.61rem;font-weight:800}.sidanira-summary-grid strong{font-size:1.25rem}.sidanira-summary-grid article.danger{border-color:#fecaca}.sidanira-summary-grid article.success{border-color:#bbf7d0}
.sidanira-review-state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:13px;padding:16px;border-left:4px solid #d97706}.sidanira-review-state.reviewed{border-left-color:#059669;background:linear-gradient(100deg,color-mix(in srgb,#10b981 8%,var(--surface)),var(--surface))}.sidanira-state-icon{display:grid;width:45px;height:45px;place-items:center;border-radius:13px;color:#92400e;background:#fef3c7;font-size:1.15rem;font-weight:900}.sidanira-review-state.reviewed .sidanira-state-icon{color:#047857;background:#d1fae5}.sidanira-review-state h2,.sidanira-review-state p{margin:0}.sidanira-review-state h2{font-size:.9rem}.sidanira-review-state p{margin-top:3px;color:var(--muted);font-size:.66rem}.sidanira-review-state code{display:block;overflow:hidden;max-width:620px;margin-top:7px;color:var(--muted);font-size:.56rem;text-overflow:ellipsis;white-space:nowrap}
.sidanira-issues{margin-bottom:13px;overflow:hidden;padding:0}.sidanira-issues>summary{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;cursor:pointer}.sidanira-issues>summary strong{font-size:.75rem}.sidanira-issues>summary span{color:#9a6200;font-size:.62rem;font-weight:800}.sidanira-issues[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-soft)}.sidanira-issue-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:15px}.sidanira-issue-columns h3{margin:0 0 8px;font-size:.74rem}.sidanira-issue-columns ol{max-height:230px;margin:0;padding-left:23px;overflow:auto}.sidanira-issue-columns li{margin-bottom:5px;color:var(--muted);font-size:.64rem}.sidanira-ok{color:#047857;font-size:.67rem;font-weight:800}
.sidanira-table-panel{margin-bottom:13px}.sidanira-student-table{min-width:1120px}.sidanira-student-table td small,.sidanira-student-table td span{display:block}.sidanira-student-table td small{margin-top:2px;color:var(--muted);font-size:.57rem}.grade-cell{text-align:center;font-weight:850}.grade-cell.final{color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,var(--surface))}.grade-cell.incomplete{color:#b45309}.grade-cell.incomplete small{color:#b45309!important;white-space:nowrap}.verification-chip{display:inline-flex!important;padding:6px 8px;border-radius:999px;color:#536274;background:#e9eef5;font-size:.59rem;font-weight:850;white-space:nowrap}.verification-chip.approved{color:#087558;background:#dcf8ed}.verification-chip.revision,.verification-chip.stale{color:#986600;background:#fff0c7}
.sidanira-confirm{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px}.sidanira-confirm label{display:flex;align-items:flex-start;gap:10px}.sidanira-confirm input{width:18px;height:18px;flex:0 0 auto}.sidanira-confirm strong,.sidanira-confirm small{display:block}.sidanira-confirm strong{font-size:.71rem}.sidanira-confirm small{margin-top:2px;color:var(--muted);font-size:.61rem}
.sidanira-student-identity{display:grid;grid-template-columns:auto 1fr;gap:15px;margin-bottom:13px;padding:15px}.sidanira-student-identity .student-avatar{display:grid;width:58px;height:58px;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));font-size:1.3rem;font-weight:900}.sidanira-student-identity dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px;margin:0}.sidanira-student-identity dl>div{padding:7px 0;border-bottom:1px dashed var(--line)}.sidanira-student-identity dt{color:var(--muted);font-size:.58rem;font-weight:800}.sidanira-student-identity dd{margin:2px 0 0;font-size:.68rem;font-weight:750}.sidanira-score-detail{margin-bottom:13px}.sidanira-score-detail table{min-width:850px}.sidanira-score-detail td small{display:block}.sidanira-score-detail tfoot th{background:var(--surface-soft)}
.sidanira-parent-form{margin-bottom:13px;overflow:hidden;padding:0}.sidanira-parent-form>header{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.sidanira-parent-form>header>div{display:flex;align-items:center;gap:10px}.sidanira-parent-form h2,.sidanira-parent-form p{margin:0}.sidanira-parent-form h2{font-size:.85rem}.sidanira-parent-form p{margin-top:2px;color:var(--muted);font-size:.62rem}.sidanira-parent-form>.form-grid{padding:15px}.sidanira-parent-form .span-2{grid-column:1/-1}.sidanira-parent-form textarea{resize:vertical}.sidanira-form-note{display:flex;align-items:flex-start;gap:9px;margin:0 15px 15px;padding:10px 12px;border-radius:10px;color:#155b97;background:#eaf4ff}.sidanira-form-note p{margin:0;font-size:.63rem;line-height:1.45}.sidanira-parent-form>footer{display:flex;justify-content:flex-end;gap:8px;padding:13px 15px;border-top:1px solid var(--line);background:var(--surface-soft)}.sidanira-readonly{margin-bottom:13px;padding:15px}.page-actions{display:flex;flex-wrap:wrap;gap:8px}
.verify-page{display:grid;min-height:100vh;padding:24px;place-items:center;background:radial-gradient(circle at 10% 20%,#c7f3fa 0 55px,transparent 56px),radial-gradient(circle at 90% 80%,#ddd6fe 0 70px,transparent 71px),#eef6ff}.verify-card{width:min(620px,100%);padding:34px;border:1px solid #d8e3f1;border-radius:24px;background:#fff;box-shadow:0 25px 70px rgba(15,42,95,.15);text-align:center}.verify-symbol{display:grid;width:62px;height:62px;margin:0 auto 12px;place-items:center;border-radius:20px;color:#b45309;background:#fef3c7;font-size:1.7rem;font-weight:900}.verify-card.valid .verify-symbol{color:#047857;background:#d1fae5}.verify-card h1{margin:6px 0;font-size:1.55rem}.verify-card>p{margin:0;color:#64748b}.verify-card dl{margin:24px 0 0;text-align:left}.verify-card dl>div{display:grid;grid-template-columns:145px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed #d8e3f1}.verify-card dt{color:#64748b;font-size:.72rem;font-weight:800}.verify-card dd{margin:0;color:#17324d;font-size:.75rem;font-weight:750}.privacy-note{display:block;margin-top:18px;color:#64748b;line-height:1.5}
html[data-theme="dark"] .sidanira-period>span{color:#a9ddfa;background:#173346}html[data-theme="dark"] .sidanira-period.optional>span{color:#d2baff;background:#35264d}html[data-theme="dark"] .sidanira-summary-grid .blue{color:#a9c8ff;background:#213553}html[data-theme="dark"] .sidanira-summary-grid .violet{color:#d2baff;background:#35264d}html[data-theme="dark"] .sidanira-summary-grid .orange,html[data-theme="dark"] .sidanira-state-icon{color:#f5d77f;background:#40351c}html[data-theme="dark"] .sidanira-summary-grid .teal,html[data-theme="dark"] .sidanira-review-state.reviewed .sidanira-state-icon{color:#8df0cd;background:#173d33}html[data-theme="dark"] .verification-chip{color:#c6d0dc;background:#273549}html[data-theme="dark"] .verification-chip.approved{color:#8df0cd;background:#173d33}html[data-theme="dark"] .verification-chip.revision,html[data-theme="dark"] .verification-chip.stale{color:#f5d77f;background:#40351c}html[data-theme="dark"] .sidanira-form-note{color:#a9c8ff;background:#172b45}
@media(max-width:1180px){.sidanira-period-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sidanira-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidanira-student-identity dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidanira-heading{align-items:flex-start}.sidanira-heading>.btn,.page-actions{width:100%}.page-actions .btn{flex:1}.sidanira-filter{grid-template-columns:1fr}.sidanira-filter .btn{width:100%}.sidanira-period-grid{grid-template-columns:1fr 1fr}.sidanira-review-state{grid-template-columns:auto 1fr}.sidanira-review-state>.btn{grid-column:1/-1;width:100%}.sidanira-issue-columns{grid-template-columns:1fr}.sidanira-confirm{align-items:stretch;flex-direction:column}.sidanira-confirm .btn{width:100%}.sidanira-student-identity{grid-template-columns:1fr}.sidanira-student-identity dl{grid-template-columns:1fr}.sidanira-parent-form .form-grid{grid-template-columns:1fr}.sidanira-parent-form .span-2{grid-column:auto}.sidanira-parent-form>footer{display:grid}.verify-card{padding:25px}.verify-card dl>div{grid-template-columns:1fr;gap:3px}}
@media(max-width:480px){.sidanira-period-grid,.sidanira-summary-grid{grid-template-columns:1fr}.sidanira-review-state{grid-template-columns:1fr}.sidanira-state-icon{width:40px;height:40px}.page-actions{display:grid}.verify-page{padding:12px}.verify-card{padding:22px 17px;border-radius:18px}.verify-card h1{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.sidanira-period::after{display:none}}