/* ========================================================
     BASE STYLING & CORE ANIMATIONS
     ======================================================== */
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F8FAFC;
    color: #0F172A;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  /* Custom Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
  }

  /* Form Inputs, Selects & Option Styling */
  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.25rem !important;
  }

  select option {
    background-color: #ffffff;
    color: #0f172a;
    padding: 10px 14px;
    font-size: 13px;
  }

  html.dark select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  html.dark select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 10px 14px;
  }

  /* Date & Time Picker Dialog Controls */
  input[type="date"],
  input[type="time"] {
    color-scheme: light;
  }

  html.dark input[type="date"],
  html.dark input[type="time"] {
    color-scheme: dark;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }

  /* Tabular Figures for All Numerical Data */
  .font-mono,
  td,
  [class*="currency"] {
    font-variant-numeric: tabular-nums;
  }

  /* Role-Based Access Control Visibility Rules */
  .admin-only-feature.hidden,
  .admin-only-table-col.hidden,
  .public-only-feature.hidden {
    display: none !important;
  }

  /* Micro Animation */
  @keyframes scaleUp {
    from {
      opacity: 0;
      transform: scale(0.96);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-scaleUp {
    animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes shake {

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

    20%,
    60% {
      transform: translateX(-6px);
    }

    40%,
    80% {
      transform: translateX(6px);
    }
  }

  .animate-shake {
    animation: shake 0.4s ease-in-out;
  }

  @keyframes wave {

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

    20% {
      transform: rotate(14deg);
    }

    40% {
      transform: rotate(-8deg);
    }

    60% {
      transform: rotate(14deg);
    }

    80% {
      transform: rotate(-4deg);
    }
  }

  .animate-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave 1.8s infinite;
  }

  /* Glassmorphism Classes */
  .glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
  }

  /* ========================================================
     REAL-TIME SYNC GLOW & PULSE INDICATOR (LIGHT & DARK MODE)
     ======================================================== */
  .sync-dot-live {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.9);
  }

  html.dark .sync-dot-live {
    box-shadow: 0 0 10px rgba(52, 211, 153, 1), 0 0 18px rgba(16, 185, 129, 0.7) !important;
  }

  @keyframes syncFlashHighlight {
    0% {
      background-color: rgba(16, 185, 129, 0.35) !important;
      border-color: #34D399 !important;
      box-shadow: 0 0 20px rgba(52, 211, 153, 0.8) !important;
      transform: scale(1.03);
    }

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

  .sync-flash-badge {
    animation: syncFlashHighlight 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Badge Sync Terhubung yang tegas & menyala terang di Dark Mode */
  html.dark #firebase-status-badge,
  html.dark #realtime-status-pill {
    background-color: rgba(6, 78, 59, 0.7) !important;
    border-color: rgba(52, 211, 153, 0.7) !important;
    color: #A7F3D0 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.3) !important;
  }

  /* ========================================================
     ROLE-BASED ACCESS CONTROL (ADMIN VS PUBLIK / GUEST)
     ======================================================== */
  body.is-public-mode .admin-only-feature {
    display: none !important;
  }

  body.is-public-mode .admin-only-table-col {
    display: none !important;
  }

  body.is-public-mode .public-only-feature {
    display: flex !important;
  }

  /* ========================================================
     SIGNATURE ADAPTIVE DISPLAY (LIGHT, DARK, PRINT)
     ======================================================== */
  .signature-user-img {
    filter: none;
    transition: filter 0.25s ease;
  }

  /* Di layar Mode Gelap: Tanda tangan otomatis diinversi menjadi putih menyala */
  html.dark .signature-user-img {
    filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6));
  }

  /* ========================================================
     1. UNIVERSAL CONTRAST ENGINE - MODE TERANG (LIGHT MODE)
     Memastikan SEMUA teks terbaca tajam, kontras tinggi,
     tidak ada teks abu-abu yang pudar/samar di atas putih.
     ======================================================== */
  html:not(.dark) {
    color-scheme: light;
  }

  html:not(.dark) body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
  }

  /* Naikkan kontras teks slate di mode terang */
  html:not(.dark) .text-slate-900 {
    color: #0F172A !important;
  }

  html:not(.dark) .text-slate-800 {
    color: #1E293B !important;
  }

  html:not(.dark) .text-slate-700 {
    color: #334155 !important;
  }

  html:not(.dark) .text-slate-600 {
    color: #475569 !important;
  }

  html:not(.dark) .text-slate-500 {
    color: #475569 !important;
    font-weight: 500;
  }

  html:not(.dark) .text-slate-400 {
    color: #64748B !important;
    font-weight: 500;
  }

  html:not(.dark) .text-slate-300 {
    color: #64748B !important;
  }

  /* Teks warna di mode terang: selalu pekat dan kontras */
  html:not(.dark) .text-emerald-950 {
    color: #064E3B !important;
  }

  html:not(.dark) .text-emerald-900 {
    color: #064E3B !important;
  }

  html:not(.dark) .text-emerald-800 {
    color: #065F46 !important;
  }

  html:not(.dark) .text-emerald-700 {
    color: #047857 !important;
  }

  html:not(.dark) .text-emerald-600 {
    color: #059669 !important;
  }

  html:not(.dark) .text-rose-950 {
    color: #881337 !important;
  }

  html:not(.dark) .text-rose-900 {
    color: #881337 !important;
  }

  html:not(.dark) .text-rose-800 {
    color: #9F1239 !important;
  }

  html:not(.dark) .text-rose-700 {
    color: #BE123C !important;
  }

  html:not(.dark) .text-rose-600 {
    color: #E11D48 !important;
  }

  html:not(.dark) .text-indigo-950 {
    color: #1E1B4B !important;
  }

  html:not(.dark) .text-indigo-900 {
    color: #312E81 !important;
  }

  html:not(.dark) .text-indigo-800 {
    color: #3730A3 !important;
  }

  html:not(.dark) .text-indigo-700 {
    color: #4338CA !important;
  }

  html:not(.dark) .text-indigo-600 {
    color: #4F46E5 !important;
  }

  html:not(.dark) .text-brand-700 {
    color: #4338CA !important;
  }

  html:not(.dark) .text-brand-600 {
    color: #4F46E5 !important;
  }

  /* Pastikan tombol & badge teks putih tetap putih murni di mode terang */
  html:not(.dark) .text-white,
  html:not(.dark) [class*="text-white"],
  html:not(.dark) .bg-brand-600,
  html:not(.dark) .bg-indigo-600,
  html:not(.dark) .bg-slate-800,
  html:not(.dark) .bg-slate-900,
  html:not(.dark) .bg-emerald-500,
  html:not(.dark) .bg-emerald-600,
  html:not(.dark) .bg-rose-600 {
    color-scheme: dark;
  }

  html:not(.dark) .text-white,
  html:not(.dark) .bg-brand-600 .text-white,
  html:not(.dark) .bg-indigo-600 .text-white,
  html:not(.dark) .bg-slate-800 .text-white,
  html:not(.dark) .bg-slate-900 .text-white {
    color: #FFFFFF !important;
  }

  html:not(.dark) .bg-slate-900 .text-slate-400 {
    color: #94A3B8 !important;
  }

  /* Report KPI cards di Light Mode (Layar) */
  html:not(.dark) #printable-report-area .print-kpi-card.income-card {
    background-color: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.income-card .kpi-label {
    color: #065F46 !important;
    font-weight: 700 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.income-card .kpi-value {
    color: #047857 !important;
    font-weight: 800 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.expense-card {
    background-color: #FFF1F2 !important;
    border: 1px solid #FECDD3 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.expense-card .kpi-label {
    color: #9F1239 !important;
    font-weight: 700 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.expense-card .kpi-value {
    color: #BE123C !important;
    font-weight: 800 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.balance-card {
    background-color: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.balance-card .kpi-label {
    color: #3730A3 !important;
    font-weight: 700 !important;
  }

  html:not(.dark) #printable-report-area .print-kpi-card.balance-card .kpi-value {
    color: #4338CA !important;
    font-weight: 800 !important;
  }

  /* Automation card di Light Mode */
  html:not(.dark) #section-reports .bg-emerald-50\/70,
  html:not(.dark) #section-reports [class*="bg-emerald-50"] {
    background-color: #F0FDF4 !important;
    border-color: #A7F3D0 !important;
  }

  html:not(.dark) #section-reports .text-emerald-950 {
    color: #064E3B !important;
  }

  html:not(.dark) #section-reports .text-emerald-800 {
    color: #065F46 !important;
  }

  html:not(.dark) #section-reports .text-emerald-700 {
    color: #047857 !important;
  }

  /* ========================================================
     2. UNIVERSAL CONTRAST ENGINE - MODE GELAP (NIGHT MODE)
     Memastikan SEMUA latar belakang gelap & SEMUA teks cerah
     100% terbaca jelas tanpa silau dan tanpa teks hilang.
     ======================================================== */
  html.dark {
    color-scheme: dark;
  }

  html.dark body {
    background-color: #0B0F19 !important;
    color: #F8FAFC !important;
  }

  html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
  }

  html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
  }

  html.dark .glass-card {
    background: rgba(30, 41, 59, 0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(51, 65, 85, 0.9) !important;
  }

  html.dark aside {
    background-color: #0F172A !important;
    border-color: #1E293B !important;
  }

  html.dark header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-color: #1E293B !important;
  }

  /* Universal Dark Background Mappings (Termasuk class dengan opacity slash) */
  html.dark .bg-white,
  html.dark .bg-white\/80,
  html.dark .bg-white\/90,
  html.dark .bg-white\/95,
  html.dark [class*="bg-white"] {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
  }

  html.dark .bg-slate-50,
  html.dark .bg-slate-50\/50,
  html.dark .bg-slate-50\/70,
  html.dark .bg-slate-50\/80,
  html.dark .bg-slate-50\/90,
  html.dark [class*="bg-slate-50"] {
    background-color: #0F172A !important;
  }

  html.dark .bg-slate-100,
  html.dark [class*="bg-slate-100"] {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
  }

  /* Universal Borders di Dark Mode */
  html.dark .border-slate-100,
  html.dark .border-slate-200,
  html.dark .border-slate-200\/80,
  html.dark .border-slate-200\/90,
  html.dark [class*="border-slate-100"],
  html.dark [class*="border-slate-200"] {
    border-color: #334155 !important;
  }

  /* Kontras Garis Tebal / Pembatas Dokumen di Dark Mode */
  html.dark .border-slate-800,
  html.dark .border-slate-900,
  html.dark [class*="border-slate-800"],
  html.dark [class*="border-slate-900"] {
    border-color: #475569 !important;
  }

  /* Kontras Teks Layar Gelap: SEMUA teks diangkat ke kontras tinggi */
  html.dark .text-slate-900 {
    color: #FFFFFF !important;
  }

  html.dark .text-slate-800 {
    color: #F8FAFC !important;
  }

  html.dark .text-slate-700 {
    color: #F1F5F9 !important;
  }

  html.dark .text-slate-600 {
    color: #E2E8F0 !important;
  }

  html.dark .text-slate-500 {
    color: #CBD5E1 !important;
  }

  html.dark .text-slate-400 {
    color: #94A3B8 !important;
  }

  html.dark .text-slate-300 {
    color: #CBD5E1 !important;
  }

  html.dark .text-slate-200 {
    color: #F8FAFC !important;
  }

  html.dark .text-slate-100 {
    color: #FFFFFF !important;
  }

  html.dark .text-white {
    color: #FFFFFF !important;
  }

  /* Warna Brand & Indigo di Layar Gelap */
  html.dark .text-brand-500,
  html.dark .text-brand-600 {
    color: #818CF8 !important;
  }

  html.dark .text-brand-700,
  html.dark .text-brand-800,
  html.dark .text-brand-900 {
    color: #A5B4FC !important;
  }

  html.dark .text-indigo-500,
  html.dark .text-indigo-600 {
    color: #818CF8 !important;
  }

  html.dark .text-indigo-700,
  html.dark .text-indigo-800,
  html.dark .text-indigo-900,
  html.dark .text-indigo-950 {
    color: #C7D2FE !important;
  }

  html.dark .bg-brand-50,
  html.dark .bg-brand-50\/30,
  html.dark .bg-indigo-50,
  html.dark .bg-indigo-50\/60,
  html.dark [class*="bg-indigo-50"],
  html.dark [class*="bg-brand-50"] {
    background-color: rgba(99, 102, 241, 0.22) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    color: #C7D2FE !important;
  }

  /* Badges & Teks Hijau (Pemasukan / Sehat / Sukses) di Layar Gelap */
  html.dark .bg-emerald-50,
  html.dark .bg-emerald-50\/60,
  html.dark .bg-emerald-50\/70,
  html.dark .bg-emerald-100,
  html.dark [class*="bg-emerald-50"],
  html.dark [class*="bg-emerald-100"] {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #6EE7B7 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
  }

  html.dark .text-emerald-950,
  html.dark .text-emerald-900 {
    color: #FFFFFF !important;
  }

  html.dark .text-emerald-800 {
    color: #A7F3D0 !important;
  }

  html.dark .text-emerald-700,
  html.dark .text-emerald-600 {
    color: #34D399 !important;
  }

  html.dark .text-emerald-500,
  html.dark .text-emerald-400 {
    color: #6EE7B7 !important;
  }

  /* Badges & Teks Merah (Pengeluaran / Peringatan) di Layar Gelap */
  html.dark .bg-rose-50,
  html.dark .bg-rose-50\/60,
  html.dark .bg-rose-50\/70,
  html.dark .bg-rose-100,
  html.dark [class*="bg-rose-50"],
  html.dark [class*="bg-rose-100"] {
    background-color: rgba(244, 63, 94, 0.18) !important;
    color: #FDA4AF !important;
    border-color: rgba(251, 113, 133, 0.4) !important;
  }

  html.dark .text-rose-950,
  html.dark .text-rose-900 {
    color: #FFFFFF !important;
  }

  html.dark .text-rose-800 {
    color: #FECDD3 !important;
  }

  html.dark .text-rose-700,
  html.dark .text-rose-600 {
    color: #FB7185 !important;
  }

  html.dark .text-rose-500,
  html.dark .text-rose-400 {
    color: #FDA4AF !important;
  }

  /* Badges Brand/Indigo di Layar Gelap */
  html.dark .bg-brand-100 {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #A5B4FC !important;
    border-color: rgba(165, 180, 252, 0.4) !important;
  }

  /* Badges Kuning/Amber di Layar Gelap */
  html.dark .bg-amber-100,
  html.dark .bg-amber-50,
  html.dark [class*="bg-amber-50"],
  html.dark [class*="bg-amber-100"] {
    background-color: rgba(245, 158, 11, 0.22) !important;
    color: #FBBF24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
  }

  /* ========================================================
     KHUSUS LAPORAN: KPI CARDS, HEADER & TABEL (LAYAR GELAP)
     ======================================================== */
  /* 3 Kartu KPI di dalam Laporan (Screen Mode Dark) */
  html.dark #printable-report-area .print-kpi-card.income-card {
    background-color: rgba(16, 185, 129, 0.16) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
  }

  html.dark #printable-report-area .print-kpi-card.income-card .kpi-label {
    color: #6EE7B7 !important;
    font-weight: 700 !important;
  }

  html.dark #printable-report-area .print-kpi-card.income-card .kpi-value {
    color: #34D399 !important;
    font-weight: 800 !important;
  }

  html.dark #printable-report-area .print-kpi-card.expense-card {
    background-color: rgba(244, 63, 94, 0.16) !important;
    border: 1px solid rgba(251, 113, 133, 0.35) !important;
  }

  html.dark #printable-report-area .print-kpi-card.expense-card .kpi-label {
    color: #FDA4AF !important;
    font-weight: 700 !important;
  }

  html.dark #printable-report-area .print-kpi-card.expense-card .kpi-value {
    color: #FB7185 !important;
    font-weight: 800 !important;
  }

  html.dark #printable-report-area .print-kpi-card.balance-card {
    background-color: rgba(99, 102, 241, 0.16) !important;
    border: 1px solid rgba(129, 140, 248, 0.35) !important;
  }

  html.dark #printable-report-area .print-kpi-card.balance-card .kpi-label {
    color: #C7D2FE !important;
    font-weight: 700 !important;
  }

  html.dark #printable-report-area .print-kpi-card.balance-card .kpi-value {
    color: #A5B4FC !important;
    font-weight: 800 !important;
  }

  /* Header Laporan & Metadata di Dark Mode */
  html.dark #printable-report-area .report-type-label {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #C7D2FE !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
  }

  html.dark #printable-report-area .print-header-meta>div {
    background-color: #0F172A !important;
    border-color: #334155 !important;
  }

  html.dark #printable-report-area .print-header-meta .meta-label {
    color: #94A3B8 !important;
  }

  html.dark #printable-report-area .print-header-meta .meta-value {
    color: #F8FAFC !important;
  }

  html.dark #printable-report-area .print-header-meta .print-audit-badge {
    color: #34D399 !important;
  }

  /* Tabel Ledger Laporan di Dark Mode */
  html.dark #printable-report-area thead {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
    border-color: #475569 !important;
  }

  html.dark #printable-report-area thead th {
    color: #CBD5E1 !important;
  }

  html.dark #printable-report-area tbody tr {
    border-color: #334155 !important;
  }

  html.dark #printable-report-area tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.45) !important;
  }

  html.dark #printable-report-area tfoot {
    border-top: 2px solid #475569 !important;
  }

  html.dark #printable-report-area tfoot td {
    color: #F8FAFC !important;
  }

  /* Kotak Catatan Integritas di Layar Gelap */
  html.dark .integrity-notes-box {
    background-color: #0F172A !important;
    border-color: #334155 !important;
  }

  html.dark .integrity-notes-box .integrity-title {
    color: #FFFFFF !important;
  }

  html.dark .integrity-notes-box p {
    color: #CBD5E1 !important;
  }

  html.dark .integrity-notes-box span {
    color: #94A3B8 !important;
  }

  html.dark .integrity-notes-box .verified-badge,
  html.dark .integrity-notes-box .text-emerald-700 {
    color: #34D399 !important;
  }

  /* QR Security Box di Layar Gelap */
  html.dark .qr-security-box {
    background-color: #0F172A !important;
    border-color: #334155 !important;
  }

  html.dark .qr-security-box svg {
    color: #E2E8F0 !important;
  }

  html.dark .qr-security-box span {
    color: #94A3B8 !important;
  }

  html.dark .qr-security-box .text-indigo-900 {
    color: #A5B4FC !important;
  }

  html.dark .qr-security-box .text-emerald-700 {
    color: #34D399 !important;
  }

  /* Automation Status Card di Layar Gelap */
  html.dark #section-reports .bg-emerald-50\/70,
  html.dark #section-reports [class*="bg-emerald-50"] {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
  }

  html.dark #section-reports .text-emerald-950 {
    color: #FFFFFF !important;
  }

  html.dark #section-reports .text-emerald-800,
  html.dark #section-reports .text-emerald-800\/80 {
    color: #A7F3D0 !important;
  }

  html.dark #section-reports .text-emerald-700 {
    color: #6EE7B7 !important;
  }

  html.dark #section-reports .bg-emerald-200\/80 {
    background-color: rgba(16, 185, 129, 0.28) !important;
    border: 1px solid rgba(52, 211, 153, 0.45) !important;
    color: #6EE7B7 !important;
  }

  /* Form Inputs & Controls di Layar Gelap */
  html.dark input:not([type="checkbox"]):not([type="radio"]),
  html.dark select,
  html.dark textarea {
    background-color: #0F172A !important;
    border-color: #334155 !important;
    color: #FFFFFF !important;
  }

  html.dark input::placeholder,
  html.dark textarea::placeholder {
    color: #64748B !important;
  }

  html.dark .divide-slate-100> :not([hidden])~ :not([hidden]),
  html.dark .divide-slate-200> :not([hidden])~ :not([hidden]) {
    border-color: #334155 !important;
  }

  html.dark tr.hover\:bg-slate-50\/80:hover,
  html.dark tr.hover\:bg-slate-50:hover {
    background-color: #334155 !important;
  }

  /* ========================================================
     2.8 DUAL-MODE RESPONSIVENESS: LAPTOP (LANDSCAPE) & MOBILE (PORTRAIT)
     Optimal experience for widescreen desktop & portrait smartphone
     ======================================================== */

  /* ── A. MODE MOBILE (PORTRAIT / SMARTPHONE < 768px) ── */
  @media (max-width: 767.98px) {

    /* Touch optimization & instant tap response */
    button,
    a,
    input,
    select,
    textarea {
      touch-action: manipulation;
    }

    /* Optimal section & container padding on mobile screens */
    .content-section {
      padding: 1rem 0.875rem !important;
      gap: 1rem !important;
    }

    /* Compact card padding & borders */
    .content-section .rounded-2xl {
      border-radius: 1.125rem !important;
    }

    .content-section .p-5,
    .content-section .p-6 {
      padding: 1rem !important;
    }

    /* Mobile Typography hierarchy */
    #section-dashboard h2 {
      font-size: 1.15rem !important;
      line-height: 1.5rem !important;
    }

    #dash-net-cash {
      font-size: 1.65rem !important;
      line-height: 2.15rem !important;
    }

    #dash-month-income,
    #dash-month-expense {
      font-size: 1.35rem !important;
      line-height: 1.75rem !important;
    }

    #dash-total-income,
    #dash-total-expense,
    #dash-month-netcash {
      font-size: 0.95rem !important;
      line-height: 1.35rem !important;
    }

    /* Pastikan tombol header desktop disembunyikan di mobile agar header tidak sesak */
    #btn-header-add-tx {
      display: none !important;
    }

    /* Safe top padding for notch / Dynamic Island */
    .safe-top,
    header.safe-top {
      padding-top: max(0.65rem, env(safe-area-inset-top, 0.65rem)) !important;
    }

    /* Safe bottom space for Bottom Navigation Bar */
    .has-bottom-nav {
      padding-bottom: max(6.5rem, calc(5.5rem + env(safe-area-inset-bottom, 0px))) !important;
    }

    /* Safe area for modern smartphone home bar */
    .safe-bottom {
      padding-bottom: max(1.35rem, calc(0.6rem + env(safe-area-inset-bottom, 0px))) !important;
    }

    /* Charts sizing on mobile portrait */
    #accountsOverviewChart,
    #topExpensesHorizontalChart,
    #monthlyTrendChart {
      max-height: 260px !important;
    }

    .lg\:col-span-8.h-80,
    .lg\:col-span-8.h-72 {
      height: 260px !important;
    }

    /* Accounts cards grid on mobile: 2 neat columns */
    #accounts-cards-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.5rem !important;
      max-height: 220px !important;
    }

    /* Top 8 expenses breakdown list on mobile */
    #top-expenses-categories-list {
      max-height: 250px !important;
    }

    /* Smooth horizontal swiping for tables on mobile */
    .overflow-x-auto {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      position: relative;
    }

    /* Minimum readable width for data tables on mobile */
    #report-ledger-table {
      min-width: 660px;
    }

    #all-transactions-table {
      width: 100%;
      min-width: 680px;
    }
    @media (min-width: 1024px) {
      #all-transactions-table {
        min-width: 100%;
      }
    }

    /* Bottom-sheet styling for modals on mobile portrait (Native App Style) */
    .mobile-modal-sheet {
      max-height: 92vh !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      border-top-left-radius: 1.5rem !important;
      border-top-right-radius: 1.5rem !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      margin: auto 0 0 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      animation: slideUpMobileSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    @keyframes slideUpMobileSheet {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }

    /* Mobile Sheet Pull Handle */
    .mobile-modal-sheet::before {
      content: '';
      display: block;
      width: 38px;
      height: 4px;
      border-radius: 9999px;
      background-color: #94A3B8;
      opacity: 0.5;
      margin: 8px auto 2px auto;
      flex-shrink: 0;
    }

    /* Prevent mobile browser auto-zoom by ensuring appropriate font-size */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
      font-size: 15px !important;
      min-height: 42px;
    }

    /* Touch micro-interactions for bottom navigation */
    .bottom-nav-item:active {
      transform: scale(0.92);
    }
  }

  /* =============================================================================
     STRICT GUARD: CEGAH BOTTOM NAVIGATION BOCOR SAAT DI PORTAL LOGIN
     ============================================================================= */
  body.is-login-state #mobile-bottom-nav,
  #login-view:not(.hidden) ~ #app-view #mobile-bottom-nav,
  #login-view:not(.hidden) ~ * #mobile-bottom-nav,
  body:has(#login-view:not(.hidden)) #mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ── B. MODE LAPTOP & DESKTOP (LANDSCAPE >= 768px) ── */
  @media (min-width: 768px) {
    .desktop-sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }

    #report-ledger-table {
      min-width: 100%;
    }
  }

  /* ── C. LANDSCAPE ORIENTATION ADAPTATION ── */
  @media (orientation: landscape) and (max-height: 600px) {
    .safe-bottom {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
  }

  /* ========================================================
     3. PRINT LAYOUT — PROFESIONAL A4 PORTRAIT
     Clean white paper, professional letterhead, sharp contrast
     ======================================================== */

  @page {
    size: A4 portrait;
    margin: 0 !important;
  }

  @media print {

    @page {
      size: A4 portrait;
      margin: 0 !important;
    }

    /* ── Reset bersih semua elemen ── */
    *,
    *::before,
    *::after {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }

    html,
    html.dark,
    body,
    html.dark body {
      background: #FFFFFF !important;
      background-color: #FFFFFF !important;
      color: #1A1A2E !important;
      font-family: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif !important;
      font-size: 10px !important;
      line-height: 1.4 !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* ── Paksa tampilkan elemen print-only ── */
    #printable-report-area .print-accreditation-bar {
      display: flex !important;
      visibility: visible !important;
    }

    #printable-report-area .print-section-title {
      display: block !important;
      visibility: visible !important;
    }

    #printable-report-area .print-doc-footer {
      display: flex !important;
      visibility: visible !important;
    }

    #printable-report-area #print-kpi-strip-printonly {
      display: grid !important;
      visibility: visible !important;
    }

    /* ── Sembunyikan elemen UI di luar laporan ── */
    body> :not(#app-view) {
      display: none !important;
    }

    aside,
    header,
    nav,
    #section-dashboard,
    #section-transactions,
    #section-categories,
    #section-settings,
    #section-reports> :not(#printable-report-area),
    .no-print {
      display: none !important;
    }

    #app-view {
      display: block !important;
      background: #FFFFFF !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }

    main {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #section-reports {
      display: block !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
    }

    #printable-report-area {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #FFFFFF !important;
    }

    #printable-report-area .print-card-wrapper {
      border: none !important;
      box-shadow: none !important;
      box-sizing: border-box !important;
      width: 100% !important;
      padding: 12mm 12mm 14mm 12mm !important;
      margin: 0 !important;
      background: #FFFFFF !important;
      border-radius: 0 !important;
    }

    /* ──────────────────────────────────────────
       BARIS AKREDITASI RESMI
       ────────────────────────────────────────── */
    #printable-report-area .print-accreditation-bar {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding-bottom: 5px !important;
      margin-bottom: 8px !important;
      border-bottom: 1px solid #CBD5E1 !important;
      font-size: 7px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
    }

    #printable-report-area .print-accreditation-bar .org-name {
      color: #1E3A8A !important;
    }

    #printable-report-area .print-accreditation-bar .doc-tag {
      color: #64748B !important;
      font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
       KOP SURAT (LETTERHEAD)
       ────────────────────────────────────────── */
    #printable-report-area .print-header-main {
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      border-bottom: 2.5px solid #1E3A8A !important;
      padding-bottom: 10px !important;
      margin-bottom: 10px !important;
      gap: 12px !important;
    }

    #printable-report-area .print-header-title-block-wrapper {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
    }

    #printable-report-area .print-header-logo {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      border-radius: 8px !important;
      background: #1E3A8A !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      color: #FFFFFF !important;
    }

    #printable-report-area .print-header-logo svg {
      width: 20px !important;
      height: 20px !important;
      stroke: #FFFFFF !important;
      color: #FFFFFF !important;
    }

    #printable-report-area .print-header-logo span {
      font-size: 5.5px !important;
      font-weight: 900 !important;
      color: #93C5FD !important;
      letter-spacing: 0.1em !important;
    }

    #printable-report-area .print-header-title-block h1 {
      font-size: 14px !important;
      font-weight: 800 !important;
      color: #0F172A !important;
      line-height: 1.2 !important;
      letter-spacing: -0.01em !important;
      margin: 0 !important;
    }

    #printable-report-area .print-header-title-block p.report-subtitle {
      font-size: 7.5px !important;
      color: #475569 !important;
      margin-top: 2px !important;
      line-height: 1.3 !important;
    }

    #printable-report-area .report-type-label {
      font-size: 6.5px !important;
      font-weight: 800 !important;
      letter-spacing: 0.08em !important;
      padding: 1px 5px !important;
      background: #EFF6FF !important;
      color: #1E3A8A !important;
      border: 1px solid #BFDBFE !important;
      border-radius: 3px !important;
      display: inline-block !important;
    }

    /* ── Metadata Kanan ── */
    #printable-report-area .print-header-meta {
      text-align: right !important;
      font-size: 7px !important;
      line-height: 1.5 !important;
    }

    #printable-report-area .print-header-meta>div {
      background: #F8FAFC !important;
      border: 1px solid #E2E8F0 !important;
      border-radius: 6px !important;
      padding: 5px 8px !important;
      display: inline-block !important;
    }

    #printable-report-area .print-header-meta .meta-row {
      display: flex !important;
      justify-content: space-between !important;
      gap: 10px !important;
      color: #334155 !important;
      font-size: 7px !important;
    }

    #printable-report-area .print-header-meta .meta-label {
      color: #64748B !important;
      font-weight: 600 !important;
    }

    #printable-report-area .print-header-meta .meta-value {
      font-weight: 700 !important;
      color: #0F172A !important;
    }

    #printable-report-area .print-header-meta .print-audit-badge {
      color: #059669 !important;
      font-weight: 700 !important;
    }

    /* ──────────────────────────────────────────
       STRIP 3 KPI BOXES
       ────────────────────────────────────────── */
    #printable-report-area .print-kpi-strip {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
      margin-bottom: 12px !important;
    }

    #printable-report-area .print-kpi-card {
      border: 1px solid #E2E8F0 !important;
      border-radius: 6px !important;
      padding: 7px 10px !important;
      background: #F8FAFC !important;
    }

    #printable-report-area .print-kpi-card.income-card {
      border-left: 3px solid #10B981 !important;
      background: #F0FDF4 !important;
    }

    #printable-report-area .print-kpi-card.expense-card {
      border-left: 3px solid #F43F5E !important;
      background: #FFF1F2 !important;
    }

    #printable-report-area .print-kpi-card.balance-card {
      border-left: 3px solid #4F46E5 !important;
      background: #EEF2FF !important;
    }

    #printable-report-area .print-kpi-card .kpi-label {
      font-size: 6.5px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      color: #64748B !important;
      margin-bottom: 2px !important;
      display: block !important;
    }

    #printable-report-area .print-kpi-card.income-card .kpi-label {
      color: #059669 !important;
    }

    #printable-report-area .print-kpi-card.expense-card .kpi-label {
      color: #BE123C !important;
    }

    #printable-report-area .print-kpi-card.balance-card .kpi-label {
      color: #4338CA !important;
    }

    #printable-report-area .print-kpi-card .kpi-value {
      font-size: 13px !important;
      font-weight: 800 !important;
      color: #0F172A !important;
      line-height: 1.1 !important;
      letter-spacing: -0.02em !important;
    }

    #printable-report-area .print-kpi-card.income-card .kpi-value {
      color: #059669 !important;
    }

    #printable-report-area .print-kpi-card.expense-card .kpi-value {
      color: #BE123C !important;
    }

    #printable-report-area .print-kpi-card.balance-card .kpi-value {
      color: #3730A3 !important;
    }

    /* ──────────────────────────────────────────
       JUDUL SECTION
       ────────────────────────────────────────── */
    #printable-report-area .print-section-title {
      font-size: 8px !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
      padding: 5px 8px !important;
      background: #1E3A8A !important;
      color: #FFFFFF !important;
      border-radius: 4px 4px 0 0 !important;
      margin-bottom: 0 !important;
      display: block !important;
    }

    /* ──────────────────────────────────────────
       TABEL BUKU BESAR — PROFESIONAL
       ────────────────────────────────────────── */
    #printable-report-area table {
      width: 100% !important;
      table-layout: fixed !important;
      border-collapse: collapse !important;
      margin: 0 0 10px 0 !important;
      font-size: 7px !important;
    }

    #printable-report-area thead {
      display: table-header-group !important;
    }

    #printable-report-area thead th {
      background: #1E3A8A !important;
      color: #FFFFFF !important;
      font-size: 6.5px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.05em !important;
      padding: 4px 4px !important;
      border: 1px solid #1E3A8A !important;
      white-space: nowrap !important;
    }

    #printable-report-area tbody tr {
      page-break-inside: avoid !important;
    }

    #printable-report-area tbody tr:nth-child(even) {
      background: #F8FAFC !important;
    }

    #printable-report-area tbody tr:nth-child(odd) {
      background: #FFFFFF !important;
    }

    #printable-report-area tbody td {
      padding: 5px 6px !important;
      border: 1px solid #E2E8F0 !important;
      color: #1E293B !important;
      font-size: 7.5px !important;
      line-height: 1.35 !important;
      vertical-align: middle !important;
    }

    /* Tanggal di cetak print */
    #printable-report-area tbody td:nth-child(2) div {
      font-size: 7.5px !important;
      font-weight: 600 !important;
      color: #0F172A !important;
      white-space: nowrap !important;
    }

    #printable-report-area tbody td:nth-child(2) span {
      font-size: 6.5px !important;
      color: #64748B !important;
    }

    /* ID Transaksi di cetak print */
    #printable-report-area tbody td:nth-child(3),
    #printable-report-area tbody td .font-mono {
      font-family: 'Consolas', 'Courier New', monospace !important;
      font-size: 7px !important;
      font-weight: 600 !important;
      color: #312E81 !important;
      letter-spacing: 0.01em !important;
    }

    /* Kategori badge di cetak print */
    #printable-report-area tbody td span.inline-block,
    #printable-report-area tbody td:nth-child(4) span {
      background: #F1F5F9 !important;
      color: #1E293B !important;
      border: 1px solid #CBD5E1 !important;
      padding: 1.5px 4px !important;
      font-size: 6.5px !important;
      font-weight: 600 !important;
      border-radius: 3px !important;
      display: inline-block !important;
    }

    /* Keterangan di cetak print */
    #printable-report-area tbody td:nth-child(5) {
      font-size: 7.5px !important;
      color: #334155 !important;
    }

    /* Pemasukan di cetak print */
    #printable-report-area tbody td:nth-child(6) {
      color: #059669 !important;
      font-weight: 700 !important;
      text-align: right !important;
      font-size: 7.5px !important;
      white-space: nowrap !important;
    }

    /* Pengeluaran di cetak print */
    #printable-report-area tbody td:nth-child(7) {
      color: #BE123C !important;
      font-weight: 700 !important;
      text-align: right !important;
      font-size: 7.5px !important;
      white-space: nowrap !important;
    }

    /* Saldo di cetak print */
    #printable-report-area tbody td:nth-child(8) {
      color: #0F172A !important;
      font-weight: 800 !important;
      text-align: right !important;
      font-size: 7.5px !important;
      white-space: nowrap !important;
    }

    /* ── Tfoot / Baris Total ── */
    #printable-report-area tfoot {
      display: table-footer-group !important;
    }

    #printable-report-area tfoot tr {
      background: #F1F5F9 !important;
      border-top: 2px solid #1E3A8A !important;
      border-bottom: 2px solid #1E3A8A !important;
    }

    #printable-report-area tfoot td {
      padding: 5px 6px !important;
      font-weight: 800 !important;
      font-size: 7.5px !important;
      color: #0F172A !important;
      border: 1px solid #CBD5E1 !important;
    }

    #printable-report-area tfoot #rep-foot-income {
      color: #059669 !important;
    }

    #printable-report-area tfoot #rep-foot-expense {
      color: #BE123C !important;
    }

    #printable-report-area tfoot #rep-foot-balance {
      color: #0F172A !important;
    }

    /* ──────────────────────────────────────────
       KOTAK CATATAN INTEGRITAS & KEABSAHAN
       ────────────────────────────────────────── */
    #printable-report-area .integrity-notes-box,
    html.dark #printable-report-area .integrity-notes-box {
      background: #F8FAFC !important;
      border: 1px solid #CBD5E1 !important;
      border-left: 3px solid #1E3A8A !important;
      padding: 6px 8px !important;
      border-radius: 4px !important;
      width: 48% !important;
      max-width: 48% !important;
      box-sizing: border-box !important;
    }

    #printable-report-area .integrity-notes-box * {
      color: #1E293B !important;
      font-size: 7px !important;
      line-height: 1.6 !important;
    }

    #printable-report-area .integrity-notes-box .verified-badge,
    html.dark #printable-report-area .integrity-notes-box .verified-badge {
      color: #059669 !important;
      font-weight: 700 !important;
    }

    /* ──────────────────────────────────────────
       QR SECURITY BOX
       ────────────────────────────────────────── */
    #printable-report-area .qr-security-box,
    html.dark #printable-report-area .qr-security-box {
      background: #F8FAFC !important;
      border: 1px solid #CBD5E1 !important;
      border-radius: 4px !important;
      padding: 3px 6px !important;
      white-space: nowrap !important;
    }

    #printable-report-area .qr-security-box * {
      font-size: 6.5px !important;
      color: #334155 !important;
      white-space: nowrap !important;
      line-height: 1.25 !important;
    }

    #printable-report-area .qr-security-box .text-indigo-900 {
      color: #1E3A8A !important;
      font-weight: 700 !important;
    }

    #printable-report-area .qr-security-box .text-emerald-700 {
      color: #059669 !important;
      font-weight: 700 !important;
    }

    /* ──────────────────────────────────────────
       AREA TANDA TANGAN — PROFESIONAL (TANPA TERPOTONG)
       ────────────────────────────────────────── */
    #printable-report-area .print-signature-section {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-end !important;
      margin-top: 14px !important;
      padding-top: 8px !important;
      border-top: 1px solid #E2E8F0 !important;
      page-break-inside: avoid !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    #printable-report-area .print-signature-block {
      width: 48% !important;
      max-width: 48% !important;
      text-align: right !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      box-sizing: border-box !important;
      padding-right: 6px !important;
    }

    #printable-report-area .print-signature-block .sig-city-date {
      font-size: 7.5px !important;
      color: #334155 !important;
      font-weight: 600 !important;
      margin-bottom: 2px !important;
      text-align: right !important;
      white-space: nowrap !important;
    }

    #printable-report-area .print-signature-block .sig-title {
      font-size: 6.5px !important;
      color: #64748B !important;
      font-weight: 500 !important;
      margin-bottom: 4px !important;
      text-align: right !important;
      white-space: nowrap !important;
    }

    #printable-report-area .print-signature-block img.signature-user-img,
    html.dark #printable-report-area .print-signature-block img.signature-user-img {
      height: 48px !important;
      width: auto !important;
      max-width: 120px !important;
      display: block !important;
      margin: 0 0 2px auto !important;
      filter: none !important;
      opacity: 1 !important;
    }

    #printable-report-area .print-signature-block .sig-name-line {
      border-top: 1.5px solid #1E293B !important;
      padding-top: 3px !important;
      margin-top: 2px !important;
      width: 100% !important;
      max-width: 190px !important;
      text-align: right !important;
    }

    #printable-report-area .print-signature-block .sig-name {
      font-size: 8px !important;
      font-weight: 800 !important;
      color: #0F172A !important;
      letter-spacing: 0.01em !important;
      white-space: nowrap !important;
      text-align: right !important;
      overflow: visible !important;
    }

    #printable-report-area .print-signature-block .sig-role {
      font-size: 6.5px !important;
      color: #475569 !important;
      font-weight: 500 !important;
      margin-top: 1px !important;
      white-space: nowrap !important;
      text-align: right !important;
    }

    /* ──────────────────────────────────────────
       FOOTER DOKUMEN BAWAH
       ────────────────────────────────────────── */
    #printable-report-area .print-doc-footer {
      margin-top: 12px !important;
      padding-top: 6px !important;
      border-top: 2px solid #1E3A8A !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }

    #printable-report-area .print-doc-footer .footer-left {
      font-size: 6.5px !important;
      color: #64748B !important;
      font-weight: 500 !important;
    }

    #printable-report-area .print-doc-footer .footer-right {
      font-size: 6.5px !important;
      color: #64748B !important;
      font-weight: 500 !important;
      text-align: right !important;
    }

    #printable-report-area .print-doc-footer .footer-confidential {
      font-size: 6px !important;
      font-weight: 700 !important;
      color: #BE123C !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
      border: 1px solid #FECDD3 !important;
      background: #FFF1F2 !important;
      padding: 1px 5px !important;
      border-radius: 3px !important;
    }

    /* ── Tombol UI disembunyikan saat cetak ── */
    #printable-report-area button,
    #printable-report-area .no-print {
      display: none !important;
    }

    /* ── Tanda tangan final saat print (selalu warna asli hitam) ── */
    .signature-user-img,
    html.dark .signature-user-img {
      filter: none !important;
      opacity: 1 !important;
    }

    /* ── Page break ── */
    #printable-report-area .page-break-before {
      page-break-before: always !important;
    }

    #printable-report-area .page-break-inside-avoid {
      page-break-inside: avoid !important;
    }

  }

  /* end @media print */

  /* ==========================================================================
     GOLD CONVERTER LUXURY THEME & SHIMMER (PEGADAIAN & ANTAM 24K)
     ========================================================================== */
  #gold-converter-panel {
    position: relative;
    box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.12);
  }

  html.dark #gold-converter-panel {
    box-shadow: 0 4px 25px -2px rgba(245, 158, 11, 0.18);
  }

  #form-tx-gold-gram:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
  }

  @keyframes goldPulseGlow {

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

    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }

  .gold-glow-dot {
    animation: goldPulseGlow 2.5s ease-in-out infinite;
  }

  /* ==========================================================================
     MOBILE & PWA ENHANCEMENTS (TOUCH & SAFE AREA)
     ========================================================================== */
  button, a, input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .safe-top {
    padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
  }

  .safe-bottom {
    padding-bottom: max(1.35rem, calc(0.6rem + env(safe-area-inset-bottom, 0px)));
  }

  @media screen and (max-width: 768px) {
    /* Prevent iOS Safari 15+ unwanted zoom on form input focus */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
      font-size: 16px !important;
    }
  }

  /* Goal card progress transition */
  .goal-progress-bar {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }