/* =========================================================
   GLASS DASHBOARD — HTML + CSS murni (tanpa JavaScript)
   ---------------------------------------------------------
   1. Token & dasar          6. Komponen data
   2. Latar & kerangka       7. Form & seleksi
   3. Sidebar                8. Overlay: modal / drawer / palette
   4. Transisi halaman       9. Toast & alert
   5. Halaman               10. Autentikasi & responsif
   ========================================================= */

@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }

/* ============ 1. TOKEN & DASAR ============ */
:root {
  --text: #f4efe9;
  --muted: rgba(244, 239, 233, .56);
  --faint: rgba(244, 239, 233, .32);
  --glass: rgba(40, 33, 29, .44);    /* tint kaca utama — lebih bening dari sebelumnya */
  --glass-2: rgba(46, 38, 33, .64);  /* kaca lapis dua: modal, drawer, palette */
  --card: rgba(255, 255, 255, .055); /* "fill" ala iOS: putih tipis, bukan kotak gelap */
  --sunk: rgba(255, 255, 255, .06);  /* field & track ikut fill putih */
  --line: rgba(255, 255, 255, .12);
  --hair: rgba(255, 255, 255, .07);
  --blue: #3d7bff;
  --blue-l: #9dbcff;
  --green: #3ecf9a;
  --amber: #f0b24a;
  --rose: #ff7d8f;
  --violet: #b08cff;
  --edge: 12px;   /* jarak jendela ke tepi layar: atas, kiri, kanan, bawah */
  --r-lg: 34px;   /* sudut lebih bulat, mendekati squircle iOS */
  --r-md: 22px;
  --r-sm: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 100vh; padding: var(--edge) 0 0;
  font: 12px/1.4 var(--sans);
  color: var(--text);
  background: #1d1a19;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
ul, ol { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
small { color: var(--muted); font-size: 11px; }
em { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
label[for] { cursor: pointer; }
.hide { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.push { margin-left: auto; }
.mt { margin-top: 14px; }
.center { text-align: center; }

.scroll-y { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.scroll-y::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; border-radius: 6px; }

/* ============ 2. LATAR & KERANGKA ============ */
/* foto latar. inset negatif + scale kecil supaya tepi blur saat intro tidak terlihat */
.scene {
  position: fixed; inset: -80px; z-index: -1;   /* melebihi layar: tepi blur yang memudar tidak terlihat */
  background: #0d0c0c url("images.jpg") center 55% / cover no-repeat;
  /* images.jpg ditampilkan BURAM, bukan foto aslinya. Elemen ini fixed & diam,
     jadi blur cukup dihitung sekali (lalu disimpan sebagai lapisan GPU) — tidak
     dihitung ulang saat menggulir. Blur juga menyamarkan resolusi foto yang kecil.
     Intro hanya opacity + scale (dikerjakan GPU, murah). */
  filter: blur(30px) brightness(.8) saturate(1.25);
  animation: sceneIn 1.2s cubic-bezier(.3, .6, .2, 1) backwards;
}

/* kontrol tersembunyi (radio halaman + checkbox overlay) */
.pg, .ctl { position: fixed; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Tata letak: sidebar + panel utama menyatu menjadi SATU jendela datar yang
   memenuhi layar. Jarak ke tepi layar sama di semua sisi (--edge); tinggi
   jendela = sisa layar setelah footer (flex: 1 di dalam body setinggi layar),
   jadi tidak perlu angka tinggi footer yang ditebak. */
.app {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: calc(100% - 2 * var(--edge));
  flex: 1 1 0; min-height: 0;
  margin: 0 auto;
}
.app > .side  { grid-column: 1; grid-row: 1; }
.app > .main  { grid-column: 2; grid-row: 1; }

/* --- MATERIAL KACA: karakter "liquid glass" seperti di iPhone -----------
   Disusun tiga lapis, sama seperti material iOS:
   1) backdrop-filter      blur besar + saturate tinggi (vibrancy) + brightness
                           sedikit diturunkan, supaya warna latar "merembes"
                           masuk ke panel alih-alih hanya diburamkan;
   2) isi panel            tint tipis + kilau specular di sudut kiri-atas,
                           seolah ada satu sumber cahaya di luar layar;
   3) rim lensa (::before) garis 1px yang terang di tepi atas, nyaris padam di
                           tengah, lalu terang lagi di tepi bawah — meniru
                           cahaya yang dibiaskan oleh ketebalan kaca.
   Border biasa dilepas: rim itulah garis tepinya.                          */
.glass {
  position: relative;
  background:
    radial-gradient(135% 105% at 4% -12%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 36%, transparent 66%),
    var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(.95);
  backdrop-filter: blur(26px) saturate(1.6) brightness(.95);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .20),
    inset 0 -1px 1px rgba(0, 0, 0, .18),
    0 1px 2px rgba(28, 17, 7, .18),
    0 28px 64px -16px rgba(28, 17, 7, .55);
  animation: appear .9s var(--ease) backwards;
}
@keyframes appear { from { opacity: 0; filter: blur(16px); } to { opacity: 1; filter: none; } }

/* rim lensa, dipakai semua permukaan kaca (panel, modal, drawer, toast, menu) */
.glass::before, .modal::before, .drawer::before, .toast::before, .dd-menu::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .80) 0%,  rgba(255, 255, 255, .30) 14%,
    rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .07) 58%,
    rgba(255, 255, 255, .34) 84%, rgba(255, 255, 255, .72) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* sambungan jendela: sidebar = sisi kiri, panel utama = sisi kanan.
   Rim lensa tidak digambar di sambungan, diganti garis pemisah tipis. */
.app > .side { border-radius: var(--r-lg) 0 0 var(--r-lg); z-index: 1;
  background:
    radial-gradient(135% 105% at 4% -12%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 36%, transparent 66%),
    rgba(34, 28, 24, .52); }
.app > .main { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.app > .side::before { padding: 1px 0 1px 1px; }
.app > .main::before { padding: 1px 1px 1px 0; }
.app > .side::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(255, 255, 255, .09); }

/* ============ 3. SIDEBAR ============ */
/* MENU STATIS — panel menu tidak miring, tidak beranimasi masuk, dan isinya
   tidak bergeser saat hover/aktif. Hanya warna & latar yang berubah.        */
.side {
  display: flex; flex-direction: column; padding: 16px 10px; min-height: 0;
  animation-delay: .1s;   /* sidebar = bagian dari jendela utama, muncul bersamaan */
}
.who { display: flex; align-items: center; gap: 9px; padding: 2px 4px 12px; }
.who > div { min-width: 0; flex: 1; }
.who strong { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { font-size: 10px; }
.ghost-r { position: relative; width: 26px; height: 26px; }
.ping { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rose); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }

/* --nav-h + --nav-gap = satu "langkah" sorotan. Semua item sama tinggi supaya
   posisi sorotan bisa dihitung murni dengan CSS. */
.side { --nav-h: 32px; --nav-gap: 2px; }
.side nav { position: relative; display: flex; flex-direction: column; gap: var(--nav-gap); min-height: 0; }
.side .menu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.side .menu::-webkit-scrollbar { display: none; }
.side .foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair); }
.side .foot .nav-hl { top: 10px; }
.nav {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  height: var(--nav-h); flex: none; padding: 0 10px; border-radius: var(--r-sm);
  color: rgba(244, 239, 233, .82); font-weight: 500; cursor: pointer;
  transition: color .3s var(--ease), background-color .2s;
}
.nav:hover { background: rgba(255, 255, 255, .07); color: var(--text); }

/* --- sorotan menu yang MELUNCUR (seperti di video) ---------------------
   Satu pil kaca per grup menu. Saat menu lain dipilih, pil bergeser
   (translateY) dari item lama ke item baru — melewati item di antaranya —
   bukan berpindah seketika. */
.nav-hl {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: var(--nav-h); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 3px rgba(20, 12, 6, .16);
  transform: translateY(calc(var(--k, 0) * (var(--nav-h) + var(--nav-gap))));
  opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.3, .75, .2, 1), opacity .22s var(--ease);
}
#p-overview:checked     ~ .app .menu { --k: 0; }
#p-inbox:checked        ~ .app .menu { --k: 1; }
#p-leads:checked        ~ .app .menu { --k: 2; }
#p-deals:checked        ~ .app .menu { --k: 3; }
#p-contacts:checked     ~ .app .menu { --k: 4; }
#p-companies:checked    ~ .app .menu { --k: 5; }
#p-tasks:checked        ~ .app .menu { --k: 6; }
#p-calendar:checked     ~ .app .menu { --k: 7; }
#p-reports:checked      ~ .app .menu { --k: 8; }
#p-integrations:checked ~ .app .menu { --k: 9; }
#p-tables:checked       ~ .app .menu { --k: 10; }
#p-soal:checked         ~ .app .menu { --k: 11; }
#p-settings:checked     ~ .app .foot { --k: 0; }
#p-support:checked      ~ .app .foot { --k: 1; }
:where(#p-overview, #p-inbox, #p-leads, #p-deals, #p-contacts, #p-companies,
       #p-tasks, #p-calendar, #p-reports, #p-integrations, #p-tables, #p-soal):checked ~ .app .menu .nav-hl,
:where(#p-settings, #p-support):checked ~ .app .foot .nav-hl { opacity: 1; }
.badge {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 8px; background: var(--blue); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.badge.amber { background: rgba(240, 178, 74, .3); color: var(--amber); }
.badge.green { background: rgba(62, 207, 154, .22); color: var(--green); }

/* --- nav aktif --- */
#p-overview:checked     ~ .app .nav[for="p-overview"],
#p-inbox:checked        ~ .app .nav[for="p-inbox"],
#p-leads:checked        ~ .app .nav[for="p-leads"],
#p-deals:checked        ~ .app .nav[for="p-deals"],
#p-contacts:checked     ~ .app .nav[for="p-contacts"],
#p-companies:checked    ~ .app .nav[for="p-companies"],
#p-tasks:checked        ~ .app .nav[for="p-tasks"],
#p-calendar:checked     ~ .app .nav[for="p-calendar"],
#p-reports:checked      ~ .app .nav[for="p-reports"],
#p-integrations:checked ~ .app .nav[for="p-integrations"],
#p-tables:checked       ~ .app .nav[for="p-tables"],
#p-soal:checked         ~ .app .nav[for="p-soal"],
#p-components:checked   ~ .app .nav[for="p-components"],
#p-settings:checked     ~ .app .nav[for="p-settings"],
#p-support:checked      ~ .app .nav[for="p-support"] {
  color: #fff; background-color: transparent;  /* latar aktif digambar oleh .nav-hl yang meluncur */
}
.pg:focus-visible ~ .app .side { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ============ 4. TRANSISI HALAMAN ============ */
.main { padding: 20px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; animation-delay: .1s; }
.pages { position: relative; flex: 1; min-height: 0; animation: appear .7s .45s var(--ease) backwards; }  /* sekali saat memuat: panel kaca kosong dulu, baru isinya */
/* Halaman non-aktif benar-benar tidak dirender (display:none) — bukan sekadar
   opacity:0. Menumpuk 13 halaman transparan di atas panel ber-backdrop-filter
   membuat Chrome menyisakan "ghost" kartu saat berpindah menu, dan memaksa
   setiap halaman ikut dirasterisasi. */
.page {
  position: absolute; inset: 0;
  display: none; flex-direction: column; gap: 12px;
  padding: 2px 10px 2px 2px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
.page > * { flex-shrink: 0; }
.page::-webkit-scrollbar { width: 6px; }
.page::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }

/* Seperti di video: isi halaman lama hilang seketika, panel kaca tetap diam,
   lalu blok-blok halaman baru "fokus" di tempat (blur → tajam) berurutan dari
   atas ke bawah. Tidak ada gerakan geser/zoom pada halaman. */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes focus {
  from { opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: none; }
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } }

/* --- halaman aktif: muncul + semua animasi di dalamnya di-set ulang --- */
#p-overview:checked     ~ .app #overview,
#p-inbox:checked        ~ .app #inbox,
#p-leads:checked        ~ .app #leads,
#p-deals:checked        ~ .app #deals,
#p-contacts:checked     ~ .app #contacts,
#p-companies:checked    ~ .app #companies,
#p-tasks:checked        ~ .app #tasks,
#p-calendar:checked     ~ .app #calendar,
#p-reports:checked      ~ .app #reports,
#p-integrations:checked ~ .app #integrations,
#p-tables:checked       ~ .app #tables,
#p-soal:checked         ~ .app #soal,
#p-components:checked   ~ .app #components,
#p-settings:checked     ~ .app #settings,
#p-support:checked      ~ .app #support {
  display: flex;
  animation: pageIn .2s linear backwards;

  /* blok isi masuk berurutan (judul dulu, lalu kartu, lalu tabel/grafik) */
  & > * { animation: focus .6s .08s var(--ease) backwards; }
  & > :nth-child(2)  { animation-delay: .2s; }
  & > :nth-child(3)  { animation-delay: .32s; }
  & > :nth-child(4)  { animation-delay: .44s; }
  & > :nth-child(5)  { animation-delay: .54s; }
  & > :nth-child(6)  { animation-delay: .62s; }
  & > :nth-child(7)  { animation-delay: .7s; }
  & > :nth-child(n+8){ animation-delay: .76s; }

  /* grafik & angka ikut hidup ulang tiap kali halaman dibuka */
  & .count { animation: count 1.3s .15s var(--ease) both; }
  & .ticks { animation: wipe 1.1s .3s var(--ease) both; }
  & .meter i, & .funnel i, & .prog i { animation: growX 1s .3s var(--ease) both; }
  & .bars > div, & .pills > div { animation: growY .9s var(--ease) both; }
  & .donut { animation: spin 1.1s var(--ease) both; }
  & .donut > div { animation: unspin 1.1s var(--ease) both; }
  & .ev { animation: focus .6s backwards; }
  & .ring { animation: ringIn 1.2s .2s var(--ease) both; }
  & .line { animation: wipe 1.6s .4s cubic-bezier(.4, 0, .2, 1) both; }
  & .mlist > li, & .tasks > li, & .timeline > li, & .wh > li, & .sess > li { animation: slideIn .5s var(--ease) backwards; }
  & .mlist > :nth-child(2), & .tasks > :nth-child(2), & .timeline > :nth-child(2), & .wh > :nth-child(2) { animation-delay: .05s; }
  & .mlist > :nth-child(3), & .tasks > :nth-child(3), & .timeline > :nth-child(3), & .wh > :nth-child(3) { animation-delay: .10s; }
  & .mlist > :nth-child(4), & .tasks > :nth-child(4) { animation-delay: .15s; }
  & .mlist > :nth-child(5), & .tasks > :nth-child(5) { animation-delay: .20s; }
  & .mlist > :nth-child(n+6), & .tasks > :nth-child(n+6) { animation-delay: .25s; }
  & .deal { animation: focus .6s var(--ease) backwards; }
  & .lane:nth-child(2) .deal { animation-delay: .07s; }
  & .lane:nth-child(3) .deal { animation-delay: .14s; }
  & .lane:nth-child(4) .deal { animation-delay: .21s; }
  & .person, & .integ { animation: focus .6s var(--ease) backwards; }
  & .person:nth-child(2n), & .integ:nth-child(2n) { animation-delay: .07s; }
  & .person:nth-child(3n), & .integ:nth-child(3n) { animation-delay: .14s; }
  & .person:nth-child(4n) { animation-delay: .21s; }
}

/* ============ 5. ELEMEN HALAMAN ============ */
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 2px; flex-wrap: wrap; }
h1 { font: 500 24px/1.15 var(--serif); letter-spacing: .01em; }
.head p { color: var(--muted); font-size: 11px; margin-top: 3px; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- avatar --- */
.av {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c, #c0563f); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.av-lg { width: 34px; height: 34px; font: 600 13px var(--serif); }
.av-xl { width: 52px; height: 52px; font: 600 20px var(--serif); }
.av.more { background: rgba(255, 255, 255, .18); color: var(--text); font-size: 8px; }
.av-stack { display: inline-flex; }
.av-stack .av + .av { margin-left: -8px; }
.av-stack .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
.pres { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #8b837c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.pres.on { background: var(--green); }
.person .pres { top: 12px; right: 12px; bottom: auto; width: 7px; height: 7px; }

/* --- tombol --- */
.round {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .10); border: 1px solid var(--line); color: var(--text);
  transition: background .2s, transform .2s;
}
.round:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.round, .pill, .chip, .ghost, .kbd, .btn.out, .seg-ctl { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.round.sm { width: 22px; height: 22px; }
.round.sm svg { width: 13px; height: 13px; }
.round.white { background: #fff; color: #2a211c; border: 0; width: 28px; height: 28px; }
.round.ok { color: var(--green); }
.round.no { color: var(--rose); }
.mini-b { display: inline-grid; place-items: center; opacity: .6; transition: opacity .2s; }
.mini-b:hover { opacity: 1; }

.pill, .chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; font-size: 11px; color: var(--text);
  background: rgba(255, 255, 255, .10); border: 1px solid var(--line); text-decoration: none;
  transition: background .2s, transform .2s;
}
.pill:hover { background: rgba(255, 255, 255, .18); }
label.pill:hover { transform: translateY(-1px); }
.pill svg { width: 13px; height: 13px; }
.chip { padding: 3px 9px; font-size: 10px; color: var(--muted); }
label.chip:hover, .chip:hover { color: var(--text); }
.chip.err { color: var(--rose); background: rgba(255, 125, 143, .16); border-color: transparent; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; color: #fff; font-weight: 600; font-size: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 60%), var(--blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 6px 16px rgba(61, 123, 255, .35);
  transition: transform .2s, filter .2s, box-shadow .2s; white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 13px; height: 13px; stroke-width: 2.2; }
.btn.sm { padding: 6px 13px; }
.btn.xs { padding: 4px 10px; font-size: 10px; box-shadow: none; }
.btn.lg { padding: 11px 20px; font-size: 12px; }
.btn.ic { padding: 8px; width: 30px; height: 30px; }
.btn.block { width: 100%; margin-top: 4px; }
.btn.green { background: #2fae82; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(62, 207, 154, .3); }
.btn.rose  { background: #e2566a; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(226, 86, 106, .3); }
.btn.amber { background: #d9972f; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(240, 178, 74, .3); }
.btn.out { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); box-shadow: none; color: var(--text); }
.btn.out:hover { background: rgba(255, 255, 255, .14); }
.btn.ghost-b { background: rgba(255, 255, 255, .16); box-shadow: none; }
.btn.off { opacity: .4; pointer-events: none; box-shadow: none; }
.btn.load { background: rgba(61, 123, 255, .5); box-shadow: none; }
.ghost { padding: 4px 10px; border-radius: 999px; font-size: 10px; background: rgba(255, 255, 255, .09); border: 1px solid var(--line); color: var(--text); transition: background .2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.ghost:hover { background: rgba(255, 255, 255, .2); }

.search {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; width: 190px;
  border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); color: var(--muted);
  transition: border-color .2s, width .25s;
}
.search:focus-within { border-color: rgba(157, 188, 255, .5); }
.search input { all: unset; flex: 1; min-width: 0; color: var(--text); font-size: 11px; }
.search input::placeholder { color: var(--faint); }

.kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); font: 500 9px var(--sans); color: var(--muted); }

/* --- tooltip --- */
.ttip { position: relative; display: inline-flex; }
.ttip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; z-index: 5;
  background: rgba(12, 12, 14, .94); border: 1px solid var(--line); font-size: 10px; color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ttip:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* --- kartu & grid --- */
.row { display: grid; gap: 12px; }
.two    { grid-template-columns: 1fr 1fr; }
.three  { grid-template-columns: repeat(3, 1fr); }
.four   { grid-template-columns: repeat(4, 1fr); }
.cards4 { grid-template-columns: repeat(4, 1fr); }
.wide   { grid-template-columns: 1.7fr 1fr; }
.cal    { grid-template-columns: minmax(0, 1fr) 200px; flex: 1; min-height: 280px; }
.mail   { grid-template-columns: 260px minmax(0, 1fr); flex: 1; min-height: 340px; }

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 58%), var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .10);
}
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.card-h > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.mini { width: 12px; height: 12px; opacity: .5; }

/* kartu aksi cepat */
.act { display: grid; gap: 3px; justify-items: start; transition: background .2s, transform .2s, border-color .2s; }
.act:hover { background: rgba(255, 255, 255, .07); border-color: var(--line); transform: translateY(-2px); }
.act b { font-size: 12px; }

.num { font: 500 22px/1.1 var(--serif); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.num.xl { font-size: 28px; }
.big { display: flex; align-items: center; gap: 8px; }

.up, .down, .tag-blue {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600;
  color: var(--green); background: rgba(62, 207, 154, .16);
}
.down { color: var(--rose); background: rgba(255, 125, 143, .16); }
.up.lite { color: #fff; background: rgba(255, 255, 255, .22); }
.tag-blue { color: var(--blue-l); background: rgba(61, 123, 255, .22); }
.st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.st.q { color: var(--green); background: rgba(62, 207, 154, .16); }
.st.c { color: var(--amber); background: rgba(240, 178, 74, .16); }
.st.n { color: var(--blue-l); background: rgba(61, 123, 255, .22); }
.st.r { color: var(--rose); background: rgba(255, 125, 143, .18); }

/* angka menghitung naik */
.count { --n: var(--to); counter-reset: n var(--n); }
.count::after { content: counter(n); }
@keyframes count { from { --n: 0; } to { --n: var(--to); } }
/* .k = dengan pemisah ribuan (3,241). Digit setelah koma dihitung terpisah
   supaya nol di depan tetap tampil (3,041 bukan 3,41). */
.count.k {
  --a: round(down, var(--n) / 1000, 1);
  --r: calc(var(--n) - var(--a) * 1000);
  --h: round(down, var(--r) / 100, 1);
  --t: round(down, (var(--r) - var(--h) * 100) / 10, 1);
  --o: calc(var(--r) - var(--h) * 100 - var(--t) * 10);
  counter-reset: a var(--a) h var(--h) t var(--t) o var(--o);
}
.count.k::after { content: counter(a) "," counter(h) counter(t) counter(o); }
/* widget kanan mulai dari ~60% nilainya, persis seperti di video (2,679 → 3,241) */
@keyframes countUp { from { --n: calc(var(--to) * .6); } to { --n: var(--to); } }

/* progress bergaris */
.ticks {
  height: 16px; margin-top: 12px; border-radius: 4px; width: 100%;
  background:
    repeating-linear-gradient(90deg, var(--tc, var(--blue-l)) 0 2px, transparent 2px 5px) left / var(--v) 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 5px);
}
.ticks.green { --tc: var(--green); }
.ticks.blue  { --tc: #6c9bff; }
.ticks.amber { --tc: var(--amber); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ============ 6. KOMPONEN DATA ============ */
.rank li { display: grid; grid-template-columns: auto 92px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 11px; }
.rank.slim li { grid-template-columns: 70px 1fr auto; }
.rank li + li { border-top: 1px solid rgba(255, 255, 255, .05); }
.rank b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sq { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; }
.meter { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v); border-radius: 2px; background: linear-gradient(90deg, #6c9bff, var(--blue-l)); transform-origin: left; }
@keyframes growX { from { transform: scaleX(0); } }

.prog { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.prog i { display: block; height: 100%; width: var(--v); border-radius: 3px; transform-origin: left; background: linear-gradient(90deg, #5e93ff, var(--blue-l)); transform-origin: left; }
.prog.green i { background: linear-gradient(90deg, #2fae82, var(--green)); }
.prog.rose i  { background: linear-gradient(90deg, #e2566a, var(--rose)); }
.pr-row { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 10px; font-size: 11px; }
.pr-row b { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 11px; }
.pr-row.col { grid-template-columns: 1fr; gap: 5px; }
.pr-row.col b { text-align: right; }

/* donat */
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-wrap.col { flex-direction: column; gap: 10px; }
.donut { position: relative; width: 96px; height: 96px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 9; }
.donut .track { stroke: rgba(255, 255, 255, .08); }
.donut > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut .num { font-size: 15px; }
.donut small { font-size: 9px; }
@keyframes spin { from { transform: rotate(-140deg); opacity: 0; } }
@keyframes unspin { from { transform: rotate(140deg); } }
.legend { flex: 1; display: grid; gap: 8px; font-size: 11px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend b { margin-left: auto; color: var(--text); font-weight: 600; }
.legend i, .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.legend.inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; flex: none; }

/* cincin persentase */
.ring {
  --p: var(--v);
  position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0);
}
.ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #2b2420; }
.ring b { position: relative; z-index: 1; font-size: 12px; font-weight: 600; }
@property --p { syntax: "<number>"; initial-value: 0; inherits: false; }
@keyframes ringIn { from { --p: 0; } to { --p: var(--v); } }

/* diagram batang */
.bars { display: flex; align-items: flex-end; gap: 4%; height: 150px; padding: 40px 4px 18px; }
.bars.slim { height: 160px; gap: 5%; }
.bars > div {
  position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg, rgba(157, 188, 255, .75), rgba(157, 188, 255, .40));
  transform-origin: bottom; transition: filter .2s;
}
.bars > div:hover { filter: brightness(1.25); }
.bars > .on { background: linear-gradient(180deg, #5e93ff, var(--blue)); box-shadow: 0 0 18px rgba(61, 123, 255, .55); }
.bars u, .pills u { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); text-decoration: none; font-size: 9px; color: var(--faint); }
@keyframes growY { from { transform: scaleY(0); opacity: 0; } }
.bars > :nth-child(2)  { animation-delay: .04s !important; } .bars > :nth-child(3)  { animation-delay: .08s !important; }
.bars > :nth-child(4)  { animation-delay: .12s !important; } .bars > :nth-child(5)  { animation-delay: .16s !important; }
.bars > :nth-child(6)  { animation-delay: .20s !important; } .bars > :nth-child(7)  { animation-delay: .24s !important; }
.bars > :nth-child(8)  { animation-delay: .28s !important; } .bars > :nth-child(9)  { animation-delay: .32s !important; }
.bars > :nth-child(10) { animation-delay: .36s !important; } .bars > :nth-child(11) { animation-delay: .40s !important; }
.bars > :nth-child(12) { animation-delay: .44s !important; }
.tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 6px 9px; border-radius: 9px; white-space: nowrap; z-index: 2;
  background: rgba(12, 12, 14, .92); border: 1px solid var(--line);
  font-size: 9px; color: var(--muted); line-height: 1.5;
  animation: focus .5s 1s backwards;
}
.tip b { display: block; color: #fff; font-size: 10px; }

/* corong */
.funnel { display: grid; gap: 7px; font-size: 11px; }
.funnel li { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 8px; color: var(--muted); }
.funnel i { height: 10px; width: var(--v); margin: 0 auto; border-radius: 5px; background: linear-gradient(90deg, #5e93ff, var(--blue-l)); }
.funnel b { color: var(--text); text-align: right; font-weight: 600; }

/* tabel */
.tile { display: grid; gap: 4px; justify-items: start; }
.ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-bottom: 6px; flex: none;
  background: rgba(255, 255, 255, .10); border: 1px solid var(--line);
}
.ico svg { width: 13px; height: 13px; }
.ico.lg { width: 40px; height: 40px; }
.ico.lg svg { width: 19px; height: 19px; }
.ico.green  { background: rgba(62, 207, 154, .22); color: var(--green); border-color: transparent; }
.ico.blue   { background: rgba(61, 123, 255, .26); color: var(--blue-l); border-color: transparent; }
.ico.amber  { background: rgba(240, 178, 74, .22); color: var(--amber); border-color: transparent; }
.ico.rose   { background: rgba(255, 125, 143, .2); color: var(--rose); border-color: transparent; }
.ico.violet { background: rgba(176, 140, 255, .22); color: var(--violet); border-color: transparent; }

.tabs { display: flex; align-items: center; gap: 4px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.tabs span:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.tabs .on { background: rgba(255, 255, 255, .16); color: #fff; }
.tabs .chip, .tabs .seg-ctl { margin-left: auto; }

.table-wrap { padding: 6px 14px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 620px; }
th { text-align: left; font-weight: 500; font-size: 10px; color: var(--faint); padding: 8px 6px; }
th.w1 { width: 22px; }
td { padding: 8px 6px; border-top: 1px solid var(--hair); white-space: nowrap; color: rgba(244, 239, 233, .85); }
td:first-child, td.nm { font-weight: 600; color: #fff; }
td .av, td .logo { margin-right: 9px; vertical-align: middle; }
td .dot { margin-right: 7px; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(255, 255, 255, .05); }
.score {
  display: inline-block; vertical-align: middle; width: 44px; height: 3px; margin-right: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c) var(--v), rgba(255, 255, 255, .12) 0);
}
.logo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--c); color: #fff; font: 700 10px var(--sans); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.logo.lg { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }

/* paginasi */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; flex-wrap: wrap; }
.pages-n { display: flex; align-items: center; gap: 4px; }
.pg-b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px; font-size: 10px; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--hair); cursor: pointer; transition: background .2s, color .2s; }
.pg-b:hover { background: rgba(255, 255, 255, .16); color: var(--text); }
.pg-b.on { background: var(--blue); color: #fff; border-color: transparent; }
.pg-b.off { opacity: .35; pointer-events: none; }
.pg-e { color: var(--faint); font-size: 10px; padding: 0 2px; }

/* breadcrumb */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.crumb b { color: var(--text); font-weight: 600; }

/* stepper */
.step { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); flex-wrap: wrap; }
.step li { display: flex; align-items: center; gap: 6px; }
.step li + li::before { content: ""; width: 16px; height: 1px; background: var(--line); }
.step i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 700; font-style: normal; background: rgba(255, 255, 255, .08); border: 1px solid var(--hair); }
.step .ok i { background: rgba(62, 207, 154, .22); color: var(--green); border-color: transparent; }
.step .on i { background: var(--blue); color: #fff; border-color: transparent; box-shadow: 0 0 0 3px rgba(61, 123, 255, .2); }
.step .on { color: var(--text); font-weight: 600; }

/* timeline */
.timeline { display: grid; gap: 2px; }
.timeline li { position: relative; display: flex; gap: 10px; padding: 0 0 12px 2px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .dot { margin-top: 4px; width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(20, 17, 15, .6); z-index: 1; }
.timeline b { display: block; font-size: 11px; font-weight: 600; }

/* key / value */
.kv { display: grid; grid-template-columns: 82px 1fr; gap: 8px 10px; font-size: 11px; align-items: center; }
.kv dt { color: var(--faint); }
.kv dd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* empty state */
.empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .02); }
.empty b { font-size: 12px; }
.empty .btn { margin-top: 8px; }

/* skeleton */
.skel-row { display: flex; align-items: center; gap: 10px; }
.skel-row > div { flex: 1; display: grid; gap: 6px; }
.skel { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.07) 25%, rgba(255,255,255,.16) 37%, rgba(255,255,255,.07) 63%); background-size: 400% 100%; animation: shimmer 1.4s linear infinite; }
.skel.av-s { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.skel.w30 { width: 30%; } .skel.w40 { width: 40%; } .skel.w60 { width: 60%; } .skel.w80 { width: 80%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* spinner & dots */
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: rot .7s linear infinite; display: inline-block; flex: none; }
.spin.lg { width: 26px; height: 26px; border-width: 2.5px; border-color: rgba(255,255,255,.18); border-top-color: var(--blue-l); }
@keyframes rot { to { transform: rotate(1turn); } }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-l); animation: bounce 1s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* kode */
.code { position: relative; padding: 11px 38px 11px 12px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); border: 1px solid var(--hair); overflow-x: auto; }
.code code { font: 10.5px/1.7 var(--mono); color: var(--muted); white-space: pre; }
.c-k { color: var(--green); font-weight: 600; }
.c-c { color: var(--blue-l); }
.code .cp { position: absolute; top: 9px; right: 9px; }

/* ============ 7. FORM & SELEKSI ============ */
.form { display: grid; gap: 10px; }
.form.g2 { grid-template-columns: 1fr 1fr; }
.span2 { grid-column: 1 / -1; }
.lbl { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.demo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo.center { justify-content: center; gap: 16px; }

.fld { position: relative; display: grid; gap: 5px; min-width: 0; }
.fld > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 600; color: var(--muted); }
.fld input[type="text"], .fld input[type="email"], .fld input[type="password"], .fld input[type="tel"], .fld textarea, .sel {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  background: var(--sunk); border: 1px solid var(--line); color: var(--text);
  font: 11px/1.4 var(--sans); transition: border-color .2s, background .2s, box-shadow .2s;
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--faint); }
.fld input:focus, .fld textarea:focus, .sel:focus {
  outline: none; border-color: rgba(157, 188, 255, .6); background: rgba(255, 255, 255, .10);
  box-shadow: 0 0 0 3px rgba(61, 123, 255, .16);
}
.fld textarea { resize: vertical; min-height: 54px; }
.fld input.pad { padding-left: 32px; }
.in-ic { position: absolute; left: 11px; top: 27px; color: var(--faint); display: grid; }
.in-ic svg { width: 13px; height: 13px; }
.hint { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--faint); }
.fld.err input { border-color: rgba(255, 125, 143, .55); }
.fld.err .hint { color: var(--rose); }
.fld.ok input { border-color: rgba(62, 207, 154, .5); }
.fld.ok .hint { color: var(--green); }

.sel { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sel option { background: #2a221d; color: var(--text); }
.sel.sm { padding: 6px 26px 6px 9px; font-size: 10px; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }

/* saklar */
.sw { appearance: none; position: relative; width: 34px; height: 19px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid var(--hair); cursor: pointer; transition: background .25s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .25s var(--ease); }
.sw:checked { background: var(--blue); border-color: transparent; }
.sw:checked::after { transform: translateX(15px); }

/* checkbox & radio */
.cb, .rd { appearance: none; position: relative; width: 16px; height: 16px; flex: none; border-radius: 5px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); cursor: pointer; transition: background .2s, border-color .2s; }
.rd { border-radius: 50%; }
.cb:hover, .rd:hover { border-color: rgba(157, 188, 255, .6); }
.cb:checked, .rd:checked { background: var(--blue); border-color: transparent; }
.cb::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.5); transition: opacity .18s, transform .18s var(--ease); }
.cb:checked::after { opacity: 1; transform: none; }
.rd::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.4); transition: opacity .18s, transform .18s var(--ease); }
.rd:checked::after { opacity: 1; transform: none; }

/* baris opsi */
.opt { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-radius: 10px; font-size: 11px; transition: background .2s; }
.opt:hover { background: rgba(255, 255, 255, .04); }
.opt > div { flex: 1; min-width: 0; }
.opt b { display: block; font-size: 11px; font-weight: 600; }
.opt .sw, .opt .cb, .opt .rd { order: 2; margin-left: auto; }
.opt.row-c .cb, .opt.row-c .rd { order: 0; margin-left: 0; }
.opt .lnk { display: inline; }
.card > .opt + .opt { border-top: 1px solid var(--hair); border-radius: 0; }

/* slider */
.rg { appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) var(--f, 45%), rgba(255, 255, 255, .12) var(--f, 45%)); cursor: pointer; }
.rg::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); cursor: grab; }
.rg::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.rg-v { font: 500 11px var(--sans); color: var(--text); }

/* area unggah */
.drop { display: grid; justify-items: center; gap: 2px; padding: 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .02); transition: background .2s, border-color .2s; }
.drop:hover { background: rgba(61, 123, 255, .08); border-color: rgba(157, 188, 255, .5); }
.drop svg { width: 20px; height: 20px; color: var(--muted); margin-bottom: 4px; }
.drop b { font-size: 11px; }
.f-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lnk { color: var(--blue-l); font-size: 10px; font-weight: 600; cursor: pointer; transition: color .2s; }
.lnk:hover { color: #fff; text-decoration: underline; }

/* kekuatan sandi */
.pw { display: flex; gap: 4px; margin-top: 2px; }
.pw i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.pw i:nth-child(1) { background: var(--rose); }
.pw i:nth-child(2) { background: var(--amber); }

/* segmented */
.seg-ctl { display: inline-flex; align-items: center; padding: 2px; border-radius: 999px; background: var(--sunk); font-size: 10px; }
.seg-ctl b, .seg-ctl i { padding: 4px 10px; border-radius: 999px; font-style: normal; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .2s; white-space: nowrap; }
.seg-ctl i:hover { color: var(--text); }
.seg-ctl b { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }

/* dropdown (details) */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 178px; padding: 6px;
  background:
    radial-gradient(130% 100% at 8% -14%, rgba(255, 255, 255, .18), transparent 62%),
    rgba(40, 33, 29, .82);
  -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(.92);
  backdrop-filter: blur(20px) saturate(1.5) brightness(.92);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  animation: ddIn .2s var(--ease) both;
}
.dd-menu.right { left: auto; right: 0; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.dd-t { display: block; padding: 5px 9px 4px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dd-i { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; font-size: 11px; color: var(--text); transition: background .15s; }
.dd-i:hover { background: rgba(255, 255, 255, .1); }
.dd-i svg { width: 13px; height: 13px; opacity: .7; }
.dd-i.danger { color: var(--rose); }
.dd-i.danger:hover { background: rgba(255, 125, 143, .14); }

/* akordeon */
.acc { border-bottom: 1px solid var(--hair); }
.acc:last-of-type { border-bottom: 0; }
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 10px 2px; font-size: 11px; font-weight: 600; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: #fff; }
.chv { width: 13px; height: 13px; opacity: .6; transition: transform .25s var(--ease); }
.acc[open] > summary .chv { transform: rotate(180deg); }
.acc > p, .acc > ul { padding: 0 2px 12px 24px; font-size: 11px; color: var(--muted); line-height: 1.6; animation: accIn .3s var(--ease) both; }
.acc > ul { padding-left: 2px; }
@keyframes accIn { from { opacity: 0; transform: translateY(-5px); } }

/* ============ 8. HALAMAN: INBOX ============ */
.list-pane { padding: 6px; display: flex; min-height: 0; }
.mlist { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.mlist li { display: flex; gap: 9px; padding: 9px; border-radius: var(--r-sm); cursor: pointer; transition: background .2s; }
.mlist li:hover { background: rgba(255, 255, 255, .06); }
.mlist li.on { background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.mlist > li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mlist b { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; }
.mlist time { color: var(--faint); font-size: 9px; font-weight: 400; flex: none; }
.mlist small { font-size: 10px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mlist .st { justify-self: start; margin-top: 2px; }
.unread { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); align-self: center; flex: none; }

.thread { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.th-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.th-head > div { flex: 1; min-width: 0; }
.th-head b { display: block; font-size: 12px; }
.th-head small { font-size: 10px; }
.bubbles { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 0; }
.day { align-self: center; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: 9px; color: var(--muted); }
.bb { max-width: 74%; padding: 9px 12px; border-radius: 15px; font-size: 11px; line-height: 1.5; animation: bbIn .45s var(--ease) both; }
@keyframes bbIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.bb time { display: block; margin-top: 4px; font-size: 9px; color: var(--faint); }
.bb.in { align-self: flex-start; background: rgba(255, 255, 255, .09); border-bottom-left-radius: 5px; }
.bb.out { align-self: flex-end; background: linear-gradient(135deg, #4a84ff, #3568e0); border-bottom-right-radius: 5px; box-shadow: 0 6px 18px rgba(61, 123, 255, .3); }
.bb.out time { color: rgba(255, 255, 255, .6); }
.bb.att { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.bb.att > div { flex: 1; }
.bb.att b { display: block; font-size: 11px; }
.bb.att small { font-size: 9px; }
.bb.typing { display: flex; gap: 4px; padding: 11px 13px; align-self: flex-start; background: rgba(255, 255, 255, .07); }
.bb.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: bounce 1.1s var(--ease) infinite; }
.bb.typing i:nth-child(2) { animation-delay: .15s; }
.bb.typing i:nth-child(3) { animation-delay: .3s; }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hair); }
.composer input[type="text"] { flex: 1; min-width: 0; padding: 9px 13px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); color: var(--text); font: 11px var(--sans); }
.composer input:focus { outline: none; border-color: rgba(157, 188, 255, .6); }
.clip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); transition: background .2s, color .2s; }
.clip:hover { background: rgba(255, 255, 255, .1); color: var(--text); }

/* ============ HALAMAN: DEALS (kanban) ============ */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 260px; }
.lane { display: flex; flex-direction: column; min-height: 0; background: rgba(0, 0, 0, .18); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 8px; }
.lane-h { display: flex; align-items: center; gap: 7px; padding: 0 4px 9px; font-size: 11px; }
.lane-h b { font-weight: 600; }
.cnt { min-width: 17px; height: 17px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 9px; display: grid; place-items: center; color: var(--muted); }
.lane-h .round { margin-left: auto; }
.lane-b { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 0 2px 2px; }
.deal { display: grid; gap: 4px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--hair); cursor: grab; transition: transform .2s, background .2s, box-shadow .2s; }
.deal:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.deal b { font-size: 11px; font-weight: 600; }
.deal small { font-size: 9.5px; }
.d-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.amt { font: 500 13px var(--serif); font-variant-numeric: tabular-nums; }
.deal .st { justify-self: start; margin-top: 2px; }
.deal.hot { border-color: rgba(240, 178, 74, .4); box-shadow: inset 0 0 0 1px rgba(240, 178, 74, .12); }
.deal.won .meter i { background: linear-gradient(90deg, #2fae82, var(--green)); }
.deal.ghost-c { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; background: none; border: 1px dashed var(--line); color: var(--faint); font-size: 10px; cursor: pointer; }
.deal.ghost-c:hover { background: rgba(255, 255, 255, .04); transform: none; box-shadow: none; color: var(--muted); }

/* ============ HALAMAN: CONTACTS ============ */
.person { display: grid; justify-items: center; gap: 3px; text-align: center; padding: 16px 12px; transition: background .2s, transform .2s, border-color .2s; }
.person:hover { background: rgba(255, 255, 255, .07); border-color: var(--line); transform: translateY(-2px); }
.person b { margin-top: 6px; font-size: 11.5px; }
.person small { font-size: 10px; }
.person .chip { margin-top: 2px; }
.p-act { display: flex; gap: 6px; margin-top: 9px; }
.person.add { border-style: dashed; color: var(--muted); }
.person.add .ico { margin-bottom: 2px; }

/* ============ HALAMAN: TASKS ============ */
.add-row { display: flex; align-items: center; gap: 9px; }
.add-row > svg { color: var(--faint); }
.add-row input { flex: 1; min-width: 0; padding: 8px 2px; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--text); font: 11px var(--sans); }
.add-row input:focus { outline: none; border-bottom-color: var(--line); }
.add-row input::placeholder { color: var(--faint); }
.add-row .sel { width: auto; flex: none; }
.tasks { display: grid; gap: 2px; }
.tasks li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 10px; transition: background .2s; }
.tasks li:hover { background: rgba(255, 255, 255, .05); }
.tasks li + li { border-top: 1px solid var(--hair); }
.tasks > li > div { flex: 1; min-width: 0; }
.tasks b { display: block; font-size: 11px; font-weight: 600; transition: opacity .2s; }
.tasks small { font-size: 10px; }
.tasks .cb:checked ~ div b { text-decoration: line-through; opacity: .45; }
.tasks li.late b { color: #ffb3bd; }
.tasks.done b { text-decoration: line-through; opacity: .45; }

/* ============ HALAMAN: INTEGRATIONS ============ */
.integ { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; transition: background .2s, border-color .2s; }
.integ:hover { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.integ > div { min-width: 0; }
.integ b { font-size: 11.5px; }
.integ small { display: block; font-size: 10px; line-height: 1.4; }
.i-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--hair); }
.wh { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 10px; }
.wh li { display: flex; align-items: center; gap: 9px; padding: 8px 2px; font-size: 11px; }
.wh li + li { border-top: 1px solid var(--hair); }
.wh b { font-weight: 600; white-space: nowrap; }
.wh small { flex: 1 1 auto; min-width: 0; font: 10px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* min-width:0 → URL panjang terpotong "…", tidak mendorong baris keluar kartu */
.wh .chip { margin-left: auto; }

/* ============ HALAMAN: SETTINGS ============ */
.up-row { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--hair); }
.up-row > div { flex: 1; }
.up-row b { display: block; font-size: 12px; }
.up-row .demo { margin-top: 8px; }
.sess { display: grid; gap: 2px; margin-top: 8px; }
.sess li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 11px; }
.sess li + li { border-top: 1px solid var(--hair); }
.sess > li > svg { color: var(--muted); }
.sess > li > div { flex: 1; min-width: 0; }
.sess b { display: block; font-weight: 600; }
.danger-z { display: flex; align-items: center; gap: 14px; border-color: rgba(255, 125, 143, .28); background: rgba(255, 125, 143, .07); flex-wrap: wrap; }
.danger-z b { display: block; font-size: 12px; color: #ffb3bd; }

/* ============ HALAMAN: CALENDAR ============ */
.week { display: flex; flex-direction: column; min-height: 320px; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; font-size: 10px; color: var(--muted); text-align: center; }
.days b { color: var(--text); }
.days .today { background: rgba(61, 123, 255, .3); border-radius: 999px; color: #fff; }
.grid {
  position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(18, minmax(16px, 1fr)); gap: 3px 6px;
  background: repeating-linear-gradient(180deg, transparent 0 37px, rgba(255, 255, 255, .05) 37px 38px);
}
.ev {
  padding: 5px 7px; border-radius: 9px; font-size: 9px; line-height: 1.3; overflow: hidden; cursor: pointer;
  color: rgba(255, 255, 255, .75); background: var(--bg); border-left: 2px solid var(--bd);
  transition: transform .2s, filter .2s;
}
.ev:hover { filter: brightness(1.25); transform: scale(1.02); }
.ev b { display: block; color: #fff; font-size: 9.5px; }
.ev:nth-child(3n)   { animation-delay: .15s !important; }
.ev:nth-child(3n+1) { animation-delay: .3s !important; }
.ev:nth-child(3n+2) { animation-delay: .45s !important; }
.ev.blue   { --bg: rgba(61, 123, 255, .34);  --bd: #6c9bff; }
.ev.green  { --bg: rgba(62, 207, 154, .28);  --bd: #3ecf9a; }
.ev.violet { --bg: rgba(160, 120, 255, .30); --bd: #b08cff; }
.ev.amber  { --bg: rgba(240, 178, 74, .32);  --bd: #f0b24a; }
.ev.rose   { --bg: rgba(255, 120, 150, .30); --bd: #ff8fa3; }
.now { position: relative; height: 1px; background: var(--rose); align-self: center; box-shadow: 0 0 8px rgba(255, 125, 143, .8); }
.now::before { content: ""; position: absolute; left: -3px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.stack { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.next { display: flex; flex-direction: column; gap: 2px; }
.next strong { font-size: 12px; }
.next .btn { margin-top: 8px; align-self: flex-start; }
.today-list { display: grid; gap: 9px; font-size: 11px; }
.today-list li { display: flex; align-items: center; gap: 7px; }
.today-list time { color: var(--muted); font-variant-numeric: tabular-nums; }
.inv { display: flex; gap: 4px; }
/* Calendar di mobile: tinggi baris tetap (event tidak meluber keluar kartu)
   dan minggu bisa digeser horizontal supaya teks event tidak terpotong. */
@media (max-width: 760px) {
  .cal { flex: none; min-height: 0; }
  .week { min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 10px; }
  .week > .days, .week > .grid { min-width: 460px; }
  .week > .grid {
    flex: none; grid-template-rows: repeat(18, 26px);
    background: repeating-linear-gradient(180deg, transparent 0 57px, rgba(255, 255, 255, .05) 57px 58px);
  }
  .ev { min-height: 0; font-size: 9.5px; }
  .ev b { font-size: 10px; }
  .ev:hover { transform: none; }
}
/* ============ 9. OVERLAY: MODAL / DRAWER / PALETTE ============ */
.layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
/* Overlay SELALU dirender (display:grid) tapi tersembunyi lewat visibility, supaya
   animasi berjalan dua arah: masuk saat dibuka DAN keluar saat ditutup.
   visibility ditunda .32s saat menutup agar animasi keluar sempat terlihat. */
.ov {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .32s;
}
.ov.top { place-items: start center; padding-top: min(14vh, 120px); }
.ov.right-ov { place-items: stretch end; padding: 0; }
.ov-bg { position: absolute; inset: 0; background: rgba(10, 7, 5, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; cursor: default; }

.modal {
  position: relative; z-index: 1; width: min(520px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  padding: 20px; border-radius: 26px;
  background:
    radial-gradient(130% 100% at 6% -10%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 38%, transparent 68%),
    var(--glass-2);
  -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(.9);
  backdrop-filter: blur(28px) saturate(1.6) brightness(.9);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .22),
    inset 0 -1px 1px rgba(0, 0, 0, .22),
    0 40px 90px -20px rgba(0, 0, 0, .6);
  /* posisi tertutup; menutup = kembali ke sini dengan transisi yang lebih singkat */
  opacity: 0; transform: translateY(18px) scale(.96); filter: blur(8px);
  transition: opacity .26s ease, transform .3s cubic-bezier(.4, 0, .8, .4), filter .26s ease;
}
.modal.sm { width: min(400px, 100%); text-align: center; align-items: center; }
.modal.sm .ico { margin-bottom: 10px; }
.modal.sm .fld { width: 100%; text-align: left; margin-top: 6px; }
.modal.lg { width: min(760px, 100%); }
.modal h3 { font: 500 17px/1.25 var(--serif); }
.modal.sm p { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.ov-h { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); }
.ov-h > div { flex: 1; min-width: 0; }
.ov-h small { display: block; margin-top: 2px; font-size: 10px; }
.ov-h.center-h { text-align: center; justify-content: center; }
.ov-b { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; margin: -2px; }
.ov-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--hair); width: 100%; }
.modal.sm .ov-f { justify-content: center; }
.ov-f.between { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); flex: none; transition: background .2s, color .2s; }
.x:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
.x svg { width: 13px; height: 13px; }
.x.abs { position: absolute; top: 14px; right: 14px; }

/* modal tampil */
:is(#m-confirm:checked ~ .layer #ov-confirm,
    #m-preview:checked ~ .layer #ov-preview,
    #m-hapus-soal:checked ~ .layer #ov-hapus-soal,
    #m-lead:checked    ~ .layer #ov-lead,
    #m-upgrade:checked ~ .layer #ov-upgrade,
    #m-cmd:checked     ~ .layer #ov-cmd,
    #d-notif:checked   ~ .layer #ov-notif,
    #d-contact:checked ~ .layer #ov-contact) {
  visibility: visible; pointer-events: auto; transition-delay: 0s;

  & .ov-bg { opacity: 1; }
  & .modal {
    opacity: 1; transform: none; filter: none;
    transition: opacity .35s ease, transform .45s var(--ease), filter .35s ease;
  }
  & .drawer {
    opacity: 1; transform: none;
    transition: transform .45s var(--ease), opacity .3s ease;
  }
}

/* paket harga */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan { position: relative; display: grid; gap: 3px; padding: 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid var(--hair); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.plan:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.plan .rd { position: absolute; top: 13px; right: 13px; }
.plan b { font-size: 11px; font-weight: 600; color: var(--muted); }
.pr { font: 500 26px/1.1 var(--serif); }
.plan > small { font-size: 10px; }
.plan ul { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 10px; color: var(--muted); }
.plan li { display: flex; align-items: center; gap: 7px; }
.plan li svg { width: 12px; height: 12px; color: var(--green); }
.plan:has(.rd:checked) { background: rgba(61, 123, 255, .14); border-color: rgba(157, 188, 255, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.plan.best { padding-top: 22px; }
.rib { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 0 0 8px 8px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 700; }

/* command palette */
.modal.cmd { width: min(560px, 100%); padding: 0; overflow: hidden; }
.cmd-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.cmd-in svg { color: var(--muted); }
.cmd-in input { all: unset; flex: 1; min-width: 0; color: var(--text); font-size: 12px; }
.cmd-in input::placeholder { color: var(--faint); }
.cmd-b { max-height: min(50vh, 330px); padding: 8px; display: grid; gap: 1px; }
.cmd-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; font-size: 11.5px; transition: background .15s; }
.cmd-i:hover { background: rgba(255, 255, 255, .1); }
.cmd-i svg { width: 14px; height: 14px; opacity: .65; }
.cmd-i .badge { margin-left: 0; }
.cmd-i .go { margin-left: auto; font-size: 10px; color: var(--faint); font-style: normal; }
.cmd-i .kbd { margin-left: auto; }
.cmd-i small { font-size: 10px; }
.cmd-f { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--hair); background: rgba(0, 0, 0, .2); }
.cmd-f small { display: flex; align-items: center; gap: 4px; font-size: 9.5px; }

/* drawer */
.drawer {
  position: relative; z-index: 1; width: min(380px, 100vw); height: 100%; display: flex; flex-direction: column;
  padding: 18px; border-radius: 26px 0 0 26px;
  background:
    radial-gradient(120% 90% at 10% -8%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05) 38%, transparent 68%),
    var(--glass-2);
  -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(.9);
  backdrop-filter: blur(28px) saturate(1.6) brightness(.9);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .20), -30px 0 70px -18px rgba(0, 0, 0, .55);
  opacity: .4; transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .8, .4), opacity .32s ease;
}
.drawer h3 { font: 500 16px var(--serif); }
.drawer .tabs { margin-bottom: 8px; }
.notif { flex: 1; display: grid; gap: 2px; align-content: start; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.notif li { display: flex; gap: 10px; padding: 10px 8px; border-radius: var(--r-sm); font-size: 11px; transition: background .2s; }
.notif li:hover { background: rgba(255, 255, 255, .06); }
.notif li > div { flex: 1; min-width: 0; }
.notif b { display: block; font-size: 11px; font-weight: 600; }
.notif small { font-size: 10px; line-height: 1.45; }
.notif .ico { margin-bottom: 0; }
.unread-i { background: rgba(61, 123, 255, .09); box-shadow: inset 2px 0 0 var(--blue); }
.prof { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 6px 0 14px; border-bottom: 1px solid var(--hair); margin-bottom: 14px; }
.prof b { margin-top: 8px; font-size: 13px; }
.prof .demo { margin-top: 12px; }
.dr-b { flex: 1; min-height: 0; display: grid; gap: 10px; align-content: start; margin: 0 -4px; padding: 0 4px; }

/* ============ 10. TOAST & ALERT ============ */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 110; display: flex; flex-direction: column-reverse; gap: 10px; width: min(330px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: none; align-items: flex-start; gap: 11px; position: relative; overflow: hidden;
  padding: 13px 14px; border-radius: 18px; pointer-events: auto;
  background:
    radial-gradient(130% 100% at 6% -14%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 40%, transparent 70%),
    rgba(44, 36, 31, .74);
  -webkit-backdrop-filter: blur(24px) saturate(1.5) brightness(.92);
  backdrop-filter: blur(24px) saturate(1.5) brightness(.92);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .22),
    inset 0 -1px 1px rgba(0, 0, 0, .2),
    0 20px 44px -12px rgba(0, 0, 0, .45);
  animation: tIn .45s var(--ease) both;
}
@keyframes tIn { from { opacity: 0; transform: translateX(34px) scale(.94); } }
.toast > div { flex: 1; min-width: 0; }
.toast b { display: block; font-size: 11.5px; font-weight: 600; }
.toast small { font-size: 10px; line-height: 1.45; }
.toast .ico { margin-bottom: 0; }
.toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--tb, var(--blue)), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: sweep 2.4s linear infinite; }
@keyframes sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.toast.ok   { --tb: var(--green); }
.toast.err  { --tb: var(--rose); }
.toast.warn { --tb: var(--amber); }

#t-ok:checked   ~ .layer #to-ok,
#t-err:checked  ~ .layer #to-err,
#t-info:checked ~ .layer #to-info,
#t-warn:checked ~ .layer #to-warn { display: flex; }

/* alert / banner */
.alert { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 15px; font-size: 11px; line-height: 1.5; border: 1px solid; }
.alert > svg { width: 15px; height: 15px; flex: none; }
.alert > div { flex: 1; min-width: 0; }
.alert b { font-weight: 600; color: #fff; }
.alert .btn, .alert .x { flex: none; }
.alert.blue  { background: rgba(61, 123, 255, .14); border-color: rgba(157, 188, 255, .3); color: #cddcff; }
.alert.blue > svg { color: var(--blue-l); }
.alert.green { background: rgba(62, 207, 154, .13); border-color: rgba(62, 207, 154, .3); color: #b6ecd6; }
.alert.green > svg { color: var(--green); }
.alert.amber { background: rgba(240, 178, 74, .13); border-color: rgba(240, 178, 74, .32); color: #f6ddb3; }
.alert.amber > svg { color: var(--amber); }
.alert.rose  { background: rgba(255, 125, 143, .13); border-color: rgba(255, 125, 143, .32); color: #ffc9d0; }
.alert.rose > svg { color: var(--rose); }

#a-trial:checked ~ .app #al-trial,
#a-sync:checked  ~ .app #al-sync { display: none; }

/* ============ 11. AUTENTIKASI ============ */
.auth-wrap { display: none; place-items: center; width: 100%; padding: 0 24px; flex: 1 0 auto; }   /* isi sisa layar → kartu login tetap di tengah */
#p-login:checked ~ .auth-wrap, #p-register:checked ~ .auth-wrap { display: grid; }
#p-login:checked ~ .app, #p-register:checked ~ .app { display: none; }
.auth { display: none; grid-template-columns: 1fr 1fr; width: min(900px, 100%); overflow: hidden; }
#p-login:checked ~ .auth-wrap #login,
#p-register:checked ~ .auth-wrap #register { display: grid; }

.auth-art {
  display: flex; flex-direction: column; gap: 18px; padding: 30px;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, .22), transparent 60%),
    repeating-linear-gradient(174deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 11px),
    linear-gradient(170deg, rgba(106, 155, 240, .74) 0%, rgba(63, 114, 216, .7) 52%, rgba(42, 85, 180, .8) 100%);
  border-radius: var(--r-lg) 0 0 var(--r-lg);   /* tint transparan: foto latar tetap tembus seperti kaca */
}
.auth-art.alt { background:
    radial-gradient(120% 70% at 80% 0%, rgba(255, 255, 255, .2), transparent 60%),
    repeating-linear-gradient(6deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 11px),
    linear-gradient(170deg, rgba(79, 143, 116, .74) 0%, rgba(47, 122, 92, .72) 52%, rgba(30, 92, 70, .82) 100%); }
.brand { display: flex; align-items: center; gap: 9px; font: 500 15px var(--serif); }
.mark { width: 20px; height: 20px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 4px rgba(61, 123, 255, .85); }
.auth-art h3 { font: 500 21px/1.3 var(--serif); margin-top: auto; }
.auth-art blockquote { margin-top: auto; }
.auth-art blockquote p { font: 400 14px/1.6 var(--serif); }
.auth-art blockquote footer { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.auth-art blockquote b { display: block; font-size: 11px; }
.auth-art small { color: rgba(255, 255, 255, .78); font-size: 10px; }
.art-stats { display: flex; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); }
.art-stats b { display: block; font-size: 17px; }
.art-list { display: grid; gap: 10px; font-size: 11.5px; }
.art-list li { display: flex; align-items: center; gap: 9px; }
.art-list svg { width: 15px; height: 15px; }
.art-note { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); }
.art-note .av { box-shadow: 0 0 0 2px #3f72d8; }

.auth-form { display: grid; gap: 11px; align-content: center; padding: 30px; }
.auth-form h2 { font: 500 23px/1.2 var(--serif); }
.auth-form .sub { font-size: 11px; color: var(--muted); margin: -6px 0 4px; }
.auth-form .soc { display: grid; grid-template-columns: 1fr 1fr; }
.auth-form .soc .btn { width: 100%; }
.auth-form .step { margin-bottom: 2px; }
.auth-form .center { font-size: 10.5px; color: var(--muted); }
.auth-form .tiny { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 9.5px; color: var(--faint); }
.or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 9.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============ 12. RESPONSIF ============ */
@media (max-width: 1180px) {
  .cards4 { grid-template-columns: repeat(3, 1fr); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lane { min-height: 220px; }
}
@media (max-width: 1080px) {
  body { justify-content: flex-start; }
  .app,
  :where(#p-overview, #p-leads, #p-contacts, #p-companies, #p-tasks, #p-reports):checked ~ .app {
    grid-template-columns: 190px minmax(0, 1fr); height: auto;
  }
  .side { max-height: none; }
  .main { min-height: 640px; }
  .pages { min-height: 620px; }
  .wide, .mail { grid-template-columns: 1fr; }
  .mail { min-height: 0; }
  .list-pane { max-height: 300px; }
  .thread { min-height: 420px; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .auth-art blockquote, .auth-art h3 { margin-top: 0; }
}
@media (max-width: 760px) {
  body { padding: 12px 0 0; }
  .app,
  :where(#p-overview, #p-leads, #p-contacts, #p-companies, #p-tasks, #p-reports):checked ~ .app {
    grid-template-columns: minmax(0, 1fr); width: calc(100% - 24px); margin: 12px auto; gap: 12px;
  }
  .glass { border-radius: 26px; }
  .side { padding: 10px; }
  .who > div, .nav-t, .side .foot, .side-search { display: none; }
  .side nav { flex-direction: row; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; }
  .side nav::-webkit-scrollbar { display: none; }
  .nav { flex: none; flex-direction: column; gap: 4px; padding: 8px 10px; font-size: 10px; }
  .badge { margin-left: 0; }
  .main { padding: 14px; min-height: 0; }
  .pages { min-height: max(560px, 72vh); }
  h1 { font-size: 21px; }
  .search { width: 100%; }
  .tools { width: 100%; }
  .two, .three, .wide, .cal, .board, .plans, .form.g2, .auth-form .soc { grid-template-columns: 1fr; }
  .board { flex: none; min-height: 0; }
  .lane { min-height: 0; }
  .board .lane-b { overflow: visible; }
  .four, .cards4 { grid-template-columns: 1fr 1fr; }
  .donut-wrap { justify-content: center; }
  .modal, .drawer { border-radius: 24px; }
  .drawer { width: 100vw; border-radius: 22px 22px 0 0; }
  .ov.right-ov { place-items: end stretch; }
  .drawer { height: 88vh; transform: translateY(100%); }   /* mobile: naik dari bawah, turun saat ditutup */
  .ov { padding: 14px; }
  .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .kv { grid-template-columns: 74px 1fr; }
  .pager { justify-content: center; }
}

/* ============ AKSESIBILITAS ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .01s !important;
  }
  .page { transform: none; }
}

/* ============ PENYESUAIAN VIDEO CONTOH ============ */
/* latar ruangan: buram pekat di awal, lalu "fokus" ketika jendela muncul */
@keyframes sceneIn { from { opacity: .35; transform: scale(1.06); } }

/* tombol "Last sync" dua baris di kepala Overview */
.pill.sync { padding: 4px 12px 4px 10px; gap: 7px; }
.pill.sync > span { display: flex; flex-direction: column; line-height: 1.15; font-size: 10.5px; }
.pill.sync small { font-size: 9px; color: var(--faint); }

@media (max-width: 1080px) {
  .app { grid-template-rows: auto; row-gap: 0; flex: 1 0 auto; }   /* tetap mengisi layar; boleh lebih tinggi lalu digulir */
}
/* --- MOBILE: menu tetap DI SAMPING sebagai rel ikon vertikal ------------
   Rel menempel di kiri (sticky, setinggi layar), panel utama + widget
   tersusun di kolom kanan. Pil sorotan tetap meluncur naik-turun seperti
   versi desktop; label teks disembunyikan, ikon dan badge tetap tampil. */
@media (max-width: 760px) {
  .app,
  :where(#p-overview, #p-leads, #p-contacts, #p-companies, #p-tasks, #p-reports):checked ~ .app {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 10px; row-gap: 0;
    width: calc(100% - 20px); margin: 10px auto; flex: none;
  }
  .app > .side {
    grid-column: 1; grid-row: 1; align-self: start;
    position: sticky; top: 10px;
    height: calc(100vh - 20px); height: calc(100dvh - 20px); max-height: none;
    padding: 10px 6px; border-radius: 22px;
  }
  /* panel utama setinggi rel menu → tepi atas & bawah keduanya lurus;
     isi halaman tetap digulir di dalam panel */
  .app > .main  { grid-column: 2; grid-row: 1; border-radius: 22px; height: calc(100vh - 20px); height: calc(100dvh - 20px); }
  .pages { min-height: 0; }
  .app > .side::before, .app > .main::before { padding: 1px; }
  .app > .side::after { display: none; }

  .side { --nav-h: 40px; --nav-gap: 4px; }
  .who { justify-content: center; padding: 0 0 10px; }
  .who > div { display: none; }
  .side nav, .side .menu { flex-direction: column; gap: var(--nav-gap); overflow-x: hidden; overflow-y: auto; }
  .side .menu { flex: 1 1 auto; }
  .side .foot { display: flex; flex: none; padding-top: 8px; }
  .side .foot .nav-hl { top: 8px; }
  .nav {
    flex-direction: row; justify-content: center; gap: 0;
    height: var(--nav-h); padding: 0; font-size: 0;   /* teks label disembunyikan, tetap terbaca screen reader */
  }
  .nav svg { width: 18px; height: 18px; }
  .nav .badge {
    position: absolute; top: 5px; right: 7px; margin: 0;
    min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px;
    font-size: 9px; line-height: 14px;
  }
  .nav-hl { display: block; }
}

/* ============ FOOTER COPYRIGHT ============ */
.site-foot {
  width: calc(100% - 2 * var(--edge)); margin: 8px auto 0; padding: 0 0 var(--edge); line-height: 1.3;
  text-align: center; font-size: 11px; letter-spacing: .02em;
  color: rgba(244, 239, 233, .6); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  animation: appear .9s .9s var(--ease) backwards;
}
@media (max-width: 760px) {
  /* jarak lega antara kartu terakhir dan footer; footer di tengah layar */
  .app,
  :where(#p-overview, #p-leads, #p-contacts, #p-companies, #p-tasks, #p-reports):checked ~ .app { margin-bottom: 0; }
  .site-foot {
    width: auto; align-self: stretch;
    margin: 28px 10px 0; padding: 0 0 calc(24px + env(safe-area-inset-bottom));   /* tepat di tengah layar */
    font-size: 10.5px;
  }
}

/* ============ HALAMAN: TABLES (template tabel) ============ */
.dt { padding: 0; overflow: visible; counter-reset: sel; }
.dt-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; flex-wrap: wrap; }
.dt-title { display: grid; gap: 1px; margin-right: auto; }
.dt-title b { font-size: 12px; font-weight: 600; }
.dt-title small { font-size: 10px; }
.dt-tabs { padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--hair); }
.dt-tabs label {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 11px; color: var(--muted); white-space: nowrap; transition: background .25s var(--ease), color .25s;
}
.dt-tabs label:hover { color: var(--text); }
.dt-tabs i { font: 600 9px var(--sans); min-width: 15px; padding: 0 4px; line-height: 14px; border-radius: 7px; text-align: center; background: rgba(255, 255, 255, .1); color: var(--muted); }
#tf-all:checked       ~ .dt-top label[for="tf-all"],
#tf-active:checked    ~ .dt-top label[for="tf-active"],
#tf-invited:checked   ~ .dt-top label[for="tf-invited"],
#tf-suspended:checked ~ .dt-top label[for="tf-suspended"] {
  background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* filter baris murni CSS */
#tf-active:checked    ~ .table-wrap tbody tr:not(.s-active),
#tf-invited:checked   ~ .table-wrap tbody tr:not(.s-invited),
#tf-suspended:checked ~ .table-wrap tbody tr:not(.s-suspended) { display: none; }
.dt tbody tr { animation: fadeIn .35s ease backwards; }   /* opacity saja: tanpa filter per baris */
@keyframes fadeIn { from { opacity: 0; } }

.dt-scroll { padding: 0 8px; overflow: visible; }
.dt table { min-width: 700px; }
.dt th { padding: 9px 8px; border-top: 1px solid var(--hair); background: rgba(255, 255, 255, .03); }
.dt td { padding: 9px 8px; }
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }
th.sort { cursor: pointer; user-select: none; }
th.sort::after { content: "↕"; margin-left: 5px; font-size: 9px; opacity: .35; }
th.sort:hover { color: var(--muted); }
th.sort.on { color: var(--text); }
th.sort.on::after { content: "↓"; opacity: .9; color: var(--blue-l); }
th.sort.on.asc::after { content: "↑"; }

.who-c { display: inline-grid; vertical-align: middle; line-height: 1.25; }
.who-c b { font-weight: 600; }
.who-c small { font-weight: 400; font-size: 10px; }
.st .dot { width: 6px; height: 6px; margin: 0; }

/* baris terpilih */
.dt tbody tr:has(.cb:checked) { background: rgba(61, 123, 255, .14); }
.dt tbody tr:has(.cb:checked) td { border-top-color: rgba(157, 188, 255, .18); }
.dt tbody .cb:checked { counter-increment: sel; }
/* checkbox header jadi "sebagian" (–) bila ada baris terpilih */
.dt:has(tbody .cb:checked) thead .cb:not(:checked) { background: var(--blue); border-color: transparent; }
.dt:has(tbody .cb:checked) thead .cb:not(:checked)::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: #fff;
}

.row-act { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); transition: background .2s, color .2s; }
.row-act:hover, .dd[open] > .row-act { background: rgba(255, 255, 255, .12); color: var(--text); }
.row-act svg { width: 15px; height: 15px; }
.dt .dd-menu { min-width: 150px; top: calc(100% + 2px); }
.dt .dd-menu.right { left: auto; right: 0; }

/* bilah aksi massal */
/* Selalu dirender tapi terlipat (tinggi 0). Saat ada baris dicentang bilah
   membuka dengan mulus, dan saat semua centang dilepas ia melipat kembali. */
.bulk {
  display: flex; align-items: center; gap: 6px; margin: 0 14px; padding: 0 8px 0 14px;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px) scale(.98);
  border-radius: 999px; background: rgba(61, 123, 255, .2); border: 0 solid rgba(157, 188, 255, .25);
  pointer-events: none;
  transition: max-height .3s var(--ease), margin .3s var(--ease), padding .3s var(--ease),
              opacity .2s ease, transform .3s var(--ease), border-width .3s;
}
.dt:has(tbody .cb:checked) .bulk {
  max-height: 120px; margin-top: 10px; padding-top: 7px; padding-bottom: 7px; border-width: 1px;
  opacity: 1; transform: none; pointer-events: auto;
}
.bulk-n { margin-right: auto; font-size: 11px; color: var(--blue-l); }
.bulk-n::before { content: counter(sel) " "; font-weight: 700; color: #fff; }
.ghost.danger { color: var(--rose); }
.ghost svg.mini { width: 11px; height: 11px; }

.dt-foot { padding: 12px 16px 14px; }
.dt-foot .rpp { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; white-space: nowrap; }
.dt-foot .pages-n { margin-left: 4px; }

/* tabel ringkas */
.table-wrap.flat { padding: 0; margin: 0 -4px; }
table.compact { min-width: 0; }
table.compact th { padding: 6px 4px; }
table.compact td { padding: 7px 4px; font-weight: 400; color: rgba(244, 239, 233, .85); }
table.striped tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .035); }
table.compact tfoot td { border-top: 1px solid var(--line); padding-top: 9px; font-weight: 600; color: #fff; }
td.mono { font: 500 10.5px var(--mono); color: var(--blue-l); }

/* empty state di dalam tabel */
.t-empty {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  margin-top: 6px; padding: 22px 14px; border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .02);
}
.t-empty b { font-size: 12px; }
.t-empty .btn { margin-top: 8px; }

@media (max-width: 760px) {
  .dt-top { padding: 12px 12px 8px; }
  .dt-tabs { order: 3; width: 100%; overflow-x: auto; }
  .dt-scroll { overflow-x: auto; }   /* geser horizontal di layar sempit */
  .dt-foot { padding: 10px 12px 12px; gap: 8px; }
  .bulk { margin-left: 10px; margin-right: 10px; flex-wrap: wrap; border-radius: 18px; padding-left: 10px; padding-right: 10px; }
  .bulk-n { flex-basis: 100%; margin: 0 0 2px 4px; }   /* jumlah terpilih di baris sendiri, tombol di bawahnya */
}

/* ============ AUTENTIKASI — penyesuaian gaya kaca ============ */
.auth { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), 0 40px 90px -20px rgba(0, 0, 0, .6); }
.auth-form .fld input { background: rgba(255, 255, 255, .07); }
@media (max-width: 760px) {
  .auth-wrap { padding: 12px; }
  .auth-art { gap: 10px; padding: 20px 22px; border-radius: 26px 26px 0 0; }
  .auth-art blockquote footer, .art-stats, .art-list, .art-note { display: none; }
  .auth-art blockquote p { font-size: 13px; }
  .auth-art h3 { margin-top: 4px; font-size: 18px; }
  .auth-form { padding: 22px; }
}

/* ============ DROPDOWN: satu terbuka, tutup saat klik di luar ============
   - <details name="row-menu"> → browser otomatis menutup menu lain di grup
     yang sama saat satu dibuka.
   - Saat terbuka, summary memasang lapisan transparan selebar layar di bawah
     menu; klik di mana pun mengenai summary itu sehingga menu tertutup.
   - Baris yang menu-nya terbuka dinaikkan ke atas baris lain. */
.dd[open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: 29; cursor: default;   /* inset:0 → tidak menambah area gulir */
}
.dd-menu { z-index: 31; }
.dt tbody tr:has(.dd[open]) { position: relative; z-index: 6; }
.dt .dd-menu {
  background:
    radial-gradient(130% 100% at 8% -14%, rgba(255, 255, 255, .14), transparent 62%),
    rgba(32, 27, 24, .96);   /* lebih pekat: isi baris di belakang tidak tembus */
}
/* blok halaman yang dropdown-nya terbuka naik ke atas blok lain, supaya menu
   & lapisan penutupnya tidak tertimpa kartu berikutnya */
.page > :has(.dd[open]) { position: relative; z-index: 20; }

/* ============ DROPDOWN: animasi buka & tutup ============
   Menu memudar + turun sedikit saat dibuka, lalu naik + memudar saat ditutup.
   ::details-content diberi transisi content-visibility (allow-discrete) supaya
   isi <details> tetap tampil selama animasi tutup berjalan. */
.dd::details-content { transition: content-visibility .22s allow-discrete; }
.dd-menu {
  animation: none;
  opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: top left;
  transition: opacity .16s ease, transform .2s cubic-bezier(.4, 0, .8, .4);
}
.dd-menu.right { transform-origin: top right; }
.dd[open] > .dd-menu {
  opacity: 1; transform: none;
  transition: opacity .2s ease, transform .3s var(--ease);
}
@starting-style {
  .dd[open] > .dd-menu { opacity: 0; transform: translateY(-6px) scale(.96); }
}
/* ikon ⋯ ikut berputar halus saat menu terbuka */
.row-act svg { transition: transform .3s var(--ease); }
.dd[open] > .row-act svg { transform: rotate(90deg); }
/* tiga baris terakhir: menu membuka ke ATAS supaya tidak terpotong / menambah
   area gulir di bawah tabel (terutama di mobile, tempat tabel bisa digeser) */
.dt tbody tr:nth-last-child(-n+3) .dd-menu {
  top: auto; bottom: calc(100% + 2px); transform-origin: bottom right; transform: translateY(6px) scale(.96);
}
.dt tbody tr:nth-last-child(-n+3) .dd[open] > .dd-menu { transform: none; }
@starting-style {
  .dt tbody tr:nth-last-child(-n+3) .dd[open] > .dd-menu { transform: translateY(6px) scale(.96); }
}

/* ============ PERFORMA: kaca panel utama dipisah dari isinya ============
   Sebelumnya backdrop-filter terpasang langsung di .main — elemen yang
   isinya digulir. Di Chrome, setiap frame gulir/animasi di dalamnya membuat
   blur kaca seluas panel dihitung ulang → terasa berat & tersendat.
   Sekarang kaca (blur + tint + kilau) digambar di ::after, lapisan terpisah di
   BELAKANG isi panel. Isi bisa bergulir tanpa memicu blur ulang. */
.app > .main {
  isolation: isolate;               /* ::after (z-index:-1) tetap di dalam panel */
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(28, 17, 7, .18), 0 28px 64px -16px rgba(28, 17, 7, .55);
}
.app > .main::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(135% 105% at 4% -12%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 36%, transparent 66%),
    var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(.95);
  backdrop-filter: blur(26px) saturate(1.6) brightness(.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .20), inset 0 -1px 1px rgba(0, 0, 0, .18);
}
/* area gulir halaman jadi lapisan GPU sendiri */
.page { will-change: scroll-position; }
/* sorotan baris saat kursor lewat: tanpa transisi supaya tidak memicu repaint
   beruntun ketika menggulir dengan kursor di atas tabel */
.dt tbody tr { transition: none; }

/* ============ SIDEBAR: panel kaca datar ============
   Latar kaca sidebar digambar di ::after (bukan di elemennya) supaya isi
   menu tetap tajam; tidak ada kemiringan 3D lagi. */
.app > .side {
  transform: none; isolation: isolate;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .09);   /* garis sambungan dengan panel utama */
}
.app > .side::after {
  content: ""; position: absolute; inset: 0; width: auto; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(135% 105% at 4% -12%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 36%, transparent 66%),
    rgba(34, 28, 24, .52);
  -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(.95);
  backdrop-filter: blur(26px) saturate(1.6) brightness(.95);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .20),
    inset 0 -1px 1px rgba(0, 0, 0, .18),
    0 1px 2px rgba(28, 17, 7, .18),
    0 28px 64px -16px rgba(28, 17, 7, .55);
}
@media (max-width: 760px) {
  .app > .side { box-shadow: none; }
  .app > .side::after { display: block; }
}
/* =========================================================
   HALAMAN: BANK SOAL (editor soal — memakai js/soal-*.js)
   ========================================================= */
#soal [hidden], .qv [hidden] { display: none !important; }
.bs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 0; }

/* ---- daftar soal ---- */
.bs-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; position: sticky; top: 0; max-height: calc(100vh - 220px); min-height: 300px; }
.bs-filter { flex: none; }
.bs-filter span { padding: 4px 10px; }
.bs-filter i { font: 600 9px var(--sans); min-width: 15px; padding: 0 4px; line-height: 14px; border-radius: 7px; text-align: center; background: rgba(255, 255, 255, .1); }
.bs-items { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.bs-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 9px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; }
.bs-item:hover { background: rgba(255, 255, 255, .06); }
.bs-item.on { background: rgba(61, 123, 255, .16); border-color: rgba(157, 188, 255, .3); }
.bs-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.35; }
.bs-item small { display: block; margin-top: 3px; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-item .st { font-size: 9px; padding: 1px 7px; }
.bs-tag { display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 5px; border-radius: 7px; font: 700 9px var(--sans); letter-spacing: .02em; color: #fff; background: rgba(255, 255, 255, .14); }
.bs-tag.t-pg { background: rgba(61, 123, 255, .5); }
.bs-tag.t-essay { background: rgba(176, 140, 255, .45); }
.bs-tag.t-bs { background: rgba(62, 207, 154, .42); }
.bs-tag.t-isian { background: rgba(240, 178, 74, .45); }
.bs-tag.t-jodoh { background: rgba(255, 125, 143, .42); }
.bs-empty { display: grid; justify-items: center; gap: 3px; text-align: center; padding: 26px 10px; flex: 1; align-content: center; }
.bs-empty b { font-size: 12px; }
.bs-list-f { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--hair); }
.bs-list-f .ghost { flex: 1; justify-content: center; cursor: pointer; }

/* ---- editor ---- */
.bs-editor { position: relative; display: grid; gap: 14px; padding: 16px; }
.bs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bs-types { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--hair); }
.bs-types button { padding: 5px 12px; border-radius: 999px; font-size: 11px; color: var(--muted); transition: background .2s, color .2s; }
.bs-types button:hover { color: var(--text); }
.bs-types button.on { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.bs-meta { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) 80px; gap: 10px; }
.bs-meta .sel { padding-top: 8px; padding-bottom: 8px; }

/* toolbar — menempel di atas saat halaman digulir */
.rte-bar {
  position: sticky; top: -2px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px; border-radius: 14px; background: rgba(36, 30, 27, .94); border: 1px solid var(--line);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.tb-g { display: flex; align-items: center; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--hair); }
.tb-g:last-of-type, .tb-g.tb-ctx { border-right: 0; }
.tb-ctx { flex-basis: 100%; flex-wrap: wrap; padding-top: 5px; margin-top: 1px; border-top: 1px solid var(--hair); }
.tb-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 6px 0 4px; }
.tb {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px;
  font: 600 12px/1 var(--sans); color: rgba(244, 239, 233, .82);
}
.tb:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tb.on { background: rgba(61, 123, 255, .3); color: #fff; }
.tb svg { width: 15px; height: 15px; }
.tb.t-b { font-weight: 800; }
.tb.t-i { font-style: italic; font-family: var(--serif); font-size: 13px; }
.tb.t-u { text-decoration: underline; }
.tb.t-s { text-decoration: line-through; }
.tb.t-x { font-size: 11px; font-weight: 500; }
.tb.t-x sup, .tb.t-x sub { font-size: 8px; }
.tb.t-sym { font: 500 14px var(--serif); }
.tb.tb-w { font-size: 10.5px; font-weight: 500; padding: 0 8px; }
.tb.danger { color: var(--rose); }
.tb-sel { appearance: none; height: 28px; padding: 0 22px 0 9px; border-radius: 8px; border: 0; font: 500 11px var(--sans); color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4efe9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 6px center / 11px; }
.tb-sel option { background: #2a221d; }
.tb-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--hair); }

/* popover toolbar & alat gambar */
.tb-pop-w { position: relative; display: inline-flex; }
.pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; padding: 10px; border-radius: 14px;
  background: rgba(32, 27, 24, .97); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top left;
  transition: opacity .16s ease, transform .2s cubic-bezier(.4, 0, .8, .4), visibility 0s linear .2s;
}
.pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .28s var(--ease), visibility 0s; }
/* Popover tertutup dikeluarkan dari tata letak. Dengan visibility:hidden saja
   ia tetap memperlebar area gulir halaman, sehingga halaman Bank Soal bisa
   digeser ke kanan padahal kosong. Animasi buka/tutup tetap jalan di browser
   yang mendukung transisi display (allow-discrete + @starting-style). */
.pop:not(.open) { display: none; }
@supports (transition-behavior: allow-discrete) {
  .pop { transition: opacity .16s ease, transform .2s cubic-bezier(.4, 0, .8, .4), visibility 0s linear .2s, display .2s allow-discrete; }
  .pop.open { transition: opacity .2s ease, transform .28s var(--ease), visibility 0s, display 0s allow-discrete; }
  @starting-style { .pop.open { opacity: 0; transform: translateY(-6px) scale(.97); } }
}
.tbl-pick small { display: block; margin-top: 8px; text-align: center; font-size: 10px; }
.tbl-grid { display: grid; grid-template-columns: repeat(8, 16px); gap: 3px; }
.tbl-grid button { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.tbl-grid button.hl { background: rgba(61, 123, 255, .55); border-color: rgba(157, 188, 255, .7); }
.sym-pick { width: 300px; max-height: 300px; overflow-y: auto; display: grid; gap: 4px; }
.sym-pick b { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.sym-g { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.sym { height: 28px; border-radius: 7px; font: 15px var(--serif); color: var(--text); }
.sym:hover { background: rgba(61, 123, 255, .3); }
.link-pick { display: flex; gap: 6px; width: 290px; }
.link-pick input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--sunk); color: var(--text); font: 11px var(--sans); }
.img-pop { top: 0; display: flex; align-items: center; gap: 2px; padding: 5px; }

/* kotak teks kaya */
.bs-sec { display: grid; gap: 8px; min-width: 0; }
.bs-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.bs-lbl small { font-weight: 400; font-size: 10px; color: var(--faint); }
.bs-lbl.sub { margin-top: 6px; }
.rte {
  min-height: 46px; padding: 10px 12px; border-radius: 12px; outline: none; overflow-wrap: anywhere;
  background: var(--sunk); border: 1px solid var(--line); color: var(--text); font: 12.5px/1.6 var(--sans);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rte-lg { min-height: 150px; }
.rte:focus { border-color: rgba(157, 188, 255, .55); box-shadow: 0 0 0 3px rgba(61, 123, 255, .16); }
.rte:empty::before { content: attr(data-ph); color: var(--faint); pointer-events: none; }
.rte.drop { border-style: dashed; border-color: var(--blue-l); background: rgba(61, 123, 255, .08); }
.bs-err, .rte.bs-err { border-color: rgba(255, 125, 143, .7) !important; box-shadow: 0 0 0 3px rgba(255, 125, 143, .14) !important; }
.bs-opsi.bs-err, .bs-bs.bs-err, .bs-isian.bs-err { border: 1px solid; border-radius: 12px; padding: 6px; }
.rte img.sel-img { outline: 2px solid var(--blue-l); outline-offset: 2px; }

/* isi teks kaya — dipakai editor, pratinjau, dan halaman siswa */
:is(.rte, .rich) > :first-child { margin-top: 0; }
:is(.rte, .rich) > :last-child { margin-bottom: 0; }
:is(.rte, .rich) p { margin: 0 0 .55em; }
:is(.rte, .rich) h3 { font: 600 15px/1.35 var(--serif); margin: .3em 0 .4em; }
:is(.rte, .rich) h4 { font-size: 13px; font-weight: 700; margin: .3em 0 .35em; }
:is(.rte, .rich) ul, :is(.rte, .rich) ol { margin: 0 0 .55em 1.4em; }
:is(.rte, .rich) ul { list-style: disc; }
:is(.rte, .rich) ol { list-style: decimal; }
:is(.rte, .rich) li { margin: .15em 0; }
:is(.rte, .rich) blockquote { margin: 0 0 .55em; padding: 6px 12px; border-left: 3px solid var(--blue-l); background: rgba(61, 123, 255, .08); border-radius: 0 8px 8px 0; color: var(--muted); }
:is(.rte, .rich) pre { margin: 0 0 .55em; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .35); font: 11px/1.6 var(--mono); white-space: pre-wrap; }
:is(.rte, .rich) hr { margin: .8em 0; }
:is(.rte, .rich) a { color: var(--blue-l); text-decoration: underline; }
:is(.rte, .rich) sub, :is(.rte, .rich) sup { font-size: .72em; line-height: 0; }
:is(.rte, .rich) img { display: block; max-width: 100%; height: auto; margin: .4em 0; border-radius: 8px; }
:is(.rte, .rich) img[data-w="25"] { width: 25%; }
:is(.rte, .rich) img[data-w="50"] { width: 50%; }
:is(.rte, .rich) img[data-w="75"] { width: 75%; }
:is(.rte, .rich) img[data-w="100"] { width: 100%; }
:is(.rte, .rich) img[data-align="center"] { margin-left: auto; margin-right: auto; }
:is(.rte, .rich) img[data-align="right"] { margin-left: auto; }
:is(.rte, .rich) table { width: 100%; min-width: 0; border-collapse: collapse; margin: .4em 0 .7em; font-size: 12px; }
:is(.rte, .rich) th, :is(.rte, .rich) td { border: 1px solid rgba(255, 255, 255, .2); padding: 6px 9px; min-width: 40px; vertical-align: top; white-space: normal; color: var(--text); font-weight: 400; }
:is(.rte, .rich) th { background: rgba(255, 255, 255, .09); font-weight: 700; text-align: left; font-size: 11.5px; color: #fff; }
:is(.rte, .rich) tbody tr:hover { background: none; }
.rich { overflow-x: auto; }

/* jawaban per tipe */
.bs-opsi { display: grid; gap: 6px; }
.bs-opsi > li, .bs-decoy > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.bs-key { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 8px; cursor: pointer; }
.bs-key input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bs-key span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 11px var(--sans); color: var(--muted); border: 1.5px solid var(--line); background: rgba(255, 255, 255, .04); transition: background .2s, color .2s, border-color .2s; }
.bs-key:hover span { border-color: rgba(62, 207, 154, .6); color: var(--text); }
.bs-key input:checked + span { background: var(--green); border-color: transparent; color: #0f2a1f; box-shadow: 0 0 0 4px rgba(62, 207, 154, .18); }
.bs-key input:focus-visible + span { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.bs-del { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 10px; border-radius: 8px; color: var(--faint); }
.bs-del:hover { background: rgba(255, 125, 143, .16); color: var(--rose); }
.bs-del svg { width: 13px; height: 13px; }
.bs-add { justify-self: start; cursor: pointer; }
.bs-add[disabled] { opacity: .4; pointer-events: none; }
.bs-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bs-bs { display: flex; gap: 8px; }
.bs-bs label { position: relative; flex: 1; max-width: 180px; cursor: pointer; }
.bs-bs input { position: absolute; opacity: 0; }
.bs-bs span { display: block; padding: 11px; text-align: center; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .04); font-weight: 600; transition: all .2s; }
.bs-bs label:hover span { border-color: rgba(255, 255, 255, .3); }
.bs-bs input:checked + span { background: rgba(62, 207, 154, .2); border-color: var(--green); color: #fff; }
.bs-bs input:focus-visible + span { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.bs-isian { display: grid; gap: 6px; }
.bs-isian-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.bs-isian-r .bs-del { margin-top: 4px; }
.bs-in { width: 100%; padding: 9px 11px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); color: var(--text); font: 12px/1.4 var(--sans); }
.bs-in:focus { outline: none; border-color: rgba(157, 188, 255, .55); box-shadow: 0 0 0 3px rgba(61, 123, 255, .16); }
.bs-in.sm { width: 110px; padding: 6px 9px; font-size: 11px; }
.bs-maks { font-size: 11px; color: var(--muted); }
.bs-pairs { display: grid; gap: 6px; }
.bs-pairs > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.bs-pn { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 10px; border-radius: 50%; font: 700 10px var(--sans); background: rgba(255, 255, 255, .1); }
.bs-arrow { margin-top: 12px; color: var(--faint); }
.bs-decoy { display: grid; gap: 6px; }
.bs-decoy > li { grid-template-columns: minmax(0, 1fr) auto; }

.bs-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.bs-more > summary::-webkit-details-marker { display: none; }
.bs-more > summary::before { content: "\203A"; display: inline-block; font-size: 15px; color: var(--faint); transition: transform .2s; }
.bs-more[open] > summary::before { transform: rotate(90deg); }
.bs-more[open] > summary { margin-bottom: 8px; }
.bs-opts { display: flex; gap: 16px; flex-wrap: wrap; }

.bs-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.bs-save { margin-right: auto; font-size: 10.5px; }
.bs-save.dirty { color: var(--amber); }
.bs-foot .ghost { cursor: pointer; }

/* toast yang dikendalikan JS */
.toast.js-toast { display: flex; visibility: hidden; opacity: 0; transform: translateX(34px) scale(.94); animation: none;
  transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s; }
.toast.js-toast.show { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .45s var(--ease), visibility 0s; }
.toast.info { --tb: var(--blue); }

/* =========================================================
   KARTU SOAL (pratinjau guru & halaman siswa)
   ========================================================= */
.qv-list { display: grid; gap: 14px; }
.qv { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid var(--hair); }
.qv.is-ok { border-color: rgba(62, 207, 154, .45); }
.qv.is-no { border-color: rgba(255, 125, 143, .45); }
.qv-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qv-no { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 9px; font: 700 12px var(--sans); background: rgba(255, 255, 255, .12); }
.qv-no.sm { min-width: 22px; height: 22px; font-size: 10px; border-radius: 7px; }
.qv-meta { font-size: 10px; }
.qv-flag { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, .12); }
.qv.is-ok .qv-flag { background: rgba(62, 207, 154, .2); color: var(--green); }
.qv.is-no .qv-flag { background: rgba(255, 125, 143, .18); color: var(--rose); }
.qv.is-manual .qv-flag { background: rgba(240, 178, 74, .18); color: var(--amber); }
.qv-body { font-size: 13px; line-height: 1.65; }
.qv-opts { display: grid; gap: 7px; }
.qv-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: pointer; transition: background .2s, border-color .2s; }
.qv-opt:hover { background: rgba(255, 255, 255, .07); }
.qv-opt input, .qv-bs input { position: absolute; opacity: 0; pointer-events: none; }
.qv-opt .rich { padding-top: 3px; font-size: 12.5px; }
.qv-letter { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font: 700 11px var(--sans); border: 1.5px solid var(--line); color: var(--muted); }
.qv-opt:has(input:checked) { background: rgba(61, 123, 255, .16); border-color: rgba(157, 188, 255, .55); }
.qv-opt:has(input:checked) .qv-letter { background: var(--blue); border-color: transparent; color: #fff; }
.qv-opt:has(input:focus-visible), .qv-bs:has(input:focus-visible) { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.qv .qv-opt.is-key { background: rgba(62, 207, 154, .14); border-color: rgba(62, 207, 154, .6); }
.qv .qv-opt.is-key .qv-letter { background: var(--green); border-color: transparent; color: #0f2a1f; }
.qv .qv-opt.is-wrong { background: rgba(255, 125, 143, .12); border-color: rgba(255, 125, 143, .55); }
.qv .qv-opt.is-wrong .qv-letter { background: var(--rose); border-color: transparent; color: #fff; }
.qv-bsw { display: flex; gap: 8px; }
.qv-bs { position: relative; flex: 1; max-width: 200px; cursor: pointer; }
.qv-bs span { display: block; padding: 11px; text-align: center; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 600; transition: all .2s; }
.qv-bs:has(input:checked) span { background: rgba(61, 123, 255, .2); border-color: var(--blue-l); }
.qv .qv-bs.is-key span { background: rgba(62, 207, 154, .2); border-color: var(--green); }
.qv .qv-bs.is-wrong span { background: rgba(255, 125, 143, .16); border-color: var(--rose); }
.qv-in, .qv-ta { width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); color: var(--text); font: 12.5px/1.5 var(--sans); resize: vertical; }
.qv-in:focus, .qv-ta:focus { outline: none; border-color: rgba(157, 188, 255, .55); box-shadow: 0 0 0 3px rgba(61, 123, 255, .16); }
.qv-count { display: block; margin-top: 4px; text-align: right; font-size: 10px; }
.qv-count.over { color: var(--rose); }
.qv-key { display: block; margin-top: 6px; font-size: 10.5px; color: var(--green); }
.qv-match { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.qv-left, .qv-right { display: grid; gap: 7px; align-content: start; }
.qv-left li { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px; align-items: start; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.qv-left li .qv-key { grid-column: 2 / -1; margin-top: 0; }
.qv-left li.is-key { border-color: rgba(62, 207, 154, .55); background: rgba(62, 207, 154, .08); }
.qv-left li.is-wrong { border-color: rgba(255, 125, 143, .5); background: rgba(255, 125, 143, .07); }
.qv-left .rich, .qv-right .rich { font-size: 12px; padding-top: 2px; }
.qv-right li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.qv-right .qv-letter { width: 22px; height: 22px; font-size: 10px; }
.qv-bahas { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(61, 123, 255, .1); border: 1px solid rgba(157, 188, 255, .25); font-size: 12px; }
.qv-bahas > b { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-l); }
.qv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---- responsif ---- */
@media (max-width: 1180px) {
  .bs { grid-template-columns: minmax(0, 1fr); }
  .bs-list { position: static; max-height: 300px; min-height: 0; }
}
@media (max-width: 760px) {
  .bs-meta { grid-template-columns: 1fr 1fr; }
  .rte-bar { position: static; }   /* di HP toolbar 3 baris; tidak menempel agar area tulis lega */
  .bs-editor { padding: 12px; }
  .bs-types { border-radius: 14px; }
  .bs-pairs > li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bs-pairs > li .bs-arrow { display: none; }
  .bs-pairs > li > [data-kanan] { grid-column: 2; }
  .bs-pairs > li > .bs-del { grid-row: 1; grid-column: 3; }
  .bs-foot .bs-save { flex-basis: 100%; }
  .qv-match { grid-template-columns: 1fr; }
  .sym-pick { width: 250px; }
  .sym-g { grid-template-columns: repeat(7, 1fr); }
  .link-pick { width: 230px; }
}

/* =========================================================
   HALAMAN SISWA (siswa.html)
   Panel kaca (blur + tint) — lihat bagian LIQUID GLASS di akhir file.
   ========================================================= */
body.siswa { justify-content: flex-start; padding-top: 28px; }
.sw-main {
  position: relative; width: min(860px, 100% - 32px); margin: 0 auto; padding: 26px 26px 0;
  display: grid; gap: 18px; border-radius: var(--r-lg);
  background:
    radial-gradient(130% 60% at 4% -8%, rgba(255, 255, 255, .14), transparent 60%),
    rgba(30, 25, 22, .62);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), inset 0 -1px 1px rgba(0, 0, 0, .18), 0 30px 70px -20px rgba(0, 0, 0, .6);
  animation: appear .8s .2s var(--ease) backwards;
}
.sw-main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .04) 70%, rgba(255, 255, 255, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.sw-main [hidden] { display: none !important; }
.sw-head { display: grid; gap: 4px; }
.sw-brand { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--serif); color: rgba(244, 239, 233, .8); margin-bottom: 8px; }
.sw-brand em { font: 10px var(--sans); color: var(--faint); }
.sw-head h1 { font-size: 28px; }
.sw-sub { font-size: 11.5px; color: var(--muted); }
.sw-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 10px; margin-top: 14px; }

.sw-hasil {
  display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--r-md);
  background: rgba(255, 125, 143, .1); border: 1px solid rgba(255, 125, 143, .3);
  animation: focus .5s var(--ease) backwards;
}
.sw-hasil.lulus { background: rgba(62, 207, 154, .1); border-color: rgba(62, 207, 154, .35); }
.sw-skor { display: grid; place-items: center; width: 86px; height: 86px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.sw-skor b { font: 500 32px/1 var(--serif); }
.sw-skor small { font-size: 10px; margin-top: -10px; }
.sw-rinci { display: grid; gap: 4px; }
.sw-rinci > b { font: 500 18px var(--serif); }
.sw-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.sw-empty { display: grid; justify-items: center; gap: 4px; padding: 40px 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); }
.sw-empty b { font-size: 13px; }

.sw-foot {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 -26px; padding: 14px 26px 18px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: rgba(30, 25, 22, .92); border-top: 1px solid var(--hair);
}
.sw-prog { flex: 1 1 140px; max-width: 220px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sw-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .4s var(--ease); }
.sw-foot { justify-content: space-between; }
.sw-warn { flex-basis: 100%; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(240, 178, 74, .12); border: 1px solid rgba(240, 178, 74, .3); color: var(--amber) !important; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  body.siswa { padding-top: 12px; }
  .sw-main { width: calc(100% - 20px); padding: 18px 16px 0; gap: 14px; border-radius: 24px; }
  .sw-head h1 { font-size: 23px; }
  .sw-filter { grid-template-columns: 1fr 1fr; }
  .sw-hasil { padding: 14px; gap: 12px; }
  .sw-skor { width: 70px; height: 70px; }
  .sw-skor b { font-size: 26px; }
  .sw-foot { margin: 0 -16px; padding: 12px 16px 14px; border-radius: 0 0 24px 24px; }
  .sw-foot .btn { flex: 1; justify-content: center; }
  .qv { padding: 12px; }
}

/* ---- siswa: 1 lembar = 1 soal ---- */
.sw-nav { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--hair); }
.sw-nav-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sw-nav-h b { font-size: 12px; font-weight: 600; }
.sw-nav-h small { margin-right: auto; font-size: 10.5px; }
.sw-nav-h .sw-prog { flex: 0 1 180px; }
.sw-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  font: 600 12px var(--sans); color: rgba(244, 239, 233, .85);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.sw-num:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.sw-num.is-done   { background: rgba(61, 123, 255, .55); border-color: transparent; color: #fff; }
.sw-num.is-ragu   { background: rgba(240, 178, 74, .75); border-color: transparent; color: #2b1d05; }
.sw-num.is-ok     { background: rgba(62, 207, 154, .6); border-color: transparent; color: #0f2a1f; }
.sw-num.is-no     { background: rgba(255, 125, 143, .62); border-color: transparent; color: #fff; }
.sw-num.is-manual { background: rgba(240, 178, 74, .6); border-color: transparent; color: #2b1d05; }
.sw-num.is-cur    { box-shadow: 0 0 0 2px rgba(30, 25, 22, .9), 0 0 0 4px #fff; transform: translateY(-1px); }
.sw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 10px; color: var(--muted); }
.sw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw-legend i { width: 11px; height: 11px; border-radius: 4px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.sw-legend i.lg-cur  { border: 2px solid #fff; background: transparent; }
.sw-legend i.lg-done { background: rgba(61, 123, 255, .7); border-color: transparent; }
.sw-legend i.lg-ragu { background: rgba(240, 178, 74, .8); border-color: transparent; }
.sw-legend i.lg-ok   { background: rgba(62, 207, 154, .7); border-color: transparent; }
.sw-legend i.lg-no   { background: rgba(255, 125, 143, .7); border-color: transparent; }

/* lembar soal: animasi geser saat pindah nomor */
.sw-sheet { min-height: 240px; }
.sw-card { padding: 20px; }
.sw-card .qv-body { font-size: 14px; }
.sw-card.in-next { animation: swNext .38s var(--ease) backwards; }
.sw-card.in-prev { animation: swPrev .38s var(--ease) backwards; }
@keyframes swNext { from { opacity: 0; transform: translateX(26px); } }
@keyframes swPrev { from { opacity: 0; transform: translateX(-26px); } }

/* tombol bawah: Sebelumnya · Ragu-ragu · Selanjutnya */
.sw-foot .btn { min-width: 130px; justify-content: center; }
.sw-foot .btn[disabled] { opacity: .35; pointer-events: none; }
.sw-foot .btn span { font-size: 15px; line-height: 0; }
.sw-ragu { position: relative; cursor: pointer; }
.sw-ragu input { position: absolute; opacity: 0; pointer-events: none; }
.sw-ragu > span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--amber);
  background: rgba(240, 178, 74, .1); border: 1.5px solid rgba(240, 178, 74, .45);
  transition: background .2s, color .2s, border-color .2s;
}
.sw-ragu > span i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; display: grid; place-items: center; transition: background .2s; }
.sw-ragu:hover > span { background: rgba(240, 178, 74, .18); }
.sw-ragu input:checked + span { background: var(--amber); border-color: transparent; color: #2b1d05; }
.sw-ragu input:checked + span i { background: #2b1d05; border-color: #2b1d05; box-shadow: inset 0 0 0 2px var(--amber); }
.sw-ragu input:focus-visible + span { outline: 2px solid var(--blue-l); outline-offset: 2px; }

@media (max-width: 760px) {
  .sw-nav { padding: 12px; }
  .sw-num { width: 34px; height: 34px; border-radius: 10px; }
  .sw-card { padding: 14px; }
  .sw-foot { gap: 8px; }
  .sw-foot .btn { min-width: 0; flex: 1 1 0; padding: 10px 8px; font-size: 11px; }
  .sw-ragu { flex: 1 1 0; }
  .sw-ragu > span { width: 100%; justify-content: center; gap: 6px; padding: 9px 6px; font-size: 11px; white-space: nowrap; }
  .sw-ragu > span i { width: 12px; height: 12px; }
}

/* ---- siswa: waktu mundur (PRD PU-09 s.d. PU-14) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sw-top {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -26px; padding: 10px 26px; background: rgba(30, 25, 22, .94); border-bottom: 1px solid var(--hair);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .6);
}
.sw-timer {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line); color: var(--text);
  transition: background .3s, border-color .3s, color .3s;
}
.sw-timer svg { width: 18px; height: 18px; color: var(--blue-l); }
.sw-timer b { font: 600 19px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sw-timer small { font-size: 10px; }
.sw-timer.warn { background: rgba(240, 178, 74, .16); border-color: rgba(240, 178, 74, .6); color: var(--amber); }
.sw-timer.warn svg { color: var(--amber); }
.sw-timer.crit { background: rgba(255, 125, 143, .18); border-color: rgba(255, 125, 143, .7); color: var(--rose); animation: swPulse 1.6s ease-in-out infinite; }
.sw-timer.crit svg { color: var(--rose); }
.sw-timer.done { opacity: .75; }
.sw-timer.done svg { color: var(--green); }
.sw-timer.warn small, .sw-timer.crit small { color: inherit; opacity: .85; }
@keyframes swPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 125, 143, .14); } }
.sw-posisi { font-size: 11px; white-space: nowrap; }

.sw-notice {
  position: sticky; top: 62px; z-index: 6; padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 600;
  background: rgba(240, 178, 74, .18); border: 1px solid rgba(240, 178, 74, .5); color: var(--amber);
  animation: focus .35s var(--ease) backwards;
}
.sw-notice.crit { background: rgba(255, 125, 143, .18); border-color: rgba(255, 125, 143, .55); color: var(--rose); }
.sw-main [hidden].sw-notice { display: none !important; }

@media (max-width: 760px) {
  .sw-top { margin: 0 -16px; padding: 8px 16px; }
  .sw-timer b { font-size: 17px; }
  .sw-timer small { display: none; }
  .sw-notice { top: 54px; }
}

/* =========================================================
   LIQUID GLASS — material ala iOS 26
   ---------------------------------------------------------
   Tiga ciri yang ditiru:
   1) BENING   tint tipis + blur ringan + saturasi tinggi, latar tetap terbaca;
   2) TEBAL    tepi kaca memantulkan cahaya: kilau specular tipis di sisi
               kiri-atas, pantulan lebih lemah di kanan-bawah, dan cahaya yang
               "terkumpul" samar di sepanjang tepi dalam (inner glow);
   3) LENSA    tepi kaca membiaskan konten di belakangnya (modal, drawer, toast,
               dropdown). Ini butuh filter SVG
               (js/liquid-glass.js) dan hanya berjalan di Chrome/Edge; browser
               lain otomatis memakai poin 1–2 saja (var(--lg-refract) kosong).
   Tombol & menu juga "kenyal": mengecil sedikit saat ditekan lalu memantul.
   ========================================================= */
:root {
  --glass: rgba(26, 22, 20, .26);
  --glass-2: rgba(32, 27, 24, .5);
  --lg-blur: blur(14px) saturate(1.9) brightness(1.04);
  --lg-sheen: radial-gradient(140% 90% at 0% -20%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04) 40%, transparent 70%);
  /* tepi tebal untuk panel besar */
  --lg-edge:
    inset 0 0 0 .5px rgba(255, 255, 255, .20),
    inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, .75),
    inset -1.5px -1.5px 1px -1px rgba(255, 255, 255, .38),
    inset 0 0 26px rgba(255, 255, 255, .07),
    inset 0 14px 30px -24px rgba(255, 255, 255, .45);
  /* tepi tipis untuk kartu & kontrol kecil */
  --lg-edge-sm:
    inset 0 0 0 .5px rgba(255, 255, 255, .16),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .55),
    inset -1px -1px 1px -.5px rgba(255, 255, 255, .22),
    inset 0 0 14px rgba(255, 255, 255, .05);
  --lg-drop: 0 1px 2px rgba(20, 12, 6, .2), 0 26px 60px -18px rgba(8, 5, 3, .6);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- panel besar: sidebar, panel utama, kartu login ---- */
.app > .main::after,
.app > .side::after {
  background: var(--lg-sheen), var(--glass);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur) var(--lg-refract,);
  box-shadow: var(--lg-edge);
}
.app > .side::after { background: var(--lg-sheen), rgba(26, 22, 20, .38); box-shadow: var(--lg-edge), var(--lg-drop); }   /* sedikit lebih pekat: teks menu tetap terbaca di atas latar terang */
.app > .main { box-shadow: var(--lg-drop); }
.auth.glass {
  background: var(--lg-sheen), var(--glass-2);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur) var(--lg-refract,);
  box-shadow: var(--lg-edge), var(--lg-drop);
}
/* rim lensa: lebih tipis & lebih terang di sudut, seperti tepi kaca tebal */
.glass::before, .modal::before, .drawer::before, .toast::before, .dd-menu::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .85) 0%,  rgba(255, 255, 255, .28) 12%,
    rgba(255, 255, 255, .04) 34%, rgba(255, 255, 255, .03) 62%,
    rgba(255, 255, 255, .26) 88%, rgba(255, 255, 255, .6) 100%);
}

/* ---- kartu di dalam panel: kaca tipis yang "mengambang" ---- */
.card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 55%), rgba(255, 255, 255, .025);
  border-color: transparent;
  box-shadow: var(--lg-edge-sm);
}

/* ---- overlay: modal, drawer, toast, dropdown ---- */
.modal, .drawer {
  background: var(--lg-sheen), var(--glass-2);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(.96);
  backdrop-filter: blur(22px) saturate(1.9) brightness(.96) var(--lg-refract,);
}
.modal  { box-shadow: var(--lg-edge), 0 40px 90px -20px rgba(0, 0, 0, .6); }
.drawer { box-shadow: var(--lg-edge), -30px 0 70px -18px rgba(0, 0, 0, .55); }
.toast, .dd-menu {
  background: var(--lg-sheen), rgba(34, 28, 25, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(.98);
  backdrop-filter: blur(18px) saturate(1.9) brightness(.98) var(--lg-refract,);
  border-color: transparent;
}
.toast   { box-shadow: var(--lg-edge-sm), 0 20px 44px -12px rgba(0, 0, 0, .45); }
.dd-menu { box-shadow: var(--lg-edge-sm), 0 18px 40px rgba(0, 0, 0, .45); }

/* ---- kontrol: tombol bulat, pil, chip, kolom cari ---- */
.round, .pill, .chip, .search, .kbd, .btn.out, .seg-ctl {
  border-color: transparent;
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
  box-shadow: var(--lg-edge-sm);
}
.round.white { background-image: none; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .25); }
.chip.err { background-image: none; }
.search:focus-within { border-color: transparent; box-shadow: var(--lg-edge-sm), 0 0 0 2px rgba(157, 188, 255, .35); }
.seg-ctl b { box-shadow: var(--lg-edge-sm); }

/* tombol berwarna: kaca berwarna dengan kilau tepi */
.btn {
  --glow: rgba(61, 123, 255, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .02) 55%), rgba(61, 123, 255, .82);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .35),
    inset 1px 1.5px 1px -1px rgba(255, 255, 255, .95),
    inset -1px -1.5px 1px -1px rgba(255, 255, 255, .45),
    inset 0 0 10px rgba(255, 255, 255, .14),
    0 6px 18px var(--glow);
}
.btn.green { --glow: rgba(62, 207, 154, .3);  background-color: rgba(47, 174, 130, .85); }
.btn.rose  { --glow: rgba(226, 86, 106, .3);  background-color: rgba(226, 86, 106, .85); }
.btn.amber { --glow: rgba(240, 178, 74, .3);  background-color: rgba(217, 151, 47, .88); }
.btn.green, .btn.rose, .btn.amber { background-image: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .02) 55%); }
.btn.out { background: rgba(255, 255, 255, .07) linear-gradient(170deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%); box-shadow: var(--lg-edge-sm); }
.btn.ghost-b { background: rgba(255, 255, 255, .14); box-shadow: var(--lg-edge-sm); }
.btn.xs, .btn.off, .btn.load { box-shadow: var(--lg-edge-sm); }

/* pil sorotan menu: lensa kaca kecil */
.nav-hl {
  background: linear-gradient(170deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06) 60%), rgba(255, 255, 255, .06);
  box-shadow: var(--lg-edge-sm), 0 2px 8px rgba(10, 6, 3, .22);
}

/* ---- kenyal saat ditekan (spring) ---- */
.btn, .round, .pill, label.chip, .nav {
  transition: transform .5s var(--spring), background-color .2s, filter .2s, box-shadow .2s, color .2s;
}
.btn:active, .round:active, .pill:active, label.chip:active { transform: scale(.93); transition-duration: .12s; }
.nav:active { transform: scale(.97); transition-duration: .12s; }

@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(30, 25, 22, .86); --glass-2: rgba(36, 30, 26, .94); }
}

/* ---- LIQUID GLASS: halaman siswa (siswa.html) & lembar soal (.qv) ----
   Panel utama memakai blur kaca: latar (images.jpg) foto tajam, tanpa blur
   teks soal sulit dibaca di atas lampu jalan. Bilah atas (waktu)
   dan bilah bawah (tombol) yang menempel MEMAKAI blur sungguhan, karena di
   situlah soal benar-benar lewat di bawah kaca, seperti bilah iOS. */
.sw-main {
  background: var(--lg-sheen), rgba(26, 22, 20, .42);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-edge), var(--lg-drop);
}
.sw-main::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .85) 0%,  rgba(255, 255, 255, .26) 10%,
    rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .03) 70%,
    rgba(255, 255, 255, .24) 90%, rgba(255, 255, 255, .55) 100%);
}
.sw-top, .sw-foot {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)), rgba(28, 23, 21, .55);
  -webkit-backdrop-filter: blur(20px) saturate(1.9) brightness(.96);
  backdrop-filter: blur(20px) saturate(1.9) brightness(.96);
  border-color: transparent;
}
.sw-top  { box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .22), inset 0 -10px 22px -18px rgba(255, 255, 255, .25), 0 10px 20px -14px rgba(0, 0, 0, .6); }
.sw-foot { box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .28), inset 0 12px 24px -20px rgba(255, 255, 255, .3); }
.sw-notice {
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  border-color: transparent;
  box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(240, 178, 74, .45);
}
.sw-notice.crit { box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(255, 125, 143, .5); }

/* panel nomor soal & lembar soal: kaca tipis seperti .card */
.sw-nav, .qv {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 55%), rgba(255, 255, 255, .025);
  border-color: transparent;
  box-shadow: var(--lg-edge-sm);
}
.qv.is-ok { box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(62, 207, 154, .4); }
.qv.is-no { box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(255, 125, 143, .4); }

/* tombol nomor: gelembung kaca; yang terisi jadi kaca berwarna mengkilap */
.sw-num {
  background: linear-gradient(170deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%), rgba(255, 255, 255, .05);
  border-color: transparent;
  box-shadow: var(--lg-edge-sm);
  transition: background .2s, transform .45s var(--spring), box-shadow .2s;
}
.sw-num.is-done, .sw-num.is-ragu, .sw-num.is-ok, .sw-num.is-no, .sw-num.is-manual {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 60%);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .3),
    inset 1px 1.5px 1px -1px rgba(255, 255, 255, .85),
    inset -1px -1.5px 1px -1px rgba(255, 255, 255, .35);
}
.sw-num.is-cur { box-shadow: var(--lg-edge-sm), 0 0 0 2px rgba(30, 25, 22, .9), 0 0 0 4px #fff; }
.sw-num:active { transform: scale(.9); transition-duration: .12s; }
.sw-legend i { border-color: transparent; box-shadow: var(--lg-edge-sm); }
.sw-legend i.lg-cur { box-shadow: none; }

/* ringkasan nilai */
.sw-hasil { border-color: transparent; box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(255, 125, 143, .3), inset 0 0 30px rgba(255, 125, 143, .1); }
.sw-hasil.lulus { box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(62, 207, 154, .35), inset 0 0 30px rgba(62, 207, 154, .1); }
.sw-skor { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 60%); border-color: transparent; box-shadow: var(--lg-edge-sm); }

/* waktu mundur & ragu-ragu */
.sw-timer { border-color: transparent; background-image: linear-gradient(170deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%); box-shadow: var(--lg-edge-sm); }
.sw-timer.warn { box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(240, 178, 74, .55); }
.sw-timer.crit { box-shadow: var(--lg-edge-sm), inset 0 0 0 1px rgba(255, 125, 143, .65); }
.sw-ragu > span {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%);
  box-shadow: var(--lg-edge-sm);
  transition: background-color .2s, color .2s, border-color .2s, transform .45s var(--spring);
}
.sw-ragu:active > span { transform: scale(.94); transition-duration: .12s; }

/* pilihan jawaban & isian */
.qv-opt {
  background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%), rgba(255, 255, 255, .025);
  border-color: transparent;
  box-shadow: var(--lg-edge-sm);
}
.qv-opt:has(input:checked), .qv .qv-opt.is-key, .qv .qv-opt.is-wrong { background-image: linear-gradient(170deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%); }
.qv-letter { border-color: transparent; box-shadow: var(--lg-edge-sm); }
.qv-opt:has(input:checked) .qv-letter, .qv .qv-opt.is-key .qv-letter, .qv .qv-opt.is-wrong .qv-letter {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%);
}
.qv-bs span { border-color: transparent; background-color: rgba(255, 255, 255, .035); box-shadow: var(--lg-edge-sm); }
.qv-no { box-shadow: var(--lg-edge-sm); }
:where(.qv-in, .qv-ta, .fld input[type="text"], .fld input[type="email"], .fld input[type="password"], .fld input[type="tel"], .fld textarea, .sel):not(:focus) {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), inset 0 -.5px 0 rgba(255, 255, 255, .14);
}

/* ---- siswa: nomor soal di dalam MODAL (hemat tempat) ----
   Tombol "Soal x dari y" di bilah atas yang menempel membuka <dialog>.
   Modal memakai kaca Liquid Glass; latar di belakangnya digelapkan. */
.sw-pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px;
  font: 600 11.5px var(--sans); color: var(--text); white-space: nowrap;
  background: rgba(255, 255, 255, .07) linear-gradient(170deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
  box-shadow: var(--lg-edge-sm);
  transition: transform .45s var(--spring), background-color .2s;
}
.sw-pick:hover { background-color: rgba(255, 255, 255, .13); }
.sw-pick:active { transform: scale(.94); transition-duration: .12s; }
.sw-pick svg { width: 15px; height: 15px; color: var(--blue-l); }
.sw-pick small { font-size: 10px; font-weight: 500; padding-left: 8px; border-left: 1px solid var(--line); }

.sw-dlg {
  width: min(460px, calc(100% - 24px)); max-height: min(80vh, 560px);
  margin: auto; padding: 0; border: 0; border-radius: 26px; overflow: auto;
  color: var(--text);
  background: var(--lg-sheen), rgba(32, 27, 24, .62);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(.96);
  backdrop-filter: blur(22px) saturate(1.9) brightness(.96);
  box-shadow: var(--lg-edge), 0 40px 90px -20px rgba(0, 0, 0, .6);
}
.sw-dlg::backdrop { background: rgba(10, 7, 5, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sw-dlg[open] { animation: dlgIn .32s var(--ease); }
.sw-dlg[open]::backdrop { animation: fadeIn .25s ease; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* menutup: kebalikan animasi masuk, sedikit lebih cepat (js/siswa.js → tutupDlg) */
.sw-dlg.closing { animation: dlgOut .22s cubic-bezier(.4, 0, .8, .4) forwards; pointer-events: none; }
.sw-dlg.closing::backdrop { animation: fadeOut .22s ease forwards; }
@keyframes dlgOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fadeOut { to { opacity: 0; } }

.sw-dlg .sw-nav { padding: 18px 18px 20px; gap: 14px; border-radius: 0; background: none; box-shadow: none; }
.sw-dlg .sw-nav-h { row-gap: 10px; }
.sw-dlg .sw-nav-h b { font: 500 16px var(--serif); }
.sw-dlg .sw-nav-h small { margin-right: auto; }
.sw-dlg .sw-nav-h .sw-prog { order: 3; flex: 1 0 100%; max-width: none; }
.sw-dlg-x {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .08); box-shadow: var(--lg-edge-sm); color: var(--muted);
  transition: background-color .2s, color .2s, transform .45s var(--spring);
}
.sw-dlg-x:hover { background-color: rgba(255, 255, 255, .16); color: var(--text); }
.sw-dlg-x:active { transform: scale(.9); transition-duration: .12s; }
.sw-dlg-x svg { width: 14px; height: 14px; stroke-width: 2; }
.sw-dlg .sw-nums { gap: 8px; }
.sw-dlg .sw-num { width: 42px; height: 42px; border-radius: 13px; font-size: 13px; }

@media (max-width: 760px) {
  .sw-pick small { display: none; }   /* layar sempit: cukup "Soal x dari y" */
  .sw-dlg { width: calc(100% - 20px); border-radius: 24px; }
  .sw-dlg .sw-nav { padding: 16px 14px 18px; }
  .sw-dlg .sw-num { width: 40px; height: 40px; }
}

/* ---- siswa: tampilan PAS LAYAR ----
   Halaman tidak lagi digulir sebagai satu dokumen panjang. Panel mengisi
   tinggi layar: judul, bilah waktu, dan tombol bawah tetap di tempat; yang
   digulir HANYA lembar soal (#sw-list). Footer rapat di dasar layar. */
body.siswa {
  height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  padding-top: var(--edge);
}
body.siswa .sw-main {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
  width: min(860px, 100% - 2 * var(--edge));
}
body.siswa .sw-main > * { flex: none; }
body.siswa .sw-sheet {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  margin: 0 -6px; padding: 2px 6px 6px;            /* ruang untuk tepi kilau & cincin fokus */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
body.siswa .sw-sheet::-webkit-scrollbar { width: 6px; }
body.siswa .sw-sheet::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
body.siswa .sw-empty { flex: 1 1 auto; align-content: center; }
body.siswa .sw-top, body.siswa .sw-foot { position: relative; }   /* tidak perlu sticky lagi */
body.siswa .sw-foot { padding-top: 12px; padding-bottom: 14px; }
body.siswa .site-foot { flex: none; margin: 8px auto 0; padding: 0 0 var(--edge); }

@media (max-width: 760px) {
  body.siswa { padding-top: 10px; }
  body.siswa .sw-main { width: calc(100% - 20px); gap: 10px; padding-top: 14px; }
  body.siswa .sw-brand { margin-bottom: 2px; }
  body.siswa .sw-filter { margin-top: 8px; }
  body.siswa .sw-foot { padding-top: 10px; padding-bottom: 12px; }
  body.siswa .site-foot { margin: 6px 10px 0; padding: 0 0 calc(8px + env(safe-area-inset-bottom)); }
}