/* ============================================================
   skorika.com — Design System v4 "Neubrutalist Gen-Z"
   Solid pastel surfaces · crisp black borders · hard shadows
   Inter · green #4ADE80 · purple #7B41B4 · pink #F472B6 · yellow #FACC15

   CATATAN PENTING
   ---------------
   Semua nama class LAMA dipertahankan 1:1 (.btn, .card, .navbar,
   .auth, .choice-btn, .lb-item, dst). Hanya tampilan yang berubah.
   Tidak ada perubahan struktur alur, ID, atau logika halaman.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Neubrutalist core ---- */
  --nb-ink:        #0F172A;
  --nb-shadow:     4px 4px 0 var(--nb-ink);
  --nb-shadow-sm:  2px 2px 0 var(--nb-ink);
  --nb-shadow-lg:  6px 6px 0 var(--nb-ink);
  --nb-border:     2px solid var(--nb-ink);

  /* ---- Brand hijau ---- */
  --ink:      #0F172A;
  --ink-2:    #14532D;
  --ink-3:    #005227;
  --brand:    #005227;
  --brand-2:  #006D36;
  --brand-dark:#00210C;
  --brand-deep:#00210C;
  --brand-lite:#4ADE80;
  --pink:     #7B41B4;
  --pink-dark:#62259A;
  --gold:     #FACC15;

  /* ---- Aksen ---- */
  --purple:   #7B41B4;
  --purple-c: #C488FF;
  --accent-pink:   #F472B6;
  --accent-yellow: #FACC15;
  --accent-orange: #FFB784;

  /* ---- Answer quad (gameplay) ---- */
  --a-red:    #F87171;  --a-red-d:   #B91C1C;
  --a-blue:   #60A5FA;  --a-blue-d:  #1D4ED8;
  --a-amber:  #FACC15;  --a-amber-d: #B45309;
  --a-green:  #4ADE80;  --a-green-d: #14532D;

  /* ---- Semantic ---- */
  --green:    #16A34A;  --green-dark:#14532D;
  --red:      #BA1A1A;  --red-dark:  #93000A;
  --amber:    #B45309;

  /* ---- Surfaces ---- */
  --surface:  #F6FBF3;
  --surface-2:#E8F0E5;
  --card:     #FFFFFF;
  --line:     #0F172A;
  --line-soft:#BECABD;
  --text:     #0F172A;
  --muted:    #3F4940;

  /* ---- On-dark ---- */
  --on-dark:      #FFFFFF;
  --on-dark-soft: #D9F5E1;
  --on-dark-dim:  #B7E4C4;

  /* ---- Legacy aliases (kompatibilitas inline style lama) ---- */
  --navy: #0F172A; --blue: #005227; --blue2: #00210C;
  --gray: #3F4940; --lgray: #E8F0E5; --mgray: #BECABD;
  --white: #FFFFFF;

  --radius: 10px; --radius-lg: 14px;
  --shadow:    var(--nb-shadow-sm);
  --shadow-md: var(--nb-shadow);
  --shadow-lg: var(--nb-shadow-lg);
  --font: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Space Grotesk', 'Inter', monospace;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; font-weight: 600; }
a:hover { color: var(--brand-dark); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 800; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Dark game pages (waiting / play / podium) ---------- */
body.dark { color: var(--on-dark); background: #0F172A; }

/* ---------- Brand mark ---------- */
.brand {
  display: inline-flex; align-items: center; gap:9px;
  font-weight:900; font-size:22px; letter-spacing:-.015em;
  color:#FF319F; text-decoration: none;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
.brand:hover { color:#FF319F; }
/* Sub-label di dalam .brand (mis. "Student Console") adalah baris kedua,
   bukan tetangga di sebelah kanan nama merek. Karena .brand adalah flex
   baris, tanpa aturan ini label itu berdiri sejajar lalu menabrak tautan
   di sisi kanan bar begitu layarnya menyempit. */
.brand { flex-wrap: wrap; row-gap: 0; }
.brand small { flex-basis: 100%; width: 100%; margin-top: 1px; }

/* ---------- Bar atas di layar sempit ----------
   Tinggi tetap 68px plus dua sisi yang tidak boleh menyusut membuat isi
   bar saling menimpa di ponsel. Di layar sempit bar boleh melipat dan
   tumbuh ke bawah. */
@media (max-width: 560px) {
  .navbar { height: auto; min-height: 58px; padding: 9px 14px;
            flex-wrap: wrap; row-gap: 6px; }
  .navbar-right { gap: 12px; font-size: 12.5px; flex-wrap: wrap;
                  justify-content: flex-end; }
  .brand { font-size:22px; min-width: 0; }
  .brand small { font-size: 9.5px; }
}
.brand .dot-id { color:#FF319F; font-style: normal;font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
body.dark .brand, body.dark .brand:hover { color:#FF319F;font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
body.dark .brand .dot-id { color:#FF319F;font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Logo mark resmi Skorika — 4 kotak warna membulat, TANPA latar.
   Bentuk ini HARUS sama persis dengan favicon di setiap halaman.

   UKURAN ditulis dalam em, bukan px, supaya aturan pemiliknya berlaku
   otomatis di setiap konteks: MARK 10% LEBIH TINGGI DARI TINTA TEKS.
   Angkanya diturunkan begini:
     tinggi tinta "Skorika" pada Outfit 900  = 0,727em
        (diukur langsung pada halaman terpasang: 16px tinta pada
         font-size 22px. Angka 0,75em pada putaran sebelumnya keliru —
         itu hasil menebak faktor skala tangkapan layar, bukan
         pengukuran langsung, dan membuat mark 12,5% bukan 10%.)
     target tinggi mark                      = 1,10 x 0,727em = 0,800em
   .quad tintanya memenuhi seluruh kotak, jadi kotaknya = 0,800em.
   Untuk <svg class="mark"> lihat aturan .mark di bawah: tintanya hanya
   28/32 dari kotak (rect y=2..30), jadi kotaknya harus lebih besar.
   Jarak dan radius memakai persen supaya proporsinya ikut, bukan patah
   saat ukurannya diubah: gap 2/28 dan radius 4/13 dari sisi kotak. */
.quad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7.14%;
  width: .8em; height: .8em; flex-shrink: 0;
  background: none; padding: 0; border: none;
}
/* SVG memakai viewBox 0 0 32 32 dengan rect 2..30 -> tinta 28/32 kotak.
   0,800em / (28/32) = 0,914em.
   Dibatasi ke dalam .brand: kelas "mark" juga dipakai untuk bulatan
   penanda pilihan jawaban (.opt-item .mark) di halaman kuis, dan itu
   bukan logo. */
.brand .mark { width: .914em; height: .914em; flex-shrink: 0; }
/* Satu warna rata #FF319F — sama persis dengan favicon.
   Diambil dari acuan: 87,3% piksel tinta pada gambar acuan bernilai
   tepat #FF319F, sisanya hanya campuran tepi dengan latar.
   Keempat variabel dipertahankan supaya aturan lama tetap berlaku,
   nilainya kini sama. */
:root { --quad-1:#FF319F; --quad-2:#FF319F; --quad-3:#FF319F; --quad-4:#FF319F; }
.quad span { border-radius: 30.8%; }
.quad span:nth-child(1) { background: var(--quad-1); }
.quad span:nth-child(2) { background: var(--quad-2); }
.quad span:nth-child(3) { background: var(--quad-3); }
.quad span:nth-child(4) { background: var(--quad-4); }
body.dark .quad { background: none; box-shadow: none; }

/* Logo kini satu warna rata, jadi kotak keempat tidak lagi ditukar
   mengikuti permukaan: #FF319F terbaca di atas latar terang maupun
   gelap. Aturan berikut dibiarkan berdiri supaya pemilih yang sudah
   ada tidak hilang, tetapi nilainya disamakan dengan :root. */
body.dark, body.stage,
.mob-top, .mob-bar, .site-footer, .navbar-dark { --quad-4: #FF319F; }
@media print { :root, body, body.stage, body.dark { --quad-4: #FF319F; } }

/* ---------- Navbar ---------- */
.navbar {
  background: #FFFFFF;
  border-bottom: var(--nb-border);
  box-shadow: 0 4px 0 0 var(--nb-ink);
  color: var(--text);
  padding: 0 24px; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.navbar-right { display: flex; align-items: center; gap: 18px; font-size: 13.5px; }
.navbar-right > a:not(.btn) { color: var(--muted); font-weight: 700; transition: color .15s; }
.navbar-right > a:not(.btn):hover { color: var(--brand); }
.navbar-user { color: var(--muted); font-weight: 700; }
body.dark .navbar { background: #0F172A; border-bottom-color: #fff; box-shadow: 0 4px 0 0 rgba(255,255,255,.25); color: #fff; }
body.dark .navbar-right > a:not(.btn) { color: var(--on-dark-soft); }
body.dark .navbar-right > a:not(.btn):hover { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-size: 14px; font-weight:400; letter-spacing: -.01em;
  border: var(--nb-border); white-space: nowrap; text-decoration: none;
  box-shadow: var(--nb-shadow-sm);
  transition: transform .1s ease, box-shadow .1s ease, background .15s, opacity .15s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--nb-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--nb-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--nb-shadow-sm); }

.btn-primary { background: var(--brand-lite); color: var(--nb-ink); }
.btn-primary:hover { background: #6DFE9C; color: var(--nb-ink); }
.btn-pink    { background: var(--purple-c); color: var(--nb-ink); }
.btn-pink:hover { background: #DDB8FF; color: var(--nb-ink); }
.btn-green   { background: var(--brand-lite); color: var(--nb-ink); }
.btn-green:hover { background: #6DFE9C; color: var(--nb-ink); }
.btn-red     { background: #FF8A80; color: var(--nb-ink); }
.btn-red:hover { background: #FFB4AB; color: var(--nb-ink); }
.btn-gray    { background: #FFFFFF; color: var(--nb-ink); }
.btn-gray:hover { background: var(--surface-2); color: var(--nb-ink); }
.btn-outline { background: #FFFFFF; color: var(--nb-ink); }
.btn-outline:hover { background: var(--surface-2); color: var(--nb-ink); }
.btn-ghost   { background: transparent; color: var(--nb-ink); }
.btn-ghost:hover { background: var(--surface-2); color: var(--nb-ink); }
body.dark .btn-ghost { color: #fff; border-color: #fff; box-shadow: 2px 2px 0 rgba(255,255,255,.5); }
body.dark .btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-sm   { padding: 7px 15px;  font-size: 12.5px; }
.btn-lg   { padding: 15px 30px; font-size: 16px; box-shadow: var(--nb-shadow); }
.btn-lg:hover { box-shadow: 5px 5px 0 var(--nb-ink); }
.btn-full { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: var(--nb-border);
  border-radius: 16px;
  box-shadow: var(--nb-shadow);
  padding: 28px;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 800; color: var(--nb-ink); margin-bottom: 7px; letter-spacing: .04em; text-transform: uppercase; }
.form-input {
  width: 100%; padding: 12px 15px;
  border: var(--nb-border); border-radius: 10px;
  font-size: 15px; font-weight: 500; background: #FFFFFF; color: var(--text);
  box-shadow: var(--nb-shadow-sm);
  transition: box-shadow .12s, transform .12s;
}
.form-input::placeholder { color: #8B9A92; font-weight: 500; }
.form-input:focus { outline: none; box-shadow: var(--nb-shadow); transform: translate(-1px,-1px); }

/* ---------- Password toggle ---------- */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px; color: var(--muted); cursor: pointer;
  padding: 0;
}
.pw-eye:hover { background: var(--surface-2); color: var(--text); }
.pw-eye svg { width: 19px; height: 19px; }
.pw-eye .eye-off { display: none; }
.pw-eye.is-visible .eye-on { display: none; }
.pw-eye.is-visible .eye-off { display: block; }

/* ---------- Alerts ---------- */
.alert {
  padding: 12px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  margin-bottom: 16px; display: none;
  border: var(--nb-border); box-shadow: var(--nb-shadow-sm);
}
.alert.show { display: block; }
.alert-error   { background: #FFDAD6; color: var(--red-dark); }
.alert-success { background: #BBF7D0; color: #14532D; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid var(--nb-ink);
}
.badge-green { background: #BBF7D0; color: #14532D; }
.badge-gray  { background: #FFFFFF; color: var(--nb-ink); }
.badge-blue  { background: #E9D5FF; color: #581C87; }

/* ---------- Modal ---------- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 200; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.show { display: flex; animation: fadeIn .15s ease; }
.modal-box {
  background: #fff; border: var(--nb-border); border-radius: 18px;
  padding: 26px; max-width: 460px; width: 100%;
  box-shadow: var(--nb-shadow-lg); animation: popIn .16s ease;
}
.modal-title { font-size: 19px; font-weight: 900; margin-bottom: 14px; letter-spacing: -.03em; }
.modal-actions { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { from { opacity: 0; transform: translate(4px,4px); } to { opacity: 1; transform: none; } }

/* ---------- Spinner ---------- */
.spinner { width: 38px; height: 38px; border: 4px solid var(--nb-ink); border-top-color: var(--brand-lite); border-radius: 50%; animation: spin .7s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: var(--nb-border); border-radius: 14px; box-shadow: var(--nb-shadow-sm); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 11px 14px; background: var(--surface-2); color: var(--nb-ink);
  font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid var(--nb-ink);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td, table tr:hover td { background: #F6FBF3; }

/* ---------- Answer choices (participant) ---------- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
.choice-btn {
  padding: 18px; border-radius: 14px; border: var(--nb-border);
  box-shadow: var(--nb-shadow);
  font-size: 20px; font-weight: 800; cursor: pointer;
  transition: transform .1s, box-shadow .1s, opacity .2s;
  text-align: left; line-height: 1.35; color: var(--nb-ink);
  display: flex; align-items: center; gap: 12px;
  min-width: 0; height: auto;
  overflow-wrap: break-word; word-break: break-word;
}
.choice-btn > span:last-child {
  min-width: 0; max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word;
}
.choice-btn .ch-sym {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,255,255,.65);
  border: 2px solid var(--nb-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.choices .choice-btn:nth-child(1), .choice-grid .choice-btn:nth-child(1) { background: var(--a-blue); }
.choices .choice-btn:nth-child(2), .choice-grid .choice-btn:nth-child(2) { background: var(--a-green); }
.choices .choice-btn:nth-child(3), .choice-grid .choice-btn:nth-child(3) { background: var(--a-amber); }
.choices .choice-btn:nth-child(4), .choice-grid .choice-btn:nth-child(4) { background: var(--a-red); }
.choices .choice-btn:nth-child(5), .choice-grid .choice-btn:nth-child(5) { background: var(--purple-c); }
.choices .choice-btn:nth-child(6), .choice-grid .choice-btn:nth-child(6) { background: #7DD3FC; }
.choices .choice-btn:nth-child(7), .choice-grid .choice-btn:nth-child(7) { background: #5EEAD4; }
.choices .choice-btn:nth-child(8), .choice-grid .choice-btn:nth-child(8) { background: var(--accent-orange); }
.choice-btn:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--nb-ink); }
.choice-btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 0 0 0 var(--nb-ink); }
.choice-btn.correct { background: var(--brand-lite) !important; color: var(--nb-ink) !important; }
.choice-btn.wrong   { background: #FFDAD6 !important; color: var(--nb-ink) !important; opacity: .75; }

/* ---------- Leaderboard rows ---------- */
.lb-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border: var(--nb-border); border-radius: 12px; background: #fff;
  box-shadow: var(--nb-shadow-sm); margin-bottom: 8px;
}
.lb-rank {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); border: 2px solid var(--nb-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 14px; flex-shrink: 0;
  color: var(--nb-ink);
}
.lb-name  { flex: 1; font-weight: 700; color: var(--nb-ink); }
.lb-score { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--brand); }
.lb-item.rank-1 .lb-rank { background: var(--accent-yellow); color: var(--nb-ink); }
.lb-item.rank-2 .lb-rank { background: var(--purple-c); color: var(--nb-ink); }
.lb-item.rank-3 .lb-rank { background: var(--accent-pink); color: var(--nb-ink); }
body.dark .lb-item { background: rgba(255,255,255,.08); border-color: #fff; box-shadow: 2px 2px 0 rgba(255,255,255,.4); }
/* Poin 1 — NAMA PESERTA TIDAK MUNCUL.
   .lb-name default berwarna --nb-ink (#0F172A). Di halaman panggung
   (admin/live.html memakai <body class="stage">, bukan .dark) warna itu
   jatuh di atas latar gelap sehingga nama peserta praktis tak terbaca.
   Aturan putih di bawah karena itu dipasang untuk .dark DAN .stage. */
body.dark .lb-name, body.stage .lb-name,
body.dark .lb-name .nm, body.stage .lb-name .nm { color: #fff; }
body.dark .lb-score { color: var(--brand-lite); }

/* ---------- Auth split layout ---------- */
.auth { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 100vh; }
.auth-brand {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border-right: var(--nb-border);
  color: var(--nb-ink); padding: 44px 52px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: var(--brand-lite); border: var(--nb-border);
  top: -130px; right: -130px; opacity: .5; pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .brand { color:#FF319F;font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
.auth-brand .brand .dot-id { color:#FF319F;font-weight:900;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #FFFFFF; }
.auth-panel { width: 100%; max-width: 420px; }
.auth h1 { font-size: 27px; font-weight: 900; letter-spacing: -.03em; }
.auth-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.55; font-weight: 600; }
.auth-check .tick {
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--brand-lite); border: 2px solid var(--nb-ink); color: var(--nb-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } }

/* ---------- Floating quad chips (decor) ---------- */
.chip-float {
  position: absolute; border-radius: 14px;
  border: var(--nb-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--nb-ink); font-size: 20px; font-weight: 900;
  box-shadow: var(--nb-shadow);
  animation: floaty 5.5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot,0deg)); } }

/* ---------- Section helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nb-ink); background: var(--accent-yellow);
  border: 2px solid var(--nb-ink); border-radius: 999px; padding: 5px 12px;
  box-shadow: var(--nb-shadow-sm);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--nb-ink); color: var(--on-dark-dim); padding: 52px 24px 32px; border-top: var(--nb-border); }
.site-footer a { color: var(--on-dark-soft); font-size: 14px; font-weight: 600; }
.site-footer a:hover { color: var(--accent-yellow); }
@media (max-width: 720px) { }

/* ---------- Misc ---------- */
::selection { background: var(--accent-yellow); color: var(--nb-ink); }
@media (max-width: 600px) {
  .card { padding: 20px 16px; }
  .choice-grid { grid-template-columns: 1fr; }
  .navbar { padding: 0 14px; height: 60px; }
  .navbar-right { gap: 12px; font-size: 13px; }
  .brand { font-size:22px; gap:9px; white-space: nowrap; flex-shrink: 0; }
  .brand .quad { width:.8em; height:.8em; }
  .navbar .btn { padding: 8px 14px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- App footer (disisipkan js/footer.js) ---------- */
.app-footer { margin-top: auto; background: #FFFFFF; border-top: var(--nb-border); padding: 18px 24px; }
.app-footer .af-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.app-footer .af-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.app-footer .af-brand .quad { width: 17px; height: 17px; gap: 1.5px; flex-shrink: 0; }
.app-footer .af-links { display: inline-flex; align-items: center; gap: 20px; }
.app-footer .af-links a { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
.app-footer .af-links a:hover { color: var(--brand); }
@media (max-width: 600px) {
  .app-footer { padding: 16px; }
  .app-footer .af-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 720px) { }

@media (max-width: 720px) {
}

/* Offset sidebar & konten — nilai 84px HARUS sama dengan .topbar-full */
.sidebar, .sb { top: 84px !important; }
.content { margin-top: 84px; }
@media (max-width: 720px) {
  .content { margin-top: 0; }
}