<!--
  ============================================================================
  CHANGE LOG (SECTIONS A TO L)
  ============================================================================
  A. Header and bugs:
     - Fixed the top utility bar (.top-bar) overlap on tablet (640px+) and laptop (1024px+) screens by aligning the header offset with the fixed navigation sidebar width so "Diperbarui HH:MM WIB" and the brand button are 100% visible at every viewport width.
     - Replaced the status dot with an inline SVG cloud indicator featuring an overlapping lower-right checkmark when online (green) and an overlapping lower-right cross (X) mark when in demo/offline mode (red), complete with aria-label and title tooltip.

  B. Demo naming:
     - Defined a single constant `clientName = "Client's Name"` and replaced all occurrences of the original company name across page title, meta tags, manifest, header, sidebar, PIN/welcome screen, print headers, and support payload.
     - Replaced the logo mark with a clean boxed "LOGO" placeholder mark across the PIN screen, welcome screen, header, and sidebar.

  C. Navigation and animation:
     - Eliminated full-screen DOM rebuilds on menu clicks by maintaining persistent view containers and updating only the active region, applying a 220ms ease-out opacity and transform transition.
     - Added full support for `prefers-reduced-motion: reduce` to disable transitions and animations when requested by the device.
     - Preserved the existing accent color palette while tuning glass surface contrast to meet WCAG AA.

  D. Loading (only during webhook calls):
     - Restricted loading states strictly to active network calls; in-memory menu, tab, and filter switches execute instantaneously without loading overlays.
     - Implemented the 3-part loading system: (1) top gradient accent progress bar, (2) hero + transaction row shimmer skeletons for initial data load, and (3) a slow-pulsing logo (scale 1 to 1.04, 1.6s ease-in-out) inside a glass container on the post-PIN welcome screen.
     - Updated all loading messages to concise Indonesian phrases ("Menyiapkan laporan hari ini…", "Memperbarui data…", "Menyimpan transaksi…", "Mengirim pesan…") with zero mention of webhook, n8n, server, or waiting times.
     - Added network busy guards to disable triggers and ignore repeated taps while a request is in flight.

  E. PIN screen and welcome:
     - Restyled the PIN screen with liquid glass aesthetics (20px blur with 180% saturation, thin light border, inner highlight, soft shadow, WCAG AA contrast, and @supports fallback for browsers without backdrop-filter).
     - Displayed `clientName` above the PIN keypad.
     - Unified PIN verification and initial data fetch into a single call: entering a valid PIN transitions into the glass welcome card with the pulsing logo and "Menyiapkan laporan hari ini…", waits for the single data response, and fades smoothly into Beranda.
     - Implemented 5-hour inactivity auto-lock using an in-memory `lastActivityTime` timestamp checked on `visibilitychange` and user interaction events.

  F. Home screen (Beranda) redesign:
     - Scoped Beranda strictly to TODAY in WIB (Asia/Jakarta) via `getTodayWIB()`, with automatic day rollover detection when the WIB date changes without re-prompting for the PIN.
     - Structured Beranda top-to-bottom with generous spacing (>=20px between blocks, >=16px inside cards):
       1. Greeting line with full Indonesian WIB date (e.g., "Kamis, 29 Oktober 2026").
       2. Liquid glass Hero Card styled like Rekap (Selisih Kas centered at top, + Uang Masuk on bottom-left, - Uang Keluar on bottom-right) showing today's value (or "—" when today has no transactions) and exact Rupiah comparison against YESTERDAY ("+Rp ... dari kemarin" in green, "-Rp ... dari kemarin" in red, or "—" if yesterday had no transactions).
       3. Progressive Daily Bar Chart for the active WIB month (Uang Masuk vs Uang Keluar = Selisih Kas per day) using inline SVG. Columns grow progressively as new daily data is input without losing previous days' trail, support horizontal scrolling with auto-scroll to the latest day, and reset automatically when entering a new month.
       4. Today's category summary grid ("CATEGORY · N transaksi") with semantic green (income), red (expense), and grey (kasbon/unpaid) touches.
       5. Today's complete transaction list ordered by `rowNumber` with >=64px row height, clear spacing, and green/red/grey semantic styling.
       6. Calm empty state ("Belum ada transaksi hari ini") with dashes in the hero card when today has 0 transactions.
     - Removed the manual refresh button from Beranda, and ensured Beranda updates immediately after saving new transactions.

  G. Rekap (keep the existing functionality):
     - Moved the interactive 6-month bar chart into Rekap and restyled all Rekap views (Ringkasan, Pemasukan, Pengeluaran, Kasbon, Semua, Rekap Akumulatif, Per Kategori, Bandingkan Bulan, and Pusat Bantuan Dev) to match the new glass and spacing system.

  H. Catat (input form):
     - Restyled the transaction input and confirmation cards with the glass aesthetic and generous spacing while preserving all category/method business rules and anti-double-submit protection.

  I. Cari (search):
     - Replaced the quick-search chips with `MAKAN`, `KIT BAN`, `KIT DASHBOARD`, `LISTRIK`, and `AIR` as case-insensitive "contains" shortcuts without adding any new categories.

  J. Loading and empty states elsewhere:
     - Applied the unified top progress bar and skeleton shimmer across all screens that wait for network data.

  K. Performance requirements:
     - Replaced full-DOM teardown with targeted region updates, paginated transaction lists (50 rows per page) so 20,000+ rows in Rekap/Cari remain smooth, restricted `backdrop-filter` to primary glass containers (never individual rows), and used GPU-composited `transform` and `opacity` for animations.

  L. Accessibility:
     - Enforced >=44px touch targets on all interactive controls, added descriptive `aria-label` attributes to buttons and SVG icons, and ensured WCAG AA text contrast across light and dark glass surfaces.
  M. Update (daily carousel, hero trend, liquid glass 2.0, mobile text fixes):
     - Beranda daily chart is now a centered snap carousel: swipe to choose a day (no tapping). The centered day is the selected day,
       its detail (Uang Masuk, Uang Keluar, Selisih Kas) appears above the chart, and surrounding days are dimmed. Every day from the 1st
       up to TODAY gets a column (empty days stay empty), future days are not rendered, and the series resets by itself each new month.
     - Hero card (Beranda): trend icon + percentage next to Selisih Kas vs yesterday (green up / red down, "—" when it cannot be computed),
       plus a light-green (up) or yellow (down) tint on the hero card. Rekap hero card gets the same tint vs the previous month.
     - Liquid glass layer (iOS 26 style) added as a token override block, business logic and webhook payloads untouched.
     - Long texts (header client name, transaction description, hero amounts, chart metrics) now wrap instead of being cut off on phones.
  ============================================================================
-->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <title>Client's Name — Sistem Kasir &amp; Laporan Keuangan</title>

  <!-- ==========================================================================
       PWA STANDALONE CONFIGURATION
       ========================================================================== -->
  <meta name="theme-color" content="#0B0F17" media="(prefers-color-scheme: dark)">
  <meta name="theme-color" content="#EEF2F7" media="(prefers-color-scheme: light)">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Client's Name">
  <link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Crect width='180' height='180' rx='36' fill='%230F172A'/%3E%3Crect x='22' y='52' width='136' height='76' rx='16' fill='none' stroke='%23FFFFFF' stroke-width='8'/%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-weight='800' font-size='36' fill='%23FFFFFF'%3ELOGO%3C/text%3E%3C/svg%3E">
  <link rel="manifest" href="data:application/manifest+json;utf8,%7B%22name%22%3A%22Client%27s%20Name%20-%20Sistem%20Kasir%22%2C%22short_name%22%3A%22Client%27s%20Name%22%2C%22start_url%22%3A%22.%22%2C%22display%22%3A%22standalone%22%2C%22background_color%22%3A%22%230B0F17%22%2C%22theme_color%22%3A%22%232563EB%22%2C%22orientation%22%3A%22portrait-primary%22%7D">

  <!-- Embedded Inter Font Configuration (Unchanged) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <style>
    /* ==========================================================================
       1. DESIGN SYSTEM TOKENS (LIQUID GLASS & WCAG AA CONTRAST)
       ========================================================================== */
    :root {
      --dur-fast: 150ms;
      --dur-base: 220ms;
      --dur-slow: 320ms;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

      --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

      /* Light Mode */
      --bg-page: #E8EEF5;
      --bg-page-gradient:
        radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.12), transparent 40%),
        radial-gradient(circle at 88% 16%, rgba(16, 185, 129, 0.10), transparent 38%),
        radial-gradient(circle at 50% 90%, rgba(59, 130, 246, 0.08), transparent 45%);
      --bg-card: rgba(255, 255, 255, 0.78);
      --bg-card-fallback: rgba(255, 255, 255, 0.94);
      --bg-row: rgba(255, 255, 255, 0.88);
      --bg-subtle: rgba(226, 232, 240, 0.65);
      --bg-elevated: rgba(255, 255, 255, 0.92);
      --bg-glass: rgba(255, 255, 255, 0.76);
      --bg-glass-heavy: rgba(248, 250, 252, 0.92);

      /* Hero Card Surface */
      --hero-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.93) 0%, rgba(30, 41, 59, 0.90) 100%);
      --hero-border: rgba(255, 255, 255, 0.18);
      --hero-text: #F8FAFC;
      --hero-sub: #CBD5E1;

      --text-main: #0F172A;
      --text-sec: #334155;
      --text-muted: #475569;

      /* Primary Accent (Executive Cobalt) */
      --accent: #2563EB;
      --accent-hover: #1D4ED8;
      --accent-light: #60A5FA;
      --accent-soft: rgba(37, 99, 235, 0.10);
      --accent-border: rgba(37, 99, 235, 0.28);
      --accent-glow: 0 4px 14px rgba(37, 99, 235, 0.22);

      /* Semantic Financial Status (WCAG AA Checked) */
      --diff-pos: #047857;
      --diff-pos-bright: #34D399;
      --diff-pos-bg: rgba(16, 185, 129, 0.10);
      --diff-pos-border: rgba(5, 150, 105, 0.40);

      --diff-neg: #B91C1C;
      --diff-neg-bright: #FCA5A5;
      --diff-neg-bg: rgba(239, 68, 68, 0.10);
      --diff-neg-border: rgba(220, 38, 38, 0.40);

      /* Neutral Grey Semantic Tokens for Kasbon, Belum Dibayar & Kupon */
      --neutral-grey: #475569;
      --neutral-grey-bg: rgba(100, 116, 139, 0.12);
      --neutral-grey-border: rgba(100, 116, 139, 0.38);

      /* Bento Identity Accents */
      --bento-tx-color: #1D4ED8;
      --bento-tx-bg: rgba(37, 99, 235, 0.10);
      --bento-kupon-color: #475569;
      --bento-kupon-bg: rgba(100, 116, 139, 0.12);
      --bento-unpaid-color: #475569;
      --bento-unpaid-bg: rgba(100, 116, 139, 0.12);
      --bento-kasbon-color: #475569;
      --bento-kasbon-bg: rgba(100, 116, 139, 0.12);

      --border-hairline: rgba(15, 23, 42, 0.10);
      --border-strong: rgba(15, 23, 42, 0.18);
      --glass-border: rgba(255, 255, 255, 0.65);
      --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.80), inset 0 0 0 1px rgba(255, 255, 255, 0.35);

      --radius-card: 18px;
      --radius-ctrl: 12px;
      --radius-pill: 9999px;

      --shadow-card: 0 8px 28px -4px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04);
      --shadow-float: 0 16px 36px -6px rgba(15, 23, 42, 0.14);
      --shadow-sheet: 0 -8px 30px rgba(15, 23, 42, 0.16);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-page: #080C14;
        --bg-page-gradient:
          radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.14), transparent 42%),
          radial-gradient(circle at 85% 18%, rgba(16, 185, 129, 0.10), transparent 38%),
          radial-gradient(circle at 50% 95%, rgba(37, 99, 235, 0.08), transparent 45%);
        --bg-card: rgba(17, 24, 39, 0.72);
        --bg-card-fallback: rgba(17, 24, 39, 0.94);
        --bg-row: rgba(30, 41, 59, 0.68);
        --bg-subtle: rgba(30, 41, 59, 0.75);
        --bg-elevated: rgba(30, 41, 59, 0.92);
        --bg-glass: rgba(15, 23, 42, 0.76);
        --bg-glass-heavy: rgba(9, 13, 22, 0.92);

        --hero-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.90) 0%, rgba(30, 41, 59, 0.84) 100%);
        --hero-border: rgba(255, 255, 255, 0.16);
        --hero-text: #F8FAFC;
        --hero-sub: #CBD5E1;

        --text-main: #F8FAFC;
        --text-sec: #CBD5E1;
        --text-muted: #94A3B8;

        --accent: #3B82F6;
        --accent-hover: #60A5FA;
        --accent-light: #93C5FD;
        --accent-soft: rgba(59, 130, 246, 0.16);
        --accent-border: rgba(59, 130, 246, 0.38);

        --diff-pos: #34D399;
        --diff-pos-bright: #6EE7B7;
        --diff-pos-bg: rgba(16, 185, 129, 0.14);
        --diff-pos-border: rgba(16, 185, 129, 0.45);

        --diff-neg: #F87171;
        --diff-neg-bright: #FCA5A5;
        --diff-neg-bg: rgba(239, 68, 68, 0.14);
        --diff-neg-border: rgba(239, 68, 68, 0.45);

        --neutral-grey: #CBD5E1;
        --neutral-grey-bg: rgba(148, 163, 184, 0.16);
        --neutral-grey-border: rgba(148, 163, 184, 0.40);

        --bento-tx-color: #60A5FA;
        --bento-tx-bg: rgba(59, 130, 246, 0.16);
        --bento-kupon-color: #CBD5E1;
        --bento-kupon-bg: rgba(148, 163, 184, 0.16);
        --bento-unpaid-color: #CBD5E1;
        --bento-unpaid-bg: rgba(148, 163, 184, 0.16);
        --bento-kasbon-color: #CBD5E1;
        --bento-kasbon-bg: rgba(148, 163, 184, 0.16);

        --border-hairline: rgba(255, 255, 255, 0.10);
        --border-strong: rgba(255, 255, 255, 0.18);
        --glass-border: rgba(255, 255, 255, 0.14);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

        --shadow-card: 0 10px 30px -4px rgba(0, 0, 0, 0.42);
        --shadow-float: 0 16px 36px rgba(0, 0, 0, 0.60);
        --shadow-sheet: 0 -8px 36px rgba(0, 0, 0, 0.68);
      }
    }

    html[data-color-scheme="light"] {
      --bg-page: #E8EEF5;
      --bg-card: rgba(255, 255, 255, 0.78);
      --bg-card-fallback: rgba(255, 255, 255, 0.94);
      --bg-row: rgba(255, 255, 255, 0.88);
      --bg-subtle: rgba(226, 232, 240, 0.65);
      --bg-elevated: rgba(255, 255, 255, 0.92);
      --bg-glass: rgba(255, 255, 255, 0.76);
      --bg-glass-heavy: rgba(248, 250, 252, 0.92);
      --hero-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.93) 0%, rgba(30, 41, 59, 0.90) 100%);
      --hero-border: rgba(255, 255, 255, 0.18);
      --hero-text: #F8FAFC;
      --hero-sub: #CBD5E1;
      --text-main: #0F172A;
      --text-sec: #334155;
      --text-muted: #475569;
      --accent: #2563EB;
      --accent-hover: #1D4ED8;
      --accent-soft: rgba(37, 99, 235, 0.10);
      --accent-border: rgba(37, 99, 235, 0.28);
      --diff-pos: #047857;
      --diff-pos-bright: #34D399;
      --diff-pos-bg: rgba(16, 185, 129, 0.10);
      --diff-pos-border: rgba(5, 150, 105, 0.40);
      --diff-neg: #B91C1C;
      --diff-neg-bright: #FCA5A5;
      --diff-neg-bg: rgba(239, 68, 68, 0.10);
      --diff-neg-border: rgba(220, 38, 38, 0.40);
      --neutral-grey: #475569;
      --neutral-grey-bg: rgba(100, 116, 139, 0.12);
      --neutral-grey-border: rgba(100, 116, 139, 0.38);
      --bento-tx-color: #1D4ED8;
      --bento-tx-bg: rgba(37, 99, 235, 0.10);
      --bento-kupon-color: #475569;
      --bento-kupon-bg: rgba(100, 116, 139, 0.12);
      --bento-unpaid-color: #475569;
      --bento-unpaid-bg: rgba(100, 116, 139, 0.12);
      --bento-kasbon-color: #475569;
      --bento-kasbon-bg: rgba(100, 116, 139, 0.12);
      --border-hairline: rgba(15, 23, 42, 0.10);
      --border-strong: rgba(15, 23, 42, 0.18);
      --glass-border: rgba(255, 255, 255, 0.65);
      --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.80), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    }

    html[data-color-scheme="dark"] {
      --bg-page: #080C14;
      --bg-card: rgba(17, 24, 39, 0.72);
      --bg-card-fallback: rgba(17, 24, 39, 0.94);
      --bg-row: rgba(30, 41, 59, 0.68);
      --bg-subtle: rgba(30, 41, 59, 0.75);
      --bg-elevated: rgba(30, 41, 59, 0.92);
      --bg-glass: rgba(15, 23, 42, 0.76);
      --bg-glass-heavy: rgba(9, 13, 22, 0.92);
      --hero-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.90) 0%, rgba(30, 41, 59, 0.84) 100%);
      --hero-border: rgba(255, 255, 255, 0.16);
      --hero-text: #F8FAFC;
      --hero-sub: #CBD5E1;
      --text-main: #F8FAFC;
      --text-sec: #CBD5E1;
      --text-muted: #94A3B8;
      --accent: #3B82F6;
      --accent-hover: #60A5FA;
      --accent-soft: rgba(59, 130, 246, 0.16);
      --accent-border: rgba(59, 130, 246, 0.38);
      --diff-pos: #34D399;
      --diff-pos-bright: #6EE7B7;
      --diff-pos-bg: rgba(16, 185, 129, 0.14);
      --diff-pos-border: rgba(16, 185, 129, 0.45);
      --diff-neg: #F87171;
      --diff-neg-bright: #FCA5A5;
      --diff-neg-bg: rgba(239, 68, 68, 0.14);
      --diff-neg-border: rgba(239, 68, 68, 0.45);
      --neutral-grey: #CBD5E1;
      --neutral-grey-bg: rgba(148, 163, 184, 0.16);
      --neutral-grey-border: rgba(148, 163, 184, 0.40);
      --bento-tx-color: #60A5FA;
      --bento-tx-bg: rgba(59, 130, 246, 0.16);
      --bento-kupon-color: #CBD5E1;
      --bento-kupon-bg: rgba(148, 163, 184, 0.16);
      --bento-unpaid-color: #CBD5E1;
      --bento-unpaid-bg: rgba(148, 163, 184, 0.16);
      --bento-kasbon-color: #CBD5E1;
      --bento-kasbon-bg: rgba(148, 163, 184, 0.16);
      --border-hairline: rgba(255, 255, 255, 0.10);
      --border-strong: rgba(255, 255, 255, 0.18);
      --glass-border: rgba(255, 255, 255, 0.14);
      --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
    }

    /* ==========================================================================
       2. RESET & BASE TYPOGRAPHY
       ========================================================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      font-size: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: var(--font-sans);
      background-color: var(--bg-page);
      background-image: var(--bg-page-gradient);
      background-attachment: fixed;
      color: var(--text-main);
      line-height: 1.5;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    button, input, select, textarea {
      font-family: inherit;
      font-size: 0.9375rem;
      color: inherit;
      background: none;
      border: none;
    }

    button {
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .icon {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
    }
    .icon-sm { width: 16px; height: 16px; }
    .icon-lg { width: 24px; height: 24px; }

    /* Boxed "LOGO" Mark */
    .logo-box-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.18rem 0.42rem;
      border-radius: 6px;
      border: 1.5px solid currentColor;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
      flex-shrink: 0;
      user-select: none;
    }

    .logo-box-mark.logo-lg {
      padding: 0.38rem 0.65rem;
      border-radius: 9px;
      border-width: 2px;
      font-size: 0.82rem;
      letter-spacing: 0.08em;
    }

    /* ==========================================================================
       3. LOADING SYSTEM (TOP PROGRESS BAR, SHIMMER SKELETON, WELCOME PULSE)
       ========================================================================== */
    .top-progress-track {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: 600;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity var(--dur-fast) var(--ease-out);
    }

    .top-progress-track.active {
      opacity: 1;
    }

    .top-progress-bar {
      width: 45%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, var(--accent) 45%, var(--accent-light) 80%, transparent 100%);
      transform: translate3d(-120%, 0, 0);
    }

    .top-progress-track.active .top-progress-bar {
      animation: topProgressSlide 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes topProgressSlide {
      0% { transform: translate3d(-110%, 0, 0); }
      100% { transform: translate3d(240%, 0, 0); }
    }

    .network-status-pill {
      position: fixed;
      top: calc(3.8rem + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translate3d(-50%, -12px, 0);
      opacity: 0;
      pointer-events: none;
      z-index: 450;
      background-color: var(--bg-elevated);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-float);
      padding: 0.45rem 0.95rem;
      border-radius: var(--radius-pill);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-main);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    }

    .network-status-pill.active {
      transform: translate3d(-50%, 0, 0);
      opacity: 1;
    }

    .status-pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--accent);
      animation: statusDotPulse 1.2s ease-in-out infinite;
    }

    @keyframes statusDotPulse {
      0%, 100% { transform: scale(0.9); opacity: 0.6; }
      50% { transform: scale(1.15); opacity: 1; }
    }

    /* Shimmer Skeleton Loader */
    .skeleton {
      background-color: var(--bg-subtle);
      border-radius: var(--radius-card);
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border-hairline);
    }

    .skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 100%);
      transform: translate3d(-100%, 0, 0);
      animation: shimmerGlide 1.4s infinite;
    }

    @keyframes shimmerGlide {
      0% { transform: translate3d(-100%, 0, 0); }
      100% { transform: translate3d(100%, 0, 0); }
    }

    /* Dynamic Island Toast Notification */
    .dynamic-island {
      position: fixed;
      top: calc(0.6rem + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translate3d(-50%, -150%, 0);
      opacity: 0;
      pointer-events: none;
      z-index: 550;
      background-color: #0F172A;
      color: #F8FAFC;
      border: 1px solid rgba(255, 255, 255, 0.16);
      padding: 0.6rem 1.15rem;
      border-radius: var(--radius-pill);
      font-size: 0.84375rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
      transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
      max-width: calc(100vw - 2rem);
    }

    .dynamic-island.visible {
      transform: translate3d(-50%, 0, 0);
      opacity: 1;
      pointer-events: auto;
    }

    .dynamic-island-badge {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: rgba(16, 185, 129, 0.24);
      border: 1px solid rgba(52, 211, 153, 0.45);
      color: #34D399;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dynamic-island.is-warn .dynamic-island-badge {
      background-color: rgba(239, 68, 68, 0.24);
      border-color: rgba(248, 113, 113, 0.45);
      color: #F87171;
    }

    /* ==========================================================================
       4. TOP UTILITY BAR & CLOUD STATUS INDICATOR (LAPTOP OVERLAP FIXED)
       ========================================================================== */
    .top-bar {
      background-color: var(--bg-glass);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid var(--border-hairline);
      padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.95rem 0.45rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem;
      position: sticky;
      top: 0;
      z-index: 80;
    }

    .top-bar-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.1rem;
      min-width: 0;
    }

    .top-brand-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 0;
    }

    .brand-header-pill {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 44px;
      padding: 0.25rem 0.5rem;
      margin-left: -0.4rem;
      border-radius: 10px;
      background-color: transparent;
      color: var(--text-main);
      font-size: 0.875rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    }

    .brand-header-pill:hover {
      background-color: var(--bg-subtle);
    }

    .brand-hold-progress {
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      width: 0%;
      background-color: var(--accent-soft);
      pointer-events: none;
      transition: width 0.1s linear;
    }

    .brand-header-pill.holding .brand-hold-progress {
      width: 100%;
      transition: width 1500ms linear;
    }

    .cloud-status-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      min-height: 34px;
      padding: 2px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .cloud-status-svg {
      width: 26px;
      height: 22px;
      display: block;
      overflow: visible;
    }

    .meta-time {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-sec);
      font-variant-numeric: tabular-nums;
      display: inline-block;
      line-height: 1.2;
      white-space: nowrap;
    }

    .top-bar-right {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
    }

    .top-bar-btn-compact {
      min-height: 44px !important;
      min-width: 44px !important;
      padding: 0.4rem 0.65rem !important;
      font-size: 0.76rem !important;
      font-weight: 600 !important;
      border-radius: 10px !important;
      background-color: var(--bg-card) !important;
      border: 1px solid var(--border-hairline) !important;
      color: var(--text-main) !important;
    }

    .top-bar-btn-compact:hover:not(:disabled) {
      background-color: var(--bg-subtle) !important;
    }

    #btn-lock-app {
      display: none !important;
    }

    .hide-label-mobile {
      display: none;
    }

    @media (min-width: 640px) {
      .top-bar-left {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
      }
      .meta-time {
        font-size: 0.75rem;
        padding-left: 0.75rem;
        border-left: 1px solid var(--border-hairline);
      }
      .hide-label-mobile {
        display: inline;
      }
    }

    /* Fix overlap of "Diperbarui HH:MM WIB" with sidebar on tablet & laptop screens */
    @media (min-width: 640px) and (max-width: 1023px) {
      .top-bar {
        padding-left: calc(84px + 1.25rem);
        padding-right: 1.25rem;
      }
    }

    @media (min-width: 1024px) {
      .top-bar {
        padding-left: calc(248px + 2.25rem);
        padding-right: 2.25rem;
      }
    }

    /* ==========================================================================
       5. ADAPTIVE NAVIGATION & SMOOTH SCREEN TRANSITIONS
       ========================================================================== */
    .app-layout {
      display: flex;
      flex: 1;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
    }

    .main-container {
      flex: 1;
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 1.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom, 0px));
      min-width: 0;
    }

    .view-region {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
      will-change: opacity, transform;
    }

    .view-region.view-enter {
      opacity: 0;
      transform: translate3d(0, 6px, 0);
    }

    .beranda-stack {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .beranda-stack > .card,
    .beranda-stack > .card-hero {
      margin-bottom: 0;
    }

    /* Floating Mobile Navigation Dock */
    .nav-bar {
      position: fixed;
      bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      width: calc(100% - 1.5rem);
      max-width: 400px;
      z-index: 90;
      background-color: var(--bg-glass);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--border-strong);
      border-radius: 22px;
      padding: 0.25rem 0.35rem;
      box-shadow: var(--glass-highlight), 0 12px 30px -4px rgba(15, 23, 42, 0.22);
    }

    .nav-rail {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      list-style: none;
      width: 100%;
      margin: 0 auto;
      align-items: center;
    }

    .nav-active-pill {
      position: absolute;
      top: 2px;
      left: 0;
      width: 25%;
      height: calc(100% - 4px);
      padding: 0 3px;
      pointer-events: none;
      transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
      z-index: 1;
    }

    .nav-active-pill-inner {
      width: 100%;
      height: 100%;
      background-color: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-radius: 16px;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
    }

    .nav-btn {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 48px;
      padding: 0.25rem 0.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.16rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-sec);
      transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }

    .nav-btn .icon {
      width: 19px;
      height: 19px;
      transition: transform var(--dur-fast) var(--ease-out);
    }

    .nav-btn[aria-current="page"] {
      color: var(--accent);
      font-weight: 700;
      transform: translate3d(0, -1px, 0);
    }

    .nav-btn[aria-current="page"] .icon {
      transform: translate3d(0, -1px, 0) scale(1.06);
    }

    .nav-btn-catat .catat-badge {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -2px;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.30);
      transition: transform var(--dur-fast) var(--ease-out);
    }

    .sidebar-brand,
    .sidebar-section-label,
    .desktop-nav-only {
      display: none;
    }

    /* ==========================================================================
       6. LIQUID GLASS CARDS, HERO ROWS, DAILY CHART & TRANSACTION LISTS
       ========================================================================== */
    .card {
      background-color: var(--bg-card);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      border-radius: var(--radius-card);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-highlight), var(--shadow-card);
      padding: 1.25rem;
      margin-bottom: 1.25rem;
      min-width: 0;
    }

    .card-hero {
      background: var(--hero-bg);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid var(--hero-border);
      color: var(--hero-text);
      padding: 1.35rem 1.25rem;
      border-radius: var(--radius-card);
      margin-bottom: 1.25rem;
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16), 0 14px 32px -6px rgba(15, 23, 42, 0.32);
    }

    .card-hero .card-kicker {
      color: var(--hero-sub);
    }

    @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
      .card,
      .top-bar,
      .nav-bar,
      .pin-lock-card {
        background-color: var(--bg-card-fallback) !important;
      }
    }

    .card-frame-in {
      border: 1px solid var(--diff-pos-border) !important;
      background: linear-gradient(135deg, var(--diff-pos-bg) 0%, var(--bg-card) 68%) !important;
      box-shadow: inset 3px 0 0 var(--diff-pos), var(--glass-highlight), var(--shadow-card) !important;
    }

    .card-frame-out {
      border: 1px solid var(--diff-neg-border) !important;
      background: linear-gradient(135deg, var(--diff-neg-bg) 0%, var(--bg-card) 68%) !important;
      box-shadow: inset 3px 0 0 var(--diff-neg), var(--glass-highlight), var(--shadow-card) !important;
    }

    .card-frame-neutral {
      border: 1px solid var(--neutral-grey-border) !important;
      background: linear-gradient(135deg, var(--neutral-grey-bg) 0%, var(--bg-card) 68%) !important;
      box-shadow: inset 3px 0 0 var(--neutral-grey), var(--glass-highlight), var(--shadow-card) !important;
    }

    /* Beranda Hero Comparisons */
    .hero-today-comp {
      font-size: 0.76rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .comp-pos { color: #34D399; }
    .comp-neg { color: #FCA5A5; }
    .comp-neutral { color: #94A3B8; }

    /* Horizontal Scrollable Daily Month Chart */
    .daily-chart-scroll-wrap {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      padding-bottom: 0.35rem;
    }

    .daily-chart-scroll-wrap::-webkit-scrollbar {
      height: 5px;
    }

    .daily-chart-scroll-wrap::-webkit-scrollbar-thumb {
      background-color: var(--border-strong);
      border-radius: 9999px;
    }

    .daily-chart-svg {
      display: block;
      height: 162px;
      min-width: 100%;
      touch-action: pan-x manipulation;
    }

    /* Today Category Summary Grid with Semantic Color Touches */
    .today-cat-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.65rem;
      margin-top: 0.75rem;
    }

    @media (min-width: 390px) {
      .today-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 768px) {
      .today-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .today-cat-cell {
      padding: 0.8rem 0.95rem;
      border-radius: 12px;
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      min-height: 50px;
    }

    .today-cat-cell.cat-touch-in {
      border-color: var(--diff-pos-border);
      background: linear-gradient(135deg, var(--diff-pos-bg) 0%, var(--bg-row) 75%);
      box-shadow: inset 3px 0 0 var(--diff-pos);
    }

    .today-cat-cell.cat-touch-out {
      border-color: var(--diff-neg-border);
      background: linear-gradient(135deg, var(--diff-neg-bg) 0%, var(--bg-row) 75%);
      box-shadow: inset 3px 0 0 var(--diff-neg);
    }

    .today-cat-cell.cat-touch-neutral {
      border-color: var(--neutral-grey-border);
      background: linear-gradient(135deg, var(--neutral-grey-bg) 0%, var(--bg-row) 75%);
      box-shadow: inset 3px 0 0 var(--neutral-grey);
    }

    /* Hero Quick Action Pills Inside Hero Card */
    .hero-flow-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      margin-top: 1.05rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hero-flow-box {
      padding: 0.7rem 0.8rem;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      text-align: left;
      min-width: 0;
      background-color: rgba(255, 255, 255, 0.05);
    }

    .hero-flow-box.flow-in {
      border: 1px solid rgba(52, 211, 153, 0.40);
    }

    .hero-flow-box.flow-out {
      border: 1px solid rgba(248, 113, 113, 0.40);
    }

    .hero-flow-label {
      font-size: 0.74rem;
      font-weight: 600;
      color: #CBD5E1;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .hero-flow-val {
      font-size: clamp(0.85rem, 3.5vw, 1rem);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.015em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Page Header */
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 1.1rem;
    }

    .month-eyebrow {
      font-size: 0.74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-sec);
      display: block;
      margin-bottom: 0.15rem;
    }

    .page-title {
      font-size: clamp(1.35rem, 4.4vw, 1.7rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text-main);
      line-height: 1.2;
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .card-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .card-kicker {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--text-sec);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    /* Tabular Financial Typography */
    .num-hero {
      font-size: clamp(1.85rem, 6vw, 2.5rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
      margin: 0.25rem 0 0.35rem;
      overflow-wrap: anywhere;
    }

    .num-large {
      font-size: clamp(1.35rem, 4.2vw, 1.7rem);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
      margin: 0.2rem 0 0.45rem;
      overflow-wrap: anywhere;
    }

    .num-stat {
      font-size: clamp(1.08rem, 3vw, 1.28rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      margin: 0.15rem 0;
      color: var(--text-main);
      overflow-wrap: anywhere;
    }

    .num-tx {
      font-weight: 700;
      font-size: 0.9375rem;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    /* Pill Badges */
    .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.28rem;
      padding: 0.24rem 0.58rem;
      border-radius: 8px;
      font-size: 0.74rem;
      font-weight: 600;
      background-color: var(--bg-subtle);
      color: var(--text-sec);
      font-variant-numeric: tabular-nums;
    }

    .pill-pos {
      background-color: var(--diff-pos-bg);
      color: var(--diff-pos);
      border: 1px solid var(--diff-pos-border);
    }

    .pill-neg {
      background-color: var(--diff-neg-bg);
      color: var(--diff-neg);
      border: 1px solid var(--diff-neg-border);
    }

    .pill-accent {
      background-color: var(--accent-soft);
      color: var(--accent);
      border: 1px solid var(--accent-border);
    }

    .pill-neutral {
      background-color: var(--neutral-grey-bg);
      color: var(--neutral-grey);
      border: 1px solid var(--neutral-grey-border);
    }

    .operational-note {
      margin-top: 0.85rem;
      padding: 0.5rem 0.75rem;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.06);
      color: var(--hero-sub);
      font-size: 0.76rem;
      font-weight: 500;
      text-align: center;
    }

    .card:not(.card-hero) .operational-note {
      background-color: var(--bg-subtle);
      color: var(--text-sec);
    }

    .ratio-bar {
      height: 5px;
      width: 100%;
      background-color: var(--bg-subtle);
      border-radius: var(--radius-pill);
      overflow: hidden;
      display: flex;
      margin: 0.65rem 0;
    }

    .ratio-segment {
      height: 100%;
      transform-origin: left center;
      transition: transform var(--dur-slow) var(--ease-out);
    }

    /* Bento Grid 4 Indicators (No backdrop-filter on sub-items for performance) */
    .stats-grid-4 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
      margin-bottom: 1.25rem;
    }

    .bento-card {
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-card);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow-card);
    }

    .bento-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.4rem;
      margin-bottom: 0.4rem;
    }

    .bento-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .bento-tx .bento-icon-box { background-color: var(--bento-tx-bg); color: var(--bento-tx-color); }
    .bento-kupon .bento-icon-box { background-color: var(--bento-kupon-bg); color: var(--bento-kupon-color); }
    .bento-unpaid .bento-icon-box { background-color: var(--bento-unpaid-bg); color: var(--bento-unpaid-color); }
    .bento-kasbon .bento-icon-box { background-color: var(--bento-kasbon-bg); color: var(--bento-kasbon-color); }

    .bento-label {
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text-sec);
      line-height: 1.25;
    }

    .bento-sub {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 0.2rem;
      line-height: 1.3;
    }

    /* ==========================================================================
       7. MONTH SELECTOR & SEGMENTED TABS (>=44px TOUCH TARGETS)
       ========================================================================== */
    .month-grid,
    .rekap-tabs-wrap {
      display: flex;
      gap: 0.5rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 0.25rem;
      margin-bottom: 1.15rem;
    }

    .month-grid::-webkit-scrollbar,
    .rekap-tabs-wrap::-webkit-scrollbar {
      display: none;
    }

    .month-btn,
    .rekap-tab-btn {
      scroll-snap-align: start;
      flex: 0 0 auto;
      min-height: 44px;
      padding: 0.45rem 1rem;
      border-radius: var(--radius-pill);
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-sec);
      white-space: nowrap;
      transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }

    .month-btn[aria-selected="true"],
    .rekap-tab-btn[aria-selected="true"] {
      background-color: var(--text-main);
      color: var(--bg-page);
      border-color: var(--text-main);
      font-weight: 700;
    }

    .segmented-2 {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      background-color: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-ctrl);
      padding: 4px;
      gap: 4px;
      margin-bottom: 1rem;
    }

    .segmented-2-btn {
      min-height: 44px;
      padding: 0.45rem;
      border-radius: 9px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-sec);
      text-align: center;
      border: 1px solid transparent;
      transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
    }

    .segmented-2-btn[aria-selected="true"] {
      color: var(--text-main);
      font-weight: 700;
      background-color: var(--bg-elevated);
      border-color: var(--border-hairline);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    }

    /* ==========================================================================
       8. TRANSACTION LISTS (>=64px TALL ROWS, SPACED, NO ROW BLUR)
       ========================================================================== */
    .mutation-list {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      margin-top: 0.5rem;
    }

    .mutation-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
      min-height: 68px;
      padding: 0.8rem 0.95rem;
      border-radius: 14px;
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
      cursor: pointer;
      transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
    }

    .mutation-row:hover {
      background-color: var(--bg-subtle);
    }

    .mutation-row:active {
      transform: scale(0.99);
    }

    .mutation-row.row-touch-in {
      border-color: var(--diff-pos-border);
      background: linear-gradient(90deg, var(--diff-pos-bg) 0%, var(--bg-row) 38%);
      box-shadow: inset 3px 0 0 var(--diff-pos);
    }

    .mutation-row.row-touch-out {
      border-color: var(--diff-neg-border);
      background: linear-gradient(90deg, var(--diff-neg-bg) 0%, var(--bg-row) 38%);
      box-shadow: inset 3px 0 0 var(--diff-neg);
    }

    .mutation-row.row-touch-neutral {
      border-color: var(--neutral-grey-border);
      background: linear-gradient(90deg, var(--neutral-grey-bg) 0%, var(--bg-row) 38%);
      box-shadow: inset 3px 0 0 var(--neutral-grey);
    }

    .mutation-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
      flex: 1;
    }

    .mutation-badge {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .mutation-badge.badge-in { background-color: var(--diff-pos-bg); color: var(--diff-pos); border: 1px solid var(--diff-pos-border); }
    .mutation-badge.badge-out { background-color: var(--diff-neg-bg); color: var(--diff-neg); border: 1px solid var(--diff-neg-border); }
    .mutation-badge.badge-kupon { background-color: var(--neutral-grey-bg); color: var(--neutral-grey); border: 1px solid var(--neutral-grey-border); }
    .mutation-badge.badge-unpaid { background-color: var(--neutral-grey-bg); color: var(--neutral-grey); border: 1px solid var(--neutral-grey-border); }
    .mutation-badge.badge-kasbon { background-color: var(--neutral-grey-bg); color: var(--neutral-grey); border: 1px solid var(--neutral-grey-border); }

    .mutation-info {
      min-width: 0;
      flex: 1;
    }

    .mutation-title {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mutation-meta {
      font-size: 0.76rem;
      color: var(--text-sec);
      margin-top: 0.15rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-wrap: wrap;
    }

    .mutation-amount {
      text-align: right;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    .amt-pos { color: var(--diff-pos) !important; font-weight: 700; }
    .amt-neg { color: var(--diff-neg) !important; font-weight: 700; }
    .amt-kasbon { color: var(--neutral-grey) !important; font-weight: 700; }
    .amt-neutral { color: var(--neutral-grey) !important; font-weight: 600; }

    /* ==========================================================================
       9. FORMS, INPUTS & STICKY ACTION BAR (>=44px TARGETS)
       ========================================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      min-height: 44px;
      padding: 0.55rem 1rem;
      border-radius: var(--radius-ctrl);
      font-size: 0.875rem;
      font-weight: 600;
      transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }

    .btn:active:not(:disabled) {
      transform: scale(0.98);
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .btn-primary {
      background-color: var(--text-main);
      color: var(--bg-page);
    }

    .btn-primary:hover:not(:disabled) {
      opacity: 0.92;
    }

    .btn-subtle {
      background-color: var(--bg-subtle);
      color: var(--text-main);
      border: 1px solid var(--border-hairline);
    }

    .btn-dashed-add {
      background-color: transparent;
      color: var(--text-main);
      border: 1.5px dashed var(--border-strong);
    }

    .btn-danger-outline {
      background-color: var(--diff-neg-bg);
      color: var(--diff-neg);
      border: 1px solid var(--diff-neg-border);
    }

    .field-group {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
      width: 100%;
      min-width: 0;
    }

    .field-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-sec);
    }

    input[type="date"].field-input,
    .field-input {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      min-height: 44px;
      padding: 0.55rem 0.8rem;
      border-radius: var(--radius-ctrl);
      border: 1px solid var(--border-strong);
      background-color: var(--bg-row);
      color: var(--text-main);
      font-size: 0.9375rem;
      transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    select.field-input {
      padding-right: 2.2rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 16px 16px;
    }

    .field-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
      outline: none;
    }

    .field-input[aria-invalid="true"] {
      border-color: var(--diff-neg);
      background-color: var(--diff-neg-bg);
    }

    .field-inline-error {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.25rem;
      color: var(--diff-neg);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .nominal-input-wrap {
      display: flex;
      align-items: stretch;
      width: 100%;
      gap: 0.45rem;
    }

    .rp-outside-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.75rem;
      min-height: 44px;
      border-radius: var(--radius-ctrl);
      background-color: var(--bg-subtle);
      border: 1px solid var(--border-strong);
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text-sec);
      flex-shrink: 0;
    }

    .row-amt-input {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      font-size: 0.95rem !important;
    }

    .row-amt-input[readonly] {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.45rem;
    }

    .chip-btn {
      min-height: 44px;
      padding: 0.35rem 0.85rem;
      border-radius: 10px;
      background-color: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-main);
      font-variant-numeric: tabular-nums;
      transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }

    .chip-btn:active {
      background-color: var(--text-main);
      color: var(--bg-page);
      transform: scale(0.96);
    }

    .sticky-catat-bar {
      position: sticky;
      bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
      z-index: 60;
      background-color: var(--bg-glass);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      backdrop-filter: blur(18px) saturate(180%);
      border: 1px solid var(--border-strong);
      border-radius: 16px;
      padding: 0.65rem 0.75rem;
      margin-top: 1rem;
      box-shadow: var(--shadow-float);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
    }

    /* ==========================================================================
       10. CHARTS (DAILY CUMULATIVE BALANCE & 6-MONTH BAR CHART)
       ========================================================================== */
    .chart-floating-tooltip {
      background-color: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-ctrl);
      padding: 0.7rem 0.85rem;
      margin-bottom: 0.9rem;
      min-height: 68px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.3rem;
      font-size: 0.78rem;
      font-variant-numeric: tabular-nums;
    }

    .chart-tooltip-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.45rem;
      width: 100%;
    }

    .chart-metric-item {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      min-width: 0;
    }

    .chart-metric-label {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-sec);
    }

    .chart-metric-val {
      font-size: clamp(0.74rem, 2.8vw, 0.84rem);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .chart-svg {
      width: 100%;
      height: auto;
      max-height: 210px;
      display: block;
      overflow: visible;
      touch-action: manipulation;
    }

    .chart-bar {
      transform-box: fill-box;
      transform-origin: center bottom;
      transform: scaleY(0);
      transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    }

    .chart-svg.chart-visible .chart-bar {
      transform: scaleY(1);
    }

    .chart-col-group,
    .daily-point-target {
      cursor: pointer;
    }

    /* ==========================================================================
       11. RESPONSIVE GRIDS & DESKTOP TABLE VIEW
       ========================================================================== */
    .cards-grid-2,
    .cards-grid-3,
    .stack-date-day,
    .form-row-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
    }

    .desktop-tx-table-wrap {
      display: none;
    }

    .bottom-sheet:not([open]) {
      display: none !important;
    }

    .bottom-sheet {
      position: fixed;
      inset: auto 0 0 0;
      border: none;
      border-radius: 22px 22px 0 0;
      background-color: var(--bg-glass-heavy);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      backdrop-filter: blur(22px) saturate(180%);
      color: var(--text-main);
      box-shadow: var(--shadow-sheet);
      width: 100%;
      max-width: 580px;
      max-height: 85dvh;
      overflow-y: auto;
      margin: auto auto 0 auto;
      padding: 1.25rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--border-strong);
    }

    .bottom-sheet::backdrop {
      background-color: rgba(11, 15, 23, 0.6);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }

    @media (min-width: 640px) {
      .cards-grid-2,
      .stack-date-day,
      .form-row-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .cards-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 640px) and (max-width: 1023px) {
      .app-layout { padding-left: 84px; }
      .nav-bar {
        top: 0; bottom: 0; left: 0; right: auto;
        transform: none;
        width: 84px;
        max-width: none;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--border-hairline);
        box-shadow: none;
        padding: 4.5rem 0.4rem 1.25rem;
        display: flex;
        flex-direction: column;
      }
      .nav-rail {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .nav-active-pill { display: none; }
      .nav-btn {
        border-radius: 12px;
        min-height: 54px;
      }
      .nav-btn[aria-current="page"] {
        background-color: var(--accent-soft);
        transform: none;
      }
      .nav-btn-catat .catat-badge {
        margin-top: 0;
        width: 30px;
        height: 30px;
      }
      .sticky-catat-bar { bottom: 1rem; }
      .main-container { padding: 1.5rem 1.5rem 4rem; }
    }

    @media (min-width: 1024px) {
      .app-layout { padding-left: 248px; }
      .nav-bar {
        top: 0; bottom: 0; left: 0; right: auto;
        transform: none;
        width: 248px;
        max-width: none;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--border-hairline);
        box-shadow: none;
        padding: 1.25rem 0.85rem;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
      }

      .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.35rem 0.5rem 1.15rem;
        border-bottom: 1px solid var(--border-hairline);
        margin-bottom: 0.85rem;
      }

      .sidebar-section-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        padding: 0.65rem 0.75rem 0.3rem;
      }

      .nav-rail {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
      }

      .nav-active-pill { display: none; }
      .desktop-nav-only { display: block; }

      .nav-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        min-height: 44px;
        padding: 0.55rem 0.8rem;
        border-radius: 10px;
        font-size: 0.875rem;
      }

      .nav-btn:hover {
        background-color: var(--bg-subtle);
        color: var(--text-main);
      }

      .nav-btn[aria-current="page"] {
        background-color: var(--bg-subtle);
        color: var(--text-main);
        font-weight: 700;
        transform: none;
      }

      .nav-btn[aria-current="page"] .icon {
        transform: none;
      }

      .nav-btn-catat .catat-badge {
        margin-top: 0;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        box-shadow: none;
      }

      .main-container {
        padding: 1.75rem 2.25rem 4rem;
      }

      .sticky-catat-bar { bottom: 1.25rem; }
      .cards-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .form-row-fields { grid-template-columns: 2fr 1.3fr 1.1fr 1.4fr; }

      .rekap-desktop-table .mobile-tx-cards-wrap { display: none; }
      .rekap-desktop-table .desktop-tx-table-wrap {
        display: block;
        max-height: 520px;
        overflow-y: auto;
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-ctrl);
        background-color: var(--bg-row);
      }

      .tx-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
      }

      .tx-table thead th {
        position: sticky;
        top: 0;
        background-color: var(--bg-subtle);
        color: var(--text-sec);
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--border-strong);
        z-index: 2;
      }

      .tx-table tbody td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--border-hairline);
        font-size: 0.875rem;
      }

      .tx-table tbody tr {
        cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease-out);
      }

      .tx-table tbody tr:hover {
        background-color: var(--bg-subtle);
      }

      .bottom-sheet {
        border-radius: 18px;
        margin: auto;
        border: 1px solid var(--border-strong);
      }
    }

    /* ==========================================================================
       12. LIQUID GLASS PIN SCREEN & WELCOME CARD WITH PULSING LOGO
       ========================================================================== */
    .icon-in { color: var(--diff-pos) !important; stroke: var(--diff-pos) !important; }
    .icon-out { color: var(--diff-neg) !important; stroke: var(--diff-neg) !important; }

    .pin-lock-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      background-color: var(--bg-page);
      background-image: var(--bg-page-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      overflow-y: auto;
      opacity: 1;
      transition: opacity var(--dur-base) var(--ease-out);
    }

    .pin-lock-overlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    .pin-lock-overlay.hidden {
      display: none !important;
    }

    .pin-lock-card {
      width: 100%;
      max-width: 368px;
      background-color: var(--bg-card);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      box-shadow: var(--glass-highlight), var(--shadow-float);
      padding: 2rem 1.5rem;
      text-align: center;
    }

    .welcome-glass-logo {
      width: 68px;
      height: 68px;
      margin: 0 auto 1.15rem;
      border-radius: 20px;
      background-color: var(--bg-subtle);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-highlight), 0 8px 20px rgba(37, 99, 235, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      animation: welcomeLogoPulse 1.6s ease-in-out infinite;
    }

    @keyframes welcomeLogoPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.04); }
    }

    .pin-dots-row {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      margin: 1.25rem 0;
    }

    .pin-dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      border: 1.5px solid var(--border-strong);
      background-color: transparent;
      transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }

    .pin-dot.filled {
      background-color: var(--text-main);
      border-color: var(--text-main);
      transform: scale(1.15);
    }

    .pin-dot.error {
      background-color: var(--diff-neg);
      border-color: var(--diff-neg);
    }

    .pin-numpad {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.6rem;
      margin-top: 1rem;
    }

    .pin-key {
      min-height: 54px;
      border-radius: 14px;
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: center;
      font-variant-numeric: tabular-nums;
      user-select: none;
      transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }

    .pin-key:active {
      transform: scale(0.95);
      background-color: var(--bg-subtle);
    }

    .pin-key-action {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--text-sec);
    }

    .control-widget-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .control-widget-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.55rem;
      padding: 1rem;
      min-height: 44px;
      border-radius: 14px;
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
      text-align: left;
      transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
    }

    .control-widget-card:hover {
      border-color: var(--border-strong);
    }

    /* ==========================================================================
       12. LIQUID GLASS LAYER (iOS 26 STYLE), DAILY CAROUSEL, HERO TREND & TEXT WRAP
       Appended as an override layer: only tokens and presentation, no business logic.
       ========================================================================== */
    :root {
      --radius-card: 24px;
    }

    :root {
        --bg-page-gradient:
          radial-gradient(58% 40% at 8% 3%, rgba(37, 99, 235, 0.28), transparent 72%),
          radial-gradient(52% 38% at 98% 12%, rgba(16, 185, 129, 0.22), transparent 72%),
          radial-gradient(60% 42% at 86% 58%, rgba(139, 92, 246, 0.13), transparent 74%),
          radial-gradient(66% 46% at 6% 94%, rgba(56, 189, 248, 0.24), transparent 74%);
        --bg-card: rgba(255, 255, 255, 0.50);
        --bg-row: rgba(255, 255, 255, 0.55);
        --bg-subtle: rgba(226, 232, 240, 0.55);
        --bg-glass: rgba(255, 255, 255, 0.80);
        --glass-border: rgba(255, 255, 255, 0.78);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 0 rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 26px rgba(255, 255, 255, 0.14);
        --glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.12) 36%, rgba(255, 255, 255, 0) 62%);
        --shadow-card: 0 12px 32px -10px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.05);
        --daily-dim: rgba(15, 23, 42, 0.15);
        --lens-bg: rgba(255, 255, 255, 0.58);
        --lens-border: rgba(255, 255, 255, 0.90);
        --lens-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 22px -8px rgba(37, 99, 235, 0.35);
        --nav-pill-bg: rgba(255, 255, 255, 0.72);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-page-gradient:
          radial-gradient(58% 40% at 8% 3%, rgba(59, 130, 246, 0.30), transparent 72%),
          radial-gradient(52% 38% at 98% 12%, rgba(16, 185, 129, 0.20), transparent 72%),
          radial-gradient(60% 42% at 86% 58%, rgba(139, 92, 246, 0.16), transparent 74%),
          radial-gradient(66% 46% at 6% 94%, rgba(14, 165, 233, 0.20), transparent 74%);
        --bg-card: rgba(17, 24, 39, 0.52);
        --bg-row: rgba(30, 41, 59, 0.55);
        --bg-subtle: rgba(51, 65, 85, 0.50);
        --bg-glass: rgba(15, 23, 42, 0.74);
        --glass-border: rgba(255, 255, 255, 0.18);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), inset 0 0 22px rgba(255, 255, 255, 0.04);
        --glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.025) 36%, rgba(255, 255, 255, 0) 62%);
        --shadow-card: 0 14px 34px -8px rgba(0, 0, 0, 0.50);
        --daily-dim: rgba(2, 6, 23, 0.55);
        --lens-bg: rgba(255, 255, 255, 0.09);
        --lens-border: rgba(255, 255, 255, 0.22);
        --lens-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -8px rgba(59, 130, 246, 0.45);
        --nav-pill-bg: rgba(255, 255, 255, 0.12);
      }
    }

    html[data-color-scheme="light"] {
        --bg-page-gradient:
          radial-gradient(58% 40% at 8% 3%, rgba(37, 99, 235, 0.28), transparent 72%),
          radial-gradient(52% 38% at 98% 12%, rgba(16, 185, 129, 0.22), transparent 72%),
          radial-gradient(60% 42% at 86% 58%, rgba(139, 92, 246, 0.13), transparent 74%),
          radial-gradient(66% 46% at 6% 94%, rgba(56, 189, 248, 0.24), transparent 74%);
        --bg-card: rgba(255, 255, 255, 0.50);
        --bg-row: rgba(255, 255, 255, 0.55);
        --bg-subtle: rgba(226, 232, 240, 0.55);
        --bg-glass: rgba(255, 255, 255, 0.80);
        --glass-border: rgba(255, 255, 255, 0.78);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 0 rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 26px rgba(255, 255, 255, 0.14);
        --glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.12) 36%, rgba(255, 255, 255, 0) 62%);
        --shadow-card: 0 12px 32px -10px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.05);
        --daily-dim: rgba(15, 23, 42, 0.15);
        --lens-bg: rgba(255, 255, 255, 0.58);
        --lens-border: rgba(255, 255, 255, 0.90);
        --lens-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 22px -8px rgba(37, 99, 235, 0.35);
        --nav-pill-bg: rgba(255, 255, 255, 0.72);
    }

    html[data-color-scheme="dark"] {
        --bg-page-gradient:
          radial-gradient(58% 40% at 8% 3%, rgba(59, 130, 246, 0.30), transparent 72%),
          radial-gradient(52% 38% at 98% 12%, rgba(16, 185, 129, 0.20), transparent 72%),
          radial-gradient(60% 42% at 86% 58%, rgba(139, 92, 246, 0.16), transparent 74%),
          radial-gradient(66% 46% at 6% 94%, rgba(14, 165, 233, 0.20), transparent 74%);
        --bg-card: rgba(17, 24, 39, 0.52);
        --bg-row: rgba(30, 41, 59, 0.55);
        --bg-subtle: rgba(51, 65, 85, 0.50);
        --bg-glass: rgba(15, 23, 42, 0.74);
        --glass-border: rgba(255, 255, 255, 0.18);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), inset 0 0 22px rgba(255, 255, 255, 0.04);
        --glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.025) 36%, rgba(255, 255, 255, 0) 62%);
        --shadow-card: 0 14px 34px -8px rgba(0, 0, 0, 0.50);
        --daily-dim: rgba(2, 6, 23, 0.55);
        --lens-bg: rgba(255, 255, 255, 0.09);
        --lens-border: rgba(255, 255, 255, 0.22);
        --lens-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -8px rgba(59, 130, 246, 0.45);
        --nav-pill-bg: rgba(255, 255, 255, 0.12);
    }

    /* ---- Glass surfaces ---- */
    .card {
      background-image: var(--glass-sheen);
      -webkit-backdrop-filter: blur(24px) saturate(190%);
      backdrop-filter: blur(24px) saturate(190%);
    }

    .bento-card,
    .control-widget-card {
      background-image: var(--glass-sheen);
    }

    .bento-card {
      box-shadow: var(--glass-highlight), var(--shadow-card);
    }

    .nav-bar {
      -webkit-backdrop-filter: blur(24px) saturate(190%);
      backdrop-filter: blur(24px) saturate(190%);
      border-radius: 26px;
      border-color: var(--glass-border);
      box-shadow: var(--glass-highlight), 0 14px 32px -8px rgba(15, 23, 42, 0.28);
    }

    .nav-active-pill-inner {
      background-color: var(--nav-pill-bg);
      border: 1px solid var(--lens-border);
      box-shadow: var(--glass-highlight);
    }

    /* ---- Hero card: real glass, text stays dark-surface readable ---- */
    .card-hero {
      background:
        radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(150deg, rgba(15, 23, 42, 0.86) 0%, rgba(30, 41, 59, 0.80) 100%);
      -webkit-backdrop-filter: blur(28px) saturate(190%);
      backdrop-filter: blur(28px) saturate(190%);
      border: 1px solid rgba(255, 255, 255, 0.26);
      border-radius: 28px;
      box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.07),
        inset 0 0 26px rgba(255, 255, 255, 0.05),
        0 18px 40px -12px rgba(15, 23, 42, 0.42);
    }

    .card-hero.hero-trend-up {
      background:
        radial-gradient(95% 75% at 100% 0%, rgba(134, 239, 172, 0.20) 0%, rgba(134, 239, 172, 0) 64%),
        radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(150deg, rgba(15, 23, 42, 0.86) 0%, rgba(30, 41, 59, 0.80) 100%);
      border-color: rgba(134, 239, 172, 0.55);
      box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
        inset 0 0 0 1px rgba(134, 239, 172, 0.10),
        inset 0 0 30px rgba(134, 239, 172, 0.07),
        0 18px 40px -12px rgba(15, 23, 42, 0.42),
        0 10px 34px -8px rgba(134, 239, 172, 0.32);
    }

    .card-hero.hero-trend-down {
      background:
        radial-gradient(95% 75% at 100% 0%, rgba(250, 204, 21, 0.20) 0%, rgba(250, 204, 21, 0) 64%),
        radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(150deg, rgba(15, 23, 42, 0.86) 0%, rgba(30, 41, 59, 0.80) 100%);
      border-color: rgba(250, 204, 21, 0.58);
      box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
        inset 0 0 0 1px rgba(250, 204, 21, 0.10),
        inset 0 0 30px rgba(250, 204, 21, 0.07),
        0 18px 40px -12px rgba(15, 23, 42, 0.42),
        0 10px 34px -8px rgba(250, 204, 21, 0.30);
    }

    @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
      .card-hero,
      .card-hero.hero-trend-up,
      .card-hero.hero-trend-down {
        background-color: #0F172A;
      }
    }

    /* Pills inside the dark hero must stay readable in light mode too */
    .card-hero .pill-badge.pill-pos {
      background-color: rgba(52, 211, 153, 0.16);
      color: #6EE7B7;
      border-color: rgba(52, 211, 153, 0.45);
    }

    .card-hero .pill-badge.pill-neg {
      background-color: rgba(248, 113, 113, 0.16);
      color: #FCA5A5;
      border-color: rgba(248, 113, 113, 0.45);
    }

    .card-hero .pill-badge:not(.pill-pos):not(.pill-neg) {
      background-color: rgba(255, 255, 255, 0.10);
      color: #E2E8F0;
    }

    .card-hero .pill-pos .icon-in {
      color: #6EE7B7 !important;
      stroke: #6EE7B7 !important;
    }

    .card-hero .pill-neg .icon-out {
      color: #FCA5A5 !important;
      stroke: #FCA5A5 !important;
    }

    .hero-flow-box {
      background-color: rgba(255, 255, 255, 0.07);
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
    }

    /* ---- Hero trend (icon + percentage vs yesterday) ---- */
    .hero-trend-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.4rem 0.65rem;
    }

    .hero-trend-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      padding: 0.24rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.82rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
      line-height: 1.2;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background-color: rgba(255, 255, 255, 0.08);
      color: #CBD5E1;
    }

    .hero-trend-chip .icon {
      width: 18px;
      height: 18px;
      stroke-width: 2.2;
    }

    .hero-trend-chip.is-up {
      color: #34D399;
      background-color: rgba(52, 211, 153, 0.16);
      border-color: rgba(52, 211, 153, 0.45);
    }

    .hero-trend-chip.is-down {
      color: #FCA5A5;
      background-color: rgba(248, 113, 113, 0.16);
      border-color: rgba(248, 113, 113, 0.45);
    }

    /* ---- Daily chart: centered snap carousel ---- */
    .daily-card {
      --col-w: 58px;
    }

    @media (min-width: 640px) {
      .daily-card {
        --col-w: 72px;
      }
    }

    .daily-detail {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      margin-bottom: 1rem;
      transition: opacity var(--dur-fast) var(--ease-out);
    }

    .daily-detail.is-moving {
      opacity: 0.4;
    }

    .daily-detail > * {
      animation: dailyRise var(--dur-base) var(--ease-out) both;
    }

    @keyframes dailyRise {
      from { opacity: 0; transform: translate3d(0, 4px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .dd-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.35rem 0.5rem;
      min-height: 28px;
    }

    .dd-date {
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text-main);
      overflow-wrap: anywhere;
    }

    .dd-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .dd-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.15rem;
      min-width: 0;
      min-height: 68px;
      padding: 0.6rem 0.8rem;
      border-radius: 16px;
      background-color: var(--bg-row);
      border: 1px solid var(--border-hairline);
    }

    .dd-item.dd-in {
      border-color: var(--diff-pos-border);
      background: linear-gradient(135deg, var(--diff-pos-bg) 0%, var(--bg-row) 80%);
      box-shadow: inset 3px 0 0 var(--diff-pos);
    }

    .dd-item.dd-out {
      border-color: var(--diff-neg-border);
      background: linear-gradient(135deg, var(--diff-neg-bg) 0%, var(--bg-row) 80%);
      box-shadow: inset 3px 0 0 var(--diff-neg);
    }

    .dd-item.dd-net {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-height: 50px;
      border-color: var(--accent-border);
      background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-row) 80%);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .dd-label {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-sec);
    }

    .dd-val {
      font-size: clamp(0.82rem, 3.5vw, 1rem);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.015em;
      line-height: 1.25;
      overflow-wrap: break-word;
    }

    .dd-net .dd-val {
      text-align: right;
      font-size: clamp(0.92rem, 4vw, 1.1rem);
    }

    .daily-stage {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
    }

    .daily-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(90deg, var(--daily-dim) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 68%, var(--daily-dim) 100%);
    }

    .daily-lens {
      position: absolute;
      z-index: 0;
      top: 4px;
      bottom: 4px;
      left: 50%;
      width: calc(var(--col-w) + 6px);
      transform: translateX(-50%);
      border-radius: 18px;
      background-color: var(--lens-bg);
      border: 1px solid var(--lens-border);
      box-shadow: var(--lens-shadow);
      pointer-events: none;
    }

    .daily-scroller {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      padding: 0.85rem 0 0.7rem;
      outline: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .daily-scroller::-webkit-scrollbar {
      display: none;
    }

    .daily-scroller:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
      border-radius: 18px;
    }

    @media (hover: hover) and (pointer: fine) {
      .daily-scroller {
        cursor: grab;
      }
    }

    .daily-scroller.is-dragging {
      scroll-snap-type: none;
      cursor: grabbing;
    }

    .daily-spacer {
      flex: 0 0 calc(50% - var(--col-w) / 2);
      min-width: 0;
    }

    .daily-col {
      flex: 0 0 var(--col-w);
      width: var(--col-w);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      scroll-snap-align: center;
    }

    .daily-bars {
      height: 112px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 6px;
    }

    .daily-bar {
      display: block;
      width: 15px;
      border-radius: 7px 7px 3px 3px;
      transform-origin: 50% 100%;
      animation: dailyBarGrow 520ms var(--ease-out) both;
    }

    .daily-bar.bar-in {
      background: linear-gradient(180deg, var(--diff-pos-bright) 0%, var(--diff-pos) 100%);
      box-shadow: 0 4px 10px -3px rgba(16, 185, 129, 0.45);
    }

    .daily-bar.bar-out {
      background: linear-gradient(180deg, var(--diff-neg-bright) 0%, var(--diff-neg) 100%);
      box-shadow: 0 4px 10px -3px rgba(239, 68, 68, 0.40);
    }

    .daily-bar.is-empty {
      opacity: 0.28;
      box-shadow: none;
    }

    @keyframes dailyBarGrow {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }

    .daily-day {
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1;
      padding: 2px 0;
      color: var(--text-sec);
      font-variant-numeric: tabular-nums;
    }

    .daily-col.is-active .daily-day {
      color: var(--accent);
      font-weight: 800;
    }

    /* ---- Long text must wrap on phones instead of being cut ---- */
    .brand-header-pill {
      white-space: normal;
      min-width: 0;
      max-width: 100%;
    }

    .brand-header-pill [data-client-name] {
      min-width: 0;
      overflow-wrap: anywhere;
      line-height: 1.15;
      text-align: left;
    }

    .top-brand-row {
      min-width: 0;
    }

    .sidebar-brand [data-client-name] {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      overflow-wrap: anywhere;
      line-height: 1.2;
    }

    .mutation-title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      line-height: 1.3;
    }

    .hero-flow-val {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: break-word;
      line-height: 1.25;
      font-size: clamp(0.82rem, 3.6vw, 1.02rem);
    }

    .chart-metric-val {
      white-space: normal;
      overflow-wrap: break-word;
    }

    /* Respect Reduce Motion */
    @media (prefers-reduced-motion: reduce) {
      :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
      }
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      .chart-bar {
        transform: scaleY(1) !important;
      }
    }

    @media print {
      body { background: #FFFFFF !important; color: #000000 !important; }
      .top-bar, .nav-bar, .no-print, .btn, .sticky-catat-bar, .top-progress-track { display: none !important; }
      .app-layout { padding-left: 0 !important; }
      .main-container { max-width: 100% !important; padding: 0 !important; }
      .card, .card-hero { box-shadow: none !important; border: 1px solid #CCCCCC !important; break-inside: avoid; color: #000 !important; background: #FFF !important; }
    }
  </style>
</head>
<body>

  <!-- ==========================================================================
       CUSTOM BESPOKE SVG SPRITE
       ========================================================================== -->
  <svg style="display:none;" aria-hidden="true">
    <defs>
      <symbol id="ic-brand-mark" viewBox="0 0 40 24">
        <rect x="1.5" y="2.5" width="37" height="19" rx="4.5" fill="none" stroke="currentColor" stroke-width="2"/>
        <text x="20" y="13" dominant-baseline="middle" text-anchor="middle" font-family="Inter, sans-serif" font-weight="800" font-size="9.5" letter-spacing="0.5" fill="currentColor" stroke="none">LOGO</text>
      </symbol>
      <symbol id="ic-home" viewBox="0 0 24 24">
        <path d="M3.5 10.2L12 3l8.5 7.2v9.3a1.5 1.5 0 0 1-1.5 1.5h-4.5v-5.5a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1V21H5a1.5 1.5 0 0 1-1.5-1.5v-9.3z"/>
      </symbol>
      <symbol id="ic-rekap" viewBox="0 0 24 24">
        <rect x="3.5" y="12" width="4.5" height="8.5" rx="1.2"/>
        <rect x="9.75" y="4" width="4.5" height="16.5" rx="1.2"/>
        <rect x="16" y="8.5" width="4.5" height="12" rx="1.2"/>
      </symbol>
      <symbol id="ic-plus" viewBox="0 0 24 24">
        <path d="M12 5v14M5 12h14"/>
      </symbol>
      <symbol id="ic-search" viewBox="0 0 24 24">
        <circle cx="10.8" cy="10.8" r="6.8"/>
        <path d="M16 16l4.5 4.5"/>
      </symbol>
      <symbol id="ic-hub" viewBox="0 0 24 24">
        <rect x="3" y="3" width="7.5" height="7.5" rx="2"/>
        <rect x="13.5" y="3" width="7.5" height="7.5" rx="2"/>
        <rect x="3" y="13.5" width="7.5" height="7.5" rx="2"/>
        <circle cx="17.25" cy="17.25" r="3.75"/>
      </symbol>
      <symbol id="ic-book" viewBox="0 0 24 24">
        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
        <path d="M8.5 7h7M8.5 11h4.5"/>
      </symbol>
      <symbol id="ic-grid" viewBox="0 0 24 24">
        <rect x="3" y="3" width="7.5" height="7.5" rx="2"/>
        <rect x="13.5" y="3" width="7.5" height="7.5" rx="2"/>
        <rect x="3" y="13.5" width="7.5" height="7.5" rx="2"/>
        <rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2"/>
      </symbol>
      <symbol id="ic-compare" viewBox="0 0 24 24">
        <path d="M7 4v16M3.5 7.5L7 4l3.5 3.5"/>
        <path d="M17 20V4m-3.5 12.5L17 20l3.5-3.5"/>
      </symbol>
      <symbol id="ic-settings" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="3.2"/>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
      </symbol>
      <symbol id="ic-arrow-up" viewBox="0 0 24 24">
        <path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/>
      </symbol>
      <symbol id="ic-arrow-down" viewBox="0 0 24 24">
        <path d="M12 5v14M18.5 12.5L12 19l-6.5-6.5"/>
      </symbol>
      <symbol id="ic-trend-up" viewBox="0 0 24 24">
        <path d="M3 17l6-6 4 4 8-8"/>
        <path d="M15 7h6v6"/>
      </symbol>
      <symbol id="ic-trend-down" viewBox="0 0 24 24">
        <path d="M3 7l6 6 4-4 8 8"/>
        <path d="M15 17h6v-6"/>
      </symbol>
      <symbol id="ic-alert" viewBox="0 0 24 24">
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
        <path d="M12 9v4M12 17h.01"/>
      </symbol>
      <symbol id="ic-check" viewBox="0 0 24 24">
        <path d="M20 6.5L9.5 17 4.5 12"/>
      </symbol>
      <symbol id="ic-refresh" viewBox="0 0 24 24">
        <path d="M20.5 4v5.5H15"/>
        <path d="M3.5 20v-5.5H9"/>
        <path d="M4.8 9A8 8 0 0 1 18.5 6.2L20.5 9.5M19.2 15A8 8 0 0 1 5.5 17.8L3.5 14.5"/>
      </symbol>
      <symbol id="ic-trash" viewBox="0 0 24 24">
        <path d="M3.5 6h17M18.5 6v13.5a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V6m3 0V4a1.5 1.5 0 0 1 1.5-1.5h4A1.5 1.5 0 0 1 15.5 4v2"/>
        <path d="M10 11v5M14 11v5"/>
      </symbol>
      <symbol id="ic-close" viewBox="0 0 24 24">
        <path d="M18 6L6 18M6 6l12 12"/>
      </symbol>
      <symbol id="ic-chevron-left" viewBox="0 0 24 24">
        <path d="M15 18l-6-6 6-6"/>
      </symbol>
      <symbol id="ic-chevron-right" viewBox="0 0 24 24">
        <path d="M9 18l6-6-6-6"/>
      </symbol>
      <symbol id="ic-calendar" viewBox="0 0 24 24">
        <rect x="3" y="4.5" width="18" height="16.5" rx="2.5"/>
        <path d="M16 2.5v4M8 2.5v4M3 10h18"/>
      </symbol>
      <symbol id="ic-lock" viewBox="0 0 24 24">
        <rect x="3.5" y="11" width="17" height="10.5" rx="2.5"/>
        <path d="M7.5 11V7a4.5 4.5 0 0 1 9 0v4"/>
        <circle cx="12" cy="16" r="1.2"/>
      </symbol>
      <symbol id="ic-cash" viewBox="0 0 24 24">
        <rect x="2" y="5.5" width="20" height="13" rx="2.5"/>
        <circle cx="12" cy="12" r="2.8"/>
        <path d="M5.5 9.5h.01M18.5 14.5h.01"/>
      </symbol>
      <symbol id="ic-qris" viewBox="0 0 24 24">
        <rect x="3" y="3" width="6.5" height="6.5" rx="1.2"/>
        <rect x="14.5" y="3" width="6.5" height="6.5" rx="1.2"/>
        <rect x="3" y="14.5" width="6.5" height="6.5" rx="1.2"/>
        <path d="M14.5 14.5h2.5v2.5h-2.5zM18.5 18.5h2.5v2.5h-2.5zM18.5 14.5h2.5M14.5 19.5h2.5"/>
      </symbol>
      <symbol id="ic-kupon" viewBox="0 0 24 24">
        <path d="M2.5 9a3 3 0 0 1 0 6v2.5a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V15a3 3 0 0 1 0-6V6.5a2 2 0 0 0-2-2h-15a2 2 0 0 0-2 2Z"/>
        <path d="M13 5.5v2M13 16.5v2M13 11v2"/>
      </symbol>
      <symbol id="ic-unpaid" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="9.5"/>
        <path d="M12 6.5V12l3.8 2.2"/>
      </symbol>
      <symbol id="ic-kasbon" viewBox="0 0 24 24">
        <rect x="4" y="3" width="16" height="18" rx="2.5"/>
        <path d="M8.5 8h7M8.5 12h7M8.5 16h4"/>
      </symbol>
      <symbol id="ic-selisih" viewBox="0 0 24 24">
        <path d="M12 2.5c5.25 0 9.5 4.25 9.5 9.5s-4.25 9.5-9.5 9.5-9.5-4.25-9.5-9.5S6.75 2.5 12 2.5z"/>
        <path d="M8.5 10h7M8.5 14h7"/>
      </symbol>
      <symbol id="ic-warn" viewBox="0 0 24 24">
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
        <path d="M12 9v4M12 17h.01"/>
      </symbol>
      <symbol id="ic-fail" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="9.5"/>
        <path d="M15 9l-6 6M9 9l6 6"/>
      </symbol>
      <symbol id="ic-offline" viewBox="0 0 24 24">
        <path d="M2 2l20 20"/>
        <path d="M5.5 16.5a4.5 4.5 0 0 1-.4-8.98M10.7 5.3A6 6 0 0 1 18 10h1a4 4 0 0 1 3.8 5.2M16 19H6"/>
      </symbol>
      <symbol id="ic-dev" viewBox="0 0 24 24">
        <path d="M20 15.5a2.5 2.5 0 0 1-2.5 2.5H7.5L3 21.5V5.5A2.5 2.5 0 0 1 5.5 3h13A2.5 2.5 0 0 1 21 5.5v10z"/>
        <path d="M8 9h8M8 13h5"/>
      </symbol>
      <symbol id="ic-sun" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="4.2"/>
        <path d="M12 2v2.2M12 19.8V22M4.93 4.93l1.55 1.55M17.52 17.52l1.55 1.55M2 12h2.2M19.8 12H22M6.48 17.52l-1.55 1.55M19.07 4.93l-1.55 1.55"/>
      </symbol>
      <symbol id="ic-moon" viewBox="0 0 24 24">
        <path d="M20.8 13.2A8.8 8.8 0 1 1 10.8 3.2a6.8 6.8 0 0 0 10 10z"/>
      </symbol>
      <symbol id="ic-empty" viewBox="0 0 24 24">
        <rect x="3" y="4" width="18" height="16" rx="3" stroke-dasharray="3 3"/>
        <circle cx="12" cy="11" r="2.5"/>
        <path d="M8.5 16c1-1.5 2.2-2 3.5-2s2.5.5 3.5 2"/>
      </symbol>
    </defs>
  </svg>

  <!-- ==========================================================================
       PART 1 OF LOADING: THIN TOP GRADIENT PROGRESS BAR & STATUS PILL
       ========================================================================== -->
  <div id="top-progress-track" class="top-progress-track" aria-hidden="true">
    <div class="top-progress-bar"></div>
  </div>

  <div id="network-status-pill" class="network-status-pill" role="status" aria-live="polite">
    <span class="status-pulse-dot" aria-hidden="true"></span>
    <span id="network-status-text">Memperbarui data…</span>
  </div>

  <!-- ==========================================================================
       DYNAMIC ISLAND NOTIFICATION CAPSULE
       ========================================================================== -->
  <div id="toast-banner" class="dynamic-island" role="status" aria-live="polite">
    <span class="dynamic-island-badge">
      <svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">
        <path id="toast-icon-path" d="M20 6.5L9.5 17 4.5 12" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
    <span id="toast-text">Siap</span>
  </div>

  <!-- ==========================================================================
       LIQUID GLASS PIN SCREEN & WELCOME CARD OVERLAY
       ========================================================================== -->
  <div id="pin-lock-overlay" class="pin-lock-overlay" role="dialog" aria-modal="true" aria-labelledby="pin-lock-title">
    <!-- PIN Keypad View -->
    <div id="pin-pad-view" class="pin-lock-card">
      <div style="display:inline-flex; align-items:center; justify-content:center; min-width:64px; height:48px; padding:0 0.65rem; border-radius:14px; background-color:var(--bg-subtle); color:var(--accent); border:1px solid var(--border-hairline); margin-bottom:0.85rem;">
        <span class="logo-box-mark logo-lg">LOGO</span>
      </div>
      <h1 id="pin-lock-title" data-client-name style="font-size:1.2rem; font-weight:800; letter-spacing:-0.02em;">Client's Name</h1>
      <p style="font-size:0.84rem; color:var(--text-sec); margin-top:0.25rem;">Masukkan 6 digit PIN untuk membuka akses laporan</p>

      <div id="pin-dots-container" class="pin-dots-row" aria-live="polite" aria-label="Indikator digit PIN">
        <span class="pin-dot"></span>
        <span class="pin-dot"></span>
        <span class="pin-dot"></span>
        <span class="pin-dot"></span>
        <span class="pin-dot"></span>
        <span class="pin-dot"></span>
      </div>

      <div id="pin-lock-error" style="display:none; align-items:center; justify-content:center; gap:0.35rem; color:var(--diff-neg); font-size:0.8125rem; font-weight:700; margin-bottom:0.5rem;" role="alert">
        <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-fail"/></svg>
        <span id="pin-lock-error-text">PIN salah. Periksa kembali PIN akses.</span>
      </div>

      <div class="pin-numpad" role="group" aria-label="Papan tombol angka PIN">
        <button type="button" class="pin-key" data-pin-digit="1" aria-label="Angka 1">1</button>
        <button type="button" class="pin-key" data-pin-digit="2" aria-label="Angka 2">2</button>
        <button type="button" class="pin-key" data-pin-digit="3" aria-label="Angka 3">3</button>
        <button type="button" class="pin-key" data-pin-digit="4" aria-label="Angka 4">4</button>
        <button type="button" class="pin-key" data-pin-digit="5" aria-label="Angka 5">5</button>
        <button type="button" class="pin-key" data-pin-digit="6" aria-label="Angka 6">6</button>
        <button type="button" class="pin-key" data-pin-digit="7" aria-label="Angka 7">7</button>
        <button type="button" class="pin-key" data-pin-digit="8" aria-label="Angka 8">8</button>
        <button type="button" class="pin-key" data-pin-digit="9" aria-label="Angka 9">9</button>
        <button type="button" class="pin-key pin-key-action" data-pin-action="clear" aria-label="Ulangi input PIN">Ulang</button>
        <button type="button" class="pin-key" data-pin-digit="0" aria-label="Angka 0">0</button>
        <button type="button" class="pin-key pin-key-action" data-pin-action="backspace" aria-label="Hapus satu digit PIN">Hapus</button>
      </div>
    </div>

    <!-- Welcome Glass Card View (Shown after PIN while waiting for the single response) -->
    <div id="welcome-card-view" class="pin-lock-card" style="display:none;" aria-live="polite">
      <div class="welcome-glass-logo" aria-hidden="true">
        <span class="logo-box-mark logo-lg">LOGO</span>
      </div>
      <h2 data-client-name style="font-size:1.2rem; font-weight:800; letter-spacing:-0.02em;">Client's Name</h2>
      <p id="welcome-loading-text" style="font-size:0.875rem; font-weight:600; color:var(--text-sec); margin-top:0.45rem;">
        Menyiapkan laporan hari ini…
      </p>
    </div>
  </div>

  <!-- ==========================================================================
       TOP UTILITY BAR (CLOUD INDICATOR & FIXED SIDEBAR OFFSET)
       ========================================================================== -->
  <header class="top-bar">
    <div class="top-bar-left">
      <div class="top-brand-row">
        <button type="button" id="brand-header-badge" class="brand-header-pill" aria-label="Identitas bisnis, tahan 1,5 detik atau ketuk 5 kali untuk membuka Dev Console" title="Tahan 1,5 detik atau ketuk 5x cepat untuk membuka Dev Console">
          <span class="brand-hold-progress" aria-hidden="true"></span>
          <span class="logo-box-mark" style="color:var(--accent);" aria-hidden="true">LOGO</span>
          <span data-client-name>Client's Name</span>
        </button>

        <!-- Cloud Connection Indicator (Inline SVG Only, Online Check / Offline-Demo Cross) -->
        <span id="webhook-mode-banner" class="cloud-status-indicator" role="img" aria-label="Mode Demo atau Offline" title="Mode Demo atau Offline">
          <!-- Populated dynamically by updateTopModeBanner() -->
        </span>
      </div>
      <span id="sync-time-text" class="meta-time">Diperbarui --:-- WIB</span>
    </div>

    <div class="top-bar-right">
      <button type="button" id="btn-dev-console-top" class="btn btn-subtle top-bar-btn-compact" data-nav="pengaturan" aria-label="Buka Dev Console" style="display:none; border-color:var(--accent-border) !important; color:var(--accent) !important;">
        <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-settings"/></svg>
        <span>Dev</span>
      </button>
      <button type="button" id="btn-open-more" class="btn btn-subtle top-bar-btn-compact" aria-label="Buka menu analitik dan bantuan">
        <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-hub"/></svg>
        <span>Menu</span>
      </button>
      <button type="button" id="btn-theme-toggle" class="btn btn-subtle top-bar-btn-compact" aria-label="Ganti mode warna tampilan">
        <svg class="icon icon-sm" aria-hidden="true"><use id="theme-toggle-icon" href="#ic-moon"/></svg>
        <span id="theme-toggle-label" class="hide-label-mobile">Gelap</span>
      </button>
      <button type="button" id="btn-reload-top" class="btn btn-subtle top-bar-btn-compact" aria-label="Muat ulang data laporan">
        <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-refresh"/></svg>
        <span class="hide-label-mobile">Muat ulang</span>
      </button>
      <button type="button" id="btn-lock-app" class="btn btn-subtle top-bar-btn-compact" aria-label="Kunci aplikasi">
        <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-lock"/></svg>
      </button>
    </div>
  </header>

  <div class="app-layout">
    <!-- FLOATING NAVIGATION DOCK (MOBILE) & SIDEBAR (DESKTOP) -->
    <nav class="nav-bar" aria-label="Menu Utama">
      <div class="sidebar-brand">
        <div style="min-width:44px; height:36px; padding:0 0.35rem; border-radius:10px; background-color:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
          <span class="logo-box-mark" aria-hidden="true">LOGO</span>
        </div>
        <div style="min-width:0;">
          <div data-client-name style="font-size:0.9rem; font-weight:800; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">Client's Name</div>
          <div style="font-size:0.72rem; color:var(--text-sec);">Kasir &amp; Laporan Keuangan</div>
        </div>
      </div>

      <span class="sidebar-section-label">Operasional Kasir</span>
      <ul class="nav-rail">
        <div id="mobile-nav-pill" class="nav-active-pill" aria-hidden="true">
          <div class="nav-active-pill-inner"></div>
        </div>

        <li>
          <button type="button" class="nav-btn" data-nav="beranda" data-nav-idx="0" aria-current="page" aria-label="Beranda Hari Ini">
            <svg class="icon" aria-hidden="true"><use href="#ic-home"/></svg>
            <span>Beranda</span>
          </button>
        </li>
        <li>
          <button type="button" class="nav-btn" data-nav="rekap" data-nav-idx="1" aria-label="Rekap Bulanan">
            <svg class="icon" aria-hidden="true"><use href="#ic-rekap"/></svg>
            <span>Rekap</span>
          </button>
        </li>
        <li>
          <button type="button" class="nav-btn nav-btn-catat" data-nav="catat" data-nav-idx="2" aria-label="Catat Transaksi">
            <span class="catat-badge">
              <svg class="icon icon-sm morph-svg" viewBox="0 0 24 24" aria-hidden="true">
                <path class="morph-line-1" d="M12 5v14"/>
                <path class="morph-line-2" d="M5 12h14"/>
              </svg>
            </span>
            <span>Catat</span>
          </button>
        </li>
        <li>
          <button type="button" class="nav-btn" data-nav="cari" data-nav-idx="3" aria-label="Cari Transaksi">
            <svg class="icon" aria-hidden="true"><use href="#ic-search"/></svg>
            <span>Cari</span>
          </button>
        </li>

        <li class="desktop-nav-only">
          <span class="sidebar-section-label" style="padding-left:0.5rem;">Analitik &amp; Bantuan</span>
        </li>
        <li class="desktop-nav-only">
          <button type="button" class="nav-btn" data-nav="akumulatif" aria-label="Rekap Akumulatif">
            <svg class="icon" aria-hidden="true"><use href="#ic-book"/></svg>
            <span>Rekap Akumulatif</span>
          </button>
        </li>
        <li class="desktop-nav-only">
          <button type="button" class="nav-btn" data-nav="kategori" aria-label="Ringkasan Per Kategori">
            <svg class="icon" aria-hidden="true"><use href="#ic-grid"/></svg>
            <span>Per Kategori</span>
          </button>
        </li>
        <li class="desktop-nav-only">
          <button type="button" class="nav-btn" data-nav="bandingkan" aria-label="Bandingkan Bulan">
            <svg class="icon" aria-hidden="true"><use href="#ic-compare"/></svg>
            <span>Bandingkan Bulan</span>
          </button>
        </li>
        <li class="desktop-nav-only">
          <button type="button" class="nav-btn" data-nav="bantuan" aria-label="Pusat Bantuan Developer">
            <svg class="icon" aria-hidden="true"><use href="#ic-dev"/></svg>
            <span>Pusat Bantuan Dev</span>
          </button>
        </li>
      </ul>
    </nav>

    <!-- MAIN CONTENT CONTAINER -->
    <main id="main-content" class="main-container" tabindex="-1">
      <div id="view-region" class="view-region"></div>
    </main>
  </div>

  <!-- BOTTOM SHEET MODAL -->
  <dialog id="sheet-modal" class="bottom-sheet" aria-labelledby="sheet-modal-title">
    <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid var(--border-hairline);">
      <h3 id="sheet-modal-title" style="font-size:1.05rem; font-weight:800;">Analitik &amp; Bantuan</h3>
      <button type="button" id="btn-close-sheet" class="btn btn-subtle" aria-label="Tutup panel" style="min-height:44px; padding:0.4rem 0.85rem; font-size:0.8125rem;">
        <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-close"/></svg>
        <span>Tutup</span>
      </button>
    </div>
    <div id="sheet-modal-body"></div>
  </dialog>

  <script>
    /* ==========================================================================
       0. CLIENT NAME CONSTANT & DEMO SIMULATION PIN
       ========================================================================== */
    const clientName = "Client's Name";

    const SIMULATION_PINS = {
      OWNER: '123456',
      ENABLE_SIMULATION_BYPASS: true
    };

    /* ==========================================================================
       1. BUSINESS CONSTANTS & DATE UTILITIES
       ========================================================================== */
    function showLogin() {
      // Retained for compatibility.
    }

    const INCOME_COUPON_ALLOWED = ['CARWASH MEDIUM', 'CARWASH LARGE', 'MOTOR'];
    const INCOME_NO_COUPON = ['DETAILING', 'PARFUM', 'VARIASI'];
    const INCOME_CATEGORIES = [...INCOME_COUPON_ALLOWED, ...INCOME_NO_COUPON];
    const EXPENSE_CATEGORIES = ['OPERASIONAL', 'TOKEN LISTRIK', 'KONSUMSI', 'BONUS'];
    const KASBON_CATEGORY = 'KASBON';
    const ALL_CATEGORIES = [...INCOME_CATEGORIES, ...EXPENSE_CATEGORIES, KASBON_CATEGORY];

    const VALID_METHODS_BY_CATEGORY = {
      'CARWASH MEDIUM': ['CASH', 'QRIS', 'KUPON', 'BELUM DIBAYAR'],
      'CARWASH LARGE': ['CASH', 'QRIS', 'KUPON', 'BELUM DIBAYAR'],
      'MOTOR': ['CASH', 'QRIS', 'KUPON', 'BELUM DIBAYAR'],
      'DETAILING': ['CASH', 'QRIS', 'BELUM DIBAYAR'],
      'PARFUM': ['CASH', 'QRIS', 'BELUM DIBAYAR'],
      'VARIASI': ['CASH', 'QRIS', 'BELUM DIBAYAR'],
      'OPERASIONAL': ['CASH', 'QRIS'],
      'TOKEN LISTRIK': ['CASH', 'QRIS'],
      'KONSUMSI': ['CASH', 'QRIS'],
      'BONUS': ['CASH', 'QRIS'],
      'KASBON': ['CASH']
    };

    const HARI_INDONESIA = ['MINGGU', 'SENIN', 'SELASA', 'RABU', 'KAMIS', 'JUMAT', 'SABTU'];
    const HARI_TITLE = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const NAMA_BULAN_PANJANG = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    const NAMA_BULAN_PENDEK = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];

    function getTodayWIB() {
      try {
        const parts = new Intl.DateTimeFormat('en-GB', {
          timeZone: 'Asia/Jakarta',
          day: '2-digit',
          month: '2-digit',
          year: 'numeric'
        }).formatToParts(new Date());
        const d = parts.find(p => p.type === 'day').value;
        const m = parts.find(p => p.type === 'month').value;
        const y = parts.find(p => p.type === 'year').value;
        return `${d}/${m}/${y}`;
      } catch (e) {
        return '29/10/2026';
      }
    }

    function getYesterdayWIB(todayStr) {
      const baseStr = todayStr || getTodayWIB();
      const parsed = parseDateDDMMYYYY(baseStr);
      if (!parsed) return '28/10/2026';
      const d = new Date(parsed.year, parsed.month - 1, parsed.day);
      d.setDate(d.getDate() - 1);
      const dd = String(d.getDate()).padStart(2, '0');
      const mm = String(d.getMonth() + 1).padStart(2, '0');
      const yyyy = d.getFullYear();
      return `${dd}/${mm}/${yyyy}`;
    }

    function formatGreetingDateWIB(dateDDMMYYYY) {
      const parsed = parseDateDDMMYYYY(dateDDMMYYYY);
      if (!parsed) return dateDDMMYYYY;
      const d = new Date(parsed.year, parsed.month - 1, parsed.day);
      const dayTitle = HARI_TITLE[d.getDay()] || parsed.dayName;
      const monthName = NAMA_BULAN_PANJANG[parsed.month - 1] || '';
      return `${dayTitle}, ${parsed.day} ${monthName} ${parsed.year}`;
    }

    function buildDynamicMonthsAvailable() {
      let refYear = 2026;
      let refMonth = 10;
      try {
        const parts = new Intl.DateTimeFormat('en-GB', {
          timeZone: 'Asia/Jakarta',
          month: '2-digit',
          year: 'numeric'
        }).formatToParts(new Date());
        refMonth = parseInt(parts.find(p => p.type === 'month').value, 10);
        refYear = parseInt(parts.find(p => p.type === 'year').value, 10);
      } catch (e) {
        refMonth = 10;
        refYear = 2026;
      }

      const list = [];
      for (let offset = 5; offset >= 0; offset--) {
        const d = new Date(refYear, refMonth - 1 - offset, 1);
        const m = d.getMonth() + 1;
        const y = d.getFullYear();
        const mm = String(m).padStart(2, '0');
        list.push({
          key: `${mm}/${y}`,
          label: `${NAMA_BULAN_PANJANG[m - 1]} ${y}`,
          short: NAMA_BULAN_PENDEK[m - 1],
          month: m,
          year: y
        });
      }
      return list;
    }

    const MONTHS_AVAILABLE = buildDynamicMonthsAvailable();

    /* ==========================================================================
       2. REALISTIC DEMO DATA (WITH TODAY, YESTERDAY, SEARCH KEYWORDS & 2 ISSUE ROWS)
       ========================================================================== */
    function buildInitialDummyData() {
      const rows = [];
      let rowCounter = 2;

      const todayStr = getTodayWIB();
      const yesterdayStr = getYesterdayWIB(todayStr);
      const todayParsed = parseDateDDMMYYYY(todayStr);

      const monthlySeeds = MONTHS_AVAILABLE.map((mObj, idx) => ({
        m: String(mObj.month).padStart(2, '0'),
        y: String(mObj.year),
        key: mObj.key,
        baseCount: 24 + (idx % 5)
      }));

      const sampleTemplates = [
        { desc: 'INNOVA REBORN', cat: 'CARWASH MEDIUM', amt: 50000, method: 'CASH' },
        { desc: 'AVANZA VELOZ', cat: 'CARWASH MEDIUM', amt: 50000, method: 'QRIS' },
        { desc: 'HONDA BRIO', cat: 'CARWASH MEDIUM', amt: 45000, method: 'CASH' },
        { desc: 'PAJERO SPORT', cat: 'CARWASH LARGE', amt: 65000, method: 'QRIS' },
        { desc: 'FORTUNER VRZ', cat: 'CARWASH LARGE', amt: 65000, method: 'CASH' },
        { desc: 'NMAX HITAM', cat: 'MOTOR', amt: 20000, method: 'CASH' },
        { desc: 'VARIO 160', cat: 'MOTOR', amt: 20000, method: 'QRIS' },
        { desc: 'INNOVA ZENIX', cat: 'CARWASH MEDIUM', amt: 0, method: 'KUPON' },
        { desc: 'PAJERO PUTIH', cat: 'CARWASH LARGE', amt: 0, method: 'KUPON' },
        { desc: 'PCX MERAH', cat: 'MOTOR', amt: 0, method: 'KUPON' },
        { desc: 'XPANDER CROSS', cat: 'CARWASH MEDIUM', amt: 50000, method: 'BELUM DIBAYAR' },
        { desc: 'CRV PRESTIGE', cat: 'DETAILING', amt: 350000, method: 'QRIS' },
        { desc: 'ALPHARD HITAM', cat: 'DETAILING', amt: 450000, method: 'CASH' },
        { desc: 'PARFUM KOPI BALI', cat: 'PARFUM', amt: 35000, method: 'CASH' },
        { desc: 'BELI KIT BAN KILAP', cat: 'OPERASIONAL', amt: 65000, method: 'CASH' },
        { desc: 'BELI KIT DASHBOARD MOBIL', cat: 'OPERASIONAL', amt: 55000, method: 'CASH' },
        { desc: 'GALON AIR MINUM RUANG TUNGGU', cat: 'KONSUMSI', amt: 40000, method: 'CASH' },
        { desc: 'BELI SHAMPOO SNOW WASH', cat: 'OPERASIONAL', amt: 140000, method: 'CASH' },
        { desc: 'ISI TOKEN LISTRIK POMPA AIR', cat: 'TOKEN LISTRIK', amt: 200000, method: 'QRIS' },
        { desc: 'MAKAN AYAM TIM SIANG', cat: 'KONSUMSI', amt: 95000, method: 'CASH' },
        { desc: 'MAKAN SIANG JUMAT', cat: 'KONSUMSI', amt: 120000, method: 'CASH' },
        { desc: 'BONUS CUCI RAMAI AKHIR PEKAN', cat: 'BONUS', amt: 150000, method: 'CASH' },
        { desc: 'ANDI', cat: 'KASBON', amt: 50000, method: 'CASH' },
        { desc: 'WAWAN', cat: 'KASBON', amt: 75000, method: 'CASH' },
        { desc: 'HRV SE', cat: 'CARWASH MEDIUM', amt: 50000, method: 'CASH' },
        { desc: 'ERTIGA HYBRID', cat: 'CARWASH MEDIUM', amt: 50000, method: 'QRIS' },
        { desc: 'LAND CRUISER', cat: 'CARWASH LARGE', amt: 75000, method: 'CASH' }
      ];

      monthlySeeds.forEach((seed, mIdx) => {
        const isCurrentWibMonth = todayParsed && seed.key === todayParsed.keyMMYYYY;

        if (isCurrentWibMonth) {
          // For the current WIB month, seed daily transactions progressively only for days BEFORE yesterday/today (1 .. today.day - 2)
          // Future days after today are NEVER pre-populated so the daily chart grows as new days are input!
          const maxPastDay = Math.max(0, todayParsed.day - 2);
          for (let d = 1; d <= maxPastDay; d++) {
            const dayStr = `${String(d).padStart(2, '0')}/${seed.m}/${seed.y}`;
            const tplIn = sampleTemplates[(d * 2) % 7];
            rows.push({
              rowNumber: rowCounter++,
              date: dayStr,
              description: tplIn.desc,
              category: tplIn.cat,
              amount: tplIn.amt > 0 ? tplIn.amt : 50000,
              method: tplIn.method === 'KUPON' ? 'CASH' : tplIn.method
            });

            const tplIn2 = sampleTemplates[(d + 3) % 6];
            rows.push({
              rowNumber: rowCounter++,
              date: dayStr,
              description: tplIn2.desc,
              category: tplIn2.cat,
              amount: tplIn2.amt > 0 ? tplIn2.amt : 65000,
              method: 'QRIS'
            });

            if (d % 2 === 0) {
              const expTemplates = [
                { desc: 'BELI KIT BAN KILAP', cat: 'OPERASIONAL', amt: 65000, method: 'CASH' },
                { desc: 'MAKAN SIANG TIM', cat: 'KONSUMSI', amt: 60000, method: 'CASH' },
                { desc: 'BELI KIT DASHBOARD MOBIL', cat: 'OPERASIONAL', amt: 55000, method: 'CASH' },
                { desc: 'GALON AIR MINUM RUANG TUNGGU', cat: 'KONSUMSI', amt: 40000, method: 'CASH' }
              ];
              const expTpl = expTemplates[(d / 2) % expTemplates.length];
              rows.push({
                rowNumber: rowCounter++,
                date: dayStr,
                description: expTpl.desc,
                category: expTpl.cat,
                amount: expTpl.amt,
                method: expTpl.method
              });
            }
          }
          return;
        }

        for (let i = 0; i < seed.baseCount; i++) {
          if (mIdx === 0 && i === 16) {
            rows.push({
              rowNumber: rowCounter++,
              date: `32/13/${seed.y}`,
              description: 'AVANZA SILVER',
              category: 'CARWASH MEDIUM',
              amount: 50000,
              method: 'CASH'
            });
          }
          if (mIdx === 3 && i === 12) {
            rows.push({
              rowNumber: rowCounter++,
              date: `14/${seed.m}/${seed.y}`,
              description: 'FORTUNER HITAM',
              category: 'CARWASH LARGE',
              amount: 'ENAM PULUH LIMA RIBU',
              method: 'CASH'
            });
          }

          const tpl = sampleTemplates[(i + mIdx * 3) % sampleTemplates.length];
          const dayNum = ((i % 24) + 1).toString().padStart(2, '0');
          const candidateDate = `${dayNum}/${seed.m}/${seed.y}`;
          if (candidateDate === todayStr || candidateDate === yesterdayStr) {
            continue;
          }

          let finalAmt = tpl.amt;
          if (tpl.method !== 'KUPON' && finalAmt > 0) {
            const variation = ((i % 3) === 0 && tpl.cat === 'DETAILING') ? 50000 * mIdx : 0;
            finalAmt = tpl.amt + variation;
          }

          rows.push({
            rowNumber: rowCounter++,
            date: candidateDate,
            description: tpl.desc,
            category: tpl.cat,
            amount: finalAmt,
            method: tpl.method
          });
        }
      });

      // Yesterday's transactions for accurate comparison on Beranda
      const yesterdaySeeds = [
        { desc: 'INNOVA REBORN HITAM', cat: 'CARWASH MEDIUM', amt: 50000, method: 'CASH' },
        { desc: 'PAJERO SPORT DAKAR', cat: 'CARWASH LARGE', amt: 65000, method: 'QRIS' },
        { desc: 'VARIO 160 PUTIH', cat: 'MOTOR', amt: 20000, method: 'CASH' },
        { desc: 'BELI KIT BAN & SPONS', cat: 'OPERASIONAL', amt: 55000, method: 'CASH' },
        { desc: 'HONDA JAZZ RS', cat: 'CARWASH MEDIUM', amt: 50000, method: 'CASH' },
        { desc: 'MAKAN SIANG TIM', cat: 'KONSUMSI', amt: 60000, method: 'CASH' }
      ];

      yesterdaySeeds.forEach(item => {
        rows.push({
          rowNumber: rowCounter++,
          date: yesterdayStr,
          description: item.desc,
          category: item.cat,
          amount: item.amt,
          method: item.method
        });
      });

      // Today's transactions in WIB for Beranda
      const todaySeeds = [
        { desc: 'INNOVA ZENIX HITAM', cat: 'CARWASH MEDIUM', amt: 50000, method: 'CASH' },
        { desc: 'FORTUNER GR SPORT', cat: 'CARWASH LARGE', amt: 65000, method: 'QRIS' },
        { desc: 'BELI KIT DASHBOARD & MICROFIBER', cat: 'OPERASIONAL', amt: 45000, method: 'CASH' },
        { desc: 'AVANZA VELOZ PUTIH', cat: 'CARWASH MEDIUM', amt: 50000, method: 'QRIS' },
        { desc: 'NMAX TURBO', cat: 'MOTOR', amt: 20000, method: 'CASH' },
        { desc: 'BRIO RS KUNING', cat: 'CARWASH MEDIUM', amt: 0, method: 'KUPON' },
        { desc: 'XPANDER HITAM', cat: 'CARWASH MEDIUM', amt: 50000, method: 'BELUM DIBAYAR' },
        { desc: 'ANDI', cat: 'KASBON', amt: 50000, method: 'CASH' },
        { desc: 'MAKAN AYAM KARYAWAN', cat: 'KONSUMSI', amt: 50000, method: 'CASH' },
        { desc: 'CRV TURBO PRESTIGE', cat: 'DETAILING', amt: 300000, method: 'QRIS' }
      ];

      todaySeeds.forEach(item => {
        rows.push({
          rowNumber: rowCounter++,
          date: todayStr,
          description: item.desc,
          category: item.cat,
          amount: item.amt,
          method: item.method
        });
      });

      return rows;
    }

    const _memoryStore = {
      transactions: buildInitialDummyData()
    };

    /* ==========================================================================
       3. CORE FORMATTING, VALIDATION & CALCULATION FUNCTIONS (SIGNATURES KEPT)
       ========================================================================== */
    const rpFormat = new Intl.NumberFormat('id-ID');

    function formatRp(val) {
      const n = Number(val) || 0;
      if (n < 0) return `-Rp ${rpFormat.format(Math.abs(Math.round(n)))}`;
      return `Rp ${rpFormat.format(Math.round(n))}`;
    }

    function formatSignedRp(val) {
      const n = Math.round(Number(val) || 0);
      if (n > 0) return `+Rp ${rpFormat.format(n)}`;
      if (n < 0) return `-Rp ${rpFormat.format(Math.abs(n))}`;
      return 'Rp 0';
    }

    function formatDotNumber(val) {
      const n = Number(val) || 0;
      return rpFormat.format(Math.round(Math.abs(n)));
    }

    function escapeHtml(str) {
      return String(str ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    }

    function parseDateDDMMYYYY(str) {
      if (typeof str !== 'string') return null;
      const trimmed = str.trim();
      const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(trimmed);
      if (!match) return null;

      const day = parseInt(match[1], 10);
      const month = parseInt(match[2], 10);
      const year = parseInt(match[3], 10);

      if (month < 1 || month > 12 || day < 1 || day > 31 || year < 2000 || year > 2100) {
        return null;
      }

      const d = new Date(year, month - 1, day);
      if (d.getFullYear() !== year || d.getMonth() !== month - 1 || d.getDate() !== day) {
        return null;
      }

      return {
        day,
        month,
        year,
        timestamp: d.getTime(),
        keyNum: year * 10000 + month * 100 + day,
        dayName: HARI_INDONESIA[d.getDay()],
        keyMMYYYY: `${String(month).padStart(2, '0')}/${year}`,
        shortYear: String(year).slice(-2),
        formatted: `${String(day).padStart(2, '0')}/${String(month).padStart(2, '0')}/${year}`
      };
    }

    function convertISOToDDMMYYYY(isoStr) {
      if (!isoStr || typeof isoStr !== 'string') return '';
      const parts = isoStr.split('-');
      if (parts.length !== 3) return '';
      return `${parts[2]}/${parts[1]}/${parts[0]}`;
    }

    function convertDDMMYYYYToISO(ddmmyyyy) {
      const parsed = parseDateDDMMYYYY(ddmmyyyy);
      if (!parsed) return '';
      return `${parsed.year}-${String(parsed.month).padStart(2, '0')}-${String(parsed.day).padStart(2, '0')}`;
    }

    function getCurrentWIBHour() {
      try {
        const hourStr = new Intl.DateTimeFormat('en-GB', {
          timeZone: 'Asia/Jakarta',
          hour: '2-digit',
          hour12: false
        }).format(new Date());
        return parseInt(hourStr, 10);
      } catch (e) {
        return 14;
      }
    }

    function generateSupportRefCode() {
      const now = new Date(Date.now() + 7 * 3600 * 1000);
      const yy = String(now.getUTCFullYear()).slice(2);
      const mm = String(now.getUTCMonth() + 1).padStart(2, '0');
      const dd = String(now.getUTCDate()).padStart(2, '0');
      const hh = String(now.getUTCHours()).padStart(2, '0');
      const mi = String(now.getUTCMinutes()).padStart(2, '0');
      const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
      const rand = chars[Math.floor(Math.random() * chars.length)] + chars[Math.floor(Math.random() * chars.length)];
      return `CN-${yy}${mm}${dd}-${hh}${mi}-${rand}`;
    }

    function inspectAllTransactions(rawRows) {
      const validDateRows = [];
      const dateIssues = [];
      const amountIssues = [];

      rawRows.forEach(row => {
        const parsedDate = parseDateDDMMYYYY(row.date);
        const rawAmt = row.amount;
        const isAmountValidNumber = typeof rawAmt === 'number' && !Number.isNaN(rawAmt) && rawAmt >= 0;

        if (!parsedDate) {
          dateIssues.push({
            rowNumber: row.rowNumber,
            reason: `Tanggal tidak terbaca ("${row.date}")`,
            raw: row
          });
          return;
        }

        let safeAmount = 0;
        let hasAmountIssue = false;
        if (!isAmountValidNumber) {
          hasAmountIssue = true;
          safeAmount = 0;
          amountIssues.push({
            rowNumber: row.rowNumber,
            reason: `Nominal tidak terbaca ("${rawAmt}"), dihitung Rp 0`,
            raw: row
          });
        } else {
          safeAmount = rawAmt;
        }

        validDateRows.push({
          ...row,
          parsedDate,
          safeAmount,
          hasAmountIssue
        });
      });

      return {
        validDateRows,
        dateIssues,
        amountIssues,
        allIssues: [...dateIssues, ...amountIssues]
      };
    }

    function calculateMetrics(rows) {
      let uangMasukCash = 0;
      let uangMasukQris = 0;
      let uangKeluar = 0;
      let uangKeluarCash = 0;
      let uangKeluarQris = 0;
      let kasbonTotal = 0;
      let kasbonCount = 0;
      let kuponCount = 0;
      let belumDibayarCount = 0;
      const totalTransaksi = rows.length;

      const incomeByCategory = {};
      INCOME_CATEGORIES.forEach(cat => {
        incomeByCategory[cat] = {
          count: 0,
          uangMasuk: 0,
          cash: 0,
          qris: 0,
          kuponCount: 0,
          belumDibayarCount: 0
        };
      });

      const expenseByCategory = {};
      EXPENSE_CATEGORIES.forEach(cat => {
        expenseByCategory[cat] = {
          count: 0,
          total: 0,
          cash: 0,
          qris: 0,
          byDescription: {}
        };
      });

      const kasbonRows = [];
      const kasbonByPerson = {};

      rows.forEach(r => {
        const cat = r.category;
        const method = r.method;
        const amt = Number(r.safeAmount !== undefined ? r.safeAmount : r.amount) || 0;

        if (INCOME_CATEGORIES.includes(cat)) {
          if (!incomeByCategory[cat]) {
            incomeByCategory[cat] = { count: 0, uangMasuk: 0, cash: 0, qris: 0, kuponCount: 0, belumDibayarCount: 0 };
          }
          const bucket = incomeByCategory[cat];
          bucket.count += 1;

          if (method === 'CASH') {
            uangMasukCash += amt;
            bucket.uangMasuk += amt;
            bucket.cash += amt;
          } else if (method === 'QRIS') {
            uangMasukQris += amt;
            bucket.uangMasuk += amt;
            bucket.qris += amt;
          } else if (method === 'KUPON') {
            kuponCount += 1;
            bucket.kuponCount += 1;
          } else if (method === 'BELUM DIBAYAR') {
            belumDibayarCount += 1;
            bucket.belumDibayarCount += 1;
          }
        } else if (EXPENSE_CATEGORIES.includes(cat)) {
          uangKeluar += amt;
          if (method === 'CASH') uangKeluarCash += amt;
          if (method === 'QRIS') uangKeluarQris += amt;

          if (!expenseByCategory[cat]) {
            expenseByCategory[cat] = { count: 0, total: 0, cash: 0, qris: 0, byDescription: {} };
          }
          const expBucket = expenseByCategory[cat];
          expBucket.count += 1;
          expBucket.total += amt;
          if (method === 'CASH') expBucket.cash += amt;
          if (method === 'QRIS') expBucket.qris += amt;

          const descKey = r.description || 'TANPA DESKRIPSI';
          if (!expBucket.byDescription[descKey]) {
            expBucket.byDescription[descKey] = { count: 0, total: 0 };
          }
          expBucket.byDescription[descKey].count += 1;
          expBucket.byDescription[descKey].total += amt;
        } else if (cat === KASBON_CATEGORY) {
          kasbonCount += 1;
          kasbonTotal += amt;
          kasbonRows.push(r);
          const nameKey = r.description || 'KARYAWAN';
          kasbonByPerson[nameKey] = (kasbonByPerson[nameKey] || 0) + amt;
        }
      });

      const uangMasuk = uangMasukCash + uangMasukQris;
      const selisihKasOperasional = uangMasuk - uangKeluar;

      return {
        uangMasuk,
        uangMasukCash,
        uangMasukQris,
        uangKeluar,
        uangKeluarCash,
        uangKeluarQris,
        selisihKasOperasional,
        totalTransaksi,
        kasbonTotal,
        kasbonCount,
        kasbonRows,
        kasbonByPerson,
        kuponCount,
        belumDibayarCount,
        incomeByCategory,
        expenseByCategory
      };
    }

    function filterByMonth(validRows, monthKey) {
      return validRows.filter(r => r.parsedDate.keyMMYYYY === monthKey);
    }

    function filterByDateRange(validRows, startDDMMYYYY, endDDMMYYYY) {
      const startParsed = startDDMMYYYY ? parseDateDDMMYYYY(startDDMMYYYY) : null;
      const endParsed = endDDMMYYYY ? parseDateDDMMYYYY(endDDMMYYYY) : null;

      return validRows.filter(r => {
        const key = r.parsedDate.keyNum;
        if (startParsed && key < startParsed.keyNum) return false;
        if (endParsed && key > endParsed.keyNum) return false;
        return true;
      });
    }

    function detectDateSpan(rows) {
      if (!rows || rows.length === 0) return '-';
      let minRow = rows[0];
      let maxRow = rows[0];
      rows.forEach(r => {
        if (r.parsedDate.keyNum < minRow.parsedDate.keyNum) minRow = r;
        if (r.parsedDate.keyNum > maxRow.parsedDate.keyNum) maxRow = r;
      });
      return `${minRow.parsedDate.formatted} s/d ${maxRow.parsedDate.formatted}`;
    }

    function parseFlexibleRupiahInput(rawText) {
      if (typeof rawText === 'number') return rawText;
      if (!rawText || typeof rawText !== 'string') return NaN;
      const trimmed = rawText.trim();
      if (trimmed === '') return NaN;
      if (trimmed.includes('-')) return -1;

      const cleaned = trimmed.replace(/rp/gi, '').replace(/[.,\s]/g, '');
      if (!/^\d+$/.test(cleaned)) return NaN;
      return parseInt(cleaned, 10);
    }

    function buildLegacyFormatPreview(dateDDMMYYYY, items) {
      const parsed = parseDateDDMMYYYY(dateDDMMYYYY) || parseDateDDMMYYYY(getTodayWIB());
      const header = `${parsed.dayName} ${String(parsed.day).padStart(2, '0')}/${String(parsed.month).padStart(2, '0')}/${parsed.shortYear}`;
      const lines = items.map((item, idx) => {
        const num = idx + 1;
        const desc = item.description.trim().toUpperCase().replace(/,/g, ' ');
        const amtDot = formatDotNumber(item.amount);
        return `${num}. ${desc}, ${item.category}, RP ${amtDot}, ${item.method}`;
      });
      return [header, ...lines].join('\n');
    }

    function validateSubmissionBatch() {
      const errors = [];
      const parsedDate = parseDateDDMMYYYY(state.formDate);
      if (!parsedDate) {
        errors.push('Header Tanggal tidak valid. Pilih tanggal kalender yang benar.');
      }
      if (state.formRows.length === 0) {
        errors.push('Belum ada transaksi di dalam daftar pengajuan.');
      }
      if (state.formRows.length > 30) {
        errors.push(`Pesan terlalu banyak transaksi (${state.formRows.length}). Maksimal 30 transaksi per pengajuan.`);
      }

      state.formRows.forEach((r, idx) => {
        const n = idx + 1;
        const desc = (r.description || '').trim();
        if (!desc) {
          errors.push(`Transaksi #${n}: Deskripsi kosong. Isi nama unit/keterangan (contoh: AVANZA).`);
        } else if (desc.includes(',')) {
          errors.push(`Transaksi #${n}: Deskripsi tidak boleh memuat koma (,) karena koma dipakai sebagai pemisah kolom.`);
        }

        const allowedMethods = VALID_METHODS_BY_CATEGORY[r.category] || [];
        if (!allowedMethods.includes(r.method)) {
          errors.push(`Transaksi #${n}: Metode ${r.method} tidak diizinkan untuk kategori ${r.category}.`);
        }

        if (r.method === 'KUPON') {
          const val = r.amountRaw === '' ? 0 : parseFlexibleRupiahInput(r.amountRaw);
          if (val !== 0) {
            errors.push(`Transaksi #${n}: Metode KUPON wajib bernilai Rp 0.`);
          }
        } else {
          const val = parseFlexibleRupiahInput(r.amountRaw);
          if (Number.isNaN(val) || val < 0) {
            errors.push(`Transaksi #${n}: Nominal "${r.amountRaw}" tidak valid. Gunakan angka positif (contoh: 50000).`);
          }
        }
      });

      return errors;
    }

    /* ==========================================================================
       4. APPLICATION STATE, 5-HOUR AUTO-LOCK & NETWORK LOADING CONTROLS
       ========================================================================== */
    const DEFAULT_CFG = {
      mode: 'demo',
      get: '',
      post: '',
      dev: '',
    };

    const latestMonthKey = MONTHS_AVAILABLE[MONTHS_AVAILABLE.length - 1].key;
    const prevMonthKey = MONTHS_AVAILABLE[Math.max(0, MONTHS_AVAILABLE.length - 2)].key;

    const state = {
      isAuthenticated: false,
      authRole: null,
      pinBuffer: '',
      pinVerifying: false,
      devUnlocked: false,

      screen: 'beranda',
      activeWibToday: getTodayWIB(),
      selectedDailyChartDate: null,

      selectedMonth: latestMonthKey,
      hoveredChartMonth: null,
      rekapTab: 'ringkasan',
      rekapPage: 1,

      formDate: getTodayWIB(),
      formRows: [
        { id: 1, description: 'INNOVA REBORN', category: 'CARWASH MEDIUM', amountRaw: '50.000', method: 'CASH' }
      ],
      formNextId: 2,
      formErrors: [],
      formSaveErrorBanner: '',
      formStep: 'input',
      formSubmitting: false,
      formRefPengajuan: null,

      akumulatifMode: 'semua',
      akumulatifStart: `01/${prevMonthKey}`,
      akumulatifEnd: getTodayWIB(),
      akumulatifError: '',

      kategoriFilter: 'SEMUA',
      kategoriStart: '',
      kategoriEnd: '',
      kategoriError: '',

      compareMonthA: prevMonthKey,
      compareMonthB: latestMonthKey,

      searchKeyword: '',
      searchStart: '',
      searchEnd: '',
      searchError: '',
      searchPage: 1,

      devUrgency: 'biasa',
      devMessage: '',
      devRefCode: generateSupportRefCode(),
      devReplyBanner: null,
      devError: '',
      devSubmitting: false,
      n8nDevUrl: DEFAULT_CFG.dev,

      n8nMode: DEFAULT_CFG.mode,
      n8nGetUrl: DEFAULT_CFG.get,
      n8nPostUrl: DEFAULT_CFG.post,
      n8nSecretPin: '',
      themeOverride: 'auto',

      isLoading: false,
      hasLoadedInitialData: false,
      fetchError: null,
      chartAnimatedOnce: false
    };

    let cachedRawTransactions = [];
    let cachedInspection = { validDateRows: [], dateIssues: [], amountIssues: [], allIssues: [] };
    let chartObserver = null;
    let toastTimer = null;

    // 5-hour auto-lock activity timestamp in memory (5 * 60 * 60 * 1000 ms)
    const AUTO_LOCK_MS = 5 * 60 * 60 * 1000;
    let lastActivityTime = Date.now();
    let isNetworkBusy = false;

    function recordUserActivity() {
      const now = Date.now();
      if (state.isAuthenticated && (now - lastActivityTime > AUTO_LOCK_MS)) {
        lockApplication();
        showToast('Sesi dikunci otomatis setelah 5 jam tanpa aktivitas.', false);
        return;
      }
      lastActivityTime = now;
      checkWibDateRollover();
    }

    function checkWibDateRollover() {
      const currentWib = getTodayWIB();
      if (currentWib !== state.activeWibToday) {
        const previousToday = state.activeWibToday;
        state.activeWibToday = currentWib;
        state.selectedDailyChartDate = null;
        if (state.formDate === previousToday) {
          state.formDate = currentWib;
        }
        if (state.isAuthenticated && state.screen === 'beranda') {
          renderApp(false, false);
        }
      }
    }

    function startNetworkLoadingUI(statusText = 'Memperbarui data…', showPill = true) {
      isNetworkBusy = true;
      const track = document.getElementById('top-progress-track');
      const pill = document.getElementById('network-status-pill');
      const txt = document.getElementById('network-status-text');
      const reloadBtn = document.getElementById('btn-reload-top');

      if (track) track.classList.add('active');
      if (txt) txt.textContent = statusText;
      if (pill && showPill) pill.classList.add('active');
      if (reloadBtn) reloadBtn.disabled = true;
    }

    function stopNetworkLoadingUI() {
      isNetworkBusy = false;
      const track = document.getElementById('top-progress-track');
      const pill = document.getElementById('network-status-pill');
      const reloadBtn = document.getElementById('btn-reload-top');

      if (track) track.classList.remove('active');
      if (pill) pill.classList.remove('active');
      if (reloadBtn) reloadBtn.disabled = false;
    }

    function showToast(msg, isSuccessCheck = false) {
      const bar = document.getElementById('toast-banner');
      const txt = document.getElementById('toast-text');
      const path = document.getElementById('toast-icon-path');
      if (!bar || !txt) return;

      txt.textContent = msg;
      bar.classList.toggle('is-warn', !isSuccessCheck);

      if (path) {
        if (isSuccessCheck) {
          path.setAttribute('d', 'M20 6.5L9.5 17 4.5 12');
        } else {
          path.setAttribute('d', 'M12 8v4.5M12 16.5h.01');
        }
      }

      bar.classList.add('visible');
      if (toastTimer) clearTimeout(toastTimer);
      toastTimer = setTimeout(() => bar.classList.remove('visible'), 3200);
    }

    /**
     * KONTRAK JSON GET (MEMBACA DATA TRANSAKSI) — SIGNATURE & NAME KEPT
     */
    async function fetchTransactionsFromSource() {
      if (state.n8nMode === 'webhook') {
        const url = state.n8nGetUrl.trim();
        if (!url) {
          throw new Error('Endpoint laporan belum diatur. Hubungi developer.');
        }
        const res = await fetch(url, {
          method: 'GET',
          headers: { 'X-Carwash-Pin': state.n8nSecretPin }
        });
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}`);
        }
        const json = await res.json();
        if (!json || json.status !== 'ok' || !Array.isArray(json.data)) {
          throw new Error('Format data laporan tidak sesuai kontrak.');
        }
        return json.data;
      } else {
        await new Promise(r => setTimeout(r, 240));
        return _memoryStore.transactions.map(item => ({ ...item }));
      }
    }

    /**
     * KONTRAK JSON POST (MENGIRIM PENGAJUAN TRANSAKSI HARIAN) — SIGNATURE & NAME KEPT
     */
    async function postBatchToSource(payload) {
      if (state.n8nMode === 'webhook') {
        const url = state.n8nPostUrl.trim();
        if (!url) {
          throw new Error('Endpoint penyimpanan belum diatur di menu Pengaturan.');
        }
        const res = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Carwash-Pin': state.n8nSecretPin
          },
          body: JSON.stringify(payload)
        });
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}`);
        }
        const body = await res.json();
        if (!body || body.status !== 'ok') {
          throw new Error('Respons penyimpanan belum berhasil.');
        }
        return body;
      } else {
        await new Promise(r => setTimeout(r, 280));
        return { status: 'ok' };
      }
    }

    function updateSyncTimestampDisplay() {
      try {
        const parts = new Intl.DateTimeFormat('en-GB', {
          timeZone: 'Asia/Jakarta',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        }).formatToParts(new Date());
        const hh = parts.find(p => p.type === 'hour')?.value || '00';
        const mm = parts.find(p => p.type === 'minute')?.value || '00';
        const syncEl = document.getElementById('sync-time-text');
        if (syncEl) syncEl.textContent = `Diperbarui ${hh}:${mm} WIB`;
      } catch (e) {
        const now = new Date();
        const hh = String(now.getHours()).padStart(2, '0');
        const mm = String(now.getMinutes()).padStart(2, '0');
        const syncEl = document.getElementById('sync-time-text');
        if (syncEl) syncEl.textContent = `Diperbarui ${hh}:${mm} WIB`;
      }
    }

    async function loadTransactionsData(animateNumbers = true, loadingLabel = 'Memperbarui data…') {
      if (isNetworkBusy) return;
      state.isLoading = true;
      state.fetchError = null;
      startNetworkLoadingUI(loadingLabel, true);
      if (!state.hasLoadedInitialData) {
        renderApp(false, false);
      }

      try {
        const rawData = await fetchTransactionsFromSource();
        cachedRawTransactions = rawData;
        cachedInspection = inspectAllTransactions(cachedRawTransactions);
        state.hasLoadedInitialData = true;
        state.activeWibToday = getTodayWIB();
        updateSyncTimestampDisplay();
      } catch (err) {
        state.fetchError = err && err.message ? err.message : 'Gagal memuat data laporan.';
        if (state.n8nMode === 'webhook') {
          cachedRawTransactions = [];
          cachedInspection = { validDateRows: [], dateIssues: [], amountIssues: [], allIssues: [] };
        }
      } finally {
        state.isLoading = false;
        stopNetworkLoadingUI();
        renderApp(animateNumbers, false);
      }
    }

    /* ==========================================================================
       5. COUNT-UP ANIMATION & BAR CHART INTERSECTION OBSERVER
       ========================================================================== */
    function runCountUpNumbers() {
      const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      const nodes = document.querySelectorAll('[data-count-target]');

      nodes.forEach(node => {
        const target = Number(node.getAttribute('data-count-target')) || 0;
        const fmt = node.getAttribute('data-count-format');
        const formatVal = (val) => {
          if (fmt === 'rp-in') return `+ ${formatRp(Math.abs(val))}`;
          if (fmt === 'rp-out') return `- ${formatRp(Math.abs(val))}`;
          if (fmt === 'rp') return formatRp(val);
          return String(val);
        };
        const finalFormatted = formatVal(target);
        node.setAttribute('aria-label', finalFormatted);

        if (reduced) {
          node.textContent = finalFormatted;
          return;
        }

        const duration = 380;
        const startTs = performance.now();

        function step(now) {
          const elapsed = now - startTs;
          const progress = Math.min(1, elapsed / duration);
          const eased = 1 - Math.pow(1 - progress, 3);
          const currentVal = Math.round(target * eased);
          node.textContent = formatVal(currentVal);

          if (progress < 1) {
            requestAnimationFrame(step);
          } else {
            node.textContent = finalFormatted;
          }
        }
        requestAnimationFrame(step);
      });
    }

    function observeBarChart() {
      const svgEl = document.getElementById('six-month-chart-svg');
      if (!svgEl) return;

      const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduced || state.chartAnimatedOnce || !('IntersectionObserver' in window)) {
        svgEl.classList.add('chart-visible');
        state.chartAnimatedOnce = true;
        return;
      }

      if (chartObserver) chartObserver.disconnect();
      chartObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            svgEl.classList.add('chart-visible');
            state.chartAnimatedOnce = true;
            if (chartObserver) chartObserver.disconnect();
          }
        });
      }, { threshold: 0.15 });

      chartObserver.observe(svgEl);
    }

    /* ==========================================================================
       6. SHARED UI COMPONENTS (SKELETON, DATA WARNING, SUMMARY CARDS, PAGINATED LIST)
       ========================================================================== */
    function renderSkeletonScreen() {
      return `
        <div class="beranda-stack" aria-busy="true" aria-label="Menyiapkan data laporan">
          <div>
            <div class="skeleton" style="height:18px; width:140px; border-radius:6px; margin-bottom:8px;"></div>
            <div class="skeleton" style="height:32px; width:230px; border-radius:8px;"></div>
          </div>
          <div class="skeleton" style="height:245px; width:100%;"></div>
          <div class="skeleton" style="height:190px; width:100%;"></div>
          <div style="display:flex; flex-direction:column; gap:10px;">
            <div class="skeleton" style="height:68px; width:100%; border-radius:14px;"></div>
            <div class="skeleton" style="height:68px; width:100%; border-radius:14px;"></div>
            <div class="skeleton" style="height:68px; width:100%; border-radius:14px;"></div>
          </div>
        </div>
      `;
    }

    function renderDataQualityWarning(scopedRows) {
      const dateCount = cachedInspection.dateIssues.length;
      const relevantAmtIssues = scopedRows
        ? scopedRows.filter(r => r.hasAmountIssue)
        : cachedInspection.amountIssues;

      if (dateCount === 0 && relevantAmtIssues.length === 0) return '';

      const items = [];
      if (dateCount > 0) {
        const rowsText = cachedInspection.dateIssues.slice(0, 5).map(i => `#${i.rowNumber}`).join(', ');
        items.push(`<li><strong>${dateCount} baris</strong> memiliki tanggal tidak terbaca dan tidak masuk ke periode mana pun (baris: ${rowsText}).</li>`);
      }
      if (relevantAmtIssues.length > 0) {
        const rowsText = relevantAmtIssues.slice(0, 5).map(i => `#${i.rowNumber}`).join(', ');
        items.push(`<li><strong>${relevantAmtIssues.length} baris</strong> memiliki nominal tidak terbaca dan dihitung Rp 0 (baris: ${rowsText}).</li>`);
      }

      return `
        <div class="card" style="border-color:var(--diff-neg-border);">
          <div class="card-kicker" style="color:var(--diff-neg);">
            <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-alert"/></svg>
            <strong>DATA PERLU DICEK DI SHEET</strong>
          </div>
          <ul style="padding-left:1.25rem; margin-top:0.35rem; font-size:0.8125rem; color:var(--text-main);">
            ${items.join('')}
          </ul>
        </div>
      `;
    }

    function getMethodIconId(method) {
      if (method === 'CASH') return '#ic-cash';
      if (method === 'QRIS') return '#ic-qris';
      if (method === 'KUPON') return '#ic-kupon';
      if (method === 'BELUM DIBAYAR') return '#ic-unpaid';
      return '#ic-cash';
    }

    function getRowVisualMeta(r) {
      if (r.category === KASBON_CATEGORY) {
        return {
          rowTouchClass: 'row-touch-neutral',
          catPillClass: 'pill-neutral',
          badgeClass: 'badge-kasbon',
          icon: '#ic-kasbon',
          amtClass: 'amt-kasbon',
          amtLabel: `Kasbon ${formatRp(r.safeAmount)}`
        };
      }
      if (EXPENSE_CATEGORIES.includes(r.category)) {
        return {
          rowTouchClass: 'row-touch-out',
          catPillClass: 'pill-neg',
          badgeClass: 'badge-out',
          icon: '#ic-arrow-up',
          amtClass: 'amt-neg',
          amtLabel: `- ${formatRp(r.safeAmount)}`
        };
      }
      if (r.method === 'KUPON') {
        return {
          rowTouchClass: 'row-touch-neutral',
          catPillClass: 'pill-neutral',
          badgeClass: 'badge-kupon',
          icon: '#ic-kupon',
          amtClass: 'amt-neutral',
          amtLabel: 'Rp 0 (KUPON)'
        };
      }
      if (r.method === 'BELUM DIBAYAR') {
        return {
          rowTouchClass: 'row-touch-neutral',
          catPillClass: 'pill-neutral',
          badgeClass: 'badge-unpaid',
          icon: '#ic-unpaid',
          amtClass: 'amt-neutral',
          amtLabel: 'Rp 0 (BELUM BAYAR)'
        };
      }
      return {
        rowTouchClass: 'row-touch-in',
        catPillClass: 'pill-pos',
        badgeClass: 'badge-in',
        icon: '#ic-arrow-down',
        amtClass: 'amt-pos',
        amtLabel: `+ ${formatRp(r.safeAmount)}`
      };
    }

    function renderSummaryCards(metrics, periodText = '', showOperationalNote = false, trendDir = null) {
      const diff = metrics.selisihKasOperasional;
      const isPositive = diff >= 0;
      const diffClass = isPositive ? 'pill-pos' : 'pill-neg';
      const diffIcon = isPositive ? '#ic-arrow-up' : '#ic-arrow-down';
      const diffIconColorClass = isPositive ? 'icon-in' : 'icon-out';
      const diffStatusText = isPositive ? 'Surplus Operasional' : 'Defisit Operasional';

      const cashScale = metrics.uangMasuk > 0 ? (metrics.uangMasukCash / metrics.uangMasuk) : 0;
      const outCashScale = metrics.uangKeluar > 0 ? (metrics.uangKeluarCash / metrics.uangKeluar) : 0;

      return `
        <div class="card card-hero ${trendDir === 'up' ? 'hero-trend-up' : (trendDir === 'down' ? 'hero-trend-down' : '')}">
          <div class="card-title-row">
            <span class="card-kicker">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-selisih"/></svg>
              <span>Selisih Kas Operasional ${periodText ? `• ${escapeHtml(periodText)}` : ''}</span>
            </span>
            <span class="pill-badge ${diffClass}">
              <svg class="icon icon-sm ${diffIconColorClass}" aria-hidden="true"><use href="${diffIcon}"/></svg>
              <span>${diffStatusText}</span>
            </span>
          </div>

          <div
            class="num-hero"
            style="color:${isPositive ? '#34D399' : '#FCA5A5'};"
            data-count-target="${diff}"
            data-count-format="rp"
            aria-label="${formatRp(diff)}"
          >${formatRp(diff)}</div>

          <div class="hero-flow-grid">
            <div class="hero-flow-box flow-in">
              <span class="hero-flow-label">
                <svg class="icon icon-sm" style="color:#34D399;" aria-hidden="true"><use href="#ic-arrow-down"/></svg>
                <span>+ Uang Masuk</span>
              </span>
              <span class="hero-flow-val" style="color:#34D399;">+ ${formatRp(metrics.uangMasuk)}</span>
            </div>
            <div class="hero-flow-box flow-out">
              <span class="hero-flow-label">
                <svg class="icon icon-sm" style="color:#FCA5A5;" aria-hidden="true"><use href="#ic-arrow-up"/></svg>
                <span>- Uang Keluar</span>
              </span>
              <span class="hero-flow-val" style="color:#FCA5A5;">- ${formatRp(metrics.uangKeluar)}</span>
            </div>
          </div>

          ${showOperationalNote ? '<div class="operational-note">Selisih kas operasional bukan laba bersih</div>' : ''}
        </div>

        <div class="cards-grid-2" style="margin-bottom:1.25rem;">
          <div class="card card-frame-in" style="margin-bottom:0;">
            <div class="card-title-row">
              <span class="card-kicker" style="color:var(--diff-pos);">
                <svg class="icon icon-sm icon-in" aria-hidden="true"><use href="#ic-arrow-down"/></svg>
                <span>Uang Masuk</span>
              </span>
              <span class="pill-badge pill-pos">CASH + QRIS</span>
            </div>
            <div
              class="num-large amt-pos"
              data-count-target="${metrics.uangMasuk}"
              data-count-format="rp-in"
              aria-label="+ ${formatRp(metrics.uangMasuk)}"
            >+ ${formatRp(metrics.uangMasuk)}</div>

            <div class="ratio-bar" aria-hidden="true">
              <div class="ratio-segment" style="width:100%; background-color:var(--diff-pos); transform:scaleX(${cashScale.toFixed(3)});"></div>
            </div>

            <div style="display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; font-size:0.78rem; color:var(--text-sec);">
              <span><svg class="icon icon-sm" aria-hidden="true"><use href="#ic-cash"/></svg> CASH: <strong style="color:var(--text-main);">${formatRp(metrics.uangMasukCash)}</strong></span>
              <span><svg class="icon icon-sm" aria-hidden="true"><use href="#ic-qris"/></svg> QRIS: <strong style="color:var(--text-main);">${formatRp(metrics.uangMasukQris)}</strong></span>
            </div>
          </div>

          <div class="card card-frame-out" style="margin-bottom:0;">
            <div class="card-title-row">
              <span class="card-kicker" style="color:var(--diff-neg);">
                <svg class="icon icon-sm icon-out" aria-hidden="true"><use href="#ic-arrow-up"/></svg>
                <span>Uang Keluar (Dibayarkan)</span>
              </span>
              <span class="pill-badge pill-neg">Termasuk Bonus</span>
            </div>
            <div
              class="num-large amt-neg"
              data-count-target="${metrics.uangKeluar}"
              data-count-format="rp-out"
              aria-label="- ${formatRp(metrics.uangKeluar)}"
            >- ${formatRp(metrics.uangKeluar)}</div>

            <div class="ratio-bar" aria-hidden="true">
              <div class="ratio-segment" style="width:100%; background-color:var(--diff-neg); transform:scaleX(${outCashScale.toFixed(3)});"></div>
            </div>

            <div style="display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; font-size:0.78rem; color:var(--text-sec);">
              <span><svg class="icon icon-sm" aria-hidden="true"><use href="#ic-cash"/></svg> CASH: <strong style="color:var(--text-main);">${formatRp(metrics.uangKeluarCash)}</strong></span>
              <span><svg class="icon icon-sm" aria-hidden="true"><use href="#ic-qris"/></svg> QRIS: <strong style="color:var(--text-main);">${formatRp(metrics.uangKeluarQris)}</strong></span>
            </div>
          </div>
        </div>

        <div class="stats-grid-4">
          <div class="bento-card bento-tx">
            <div class="bento-top">
              <span class="bento-label">Jumlah Transaksi</span>
              <span class="bento-icon-box">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-rekap"/></svg>
              </span>
            </div>
            <div class="num-stat" data-count-target="${metrics.totalTransaksi}" data-count-format="int" aria-label="${metrics.totalTransaksi}">${metrics.totalTransaksi}</div>
            <div class="bento-sub">Total baris tercatat di Sheet</div>
          </div>

          <div class="bento-card bento-kupon">
            <div class="bento-top">
              <span class="bento-label">Kupon</span>
              <span class="bento-icon-box">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-kupon"/></svg>
              </span>
            </div>
            <div class="num-stat">${metrics.kuponCount} baris</div>
            <div class="bento-sub">Nilai Rp 0 (non-uang masuk)</div>
          </div>

          <div class="bento-card bento-unpaid">
            <div class="bento-top">
              <span class="bento-label">Belum Dibayar</span>
              <span class="bento-icon-box">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-unpaid"/></svg>
              </span>
            </div>
            <div class="num-stat">${metrics.belumDibayarCount} baris</div>
            <div class="bento-sub">Nilai Rp 0 (menunggu bayar)</div>
          </div>

          <div class="bento-card bento-kasbon">
            <div class="bento-top">
              <span class="bento-label">Kasbon (${metrics.kasbonCount} baris)</span>
              <span class="bento-icon-box">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-kasbon"/></svg>
              </span>
            </div>
            <div class="num-stat" data-count-target="${metrics.kasbonTotal}" data-count-format="rp" aria-label="${formatRp(metrics.kasbonTotal)}">${formatRp(metrics.kasbonTotal)}</div>
            <div class="bento-sub">Dicatat terpisah dari kas</div>
          </div>
        </div>
      `;
    }

    function renderMonthSelectorGrid(selectedKey) {
      return `
        <div class="month-grid no-print" role="tablist" aria-label="Pilih Bulan Laporan">
          ${MONTHS_AVAILABLE.map(m => `
            <button
              type="button"
              class="month-btn"
              role="tab"
              data-pick-month="${m.key}"
              aria-selected="${m.key === selectedKey}"
            >${m.label}</button>
          `).join('')}
        </div>
      `;
    }

    // Windowed/paginated list renderer (renders max 50 rows at once for 20,000-row smoothness)
    function renderTransactionsCollection(rows, page, pagePrefix, showAllToday = false) {
      if (rows.length === 0) {
        return `
          <div style="text-align:center; padding:2rem 1rem;">
            <div style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background-color:var(--bg-subtle); color:var(--text-sec); margin-bottom:0.6rem;">
              <svg class="icon" aria-hidden="true"><use href="#ic-empty"/></svg>
            </div>
            <div style="font-weight:700; font-size:0.95rem;">Periode atau pencarian ini memiliki 0 transaksi</div>
            <p style="font-size:0.8125rem; color:var(--text-sec); margin-top:0.2rem;">Semua nilai pada periode ini dihitung Rp 0.</p>
          </div>
        `;
      }

      const PAGE_SIZE = showAllToday ? 100 : 50;
      const totalPages = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
      const safePage = Math.min(Math.max(1, page), totalPages);
      const slice = rows.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);

      const mobileMutationRows = slice.map(r => {
        const v = getRowVisualMeta(r);
        return `
          <div class="mutation-row ${v.rowTouchClass}" data-inspect-row="${r.rowNumber}" role="button" tabindex="0" aria-label="Transaksi ${escapeHtml(r.description)}, ${escapeHtml(r.category)}, ${escapeHtml(r.method)}, ${v.amtLabel}">
            <div class="mutation-left">
              <span class="mutation-badge ${v.badgeClass}">
                <svg class="icon icon-sm" aria-hidden="true"><use href="${v.icon}"/></svg>
              </span>
              <div class="mutation-info">
                <div class="mutation-title">${escapeHtml(r.description)}</div>
                <div class="mutation-meta">
                  <span class="pill-badge ${v.catPillClass}" style="padding:0.12rem 0.45rem; font-size:0.68rem;">${escapeHtml(r.category)}</span>
                  <span>·</span>
                  <span>${escapeHtml(r.method)}</span>
                  ${!showAllToday ? `<span>·</span><span>${r.parsedDate.formatted}</span>` : ''}
                  ${r.hasAmountIssue ? '<span class="pill-badge pill-neg">Cek Sheet</span>' : ''}
                </div>
              </div>
            </div>
            <div class="mutation-amount">
              <div class="num-tx ${v.amtClass}">${v.amtLabel}</div>
              <div style="font-size:0.7rem; color:var(--text-muted);">#${r.rowNumber}</div>
            </div>
          </div>
        `;
      }).join('');

      const desktopTableRows = slice.map(r => {
        const v = getRowVisualMeta(r);
        return `
          <tr data-inspect-row="${r.rowNumber}" tabindex="0" role="button" aria-label="Baris ${r.rowNumber}: ${escapeHtml(r.description)}">
            <td style="font-variant-numeric:tabular-nums; color:var(--text-sec);">#${r.rowNumber}</td>
            <td style="font-variant-numeric:tabular-nums;">${r.parsedDate.formatted} (${r.parsedDate.dayName})</td>
            <td style="font-weight:700;">${escapeHtml(r.description)}</td>
            <td><span class="pill-badge ${v.catPillClass}">${escapeHtml(r.category)}</span></td>
            <td><span class="pill-badge ${r.method === 'BELUM DIBAYAR' || r.method === 'KUPON' ? 'pill-neutral' : ''}">${escapeHtml(r.method)}</span></td>
            <td style="text-align:right;" class="num-tx ${v.amtClass}">${v.amtLabel}</td>
          </tr>
        `;
      }).join('');

      const showPagination = rows.length > PAGE_SIZE;

      return `
        <div class="${!showAllToday ? 'rekap-desktop-table' : ''}">
          <div class="mobile-tx-cards-wrap mutation-list">
            ${mobileMutationRows}
          </div>

          ${!showAllToday ? `
            <div class="desktop-tx-table-wrap">
              <table class="tx-table">
                <thead>
                  <tr>
                    <th>Baris</th>
                    <th>Tanggal</th>
                    <th>Deskripsi</th>
                    <th>Kategori</th>
                    <th>Metode</th>
                    <th style="text-align:right;">Nominal</th>
                  </tr>
                </thead>
                <tbody>
                  ${desktopTableRows}
                </tbody>
              </table>
            </div>
          ` : ''}

          ${showPagination ? `
            <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-top:1rem;" class="no-print">
              <button type="button" class="btn btn-subtle" data-page-step="${pagePrefix}:prev" aria-label="Halaman sebelumnya" ${safePage <= 1 ? 'disabled' : ''}>
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-chevron-left"/></svg>
                <span>Sebelumnya</span>
              </button>
              <span style="font-size:0.8125rem; color:var(--text-sec); font-variant-numeric:tabular-nums;">
                Hal <strong>${safePage}</strong> / <strong>${totalPages}</strong> (${rows.length} baris)
              </span>
              <button type="button" class="btn btn-subtle" data-page-step="${pagePrefix}:next" aria-label="Halaman berikutnya" ${safePage >= totalPages ? 'disabled' : ''}>
                <span>Berikutnya</span>
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-chevron-right"/></svg>
              </button>
            </div>
          ` : ''}
        </div>
      `;
    }

    function renderSixMonthChartCard() {
      const chartData = MONTHS_AVAILABLE.map(m => {
        const r = filterByMonth(cachedInspection.validDateRows, m.key);
        const met = calculateMetrics(r);
        return {
          key: m.key,
          short: m.short,
          label: m.label,
          masuk: met.uangMasuk,
          keluar: met.uangKeluar,
          selisih: met.selisihKasOperasional
        };
      });

      const activeTooltipData = chartData.find(d => d.key === (state.hoveredChartMonth || state.selectedMonth)) || chartData[chartData.length - 1];
      const maxBar = Math.max(1, ...chartData.map(d => Math.max(d.masuk, d.keluar)));
      const chartH = 115;
      const colW = 54;
      const gap = 16;
      const svgW = chartData.length * (colW + gap);

      const barsMarkup = chartData.map((d, idx) => {
        const hIn = Math.max(5, Math.round((d.masuk / maxBar) * chartH));
        const hOut = Math.max(5, Math.round((d.keluar / maxBar) * chartH));
        const x = idx * (colW + gap) + 8;
        const isCurrent = d.key === state.selectedMonth;

        return `
          <g class="chart-col-group" data-pick-month="${d.key}" data-chart-hover="${d.key}" tabindex="0" role="button" aria-label="Pilih ${d.label}: Uang masuk ${formatRp(d.masuk)}, Uang keluar ${formatRp(d.keluar)}">
            <rect x="${x - 5}" y="0" width="${colW}" height="${chartH + 28}" rx="8" fill="${isCurrent ? 'var(--bg-subtle)' : 'transparent'}"/>
            <rect class="chart-bar" x="${x}" y="${chartH - hIn}" width="19" height="${hIn}" rx="4" fill="var(--diff-pos)"/>
            <rect class="chart-bar" x="${x + 22}" y="${chartH - hOut}" width="19" height="${hOut}" rx="4" fill="var(--diff-neg)"/>
            <text x="${x + 20.5}" y="${chartH + 18}" text-anchor="middle" font-size="12" font-weight="${isCurrent ? '800' : '600'}" fill="${isCurrent ? 'var(--text-main)' : 'var(--text-sec)'}">${d.short}</text>
          </g>
        `;
      }).join('');

      return `
        <div class="card chart-container-rel">
          <div class="card-title-row" style="margin-bottom:0.55rem;">
            <div>
              <div class="card-kicker">Tren Uang Masuk vs Uang Keluar (6 Bulan)</div>
            </div>
            <div style="display:flex; gap:0.75rem; font-size:0.74rem; font-weight:600; color:var(--text-sec);">
              <span style="display:inline-flex; align-items:center; gap:0.3rem;">
                <span style="width:8px; height:8px; border-radius:2px; background-color:var(--diff-pos);"></span> Masuk
              </span>
              <span style="display:inline-flex; align-items:center; gap:0.3rem;">
                <span style="width:8px; height:8px; border-radius:2px; background-color:var(--diff-neg);"></span> Keluar
              </span>
            </div>
          </div>

          <div id="chart-tooltip-box" class="chart-floating-tooltip">
            <div style="font-weight:700; color:var(--text-main);">${escapeHtml(activeTooltipData.label)}</div>
            <div class="chart-tooltip-metrics">
              <div class="chart-metric-item">
                <span class="chart-metric-label">Masuk</span>
                <strong class="amt-pos chart-metric-val">+ ${formatRp(activeTooltipData.masuk)}</strong>
              </div>
              <div class="chart-metric-item">
                <span class="chart-metric-label">Keluar</span>
                <strong class="amt-neg chart-metric-val">- ${formatRp(activeTooltipData.keluar)}</strong>
              </div>
              <div class="chart-metric-item">
                <span class="chart-metric-label">Selisih</span>
                <strong class="chart-metric-val" style="color:var(--text-main);">${formatRp(activeTooltipData.selisih)}</strong>
              </div>
            </div>
          </div>

          <svg id="six-month-chart-svg" class="chart-svg ${state.chartAnimatedOnce ? 'chart-visible' : ''}" viewBox="0 0 ${svgW} 148" role="img" aria-label="Grafik perbandingan uang masuk dan uang keluar 6 bulan">
            ${barsMarkup}
          </svg>
        </div>
      `;
    }

    /* ==========================================================================
       7. SCREEN RENDERERS (BERANDA TODAY WIB, REKAP, CATAT, CARI, ANALITIK, DEV)
       ========================================================================== */
    function formatComparisonWithYesterday(todayVal, yesterdayVal, hasYesterdayTx) {
      if (!hasYesterdayTx) {
        return `<span class="hero-today-comp comp-neutral">—</span>`;
      }
      const diff = Math.round((Number(todayVal) || 0) - (Number(yesterdayVal) || 0));
      if (diff > 0) {
        return `<span class="hero-today-comp comp-pos">+Rp ${rpFormat.format(diff)} dari kemarin</span>`;
      }
      if (diff < 0) {
        return `<span class="hero-today-comp comp-neg">-Rp ${rpFormat.format(Math.abs(diff))} dari kemarin</span>`;
      }
      return `<span class="hero-today-comp comp-neutral">Rp 0 dari kemarin</span>`;
    }

    /**
     * Builds the daily chart data for the current WIB month.
     * - Every day from the 1st up to TODAY (WIB) gets a column. A day without any input stays empty
     *   and its history stays empty.
     * - Days that have not arrived yet are NOT rendered, so a new day appears (empty) tomorrow.
     * - Resets by itself when the WIB month changes, because it only reads the current MM/YYYY.
     */
    function buildProgressiveMonthlyDailySeries(todayWib) {
      const todayParsed = parseDateDDMMYYYY(todayWib);
      if (!todayParsed) return { monthLabel: '', days: [] };

      const currentMonthKey = todayParsed.keyMMYYYY;
      const monthName = NAMA_BULAN_PANJANG[todayParsed.month - 1] || '';
      const monthShort = NAMA_BULAN_PENDEK[todayParsed.month - 1] || '';
      const monthLabel = `${monthName} ${todayParsed.year}`;

      const monthRows = filterByMonth(cachedInspection.validDateRows, currentMonthKey);
      const rowsByDay = new Map();
      monthRows.forEach(r => {
        const dKey = r.parsedDate.formatted;
        if (!rowsByDay.has(dKey)) rowsByDay.set(dKey, []);
        rowsByDay.get(dKey).push(r);
      });

      const mm = String(todayParsed.month).padStart(2, '0');
      const days = [];
      for (let dayNum = 1; dayNum <= todayParsed.day; dayNum++) {
        const dKey = `${String(dayNum).padStart(2, '0')}/${mm}/${todayParsed.year}`;
        const rows = rowsByDay.get(dKey) || [];
        const met = calculateMetrics(rows);
        days.push({
          dateStr: dKey,
          dayNum,
          shortDay: String(dayNum).padStart(2, '0'),
          shortLabel: `${String(dayNum).padStart(2, '0')} ${monthShort}`,
          fullLabel: formatGreetingDateWIB(dKey),
          txCount: rows.length,
          masuk: met.uangMasuk,
          keluar: met.uangKeluar,
          selisih: met.selisihKasOperasional,
          isToday: dKey === todayWib
        });
      }

      return {
        monthKey: currentMonthKey,
        monthLabel,
        monthShort,
        days
      };
    }

    /* ---- Daily chart carousel runtime (swipe to choose the day, no tapping) ---- */
    let dailyCarouselDays = [];
    let dailyCarouselIdx = 0;
    let dailyCarouselRaf = 0;
    let dailyCarouselSettleTimer = 0;
    let dailyDragState = null;

    function buildDailyDetailHtml(d) {
      const has = d.txCount > 0;
      const selColor = d.selisih >= 0 ? 'var(--diff-pos)' : 'var(--diff-neg)';
      return `
        <div class="dd-head">
          <strong class="dd-date">${escapeHtml(d.fullLabel)}</strong>
          ${d.isToday ? '<span class="pill-badge pill-accent">Hari Ini</span>' : ''}
        </div>
        <div class="dd-grid">
          <div class="dd-item dd-in">
            <span class="dd-label">Uang Masuk</span>
            <strong class="dd-val amt-pos">${has ? `+ ${formatRp(d.masuk)}` : '—'}</strong>
          </div>
          <div class="dd-item dd-out">
            <span class="dd-label">Uang Keluar</span>
            <strong class="dd-val amt-neg">${has ? `- ${formatRp(d.keluar)}` : '—'}</strong>
          </div>
          <div class="dd-item dd-net">
            <span class="dd-label">Selisih Kas</span>
            <strong class="dd-val" style="color:${has ? selColor : 'var(--text-sec)'};">${has ? formatRp(d.selisih) : '—'}</strong>
          </div>
        </div>
      `;
    }

    function renderProgressiveDailyMonthChart(todayWib) {
      const series = buildProgressiveMonthlyDailySeries(todayWib);
      const days = series.days;
      dailyCarouselDays = days;

      if (!days || days.length === 0) {
        dailyCarouselIdx = 0;
        return '';
      }

      let focusIdx = days.findIndex(d => d.dateStr === state.selectedDailyChartDate);
      if (focusIdx < 0) focusIdx = days.length - 1;
      dailyCarouselIdx = focusIdx;

      const maxBar = Math.max(10000, ...days.map(d => Math.max(d.masuk, d.keluar)));
      const barH = 112;

      const colsMarkup = days.map((d, idx) => {
        const hIn = d.masuk > 0 ? Math.max(6, Math.round((d.masuk / maxBar) * barH)) : 3;
        const hOut = d.keluar > 0 ? Math.max(6, Math.round((d.keluar / maxBar) * barH)) : 3;
        return `
          <div class="daily-col${idx === focusIdx ? ' is-active' : ''}" data-day-idx="${idx}" role="img" aria-label="${escapeHtml(d.fullLabel)}: Uang Masuk ${formatRp(d.masuk)}, Uang Keluar ${formatRp(d.keluar)}, Selisih Kas ${formatRp(d.selisih)}">
            <div class="daily-bars">
              <span class="daily-bar bar-in${d.masuk > 0 ? '' : ' is-empty'}" style="height:${hIn}px"></span>
              <span class="daily-bar bar-out${d.keluar > 0 ? '' : ' is-empty'}" style="height:${hOut}px"></span>
            </div>
            <span class="daily-day">${d.shortDay}</span>
          </div>
        `;
      }).join('');

      return `
        <div class="card chart-container-rel daily-card">
          <div class="card-title-row" style="margin-bottom:0.7rem;">
            <div class="card-kicker">Grafik Harian • ${escapeHtml(series.monthLabel)}</div>
          </div>

          <div id="daily-month-tooltip-box" class="daily-detail" aria-live="polite">${buildDailyDetailHtml(days[focusIdx])}</div>

          <div class="daily-stage">
            <div class="daily-lens" aria-hidden="true"></div>
            <div id="daily-chart-scroll-container" class="daily-scroller" tabindex="0" role="group" aria-label="Grafik harian ${escapeHtml(series.monthLabel)}">
              <span class="daily-spacer" aria-hidden="true"></span>
              ${colsMarkup}
              <span class="daily-spacer" aria-hidden="true"></span>
            </div>
          </div>
        </div>
      `;
    }

    function getDailyColWidth(sc) {
      const first = sc.querySelector('.daily-col');
      return (first && first.offsetWidth) || 58;
    }

    function clampDailyIdx(value) {
      const n = dailyCarouselDays.length;
      if (n <= 0) return 0;
      return Math.min(n - 1, Math.max(0, value));
    }

    function applyDailyCarouselFocus(sc, pos) {
      const cols = sc.querySelectorAll('.daily-col');
      const active = clampDailyIdx(Math.round(pos));
      cols.forEach((col, i) => {
        const dist = Math.abs(i - pos);
        const opacity = Math.max(0.4, 1 - dist * 0.24);
        const scale = 1 - Math.min(dist, 2) * 0.035;
        col.style.opacity = opacity.toFixed(3);
        col.style.transform = `scale(${scale.toFixed(3)})`;
        col.classList.toggle('is-active', i === active);
      });
    }

    function initDailyCarousel() {
      const sc = document.getElementById('daily-chart-scroll-container');
      if (!sc) return;
      const colW = getDailyColWidth(sc);
      const target = dailyCarouselIdx * colW;
      sc.scrollLeft = target;
      applyDailyCarouselFocus(sc, dailyCarouselIdx);
      // One more pass after the first paint, in case layout was not final yet
      requestAnimationFrame(() => {
        const sc2 = document.getElementById('daily-chart-scroll-container');
        if (sc2 !== sc || dailyDragState) return;
        const w = getDailyColWidth(sc2);
        if (Math.abs(sc2.scrollLeft - dailyCarouselIdx * w) > 1) {
          sc2.scrollLeft = dailyCarouselIdx * w;
        }
        applyDailyCarouselFocus(sc2, sc2.scrollLeft / w);
      });
    }

    function onDailyCarouselScroll(sc) {
      const colW = getDailyColWidth(sc);
      const pos = clampDailyIdx(sc.scrollLeft / colW);
      applyDailyCarouselFocus(sc, pos);
      const box = document.getElementById('daily-month-tooltip-box');
      if (box) box.classList.toggle('is-moving', Math.round(pos) !== dailyCarouselIdx);
    }

    function settleDailyCarousel(sc) {
      const colW = getDailyColWidth(sc);
      const idx = clampDailyIdx(Math.round(sc.scrollLeft / colW));
      const box = document.getElementById('daily-month-tooltip-box');
      if (box) box.classList.remove('is-moving');
      if (idx === dailyCarouselIdx) return;
      const d = dailyCarouselDays[idx];
      if (!d) return;
      dailyCarouselIdx = idx;
      state.selectedDailyChartDate = d.dateStr;
      if (box) box.innerHTML = buildDailyDetailHtml(d);
    }

    function bindDailyCarouselEvents() {
      // Scroll events do not bubble, so listen in the capture phase on the document
      document.addEventListener('scroll', (e) => {
        const sc = e.target;
        if (!sc || sc.id !== 'daily-chart-scroll-container') return;
        if (!dailyCarouselRaf) {
          dailyCarouselRaf = requestAnimationFrame(() => {
            dailyCarouselRaf = 0;
            const el = document.getElementById('daily-chart-scroll-container');
            if (el) onDailyCarouselScroll(el);
          });
        }
        clearTimeout(dailyCarouselSettleTimer);
        dailyCarouselSettleTimer = setTimeout(() => {
          const el = document.getElementById('daily-chart-scroll-container');
          if (el) settleDailyCarousel(el);
        }, 120);
      }, true);

      // Mouse drag support for desktop (touch screens scroll natively)
      document.addEventListener('pointerdown', (e) => {
        if (e.pointerType !== 'mouse' || e.button !== 0) return;
        const sc = e.target && e.target.closest ? e.target.closest('#daily-chart-scroll-container') : null;
        if (!sc) return;
        dailyDragState = { sc, startX: e.clientX, startLeft: sc.scrollLeft };
        sc.classList.add('is-dragging');
      });

      document.addEventListener('pointermove', (e) => {
        if (!dailyDragState) return;
        dailyDragState.sc.scrollLeft = dailyDragState.startLeft - (e.clientX - dailyDragState.startX);
      });

      const endDailyDrag = () => {
        if (!dailyDragState) return;
        const sc = dailyDragState.sc;
        dailyDragState = null;
        sc.classList.remove('is-dragging');
        const colW = getDailyColWidth(sc);
        const idx = clampDailyIdx(Math.round(sc.scrollLeft / colW));
        sc.scrollTo({ left: idx * colW, behavior: 'smooth' });
      };
      document.addEventListener('pointerup', endDailyDrag);
      document.addEventListener('pointercancel', endDailyDrag);
    }

    /**
     * Trend of Selisih Kas today vs YESTERDAY (percentage is based on yesterday only).
     * - Percentage = (today - yesterday) / |yesterday| x 100
     * - Shows "—" when it cannot be computed (yesterday = 0). When today or yesterday has no
     *   transactions the hero already shows "—" for the comparison, so no extra chip is added.
     */
    function computeSelisihTrend(hasTodayTx, hasYesterdayTx, todaySelisih, yesterdaySelisih) {
      const none = { dir: 'none', heroClass: '', chipHtml: '' };
      if (!hasTodayTx || !hasYesterdayTx) return none;

      const t = Math.round(Number(todaySelisih) || 0);
      const y = Math.round(Number(yesterdaySelisih) || 0);

      if (y === 0) {
        return {
          dir: 'none',
          heroClass: '',
          chipHtml: '<span class="hero-trend-chip is-none" aria-label="Persentase dibanding kemarin tidak tersedia">—</span>'
        };
      }

      const pct = Math.round(((t - y) / Math.abs(y)) * 1000) / 10;
      const pctText = new Intl.NumberFormat('id-ID', { maximumFractionDigits: 1 }).format(Math.abs(pct));

      if (pct > 0) {
        return {
          dir: 'up',
          heroClass: 'hero-trend-up',
          chipHtml: `<span class="hero-trend-chip is-up" aria-label="Naik ${pctText} persen dibanding kemarin"><svg class="icon" aria-hidden="true"><use href="#ic-trend-up"/></svg><span>+${pctText}%</span></span>`
        };
      }
      if (pct < 0) {
        return {
          dir: 'down',
          heroClass: 'hero-trend-down',
          chipHtml: `<span class="hero-trend-chip is-down" aria-label="Turun ${pctText} persen dibanding kemarin"><svg class="icon" aria-hidden="true"><use href="#ic-trend-down"/></svg><span>-${pctText}%</span></span>`
        };
      }
      return {
        dir: 'none',
        heroClass: '',
        chipHtml: '<span class="hero-trend-chip is-none" aria-label="Sama seperti kemarin"><span>0%</span></span>'
      };
    }

    /**
     * Tint direction for the monthly hero card in Rekap: selected month vs the previous month.
     * For the ongoing month the previous month is cut to the same number of days (fair comparison).
     * Returns 'up', 'down', or null (no tint when it cannot be compared).
     */
    function getMonthTrendDirection(monthKey) {
      const m = /^(\d{2})\/(\d{4})$/.exec(String(monthKey || ''));
      if (!m) return null;
      const mm = parseInt(m[1], 10);
      const yy = parseInt(m[2], 10);
      const prevMonth = mm === 1 ? 12 : mm - 1;
      const prevYear = mm === 1 ? yy - 1 : yy;
      const prevKey = `${String(prevMonth).padStart(2, '0')}/${prevYear}`;

      const todayParsed = parseDateDDMMYYYY(getTodayWIB());
      const isCurrentMonth = !!todayParsed && todayParsed.keyMMYYYY === monthKey;

      const curRows = filterByMonth(cachedInspection.validDateRows, monthKey);
      let prevRows = filterByMonth(cachedInspection.validDateRows, prevKey);
      if (isCurrentMonth) {
        prevRows = prevRows.filter(r => r.parsedDate.day <= todayParsed.day);
      }
      if (curRows.length === 0 || prevRows.length === 0) return null;

      const cur = calculateMetrics(curRows).selisihKasOperasional;
      const prev = calculateMetrics(prevRows).selisihKasOperasional;
      if (cur > prev) return 'up';
      if (cur < prev) return 'down';
      return null;
    }

    function getCategoryTouchStyle(cat, todayRows) {
      if (EXPENSE_CATEGORIES.includes(cat)) {
        return { cellClass: 'cat-touch-out', pillClass: 'pill-neg' };
      }
      if (cat === KASBON_CATEGORY) {
        return { cellClass: 'cat-touch-neutral', pillClass: 'pill-neutral' };
      }
      if (INCOME_CATEGORIES.includes(cat)) {
        const catRows = todayRows.filter(r => r.category === cat);
        const hasPaidCashOrQris = catRows.some(r => r.method === 'CASH' || r.method === 'QRIS');
        if (!hasPaidCashOrQris) {
          return { cellClass: 'cat-touch-neutral', pillClass: 'pill-neutral' };
        }
        return { cellClass: 'cat-touch-in', pillClass: 'pill-pos' };
      }
      return { cellClass: 'cat-touch-neutral', pillClass: 'pill-neutral' };
    }

    function renderBerandaScreen() {
      const todayWib = getTodayWIB();
      state.activeWibToday = todayWib;
      const yesterdayWib = getYesterdayWIB(todayWib);

      const todayRows = cachedInspection.validDateRows
        .filter(r => r.parsedDate.formatted === todayWib)
        .sort((a, b) => a.rowNumber - b.rowNumber);

      const yesterdayRows = cachedInspection.validDateRows
        .filter(r => r.parsedDate.formatted === yesterdayWib);

      const hasTodayTx = todayRows.length > 0;
      const hasYesterdayTx = yesterdayRows.length > 0;

      const todayMetrics = calculateMetrics(todayRows);
      const yesterdayMetrics = calculateMetrics(yesterdayRows);

      const greetingDate = formatGreetingDateWIB(todayWib);

      // Hero values: show dashes if there are no transactions today
      const diff = todayMetrics.selisihKasOperasional;
      const isPositive = diff >= 0;
      const selisihValText = hasTodayTx ? formatRp(diff) : '—';
      const masukValText = hasTodayTx ? `+ ${formatRp(todayMetrics.uangMasuk)}` : '—';
      const keluarValText = hasTodayTx ? `- ${formatRp(todayMetrics.uangKeluar)}` : '—';

      const selisihCompHtml = hasTodayTx
        ? formatComparisonWithYesterday(todayMetrics.selisihKasOperasional, yesterdayMetrics.selisihKasOperasional, hasYesterdayTx)
        : `<span class="hero-today-comp comp-neutral">—</span>`;

      const masukCompHtml = hasTodayTx
        ? formatComparisonWithYesterday(todayMetrics.uangMasuk, yesterdayMetrics.uangMasuk, hasYesterdayTx)
        : `<span class="hero-today-comp comp-neutral">—</span>`;

      const keluarCompHtml = hasTodayTx
        ? formatComparisonWithYesterday(todayMetrics.uangKeluar, yesterdayMetrics.uangKeluar, hasYesterdayTx)
        : `<span class="hero-today-comp comp-neutral">—</span>`;

      const trend = computeSelisihTrend(hasTodayTx, hasYesterdayTx, todayMetrics.selisihKasOperasional, yesterdayMetrics.selisihKasOperasional);

      // Category summary for today (only categories that appear today)
      const categoryCounts = {};
      todayRows.forEach(r => {
        const c = r.category || 'LAINNYA';
        categoryCounts[c] = (categoryCounts[c] || 0) + 1;
      });
      const activeCategories = Object.entries(categoryCounts);

      return `
        <div class="beranda-stack">
          <!-- 1. Greeting Line with Today's Date in WIB -->
          <div class="page-header" style="margin-bottom:0;">
            <div>
              <span class="month-eyebrow">Laporan Hari Ini (WIB)</span>
              <h1 class="page-title">${escapeHtml(greetingDate)}</h1>
            </div>
          </div>

          ${renderDataQualityWarning(todayRows)}

          <!-- 2. Hero Card (Rekap-Style Layout: Selisih Kas Top Center, Uang Masuk Bottom Left, Uang Keluar Bottom Right + Yesterday Comparison) -->
          <div class="card card-hero ${trend.heroClass}">
            <div class="card-title-row">
              <span class="card-kicker">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-selisih"/></svg>
                <span>Selisih Kas Operasional • Hari Ini</span>
              </span>
              <span class="pill-badge ${!hasTodayTx ? '' : (isPositive ? 'pill-pos' : 'pill-neg')}" style="${!hasTodayTx ? 'background-color:rgba(255,255,255,0.10); color:#E2E8F0;' : ''}">
                <span>${!hasTodayTx ? '0 transaksi' : (isPositive ? 'Surplus Hari Ini' : 'Defisit Hari Ini')}</span>
              </span>
            </div>

            <div style="text-align:center; padding:0.45rem 0 0.2rem;">
              <div
                class="num-hero"
                style="color:${!hasTodayTx ? '#F8FAFC' : (isPositive ? '#34D399' : '#FCA5A5')}; margin-bottom:0.2rem;"
                aria-label="Selisih Kas Hari Ini ${selisihValText}"
              >${selisihValText}</div>
              <div class="hero-trend-row">${trend.chipHtml}${selisihCompHtml}</div>
            </div>

            <div class="hero-flow-grid">
              <div class="hero-flow-box flow-in">
                <span class="hero-flow-label">
                  <svg class="icon icon-sm" style="color:#34D399;" aria-hidden="true"><use href="#ic-arrow-down"/></svg>
                  <span>+ Uang Masuk</span>
                </span>
                <span class="hero-flow-val" style="color:${hasTodayTx ? '#34D399' : '#F8FAFC'};">${masukValText}</span>
                <div style="margin-top:0.15rem;">${masukCompHtml}</div>
              </div>

              <div class="hero-flow-box flow-out">
                <span class="hero-flow-label">
                  <svg class="icon icon-sm" style="color:#FCA5A5;" aria-hidden="true"><use href="#ic-arrow-up"/></svg>
                  <span>- Uang Keluar</span>
                </span>
                <span class="hero-flow-val" style="color:${hasTodayTx ? '#FCA5A5' : '#F8FAFC'};">${keluarValText}</span>
                <div style="margin-top:0.15rem;">${keluarCompHtml}</div>
              </div>
            </div>
          </div>

          <!-- 3. Progressive Daily Bar Chart for the Current Month (Uang Masuk vs Uang Keluar = Selisih Kas) -->
          ${renderProgressiveDailyMonthChart(todayWib)}

          ${hasTodayTx ? `
            <!-- 4. Category Summary for Today (With Green / Red / Grey Semantic Touches) -->
            <div class="card">
              <div class="card-title-row" style="margin-bottom:0.25rem;">
                <span class="card-kicker">Ringkasan Kategori Hari Ini</span>
                <span class="pill-badge">${activeCategories.length} kategori</span>
              </div>
              <div class="today-cat-grid">
                ${activeCategories.map(([cat, count]) => {
                  const st = getCategoryTouchStyle(cat, todayRows);
                  return `
                    <div class="today-cat-cell ${st.cellClass}">
                      <span>${escapeHtml(cat)} · ${count} transaksi</span>
                      <span class="pill-badge ${st.pillClass}" style="padding:0.15rem 0.45rem; font-size:0.68rem;">${count}x</span>
                    </div>
                  `;
                }).join('')}
              </div>
            </div>

            <!-- 5. Today's Transaction List (Ordered by rowNumber, >=64px tall) -->
            <div class="card">
              <div class="card-title-row" style="margin-bottom:0.5rem;">
                <span class="card-kicker">Daftar Transaksi Hari Ini</span>
                <span class="pill-badge">${todayRows.length} baris</span>
              </div>
              ${renderTransactionsCollection(todayRows, 1, 'beranda', true)}
            </div>
          ` : `
            <!-- 6. Calm Empty State when Today has 0 Transactions -->
            <div class="card" style="text-align:center; padding:2.5rem 1.25rem;">
              <div style="display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background-color:var(--bg-subtle); color:var(--text-sec); margin-bottom:0.75rem;">
                <svg class="icon icon-lg" aria-hidden="true"><use href="#ic-empty"/></svg>
              </div>
              <h2 style="font-size:1.05rem; font-weight:700; color:var(--text-main);">Belum ada transaksi hari ini</h2>
              <p style="font-size:0.84375rem; color:var(--text-sec); margin-top:0.3rem;">
                Gunakan menu <strong>Catat</strong> di bawah untuk menambahkan transaksi baru hari ini.
              </p>
            </div>
          `}
        </div>
      `;
    }

    function renderRekapScreen() {
      const monthRows = filterByMonth(cachedInspection.validDateRows, state.selectedMonth);
      const metrics = calculateMetrics(monthRows);
      const monthObj = MONTHS_AVAILABLE.find(m => m.key === state.selectedMonth) || MONTHS_AVAILABLE[MONTHS_AVAILABLE.length - 1];
      const dateSpan = detectDateSpan(monthRows);

      let subContent = '';
      if (state.rekapTab === 'ringkasan') {
        subContent = `
          ${renderSummaryCards(metrics, `${monthObj.label} • ${dateSpan}`, true, getMonthTrendDirection(state.selectedMonth))}
          ${renderSixMonthChartCard()}
        `;
      } else if (state.rekapTab === 'pemasukan') {
        const cards = INCOME_CATEGORIES.map(cat => {
          const b = metrics.incomeByCategory[cat];
          return `
            <div class="card card-frame-in" style="margin-bottom:0;">
              <div class="card-title-row">
                <strong style="font-size:0.875rem;">${escapeHtml(cat)}</strong>
                <span class="pill-badge pill-pos">${b.count} baris</span>
              </div>
              <div class="num-stat amt-pos">+ ${formatRp(b.uangMasuk)}</div>
              <div style="font-size:0.76rem; color:var(--text-sec); margin-top:0.35rem;">
                <div>CASH: ${formatRp(b.cash)} • QRIS: ${formatRp(b.qris)}</div>
                <div>Kupon: ${b.kuponCount} baris • Belum dibayar: ${b.belumDibayarCount} baris</div>
              </div>
            </div>
          `;
        }).join('');

        subContent = `
          <div class="card card-frame-in">
            <div class="card-kicker" style="color:var(--diff-pos);"><svg class="icon icon-sm icon-in" aria-hidden="true"><use href="#ic-arrow-down"/></svg><span>Total Uang Masuk (${escapeHtml(monthObj.label)})</span></div>
            <div class="num-hero amt-pos" data-count-target="${metrics.uangMasuk}" data-count-format="rp-in" aria-label="+ ${formatRp(metrics.uangMasuk)}">+ ${formatRp(metrics.uangMasuk)}</div>
            <div style="font-size:0.8125rem; color:var(--text-sec);">
              CASH: <strong>${formatRp(metrics.uangMasukCash)}</strong> • QRIS: <strong>${formatRp(metrics.uangMasukQris)}</strong> • Kupon: ${metrics.kuponCount} baris • Belum dibayar: ${metrics.belumDibayarCount} baris
            </div>
          </div>
          <div class="cards-grid-3">${cards}</div>
        `;
      } else if (state.rekapTab === 'pengeluaran') {
        const cards = EXPENSE_CATEGORIES.map(cat => {
          const b = metrics.expenseByCategory[cat];
          const descRows = Object.entries(b.byDescription)
            .sort((a, z) => a[0].localeCompare(z[0]))
            .map(([d, info]) => `
              <div style="display:flex; justify-content:space-between; gap:0.5rem; padding:0.42rem 0; border-bottom:1px solid var(--border-hairline); font-size:0.8125rem;">
                <span>${escapeHtml(d)} (${info.count}x)</span>
                <span class="num-tx amt-neg">- ${formatRp(info.total)}</span>
              </div>
            `).join('');

          return `
            <div class="card card-frame-out" style="margin-bottom:0;">
              <div class="card-title-row">
                <strong style="font-size:0.875rem;">${escapeHtml(cat)}</strong>
                <span class="pill-badge pill-neg">${b.count} baris</span>
              </div>
              <div class="num-stat amt-neg">- ${formatRp(b.total)}</div>
              <div style="font-size:0.76rem; color:var(--text-sec); margin-bottom:0.4rem;">
                CASH: ${formatRp(b.cash)} • QRIS: ${formatRp(b.qris)}
              </div>
              <div style="border-top:1px solid var(--border-hairline); padding-top:0.35rem;">
                ${descRows || '<span style="font-size:0.78rem; color:var(--text-sec);">Tidak ada rincian</span>'}
              </div>
            </div>
          `;
        }).join('');

        subContent = `
          <div class="card card-frame-out">
            <div class="card-kicker" style="color:var(--diff-neg);"><svg class="icon icon-sm icon-out" aria-hidden="true"><use href="#ic-arrow-up"/></svg><span>Total Uang Keluar (${escapeHtml(monthObj.label)})</span></div>
            <div class="num-hero amt-neg" data-count-target="${metrics.uangKeluar}" data-count-format="rp-out" aria-label="- ${formatRp(metrics.uangKeluar)}">- ${formatRp(metrics.uangKeluar)}</div>
            <div style="font-size:0.8125rem; color:var(--text-sec);">
              CASH: <strong>${formatRp(metrics.uangKeluarCash)}</strong> • QRIS: <strong>${formatRp(metrics.uangKeluarQris)}</strong>
            </div>
          </div>
          <div class="cards-grid-2">${cards}</div>
        `;
      } else if (state.rekapTab === 'kasbon') {
        const peopleList = Object.entries(metrics.kasbonByPerson).map(([person, val]) => `
          <span class="pill-badge pill-neutral">${escapeHtml(person)}: ${formatRp(val)}</span>
        `).join('');

        const kasbonItems = metrics.kasbonRows.map(r => `
          <div style="display:flex; justify-content:space-between; padding:0.65rem 0; border-bottom:1px solid var(--border-hairline);">
            <div>
              <div style="font-weight:700; font-size:0.875rem;">${escapeHtml(r.description)}</div>
              <div style="font-size:0.76rem; color:var(--text-sec);">${r.parsedDate.formatted} • Baris #${r.rowNumber}</div>
            </div>
            <div class="num-tx amt-kasbon">${formatRp(r.safeAmount)}</div>
          </div>
        `).join('');

        subContent = `
          <div class="card card-frame-neutral">
            <div class="card-kicker" style="color:var(--neutral-grey);">Total Kasbon (${escapeHtml(monthObj.label)})</div>
            <div class="num-hero amt-kasbon" data-count-target="${metrics.kasbonTotal}" data-count-format="rp" aria-label="${formatRp(metrics.kasbonTotal)}">${formatRp(metrics.kasbonTotal)}</div>
            <div style="font-size:0.8125rem; color:var(--text-sec);">${metrics.kasbonCount} baris kasbon</div>
            <div style="display:flex; gap:0.4rem; flex-wrap:wrap; margin-top:0.5rem;">${peopleList}</div>
            <div class="operational-note">Dicatat terpisah, tidak masuk uang masuk maupun uang keluar</div>
          </div>
          <div class="card">
            <div class="card-kicker" style="margin-bottom:0.5rem;">Daftar Baris Kasbon</div>
            ${kasbonItems || '<p style="font-size:0.8125rem; color:var(--text-sec);">Tidak ada kasbon pada bulan ini.</p>'}
          </div>
        `;
      } else if (state.rekapTab === 'semua') {
        subContent = `
          <div class="card">
            <div class="card-title-row" style="margin-bottom:0.65rem;">
              <span class="card-kicker">Semua Mutasi Transaksi (${escapeHtml(monthObj.label)})</span>
              <span class="pill-badge">${monthRows.length} baris</span>
            </div>
            ${renderTransactionsCollection(monthRows, state.rekapPage, 'rekap', false)}
          </div>
        `;
      }

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">Rekap Bulanan • ${escapeHtml(dateSpan)}</span>
              <h1 class="page-title">
                <span>${escapeHtml(monthObj.label)}</span>
              </h1>
            </div>
          </div>

          ${renderMonthSelectorGrid(state.selectedMonth)}
          ${renderDataQualityWarning(monthRows)}

          <div class="rekap-tabs-wrap no-print" role="tablist" aria-label="Tampilan Rekap Bulanan">
            <button type="button" class="rekap-tab-btn" role="tab" data-rekap-tab="ringkasan" aria-selected="${state.rekapTab === 'ringkasan'}">Ringkasan</button>
            <button type="button" class="rekap-tab-btn" role="tab" data-rekap-tab="pemasukan" aria-selected="${state.rekapTab === 'pemasukan'}">Pemasukan</button>
            <button type="button" class="rekap-tab-btn" role="tab" data-rekap-tab="pengeluaran" aria-selected="${state.rekapTab === 'pengeluaran'}">Pengeluaran</button>
            <button type="button" class="rekap-tab-btn" role="tab" data-rekap-tab="kasbon" aria-selected="${state.rekapTab === 'kasbon'}">Kasbon</button>
            <button type="button" class="rekap-tab-btn" role="tab" data-rekap-tab="semua" aria-selected="${state.rekapTab === 'semua'}">Semua (${monthRows.length})</button>
          </div>

          <div id="rekap-subcontent">${subContent}</div>
        </div>
      `;
    }

    function renderCatatScreen() {
      const parsedDate = parseDateDDMMYYYY(state.formDate) || parseDateDDMMYYYY(getTodayWIB());
      const dayName = parsedDate.dayName;

      if (state.formStep === 'confirm') {
        const normalized = state.formRows.map((r, idx) => {
          const amt = r.method === 'KUPON' ? 0 : parseFlexibleRupiahInput(r.amountRaw);
          return {
            txNumber: idx + 1,
            description: r.description.trim().toUpperCase().replace(/,/g, ' '),
            category: r.category,
            amount: amt,
            safeAmount: amt,
            method: r.method
          };
        });

        const previewMetrics = calculateMetrics(normalized);

        const itemsHtml = normalized.map(item => {
          const isExp = EXPENSE_CATEGORIES.includes(item.category);
          const isIn = INCOME_CATEGORIES.includes(item.category) && (item.method === 'CASH' || item.method === 'QRIS');
          const amtCls = isIn ? 'amt-pos' : (isExp ? 'amt-neg' : 'amt-neutral');
          const prefix = isIn ? '+ ' : (isExp ? '- ' : '');
          return `
            <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem; padding:0.7rem 0; border-bottom:1px solid var(--border-hairline);">
              <div>
                <span style="font-weight:700; font-size:0.9rem;">${item.txNumber}. ${escapeHtml(item.description)}</span>
                <span class="pill-badge" style="margin-left:0.35rem;">${escapeHtml(item.category)}</span>
                <span class="pill-badge" style="margin-left:0.25rem;">
                  <svg class="icon icon-sm" aria-hidden="true"><use href="${getMethodIconId(item.method)}"/></svg>
                  <span>${escapeHtml(item.method)}</span>
                </span>
              </div>
              <div class="num-tx ${amtCls}">${prefix}${formatRp(item.amount)}</div>
            </div>
          `;
        }).join('');

        return `
          <div>
            <div class="page-header">
              <div>
                <span class="month-eyebrow">${escapeHtml(dayName)}, ${escapeHtml(parsedDate.formatted)}</span>
                <h1 class="page-title">
                  <span>Konfirmasi Pengajuan</span>
                </h1>
              </div>
            </div>

            ${state.formSaveErrorBanner ? `
              <div class="card card-frame-out">
                <div class="card-kicker" style="color:var(--diff-neg);">
                  <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-fail"/></svg>
                  <strong>${escapeHtml(state.formSaveErrorBanner)}</strong>
                </div>
              </div>
            ` : ''}

            ${renderSummaryCards(previewMetrics, `${dayName} ${parsedDate.formatted}`, false)}

            <div class="card">
              <div class="card-kicker" style="margin-bottom:0.5rem;">Rincian Baris yang Akan Disimpan</div>
              ${itemsHtml}
            </div>

            <div class="card">
              <div style="font-size:0.84375rem; font-weight:600; color:var(--text-sec); margin-bottom:0.85rem; text-align:center;">
                Periksa kembali data sebelum menyimpan laporan.
              </div>
              <div style="display:flex; gap:0.6rem; justify-content:flex-end; flex-wrap:wrap;">
                <button type="button" class="btn btn-danger-outline" id="btn-confirm-batal" ${state.formSubmitting ? 'disabled' : ''}>
                  <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-fail"/></svg>
                  <span>Batal</span>
                </button>
                <button type="button" class="btn btn-subtle" id="btn-confirm-koreksi" ${state.formSubmitting ? 'disabled' : ''}>
                  <span>Koreksi</span>
                </button>
                <button type="button" class="btn btn-primary" id="btn-confirm-setuju" ${state.formSubmitting ? 'disabled' : ''}>
                  <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-check"/></svg>
                  <span>${state.formSubmitting ? 'Menyimpan transaksi…' : 'Simpan Sekarang'}</span>
                </button>
              </div>
            </div>
          </div>
        `;
      }

      const rowsEditor = state.formRows.map((row, idx) => {
        const num = idx + 1;
        const validMethods = VALID_METHODS_BY_CATEGORY[row.category] || ['CASH'];
        const isKupon = row.method === 'KUPON';
        const hasComma = (row.description || '').includes(',');
        const formattedNominal = isKupon
          ? '0'
          : (() => {
              const digits = String(row.amountRaw || '').replace(/[^0-9]/g, '');
              return digits === '' ? '' : formatDotNumber(Number(digits));
            })();

        const isAmtInvalid = !isKupon && formattedNominal === '';
        const isRowExpense = EXPENSE_CATEGORIES.includes(row.category);
        const isRowKasbonOrUnpaid = row.category === KASBON_CATEGORY || row.method === 'BELUM DIBAYAR' || row.method === 'KUPON';
        const isRowIncomePaid = INCOME_CATEGORIES.includes(row.category) && !isRowKasbonOrUnpaid;
        const rowFrameClass = isRowIncomePaid ? 'card-frame-in' : (isRowExpense ? 'card-frame-out' : 'card-frame-neutral');
        const rowBadgeClass = isRowIncomePaid ? 'pill-pos' : (isRowExpense ? 'pill-neg' : 'pill-neutral');
        const rowTypeLabel = isRowExpense ? 'Pengeluaran' : (row.category === KASBON_CATEGORY ? 'Kasbon' : (row.method === 'BELUM DIBAYAR' ? 'Belum Dibayar' : (row.method === 'KUPON' ? 'Kupon' : 'Pemasukan')));

        return `
          <div class="card ${rowFrameClass}" id="tx-row-card-${row.id}" style="padding:1.15rem; margin-bottom:1rem;">
            <div class="card-title-row" style="margin-bottom:0.65rem;">
              <span class="pill-badge ${rowBadgeClass}" style="font-weight:700;">
                Transaksi #${num} • ${rowTypeLabel}
              </span>
              <button type="button" class="btn btn-danger-outline" style="min-height:44px; padding:0.35rem 0.75rem; font-size:0.78rem;" data-remove-row="${row.id}" aria-label="Hapus transaksi nomor ${num}">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-trash"/></svg>
                <span>Hapus</span>
              </button>
            </div>
            <div class="form-row-fields">
              <div class="field-group">
                <label class="field-label" for="r-desc-${row.id}">Deskripsi Unit / Keperluan</label>
                <input
                  type="text"
                  id="r-desc-${row.id}"
                  class="field-input row-desc-input"
                  data-id="${row.id}"
                  value="${escapeHtml(row.description)}"
                  aria-invalid="${hasComma ? 'true' : 'false'}"
                  aria-describedby="r-desc-err-${row.id}"
                  placeholder="Contoh: INNOVA REBORN"
                />
                <div id="r-desc-err-${row.id}" class="field-inline-error" style="display:${hasComma ? 'flex' : 'none'};" role="alert">
                  <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-warn"/></svg>
                  <span>Deskripsi tidak boleh berisi tanda koma (,).</span>
                </div>
              </div>
              <div class="field-group">
                <label class="field-label" for="r-cat-${row.id}">Kategori</label>
                <select id="r-cat-${row.id}" class="field-input row-cat-select" data-id="${row.id}">
                  ${ALL_CATEGORIES.map(c => `<option value="${escapeHtml(c)}" ${row.category === c ? 'selected' : ''}>${escapeHtml(c)}</option>`).join('')}
                </select>
              </div>
              <div class="field-group">
                <label class="field-label" for="r-met-${row.id}">Metode</label>
                <select id="r-met-${row.id}" class="field-input row-met-select" data-id="${row.id}">
                  ${validMethods.map(m => `<option value="${escapeHtml(m)}" ${row.method === m ? 'selected' : ''}>${escapeHtml(m)}</option>`).join('')}
                </select>
              </div>
              <div class="field-group">
                <label class="field-label" for="r-amt-${row.id}">Nominal ${isKupon ? '(Otomatis Rp 0)' : ''}</label>
                <div class="nominal-input-wrap">
                  <span class="rp-outside-label" aria-hidden="true">Rp</span>
                  <input
                    type="text"
                    inputmode="numeric"
                    autocomplete="off"
                    id="r-amt-${row.id}"
                    class="field-input row-amt-input"
                    data-id="${row.id}"
                    value="${escapeHtml(formattedNominal)}"
                    aria-invalid="${isAmtInvalid ? 'true' : 'false'}"
                    placeholder="0"
                    ${isKupon ? 'readonly' : ''}
                  />
                </div>
                ${!isKupon ? `
                  <div class="chip-row" aria-label="Pilih nominal cepat">
                    <button type="button" class="chip-btn" data-quick-amt="20.000" data-row-id="${row.id}">+ 20rb</button>
                    <button type="button" class="chip-btn" data-quick-amt="50.000" data-row-id="${row.id}">+ 50rb</button>
                    <button type="button" class="chip-btn" data-quick-amt="65.000" data-row-id="${row.id}">+ 65rb</button>
                  </div>
                ` : ''}
              </div>
            </div>
          </div>
        `;
      }).join('');

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">Input Kasir Harian</span>
              <h1 class="page-title">
                <span>Catat Transaksi</span>
              </h1>
            </div>
            <button type="button" class="btn btn-danger-outline" id="btn-clear-form" aria-label="Kosongkan semua baris">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-trash"/></svg>
              <span>Kosongkan</span>
            </button>
          </div>

          ${state.formErrors.length > 0 ? `
            <div class="card card-frame-out">
              <div class="card-kicker" style="color:var(--diff-neg);">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-fail"/></svg>
                <strong>Periksa ${state.formErrors.length} kesalahan input berikut:</strong>
              </div>
              <ul style="padding-left:1.25rem; margin-top:0.35rem; font-size:0.8125rem; color:var(--diff-neg);">
                ${state.formErrors.map(e => `<li>${escapeHtml(e)}</li>`).join('')}
              </ul>
            </div>
          ` : ''}

          <div class="card">
            <div class="field-group">
              <div class="card-title-row" style="margin-bottom:0.2rem;">
                <label class="field-label" for="form-date-picker">Tanggal Transaksi</label>
                <span class="pill-badge pill-accent">
                  <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-calendar"/></svg>
                  <span>${escapeHtml(dayName)}, ${escapeHtml(parsedDate.formatted)}</span>
                </span>
              </div>
              <input type="date" id="form-date-picker" class="field-input" value="${convertDDMMYYYYToISO(state.formDate)}" />
            </div>
          </div>

          <div style="margin-bottom:0.5rem;">
            ${state.formRows.length > 0 ? rowsEditor : `
              <div class="card" style="text-align:center; padding:1.85rem 1rem; color:var(--text-sec);">
                <svg class="icon icon-lg" style="margin-bottom:0.4rem;" aria-hidden="true"><use href="#ic-empty"/></svg>
                <p style="font-size:0.875rem; font-weight:600;">Belum ada baris transaksi. Tekan "+ Tambah" di bawah.</p>
              </div>
            `}
          </div>

          <div class="sticky-catat-bar no-print">
            <button type="button" class="btn btn-dashed-add" id="btn-add-empty-row" style="flex:1;" ${state.formRows.length >= 30 ? 'disabled' : ''}>
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-plus"/></svg>
              <span>Tambah (${state.formRows.length}/30)</span>
            </button>
            <button type="button" class="btn btn-primary" id="btn-review-form" style="flex:1.3;">
              <span>Periksa &amp; Simpan</span>
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-chevron-right"/></svg>
            </button>
          </div>
        </div>
      `;
    }

    function renderAkumulatifScreen() {
      const allValid = cachedInspection.validDateRows;
      let filtered = allValid;
      let labelSpan = `Seluruh periode: ${detectDateSpan(allValid)}`;

      if (state.akumulatifMode === 'rentang') {
        const s = parseDateDDMMYYYY(state.akumulatifStart);
        const e = parseDateDDMMYYYY(state.akumulatifEnd);
        if (!s || !e) {
          state.akumulatifError = 'Format tanggal tidak valid. Pilih tanggal awal dan akhir.';
          filtered = [];
        } else if (s.keyNum > e.keyNum) {
          state.akumulatifError = `Tanggal awal (${state.akumulatifStart}) tidak boleh melebihi tanggal akhir (${state.akumulatifEnd}).`;
          filtered = [];
        } else {
          state.akumulatifError = '';
          filtered = filterByDateRange(allValid, state.akumulatifStart, state.akumulatifEnd);
          labelSpan = `Rentang inklusif: ${state.akumulatifStart} s/d ${state.akumulatifEnd}`;
        }
      } else {
        state.akumulatifError = '';
      }

      const metrics = calculateMetrics(filtered);

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">${escapeHtml(labelSpan)}</span>
              <h1 class="page-title">
                <span>Rekap Akumulatif</span>
              </h1>
            </div>
          </div>

          <div class="card no-print">
            <div class="segmented-2" role="tablist" aria-label="Mode periode rekap akumulatif">
              <button type="button" class="segmented-2-btn" role="tab" data-akum-mode="semua" aria-selected="${state.akumulatifMode === 'semua'}">Seluruh Periode</button>
              <button type="button" class="segmented-2-btn" role="tab" data-akum-mode="rentang" aria-selected="${state.akumulatifMode === 'rentang'}">Rentang Tanggal</button>
            </div>

            ${state.akumulatifMode === 'rentang' ? `
              <div class="stack-date-day">
                <div class="field-group">
                  <label class="field-label" for="akum-start-picker">Tanggal Awal (Inklusif)</label>
                  <input type="date" id="akum-start-picker" class="field-input" value="${convertDDMMYYYYToISO(state.akumulatifStart)}" />
                </div>
                <div class="field-group">
                  <label class="field-label" for="akum-end-picker">Tanggal Akhir (Inklusif)</label>
                  <input type="date" id="akum-end-picker" class="field-input" value="${convertDDMMYYYYToISO(state.akumulatifEnd)}" />
                </div>
              </div>
            ` : ''}
          </div>

          ${state.akumulatifError ? `
            <div class="card card-frame-out" style="color:var(--diff-neg); font-weight:700;">
              ${escapeHtml(state.akumulatifError)}
            </div>
          ` : ''}

          ${renderDataQualityWarning(filtered)}
          ${renderSummaryCards(metrics, labelSpan)}
        </div>
      `;
    }

    function renderKategoriScreen() {
      let rows = cachedInspection.validDateRows;
      state.kategoriError = '';

      if (state.kategoriStart || state.kategoriEnd) {
        const s = parseDateDDMMYYYY(state.kategoriStart);
        const e = parseDateDDMMYYYY(state.kategoriEnd);
        if (!s || !e) {
          state.kategoriError = 'Untuk memfilter tanggal, isi Tanggal Awal dan Tanggal Akhir secara lengkap.';
          rows = [];
        } else if (s.keyNum > e.keyNum) {
          state.kategoriError = `Tanggal awal (${state.kategoriStart}) tidak boleh setelah tanggal akhir (${state.kategoriEnd}).`;
          rows = [];
        } else {
          rows = filterByDateRange(rows, state.kategoriStart, state.kategoriEnd);
        }
      }

      if (state.kategoriFilter !== 'SEMUA') {
        rows = rows.filter(r => r.category === state.kategoriFilter);
      }

      const groups = {};
      rows.forEach(r => {
        const cat = r.category || 'TIDAK DIKETAHUI';
        if (!groups[cat]) {
          groups[cat] = { kategori: cat, count: 0, masuk: 0, keluar: 0, kasbon: 0 };
        }
        groups[cat].count += 1;
        const amt = Number(r.safeAmount) || 0;
        if (INCOME_CATEGORIES.includes(cat) && (r.method === 'CASH' || r.method === 'QRIS')) {
          groups[cat].masuk += amt;
        } else if (EXPENSE_CATEGORIES.includes(cat)) {
          groups[cat].keluar += amt;
        } else if (cat === KASBON_CATEGORY) {
          groups[cat].kasbon += amt;
        }
      });

      const sorted = Object.values(groups).sort((a, b) => a.kategori.localeCompare(b.kategori));
      const totalMetrics = calculateMetrics(rows);

      const cards = sorted.map(c => {
        const isInc = INCOME_CATEGORIES.includes(c.kategori);
        const isExp = EXPENSE_CATEGORIES.includes(c.kategori);
        const frameCls = isInc ? 'card-frame-in' : (isExp ? 'card-frame-out' : 'card-frame-neutral');
        const badgeCls = isInc ? 'pill-pos' : (isExp ? 'pill-neg' : 'pill-neutral');
        return `
          <div class="card ${frameCls}" style="margin-bottom:0;">
            <div class="card-title-row">
              <strong style="font-size:0.875rem;">${escapeHtml(c.kategori)}</strong>
              <span class="pill-badge ${badgeCls}">${c.count} baris</span>
            </div>
            <div style="font-size:0.8125rem; display:flex; flex-direction:column; gap:0.25rem; margin-top:0.35rem;">
              <div style="display:flex; justify-content:space-between;"><span>Uang masuk:</span><strong class="amt-pos">+ ${formatRp(c.masuk)}</strong></div>
              <div style="display:flex; justify-content:space-between;"><span>Uang keluar:</span><strong class="amt-neg">- ${formatRp(c.keluar)}</strong></div>
              <div style="display:flex; justify-content:space-between;"><span>Kasbon:</span><strong class="amt-kasbon">${formatRp(c.kasbon)}</strong></div>
            </div>
          </div>
        `;
      }).join('');

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">Analitik Kategori</span>
              <h1 class="page-title">
                <span>Ringkasan Per Kategori</span>
              </h1>
            </div>
          </div>

          <div class="card no-print">
            <div class="cards-grid-2">
              <div class="field-group">
                <label class="field-label" for="kat-filter-select">Filter Kategori</label>
                <select id="kat-filter-select" class="field-input">
                  <option value="SEMUA" ${state.kategoriFilter === 'SEMUA' ? 'selected' : ''}>Semua Kategori</option>
                  ${ALL_CATEGORIES.map(c => `<option value="${escapeHtml(c)}" ${state.kategoriFilter === c ? 'selected' : ''}>${escapeHtml(c)}</option>`).join('')}
                </select>
              </div>
              <div class="stack-date-day">
                <div class="field-group">
                  <label class="field-label" for="kat-start-picker">Dari Tanggal (Opsional)</label>
                  <input type="date" id="kat-start-picker" class="field-input" value="${convertDDMMYYYYToISO(state.kategoriStart)}" />
                </div>
                <div class="field-group">
                  <label class="field-label" for="kat-end-picker">Sampai Tanggal (Opsional)</label>
                  <input type="date" id="kat-end-picker" class="field-input" value="${convertDDMMYYYYToISO(state.kategoriEnd)}" />
                </div>
              </div>
            </div>
          </div>

          ${state.kategoriError ? `
            <div class="card card-frame-out" style="color:var(--diff-neg); font-weight:700;">
              ${escapeHtml(state.kategoriError)}
            </div>
          ` : ''}

          ${renderDataQualityWarning(rows)}

          <div class="cards-grid-3" style="margin-bottom:1.25rem;">
            ${cards || '<div class="card">Tidak ada transaksi (0 baris).</div>'}
          </div>

          ${renderSummaryCards(totalMetrics, state.kategoriFilter)}
        </div>
      `;
    }

    function renderBandingkanScreen() {
      const mA = MONTHS_AVAILABLE.find(m => m.key === state.compareMonthA) || MONTHS_AVAILABLE[Math.max(0, MONTHS_AVAILABLE.length - 2)];
      const mB = MONTHS_AVAILABLE.find(m => m.key === state.compareMonthB) || MONTHS_AVAILABLE[MONTHS_AVAILABLE.length - 1];

      const rowsA = filterByMonth(cachedInspection.validDateRows, mA.key);
      const rowsB = filterByMonth(cachedInspection.validDateRows, mB.key);

      const sA = calculateMetrics(rowsA);
      const sB = calculateMetrics(rowsB);

      const pct = (baru, lama) => {
        if (lama === 0) return baru === 0 ? '0%' : '+100%';
        const p = ((baru - lama) / Math.abs(lama)) * 100;
        return (p > 0 ? '+' : '') + p.toFixed(1).replace('.', ',') + '%';
      };

      const ubahBadge = (baru, lama) => {
        const diff = baru - lama;
        const cls = diff > 0 ? 'pill-pos' : (diff < 0 ? 'pill-neg' : '');
        return `<span class="pill-badge ${cls}">${formatSignedRp(diff)} (${pct(baru, lama)})</span>`;
      };

      let bestIn = null;
      INCOME_CATEGORIES.forEach(cat => {
        const d = (sB.incomeByCategory[cat]?.uangMasuk || 0) - (sA.incomeByCategory[cat]?.uangMasuk || 0);
        if (!bestIn || Math.abs(d) > Math.abs(bestIn.d)) bestIn = { cat, d };
      });

      let bestOut = null;
      EXPENSE_CATEGORIES.forEach(cat => {
        const d = (sB.expenseByCategory[cat]?.total || 0) - (sA.expenseByCategory[cat]?.total || 0);
        if (!bestOut || Math.abs(d) > Math.abs(bestOut.d)) bestOut = { cat, d };
      });

      const dMasuk = sB.uangMasuk - sA.uangMasuk;
      const dKeluar = sB.uangKeluar - sA.uangKeluar;
      const dSelisih = sB.selisihKasOperasional - sA.selisihKasOperasional;
      const dKasbon = sB.kasbonTotal - sA.kasbonTotal;

      const kesimpulan = [];
      if (dMasuk > 0) kesimpulan.push(`Pemasukan naik ${formatRp(dMasuk)} (${pct(sB.uangMasuk, sA.uangMasuk)}).`);
      else if (dMasuk < 0) kesimpulan.push(`Pemasukan turun ${formatRp(-dMasuk)} (${pct(sB.uangMasuk, sA.uangMasuk)}).`);
      else kesimpulan.push('Pemasukan sama dengan bulan pembanding.');

      if (dKeluar < 0) kesimpulan.push(`Operasional lebih hemat ${formatRp(-dKeluar)} (${pct(sB.uangKeluar, sA.uangKeluar)}).`);
      else if (dKeluar > 0) kesimpulan.push(`Pengeluaran lebih besar ${formatRp(dKeluar)} (${pct(sB.uangKeluar, sA.uangKeluar)}).`);
      else kesimpulan.push('Pengeluaran sama dengan bulan pembanding.');

      if (bestIn && bestIn.d !== 0) kesimpulan.push(`Kategori pemasukan dengan perubahan terbesar: ${bestIn.cat} (${formatSignedRp(bestIn.d)}).`);
      if (bestOut && bestOut.d !== 0) kesimpulan.push(`Kategori pengeluaran dengan perubahan terbesar: ${bestOut.cat} (${formatSignedRp(bestOut.d)}).`);

      if (dKasbon > 0) kesimpulan.push(`Kasbon bertambah ${formatRp(dKasbon)}.`);
      else if (dKasbon < 0) kesimpulan.push(`Kasbon berkurang ${formatRp(-dKasbon)}.`);

      if (dSelisih > 0) kesimpulan.push(`Selisih kas operasional naik ${formatRp(dSelisih)}.`);
      else if (dSelisih < 0) kesimpulan.push(`Selisih kas operasional turun ${formatRp(-dSelisih)}.`);
      else kesimpulan.push('Selisih kas operasional sama dengan bulan pembanding.');

      const inRows = INCOME_CATEGORIES.map(cat => {
        const a = sA.incomeByCategory[cat]?.uangMasuk || 0;
        const b = sB.incomeByCategory[cat]?.uangMasuk || 0;
        return `
          <div style="padding:0.55rem 0; border-bottom:1px solid var(--border-hairline); display:flex; justify-content:space-between; align-items:center; gap:0.5rem; flex-wrap:wrap;">
            <div>
              <div style="font-weight:700; font-size:0.84rem;">${escapeHtml(cat)}</div>
              <div style="font-size:0.75rem; color:var(--text-sec);">${escapeHtml(mA.short)}: ${formatRp(a)} → ${escapeHtml(mB.short)}: ${formatRp(b)}</div>
            </div>
            ${ubahBadge(b, a)}
          </div>
        `;
      }).join('');

      const outRows = EXPENSE_CATEGORIES.map(cat => {
        const a = sA.expenseByCategory[cat]?.total || 0;
        const b = sB.expenseByCategory[cat]?.total || 0;
        return `
          <div style="padding:0.55rem 0; border-bottom:1px solid var(--border-hairline); display:flex; justify-content:space-between; align-items:center; gap:0.5rem; flex-wrap:wrap;">
            <div>
              <div style="font-weight:700; font-size:0.84rem;">${escapeHtml(cat)}</div>
              <div style="font-size:0.75rem; color:var(--text-sec);">${escapeHtml(mA.short)}: ${formatRp(a)} → ${escapeHtml(mB.short)}: ${formatRp(b)}</div>
            </div>
            ${ubahBadge(b, a)}
          </div>
        `;
      }).join('');

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">${escapeHtml(mB.label)} vs ${escapeHtml(mA.label)}</span>
              <h1 class="page-title">
                <span>Bandingkan Bulan</span>
              </h1>
            </div>
          </div>

          <div class="card no-print">
            <div class="cards-grid-2">
              <div class="field-group">
                <label class="field-label" for="comp-select-a">Bulan Pembanding (Bulan 1)</label>
                <select id="comp-select-a" class="field-input">
                  ${MONTHS_AVAILABLE.map(m => `<option value="${escapeHtml(m.key)}" ${state.compareMonthA === m.key ? 'selected' : ''}>${escapeHtml(m.label)}</option>`).join('')}
                </select>
              </div>
              <div class="field-group">
                <label class="field-label" for="comp-select-b">Bulan Evaluasi (Bulan 2)</label>
                <select id="comp-select-b" class="field-input">
                  ${MONTHS_AVAILABLE.map(m => `<option value="${escapeHtml(m.key)}" ${state.compareMonthB === m.key ? 'selected' : ''}>${escapeHtml(m.label)}</option>`).join('')}
                </select>
              </div>
            </div>
          </div>

          <div class="card card-hero">
            <div class="card-title-row">
              <span class="card-kicker">Perubahan Selisih Kas Operasional</span>
              <span class="pill-badge ${dSelisih >= 0 ? 'pill-pos' : 'pill-neg'}">
                <svg class="icon icon-sm" aria-hidden="true"><use href="${dSelisih >= 0 ? '#ic-arrow-up' : '#ic-arrow-down'}"/></svg>
                <span>${formatSignedRp(dSelisih)} (${pct(sB.selisihKasOperasional, sA.selisihKasOperasional)})</span>
              </span>
            </div>
            <div style="font-size:0.875rem; margin:0.45rem 0; color:var(--hero-sub);">
              ${escapeHtml(mA.label)}: <strong style="color:#FFF;">${formatRp(sA.selisihKasOperasional)}</strong> → ${escapeHtml(mB.label)}: <strong style="color:#FFF;">${formatRp(sB.selisihKasOperasional)}</strong>
            </div>
            <ul style="padding-left:1.25rem; font-size:0.8125rem; margin-top:0.5rem; color:#E2E8F0;">
              ${kesimpulan.map(k => `<li>${escapeHtml(k)}</li>`).join('')}
            </ul>
            <div class="operational-note">Selisih kas operasional bukan laba bersih</div>
          </div>

          <div class="cards-grid-2">
            <div class="card card-frame-in">
              <div class="card-kicker" style="margin-bottom:0.5rem; color:var(--diff-pos);"><svg class="icon icon-sm icon-in" aria-hidden="true"><use href="#ic-arrow-down"/></svg><span>Pemasukan Per Kategori</span></div>
              ${inRows}
            </div>
            <div class="card card-frame-out">
              <div class="card-kicker" style="margin-bottom:0.5rem; color:var(--diff-neg);"><svg class="icon icon-sm icon-out" aria-hidden="true"><use href="#ic-arrow-up"/></svg><span>Pengeluaran Per Kategori</span></div>
              ${outRows}
            </div>
          </div>
        </div>
      `;
    }

    function renderCariScreen() {
      let rows = cachedInspection.validDateRows;

      if (state.searchStart && state.searchEnd && !state.searchError) {
        rows = filterByDateRange(rows, state.searchStart, state.searchEnd);
      }

      // Case-insensitive "contains" search (Section I)
      const kw = state.searchKeyword.trim().toLowerCase();
      if (kw && !state.searchError) {
        rows = rows.filter(r => (
          String(r.description || '').toLowerCase().includes(kw) ||
          String(r.category || '').toLowerCase().includes(kw) ||
          String(r.method || '').toLowerCase().includes(kw) ||
          r.parsedDate.formatted.toLowerCase().includes(kw)
        ));
      } else if (state.searchError) {
        rows = [];
      }

      const summary = calculateMetrics(rows);

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">Pencarian Mutasi</span>
              <h1 class="page-title">
                <span>Cari Transaksi</span>
              </h1>
            </div>
          </div>

          <div class="card no-print">
            <form id="form-search" novalidate>
              <div class="cards-grid-2">
                <div class="field-group">
                  <label class="field-label" for="search-kw">Kata Kunci Deskripsi / Transaksi</label>
                  <input type="text" id="search-kw" class="field-input" value="${escapeHtml(state.searchKeyword)}" placeholder="Ketik kata kunci pencarian…" />
                  <div class="chip-row" role="group" aria-label="Pintasan pencarian deskripsi">
                    <button type="button" class="chip-btn" data-quick-search="MAKAN">MAKAN</button>
                    <button type="button" class="chip-btn" data-quick-search="KIT BAN">KIT BAN</button>
                    <button type="button" class="chip-btn" data-quick-search="KIT DASHBOARD">KIT DASHBOARD</button>
                    <button type="button" class="chip-btn" data-quick-search="LISTRIK">LISTRIK</button>
                    <button type="button" class="chip-btn" data-quick-search="AIR">AIR</button>
                  </div>
                </div>
                <div class="stack-date-day">
                  <div class="field-group">
                    <label class="field-label" for="search-start">Dari Tanggal (Opsional)</label>
                    <input type="date" id="search-start" class="field-input" value="${convertDDMMYYYYToISO(state.searchStart)}" />
                  </div>
                  <div class="field-group">
                    <label class="field-label" for="search-end">Sampai Tanggal (Opsional)</label>
                    <input type="date" id="search-end" class="field-input" value="${convertDDMMYYYYToISO(state.searchEnd)}" />
                  </div>
                </div>
              </div>
              <div style="display:flex; justify-content:flex-end; gap:0.55rem; margin-top:0.95rem;">
                <button type="button" class="btn btn-subtle" id="btn-reset-search">Reset</button>
                <button type="submit" class="btn btn-primary">Terapkan Pencarian</button>
              </div>
            </form>
          </div>

          ${state.searchError ? `
            <div class="card card-frame-out" style="color:var(--diff-neg); font-weight:700;">
              ${escapeHtml(state.searchError)}
            </div>
          ` : ''}

          <div class="card">
            <div class="card-title-row" style="margin-bottom:0.65rem;">
              <span class="card-kicker">Hasil Pencarian</span>
              <span class="pill-badge">${rows.length} baris ditemukan</span>
            </div>
            ${renderTransactionsCollection(rows, state.searchPage, 'cari', false)}
          </div>

          ${rows.length > 0 ? `
            <div style="margin-top:1.25rem;">
              ${renderSummaryCards(summary, `Hasil pencarian: ${state.searchKeyword || 'Semua'}`)}
            </div>
          ` : ''}
        </div>
      `;
    }

    function renderBantuanScreen() {
      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">Dukungan Teknis</span>
              <h1 class="page-title">
                <span>Pusat Bantuan Developer</span>
              </h1>
            </div>
          </div>

          ${state.devReplyBanner ? `
            <div class="card card-frame-in">
              <div style="font-weight:800; color:var(--diff-pos); display:flex; align-items:center; gap:0.4rem;">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-check"/></svg>
                <span>${escapeHtml(state.devReplyBanner.title)}</span>
              </div>
              <p style="font-size:0.8125rem; margin-top:0.25rem;">${escapeHtml(state.devReplyBanner.body)}</p>
              <div style="font-size:0.78rem; font-variant-numeric:tabular-nums; margin-top:0.35rem; font-weight:700;">Ref: ${escapeHtml(state.devRefCode)}</div>
            </div>
          ` : ''}

          ${state.devError ? `
            <div class="card card-frame-out" style="color:var(--diff-neg); font-weight:700;">
              ${escapeHtml(state.devError)}
            </div>
          ` : ''}

          <div class="card">
            <div class="card-kicker" style="margin-bottom:0.75rem;">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-dev"/></svg>
              <span>Formulir Laporan Kendala</span>
            </div>

            <form id="form-dev-help" novalidate>
              <div class="field-group" style="margin-bottom:0.85rem;">
                <label class="field-label" for="dev-urg-field">Tingkat Urgensi</label>
                <select id="dev-urg-field" class="field-input">
                  <option value="biasa" ${state.devUrgency === 'biasa' ? 'selected' : ''}>Biasa (Pertanyaan / Masukan)</option>
                  <option value="SANGAT PENTING" ${state.devUrgency === 'SANGAT PENTING' ? 'selected' : ''}>SANGAT PENTING (Kendala Operasional Kasir)</option>
                </select>
              </div>

              <div class="field-group" style="margin-bottom:1rem;">
                <label class="field-label" for="dev-msg-field">Pesan Kendala (Maksimal 1000 karakter)</label>
                <textarea id="dev-msg-field" rows="4" class="field-input" placeholder="Jelaskan kendala yang sedang dialami...">${escapeHtml(state.devMessage)}</textarea>
              </div>

              <button type="submit" class="btn btn-primary" id="btn-submit-dev-help" style="width:100%;" ${state.devSubmitting ? 'disabled' : ''}>
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-check"/></svg>
                <span>${state.devSubmitting ? 'Mengirim pesan…' : 'Kirim Pesan Bantuan'}</span>
              </button>
            </form>
          </div>
        </div>
      `;
    }

    function renderPengaturanScreen() {
      const webhookCardContent = state.devUnlocked
        ? `
          <div class="card-title-row" style="margin-bottom:0.85rem;">
            <span class="card-kicker">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-settings"/></svg>
              <span>Konfigurasi Sumber Data</span>
            </span>
            <button type="button" class="btn btn-subtle" id="btn-lock-dev-settings">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-lock"/></svg>
              <span>Kunci Dev Console</span>
            </button>
          </div>

          <div class="field-group" style="margin-bottom:0.85rem;">
            <label class="field-label" for="cfg-mode-select">Mode Operasional Aplikasi</label>
            <select id="cfg-mode-select" class="field-input">
              <option value="demo" ${state.n8nMode === 'demo' ? 'selected' : ''}>Mode Demo (Data Contoh Lokal)</option>
              <option value="webhook" ${state.n8nMode === 'webhook' ? 'selected' : ''}>Mode Online (Produksi Live)</option>
            </select>
          </div>

          <div class="field-group" style="margin-bottom:0.85rem;">
            <label class="field-label" for="cfg-get-input">Endpoint GET (Laporan Transaksi)</label>
            <input type="url" id="cfg-get-input" class="field-input" value="${escapeHtml(state.n8nGetUrl)}" placeholder="https://example.com/endpoint/laporan" />
          </div>

          <div class="field-group" style="margin-bottom:0.85rem;">
            <label class="field-label" for="cfg-post-input">Endpoint POST (Simpan Transaksi)</label>
            <input type="url" id="cfg-post-input" class="field-input" value="${escapeHtml(state.n8nPostUrl)}" placeholder="https://example.com/endpoint/input" />
          </div>

          <div class="field-group" style="margin-bottom:1.1rem;">
            <label class="field-label" for="cfg-dev-input">Endpoint POST Developer (Pesan Bantuan)</label>
            <input type="url" id="cfg-dev-input" class="field-input" value="${escapeHtml(state.n8nDevUrl)}" placeholder="https://example.com/endpoint/dev-help" />
          </div>

          <button type="button" class="btn btn-primary" id="btn-save-settings" style="width:100%;">
            <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-check"/></svg>
            <span>Simpan &amp; Terapkan Konfigurasi</span>
          </button>
        `
        : `
          <div class="card-kicker" style="margin-bottom:0.4rem;">
            <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-lock"/></svg>
            <span>Otentikasi Dev Console (Khusus Developer)</span>
          </div>
          <p style="font-size:0.84375rem; color:var(--text-sec); margin-bottom:0.5rem;">
            Pengaturan dikunci. Konfigurasi diatur langsung oleh developer.
          </p>
        `;

      return `
        <div>
          <div class="page-header">
            <div>
              <span class="month-eyebrow">Sistem Konfigurasi</span>
              <h1 class="page-title">
                <span>Dev Console</span>
              </h1>
            </div>
            <button type="button" class="btn btn-subtle" data-nav="beranda">
              <span>Kembali ke Beranda</span>
            </button>
          </div>

          <div class="card">
            ${webhookCardContent}
          </div>
        </div>
      `;
    }

    /* ==========================================================================
       8. CLOUD INDICATOR, SMOOTH REGION UPDATER & SINGLE-CALL PIN WELCOME FLOW
       ========================================================================== */
    function isEffectiveDarkMode() {
      if (state.themeOverride === 'dark') return true;
      if (state.themeOverride === 'light') return false;
      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }

    function updateThemeToggleUI() {
      const iconUse = document.getElementById('theme-toggle-icon');
      const labelEl = document.getElementById('theme-toggle-label');
      const isDark = isEffectiveDarkMode();
      if (iconUse) iconUse.setAttribute('href', isDark ? '#ic-sun' : '#ic-moon');
      if (labelEl) labelEl.textContent = isDark ? 'Terang' : 'Gelap';
    }

    function applyClientNameBranding() {
      document.title = `${clientName} — Sistem Kasir & Laporan Keuangan`;
      document.querySelectorAll('[data-client-name]').forEach(el => {
        el.textContent = clientName;
      });
    }

    function renderPinDots(isError = false) {
      const dots = document.querySelectorAll('#pin-dots-container .pin-dot');
      dots.forEach((dot, idx) => {
        dot.classList.toggle('filled', idx < state.pinBuffer.length);
        dot.classList.toggle('error', isError);
      });
    }

    function handlePinDigitInput(digit) {
      if (state.isAuthenticated || state.pinVerifying) return;
      if (state.pinBuffer.length >= 6) return;
      const errBox = document.getElementById('pin-lock-error');
      if (errBox) errBox.style.display = 'none';

      state.pinBuffer += String(digit);
      renderPinDots(false);

      if (state.pinBuffer.length === 6) {
        verifyEnteredPin(state.pinBuffer, false);
      }
    }

    // Unified PIN + Single Data Fetch Flow (Section E)
    async function verifyEnteredPin(pinCode, fromSaved = false) {
      if (state.pinVerifying) return;
      const overlay = document.getElementById('pin-lock-overlay');
      const pinPadView = document.getElementById('pin-pad-view');
      const welcomeView = document.getElementById('welcome-card-view');
      const welcomeTxt = document.getElementById('welcome-loading-text');
      const errBox = document.getElementById('pin-lock-error');
      const errTxt = document.getElementById('pin-lock-error-text');

      const showError = (msg) => {
        state.pinVerifying = false;
        stopNetworkLoadingUI();
        if (welcomeView) welcomeView.style.display = 'none';
        if (pinPadView) pinPadView.style.display = 'block';
        renderPinDots(true);
        state.pinBuffer = '';
        if (errTxt) errTxt.textContent = msg;
        if (errBox) errBox.style.display = 'flex';
        setTimeout(() => {
          if (state.pinBuffer.length === 0) renderPinDots(false);
        }, 320);
      };

      // Check Demo PIN first when in demo mode
      if (state.n8nMode !== 'webhook') {
        if (pinCode !== SIMULATION_PINS.OWNER) {
          if (fromSaved) {
            try { localStorage.removeItem('carwash_pin'); } catch (e) {}
          }
          showError('PIN salah. Periksa kembali PIN akses.');
          return;
        }
      } else {
        const targetUrl = state.n8nGetUrl.trim();
        if (!targetUrl) {
          showError('Konfigurasi koneksi belum lengkap. Hubungi developer.');
          return;
        }
      }

      // Transition into Welcome Glass Card & run the single data call
      state.pinVerifying = true;
      state.n8nSecretPin = pinCode;
      if (pinPadView) pinPadView.style.display = 'none';
      if (welcomeTxt) welcomeTxt.textContent = 'Menyiapkan laporan hari ini…';
      if (welcomeView) welcomeView.style.display = 'block';
      startNetworkLoadingUI('Menyiapkan laporan hari ini…', false);

      try {
        const rawData = await fetchTransactionsFromSource();
        cachedRawTransactions = rawData;
        cachedInspection = inspectAllTransactions(cachedRawTransactions);
        state.hasLoadedInitialData = true;
        state.fetchError = null;
        state.activeWibToday = getTodayWIB();
        updateSyncTimestampDisplay();

        state.isAuthenticated = true;
        state.authRole = 'owner';
        state.pinBuffer = '';
        lastActivityTime = Date.now();
        try { localStorage.setItem('carwash_pin', pinCode); } catch (e) {}

        renderPinDots(false);
        renderApp(true, false);

        if (overlay) {
          overlay.classList.add('fade-out');
          setTimeout(() => {
            overlay.classList.add('hidden');
            overlay.classList.remove('fade-out');
          }, 220);
        }
      } catch (err) {
        state.n8nSecretPin = '';
        const isAuthError = /HTTP (401|403)/.test(String(err && err.message));
        if (fromSaved && isAuthError) {
          try { localStorage.removeItem('carwash_pin'); } catch (e) {}
        }
        const msg = isAuthError
          ? 'PIN salah. Periksa kembali PIN akses.'
          : 'Server belum siap atau koneksi bermasalah. Coba lagi.';
        showError(msg);
      } finally {
        state.pinVerifying = false;
        stopNetworkLoadingUI();
      }
    }

    function lockApplication() {
      state.isAuthenticated = false;
      state.n8nSecretPin = '';
      try { localStorage.removeItem('carwash_pin'); } catch (e) {}
      state.authRole = null;
      state.devUnlocked = false;
      state.pinBuffer = '';
      const overlay = document.getElementById('pin-lock-overlay');
      const pinPadView = document.getElementById('pin-pad-view');
      const welcomeView = document.getElementById('welcome-card-view');
      const errBox = document.getElementById('pin-lock-error');

      if (errBox) errBox.style.display = 'none';
      if (welcomeView) welcomeView.style.display = 'none';
      if (pinPadView) pinPadView.style.display = 'block';
      if (overlay) {
        overlay.classList.remove('hidden', 'fade-out');
      }
      renderPinDots(false);
    }

    // Section A: Inline SVG Cloud Indicator with overlapping lower-right check (online) or X (demo/offline)
    function updateTopModeBanner() {
      const webhookBanner = document.getElementById('webhook-mode-banner');
      const devTopBtn = document.getElementById('btn-dev-console-top');

      if (devTopBtn) {
        devTopBtn.style.display = state.devUnlocked ? 'inline-flex' : 'none';
      }

      if (webhookBanner) {
        const isOnlineConnected =
          state.n8nMode === 'webhook' &&
          state.n8nGetUrl.trim() !== '' &&
          state.n8nPostUrl.trim() !== '' &&
          !state.fetchError;

        if (isOnlineConnected) {
          const label = 'Status Koneksi: Online Terhubung';
          webhookBanner.setAttribute('aria-label', label);
          webhookBanner.setAttribute('title', label);
          webhookBanner.innerHTML = `
            <svg class="cloud-status-svg" viewBox="0 0 28 24" aria-hidden="true">
              <path d="M6.5 17.5h11a4 4 0 0 0 .7-7.94A5.5 5.5 0 0 0 7.4 8.2 4.5 4.5 0 0 0 6.5 17.5z" fill="rgba(16, 185, 129, 0.18)" stroke="#10B981" stroke-width="1.75" stroke-linejoin="round"/>
              <circle cx="19.5" cy="16.5" r="5.2" fill="#10B981" stroke="var(--bg-page)" stroke-width="1.4"/>
              <path d="M17.2 16.5l1.6 1.6 3.1-3.1" fill="none" stroke="#FFFFFF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          `;
        } else {
          const label = state.n8nMode === 'demo'
            ? 'Status Koneksi: Mode Demo (Offline Lokal)'
            : 'Status Koneksi: Offline / Belum Terhubung';
          webhookBanner.setAttribute('aria-label', label);
          webhookBanner.setAttribute('title', label);
          webhookBanner.innerHTML = `
            <svg class="cloud-status-svg" viewBox="0 0 28 24" aria-hidden="true">
              <path d="M6.5 17.5h11a4 4 0 0 0 .7-7.94A5.5 5.5 0 0 0 7.4 8.2 4.5 4.5 0 0 0 6.5 17.5z" fill="rgba(239, 68, 68, 0.18)" stroke="#EF4444" stroke-width="1.75" stroke-linejoin="round"/>
              <circle cx="19.5" cy="16.5" r="5.2" fill="#EF4444" stroke="var(--bg-page)" stroke-width="1.4"/>
              <path d="M17.5 14.5l4 4M21.5 14.5l-4 4" fill="none" stroke="#FFFFFF" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
          `;
        }
      }
      updateThemeToggleUI();
    }

    function updateNavigationHighlight() {
      const navBtns = document.querySelectorAll('.nav-btn[data-nav]');
      let mobileIdx = -1;

      navBtns.forEach(btn => {
        const target = btn.getAttribute('data-nav');
        if (target === state.screen) {
          btn.setAttribute('aria-current', 'page');
          if (btn.hasAttribute('data-nav-idx')) {
            mobileIdx = Number(btn.getAttribute('data-nav-idx'));
          }
        } else {
          btn.removeAttribute('aria-current');
        }
      });

      const morphLine1 = document.querySelector('.morph-line-1');
      const morphLine2 = document.querySelector('.morph-line-2');
      if (morphLine1 && morphLine2) {
        if (state.screen === 'catat') {
          morphLine1.setAttribute('d', 'M6 12.5l4 4');
          morphLine2.setAttribute('d', 'M10 16.5l8.5-8.5');
        } else {
          morphLine1.setAttribute('d', 'M12 5v14');
          morphLine2.setAttribute('d', 'M5 12h14');
        }
      }

      const pill = document.getElementById('mobile-nav-pill');
      if (pill) {
        if (mobileIdx >= 0 && mobileIdx <= 3) {
          pill.style.opacity = '1';
          pill.style.transform = `translate3d(${mobileIdx * 100}%, 0, 0)`;
        } else {
          pill.style.opacity = '0';
        }
      }
    }

    function renderApp(animateNumbers = false, animateTransition = false) {
      updateTopModeBanner();
      updateNavigationHighlight();

      const region = document.getElementById('view-region');
      if (!region) return;

      if (animateTransition) {
        region.classList.add('view-enter');
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            region.classList.remove('view-enter');
          });
        });
      }

      if (state.isLoading && !state.hasLoadedInitialData) {
        region.innerHTML = renderSkeletonScreen();
        return;
      }

      if (state.fetchError && state.screen !== 'pengaturan' && state.screen !== 'bantuan') {
        region.innerHTML = `
          <div class="card card-frame-out" style="text-align:center; padding:2.25rem 1.25rem;">
            <svg class="icon icon-lg" style="color:var(--diff-neg); margin-bottom:0.6rem;" aria-hidden="true"><use href="#ic-offline"/></svg>
            <h2 style="font-size:1.15rem; font-weight:800; color:var(--diff-neg);">Gagal Memuat Data Laporan</h2>
            <p style="font-size:0.85rem; color:var(--text-sec); margin:0.45rem auto 1.25rem; max-width:460px;">
              ${escapeHtml(state.fetchError)}. Data contoh dinonaktifkan pada Mode Online agar tidak menampilkan angka yang keliru.
            </p>
            <div style="display:flex; gap:0.55rem; justify-content:center; flex-wrap:wrap;">
              <button type="button" class="btn btn-primary" id="btn-retry-fetch">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-refresh"/></svg>
                <span>Coba Muat Ulang</span>
              </button>
              <button type="button" class="btn btn-subtle" data-nav="bantuan">
                <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-dev"/></svg>
                <span>Hubungi Developer</span>
              </button>
            </div>
          </div>
        `;
        return;
      }

      switch (state.screen) {
        case 'beranda': region.innerHTML = renderBerandaScreen(); break;
        case 'rekap': region.innerHTML = renderRekapScreen(); break;
        case 'catat': region.innerHTML = renderCatatScreen(); break;
        case 'akumulatif': region.innerHTML = renderAkumulatifScreen(); break;
        case 'kategori': region.innerHTML = renderKategoriScreen(); break;
        case 'bandingkan': region.innerHTML = renderBandingkanScreen(); break;
        case 'cari': region.innerHTML = renderCariScreen(); break;
        case 'bantuan': region.innerHTML = renderBantuanScreen(); break;
        case 'pengaturan': region.innerHTML = renderPengaturanScreen(); break;
        default: region.innerHTML = renderBerandaScreen();
      }

      if (animateNumbers) {
        runCountUpNumbers();
      }
      if (state.screen === 'beranda') {
        initDailyCarousel();
      }
      if (state.screen === 'rekap' && state.rekapTab === 'ringkasan') {
        observeBarChart();
      }
    }

    /* ==========================================================================
       9. MODAL BOTTOM SHEET (ANALYTICS MENU & ROW DETAIL)
       ========================================================================== */
    function openSheetModal(title, contentHtml) {
      const dialog = document.getElementById('sheet-modal');
      const titleEl = document.getElementById('sheet-modal-title');
      const bodyEl = document.getElementById('sheet-modal-body');
      if (!dialog || !titleEl || !bodyEl) return;
      titleEl.textContent = title;
      bodyEl.innerHTML = contentHtml;
      dialog.showModal();
    }

    function closeSheetModal() {
      const dialog = document.getElementById('sheet-modal');
      if (dialog && dialog.open) dialog.close();
    }

    function openMoreMenuSheet() {
      const html = `
        <div class="control-widget-grid">
          <button type="button" class="control-widget-card" data-nav="akumulatif">
            <span style="width:36px; height:36px; border-radius:10px; background-color:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center;">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-book"/></svg>
            </span>
            <div>
              <div style="font-weight:700; font-size:0.875rem;">Rekap Akumulatif</div>
              <div style="font-size:0.75rem; color:var(--text-sec); margin-top:0.1rem;">Total seluruh periode &amp; rentang tanggal</div>
            </div>
          </button>

          <button type="button" class="control-widget-card" data-nav="kategori">
            <span style="width:36px; height:36px; border-radius:10px; background-color:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center;">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-grid"/></svg>
            </span>
            <div>
              <div style="font-weight:700; font-size:0.875rem;">Per Kategori</div>
              <div style="font-size:0.75rem; color:var(--text-sec); margin-top:0.1rem;">Rincian carwash, detailing &amp; pengeluaran</div>
            </div>
          </button>

          <button type="button" class="control-widget-card" data-nav="bandingkan">
            <span style="width:36px; height:36px; border-radius:10px; background-color:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center;">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-compare"/></svg>
            </span>
            <div>
              <div style="font-weight:700; font-size:0.875rem;">Bandingkan Bulan</div>
              <div style="font-size:0.75rem; color:var(--text-sec); margin-top:0.1rem;">Evaluasi kenaikan &amp; penghematan kas</div>
            </div>
          </button>

          <button type="button" class="control-widget-card" data-nav="bantuan">
            <span style="width:36px; height:36px; border-radius:10px; background-color:var(--diff-pos-bg); color:var(--diff-pos); display:inline-flex; align-items:center; justify-content:center;">
              <svg class="icon icon-sm" aria-hidden="true"><use href="#ic-dev"/></svg>
            </span>
            <div>
              <div style="font-weight:700; font-size:0.875rem;">Pusat Bantuan Dev</div>
              <div style="font-size:0.75rem; color:var(--text-sec); margin-top:0.1rem;">Kirim laporan kendala teknis</div>
            </div>
          </button>
        </div>
      `;
      openSheetModal('Menu Analitik & Pusat Bantuan', html);
    }

    function openRowDetailSheet(rowNumber) {
      const row = cachedInspection.validDateRows.find(r => r.rowNumber === rowNumber);
      if (!row) return;

      const isIncome = INCOME_CATEGORIES.includes(row.category);
      const isExpense = EXPENSE_CATEGORIES.includes(row.category);
      const isKasbon = row.category === KASBON_CATEGORY;

      const colMasuk = isIncome && (row.method === 'CASH' || row.method === 'QRIS') ? row.safeAmount : 0;
      const colKeluar = isExpense ? row.safeAmount : 0;
      const colKasbon = isKasbon ? row.safeAmount : 0;

      const html = `
        <div style="display:flex; flex-direction:column; gap:0.65rem; font-size:0.875rem;">
          <div style="font-size:1.1rem; font-weight:800;">${escapeHtml(row.description)}</div>
          <div style="background-color:var(--bg-subtle); padding:0.95rem; border-radius:var(--radius-ctrl); display:flex; flex-direction:column; gap:0.45rem;">
            <div style="display:flex; justify-content:space-between;"><span>Baris Sumber Sheet:</span><strong>#${row.rowNumber}</strong></div>
            <div style="display:flex; justify-content:space-between;"><span>Tanggal:</span><strong>${escapeHtml(row.parsedDate.formatted)} (${escapeHtml(row.parsedDate.dayName)})</strong></div>
            <div style="display:flex; justify-content:space-between;"><span>Kategori (TRANSAKSI):</span><strong>${escapeHtml(row.category)}</strong></div>
            <div style="display:flex; justify-content:space-between;"><span>Metode (KETERANGAN):</span><strong>${escapeHtml(row.method)}</strong></div>
            <div style="display:flex; justify-content:space-between;"><span>Kolom UANG MASUK:</span><strong class="amt-pos">+ ${formatRp(colMasuk)}</strong></div>
            <div style="display:flex; justify-content:space-between;"><span>Kolom UANG KELUAR:</span><strong class="amt-neg">- ${formatRp(colKeluar)}</strong></div>
            <div style="display:flex; justify-content:space-between;"><span>Kolom KASBON:</span><strong>${formatRp(colKasbon)}</strong></div>
          </div>
          ${row.hasAmountIssue ? '<div class="pill-badge pill-neg">Baris ini memiliki nominal tidak terbaca di Sheet dan dihitung Rp 0.</div>' : ''}
        </div>
      `;
      openSheetModal(`Penelusuran Baris #${row.rowNumber}`, html);
    }

    /* ==========================================================================
       10. CENTRALIZED EVENT LISTENERS, INACTIVITY LOCK & WIB DAY ROLLOVER
       ========================================================================== */
    function initEventListeners() {
      // Activity tracking for 5-hour auto-lock
      ['pointerdown', 'keydown', 'scroll', 'touchstart'].forEach(evtName => {
        window.addEventListener(evtName, () => {
          recordUserActivity();
        }, { passive: true });
      });

      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') {
          const now = Date.now();
          if (state.isAuthenticated && (now - lastActivityTime > AUTO_LOCK_MS)) {
            lockApplication();
            showToast('Sesi dikunci otomatis setelah 5 jam tanpa aktivitas.', false);
          } else {
            lastActivityTime = now;
            checkWibDateRollover();
          }
        }
      });

      // Periodic check for WIB midnight rollover while open
      setInterval(() => {
        checkWibDateRollover();
      }, 30000);

      // Secret Dev Console trigger (hold 1.5s or tap 5x on brand)
      const brandBadge = document.getElementById('brand-header-badge');
      const sidebarBrand = document.querySelector('.sidebar-brand');
      let brandHoldTimer = null;
      let tapCount = 0;
      let tapResetTimer = null;

      const openSecretDevConsole = () => {
        if (brandBadge) brandBadge.classList.remove('holding');
        if (brandHoldTimer) {
          clearTimeout(brandHoldTimer);
          brandHoldTimer = null;
        }
        state.screen = 'pengaturan';
        closeSheetModal();
        renderApp(false, true);
        showToast('Dev Console dibuka', true);
      };

      const startBrandHold = (e) => {
        if (e.type === 'mousedown' && e.button !== 0) return;
        if (brandBadge) brandBadge.classList.add('holding');
        if (brandHoldTimer) clearTimeout(brandHoldTimer);
        brandHoldTimer = setTimeout(() => {
          openSecretDevConsole();
        }, 1500);
      };

      const cancelBrandHold = () => {
        if (brandBadge) brandBadge.classList.remove('holding');
        if (brandHoldTimer) {
          clearTimeout(brandHoldTimer);
          brandHoldTimer = null;
        }
      };

      const handleBrandTap = () => {
        tapCount += 1;
        if (tapResetTimer) clearTimeout(tapResetTimer);
        if (tapCount >= 5) {
          tapCount = 0;
          openSecretDevConsole();
          return;
        }
        if (tapCount === 3) {
          showToast('Ketuk 2x lagi untuk membuka Dev Console', false);
        }
        tapResetTimer = setTimeout(() => {
          tapCount = 0;
        }, 1800);
      };

      [brandBadge, sidebarBrand].forEach(el => {
        if (!el) return;
        el.style.cursor = 'pointer';
        el.addEventListener('mousedown', startBrandHold);
        el.addEventListener('mouseup', cancelBrandHold);
        el.addEventListener('mouseleave', cancelBrandHold);
        el.addEventListener('touchstart', startBrandHold, { passive: true });
        el.addEventListener('touchend', cancelBrandHold);
        el.addEventListener('touchcancel', cancelBrandHold);
        el.addEventListener('click', handleBrandTap);
        el.addEventListener('contextmenu', e => e.preventDefault());
      });

      // Daily chart carousel (Beranda): swipe-to-select, no tapping
      bindDailyCarouselEvents();

      // Hover / Touch on 6-Month Bar Chart in Rekap
      document.addEventListener('pointerover', (e) => {
        const colGroup = e.target.closest('[data-chart-hover]');
        if (colGroup) {
          const hoveredKey = colGroup.getAttribute('data-chart-hover');
          if (hoveredKey && state.hoveredChartMonth !== hoveredKey) {
            state.hoveredChartMonth = hoveredKey;
            const monthRows = filterByMonth(cachedInspection.validDateRows, hoveredKey);
            const met = calculateMetrics(monthRows);
            const mObj = MONTHS_AVAILABLE.find(m => m.key === hoveredKey);
            const tooltipBox = document.getElementById('chart-tooltip-box');
            if (tooltipBox && mObj) {
              tooltipBox.innerHTML = `
                <div style="font-weight:700; color:var(--text-main);">${escapeHtml(mObj.label)}</div>
                <div class="chart-tooltip-metrics">
                  <div class="chart-metric-item">
                    <span class="chart-metric-label">Masuk</span>
                    <strong class="amt-pos chart-metric-val">+ ${formatRp(met.uangMasuk)}</strong>
                  </div>
                  <div class="chart-metric-item">
                    <span class="chart-metric-label">Keluar</span>
                    <strong class="amt-neg chart-metric-val">- ${formatRp(met.uangKeluar)}</strong>
                  </div>
                  <div class="chart-metric-item">
                    <span class="chart-metric-label">Selisih</span>
                    <strong class="chart-metric-val" style="color:var(--text-main);">${formatRp(met.selisihKasOperasional)}</strong>
                  </div>
                </div>
              `;
            }
          }
        }
      });

      document.addEventListener('click', async (e) => {
        // Navigation menu switch (in-memory, smooth transition, no network loading)
        const navBtn = e.target.closest('[data-nav]');
        if (navBtn) {
          const targetScreen = navBtn.getAttribute('data-nav');
          const changed = state.screen !== targetScreen;
          if (changed && targetScreen === 'beranda') state.selectedDailyChartDate = null;
          state.screen = targetScreen;
          closeSheetModal();
          renderApp(changed && ['rekap', 'akumulatif'].includes(targetScreen), changed);
          window.scrollTo({ top: 0, behavior: 'smooth' });
          return;
        }

        if (e.target.closest('#btn-open-more')) {
          openMoreMenuSheet();
          return;
        }

        if (e.target.closest('#btn-close-sheet')) {
          closeSheetModal();
          return;
        }

        if (e.target.closest('#btn-reload-top') || e.target.closest('#btn-retry-fetch')) {
          if (isNetworkBusy) return;
          await loadTransactionsData(true, 'Memperbarui data…');
          return;
        }

        const monthBtn = e.target.closest('[data-pick-month]');
        if (monthBtn) {
          const newMonth = monthBtn.getAttribute('data-pick-month');
          if (newMonth && state.selectedMonth !== newMonth) {
            state.selectedMonth = newMonth;
            state.hoveredChartMonth = newMonth;
            state.rekapPage = 1;
            renderApp(true, false);
          }
          return;
        }

        const rekapTabBtn = e.target.closest('[data-rekap-tab]');
        if (rekapTabBtn) {
          const nextTab = rekapTabBtn.getAttribute('data-rekap-tab');
          if (state.rekapTab !== nextTab) {
            state.rekapTab = nextTab;
            state.rekapPage = 1;
            renderApp(true, false);
          }
          return;
        }

        const akumModeBtn = e.target.closest('[data-akum-mode]');
        if (akumModeBtn) {
          state.akumulatifMode = akumModeBtn.getAttribute('data-akum-mode');
          renderApp(true, false);
          return;
        }

        const pageBtn = e.target.closest('[data-page-step]');
        if (pageBtn) {
          const [prefix, dir] = pageBtn.getAttribute('data-page-step').split(':');
          if (prefix === 'rekap') state.rekapPage += (dir === 'next' ? 1 : -1);
          if (prefix === 'cari') state.searchPage += (dir === 'next' ? 1 : -1);
          renderApp(false, false);
          return;
        }

        const inspectEl = e.target.closest('[data-inspect-row]');
        if (inspectEl) {
          openRowDetailSheet(Number(inspectEl.getAttribute('data-inspect-row')));
          return;
        }

        const pinDigitBtn = e.target.closest('[data-pin-digit]');
        if (pinDigitBtn) {
          handlePinDigitInput(pinDigitBtn.getAttribute('data-pin-digit'));
          return;
        }

        const pinActionBtn = e.target.closest('[data-pin-action]');
        if (pinActionBtn) {
          if (state.pinVerifying) return;
          const action = pinActionBtn.getAttribute('data-pin-action');
          if (action === 'clear') {
            state.pinBuffer = '';
          } else if (action === 'backspace') {
            state.pinBuffer = state.pinBuffer.slice(0, -1);
          }
          renderPinDots(false);
          return;
        }

        if (e.target.closest('#btn-lock-app')) {
          lockApplication();
          return;
        }

        if (e.target.closest('#btn-lock-dev-settings')) {
          state.devUnlocked = false;
          renderApp(false, false);
          showToast('Dev Console dikunci kembali', false);
          return;
        }

        if (e.target.closest('#btn-theme-toggle')) {
          const nextTheme = isEffectiveDarkMode() ? 'light' : 'dark';
          state.themeOverride = nextTheme;
          document.documentElement.setAttribute('data-color-scheme', nextTheme);
          updateThemeToggleUI();
          return;
        }

        const quickAmtBtn = e.target.closest('[data-quick-amt]');
        if (quickAmtBtn) {
          const rowId = Number(quickAmtBtn.getAttribute('data-row-id'));
          const amtVal = quickAmtBtn.getAttribute('data-quick-amt');
          const row = state.formRows.find(r => r.id === rowId);
          if (row && row.method !== 'KUPON') {
            row.amountRaw = amtVal;
            const inputEl = document.getElementById(`r-amt-${rowId}`);
            if (inputEl) {
              inputEl.value = amtVal;
              inputEl.setAttribute('aria-invalid', 'false');
            }
          }
          return;
        }

        if (e.target.closest('#btn-add-empty-row')) {
          if (state.formRows.length < 30) {
            const newId = state.formNextId++;
            state.formRows.push({
              id: newId,
              description: '',
              category: 'CARWASH MEDIUM',
              amountRaw: '50.000',
              method: 'CASH'
            });
            renderApp(false, false);
            setTimeout(() => {
              const newDescInput = document.getElementById(`r-desc-${newId}`);
              if (newDescInput) {
                newDescInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
                newDescInput.focus();
              }
            }, 60);
          }
          return;
        }

        const remRow = e.target.closest('[data-remove-row]');
        if (remRow) {
          const id = Number(remRow.getAttribute('data-remove-row'));
          state.formRows = state.formRows.filter(r => r.id !== id);
          renderApp(false, false);
          return;
        }

        if (e.target.closest('#btn-clear-form')) {
          state.formRows = [];
          state.formErrors = [];
          state.formSaveErrorBanner = '';
          renderApp(false, false);
          return;
        }

        if (e.target.closest('#btn-review-form')) {
          state.formErrors = validateSubmissionBatch();
          state.formSaveErrorBanner = '';
          if (state.formErrors.length === 0) {
            state.formStep = 'confirm';
          }
          renderApp(true, true);
          window.scrollTo({ top: 0, behavior: 'smooth' });
          return;
        }

        if (e.target.closest('#btn-confirm-koreksi')) {
          state.formRefPengajuan = null;
          state.formStep = 'input';
          state.formSaveErrorBanner = '';
          renderApp(false, true);
          return;
        }

        if (e.target.closest('#btn-confirm-batal')) {
          state.formRefPengajuan = null;
          state.formRows = [];
          state.formErrors = [];
          state.formSaveErrorBanner = '';
          state.formStep = 'input';
          renderApp(false, true);
          showToast('Pengajuan dibatalkan. Data tidak disimpan.', false);
          return;
        }

        // Save Batch Transaction Action (Anti-Double-Submit + Immediate Beranda Update)
        if (e.target.closest('#btn-confirm-setuju')) {
          if (state.formSubmitting || isNetworkBusy) return;
          if (state.n8nMode !== 'webhook' && !SIMULATION_PINS.ENABLE_SIMULATION_BYPASS) {
            showToast('Mode Demo: penyimpanan dinonaktifkan.', false);
            return;
          }
          let parsed;
          let items;
          let payload;
          try {
            parsed = parseDateDDMMYYYY(state.formDate) || parseDateDDMMYYYY(getTodayWIB());
            if (!parsed) throw new Error('Tanggal tidak valid');
            items = state.formRows.map((r, idx) => ({
              txNumber: idx + 1,
              description: String(r.description || '').trim().toUpperCase().replace(/,/g, ' '),
              category: r.category,
              amount: r.method === 'KUPON' ? 0 : parseFlexibleRupiahInput(r.amountRaw),
              method: r.method
            }));
            if (!state.formRefPengajuan) state.formRefPengajuan = crypto.randomUUID();
            payload = {
              date: parsed.formatted,
              dayName: parsed.dayName,
              legacyText: buildLegacyFormatPreview(parsed.formatted, items),
              items,
              refPengajuan: state.formRefPengajuan
            };
          } catch (prepErr) {
            showToast('Data belum lengkap atau tidak bisa diproses. Periksa isi form.', false);
            return;
          }

          state.formSubmitting = true;
          state.formSaveErrorBanner = '';
          startNetworkLoadingUI('Menyimpan transaksi…', true);
          renderApp(false, false);

          let saveSucceeded = false;

          try {
            const postResult = await postBatchToSource(payload);
            if (!postResult || postResult.status !== 'ok') {
              throw new Error('Gagal menyimpan');
            }

            saveSucceeded = true;
            let nextRow = _memoryStore.transactions.reduce((m, r) => Math.max(m, r.rowNumber), 1) + 1;
            items.forEach(item => {
              _memoryStore.transactions.push({
                rowNumber: nextRow++,
                date: parsed.formatted,
                description: item.description,
                category: item.category,
                amount: item.amount,
                method: item.method
              });
            });

            if (MONTHS_AVAILABLE.some(m => m.key === parsed.keyMMYYYY)) {
              state.selectedMonth = parsed.keyMMYYYY;
            }

            const freshId = state.formNextId++;
            state.formRows = [
              { id: freshId, description: '', category: 'CARWASH MEDIUM', amountRaw: '50.000', method: 'CASH' }
            ];
            state.formStep = 'input';
            state.selectedDailyChartDate = parsed.formatted;
            // Navigate to Beranda so today's report and daily chart update immediately without a refresh button
            state.screen = 'beranda';
          } catch (postErr) {
            const failMsg = 'Gagal menyimpan. Data BELUM tersimpan. Jangan tekan Simpan berulang.';
            state.formSaveErrorBanner = failMsg;
            showToast(failMsg, false);
          } finally {
            state.formSubmitting = false;
          }

          if (saveSucceeded) {
            state.formRefPengajuan = null;
            try {
              startNetworkLoadingUI('Memperbarui data…', true);
              const rawData = await fetchTransactionsFromSource();
              cachedRawTransactions = rawData;
              cachedInspection = inspectAllTransactions(cachedRawTransactions);
              updateSyncTimestampDisplay();
              showToast(`Tersimpan (${items.length} transaksi)`, true);
            } catch (reloadErr) {
              showToast('Tersimpan, silakan muat ulang laporan.', false);
            } finally {
              stopNetworkLoadingUI();
            }
          } else {
            stopNetworkLoadingUI();
          }

          renderApp(saveSucceeded, saveSucceeded);
          return;
        }

        const qSearch = e.target.closest('[data-quick-search]');
        if (qSearch) {
          state.searchKeyword = qSearch.getAttribute('data-quick-search');
          state.searchError = '';
          state.searchPage = 1;
          renderApp(false, false);
          return;
        }

        if (e.target.closest('#btn-reset-search')) {
          state.searchKeyword = '';
          state.searchStart = '';
          state.searchEnd = '';
          state.searchError = '';
          state.searchPage = 1;
          renderApp(false, false);
          return;
        }

        if (e.target.closest('#btn-save-settings')) {
          if (!state.devUnlocked || isNetworkBusy) return;
          const modeEl = document.getElementById('cfg-mode-select');
          const getEl = document.getElementById('cfg-get-input');
          const postEl = document.getElementById('cfg-post-input');
          const devEl = document.getElementById('cfg-dev-input');

          if (modeEl) state.n8nMode = modeEl.value;
          if (getEl) state.n8nGetUrl = getEl.value.trim();
          if (postEl) state.n8nPostUrl = postEl.value.trim();
          if (devEl) state.n8nDevUrl = devEl.value.trim();

          await loadTransactionsData(true, 'Memperbarui data…');
          showToast('Konfigurasi disimpan', true);
          return;
        }
      });

      document.addEventListener('change', (e) => {
        const t = e.target;

        if (t.id === 'form-date-picker') {
          const ddmmyyyy = convertISOToDDMMYYYY(t.value);
          if (ddmmyyyy) {
            state.formDate = ddmmyyyy;
            renderApp(false, false);
          }
          return;
        }

        if (t.classList.contains('row-cat-select')) {
          const id = Number(t.getAttribute('data-id'));
          const row = state.formRows.find(r => r.id === id);
          if (row) {
            row.category = t.value;
            const allowed = VALID_METHODS_BY_CATEGORY[row.category] || ['CASH'];
            if (!allowed.includes(row.method)) row.method = allowed[0];
            if (row.method === 'KUPON') row.amountRaw = '0';
            renderApp(false, false);
          }
          return;
        }

        if (t.classList.contains('row-met-select')) {
          const id = Number(t.getAttribute('data-id'));
          const row = state.formRows.find(r => r.id === id);
          if (row) {
            row.method = t.value;
            if (row.method === 'KUPON') row.amountRaw = '0';
            renderApp(false, false);
          }
          return;
        }

        if (t.id === 'akum-start-picker') {
          state.akumulatifStart = convertISOToDDMMYYYY(t.value);
          renderApp(true, false);
          return;
        }
        if (t.id === 'akum-end-picker') {
          state.akumulatifEnd = convertISOToDDMMYYYY(t.value);
          renderApp(true, false);
          return;
        }

        if (t.id === 'kat-filter-select') {
          state.kategoriFilter = t.value;
          renderApp(true, false);
          return;
        }
        if (t.id === 'kat-start-picker') {
          state.kategoriStart = convertISOToDDMMYYYY(t.value);
          renderApp(true, false);
          return;
        }
        if (t.id === 'kat-end-picker') {
          state.kategoriEnd = convertISOToDDMMYYYY(t.value);
          renderApp(true, false);
          return;
        }

        if (t.id === 'comp-select-a') {
          state.compareMonthA = t.value;
          renderApp(false, false);
          return;
        }
        if (t.id === 'comp-select-b') {
          state.compareMonthB = t.value;
          renderApp(false, false);
          return;
        }

        if (t.id === 'dev-urg-field') {
          state.devUrgency = t.value;
          renderApp(false, false);
          return;
        }
      });

      document.addEventListener('input', (e) => {
        const t = e.target;

        if (t.classList.contains('row-desc-input')) {
          const id = Number(t.getAttribute('data-id'));
          const row = state.formRows.find(r => r.id === id);
          if (row) {
            row.description = t.value;
            const hasComma = t.value.includes(',');
            t.setAttribute('aria-invalid', hasComma ? 'true' : 'false');
            const errEl = document.getElementById(`r-desc-err-${id}`);
            if (errEl) {
              errEl.style.display = hasComma ? 'flex' : 'none';
            }
          }
          return;
        }

        if (t.classList.contains('row-amt-input')) {
          const id = Number(t.getAttribute('data-id'));
          const row = state.formRows.find(r => r.id === id);
          if (!row) return;
          if (row.method === 'KUPON') {
            t.value = '0';
            row.amountRaw = '0';
            t.setAttribute('aria-invalid', 'false');
            return;
          }
          const digitsOnly = t.value.replace(/[^0-9]/g, '');
          const formatted = digitsOnly === '' ? '' : formatDotNumber(Number(digitsOnly));
          if (t.value !== formatted) {
            t.value = formatted;
          }
          row.amountRaw = formatted;
          t.setAttribute('aria-invalid', digitsOnly === '' ? 'true' : 'false');
          return;
        }

        if (t.id === 'cfg-dev-input') {
          state.n8nDevUrl = t.value.trim();
          return;
        }

        if (t.id === 'dev-msg-field') {
          state.devMessage = t.value;
          return;
        }
      });

      function getCurrentWIBISO() {
        const wibMs = Date.now() + 7 * 3600 * 1000;
        const d = new Date(wibMs);
        const yyyy = d.getUTCFullYear();
        const mm = String(d.getUTCMonth() + 1).padStart(2, '0');
        const dd = String(d.getUTCDate()).padStart(2, '0');
        const hh = String(d.getUTCHours()).padStart(2, '0');
        const mi = String(d.getUTCMinutes()).padStart(2, '0');
        const ss = String(d.getUTCSeconds()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}T${hh}:${mi}:${ss}+07:00`;
      }

      async function postDeveloperHelpToSource(payload) {
        if (state.n8nMode === 'demo' && SIMULATION_PINS.ENABLE_SIMULATION_BYPASS) {
          await new Promise(r => setTimeout(r, 260));
          return { status: 'ok' };
        }
        const url = (state.n8nDevUrl || '').trim();
        const res = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Carwash-Pin': state.n8nSecretPin
          },
          body: JSON.stringify(payload)
        });
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}`);
        }
        const body = await res.json();
        if (!body || body.status !== 'ok') {
          throw new Error('Respons belum berhasil.');
        }
        return body;
      }

      document.addEventListener('submit', async (e) => {
        if (e.target.id === 'form-search') {
          e.preventDefault();
          const kwEl = document.getElementById('search-kw');
          const sEl = document.getElementById('search-start');
          const eEl = document.getElementById('search-end');

          const kw = kwEl ? kwEl.value.trim() : '';
          state.searchKeyword = kw;
          state.searchStart = sEl && sEl.value ? convertISOToDDMMYYYY(sEl.value) : '';
          state.searchEnd = eEl && eEl.value ? convertISOToDDMMYYYY(eEl.value) : '';
          state.searchPage = 1;

          if (kw.length > 32) {
            state.searchError = `Kata kunci terlalu panjang (${kw.length} karakter). Maksimal 32 karakter.`;
          } else if (kw.includes('|')) {
            state.searchError = 'Kata kunci tidak boleh memuat tanda |.';
          } else if ((state.searchStart && !state.searchEnd) || (!state.searchStart && state.searchEnd)) {
            state.searchError = 'Untuk memfilter rentang tanggal, isi Tanggal Awal dan Tanggal Akhir secara lengkap.';
          } else if (state.searchStart && state.searchEnd) {
            const sp = parseDateDDMMYYYY(state.searchStart);
            const ep = parseDateDDMMYYYY(state.searchEnd);
            if (sp && ep && sp.keyNum > ep.keyNum) {
              state.searchError = `Tanggal awal (${state.searchStart}) tidak boleh setelah tanggal akhir (${state.searchEnd}).`;
            } else {
              state.searchError = '';
            }
          } else {
            state.searchError = '';
          }

          renderApp(false, false);
          return;
        }

        if (e.target.id === 'form-dev-help') {
          e.preventDefault();
          if (state.devSubmitting || isNetworkBusy) return;

          const msgInputEl = document.getElementById('dev-msg-field');
          if (msgInputEl) state.devMessage = msgInputEl.value;
          const urgInputEl = document.getElementById('dev-urg-field');
          if (urgInputEl) state.devUrgency = urgInputEl.value;

          const msg = (state.devMessage || '').trim();
          if (!msg || /\(tulis/i.test(msg)) {
            state.devError = 'Pesan kendala belum diisi. Tulis kendala yang terjadi sebelum mengirim.';
            state.devReplyBanner = null;
            renderApp(false, false);
            return;
          }
          if (msg.length > 1000) {
            state.devError = 'Panjang pesan melebihi batas maksimal 1000 karakter.';
            state.devReplyBanner = null;
            renderApp(false, false);
            return;
          }

          const devUrl = (state.n8nDevUrl || '').trim();
          if (!devUrl && state.n8nMode === 'webhook') {
            state.devError = 'Pesan belum terkirim karena koneksi bantuan belum diatur. Hubungi developer langsung.';
            state.devReplyBanner = null;
            renderApp(false, false);
            showToast(state.devError, false);
            return;
          }

          state.devSubmitting = true;
          state.devError = '';
          state.devReplyBanner = null;
          startNetworkLoadingUI('Mengirim pesan…', true);
          renderApp(false, false);

          const refCode = generateSupportRefCode();
          const hour = getCurrentWIBHour();
          const inHours = hour >= 6 && hour < 21;
          const payload = {
            clientName: clientName,
            type: 'BANTUAN',
            urgency: state.devUrgency,
            message: msg,
            refCode,
            sentAt: getCurrentWIBISO(),
            inServiceHours: inHours
          };

          try {
            const postRes = await postDeveloperHelpToSource(payload);
            if (!postRes || postRes.status !== 'ok') {
              throw new Error('Respons belum berhasil');
            }

            state.devRefCode = refCode;
            const isUrgent = state.devUrgency === 'SANGAT PENTING';
            state.devReplyBanner = {
              title: isUrgent ? 'Pesan SANGAT PENTING Terkirim ke Developer' : 'Pesan Bantuan Terkirim ke Developer',
              body: inHours
                ? 'Terkirim dalam waktu layanan (06.00–21.00 WIB). Developer akan segera menindaklanjuti laporan.'
                : 'Terkirim di luar waktu layanan (06.00–21.00 WIB). Pesan akan ditindaklanjuti pada jam layanan berikutnya.'
            };

            state.devMessage = '';
            showToast('Pesan bantuan terkirim', true);
          } catch (devErr) {
            state.devError = 'Gagal mengirim pesan bantuan. Silakan coba lagi.';
            state.devReplyBanner = null;
            showToast('Gagal mengirim pesan bantuan', false);
          } finally {
            state.devSubmitting = false;
            stopNetworkLoadingUI();
            renderApp(false, false);
          }
          return;
        }
      });

      document.addEventListener('keydown', (e) => {
        if (!state.isAuthenticated) {
          if (state.pinVerifying) return;
          if (/^[0-9]$/.test(e.key)) {
            e.preventDefault();
            handlePinDigitInput(e.key);
            return;
          }
          if (e.key === 'Backspace') {
            e.preventDefault();
            state.pinBuffer = state.pinBuffer.slice(0, -1);
            renderPinDots(false);
            return;
          }
          if (e.key === 'Escape') {
            e.preventDefault();
            state.pinBuffer = '';
            renderPinDots(false);
            return;
          }
        }
        if (e.key === 'Enter' || e.key === ' ') {
          const barGroup = e.target.closest('.chart-col-group[data-pick-month]');
          if (barGroup) {
            e.preventDefault();
            state.selectedMonth = barGroup.getAttribute('data-pick-month');
            state.rekapPage = 1;
            renderApp(true, false);
            return;
          }
          const rowItem = e.target.closest('[data-inspect-row]');
          if (rowItem) {
            e.preventDefault();
            openRowDetailSheet(Number(rowItem.getAttribute('data-inspect-row')));
          }
        }
      });
    }

    window.addEventListener('DOMContentLoaded', () => {
      applyClientNameBranding();
      updateTopModeBanner();
      initEventListeners();
      let savedPin = '';
      try { savedPin = localStorage.getItem('carwash_pin') || ''; } catch (e) {}
      if (savedPin) {
        verifyEnteredPin(savedPin, true);
      }
    });
  </script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "6f142c9d4569480b965604640d1e3869"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>