/* ============================================================================
   SIM Terpadu — app.css  v0.12.0 "Cerah"
   Sistem desain tanpa framework. Ditulis ulang total: palet cerah, skala spasi
   konsisten, tipografi lega, tombol tegas, target sentuh 44px, dan perilaku
   ala aplikasi native di ponsel (app bar, drawer, bottom nav, safe area).

   Urutan berkas:
     1. Token       6. Tabel
     2. Reset       7. Formulir & tombol
     3. Kerangka    8. Umpan balik (alert, toast, badge)
     4. App bar     9. Komponen halaman
     5. Kartu      10. Mobile / PWA / cetak
   ========================================================================== */

/* ── 1. Token ───────────────────────────────────────────────────────────── */
:root{
  /* Palet cerah */
  --brand:#0d9488;        /* teal 600  — identitas utama */
  --brand-2:#0f766e;      /* teal 700  — hover */
  --brand-3:#5eead4;      /* teal 300  — aksen terang */
  --brand-soft:#ccfbf1;   /* teal 100  — latar lembut */
  --primary:#0d9488;
  --primary-2:#0f766e;
  --accent:#f59e0b;       /* amber 500 */
  --accent-soft:#fef3c7;
  --indigo:#6366f1;
  --indigo-soft:#e0e7ff;
  --pink:#ec4899;
  --pink-soft:#fce7f3;
  --sky:#0ea5e9;
  --sky-soft:#e0f2fe;
  --violet:#8b5cf6;
  --violet-soft:#ede9fe;

  /* Semantik */
  --ok:#059669;   --ok-soft:#d1fae5;   --ok-ink:#065f46;
  --warn:#d97706; --warn-soft:#fef3c7; --warn-ink:#92400e;
  --bad:#dc2626;  --bad-soft:#fee2e2;  --bad-ink:#991b1b;
  --info:#2563eb; --info-soft:#dbeafe; --info-ink:#1e40af;

  /* Permukaan */
  --bg:#f4f7fb;
  --bg-2:#eaf0f7;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --border:#e2e8f0;
  --border-2:#cbd5e1;
  --sidebar:#0b3b38;
  --sidebar-2:#072a28;
  --sidebar-text:#b9dedb;

  /* Skala spasi (kelipatan 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --radius:var(--r-lg);

  /* Bayangan berlapis */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 2px 6px rgba(15,23,42,.07);
  --shadow:0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:0 16px 40px rgba(15,23,42,.13);
  --shadow-brand:0 10px 28px rgba(13,148,136,.28);

  /* Tipografi */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --leading:1.65;
  --leading-tight:1.3;

  /* Ukuran kerangka */
  --sidebar-w:264px;
  --appbar-h:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a1020; --bg-2:#0d1526; --panel:#111c31; --panel-2:#16233b;
    --text:#e8eef7; --text-2:#c7d2e0; --muted:#93a3b8;
    --border:#1f2f4a; --border-2:#2b3f60;
    --brand-soft:#0d3f3a; --accent-soft:#43320c; --ok-soft:#0b3d2c;
    --warn-soft:#43320c; --bad-soft:#4a1620; --info-soft:#132a52;
    --ok-ink:#6ee7b7; --warn-ink:#fcd34d; --bad-ink:#fca5a5; --info-ink:#93c5fd;
    --sidebar:#071f26; --sidebar-2:#04141a;
    --shadow-xs:0 1px 2px rgba(0,0,0,.5);
    --shadow-sm:0 2px 6px rgba(0,0,0,.45);
    --shadow:0 6px 18px rgba(0,0,0,.5);
    --shadow-lg:0 16px 40px rgba(0,0,0,.6);
  }
}

/* ── 2. Reset ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:15.5px;
  line-height:var(--leading);
  letter-spacing:.005em;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
img,svg{max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:var(--leading-tight);margin:0 0 var(--sp-3);font-weight:750;letter-spacing:-.015em}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem} h4{font-size:.94rem}
p{margin:0 0 var(--sp-3)}
p:last-child{margin-bottom:0}
small{font-size:.82rem}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-5) 0}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-soft);color:var(--text)}

/* ── 3. Kerangka ────────────────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;min-height:100dvh}

.sidebar{
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:var(--sidebar-text);
  padding:var(--sp-5) var(--sp-3) var(--sp-8);
  position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
  -webkit-overflow-scrolling:touch;
  user-select:none;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}

.sidebar .brand{
  display:flex;align-items:center;gap:var(--sp-2);
  font-weight:800;font-size:1.06rem;color:#fff;
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-1);letter-spacing:-.02em;
}
.sidebar .brand:hover{text-decoration:none}
.sidebar .unit{
  display:block;margin:0 var(--sp-3) var(--sp-5);padding:var(--sp-2) var(--sp-3);
  font-size:.74rem;font-weight:600;color:var(--brand-3);
  background:rgba(94,234,212,.10);border:1px solid rgba(94,234,212,.20);
  border-radius:var(--r-full);text-align:center;
}
.sidebar nav a{
  display:flex;align-items:center;gap:var(--sp-3);
  color:var(--sidebar-text);padding:11px var(--sp-3);
  border-radius:var(--r-md);margin-bottom:2px;
  font-size:.9rem;font-weight:500;line-height:1.35;
  transition:background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease);
}
.sidebar nav a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.sidebar nav a:active{transform:scale(.98)}
.sidebar nav a.active{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:650;box-shadow:var(--shadow-brand);
}
.sidebar nav a .ic{width:20px;text-align:center;font-size:1.02rem;flex:none;opacity:.95}
.sidebar nav .soon{opacity:.4;pointer-events:none}
.sidebar .grp{
  font-size:.67rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;
  color:rgba(185,222,219,.55);margin:var(--sp-5) var(--sp-3) var(--sp-2);
}
.sidebar .grp:first-of-type{margin-top:var(--sp-3)}
.sidebar .sb-close{display:none}

.main{
  padding:var(--sp-6) var(--sp-7) var(--sp-9);
  max-width:1280px;width:100%;
  animation:masuk .3s var(--ease);
}
@keyframes masuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Lapisan gelap saat drawer terbuka (mobile) */
.drawer-overlay{
  position:fixed;inset:0;z-index:45;background:rgba(2,6,23,.5);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.drawer-overlay.show{opacity:1;pointer-events:auto}

/* ── 4. App bar ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;
  margin:calc(var(--sp-6) * -1) calc(var(--sp-7) * -1) var(--sp-6);
  padding:var(--sp-3) var(--sp-7);
  min-height:var(--appbar-h);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar h1{margin:0;font-size:1.28rem}
.topbar .kiri{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.topbar .kiri h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.userchip{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-full);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  font-size:.83rem;color:var(--text-2);box-shadow:var(--shadow-xs);
}
.userchip .nm{font-weight:650;color:var(--text)}
.userchip .sep{color:var(--border-2)}
.userchip a{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:var(--r-full);color:var(--text-2);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.userchip a:hover{background:var(--brand-soft);color:var(--brand-2);text-decoration:none}
.avatar{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--indigo));
}

#menuBtn{
  display:none;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);
  min-height:42px;padding:0 var(--sp-3);cursor:pointer;color:var(--text);
  font:inherit;font-weight:650;font-size:.9rem;box-shadow:var(--shadow-xs);
}
#menuBtn:active{transform:scale(.96)}

/* ── 5. Kartu & grid ────────────────────────────────────────────────────── */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-5) var(--sp-6);
  margin-bottom:var(--sp-5);
}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.card.pad-sm{padding:var(--sp-4)}
.card.flush{padding:0;overflow:hidden}
.card.flush > .card-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}

.grid{display:grid;gap:var(--sp-5)}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid2{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.row.end{justify-content:flex-end}
.spacer{flex:1}

/* Kartu statistik berwarna */
.card.stat{
  position:relative;overflow:hidden;
  padding:var(--sp-5);
  border-left:5px solid var(--brand);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.card.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card.stat .ikon{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:var(--sp-3);
  font-size:1.4rem;border-radius:var(--r-md);
  background:var(--brand-soft);
}
.card.stat .num{font-size:2.05rem;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.card.stat .lbl{color:var(--muted);font-size:.85rem;font-weight:550;margin-top:2px}
.card.stat:nth-of-type(6n+2){border-left-color:var(--indigo)}
.card.stat:nth-of-type(6n+2) .ikon{background:var(--indigo-soft)}
.card.stat:nth-of-type(6n+3){border-left-color:var(--accent)}
.card.stat:nth-of-type(6n+3) .ikon{background:var(--accent-soft)}
.card.stat:nth-of-type(6n+4){border-left-color:var(--pink)}
.card.stat:nth-of-type(6n+4) .ikon{background:var(--pink-soft)}
.card.stat:nth-of-type(6n+5){border-left-color:var(--sky)}
.card.stat:nth-of-type(6n+5) .ikon{background:var(--sky-soft)}
.card.stat:nth-of-type(6n+6){border-left-color:var(--violet)}
.card.stat:nth-of-type(6n+6) .ikon{background:var(--violet-soft)}

/* ── 6. Tabel ───────────────────────────────────────────────────────────── */
.table-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-md);
}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
th,td{padding:12px var(--sp-3);text-align:left;vertical-align:middle;border-bottom:1px solid var(--border)}
th{
  position:sticky;top:0;z-index:1;
  background:var(--panel-2);color:var(--muted);
  font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;
}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 5%,transparent)}
tbody tr:last-child td{border-bottom:0}
td .btn.sm{vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabel-kosong{text-align:center;color:var(--muted);padding:var(--sp-8) var(--sp-4)}
.tabel-kosong .ic{font-size:2.4rem;display:block;margin-bottom:var(--sp-2);opacity:.5}

/* ── 7. Formulir & tombol ───────────────────────────────────────────────── */
label{display:block;font-size:.83rem;font-weight:650;color:var(--text-2);margin:var(--sp-4) 0 6px}
input,select,textarea{
  width:100%;min-height:44px;
  padding:11px var(--sp-3);
  border:1.5px solid var(--border-2);
  border-radius:var(--r-md);
  background:var(--panel);color:var(--text);
  font:inherit;line-height:1.4;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
textarea{min-height:110px;padding-top:var(--sp-3);resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input:hover,select:hover,textarea:hover{border-color:var(--brand-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);
}
input[type=checkbox],input[type=radio]{width:19px;height:19px;min-height:0;accent-color:var(--brand);vertical-align:-3px}
input:disabled,select:disabled,textarea:disabled{background:var(--bg-2);color:var(--muted);cursor:not-allowed}
select{
  appearance:none;padding-right:36px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 var(--sp-5)}
.form-aksi{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.hint{display:block;font-size:.78rem;color:var(--muted);margin-top:5px;font-weight:400}
.hp{position:absolute;left:-9999px;opacity:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;border:0;border-radius:var(--r-md);
  font:inherit;font-weight:700;font-size:.92rem;letter-spacing:.01em;
  cursor:pointer;text-align:center;white-space:nowrap;
  box-shadow:0 3px 10px rgba(13,148,136,.28);
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
.btn:hover{filter:brightness(1.07);box-shadow:0 6px 18px rgba(13,148,136,.36);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:0 2px 6px rgba(13,148,136,.3)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none}
.btn.ghost{
  background:var(--panel);color:var(--brand-2);
  border:1.5px solid var(--brand);box-shadow:none;
}
.btn.ghost:hover{background:var(--brand-soft);color:var(--brand-2);filter:none}
.btn.netral{
  background:var(--panel);color:var(--text-2);
  border:1.5px solid var(--border-2);box-shadow:var(--shadow-xs);
}
.btn.netral:hover{background:var(--bg-2);color:var(--text);filter:none}
.btn.danger{background:linear-gradient(180deg,#ef4444,var(--bad));box-shadow:0 3px 10px rgba(220,38,38,.3)}
.btn.danger:hover{box-shadow:0 6px 18px rgba(220,38,38,.38)}
.btn.sukses{background:linear-gradient(180deg,#10b981,var(--ok));box-shadow:0 3px 10px rgba(5,150,105,.3)}
.btn.aksen{background:linear-gradient(180deg,#fbbf24,var(--accent));color:#3f2d00;box-shadow:0 3px 10px rgba(245,158,11,.35)}
.btn.sm{min-height:34px;padding:0 var(--sp-3);font-size:.82rem;border-radius:var(--r-sm);gap:5px}
.btn.lg{min-height:52px;padding:0 var(--sp-6);font-size:1rem;border-radius:var(--r-lg)}
.btn.block{display:flex;width:100%}
.btn-grup{display:flex;gap:var(--sp-2);flex-wrap:wrap}

.searchbar{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  margin-bottom:var(--sp-5);
}
.searchbar input,.searchbar select{max-width:280px}
@media (max-width:560px){ .searchbar input,.searchbar select{max-width:none;flex:1 1 100%} }

/* ── 8. Umpan balik ─────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:var(--bg-2);color:var(--text-2);
}
.badge.b-smp{background:var(--sky-soft);color:#0369a1}
.badge.b-pondok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.b-err{background:var(--bad-soft);color:var(--bad-ink)}
.badge.b-warn{background:var(--warn-soft);color:var(--warn-ink)}
.badge.b-ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.b-info{background:var(--info-soft);color:var(--info-ink)}

.alert{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  margin-bottom:var(--sp-4);font-size:.91rem;font-weight:500;
  border-left:4px solid transparent;
  animation:masuk .25s var(--ease);
}
.alert.ok{background:var(--ok-soft);color:var(--ok-ink);border-left-color:var(--ok)}
.alert.err{background:var(--bad-soft);color:var(--bad-ink);border-left-color:var(--bad)}
.alert.warn{background:var(--warn-soft);color:var(--warn-ink);border-left-color:var(--warn)}
.alert.info{background:var(--info-soft);color:var(--info-ink);border-left-color:var(--info)}

#toast{
  position:fixed;left:50%;bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));
  transform:translate(-50%,20px);
  background:var(--text);color:var(--bg);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-full);
  font-size:.9rem;font-weight:600;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;z-index:120;max-width:88vw;text-align:center;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:860px){ #toast{bottom:calc(84px + env(safe-area-inset-bottom))} }

.skeleton{
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--border) 37%,var(--bg-2) 63%);
  background-size:400% 100%;animation:geser 1.3s infinite linear;border-radius:var(--r-sm);
  min-height:14px;
}
@keyframes geser{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── 9. Komponen halaman ────────────────────────────────────────────────── */

/* Login */
.center-page{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:var(--sp-5);
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--brand-soft), transparent 60%),
    radial-gradient(900px 480px at 110% 108%, var(--indigo-soft), transparent 62%),
    var(--bg);
}
.login-card{
  max-width:410px;width:100%;
  padding:var(--sp-7) var(--sp-6);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}
.login-card h1,.login-card h2{text-align:center}
.login-card .logo-bulat{
  width:64px;height:64px;margin:0 auto var(--sp-4);
  display:grid;place-items:center;font-size:1.9rem;
  border-radius:20px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--indigo));
  box-shadow:var(--shadow-brand);
}

/* Hero dashboard */
.dash-hero{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  background:linear-gradient(120deg,#0b3b38,var(--brand) 52%,#14b8a6);
  color:#fff;border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-6);
  box-shadow:var(--shadow-brand);position:relative;overflow:hidden;
}
.dash-hero::after{
  content:"";position:absolute;right:-70px;top:-80px;width:260px;height:260px;
  border-radius:50%;background:rgba(255,255,255,.10);
}
.dash-hero::before{
  content:"";position:absolute;right:60px;bottom:-110px;width:180px;height:180px;
  border-radius:50%;background:rgba(255,255,255,.07);
}
.dash-hero .salam{opacity:.9;font-size:.9rem;margin:0;font-weight:500}
.dash-hero h2{margin:4px 0 6px;font-size:1.6rem;color:#fff;letter-spacing:-.02em}
.dash-hero .sub{opacity:.92;font-size:.89rem;margin:0}
.dash-hero .hero-deco{font-size:3.4rem;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}

/* Pengumuman */
.ann{
  border-left:4px solid var(--brand);
  padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:color-mix(in srgb,var(--brand) 7%,transparent);
}
.ann p{margin:4px 0 0;font-size:.92rem;color:var(--text-2)}
.ann b{color:var(--text)}

.pulse-border{border:2px solid var(--brand);animation:pulsehalo 2.2s infinite}
@keyframes pulsehalo{
  0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,.35)}
  50%{box-shadow:0 0 0 10px rgba(13,148,136,0)}
}

.kartu-materi{
  display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--text);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.kartu-materi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}

.muted{color:var(--muted)}
.tebal{font-weight:700}
.center{text-align:center}
[data-echart]{width:100%;min-height:220px}
.echart-fail{color:var(--muted);text-align:center;padding:var(--sp-8) 0}

/* Jadwal pelajaran */
.tabel-jadwal{width:100%;border-collapse:collapse}
.tabel-jadwal th,.tabel-jadwal td{border:1px solid var(--border);padding:var(--sp-2);text-align:center;font-size:.85rem}
.tabel-jadwal th{position:static;border-radius:0}
.tabel-jadwal .slot-mapel{display:block;font-weight:700;color:var(--brand-2)}
.tabel-jadwal small{display:block;color:var(--muted)}
.tabel-jadwal .slot-kosong{color:var(--muted)}
.tabel-jadwal form{display:inline}

/* Editor teks kaya */
.rich-editor{border:1.5px solid var(--border-2);border-radius:var(--r-md);overflow:hidden;background:var(--panel)}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-2);border-bottom:1px solid var(--border);background:var(--panel-2)}
.rich-btn{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:var(--r-sm);min-height:34px;padding:0 11px;cursor:pointer;font-size:.85rem;font-weight:600;
}
.rich-btn:hover,.rich-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.rich-spacer{flex:1}
.rich-area{min-height:240px;padding:var(--sp-4) var(--sp-5);outline:none;line-height:1.75}
.rich-source{width:100%;min-height:240px;border:0;padding:var(--sp-4) var(--sp-5);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.85rem;background:var(--panel);color:var(--text)}

/* Prose materi/RPP */
.isi-materi{line-height:1.8;color:var(--text-2)}
.isi-materi h2{margin:var(--sp-6) 0 var(--sp-3);color:var(--text)}
.isi-materi h3{margin:var(--sp-5) 0 var(--sp-2);color:var(--text)}
.isi-materi ul,.isi-materi ol{padding-left:var(--sp-6);margin:var(--sp-3) 0}
.isi-materi li{margin-bottom:6px}
.isi-materi blockquote{border-left:4px solid var(--brand);padding:var(--sp-2) var(--sp-4);margin:var(--sp-4) 0;color:var(--muted);background:var(--panel-2);border-radius:0 var(--r-md) var(--r-md) 0}
.isi-materi table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0}
.isi-materi td,.isi-materi th{border:1px solid var(--border);padding:var(--sp-2) var(--sp-3)}
.isi-materi img{max-width:100%;border-radius:var(--r-md)}
.isi-materi code{background:var(--bg-2);padding:2px 6px;border-radius:6px;font-size:.88em}

/* Kuitansi */
.kuitansi{max-width:720px;margin:0 auto;border:2px solid var(--brand);border-radius:var(--r-lg);padding:var(--sp-6);background:#fff;color:#111;box-shadow:var(--shadow-lg)}
.kuitansi header{display:flex;justify-content:space-between;gap:var(--sp-3);border-bottom:2px dashed var(--brand);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4)}
.kuitansi h3{margin:0;color:var(--brand-2);letter-spacing:.06em}
.kw-no{font-family:ui-monospace,monospace;font-weight:700}
.kw-row{display:flex;gap:var(--sp-3);margin:7px 0}
.kw-row b{min-width:170px}
.kw-jumlah{font-size:1.4rem;font-weight:800;color:var(--brand-2)}
.kw-qr{width:110px;height:110px}
.kw-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:var(--sp-5);gap:var(--sp-4)}
.kw-ttd{text-align:center;min-width:200px}
.kw-ttd .garis{margin-top:64px;border-top:1px solid #333;padding-top:4px}
.kw-batal{position:relative;overflow:hidden}
.kw-batal::after{content:"DIBATALKAN";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--bad);opacity:.3;transform:rotate(-18deg);font-weight:900;pointer-events:none}

/* ── 10. Mobile / PWA ───────────────────────────────────────────────────── */
.bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--border);
  padding:var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(2,6,23,.10);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;padding:6px 2px;
  border:0;background:none;color:var(--muted);
  font:inherit;font-size:.67rem;font-weight:600;
  text-decoration:none;cursor:pointer;border-radius:var(--r-md);
  transition:color .15s var(--ease),background .15s var(--ease);
}
.bn-item:hover{text-decoration:none}
.bn-item .bn-ico{font-size:1.32rem;line-height:1;transition:transform .18s var(--ease)}
.bn-item.active{color:var(--brand)}
.bn-item.active .bn-ico{transform:translateY(-2px) scale(1.08)}
.bn-item.active::before{
  content:"";position:absolute;margin-top:-10px;width:26px;height:3px;border-radius:99px;background:var(--brand);
}
.bn-item:active{background:var(--bg-2);transform:scale(.94)}

@media (max-width:1024px){
  .main{padding:var(--sp-5) var(--sp-5) var(--sp-8)}
  .topbar{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);padding:var(--sp-3) var(--sp-5)}
}

@media (max-width:860px){
  :root{ --sidebar-w:282px }
  body{font-size:15px}
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;z-index:50;width:var(--sidebar-w);
    transform:translateX(-102%);transition:transform .28s var(--ease);
    box-shadow:var(--shadow-lg);
    padding-top:calc(var(--sp-5) + env(safe-area-inset-top));
  }
  .sidebar.open{transform:none}
  .sidebar .sb-close{
    display:grid;place-items:center;position:absolute;top:14px;right:12px;
    width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;
  }
  #menuBtn{display:inline-flex}
  .main{
    padding:var(--sp-4) var(--sp-4) calc(84px + env(safe-area-inset-bottom));
    padding-top:calc(var(--sp-4) + env(safe-area-inset-top));
  }
  .topbar{
    margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
    padding:var(--sp-2) var(--sp-4);
    padding-top:calc(var(--sp-2) + env(safe-area-inset-top));
  }
  .topbar h1{font-size:1.12rem}
  .userchip{
    order:3;width:100%;justify-content:flex-start;
    border-radius:var(--r-md);padding:var(--sp-2);font-size:.8rem;
  }
  .bottomnav{display:flex}
  .card{padding:var(--sp-4);border-radius:var(--r-md);margin-bottom:var(--sp-4)}
  .dash-hero{padding:var(--sp-5);border-radius:var(--r-lg)}
  .dash-hero h2{font-size:1.28rem}
  .dash-hero .hero-deco{font-size:2.4rem}
  .grid,.grid2{gap:var(--sp-3)}
  .grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .card.stat .num{font-size:1.7rem}
  .form-grid{grid-template-columns:1fr;gap:0}
  .btn{width:auto}
  .form-aksi .btn{flex:1 1 auto}
  table{font-size:.86rem}
  th,td{padding:10px var(--sp-2)}
}

@media (max-width:480px){
  .main{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .topbar{margin-left:calc(var(--sp-3) * -1);margin-right:calc(var(--sp-3) * -1);padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .card.stat{padding:var(--sp-3)}
  .card.stat .ikon{width:38px;height:38px;font-size:1.15rem}
  .card.stat .num{font-size:1.45rem}
  .kw-row{flex-direction:column;gap:0}
  .kw-row b{min-width:0}
}

/* Mode terpasang (standalone): rasa aplikasi native */
@media (display-mode: standalone){
  .topbar{position:sticky;background:var(--panel);border-bottom:1px solid var(--border)}
  a{-webkit-touch-callout:none}
  .sidebar,.bottomnav,.topbar{user-select:none}
}

/* Tombol aksi mengambang */
.fab{
  position:fixed;right:var(--sp-4);
  bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:59;display:none;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font-size:1.5rem;box-shadow:var(--shadow-brand);
}
.fab:active{transform:scale(.93)}
@media (max-width:860px){ .fab.tampil{display:grid;place-items:center} }

/* Cetak */
@media print{
  .sidebar,.topbar,.bottomnav,.fab,.drawer-overlay,.no-print{display:none!important}
  .layout{display:block}
  .main{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  body{background:#fff;color:#000;font-size:12pt}
  .kuitansi{box-shadow:none}
  a{color:#000;text-decoration:none}
}

/* ============================================================
   11. LMS — Ruang Belajar (v0.12.1)
   ============================================================ */

/* Remah roti / breadcrumb */
.remah{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:.9rem;color:var(--muted);margin-bottom:var(--sp-4)}
.remah a{color:var(--brand);font-weight:600;text-decoration:none}
.remah a:hover{text-decoration:underline}
.remah b{color:var(--text)}

/* Hero LMS */
.lms-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;padding:var(--sp-6) var(--sp-6);margin-bottom:var(--sp-5);
  border-radius:var(--r-xl);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 55%,#134e4a 100%);
  box-shadow:var(--shadow-brand)}
.lms-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.10)}
.lms-hero.besar{padding:var(--sp-7) var(--sp-6)}
.lms-hero h2{margin:var(--sp-1) 0;color:#fff;font-size:clamp(1.4rem,3.4vw,2rem)}
.lms-hero .salam{margin:0;opacity:.9;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.lms-hero .sub{margin:var(--sp-2) 0 0;opacity:.92}
.lms-hero .btn{margin-top:var(--sp-4)}

/* Cincin persentase */
.cincin{--p:0;position:relative;width:92px;height:92px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--brand-3) calc(var(--p)*1%),rgba(255,255,255,.22) 0)}
.cincin.besar{width:112px;height:112px}
.cincin::before{content:"";position:absolute;inset:9px;border-radius:50%;
  background:rgba(4,47,46,.55);backdrop-filter:blur(2px)}
.cincin span{position:relative;font-weight:800;font-size:1.05rem;color:#fff}

/* Bilah progres tipis */
.bar{height:8px;border-radius:var(--r-full);background:var(--border);overflow:hidden;
  margin:var(--sp-3) 0}
.bar>span{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand),var(--brand-3));transition:width .5s var(--ease)}

/* Kartu mata pelajaran */
.kartu-mapel{display:flex;flex-direction:column;gap:var(--sp-1);text-decoration:none;
  color:inherit;transition:transform .16s var(--ease),box-shadow .2s var(--ease)}
.kartu-mapel:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}
.kartu-mapel .ikon{font-size:2rem;width:56px;height:56px;border-radius:var(--r-lg);
  display:grid;place-items:center;background:var(--brand-soft);margin-bottom:var(--sp-2)}
.kartu-mapel strong{font-size:1.05rem}
.kartu-mapel:nth-of-type(6n+2) .ikon{background:var(--indigo-soft)}
.kartu-mapel:nth-of-type(6n+3) .ikon{background:var(--pink-soft)}
.kartu-mapel:nth-of-type(6n+4) .ikon{background:var(--sky-soft)}
.kartu-mapel:nth-of-type(6n+5) .ikon{background:var(--violet-soft)}
.kartu-mapel:nth-of-type(6n+6) .ikon{background:var(--warn-soft)}

/* Bab — akordeon */
details.bab{padding:0;margin-bottom:var(--sp-4);overflow:hidden}
details.bab>summary{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;
  padding:var(--sp-4) var(--sp-5);list-style:none;user-select:none;
  transition:background .18s var(--ease)}
details.bab>summary::-webkit-details-marker{display:none}
details.bab>summary:hover{background:var(--brand-soft)}
details.bab[open]>summary{border-bottom:1px solid var(--border)}
.bab-no{flex:none;width:34px;height:34px;border-radius:var(--r-full);display:grid;
  place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.bab-judul{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.bab-judul strong{font-size:1.02rem}
.bab-persen{flex:none;font-weight:800;color:var(--brand);
  background:var(--brand-soft);padding:4px 10px;border-radius:var(--r-full);font-size:.85rem}
details.bab .bar{margin:0 var(--sp-5)}

/* Daftar materi dalam bab */
.daftar-materi{list-style:none;margin:0;padding:var(--sp-2) 0}
.item-materi>a{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);text-decoration:none;color:inherit;
  border-left:3px solid transparent;transition:background .16s var(--ease),border-color .16s var(--ease)}
.item-materi>a:hover{background:var(--brand-soft);border-left-color:var(--brand);text-decoration:none}
.item-materi .tanda{flex:none;width:28px;height:28px;border-radius:var(--r-full);display:grid;
  place-items:center;font-size:.85rem;font-weight:700;background:var(--bg);
  border:1.5px solid var(--border);color:var(--muted)}
.item-materi.selesai .tanda{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.item-materi .teks{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.item-materi .teks strong{font-weight:600}
.item-materi.selesai .teks strong{color:var(--muted)}
.item-materi .meta{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.item-materi .panah{color:var(--muted);font-size:1.3rem;line-height:1}

/* Tata letak baca: isi + daftar isi */
.grid.lms-baca{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5);align-items:start}
.lms-samping{position:sticky;top:calc(var(--appbar-h) + var(--sp-4));max-height:calc(100vh - var(--appbar-h) - var(--sp-8));overflow:auto}
.lms-samping h3{margin-top:0}
.toc-bab{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;margin:var(--sp-4) 0 var(--sp-2)}
.toc{list-style:none;margin:0;padding:0;border-left:2px solid var(--border)}
.toc li>a{display:flex;gap:var(--sp-2);align-items:flex-start;padding:7px var(--sp-3);
  font-size:.92rem;color:var(--text);text-decoration:none;border-radius:0 var(--r-sm) var(--r-sm) 0}
.toc li>a:hover{background:var(--brand-soft);text-decoration:none}
.toc li.ini{border-left:2px solid var(--brand);margin-left:-2px}
.toc li.ini>a{background:var(--brand-soft);color:var(--brand-2);font-weight:700}
.toc .tanda{flex:none;color:var(--muted)}

/* Kepala materi + isi */
.materi-kepala{border-bottom:1px solid var(--border);padding-bottom:var(--sp-4);margin-bottom:var(--sp-5)}
.materi-kepala h2{margin:var(--sp-3) 0 var(--sp-2);font-size:clamp(1.35rem,3vw,1.9rem)}
.materi-isi .isi-materi{font-size:1.02rem;line-height:1.85}
.materi-isi .isi-materi h2,.materi-isi .isi-materi h3{margin-top:var(--sp-6);scroll-margin-top:calc(var(--appbar-h) + 16px)}
.materi-isi .isi-materi img{max-width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.materi-isi .isi-materi blockquote{border-left:4px solid var(--brand);background:var(--brand-soft);
  margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-radius:0 var(--r-md) var(--r-md) 0}
.materi-isi .isi-materi pre{background:#0b1220;color:#e2e8f0;padding:var(--sp-4);
  border-radius:var(--r-md);overflow:auto}
.materi-isi .isi-materi li{margin:var(--sp-2) 0}

/* Bilah progres membaca (paling atas) */
.baca-progres{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;background:transparent;pointer-events:none}
.baca-progres>span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--brand-3),var(--accent));transition:width .1s linear}

/* Navigasi sebelumnya / berikutnya */
.nav-materi{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-6)}
.nav-kartu{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4);text-decoration:none;
  color:inherit;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--panel);
  transition:border-color .18s var(--ease),transform .16s var(--ease),box-shadow .2s var(--ease)}
.nav-kartu:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm);text-decoration:none}
.nav-kartu small{color:var(--muted);font-weight:600}
.nav-kartu.kanan{text-align:right}

@media (max-width:1024px){
  .grid.lms-baca{grid-template-columns:1fr}
  .lms-samping{position:static;max-height:none;order:-1}
}
@media (max-width:600px){
  .lms-hero{padding:var(--sp-5) var(--sp-4)}
  .cincin,.cincin.besar{width:76px;height:76px}
  .nav-materi{grid-template-columns:1fr}
  .nav-kartu.kanan{text-align:left}
  .item-materi .meta .badge{display:none}
  .item-materi .meta .panah{display:block}
  details.bab>summary{padding:var(--sp-3) var(--sp-4)}
  .item-materi>a{padding:var(--sp-3) var(--sp-4)}
}
@media print{
  .baca-progres,.lms-samping,.nav-materi,.remah{display:none!important}
  .grid.lms-baca{grid-template-columns:1fr}
}

/* --- LMS sisi guru: struktur materi --- */
.mapel-blok{border-top:1px solid var(--border)}
.mapel-blok:first-of-type{border-top:0}
.mapel-kepala{padding:var(--sp-4) var(--sp-5) var(--sp-2);font-size:.8rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand-2);background:var(--brand-soft)}
details.bab.tipis{border:0;border-radius:0;box-shadow:none;margin:0;background:transparent}
details.bab.tipis>summary{padding:var(--sp-3) var(--sp-5);background:transparent}
details.bab.tipis>summary:hover{background:var(--bg)}
details.bab.tipis .bab-no{width:28px;height:28px;font-size:.82rem}
.baris-kelola{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--border)}
.baris-kelola .teks{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.baris-kelola .teks a{text-decoration:none;color:var(--text)}
.baris-kelola .teks a:hover strong{color:var(--brand);text-decoration:underline}
.aksi-baris{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;flex:none}
.aksi-baris form{display:inline}
@media (max-width:860px){
  .baris-kelola{flex-wrap:wrap}
  .aksi-baris{width:100%;justify-content:flex-start}
}

/* ==========================================================================
   12. Lapis "Profesional" - v0.13.0
   Tipografi Inter, netral abu-biru, sudut lebih rapat, bayangan tipis
   berlapis, ikon SVG Lucide, kerapatan informasi lebih tinggi.
   Lapisan di atas token lama sehingga kelas lama tetap aman.
   ========================================================================== */
:root{
  --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,monospace;

  --brand:#0f766e; --brand-2:#115e59; --brand-3:#2dd4bf; --brand-soft:#e6fbf7;
  --primary:#0f766e; --primary-2:#115e59;
  --accent:#b45309;  --accent-soft:#fdf3e3;
  --indigo:#4f46e5;  --indigo-soft:#eef1fe;
  --sky:#0284c7;     --sky-soft:#e6f3fb;
  --violet:#7c3aed;  --violet-soft:#f1ecfe;
  --pink:#be185d;    --pink-soft:#fdeaf2;

  --bg:#f6f8fb; --bg-2:#eef2f7; --panel:#ffffff; --panel-2:#fafbfd;
  --text:#111827; --text-2:#374151; --muted:#6b7280;
  --border:#e5e8ee; --border-2:#d3d9e3;
  --sidebar:#101828; --sidebar-2:#0b111f; --sidebar-text:#aab3c4;

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow:0 4px 12px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.05);
  --shadow-lg:0 16px 40px rgba(16,24,40,.12),0 4px 10px rgba(16,24,40,.06);
  --shadow-brand:0 6px 18px rgba(15,118,110,.22);
  --leading:1.6; --appbar-h:58px;
}
html,body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--text);font-size:14.5px;letter-spacing:-.006em}
code,pre,.mono{font-family:var(--font-mono)}
h1,h2,h3,h4{letter-spacing:-.021em;font-weight:650}
h1{font-size:1.16rem} h2{font-size:1.05rem} h3{font-size:.95rem}

/* Ikon Lucide: <i data-lucide> diganti jadi <svg class=lucide>; bila CDN gagal,
   emoji cadangan di dalamnya tetap tampil. */
.lucide,svg.lucide{width:18px;height:18px;stroke-width:1.75;flex:none;vertical-align:-.18em}
i[data-lucide]{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:1;width:18px;height:18px}
.bn-ico svg.lucide{width:21px;height:21px;stroke-width:1.8}
.btn svg.lucide{width:16px;height:16px;margin-right:6px;margin-left:-2px}
.btn.sm svg.lucide{width:14px;height:14px}
.topbar .userchip svg.lucide{width:18px;height:18px}

/* Sidebar */
.sidebar{background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));border-right:1px solid rgba(255,255,255,.06)}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 16px 10px;color:#fff;font-weight:700;font-size:.98rem;text-decoration:none;letter-spacing:-.02em}
.brand-ikon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),#0891b2);color:#fff;box-shadow:0 3px 10px rgba(13,148,136,.35);flex:none}
.brand-ikon svg.lucide{width:19px;height:19px;stroke-width:2}
.brand-teks{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-teks small{font-size:.66rem;font-weight:500;color:#7f8ba3;letter-spacing:.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .unit{display:inline-block;margin:0 16px 12px;padding:3px 9px;font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;color:#9fb6c9;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.sidebar .grp{margin:16px 16px 6px;font-size:.65rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#61708a}
.sidebar nav a{display:flex;align-items:center;gap:11px;margin:1px 8px;padding:8px 10px;border-radius:var(--r-md);color:var(--sidebar-text);font-size:.855rem;font-weight:500;text-decoration:none;transition:background .14s ease,color .14s ease}
.sidebar nav a .ic{opacity:.72;transition:opacity .14s}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a:hover .ic{opacity:1}
.sidebar nav a.active{background:rgba(45,212,191,.13);color:#fff;font-weight:600;box-shadow:inset 2px 0 0 var(--brand-3)}
.sidebar nav a.active .ic{opacity:1;color:var(--brand-3)}

/* App bar */
.topbar{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);box-shadow:none}
.topbar h1{font-size:1.02rem;font-weight:650;color:var(--text)}
.topbar .userchip{gap:4px}
.topbar .userchip .nm{font-size:.82rem;font-weight:550;color:var(--text-2)}
.topbar .userchip .sep{display:none}
.topbar .userchip>a{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:var(--r-md);color:var(--muted);position:relative;transition:background .14s,color .14s}
.topbar .userchip>a:hover{background:var(--bg-2);color:var(--brand)}
.topbar .avatar{background:linear-gradient(140deg,var(--brand),#0891b2);font-size:.72rem;font-weight:700}
#menuBtn{border-radius:var(--r-md)}

/* Kartu dan tabel */
.card{border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.card:hover{box-shadow:var(--shadow-sm)}
.card-head{border-bottom:1px solid var(--border);padding-bottom:var(--sp-3)}
.card-head h2,.card-head h3{font-size:.95rem;letter-spacing:-.015em}
.card.stat{border-radius:var(--r-lg)}
.card.stat .num{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.card.stat .lbl{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--muted)}
table{font-size:.855rem}
thead th{background:var(--panel-2);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border-2);padding:9px 12px;white-space:nowrap}
tbody td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:var(--panel-2)}
td .num,td.angka{font-variant-numeric:tabular-nums}

/* Tombol dan formulir */
.btn{border-radius:var(--r-md);font-weight:600;font-size:.855rem;letter-spacing:-.006em;box-shadow:var(--shadow-xs);transition:transform .1s ease,box-shadow .16s,background .16s,border-color .16s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn.ghost,.btn.netral{background:var(--panel);border:1px solid var(--border-2);color:var(--text-2)}
.btn.ghost:hover,.btn.netral:hover{background:var(--panel-2);border-color:var(--muted);color:var(--text)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input,select,textarea{border-radius:var(--r-md);border:1px solid var(--border-2);font-family:var(--font);font-size:.875rem;background:var(--panel)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.13);outline:none}
label{font-size:.79rem;font-weight:600;color:var(--text-2)}
.hint{font-size:.75rem;color:var(--muted)}
.badge{border-radius:6px;font-size:.7rem;font-weight:650;padding:2px 7px}
.alert{border-radius:var(--r-md);font-size:.86rem;border-left-width:3px}

/* LMS */
.lms-hero{background:linear-gradient(135deg,#0f766e 0%,#115e59 55%,#164e63 100%);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.kartu-mapel{border-radius:var(--r-lg);transition:transform .16s ease,box-shadow .16s}
.kartu-mapel:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.item-materi{transition:background .13s}
.item-materi:hover{background:var(--panel-2)}
.materi-isi .isi-materi{font-size:1rem;line-height:1.78;color:var(--text-2);max-width:72ch}
.materi-isi .isi-materi h2,.materi-isi .isi-materi h3{color:var(--text);margin-top:1.6em}
.toc a{font-size:.82rem}
@media print{i[data-lucide],svg.lucide{display:none !important}}