/* dashboard.css — dipisahkan dari learnai-dashboard.html (baris 14-813).
   Urutan muat dipertahankan persis: <link> menggantikan blok di posisi yang sama. */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: #0b1026;
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: #2b3565;
      border-radius: 4px;
    }

    .dot {
      animation: bounce 1.2s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: .15s;
    }

    .dot:nth-child(3) {
      animation-delay: .3s;
    }

    @keyframes bounce {

      0%,
      80%,
      100% {
        transform: translateY(0);
        opacity: .4
      }

      40% {
        transform: translateY(-4px);
        opacity: 1
      }
    }

    .battle-fighter {
      line-height: 1;
      position: relative;
      animation: idleBob 2.2s ease-in-out infinite;
      filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5));
      user-select: none;
    }

    .battle-fighter svg {
      width: 104px;
      height: auto;
      overflow: visible;
      display: block;
    }

    @media (max-width: 640px) {
      .battle-fighter svg {
        width: 80px;
      }
    }

    .battle-fighter .f-arm-weapon {
      animation: swordIdle 2.4s ease-in-out infinite;
    }

    @keyframes swordIdle {

      0%,
      100% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(7deg);
      }
    }

    .anim-dash-r .f-arm-weapon,
    .anim-dash-l .f-arm-weapon {
      animation: swordSwing .5s ease-in-out;
    }

    @keyframes swordSwing {
      0% {
        transform: rotate(20deg);
      }

      45% {
        transform: rotate(-100deg);
      }

      100% {
        transform: rotate(0deg);
      }
    }

    .anim-shieldup .f-arm-shield {
      animation: shieldRaise .85s ease-out;
    }

    @keyframes shieldRaise {
      0% {
        transform: rotate(0deg) translateY(0);
      }

      30% {
        transform: rotate(-30deg) translateY(-6px);
      }

      70% {
        transform: rotate(-30deg) translateY(-6px);
      }

      100% {
        transform: rotate(0deg) translateY(0);
      }
    }

    /* Aura hijau (heal) & biru (tameng) di belakang karakter */
    .f-aura {
      opacity: 0;
    }

    .anim-heal .f-aura-heal {
      animation: auraPulse .95s ease-in-out;
    }

    .anim-shieldup .f-aura-shield {
      animation: auraPulse .85s ease-in-out;
    }

    @keyframes auraPulse {

      0%,
      100% {
        opacity: 0;
      }

      40% {
        opacity: .8;
      }
    }

    @keyframes idleBob {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    /* Maju menerjang saat menyerang */
    @keyframes dashR {
      0% {
        transform: translateX(0);
      }

      45% {
        transform: translateX(95px) rotate(6deg);
      }

      100% {
        transform: translateX(0);
      }
    }

    @keyframes dashL {
      0% {
        transform: translateX(0);
      }

      45% {
        transform: translateX(-95px) rotate(-6deg);
      }

      100% {
        transform: translateX(0);
      }
    }

    /* Terguncang + memerah saat kena serangan */
    @keyframes hitShake {

      0%,
      100% {
        transform: translateX(0);
        filter: none;
      }

      20% {
        transform: translateX(-8px);
        filter: sepia(1) saturate(8) hue-rotate(-50deg);
      }

      40% {
        transform: translateX(7px);
      }

      60% {
        transform: translateX(-5px);
        filter: sepia(1) saturate(8) hue-rotate(-50deg);
      }

      80% {
        transform: translateX(4px);
      }
    }

    @keyframes healGlow {

      0%,
      100% {
        filter: none;
      }

      50% {
        filter: drop-shadow(0 0 16px #34D399) brightness(1.35);
      }
    }

    @keyframes floatUp {
      0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }

      100% {
        transform: translateX(-50%) translateY(-48px);
        opacity: 0;
      }
    }

    @keyframes shieldPop {
      0% {
        transform: scale(0);
        opacity: 0;
      }

      40% {
        transform: scale(1.3);
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: .95;
      }
    }

    /* Tumbang saat kalah */
    @keyframes koFall {
      0% {
        transform: rotate(0) translateY(0);
        opacity: 1;
      }

      100% {
        transform: rotate(100deg) translateY(16px);
        opacity: .5;
      }
    }

    /* Lompat-lompat kegirangan saat menang */
    @keyframes winJump {

      0%,
      100% {
        transform: translateY(0);
      }

      30% {
        transform: translateY(-20px);
      }

      55% {
        transform: translateY(0);
      }

      75% {
        transform: translateY(-9px);
      }
    }

    .anim-dash-r {
      animation: dashR .5s ease-in-out;
    }

    .anim-dash-l {
      animation: dashL .5s ease-in-out;
    }

    .anim-hit {
      animation: hitShake .55s ease-in-out;
    }

    .anim-heal {
      animation: healGlow .9s ease-in-out;
    }

    .anim-ko {
      animation: koFall .9s ease-in forwards;
    }

    .anim-win {
      animation: winJump 1.1s ease-in-out infinite;
    }

    .battle-float {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      font-weight: 800;
      font-size: 16px;
      animation: floatUp 1.1s ease-out forwards;
      pointer-events: none;
      white-space: nowrap;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    }

    .battle-shield-fx {
      position: absolute;
      top: 2px;
      left: 50%;
      margin-left: -16px;
      font-size: 32px;
      animation: shieldPop .5s ease-out forwards;
      pointer-events: none;
    }

    /* ===== Polesan animasi seluruh website ===== */
    html {
      scroll-behavior: smooth;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: scale(.92) translateY(10px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes floatY {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes glowPulse {

      0%,
      100% {
        box-shadow: 0 10px 26px rgba(99, 102, 241, .35);
      }

      50% {
        box-shadow: 0 10px 38px rgba(139, 92, 246, .65);
      }
    }

    @keyframes flamePulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }
    }

    /* Setiap pindah menu, halaman muncul dengan animasi naik halus */
    .view-anim {
      animation: fadeUp .4s ease both;
    }

    /* Kartu mode di dashboard muncul bergantian + ikon bergoyang saat hover */
    #modes-grid>button {
      animation: fadeUp .5s ease both;
    }

    #modes-grid>button:nth-child(1) {
      animation-delay: .02s;
    }

    #modes-grid>button:nth-child(2) {
      animation-delay: .07s;
    }

    #modes-grid>button:nth-child(3) {
      animation-delay: .12s;
    }

    #modes-grid>button:nth-child(4) {
      animation-delay: .17s;
    }

    #modes-grid>button:nth-child(5) {
      animation-delay: .22s;
    }

    #modes-grid>button:nth-child(6) {
      animation-delay: .27s;
    }

    #modes-grid>button:nth-child(7) {
      animation-delay: .32s;
    }

    #modes-grid>button:nth-child(8) {
      animation-delay: .37s;
    }

    #modes-grid>button .w-11 {
      transition: transform .25s ease;
    }

    #modes-grid>button:hover .w-11 {
      transform: rotate(-8deg) scale(1.12);
    }

    /* Menu sidebar bergeser halus saat disorot */
    #nav-main button {
      transition: all .18s ease;
    }

    #nav-main button:hover {
      transform: translateX(4px);
    }

    /* Semua tombol terasa "ditekan" saat diklik */
    button:active {
      transform: scale(.96);
    }

    /* Latar layar login: gradien lembut yang bergerak pelan */
    .login-bg {
      background: linear-gradient(120deg, #EEF2FF, #F7F8FB, #FDF2F8, #ECFEFF);
      background-size: 300% 300%;
      animation: gradientShift 14s ease infinite;
    }

    #login-screen .max-w-sm,
    #admin-login-screen .max-w-sm {
      animation: popIn .5s ease both;
    }

    /* Banner sapaan di dashboard: gradien yang hidup */
    .hero-anim {
      background-size: 200% 200% !important;
      animation: gradientShift 8s ease infinite;
    }

    .anim-float {
      animation: floatY 3.5s ease-in-out infinite;
    }

    /* Tombol AI Tutor melayang berdenyut */
    .fab-glow {
      animation: glowPulse 2.4s ease-in-out infinite;
    }

    /* Api streak berkobar */
    .streak-flame {
      animation: flamePulse 1.5s ease-in-out infinite;
    }

    /* Modal AI Tutor muncul dengan efek pop */
    #tutor-modal>div {
      animation: popIn .3s ease both;
    }

    /* ==========================================================
       TEMA GELAP PIXEL — menyamakan dashboard dengan halaman depan.
       Kelas-kelas terang Tailwind dipetakan ke versi gelapnya di sini
       (pakai !important supaya menang dari stylesheet Tailwind CDN),
       jadi seluruh tampilan — termasuk yang dirender JavaScript —
       otomatis ikut gelap tanpa mengubah satu pun logika aplikasi.
       ========================================================== */
    h1,
    h2,
    h3 {
      font-family: 'Pixelify Sans', 'Inter', sans-serif;
      letter-spacing: .3px;
    }

    aside span.font-bold,
    #login-screen span.font-bold,
    #admin-login-screen span.font-bold,
    #admin-panel-screen span.font-bold {
      font-family: 'Pixelify Sans', sans-serif;
    }

    /* Latar layar & kartu */
    .bg-\[\#F7F8FB\] {
      background-color: #0b1026 !important;
    }

    .bg-white {
      background-color: #10162f !important;
    }

    .bg-slate-50 {
      background-color: rgba(255, 255, 255, .04) !important;
    }

    .bg-slate-100 {
      background-color: rgba(255, 255, 255, .08) !important;
    }

    .bg-slate-200 {
      background-color: rgba(255, 255, 255, .14) !important;
    }

    .bg-slate-300 {
      background-color: rgba(255, 255, 255, .16) !important;
    }

    .bg-slate-800 {
      background-color: #27305c !important;
    }

    .bg-slate-900 {
      background-color: #1e2447 !important;
    }

    .hover\:bg-slate-50:hover {
      background-color: rgba(255, 255, 255, .06) !important;
    }

    .hover\:bg-slate-100:hover {
      background-color: rgba(255, 255, 255, .1) !important;
    }

    .hover\:bg-slate-200:hover {
      background-color: rgba(255, 255, 255, .16) !important;
    }

    .hover\:bg-slate-800:hover,
    .hover\:bg-slate-900:hover {
      background-color: #2c3768 !important;
    }

    /* Garis tepi */
    .border-slate-50,
    .border-slate-100 {
      border-color: rgba(148, 163, 255, .12) !important;
    }

    .border-slate-200 {
      border-color: rgba(148, 163, 255, .2) !important;
    }

    .hover\:border-slate-300:hover {
      border-color: rgba(148, 163, 255, .35) !important;
    }

    /* Teks netral */
    .text-slate-900 {
      color: #eef1ff !important;
    }

    .text-slate-800 {
      color: #dde3fa !important;
    }

    .text-slate-700 {
      color: #c3cbec !important;
    }

    .text-slate-600 {
      color: #a8b2d8 !important;
    }

    .text-slate-500 {
      color: #8b96c2 !important;
    }

    .text-slate-400 {
      color: #707aa8 !important;
    }

    .hover\:text-slate-800:hover {
      color: #e6eaff !important;
    }

    /* Chip & panel pastel → versi gelap transparan (indigo) */
    .bg-indigo-50 {
      background-color: rgba(99, 102, 241, .18) !important;
    }

    .bg-indigo-100 {
      background-color: rgba(99, 102, 241, .26) !important;
    }

    .text-indigo-600 {
      color: #a5b0fb !important;
    }

    .hover\:text-indigo-700:hover,
    .text-indigo-700 {
      color: #bcc4fd !important;
    }

    /* Oranye (Quiz) */
    .bg-orange-50 {
      background-color: rgba(234, 88, 12, .16) !important;
    }

    .bg-orange-100 {
      background-color: rgba(234, 88, 12, .26) !important;
    }

    .text-orange-600 {
      color: #fdae6b !important;
    }

    .text-orange-700 {
      color: #fec089 !important;
    }

    .text-orange-800 {
      color: #ffd2a8 !important;
    }

    .border-orange-100,
    .border-orange-200 {
      border-color: rgba(251, 146, 60, .35) !important;
    }

    .hover\:bg-orange-50:hover {
      background-color: rgba(234, 88, 12, .2) !important;
    }

    .hover\:text-orange-600:hover {
      color: #fdae6b !important;
    }

    .hover\:border-orange-200:hover {
      border-color: rgba(251, 146, 60, .45) !important;
    }

    /* Merah muda / rose (Battle, error) */
    .bg-rose-50 {
      background-color: rgba(225, 29, 72, .16) !important;
    }

    .bg-rose-100 {
      background-color: rgba(225, 29, 72, .26) !important;
    }

    .text-rose-600 {
      color: #fb87a5 !important;
    }

    .text-rose-700,
    .text-rose-800 {
      color: #fda4bc !important;
    }

    .border-rose-100,
    .border-rose-200 {
      border-color: rgba(244, 63, 94, .35) !important;
    }

    /* Hijau (jawaban benar) */
    .bg-emerald-50 {
      background-color: rgba(16, 185, 129, .15) !important;
    }

    .bg-emerald-100 {
      background-color: rgba(16, 185, 129, .25) !important;
    }

    .text-emerald-600 {
      color: #4ade80 !important;
    }

    .text-emerald-700 {
      color: #6ee7b7 !important;
    }

    .text-emerald-800 {
      color: #a7f3d0 !important;
    }

    .border-emerald-100,
    .border-emerald-200 {
      border-color: rgba(52, 211, 153, .35) !important;
    }

    /* Kuning (Speed Rush) */
    .bg-amber-50 {
      background-color: rgba(245, 158, 11, .14) !important;
    }

    .bg-amber-100 {
      background-color: rgba(245, 158, 11, .24) !important;
    }

    .text-amber-600 {
      color: #fbbf24 !important;
    }

    .text-amber-700,
    .text-amber-800 {
      color: #fcd34d !important;
    }

    .border-amber-100,
    .border-amber-200 {
      border-color: rgba(251, 191, 36, .35) !important;
    }

    .hover\:bg-amber-50:hover {
      background-color: rgba(245, 158, 11, .18) !important;
    }

    .hover\:text-amber-600:hover {
      color: #fbbf24 !important;
    }

    /* Ungu, cyan, teal, pink (mode lain) */
    .bg-violet-50 {
      background-color: rgba(124, 58, 237, .18) !important;
    }

    .text-violet-600 {
      color: #c4b5fd !important;
    }

    .bg-cyan-50 {
      background-color: rgba(8, 145, 178, .16) !important;
    }

    .text-cyan-600 {
      color: #67e8f9 !important;
    }

    .bg-teal-50 {
      background-color: rgba(13, 148, 136, .16) !important;
    }

    .text-teal-600 {
      color: #5eead4 !important;
    }

    .bg-pink-50 {
      background-color: rgba(219, 39, 119, .16) !important;
    }

    .text-pink-600 {
      color: #f9a8d4 !important;
    }