/* ==========================================================================
   Quiztify Premium Layer
   Shared polish loaded after each page's own styles: typography, focus,
   motion, toasts and the responsive creator shell.
   ========================================================================== */
/* Font di-host sendiri (lebih cepat, tanpa request ke Google) */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  --font-ui: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ring: 0 0 0 3px rgba(167, 139, 250, .55);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .04);
  --hairline: rgba(255, 255, 255, .07);
}

/* ---------- Typography ---------- */
/* `html *` beats the pages' `* {}` reset but loses to any class, so icon
   fonts, monospace PINs and the serif Berita Acara keep their own faces. */
html * { font-family: var(--font-ui); }
/* Spasi bawaan Plus Jakarta Sans sempit (0.17em); dilebarkan supaya kata tidak menempel */
body { word-spacing: 0.07em; }
html body.a11y-dyslexia *:not(i) { font-family: Arial, 'Helvetica Neue', system-ui, sans-serif; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3 { letter-spacing: -0.02em; }
.metric-val, .p-price, .pin-input, [id*="pin"] b { font-variant-numeric: tabular-nums; }

::selection { background: rgba(139, 92, 246, .45); color: #fff; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .22); }

/* ---------- Focus & interaction ---------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring) !important; border-radius: 10px; }
button, a, [onclick] { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), [onclick] { cursor: pointer; }
button:active:not(:disabled), .btn:active, .btn-nav:active { transform: translateY(0) scale(.98) !important; }
.btn, .btn-nav, .btn-join, .nav-btn, .p-card, .f-card, .quiz-item-card, .metric-card {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, border-color .2s, color .2s !important;
}
input, select, textarea { font-size: max(16px, 1em); } /* prevent iOS zoom */
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .32); letter-spacing: normal; }

/* ---------- Cards & surfaces ---------- */
.metric-card, .quiz-item-card, .table-card, .f-card, .p-card, .modal-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -18px rgba(0, 0, 0, .7);
}
.modal-overlay { backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
.modal-box { animation: qzModalIn .35s var(--ease-out); box-shadow: var(--shadow-lg); }
@keyframes qzModalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Metric cards: long values must never overflow */
.metric-card { min-width: 0; }
.metric-card > div:last-child { min-width: 0; }
.metric-val { font-size: clamp(20px, 2.1vw, 26px) !important; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.metric-val small { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: 6px; letter-spacing: 0; }

/* Tables */
table tbody tr { transition: background-color .15s; }
table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.table-card { overflow-x: auto; }

/* ---------- Skeleton loading ---------- */
.qz-skeleton {
  border-radius: 20px; min-height: 180px;
  background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%);
  background-size: 300% 100%; animation: qzShimmer 1.4s linear infinite;
  border: 1px solid var(--hairline);
}
@keyframes qzShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Toasts ---------- */
.qz-toast-stack {
  position: fixed; z-index: 100000; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none; max-width: calc(100vw - 32px);
}
.qz-toast {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start;
  width: 380px; max-width: 100%; padding: 14px 14px 14px 16px; border-radius: 14px;
  background: rgba(22, 16, 52, .92); color: #fff;
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: var(--shadow-lg);
  font-size: 13.5px; line-height: 1.5; white-space: pre-line;
  animation: qzToastIn .4s var(--ease-out);
}
.qz-toast.leaving { animation: qzToastOut .25s ease-in forwards; }
.qz-toast-icon {
  flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.qz-toast.success .qz-toast-icon { background: rgba(16, 185, 129, .18); color: #34d399; }
.qz-toast.error   .qz-toast-icon { background: rgba(244, 63, 94, .18);  color: #fb7185; }
.qz-toast.info    .qz-toast-icon { background: rgba(139, 92, 246, .2);  color: #c4b5fd; }
.qz-toast-body { flex: 1; min-width: 0; padding-top: 2px; }
.qz-toast-close {
  background: none; border: 0; color: rgba(255, 255, 255, .45); font-size: 18px; line-height: 1;
  padding: 2px 4px; border-radius: 6px;
}
.qz-toast-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.qz-toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35; }
@keyframes qzToastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qzToastOut { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 600px) {
  .qz-toast-stack { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
  .qz-toast { width: auto; }
}

/* ---------- Creator: responsive shell ---------- */
.qz-menu-btn, .qz-drawer-scrim { display: none; }
@media (min-width: 961px) {
  body > .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .top-header { position: sticky; top: 0; z-index: 50; }
}
@media (max-width: 960px) {
  body > .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1000; height: 100vh; width: min(290px, 84vw);
    transform: translateX(-102%); transition: transform .35s var(--ease-out);
    box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .7); overflow-y: auto;
  }
  body.qz-drawer-open > .sidebar { transform: none; }
  .qz-drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 999; background: rgba(5, 3, 18, .6);
    backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  body.qz-drawer-open .qz-drawer-scrim { opacity: 1; pointer-events: auto; }
  .qz-menu-btn {
    display: inline-grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border); color: #fff; font-size: 16px; margin-right: 12px;
  }
  .top-header { height: auto !important; min-height: 64px; padding: 12px 16px !important; gap: 10px; position: sticky; top: 0; z-index: 50; }
  .top-header .page-title { flex: 1; min-width: 0; }
  .page-title h1 { font-size: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-title p { display: none; }
  .top-controls { gap: 8px !important; }
  .top-controls .btn { padding: 10px 12px; }
  .top-controls .btn-ghost { display: none; }
  .content-area { padding: 18px 16px 40px !important; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .metric-card { flex-direction: column; align-items: flex-start !important; gap: 10px !important; padding: 16px !important; }
  .metric-icon { width: 38px !important; height: 38px !important; font-size: 17px !important; border-radius: 11px !important; }
  .quizzes-grid { grid-template-columns: 1fr !important; }
  .active-live-banner { flex-direction: column; align-items: stretch !important; gap: 14px; }
  .active-banner-actions { flex-wrap: wrap; }
  .active-banner-actions .btn { flex: 1; justify-content: center; }
  .modal-box { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px); overflow-y: auto; }
}
@media (max-width: 420px) {
  .top-controls .btn span { display: none; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Empty states ---------- */
.qz-empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 24px; border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .02);
}
.qz-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center;
  font-size: 22px; color: #c4b5fd; background: rgba(124, 58, 237, .16);
}
.qz-empty h3 { font-size: 18px; margin-bottom: 6px; }
.qz-empty p { color: var(--text-muted); font-size: 14px; max-width: 420px; margin: 0 auto 18px; line-height: 1.6; }
a.btn, a.btn-nav { text-decoration: none; }

/* ==========================================================================
   Restraint pass: satu warna aksi (ungu), tanpa glow, tanpa teriak.
   Hijau hanya untuk status sukses, merah hanya untuk bahaya.
   ========================================================================== */
:root { --accent: #7c5cff; --accent-hover: #8f74ff; }

/* Tombol: solid, tanpa glow, huruf kalimat */
.btn, .btn-nav, .btn-join, .btn-submit, .tab-btn, button {
  text-transform: none !important; letter-spacing: 0 !important;
}
.btn-primary, .btn-emerald, .btn-nav-primary, .btn-join, .btn-submit, .tab-btn.active, .btn-glow {
  background: var(--accent) !important; box-shadow: none !important; color: #fff !important;
  animation: none !important;
}
.btn-primary:hover, .btn-emerald:hover, .btn-nav-primary:hover, .btn-join:hover, .btn-submit:hover, .btn-glow:hover {
  background: var(--accent-hover) !important; transform: none !important; box-shadow: none !important;
}
.btn-ghost, .btn-nav-ghost { background: transparent !important; border: 1px solid rgba(255,255,255,.12) !important; }
.btn-ghost:hover, .btn-nav-ghost:hover { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.2) !important; }

/* Kartu: tanpa lompat & glow saat hover */
.quiz-item-card:hover, .f-card:hover, .metric-card:hover { transform: none !important; border-color: rgba(255,255,255,.16) !important; }
.p-card.featured { box-shadow: none !important; }

/* Sidebar: item aktif tenang */
.nav-btn.active { background: rgba(255,255,255,.07) !important; box-shadow: none !important; color: #fff !important; }
.nav-btn.active i { color: var(--accent) !important; }
.nav-btn i { color: inherit !important; }
.nav-heading { letter-spacing: .08em !important; }

/* Ikon metrik monokrom */
.metric-icon { background: rgba(255,255,255,.05) !important; color: #b9b3dd !important; }
.f-icon { background: rgba(124,92,255,.12) !important; color: #b8a6ff !important; }

/* Judul tanpa efek */
.gradient-text, .hero-accent { background: none !important; -webkit-text-fill-color: currentColor !important; color: #b8a6ff !important; }
.pin-giant { text-shadow: none !important; }
.pin-display-banner, .pin-card-wrapper { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important; }
.hero-glow { opacity: .55; }

/* Badge label: huruf kecil, bukan KAPITAL */
.q-badge, .p-badge, .badge-hero { text-transform: none !important; letter-spacing: 0 !important; }
.p-badge { background: var(--accent) !important; box-shadow: none !important; }

/* Timer bar: satu warna */
.timer-bar-fill { background: var(--accent) !important; }
.active-live-banner { box-shadow: none !important; animation: none !important; }
.active-live-banner::before { display: none !important; }

/* ---------- Dashboard: baris judul & modal yang aman di semua lebar ---------- */
.modal-box { max-height: calc(100vh - 40px); overflow-y: auto; }
@media (max-width: 960px) {
  .content-area [style*="justify-content:space-between"],
  .modal-box [style*="justify-content:space-between"] { flex-wrap: wrap; gap: 12px; }
  .content-area h2 { font-size: 19px !important; }
  .content-area select, .content-area .btn { max-width: 100%; }
  .table-card, .modal-box table { display: block; overflow-x: auto; }
  .modal-box { padding: 20px 16px !important; }
}

/* ---------- Tabel nilai: angka netral, status sebagai pill ---------- */
td b[style*="color:var(--gold)"], td b[style*="color:var(--amber)"], td b[style*="color:var(--cyan)"],
td span[style*="color:var(--amber);font-weight:800"] { color: #fff !important; }
td.num { font-variant-numeric: tabular-nums; }
.qz-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.qz-pill.ok  { background: rgba(16,185,129,.14); color: #6ee7b7; }
.qz-pill.mid { background: rgba(245,158,11,.14); color: #fcd34d; }
.qz-pill.low { background: rgba(244,63,94,.14);  color: #fda4af; }

/* ---------- Upload materi (AI generator) ---------- */
.material-drop {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.02); cursor: pointer; position: relative;
}
.material-drop:hover { border-color: rgba(167,139,250,.5); }
.material-drop.ready { border-style: solid; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.06); }
.material-drop > i { font-size: 20px; color: #b8a6ff; }
.material-drop b { display: block; font-size: 13.5px; }
.material-drop span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.material-clear { margin-left: auto; background: none; border: 0; color: var(--text-muted); font-size: 20px; }

/* ---------- Peta miskonsepsi ---------- */
.miscon-card { border: 1px solid rgba(244,63,94,.28); background: rgba(244,63,94,.05); border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; }
.miscon-head b { display: block; font-size: 15px; }
.miscon-head span { display: block; font-size: 12.5px; color: var(--text-muted); margin: 2px 0 10px; }
.miscon-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.miscon-pct { flex: 0 0 56px; font-size: 20px; font-weight: 800; color: #fda4af; font-variant-numeric: tabular-nums; }
.miscon-q { font-size: 13.5px; font-weight: 600; }
.miscon-a { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.miscon-a s { color: #fda4af; }
.miscon-a b { color: #6ee7b7; }

/* ---------- Taruhan soal terakhir & badge tim ---------- */
.wager-box { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.07); }
.wager-title { font-size: 14px; color: #fde68a; margin-bottom: 10px; }
.wager-title b { color: #fff; }
.wager-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wager-opt { padding: 10px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; font-weight: 700; font-size: 14px; }
.wager-opt.active { background: #f59e0b; border-color: #f59e0b; color: #1a1030; }
.team-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: #fff; background: color-mix(in srgb, var(--team, #8b5cf6) 30%, transparent); border: 1px solid var(--team, #8b5cf6); }

/* ---------- Host: mode tim ---------- */
.team-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.team-toggle span { font-size: 12.5px; color: var(--text-muted); padding: 0 8px; }
.team-toggle button { background: none; border: 0; color: #cfcae8; font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 8px; }
.team-toggle button.active { background: var(--accent); color: #fff; }
.host-team-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; max-width: 1040px; margin: 0 auto 20px; width: 100%; }
.host-team { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--team) 45%, transparent); }
.host-team-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.host-team-head span { font-size: 12px; color: var(--text-muted); }
.host-team-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); margin: 10px 0 8px; overflow: hidden; }
.host-team-bar i { display: block; height: 100%; background: var(--team); border-radius: 99px; transition: width .6s var(--ease-out); }
.host-team-score { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.host-team-score small { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* ---------- Kartu hasil (share) ---------- */
.qz-share-modal { position: fixed; inset: 0; z-index: 200000; display: grid; place-items: center; padding: 16px; background: rgba(5,3,18,.8); backdrop-filter: blur(8px); }
.qz-share-box { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #140d33; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 16px; animation: qzModalIn .35s var(--ease-out); }
.qz-share-box img { width: 100%; border-radius: 14px; display: block; }
.qz-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.qz-share-btn { padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #fff; font-weight: 700; font-size: 14px; }
.qz-share-btn.primary { background: var(--accent); border-color: var(--accent); grid-column: 1 / -1; }
.qz-share-btn.ghost { color: var(--text-muted, #a39ec4); }

/* ---------- Podium: aksi & rekap sesi ---------- */
.podium-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.podium-actions .btn-nav { padding: 11px 18px; }
.session-recap { max-width: 480px; margin: 0 auto 16px; text-align: left; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.recap-head b { display: block; font-size: 16px; }
.recap-head span { font-size: 13px; color: var(--text-muted); }
.recap-sub { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fda4af; margin: 16px 0 8px; }
.recap-item { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.recap-q { font-size: 14px; font-weight: 600; }
.recap-a { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.recap-a b { color: #6ee7b7; }
.recap-e { font-size: 12.5px; color: #b3aed6; margin-top: 4px; line-height: 1.5; }
.recap-cta { width: 100%; justify-content: center; margin-top: 10px; }
.recap-perfect { margin-top: 10px; font-size: 14px; color: #6ee7b7; }

/* ---------- Catatan persetujuan di form daftar ---------- */
.legal-note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted, #a39ec4); text-align: center; }
.legal-note a { color: #c4b5fd; }

/* ==========================================================================
   Dashboard creator (redesign): header sejajar, statistik satu panel, kartu bersih
   ========================================================================== */
:root { --topbar-h: 72px; }
/* Logo sidebar & top bar setinggi sama supaya garis bawahnya menyambung */
body > .sidebar .brand-area { height: var(--topbar-h); padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid var(--border); }
.top-header { height: var(--topbar-h); box-sizing: border-box; padding: 0 32px; border-bottom: 1px solid var(--border); background: rgba(14, 9, 38, .75); }
.page-title h1 { font-size: 19px !important; letter-spacing: -0.02em; line-height: 1.2; }
.page-title p { margin-top: 2px; }
.content-area { padding: 28px 32px 48px; }

/* Statistik: satu panel dengan pemisah, bukan empat kartu */
.dash-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 36px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.025);
}
.dash-stat { padding: 20px 24px; min-width: 0; }
.dash-stat + .dash-stat { border-left: 1px solid rgba(255,255,255,.07); }
.dash-stat span { display: block; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.dash-stat b { display: block; margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dash-stat b small { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-left: 6px; }

.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.dash-section-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.link-btn { background: none; border: 0; color: #c4b5fd; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.link-btn:hover { color: #fff; }
.link-btn i { font-size: 12px; transition: transform .2s var(--ease-out); }
.link-btn:hover i { transform: translateX(2px); }

/* Kartu kuis */
.quizzes-grid { gap: 16px !important; }
.quiz-item-card { padding: 20px !important; border-radius: 16px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; gap: 18px; }
.qc-body { display: flex; flex-direction: column; align-items: flex-start; }
.qc-type { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; margin-bottom: 10px; background: rgba(124,92,255,.16); color: #c4b5fd; }
.qc-type-pre { background: rgba(245,158,11,.14); color: #fcd34d; }
.qc-type-post { background: rgba(16,185,129,.14); color: #6ee7b7; }
.qc-type-remedial { background: rgba(244,63,94,.14); color: #fda4af; }
.qc-title { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qc-desc { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qc-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.qc-meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; margin: 0 9px; vertical-align: middle; }
.qc-actions { display: flex; gap: 8px; align-items: center; }
.qc-host { flex: 1; justify-content: center; padding: 10px 14px !important; font-weight: 700 !important; }
.qc-icon { width: 40px; height: 40px; padding: 0 !important; justify-content: center; }

@media (max-width: 960px) {
  .top-header { padding: 0 16px !important; height: 64px !important; }
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-stat:nth-child(3) { border-left: 0; }
  .dash-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.07); }
  .dash-stat { padding: 16px 18px; }
  .dash-stat b { font-size: 24px; }
}

/* Judul halaman sudah ada di top bar: sembunyikan judul kedua di dalam view,
   tombol aksinya tetap tampil di kanan */
.view-head > div:first-child { display: none; }
.view-head { justify-content: flex-end !important; }
.view-head-library { display: none !important; } /* aksinya sama dengan "Kuis baru" di top bar */

/* Banner sesi live: beri jarak dari top bar, rapatkan ke konten */
.active-live-banner { margin: 24px 32px 0 !important; }
.active-live-banner + .content-area { padding-top: 24px; }
@media (max-width: 960px) { .active-live-banner { margin: 16px 16px 0 !important; } }

/* ==========================================================================
   Studio Creator: redesign-existing-projects pass
   Satu aksen (ungu), huruf kalimat, radius konsisten, permukaan bertekstur halus.
   Radius: kontainer 16px, tombol & input 10px, label 6px.
   ========================================================================== */
body.studio {
  --cyan: #b8a6ff;           /* dulu aksen kedua; kini turunan ungu */
  --gold: #ece8ff;           /* angka nilai tampil netral, bukan emas */
  --purple-light: #b8a6ff;
  --surface: rgba(255,255,255,.03);
  --line: rgba(255,255,255,.08);
}
/* Tekstur grain tipis di seluruh studio (fixed, tidak ikut scroll) */
body.studio::after {
  content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Huruf kalimat, bukan KAPITAL (dokumen Berita Acara resmi dikecualikan) */
.studio th, .studio label, .studio .nav-heading, .studio .metric-lbl, .studio .q-badge,
.studio [style*="text-transform:uppercase"]:not(.berita-acara-paper *) {
  text-transform: none !important; letter-spacing: 0 !important;
}
.studio .nav-heading { font-size: 12px !important; font-weight: 600 !important; color: rgba(255,255,255,.4) !important; padding: 18px 14px 6px !important; }
.studio label { font-size: 13px !important; font-weight: 600 !important; color: #cfc9ec !important; }
.studio .brand-studio-badge { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 11px; }
.studio th { font-size: 12.5px !important; font-weight: 600 !important; white-space: nowrap; background: transparent !important; color: rgba(255,255,255,.5) !important; }
.studio td { border-bottom-color: var(--line) !important; }
.studio .table-card, .studio .modal-box table { border-radius: 16px; }

/* Lebar konten dibatasi supaya tidak melar di layar lebar */
.studio .content-area > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.studio .active-live-banner { max-width: 1240px; width: calc(100% - 64px); margin: 24px auto 0 !important; }

/* Input & tombol: radius dan permukaan seragam */
.studio .input, .studio select, .studio textarea { border-radius: 10px !important; background: rgba(8,4,24,.55) !important; border: 1px solid var(--line) !important; }
.studio .input:focus, .studio select:focus, .studio textarea:focus { border-color: rgba(184,166,255,.6) !important; box-shadow: 0 0 0 3px rgba(124,92,255,.18) !important; }
.studio .btn { border-radius: 10px; }
.studio .modal-box { border-radius: 20px !important; border: 1px solid var(--line) !important; background: #150d35 !important; }

/* Banner sesi live: permukaan netral, satu titik hijau sebagai status */
.studio .active-live-banner {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 14px 20px !important;
}
.studio .active-live-banner::after { display: none !important; }
.studio .pin-pill { background: rgba(255,255,255,.05) !important; border: 1px solid var(--line) !important; color: #fff !important; font-family: var(--font-mono); }
.studio .pin-pill b { color: #fff !important; }
.studio .pin-pill i { display: none; }
.studio .live-radar-indicator { background: rgba(16,185,129,.1) !important; border-color: rgba(16,185,129,.3) !important; }

/* Header kelas: tanpa gradien & border tebal */
.hub-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 4px 0 24px; margin-bottom: 8px; }
.hub-hero h2 { font-size: 28px !important; letter-spacing: -0.03em; }
.hub-hero .q-badge { background: rgba(255,255,255,.06) !important; color: #e9e6f8 !important; font-family: var(--font-mono); border-radius: 6px; }

/* Tab kelas: garis bawah, bukan pil */
.hub-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.hub-tab { position: relative; background: none; border: 0; color: var(--text-muted); font-weight: 600; font-size: 14px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 8px; }
.hub-tab i { font-size: 13px; opacity: .8; }
.hub-tab:hover { color: #fff; }
.hub-tab.active { color: #fff; }
.hub-tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* Tautan di kartu kuis kelas */
.qc-link { margin-top: 10px; padding-left: 0 !important; font-size: 13.5px; }

/* Metric-card di dalam view/modal: tanpa ikon berwarna, angka netral */
.studio .metric-card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
.studio .metric-card .metric-icon { display: none !important; }
.studio .metric-val { color: #fff !important; }

/* Paket langganan di dalam studio: satu aksen */
.studio #view-pricing [style*="linear-gradient(90deg, #7c3aed, #06b6d4)"] { background: var(--accent) !important; }
.studio #view-pricing [style*="border:1px solid rgba(6,182,212,0.4)"] { border-color: var(--line) !important; }
.studio #view-pricing [style*="border:2px solid var(--purple)"] { border-width: 1px !important; border-color: rgba(184,166,255,.5) !important; box-shadow: none !important; }
.studio #view-pricing [style*="color:var(--gold)"], .studio #view-pricing [style*="color:var(--cyan)"] { color: #fff !important; }
.studio #view-pricing [style*="letter-spacing:1px;text-transform:uppercase"] { color: var(--text-muted) !important; font-size: 13px !important; font-weight: 600 !important; }

@media (max-width: 960px) {
  .studio .active-live-banner { width: calc(100% - 32px); }
  .hub-tabs { overflow-x: auto; }
  .hub-tab { white-space: nowrap; }
}
/* Tabel nilai di modal: sel data tidak terbungkus, nama boleh */
.studio .modal-box td { white-space: nowrap; }
.studio .modal-box td:first-child { white-space: normal; min-width: 150px; }

/* ---------- Foto profil ---------- */
.qz-av { width: 1.6em; height: 1.6em; border-radius: 30%; object-fit: cover; vertical-align: middle; display: inline-block; background: rgba(255,255,255,.08); }
.qz-av-emoji { display: inline-block; line-height: 1; }
.photo-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.photo-edit-preview { width: 72px; height: 72px; border-radius: 22px; overflow: hidden; flex: 0 0 72px; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; background: var(--accent); }
.photo-edit-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-edit-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.photo-edit-actions p { font-size: 12.5px; color: var(--text-muted, #a39ec4); line-height: 1.5; }
.photo-edit-buttons { display: flex; gap: 8px; }
.photo-btn { border: 1px solid rgba(255,255,255,.14); background: transparent; color: #fff; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 10px; }
.photo-btn.primary { background: var(--accent); border-color: var(--accent); }
.photo-btn.danger { color: #fda4af; }
.studio .user-avatar, .studio .profile-dropdown-avatar { overflow: hidden; }
.p-chip .qz-av { width: 26px; height: 26px; border-radius: 8px; }
.studio .podium-avatar .qz-av { width: 52px; height: 52px; border-radius: 16px; }
.board-av .qz-av { width: 30px; height: 30px; border-radius: 9px; }
/* Banner pesan di modal profil: sembunyi sampai ada pesan */
.studio .alert-banner { display: none; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.studio .alert-banner.success { display: flex; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }
.studio .alert-banner.error { display: flex; background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.3); color: #fda4af; }