/* pixel-theme.css — dipisahkan dari learnai-dashboard.html (baris 814-1076).
   Urutan muat dipertahankan persis: <link> menggantikan blok di posisi yang sama. */
    /* ============================================================
       TEMA PIXEL GELAP — menyulap dashboard jadi gaya pixel-art
       (scoped ke #dashboard-screen & #tutor-modal supaya layar
       login internal/admin tidak ikut berubah)
       ============================================================ */
    #dashboard-screen,
    #tutor-modal {
      font-family: 'Pixelify Sans', monospace;
    }

    /* Panel putih → panel navy gelap berbingkai */
    #dashboard-screen .bg-white,
    #tutor-modal .bg-white {
      background: #10173a !important;
      border-color: #262f5e !important;
    }

    #dashboard-screen .bg-slate-50,
    #tutor-modal .bg-slate-50 {
      background: #0d1330 !important;
    }

    #dashboard-screen .bg-slate-100,
    #tutor-modal .bg-slate-100 {
      background: #1a2249 !important;
    }

    #dashboard-screen .hover\:bg-slate-50:hover,
    #dashboard-screen .hover\:bg-slate-100:hover,
    #dashboard-screen .hover\:bg-slate-200:hover {
      background: #232c5c !important;
    }

    #dashboard-screen .bg-indigo-50 {
      background: #232c5c !important;
    }

    #dashboard-screen .bg-blue-50,
    #dashboard-screen .bg-rose-50,
    #dashboard-screen .bg-emerald-50,
    #dashboard-screen .bg-amber-50,
    #dashboard-screen .bg-violet-50,
    #dashboard-screen .bg-orange-50,
    #dashboard-screen .bg-teal-50,
    #dashboard-screen .bg-cyan-50,
    #dashboard-screen .bg-pink-50,
    #dashboard-screen .bg-yellow-50 {
      background: #1a2249 !important;
    }

    /* Teks gelap → terang */
    #dashboard-screen .text-slate-900,
    #tutor-modal .text-slate-900 {
      color: #f1f5f9 !important;
    }

    #dashboard-screen .text-slate-800,
    #tutor-modal .text-slate-800 {
      color: #e2e8f0 !important;
    }

    #dashboard-screen .text-slate-700,
    #tutor-modal .text-slate-700 {
      color: #cbd5e1 !important;
    }

    #dashboard-screen .text-slate-600,
    #tutor-modal .text-slate-600 {
      color: #a5b4d4 !important;
    }

    #dashboard-screen .text-slate-500,
    #tutor-modal .text-slate-500 {
      color: #8fa3c8 !important;
    }

    #dashboard-screen .text-slate-400,
    #tutor-modal .text-slate-400 {
      color: #7285ab !important;
    }

    /* Garis pemisah */
    #dashboard-screen .border-slate-100,
    #dashboard-screen .border-slate-200,
    #tutor-modal .border-slate-100 {
      border-color: #262f5e !important;
    }

    /* Input */
    #dashboard-screen input,
    #tutor-modal input,
    #dashboard-screen textarea,
    #dashboard-screen select {
      color: #f1f5f9;
    }

    #dashboard-screen input::placeholder,
    #tutor-modal input::placeholder {
      color: #5f6f95;
    }

    /* Sidebar item aktif */
    #dashboard-screen .nav-active {
      background: #2c3a8f !important;
      color: #fff !important;
      border: 2px solid #5468ff !important;
      box-shadow: 0 3px 0 #1b246b;
    }

    #dashboard-screen .nav-idle {
      border: 2px solid transparent;
    }

    #dashboard-screen .nav-soon {
      opacity: .55;
      cursor: default;
    }

    /* Kartu panel utama bergaya pixel */
    .px-panel {
      background: #10173a !important;
      border: 2px solid #262f5e !important;
      border-radius: 12px !important;
    }

    /* Tombol hero (Mulai Belajar / AI Tutor) gaya pixel */
    .btn-hero {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 20px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      font-family: 'Pixelify Sans', monospace;
      transition: transform .08s ease, box-shadow .08s ease;
      cursor: pointer;
    }

    .btn-hero-solid {
      background: #4655d4;
      color: #fff;
      box-shadow: 0 4px 0 #232c7a;
      border: 2px solid #6a78ff;
    }

    .btn-hero-solid:hover {
      filter: brightness(1.1);
    }

    .btn-hero-solid:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #232c7a;
    }

    .btn-hero-ghost {
      background: #e8ecf7;
      color: #1b2452;
      box-shadow: 0 4px 0 #9aa4c4;
      border: 2px solid #fff;
    }

    .btn-hero-ghost:hover {
      filter: brightness(1.04);
    }

    .btn-hero-ghost:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #9aa4c4;
    }

    /* Chip topbar (streak, lonceng) */
    .top-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #10173a;
      border: 2px solid #262f5e;
      border-radius: 10px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #f1f5f9;
    }

    /* Titik hari streak */
    .day-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .day-done {
      background: #16a34a;
    }

    .day-fire {
      background: transparent;
      font-size: 18px;
    }

    .day-off {
      background: #2a335f;
    }

    /* Bar XP */
    .xp-bar {
      height: 10px;
      border-radius: 6px;
      background: #262f5e;
      overflow: hidden;
    }

    .xp-bar>i {
      display: block;
      height: 100%;
      width: 65%;
      border-radius: 6px;
      background: linear-gradient(90deg, #4655d4, #6a78ff);
    }

    /* Baris peringkat */
    .rank-badge {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #1b1b1b;
    }

    /* Kartu upgrade premium di sidebar */
    .premium-card {
      margin: 12px;
      padding: 14px;
      border-radius: 12px;
      background: #1c1440;
      border: 2px solid #6d28d9;
      box-shadow: 0 4px 0 #3b1a78;
    }

    /* Kaki sidebar: gambar menempel rata di dasar, tampil utuh (tak terpotong) */
    .sidebar-cat {
      margin-top: auto;
      display: flex;
      align-items: flex-end;
    }

    .sidebar-cat img {
      width: 100%;
      height: auto;
      display: block;
      image-rendering: pixelated;
    }