/* ======================================================================
         DAFTAR ISI CSS (urutannya mengikuti alur layar: Welcome → Menu/Home →
         Pengaturan → Alokasi → Wishlist → Catatan → Game → Responsive)
         1. Variabel & Tema (warna, mode terang/gelap, aksen)
         2. Reset & Tipografi dasar
         3. Dekorasi latar (blob)
         4. Sistem layar (screen switcher)
         5. Tombol umum (dipakai di semua layar)
         6. Form field umum (dipakai di semua layar berisi input)
         7. Layar: Memuat (loading)
         8. Layar: Mulai Simulasi (welcome / pengganti login)
         9. Header & navigasi atas (dipakai di semua layar setelah welcome)
         10. Kontainer utama halaman (app-main)
         11. Layar: Menu Utama / Home (termasuk quote slider sindiran)
         12. Komponen bersama tiap fitur (feature-head, panel, dsb)
         13. Layar: Pengaturan
         14. Layar: Alokasi Gaji
         15. Layar: Wishlist Tracker
         16. Layar: Catatan Kas
         17. Layar: Game "Lawan Sindiran"
         18. Responsive (tablet & mobile)
         ====================================================================== */

      /* ----------------------------------------------------------------------
         1. VARIABEL & TEMA
         ---------------------------------------------------------------------- */
      :root {
        --radius-lg: 26px;
        --radius-md: 16px;
        --radius-sm: 10px;
        --shadow: 0 10px 30px -12px rgba(31, 20, 10, 0.14);
        --shadow-sm: 0 4px 14px -6px rgba(31, 20, 10, 0.12);
      }

      /* Mode terang (dipakai bersama warna aksen apa pun) */
      [data-mode="light"] {
        --bg: #f7faf8;
        --bg-alt: #ffffff;
        --bg-soft: #eef4f0;
        --text: #17211b;
        --text-muted: #63705f;
        --border: #dfe8e2;
        --track: #e6ede8;
        --accent-2: #f0507a;
        --accent-2-soft: #fce3ea;
        --accent-3: #8a5cf6;
        --accent-3-soft: #ede4fe;
        --accent-4: #1fa97e;
        --accent-4-soft: #dff4eb;
      }
      /* Mode gelap (dipakai bersama warna aksen apa pun) */
      [data-mode="dark"] {
        --bg: #14161a;
        --bg-alt: #1c1f25;
        --bg-soft: #21252c;
        --text: #f2f3f1;
        --text-muted: #9aa39c;
        --border: #2b2f36;
        --track: #2a2e34;
        --accent-2: #ff7a9c;
        --accent-2-soft: #34212b;
        --accent-3: #b79cff;
        --accent-3-soft: #26223c;
        --accent-4: #4fdba6;
        --accent-4-soft: #1c302a;
      }

      /* Warna aksen: Hijau (bawaan/default) */
      [data-mode="light"][data-accent="hijau"] {
        --accent: #12a583;
        --accent-ink: #ffffff;
        --accent-soft: #d6f2e6;
      }
      [data-mode="dark"][data-accent="hijau"] {
        --accent: #35d1a0;
        --accent-ink: #0d1a15;
        --accent-soft: #16322a;
      }
      /* Warna aksen: Sweet Pink */
      [data-mode="light"][data-accent="pink"] {
        --accent: #ff5fa2;
        --accent-ink: #ffffff;
        --accent-soft: #ffd6ea;
      }
      [data-mode="dark"][data-accent="pink"] {
        --accent: #ff85b8;
        --accent-ink: #23121b;
        --accent-soft: #3a2230;
      }
      /* Warna aksen: Ungu */
      [data-mode="light"][data-accent="ungu"] {
        --accent: #8a5cf6;
        --accent-ink: #ffffff;
        --accent-soft: #ede4fe;
      }
      [data-mode="dark"][data-accent="ungu"] {
        --accent: #b79cff;
        --accent-ink: #1a1430;
        --accent-soft: #2a2340;
      }
      /* Warna aksen: Biru */
      [data-mode="light"][data-accent="biru"] {
        --accent: #2e9be0;
        --accent-ink: #ffffff;
        --accent-soft: #def0fb;
      }
      [data-mode="dark"][data-accent="biru"] {
        --accent: #5cb8f5;
        --accent-ink: #0f2130;
        --accent-soft: #1c2d3d;
      }

      /* ----------------------------------------------------------------------
         2. RESET & TIPOGRAFI DASAR
         ---------------------------------------------------------------------- */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: var(--bg);
        /* Dot-grid halus ala Linear/Notion — memberi tekstur tanpa ramai,
           warnanya ikut mengikuti --text jadi otomatis pas di mode terang/gelap. */
        background-image: radial-gradient(
          circle at 1px 1px,
          color-mix(in srgb, var(--text) 15%, transparent) 1px,
          transparent 0
        );
        background-size: 26px 26px;
        background-attachment: fixed;
        color: var(--text);
        font-family: "Plus Jakarta Sans", sans-serif;
        transition:
          background-color 0.4s ease,
          color 0.4s ease;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        min-height: 100vh;
        position: relative;
      }
      /* Lapisan noise tipis di atas dot-grid supaya latar terasa "bertekstur",
         bukan flat polos. Sangat halus (opacity rendah) agar tetap minimalist. */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.5;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }
      /* Vinyet lembut di tepi layar agar dot-grid tidak terasa rata/statis */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(
          ellipse at 50% 0%,
          transparent 0%,
          transparent 45%,
          color-mix(in srgb, var(--bg) 55%, transparent) 100%
        );
      }
      h1,
      h2,
      h3,
      .display {
        font-family: "Baloo 2", sans-serif;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      a {
        color: inherit;
      }
      button {
        font-family: inherit;
        cursor: pointer;
      }
      input,
      select {
        font-family: inherit;
      }
      :focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
        border-radius: 6px;
      }
      .mono {
        font-family: "Space Mono", monospace;
      }

      /* ----------------------------------------------------------------------
         3. DEKORASI LATAR (gradient mesh lembut yang melayang pelan di belakang
         dot-grid). Tiap blob pakai gradasi 2 warna, bukan warna flat, supaya
         terasa lebih "modern mesh gradient" daripada lingkaran blur polos.
         ---------------------------------------------------------------------- */
      .blob {
        position: fixed;
        border-radius: 50%;
        filter: blur(70px);
        z-index: 0;
        pointer-events: none;
        animation: blobDrift 22s ease-in-out infinite alternate;
      }
      .blob.b2 {
        animation-duration: 26s;
        animation-delay: -6s;
      }
      .blob.b3 {
        animation-duration: 30s;
        animation-delay: -12s;
      }
      @keyframes blobDrift {
        from {
          transform: translate(0, 0) scale(1);
        }
        to {
          transform: translate(22px, -18px) scale(1.06);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .blob {
          animation: none;
        }
      }

      /* ----------------------------------------------------------------------
         4. SISTEM LAYAR (screen switcher) — hanya 1 layar aktif di satu waktu
         ---------------------------------------------------------------------- */
      .screen {
        display: none;
      }
      .screen.active {
        display: block;
        animation: fadeIn 0.4s ease;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ----------------------------------------------------------------------
         5. TOMBOL UMUM (dipakai di seluruh halaman: primary/ghost/danger)
         ---------------------------------------------------------------------- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 24px;
        border-radius: 100px;
        border: none;
        font-weight: 700;
        font-size: 14.5px;
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease,
          background 0.2s,
          opacity 0.15s;
        width: 100%;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
      }
      .btn-primary {
        background: var(--accent);
        color: var(--accent-ink);
        box-shadow: 0 8px 20px -8px
          color-mix(in srgb, var(--accent) 70%, transparent);
      }
      .btn-ghost {
        background: transparent;
        color: var(--text);
        border: 1.5px solid var(--border);
      }
      .btn-danger {
        background: transparent;
        color: var(--accent-2);
        border: 1.5px solid var(--accent-2-soft);
      }
      .btn-auto {
        width: auto;
      }
      .btn-sm {
        padding: 9px 16px;
        font-size: 13.5px;
      }

      /* ----------------------------------------------------------------------
         6. FORM FIELD UMUM (label + kotak isian, dipakai di semua layar)
         ---------------------------------------------------------------------- */
      .field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 30px;
      }
      .field label {
        font-size: 12px;
        text-align: center;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .field input,
      .field select {
        padding: 13px 15px;
        border-radius: 12px;
        border: 1.5px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-size: 14.5px;
        font-weight: 600;
        width: 100%;
      }
      .field input:focus,
      .field select:focus {
        border-color: var(--accent);
      }

      /* ----------------------------------------------------------------------
         7. LAYAR: MEMUAT (LOADING)
         ---------------------------------------------------------------------- */
      .loading-note {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
        font-size: 14px;
      }

      /* ----------------------------------------------------------------------
         8. LAYAR: MULAI SIMULASI (welcome / pengganti login)
         ---------------------------------------------------------------------- */
      .auth-wrap {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 64px 20px 32px;
      }
      .auth-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 450px;
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 34px 34px 38px;
        box-shadow: var(--shadow);
      }
      .auth-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-family: "Baloo 2";
        font-weight: 700;
        font-size: 19px;
        margin-bottom: 2px;
        text-align: center;
      }
      .auth-logo .mark {
        width: 90px;
        height: 90px;
        border-radius: 90px;
        display: flex;
        position: relative;
        overflow: hidden;
        left: -6px;
        font-size: 18px;
        margin-bottom: -30px;
        flex: none;
      }
      .auth-eyebrow {
        text-align: center;
        color: var(--text-muted);
        font-size: 12px;
        margin-bottom: 20px;
      }
      .auth-card h2 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 6px;
      }
      .auth-sub {
        text-align: center;
        color: var(--text-muted);
        font-size: 12px;
        margin-bottom: 15px;
      }
      /* Petunjuk kecil di bawah input nama (khusus layar welcome) */
      .field-hint {
        font-size: 12px;
        color: var(--text-muted);
        text-align: center;
      }
      .auth-switch {
        text-align: center;
        margin-top: 20px;
        font-size: 13.5px;
        color: var(--text-muted);
      }
      .auth-switch button {
        background: none;
        border: none;
        color: var(--accent);
        font-weight: 700;
        font-size: 13.5px;
        text-decoration: underline;
        padding: 0;
      }

      /* ----------------------------------------------------------------------
         9. HEADER & NAVIGASI ATAS (tombol Home / Game / Pengaturan)
         dipakai di semua layar setelah welcome
         ---------------------------------------------------------------------- */
      .app-header {
        position: sticky;
        top: 0;
        z-index: 40;
        backdrop-filter: blur(10px);
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        border-bottom: 1px solid var(--border);
      }
      .app-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        padding: 14px 28px;
        max-width: 1120px;
        margin: 0 auto;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: "Baloo 2";
        font-weight: 700;
        font-size: 18px;
      }
      .logo .mark {
        width: 80px;
        height: 80px;
        border-radius: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        font-size: 16px;
        flex: none;
      }
      /* Logo otomatis ganti sesuai mode terang/gelap — dipakai di layar
         Welcome (.auth-logo .mark) dan Header (.logo .mark). Cukup siapkan
         2 file PNG: satu untuk mode terang, satu untuk mode gelap. */
      .logo-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
      }
      [data-mode="light"] .logo-img-light {
        display: block;
      }
      [data-mode="dark"] .logo-img-dark {
        display: block;
      }
      /* Tombol navigasi: Home / Game / Pengaturan (bentuk pill) */
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: 100px;
        padding: 4px;
      }
      .nav-link {
        background: none;
        border: none;
        padding: 8px 16px;
        border-radius: 100px;
        font-weight: 700;
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .nav-link.active {
        background: var(--accent);
        color: var(--accent-ink);
      }
      .header-right {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      /* Chip nama + foto profil kecil di pojok kanan atas */
      .user-chip {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 14px 6px 6px;
        border: 1px solid var(--border);
        border-radius: 100px;
        background: var(--bg-alt);
      }
      .user-chip .avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 12.5px;
        flex: none;
        overflow: hidden;
      }
      .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .user-chip span {
        font-size: 13px;
        font-weight: 700;
      }
      .logout-btn {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 700;
      }
      .logout-btn:hover {
        color: var(--accent);
      }

      /* ----------------------------------------------------------------------
         10. KONTENER UTAMA ISI HALAMAN (di bawah header)
         ---------------------------------------------------------------------- */
      .app-main {
        max-width: 1120px;
        margin: 0 auto;
        padding: 40px 28px 80px;
        position: relative;
        z-index: 1;
      }
      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-weight: 700;
        font-size: 13.5px;
        margin-bottom: 22px;
      }
      .back-link:hover {
        color: var(--accent);
      }

      /* ----------------------------------------------------------------------
         11. LAYAR: MENU UTAMA / HOME
         ---------------------------------------------------------------------- */
      .menu-head {
        margin-bottom: 28px;
      }
      .menu-head h2 {
        font-size: clamp(24px, 3.6vw, 32px);
        margin-bottom: 8px;
      }
      .menu-head p {
        color: var(--text-muted);
        font-size: 15px;
      }

      /* ---- Kotak kutipan "struk" sindiran doom-spending, mengikuti tema aksen
             yang dipilih user & mode terang/gelap. Isinya berganti tiap 10 detik
             lewat JS (lihat startQuoteRotation). ---- */
      .sindiran-box {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 32px;
        padding: 20px 24px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: linear-gradient(
          135deg,
          var(--accent-soft),
          color-mix(in srgb, var(--accent) 12%, var(--bg-alt))
        );
        border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
        box-shadow: var(--shadow-sm);
      }
      .sindiran-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at top right,
          color-mix(in srgb, var(--accent) 22%, transparent),
          transparent 60%
        );
        pointer-events: none;
      }
      .sindiran-icon {
        position: relative;
        z-index: 1;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex: none;
        background: linear-gradient(
          135deg,
          var(--accent),
          color-mix(in srgb, var(--accent) 55%, var(--bg-alt))
        );
        box-shadow: 0 8px 18px -8px
          color-mix(in srgb, var(--accent) 60%, transparent);
      }
      .sindiran-content {
        position: relative;
        z-index: 1;
        min-width: 0;
      }
      .sindiran-tag {
        display: block;
        font-family: "Space Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--accent);
        margin-bottom: 5px;
      }
      .sindiran-content p {
        font-family: "Space Mono", monospace;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 700;
        color: var(--text);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }
      .sindiran-content p.fade {
        opacity: 0;
        transform: translateY(4px);
      }

      /* ---- Grid kartu fitur: Alokasi Gaji / Wishlist / Catatan Kas / Game ---- */
      .menu-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
      }
      .menu-card {
        background: var(--bg-alt);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 32px 26px;
        text-align: left;
        box-shadow: var(--shadow-sm);
        transition:
          transform 0.18s ease,
          border-color 0.18s ease;
      }
      .menu-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent);
      }
      .icon-badge {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 18px;
      }
      .menu-card h3 {
        font-size: 19px;
        margin-bottom: 8px;
      }
      .menu-card p {
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 18px;
      }
      .menu-card .arrow {
        color: var(--accent);
        font-weight: 700;
        font-size: 13.5px;
      }

      /* ----------------------------------------------------------------------
         12. KOMPONEN BERSAMA TIAP FITUR
         (dipakai di Pengaturan, Alokasi, Wishlist, Catatan, Game)
         ---------------------------------------------------------------------- */
      .feature-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 8px;
      }
      .feature-head .icon-badge {
        margin-bottom: 0;
      }
      .feature-head h2 {
        font-size: 26px;
        color: var(--accent);
      }
      .feature-sub {
        color: var(--text-muted);
        font-size: 14.5px;
        margin-bottom: 30px;
      }
      /* Kotak panel putih pembungkus form tiap fitur */
      .panel {
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 30px;
        box-shadow: var(--shadow-sm);
      }
      .field-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: flex-end;
        margin-bottom: 22px;
      }
      .field-row .field {
        flex: 1;
        min-width: 160px;
        margin-bottom: 0;
      }
      .field-row .btn {
        width: auto;
      }
      /* Tombol ikon kecil bulat (mis. tombol hapus "X"), dipakai di Wishlist & Catatan */
      .icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1.5px solid var(--border);
        background: var(--bg-alt);
        color: var(--text-muted);
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icon-btn:hover {
        color: var(--accent-2);
        border-color: var(--accent-2);
      }
      /* Tampilan saat data masih kosong, dipakai di Wishlist & Catatan */
      .empty-state {
        text-align: center;
        padding: 36px 20px;
        color: var(--text-muted);
        font-size: 14px;
        border: 1.5px dashed var(--border);
        border-radius: var(--radius-md);
        margin-top: 18px;
      }
      /* Strip ringkasan angka, dipakai di Alokasi Gaji & Catatan Kas */
      .summary-strip {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 22px;
        padding: 18px 20px;
        background: var(--bg-soft);
        border-radius: var(--radius-md);
      }
      .summary-item .num {
        font-family: "Baloo 2";
        font-size: 22px;
        font-weight: 700;
        color: var(--accent);
      }
      .summary-item .lbl {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
      }
      .summary-item.warn .num {
        color: var(--accent-2);
      }
      .summary-item.ok .num {
        color: var(--accent);
      }

      /* ----------------------------------------------------------------------
         13. LAYAR: PENGATURAN (Tema, Nama Panggilan)
         ---------------------------------------------------------------------- */
      .settings-section {
        margin-bottom: 26px;
      }
      .settings-section h3 {
        font-size: 16.5px;
        margin-bottom: 4px;
      }
      .settings-section .sec-sub {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 16px;
      }
      /* Tombol pilihan tema (lingkaran warna) */
      .theme-grid {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      .theme-choice {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
      }
      .theme-swatch {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        border: 2.5px solid transparent;
        transition: border-color 0.2s;
      }
      .theme-choice.active .theme-swatch {
        border-color: var(--accent);
      }
      .theme-swatch[data-mode-swatch="light"] {
        background: linear-gradient(135deg, #ffffff, #eef4f0);
        border: 1.5px solid var(--border);
      }
      .theme-swatch[data-mode-swatch="dark"] {
        background: linear-gradient(135deg, #14161a, #2b2f36);
      }
      .theme-swatch[data-accent-swatch="hijau"] {
        background: linear-gradient(135deg, #12a583, #35d1a0);
      }
      .theme-swatch[data-accent-swatch="pink"] {
        background: linear-gradient(135deg, #ff5fa2, #ff9fcf);
      }
      .theme-swatch[data-accent-swatch="ungu"] {
        background: linear-gradient(135deg, #8a5cf6, #c3aaff);
      }
      .theme-swatch[data-accent-swatch="biru"] {
        background: linear-gradient(135deg, #2e9be0, #7fc4f2);
      }
      .theme-choice span {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
      }
      .divider {
        height: 1px;
        background: var(--border);
        margin: 26px 0;
      }
      /* Kotak pesan sukses (hijau), dipakai di Pengaturan (simpan nama) */
      .form-ok {
        font-size: 13px;
        font-weight: 700;
        padding: 10px 14px;
        border-radius: 10px;
        margin-bottom: 16px;
        display: none;
        background: var(--accent-4-soft);
        color: var(--accent-4);
      }
      .form-ok.show {
        display: block;
      }
      /* Kotak info sisa kesempatan ganti nama (netral, warna aksen ungu) */
      .form-info {
        font-size: 13px;
        font-weight: 700;
        padding: 10px 14px;
        border-radius: 10px;
        margin-bottom: 16px;
        display: none;
        background: var(--accent-soft);
        color: var(--accent);
      }
      .form-info.show {
        display: block;
      }
      .save-status {
        font-size: 12.5px;
        color: var(--accent-4);
        font-weight: 700;
        min-height: 16px;
        margin-top: 6px;
      }

      /* ----------------------------------------------------------------------
         14. LAYAR: ALOKASI GAJI — kartu tiap pos & progress bar
         ---------------------------------------------------------------------- */
      .pos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
        margin-top: 6px;
      }
      .pos-card {
        border: 1.5px solid var(--border);
        border-radius: var(--radius-md);
        padding: 16px;
        background: var(--bg);
      }
      .pos-card .pos-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .pos-card .pos-name {
        font-weight: 700;
        font-size: 14px;
      }
      .pos-card .pos-pct {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 700;
      }
      .pos-card input {
        width: 100%;
        padding: 9px 10px;
        border-radius: 9px;
        border: 1.5px solid var(--border);
        background: var(--bg-alt);
        font-weight: 700;
        font-size: 14px;
        color: var(--text);
      }
      .bar-track {
        height: 8px;
        background: var(--track);
        border-radius: 6px;
        margin-top: 10px;
        overflow: hidden;
      }
      .bar-fill {
        height: 100%;
        border-radius: 6px;
        transition: width 0.3s ease;
      }
      /* Kotak kecil berisi rumus (50-30-20) */
      .formula-box {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        border: 1.5px solid var(--border);
        border-radius: 100px;
        font-weight: 700;
        font-size: 13.5px;
        margin-top: 20px;
        background: var(--bg);
      }
      .formula-box .frac {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        line-height: 1.3;
      }
      .formula-box .frac .line {
        width: 100%;
        border-top: 1.5px solid var(--text);
        margin: 2px 0;
      }

      /* ----------------------------------------------------------------------
         15. LAYAR: WISHLIST TRACKER
         ---------------------------------------------------------------------- */
      .wish-list {
        display: grid;
        gap: 14px;
        margin-top: 22px;
      }
      .wish-card {
        border: 1.5px solid var(--border);
        border-radius: var(--radius-md);
        padding: 18px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        background: var(--bg);
      }
      .wish-card .wname {
        font-weight: 700;
        font-size: 15.5px;
      }
      .wish-card .wmeta {
        color: var(--text-muted);
        font-size: 13px;
        margin-top: 4px;
      }
      .wish-duration {
        text-align: center;
        background: var(--accent-2-soft);
        color: var(--accent-2);
        border-radius: 14px;
        padding: 10px 16px;
        min-width: 100px;
      }
      .wish-duration .d-num {
        font-family: "Baloo 2";
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
      }
      .wish-duration .d-lbl {
        font-size: 11px;
        font-weight: 700;
        margin-top: 2px;
      }

      /* ----------------------------------------------------------------------
         16. LAYAR: CATATAN KAS
         ---------------------------------------------------------------------- */
      .cash-list {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .cash-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
        border: 1.5px solid var(--border);
        border-radius: 12px;
        background: var(--bg);
        flex-wrap: wrap;
      }
      .cash-row .ci-name {
        font-weight: 700;
        font-size: 14.5px;
      }
      .cash-row .ci-meta {
        font-size: 12.5px;
        color: var(--text-muted);
      }
      .cash-row .ci-amt {
        font-family: "Baloo 2";
        font-weight: 700;
        color: var(--accent-2);
        font-size: 15px;
      }

      /* ----------------------------------------------------------------------
         17. LAYAR: GAME "LAWAN SINDIRAN" (kuis pilihan ganda doom-spending)
         ---------------------------------------------------------------------- */
      .game-stats {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 22px;
        padding: 16px 20px;
        background: var(--bg-soft);
        border-radius: var(--radius-md);
      }
      .game-stat .num {
        font-family: "Baloo 2";
        font-size: 22px;
        font-weight: 700;
      }
      .game-stat .lbl {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
      }
      .game-prompt {
        background: var(--bg);
        border: 1.5px dashed var(--accent-2);
        border-radius: var(--radius-md);
        padding: 22px;
        margin-bottom: 22px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .game-prompt .gp-badge {
        font-family: "Space Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 4px 9px;
        border-radius: 6px;
        background: var(--accent-2-soft);
        color: var(--accent-2);
        flex: none;
        margin-top: 2px;
      }
      .game-prompt p {
        font-family: "Space Mono", monospace;
        font-size: 15px;
        line-height: 1.6;
        font-weight: 700;
      }
      .game-question {
        font-size: 14.5px;
        color: var(--text-muted);
        font-weight: 700;
        margin-bottom: 14px;
      }
      .game-options {
        display: grid;
        gap: 12px;
      }
      .game-option {
        text-align: left;
        width: 100%;
        padding: 15px 18px;
        border-radius: var(--radius-md);
        border: 1.5px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        transition:
          border-color 0.15s,
          background 0.15s,
          transform 0.1s;
      }
      .game-option:hover:not(:disabled) {
        border-color: var(--accent);
        transform: translateY(-1px);
      }
      .game-option:disabled {
        cursor: default;
      }
      .game-option.correct {
        border-color: var(--accent-4);
        background: var(--accent-4-soft);
        color: var(--accent-4);
      }
      .game-option.wrong {
        border-color: var(--accent-2);
        background: var(--accent-2-soft);
        color: var(--accent-2);
      }
      .game-feedback {
        margin-top: 18px;
        padding: 16px 18px;
        border-radius: var(--radius-md);
        font-size: 13.5px;
        line-height: 1.6;
        font-weight: 600;
        display: none;
      }
      .game-feedback.show {
        display: block;
      }
      .game-feedback.correct {
        background: var(--accent-4-soft);
        color: var(--accent-4);
      }
      .game-feedback.wrong {
        background: var(--accent-2-soft);
        color: var(--accent-2);
      }
      .game-next-wrap {
        margin-top: 18px;
        display: none;
      }
      .game-next-wrap.show {
        display: block;
      }
      /* Pilih level (Easy/Medium/Hard) */
      .level-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
      }
      .level-card {
        background: var(--bg-alt);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 26px 24px;
        text-align: left;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        transition:
          transform 0.18s ease,
          border-color 0.18s ease;
      }
      .level-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent);
      }
      .level-tag {
        font-family: "Space Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 4px 10px;
        border-radius: 100px;
        margin-bottom: 6px;
      }
      .level-tag.easy {
        background: var(--accent-4-soft);
        color: var(--accent-4);
      }
      .level-tag.medium {
        background: var(--accent-3-soft);
        color: var(--accent-3);
      }
      .level-tag.hard {
        background: var(--accent-2-soft);
        color: var(--accent-2);
      }
      .level-card h3 {
        font-size: 18px;
      }
      .level-card p {
        color: var(--text-muted);
        font-size: 13.5px;
        line-height: 1.6;
      }
      .level-stat {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
      }
      /* Baris progres kuis (badge level + Soal x/10) */
      .game-progress-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 10px;
      }
      .game-progress-text {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--text-muted);
      }
      /* Panel hasil akhir 10 soal */
      .game-result-panel {
        text-align: center;
        max-width: 560px;
        margin: 0 auto;
      }
      .game-result-emoji {
        font-size: 46px;
        margin-bottom: 6px;
      }
      .game-result-panel h3 {
        font-size: 23px;
        margin-bottom: 10px;
      }
      .game-result-panel p {
        color: var(--text-muted);
        font-size: 14.5px;
        line-height: 1.7;
        margin-bottom: 6px;
      }
      .game-result-panel .summary-strip {
        justify-content: center;
      }
      .game-result-panel .profil-actions {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      /* ----------------------------------------------------------------------
         18. RESPONSIVE — Tablet & Mobile
         ---------------------------------------------------------------------- */
      @media (max-width: 860px) {
        .nav-links {
          order: 3;
          width: 100%;
          justify-content: center;
        }
      }
      @media (max-width: 560px) {
        .auth-wrap {
          padding-top: 40px;
        }
        .auth-card {
          padding: 26px 22px 30px;
        }
        .field-row {
          flex-direction: column;
          align-items: stretch;
        }
        .field-row .btn {
          width: 100%;
        }
        .sindiran-box {
          padding: 16px 18px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          transition: none !important;
        }
      }