/* ==========================================================================
   Tekno Guru — Design System
   Biru profesional #1D4ED8 · latar netral · aksen amber #F59E0B
   ========================================================================== */
:root {
  --blue-50:#EEF4FF; --blue-100:#DCE6FF; --blue-200:#C0D2FF; --blue-500:#3B6FE0;
  --blue-600:#2563EB; --blue-700:#1D4ED8; --blue-800:#173FA8; --navy:#0E2149; --navy-2:#132A5A;
  --amber-50:#FFF8EB; --amber-100:#FDECC8; --amber-500:#F59E0B; --amber-700:#B45309;
  --red-50:#FEF2F2; --red-100:#FEE2E2; --red-500:#DC2626; --red-700:#B91C1C;
  --green-50:#ECFDF5; --green-100:#D1FAE5; --green-600:#059669; --green-700:#047857;

  --ink:#111827; --ink-2:#374151; --muted:#6B7280; --muted-2:#9CA3AF;
  --line:#E5E7EB; --line-2:#EFF1F5; --bg:#F5F7FA; --surface:#FFFFFF;
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.07), 0 6px 18px -8px rgba(16,24,40,.12);
  --shadow-lg:0 18px 40px -20px rgba(16,24,40,.28);
  --sidebar-w:264px; --sidebar-w-collapsed:76px; --topbar-h:64px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
/* Atribut hidden harus selalu menang atas display pada kelas (mis. .modal { display:flex }). */
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.01em; line-height:1.3; }
p { margin:0; }
a { color:var(--blue-700); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; }
.ic { flex:none; }
.small { font-size:13px; }
.muted { color:var(--muted); }
.req { color:var(--red-500); }
.ta-right { text-align:right; } .ta-center { text-align:center; }
.nowrap { white-space:nowrap; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; z-index:200; background:#fff; padding:8px 12px; border-radius:8px; }

/* ---------------------------------- Ikon & tombol ------------------------- */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2); border-radius:10px; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.icon-btn:hover { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-700); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  font-size:14.5px; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--blue-700); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover { background:var(--blue-800); }
.btn--accent { background:var(--amber-500); color:#3B2600; }
.btn--accent:hover { background:#E08A05; }
.btn--ghost { background:#fff; border-color:var(--line); color:var(--ink-2); }
.btn--ghost:hover { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-700); }
.btn--danger { background:var(--red-500); color:#fff; }
.btn--danger:hover { background:var(--red-700); }
.btn--danger-ghost { background:#fff; border-color:var(--red-100); color:var(--red-700); }
.btn--danger-ghost:hover { background:var(--red-50); }
.btn--link { background:none; padding:6px 8px; color:var(--blue-700); }
.btn--sm { padding:7px 12px; font-size:13.5px; border-radius:9px; }
.btn--icon { padding:8px; width:34px; height:34px; }
.btn--block { width:100%; }
.btn:disabled, .btn.is-loading { opacity:.65; cursor:not-allowed; }
.btn.is-loading::after {
  content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor;
  border-left-color:transparent; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.inline-form { display:inline-flex; margin:0; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; }

/* ---------------------------------- Layout -------------------------------- */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); flex:none; background:var(--navy); color:#D9E1F2;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:60;
  transition:width .18s ease;
}
.sidebar__brand { display:flex; align-items:center; gap:10px; padding:18px 16px 14px; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; flex:1; min-width:0; }
.brand:hover { text-decoration:none; }
.brand__text { display:flex; flex-direction:column; min-width:0; }
.brand__text strong { font-size:16.5px; letter-spacing:.2px; }
.brand__text small { color:#93A5C9; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__close { display:none; background:none; border:0; color:#C7D2E8; cursor:pointer; padding:4px; }
.sidebar__nav { flex:1; overflow-y:auto; padding:6px 10px 10px; }
.nav__group { margin-bottom:14px; }
.nav__group-title {
  font-size:10.5px; letter-spacing:.13em; font-weight:700; color:#7E90B4;
  padding:8px 12px 6px; text-transform:uppercase;
}
.nav__link {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  color:#D9E1F2; font-size:14.2px; font-weight:500; margin-bottom:2px; width:100%;
  border:0; background:none; cursor:pointer; text-align:left; position:relative;
}
.nav__link:hover { background:rgba(255,255,255,.08); text-decoration:none; color:#fff; }
.nav__link.is-active { background:var(--blue-700); color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.nav__link.is-soon { color:#9FAFCE; }
.nav__soon {
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--amber-500); color:#3B2600; padding:2px 6px; border-radius:20px;
}
.nav__link--logout { color:#F3B7B7; }
.nav__link--logout:hover { background:rgba(220,38,38,.22); color:#fff; }
.sidebar__foot { padding:10px; border-top:1px solid rgba(255,255,255,.09); }
.sidebar__user { display:flex; align-items:center; gap:10px; padding:10px 12px 4px; min-width:0; }
.sidebar__user-meta { display:flex; flex-direction:column; min-width:0; }
.sidebar__user-meta strong { color:#fff; font-size:13.6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__user-meta small { color:#93A5C9; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

body.sidebar-collapsed .sidebar { width:var(--sidebar-w-collapsed); }
body.sidebar-collapsed .brand__text,
body.sidebar-collapsed .nav__label,
body.sidebar-collapsed .sidebar__user-meta,
body.sidebar-collapsed .nav__soon { display:none; }
body.sidebar-collapsed .nav__link { justify-content:center; padding:10px; }
body.sidebar-collapsed .nav__group-title { text-align:center; font-size:9px; padding:8px 0 4px; }
body.sidebar-collapsed .brand { justify-content:center; }
body.sidebar-collapsed .sidebar__user { justify-content:center; }
body.sidebar-collapsed .sidebar__nav { padding:6px 8px; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  height:var(--topbar-h); background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px;
  padding:0 22px; position:sticky; top:0; z-index:50;
}
.topbar__menu { display:none; }
.topbar__crumbs { display:flex; align-items:center; gap:8px; font-size:13.6px; color:var(--muted); flex:1; min-width:0; }
.topbar__home { color:var(--muted); }
.topbar__current { color:var(--ink); font-weight:600; }
.topbar__right { display:flex; align-items:center; gap:10px; }
.topbar__user { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; font-size:14px; }
.topbar__user:hover { text-decoration:none; color:var(--blue-700); }
.avatar {
  width:34px; height:34px; border-radius:50%; background:var(--blue-100); color:var(--blue-800);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none;
}
.avatar--sm { width:28px; height:28px; font-size:12.5px; }
.avatar--lg { width:64px; height:64px; font-size:26px; }

.content { padding:26px 26px 60px; max-width:1200px; width:100%; margin:0 auto; }
.content--wide { max-width:1500px; }

.page-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:24px;
}
.page-title { font-size:23px; }
.page-sub { color:var(--muted); font-size:14px; margin-top:4px; max-width:70ch; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------------------------- Kartu --------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.card + .card { margin-top:24px; }
.card__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 20px; border-bottom:1px solid var(--line-2); flex-wrap:wrap;
}
.card__title { font-size:16px; }
.card__sub { color:var(--muted); font-size:13px; margin-top:3px; }
.card__actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.card__body { padding:20px; }
.card__body--flush { padding:0; }
.card__body--tight { padding:12px; }
.card--accent { border-color:var(--amber-100); }
.card--danger { border-color:var(--red-100); }

.grid { display:grid; gap:20px; }
.grid--stats { grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); }
.grid--2 { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid--main-side { grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); }
.stack { display:grid; gap:24px; }
.stack--sm { display:grid; gap:14px; }

.stat {
  display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); color:var(--ink);
  transition:box-shadow .15s, transform .15s, border-color .15s;
}
.stat:hover { text-decoration:none; }
a.stat:hover { box-shadow:var(--shadow); transform:translateY(-1px); border-color:var(--blue-200); }
.stat__icon { width:42px; height:42px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.stat__icon--blue { background:var(--blue-50); color:var(--blue-700); }
.stat__icon--amber { background:var(--amber-50); color:var(--amber-700); }
.stat__icon--green { background:var(--green-50); color:var(--green-600); }
.stat__icon--red { background:var(--red-50); color:var(--red-500); }
.stat__meta { display:flex; flex-direction:column; min-width:0; }
.stat__label { font-size:12.6px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.stat__value { font-size:26px; font-weight:700; line-height:1.2; margin-top:2px; }
.stat__hint { font-size:12.5px; color:var(--muted); }

.badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:11.8px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.badge--neutral { background:#F3F4F6; color:#4B5563; }
.badge--blue { background:var(--blue-50); color:var(--blue-800); }
.badge--amber { background:var(--amber-100); color:var(--amber-700); }
.badge--green { background:var(--green-100); color:var(--green-700); }
.badge--red { background:var(--red-100); color:var(--red-700); }

/* --------------------------------- Form ---------------------------------- */
.form-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid--full { grid-template-columns:1fr; }
.span-2 { grid-column:1 / -1; }
.field { display:flex; flex-direction:column; gap:6px; }
.field__label { font-size:13.4px; font-weight:600; color:var(--ink-2); }
.field__hint { font-size:12.3px; color:var(--muted); }
.field__error { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--red-700); font-weight:500; }
.input {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14.5px; font-family:inherit; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-50); }
.field--error .input { border-color:var(--red-500); }
textarea.input { resize:vertical; min-height:78px; }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }
.form-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2); }

/* --------------------------------- Filter -------------------------------- */
.toolbar {
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; padding:16px 20px;
  border-bottom:1px solid var(--line-2); background:#FCFDFF;
}
.toolbar .field { flex:1 1 170px; min-width:150px; }
.toolbar .field--narrow { flex:0 1 150px; }
.toolbar__search { position:relative; flex:1 1 260px; }
.toolbar__search .ic { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted-2); }
.toolbar__search .input { padding-left:36px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:#fff; font-size:13px;
  color:var(--ink-2); font-weight:600; cursor:pointer;
}
.chip:hover { text-decoration:none; border-color:var(--blue-200); color:var(--blue-700); }
.chip.is-active { background:var(--blue-700); border-color:var(--blue-700); color:#fff; }

/* --------------------------------- Tabel --------------------------------- */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:14.2px; }
.table th {
  text-align:left; font-size:11.8px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:700; padding:12px 16px; background:#FAFBFD; border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td { padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table tbody tr:hover { background:#FAFBFD; }
.table tbody tr:last-child td { border-bottom:0; }
.table .cell-main { font-weight:600; color:var(--ink); }
.table-actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.link-strong { font-weight:600; }

/* -------------------------------- Empty/Info ----------------------------- */
.empty { text-align:center; padding:46px 24px; max-width:520px; margin:0 auto; }
.empty__icon {
  width:52px; height:52px; border-radius:14px; background:var(--blue-50); color:var(--blue-700);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.empty__title { font-size:16.5px; }
.empty__desc { color:var(--muted); font-size:14px; margin-top:6px; }
.empty__action { margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.note {
  display:flex; gap:10px; padding:13px 15px; border-radius:var(--radius-sm); font-size:13.6px;
  background:var(--blue-50); color:var(--blue-800); border:1px solid var(--blue-100);
}
.note--amber { background:var(--amber-50); color:var(--amber-700); border-color:var(--amber-100); }
.note--red { background:var(--red-50); color:var(--red-700); border-color:var(--red-100); }
.note--green { background:var(--green-50); color:var(--green-700); border-color:var(--green-100); }
.note .ic { margin-top:1px; }
.note strong { display:block; }

/* --------------------------------- Toast --------------------------------- */
.toasts { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.toasts--static { margin:0 0 18px; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; border:1px solid; box-shadow:var(--shadow-sm); background:#fff;
  animation:slidein .2s ease;
}
@keyframes slidein { from { opacity:0; transform:translateY(-6px); } }
.toast--success { background:var(--green-50); border-color:var(--green-100); color:var(--green-700); }
.toast--error { background:var(--red-50); border-color:var(--red-100); color:var(--red-700); }
.toast--info { background:var(--blue-50); border-color:var(--blue-100); color:var(--blue-800); }
.toast--warning { background:var(--amber-50); border-color:var(--amber-100); color:var(--amber-700); }
.toast__x { margin-left:auto; background:none; border:0; color:currentColor; cursor:pointer; opacity:.7; padding:2px; }
.toast__x:hover { opacity:1; }

/* ------------------------------ Paginasi/tab ----------------------------- */
.pagination { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; flex-wrap:wrap; }
.pagination__pages { display:flex; gap:6px; }
.page {
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; background:#fff; font-size:13.6px; font-weight:600; color:var(--ink-2);
}
.page:hover { text-decoration:none; border-color:var(--blue-200); color:var(--blue-700); }
.page.is-active { background:var(--blue-700); border-color:var(--blue-700); color:#fff; }

.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.tab { padding:10px 14px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; }
.tab:hover { text-decoration:none; color:var(--blue-700); }
.tab.is-active { color:var(--blue-700); border-bottom-color:var(--blue-700); }

/* ------------------------------- Presensi -------------------------------- */
.seg { display:inline-flex; gap:6px; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label {
  min-width:38px; padding:7px 10px; border-radius:9px; border:1px solid var(--line); background:#fff;
  font-size:12.8px; font-weight:700; color:var(--ink-2); cursor:pointer; text-align:center; transition:all .12s;
}
.seg label:hover { border-color:var(--blue-200); }
.seg input:focus-visible + label { box-shadow:0 0 0 3px var(--blue-50); }
.seg input:checked + label[data-status="hadir"] { background:var(--green-600); border-color:var(--green-600); color:#fff; }
.seg input:checked + label[data-status="sakit"] { background:var(--amber-500); border-color:var(--amber-500); color:#3B2600; }
.seg input:checked + label[data-status="izin"] { background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.seg input:checked + label[data-status="alpa"] { background:var(--red-500); border-color:var(--red-500); color:#fff; }

.summary-row { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
.summary-box { border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; background:#fff; }
.summary-box strong { display:block; font-size:21px; }
.summary-box span { font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.summary-box--hadir { border-left:3px solid var(--green-600); }
.summary-box--sakit { border-left:3px solid var(--amber-500); }
.summary-box--izin { border-left:3px solid var(--blue-600); }
.summary-box--alpa { border-left:3px solid var(--red-500); }
.summary-box--belum { border-left:3px solid var(--muted-2); }
.summary-box--netral { border-left:3px solid var(--blue-700); }
.summary-box--amber { border-left:3px solid var(--amber-500); }

.absensi-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.6px; color:var(--muted); }
.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; }

/* -------------------------------- Nilai ---------------------------------- */
.grade-input { width:86px; padding:8px 10px; text-align:center; font-weight:600; }
.marks-list { display:flex; flex-wrap:wrap; gap:6px; }
.mark {
  min-width:30px; padding:3px 7px; border-radius:7px; background:var(--blue-50); color:var(--blue-800);
  font-size:12.2px; font-weight:700; text-align:center;
}
.mark--low { background:var(--red-100); color:var(--red-700); }

/* ------------------------------- Timeline -------------------------------- */
.timeline { display:grid; gap:2px; }
.tl-item { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.tl-item:last-child { border-bottom:0; }
.tl-icon {
  width:32px; height:32px; border-radius:9px; background:var(--blue-50); color:var(--blue-700);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.tl-body { min-width:0; flex:1; }
.tl-title { font-size:14px; font-weight:600; }
.tl-meta { font-size:12.4px; color:var(--muted); }

.quick-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.quick {
  display:flex; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; color:var(--ink); font-weight:600; font-size:13.8px;
}
.quick:hover { text-decoration:none; border-color:var(--blue-200); background:var(--blue-50); color:var(--blue-800); }
.quick .ic { color:var(--blue-700); }
.todo-list { display:grid; gap:10px; }
.todo {
  display:flex; gap:11px; align-items:center; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; font-size:14px;
}
.todo:hover { text-decoration:none; border-color:var(--blue-200); }
.todo .ic:last-child { margin-left:auto; color:var(--muted-2); }
.todo--warn { border-color:var(--amber-100); background:var(--amber-50); }

/* --------------------------------- Loading ------------------------------- */
#gs-progress {
  position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg, var(--blue-700), var(--amber-500));
  transition:width .25s ease, opacity .3s ease; opacity:1;
}
#gs-progress.is-done { width:100% !important; opacity:0; }

/* --------------------------------- Modal --------------------------------- */
.modal {
  position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:200; backdrop-filter:blur(2px);
}
.modal__box {
  background:#fff; border-radius:var(--radius-lg); padding:26px; max-width:440px; width:100%;
  box-shadow:var(--shadow-lg); text-align:center;
}
.modal__icon {
  width:48px; height:48px; border-radius:50%; background:var(--red-50); color:var(--red-500);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.modal__title { font-size:18px; }
.modal__text { color:var(--muted); font-size:14.2px; margin-top:8px; white-space:pre-line; }
.modal__actions { display:flex; gap:10px; justify-content:center; margin-top:22px; }

/* --------------------------------- Auth ---------------------------------- */
.auth-body { background:var(--bg); min-height:100vh; }
.auth {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:100vh;
}
.auth__panel { display:flex; flex-direction:column; justify-content:center; padding:44px 8vw; }
.auth__brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.auth__brand strong { font-size:19px; display:block; }
.auth__brand small { color:var(--muted); font-size:12.6px; }
.auth__aside {
  background:var(--navy); color:#DCE5F7; padding:48px 6vw; display:flex; flex-direction:column; justify-content:center;
}
.auth__aside h2 { font-size:26px; color:#fff; max-width:22ch; }
.auth__aside p { margin-top:14px; color:#A9BADA; max-width:42ch; }
.auth__list { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.auth__list li { display:flex; align-items:center; gap:10px; font-size:14.4px; }
.auth__list .ic { color:var(--amber-500); }
.auth__card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.auth__card h1 { font-size:20px; }
.auth__card > p.muted { font-size:13.8px; margin-top:6px; }
.auth__form { margin-top:22px; }
.auth__foot { text-align:center; margin-top:18px; font-size:14px; color:var(--muted); }
.auth__demo { margin-top:16px; }

/* -------------------------------- Cetak ---------------------------------- */
.print-body { background:#E9EDF3; }
.print-toolbar {
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.print-toolbar__spacer { flex:1; }
.print-page {
  background:#fff; max-width:900px; margin:22px auto 60px; padding:38px 42px;
  box-shadow:var(--shadow); border-radius:6px; color:#000; font-size:13.5px;
}
.print-page--lebar { max-width:1300px; }
.print-body--landscape .print-page { max-width:1300px; }

.kop { text-align:center; }
.kop__nama { font-size:19px; font-weight:700; letter-spacing:.02em; }
.kop__sub { font-size:11.6px; color:#333; }
.kop__line { border-top:3px double #000; margin:10px 0 22px; }

.print-head { text-align:center; margin-bottom:20px; }
.print-title { font-size:15.6px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.print-sub { font-size:12.6px; color:#333; margin-top:4px; }

.print-info { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:5px 22px; margin-bottom:16px; }
.print-info__item { display:flex; gap:8px; font-size:12.4px; }
.print-info__item span { color:#444; min-width:96px; }
.print-info__item span::after { content:":"; float:right; }

.print-table { width:100%; border-collapse:collapse; font-size:12.2px; margin-top:6px; }
.print-table--kecil { font-size:10.4px; }
.print-table--kecil th, .print-table--kecil td { padding:4px 5px; }
.print-table th, .print-table td { border:1px solid #333; padding:5px 7px; vertical-align:top; }
.print-table th { background:#EFF2F7; font-size:11.2px; text-transform:uppercase; letter-spacing:.03em; text-align:left; }
.print-table td.ta-center, .print-table th.ta-center { text-align:center; }
.print-table td.ta-right, .print-table th.ta-right { text-align:right; }
.print-table tbody tr:nth-child(even) td { background:#FAFBFD; }

.print-isi { font-size:12.8px; }
.print-isi h3 { font-size:12.6px; margin:16px 0 4px; text-transform:uppercase; letter-spacing:.03em; }
.print-isi p { white-space:pre-wrap; line-height:1.6; }
.print-isi ul { margin:4px 0 0; padding-left:20px; }
.print-isi li { margin-bottom:3px; }

.ttd { display:flex; justify-content:space-between; gap:30px; margin-top:44px; font-size:12.6px; }
.ttd__blok { min-width:210px; text-align:left; }
.ttd__blok:last-child { text-align:left; }
.ttd__ruang { height:58px; }
.ttd__nama { font-weight:700; border-top:1px solid #000; display:inline-block; padding-top:3px; }
.print-foot { font-size:10.4px; color:#555; margin-top:26px; text-align:center; }

/* Lembar soal */
.soal-header { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:4px 20px; font-size:12.4px; margin-bottom:14px; }
.soal-petunjuk { font-size:12.2px; border:1px solid #333; padding:8px 10px; margin:12px 0 18px; white-space:pre-wrap; }
.soal-item { margin-bottom:14px; page-break-inside:avoid; }
.soal-item__no { font-weight:700; }
.soal-item__teks { white-space:pre-wrap; }
.soal-pilihan { margin:4px 0 0 20px; display:grid; gap:2px; }
.soal-pilihan span { font-size:12.4px; }
.soal-identitas { display:flex; gap:26px; flex-wrap:wrap; font-size:12.4px; border:1px solid #333; padding:8px 10px; margin:12px 0; }
.soal-identitas span { white-space:nowrap; }
.soal-gambar { margin:6px 0 4px; }
.soal-gambar img { max-width:340px; max-height:260px; border:1px solid #333; display:block; }
.soal-gambar--kosong {
  border:1px dashed #666; min-height:110px; display:flex; align-items:center; justify-content:center;
  font-size:11.4px; color:#444; text-align:center; padding:8px; max-width:340px; background:#FAFBFD;
}
.soal-jawaban { margin-top:10px; font-size:12.4px; }
.kunci-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:4px 18px; font-size:12.4px; }

/* Halaman cetak pada ponsel tetap terbaca */
@media (max-width:760px) {
  .print-page { padding:20px 14px; margin:12px 8px 40px; font-size:12.6px; }
  .table-wrap { overflow-x:auto; }
}

@media print {
  @page { size:A4; margin:12mm 10mm; }
  .print-body--landscape { }
  .print-body, .print-body--landscape { background:#fff; }
  .no-print, .print-toolbar { display:none !important; }
  .print-page, .print-page--lebar, .print-body--landscape .print-page {
    box-shadow:none; margin:0; padding:0; max-width:none; border-radius:0; font-size:11.4pt;
  }
  .print-table { font-size:9.6pt; }
  .print-table th { font-size:9pt; }
  .print-table tr, .soal-item, .ttd { page-break-inside:avoid; }
  .print-title, .kop__nama { page-break-after:avoid; }
  .print-isi h3 { page-break-after:avoid; }
  a { color:inherit; text-decoration:none; }
  .table-wrap { overflow:visible !important; }
}

/* --------------------------------- Soon ---------------------------------- */
.soon-hero { text-align:center; padding:34px 20px 10px; }
.soon-hero__icon {
  width:60px; height:60px; border-radius:18px; background:var(--amber-50); color:var(--amber-700);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.soon-list { display:grid; gap:10px; margin-top:8px; }
.soon-list li { display:flex; gap:10px; align-items:flex-start; font-size:14.2px; }
.soon-list .ic { color:var(--blue-700); margin-top:2px; }

/* ------------------------------- Dokumen --------------------------------- */
.doc-preview {
  background:#FCFDFF; border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px;
  font-size:14.4px; line-height:1.7; white-space:pre-wrap; word-break:break-word; max-height:60vh; overflow:auto;
}
.kv { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.kv__item span { display:block; font-size:11.8px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.kv__item strong { font-size:15px; font-weight:600; }

/* -------------------------------- Mobile --------------------------------- */
.scrim { display:none; }
@media (max-width:1080px) {
  .grid--main-side { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; height:100%; width:280px; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow-lg);
  }
  body.drawer-open .sidebar { transform:none; }
  body.drawer-open .scrim { display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:55; }
  .sidebar__close { display:block; }
  body.sidebar-collapsed .sidebar { width:280px; }
  body.sidebar-collapsed .brand__text, body.sidebar-collapsed .nav__label,
  body.sidebar-collapsed .sidebar__user-meta, body.sidebar-collapsed .nav__soon { display:revert; }
  body.sidebar-collapsed .nav__link { justify-content:flex-start; padding:9px 12px; }
  body.sidebar-collapsed .nav__group-title { text-align:left; font-size:10.5px; padding:8px 12px 6px; }
  .topbar__menu { display:inline-flex; }
  .topbar__collapse { display:none; }
  .content { padding:20px 16px 64px; }
  .page-head { margin-bottom:18px; }
  .auth { grid-template-columns:1fr; }
  .auth__aside { display:none; }
  .auth__panel { padding:32px 22px; }
  .toolbar { padding:14px; }
  .table th { display:none; }
  .table tr { display:block; border-bottom:1px solid var(--line); padding:6px 0; }
  .table td {
    display:flex; justify-content:space-between; gap:14px; border:0; padding:7px 16px; text-align:right;
  }
  .table td::before {
    content:attr(data-label); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); font-weight:700; text-align:left; flex:none;
  }
  .table-actions { justify-content:flex-end; }
  .grid--stats { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
  .stat__value { font-size:22px; }
}
@media (max-width:520px) {
  .page-title { font-size:20px; }
  .btn { padding:10px 13px; font-size:14px; }
  .grid--stats { grid-template-columns:1fr 1fr; }
  .stat { padding:14px; gap:11px; }
  .stat__icon { width:36px; height:36px; }
  .card__body { padding:16px; }
  .modal__box { padding:20px; }
}
@media print {
  .sidebar, .topbar, .page-actions, .toolbar { display:none !important; }
  .content { padding:0; }
}