:root{
    /* ---- Apple Ceramic & Deep Indigo Palette (iOS 18 / Apple Wallet) ---- */
    --accent: #007AFF;
    --accent-hover: #0062CC;
    --accent-dark: #004BB5;
    --accent-light: rgba(0, 122, 255, 0.12);
    --accent-subtle: rgba(0, 122, 255, 0.06);

    /* Apple Warm Ceramic Canvas (tidak pucat dingin) */
    --bg: #F0F2F6;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --surface-hover: #E8EBF2;
    --surface-muted: #F5F7FA;
    --chrome-1: #F0F2F6;

    /* Apple San Francisco Typography Hierarchy */
    --ink: #1C1C1E;
    --ink-medium: #2C2C2E;
    --ink-muted: #636366;
    --ink-subtle: #8E8E93;
    --ink-soft: #636366;

    --border: rgba(60, 60, 67, 0.12);
    --border-hover: rgba(60, 60, 67, 0.22);
    --border-focus: #007AFF;
    --line: rgba(60, 60, 67, 0.08);

    --good: #34C759;
    --good-bg: rgba(52, 199, 89, 0.12);
    --good-border: rgba(52, 199, 89, 0.25);
    --good-dark: #248A3D;

    --amber: #FF9500;
    --amber-bg: rgba(255, 149, 0, 0.12);
    --amber-border: rgba(255, 149, 0, 0.25);
    --amber-dark: #C97500;

    --rose: #FF3B30;
    --rose-bg: rgba(255, 59, 48, 0.12);
    --rose-border: rgba(255, 59, 48, 0.25);
    --rose-dark: #D70015;

    --blue: #007AFF;
    --blue-bg: rgba(0, 122, 255, 0.12);
    --blue-border: rgba(0, 122, 255, 0.25);

    /* 10 Kategori Layanan: Apple Fintech Semantic Multi-Tone */
    --wifi: #0284C7;
    --wifi-bg: rgba(2, 132, 199, 0.12);
    --listrik: #D97706;
    --listrik-bg: rgba(245, 158, 11, 0.12);
    --pulsa: #007AFF;
    --pulsa-bg: rgba(0, 122, 255, 0.12);
    --kuota: #7C3AED;
    --kuota-bg: rgba(124, 58, 237, 0.12);
    --ewallet: #059669;
    --ewallet-bg: rgba(16, 185, 129, 0.12);
    --game: #E11D48;
    --game-bg: rgba(225, 29, 72, 0.12);
    --teleponpas: #0D9488;
    --teleponpas-bg: rgba(13, 148, 136, 0.12);
    --aktivasi: #4F46E5;
    --aktivasi-bg: rgba(79, 70, 229, 0.12);
    --gas: #EA580C;
    --gas-bg: rgba(234, 88, 12, 0.12);
    --tagihan: #2563EB;
    --tagihan-bg: rgba(37, 99, 235, 0.12);

    --app-max: 480px;

    /* Multi-layered soft ambient shadows (tactile & alive) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 12px 30px -4px rgba(0, 0, 0, 0.09), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
    --shadow-sheet: 0 -12px 35px -5px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 10px 24px -4px rgba(0, 122, 255, 0.2);
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
  }

  /* ---- Dark Mode Overrides (Apple OLED Pure Black & Electric Blue) ---- */
  [data-theme="dark"] {
    --bg: #000000;
    --surface: #1C1C1E;
    --card: #1C1C1E;
    --surface-hover: #2C2C2E;
    --surface-muted: #141416;
    --chrome-1: #000000;

    --ink: #FFFFFF;
    --ink-medium: #F2F2F7;
    --ink-muted: #AEAEB2;
    --ink-subtle: #8E8E93;
    --ink-soft: #AEAEB2;

    --border: rgba(255, 255, 255, 0.12);
    --border-hover: rgba(255, 255, 255, 0.22);
    --line: rgba(255, 255, 255, 0.08);

    --accent: #0A84FF;
    --accent-hover: #409CFF;
    --accent-dark: #0071E3;
    --accent-light: rgba(10, 132, 255, 0.2);
    --accent-subtle: rgba(10, 132, 255, 0.1);

    --good: #30D158;
    --good-bg: rgba(48, 209, 88, 0.16);
    --good-border: rgba(48, 209, 88, 0.35);
    --good-dark: #30D158;

    --amber: #FF9F0A;
    --amber-bg: rgba(255, 159, 10, 0.16);
    --amber-border: rgba(255, 159, 10, 0.35);
    --amber-dark: #FF9F0A;

    --rose: #FF453A;
    --rose-bg: rgba(255, 69, 58, 0.16);
    --rose-border: rgba(255, 69, 58, 0.35);
    --rose-dark: #FF453A;

    --blue: #0A84FF;
    --blue-bg: rgba(10, 132, 255, 0.16);
    --blue-border: rgba(10, 132, 255, 0.35);

    --wifi: #38BDF8;
    --wifi-bg: rgba(56, 189, 248, 0.16);
    --listrik: #FBBF24;
    --listrik-bg: rgba(251, 191, 36, 0.16);
    --pulsa: #0A84FF;
    --pulsa-bg: rgba(10, 132, 255, 0.16);
    --kuota: #A78BFA;
    --kuota-bg: rgba(167, 139, 250, 0.16);
    --ewallet: #34D399;
    --ewallet-bg: rgba(52, 211, 153, 0.16);
    --game: #FB7185;
    --game-bg: rgba(251, 113, 133, 0.16);
    --teleponpas: #2DD4BF;
    --teleponpas-bg: rgba(45, 212, 191, 0.16);
    --aktivasi: #818CF8;
    --aktivasi-bg: rgba(129, 140, 248, 0.16);
    --gas: #FB923C;
    --gas-bg: rgba(251, 146, 60, 0.16);
    --tagihan: #60A5FA;
    --tagihan-bg: rgba(96, 165, 250, 0.16);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.65);
    --shadow-sheet: 0 -12px 35px -5px rgba(0, 0, 0, 0.75);
    --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 10px 24px -4px rgba(10, 132, 255, 0.28);
  }
  [data-theme="dark"] .v-desc{color:#CBD5E1;}
  [data-theme="dark"] .v-pay-lbl{color:#CBD5E1;}
  [data-theme="dark"] .section-sub{color:#CBD5E1;}
  [data-theme="dark"] input::placeholder,
  [data-theme="dark"] textarea::placeholder{color:#94A3B8;opacity:1;}

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }

  .app{
    max-width:var(--app-max);
    margin:0 auto;
    min-height:100vh;
    background:var(--bg);
    position:relative;
    z-index:1;
    padding-bottom:calc(124px + env(safe-area-inset-bottom));
  }

  /* HEADER */
  header.top{
    background:var(--surface);
    color:var(--ink);
    padding:max(14px, calc(12px + env(safe-area-inset-top, 0px))) 16px 12px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:20;
  }
  .top-actions{display:flex;align-items:center;gap:8px;}
  .theme-btn{
    width:44px;height:44px;min-width:44px;min-height:44px;border-radius:99px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s ease;padding:0;touch-action:manipulation;
  }
  .theme-btn:active{transform:scale(.92);}
  .theme-btn svg{width:16px;height:16px;}

  /* SECTION */
  .section{padding:16px 16px 0;position:relative;z-index:1;}
  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
  .section-title{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;font-weight:700;font-size:16px;color:var(--ink);}
  .section-sub{font-size:12px;color:var(--ink-muted);}

  /* INPUT CARD */
  .input-card{
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border:1px solid var(--border);
    border-radius:22px;padding:16px 18px;margin:0 14px 14px;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 20px -4px rgba(15, 23, 42, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  }
  .input-card label{font-size:12px;font-weight:700;color:var(--ink-medium);display:block;margin-bottom:8px;}
  .contact-quick-save{
    display:inline-flex;align-items:center;gap:4px;margin-top:7px;
    font-size:11.5px;color:var(--accent-dark);font-weight:600;cursor:pointer;
  }
  .contact-quick-save:hover{text-decoration:underline;}

  /* CHIP NOMOR CEPAT (kontak tersimpan + nomor terakhir) */
  .dx-numchips{
    display:flex;gap:6px;overflow-x:auto;margin-top:9px;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .dx-numchips::-webkit-scrollbar{display:none;}
  .dx-numchip{
    flex:none;display:inline-flex;align-items:center;gap:6px;
    min-height:44px;padding:0 16px;border-radius:9999px;cursor:pointer;
    border:1px solid var(--border);background:var(--surface);color:var(--ink-medium);
    font:600 12px/1 'Inter',system-ui,sans-serif;white-space:nowrap;
    touch-action:manipulation;user-select:none;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.04);
    transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;
  }
  .dx-numchip span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-muted);}
  .dx-numchip b{font-weight:700;color:var(--ink);}
  .dx-numchip svg{color:var(--ink-muted);flex:none;}
  .dx-numchip:active{transform:scale(.96);}
  .dx-numchip.on{border-color:var(--accent);background:var(--accent-light, rgba(0,122,255,.10));}
  .dx-numchip.on span,.dx-numchip.on svg{color:var(--accent-dark);}

  /* TOMBOL SALIN DI STRUK DIGITAL */
  .km-receipt-copy-row{display:flex;justify-content:center;gap:8px;margin-top:8px;}
  .km-receipt-copy-btn{
    flex:1;max-width:180px;min-height:38px;border-radius:10px;cursor:pointer;
    border:1px solid var(--accent, #007AFF);background:var(--surface);color:var(--accent-dark, #0051A8);
    font:700 12px/1 'Inter',system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;
    touch-action:manipulation;user-select:none;transition:transform .12s ease,background .15s ease;
  }
  .km-receipt-copy-btn--main{max-width:240px;background:var(--accent, #007AFF);color:#fff;}
  .km-receipt-copy-btn:active{transform:scale(.97);}
  .input-card input{
    width:100%;height:48px;border:1.5px solid var(--border);border-radius:14px;padding:0 15px;
    font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--ink);
    outline:none;background:var(--surface-muted);
    box-shadow:inset 0 2px 4px rgba(15, 23, 42, 0.04);
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .input-card input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-light), inset 0 1px 2px rgba(0,0,0,0.02);}
  .op-detect{
    margin-top:7px;font-size:11.5px;font-weight:600;color:var(--good);
    display:flex;align-items:center;gap:6px;
  }
  .op-detect .op-dot{
    width:7px;height:7px;border-radius:50%;background:var(--good);flex-shrink:0;
    box-shadow:0 0 0 2px var(--good-bg);
  }

  /* VALIDATION BOX */
  .validate-box{
    margin-top:10px;border-radius:10px;padding:10px 12px;
    display:flex;align-items:center;gap:10px;font-size:12px;
  }
  .validate-box.ok{background:var(--good-bg);border:1px solid var(--good-border);color:var(--good-dark);}
  .validate-box.fail{background:var(--rose-bg);border:1px solid var(--rose-border);color:var(--rose-dark);}
  .validate-box.info{background:var(--blue-bg);border:1px solid var(--blue-border);color:#1E40AF;}
  .validate-box .vb-ic{
    width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:12px;flex-shrink:0;color:#fff;font-weight:700;
  }
  .validate-box.ok .vb-ic{background:var(--good);}
  .validate-box.fail .vb-ic{background:var(--rose);}
  .validate-box.info .vb-ic{background:var(--blue);}
  .validate-box b{display:block;font-size:13px;color:inherit;font-weight:700;}
  .validate-box span{font-size:11px;opacity:.9;}

  /* BOTTOM NAVIGATION */
  nav.bottom{
    position:fixed;bottom:0;left:50%;transform:translateX(-50%);
    width:100%;max-width:var(--app-max);box-sizing:border-box;
    padding:0 0 env(safe-area-inset-bottom);
    z-index:40;pointer-events:none;
  }
  nav.bottom .nb{
    appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;
    display:flex;align-items:center;justify-content:center;height:100%;
    color:var(--ink-muted);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  }
  nav.bottom .nb:active svg{transform:scale(.9);}
  nav.bottom .nb:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;}

  /* OVERLAY & BOTTOM SHEET */
  .overlay{
    position:fixed;inset:0;background:rgba(15,23,42,.48);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    display:none;align-items:flex-end;justify-content:center;z-index:120;
    transition:opacity 0.25s ease;
  }
  .overlay.show{display:flex;}
  .sheet{
    background:var(--surface);width:100%;max-width:var(--app-max);
    border-radius:28px 28px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));
    animation:sheetUp .32s cubic-bezier(.16,1,.3,1) forwards;max-height:88vh;overflow-y:auto;
    box-shadow:0 -10px 40px rgba(15, 23, 42, 0.18), inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
    will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  }
  @keyframes sheetUp{
    from{transform:translateY(100%);opacity:0.6;}
    to{transform:translateY(0);opacity:1;}
  }
  .sheet-handle{width:42px;height:5px;background:var(--line);border-radius:99px;margin:0 auto 18px;}
  .sheet h3{font-family:'Inter Variable', 'Inter', -apple-system, sans-serif;margin:0 0 4px;font-size:17.5px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;}
  .sheet .muted{font-size:12.5px;color:var(--ink-muted);margin-bottom:16px;line-height:1.4;}

  .summary-box{
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border:1px solid var(--border);border-radius:20px;padding:8px 16px;margin-bottom:18px;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.03), 0 6px 16px -4px rgba(15, 23, 42, 0.05), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  }
  .row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;}
  .row:last-of-type{border-bottom:none;}
  .row .lbl{color:var(--ink-muted);font-size:12.5px;flex-shrink:0;}
  .row .val{font-weight:600;font-family:inherit;color:var(--ink);font-size:13px;text-align:right;}
  .row .val.num, .row.total-row .val{font-family:'JetBrains Mono',monospace;font-weight:700;}
  .row.total-row{padding-top:11px;margin-top:2px;border-top:1.5px dashed var(--line);}
  .row.total-row .lbl{font-weight:700;color:var(--ink);font-size:13.5px;}
  .row.total-row .val{font-size:16px;color:var(--accent-dark);font-weight:800;font-family:'JetBrains Mono',monospace;}

  .checkout-security-notice {
    font-size: 11.5px;
    color: var(--ink);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.28);
    padding: 10px 12px;
    border-radius: 14px;
    margin: 10px 0;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .checkout-security-notice .csn-icon {
    color: var(--good);
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
  }

  .pay-methods-list{
    display:flex;flex-direction:column;gap:8px;margin:12px 0 16px;
    background:var(--surface-muted);padding:8px;border-radius:22px;
    border:1px solid var(--line);
  }
  .pm-card{
    display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);
    border-radius:16px;padding:12px 14px;cursor:pointer;
    background:var(--surface);
    min-height:56px;box-sizing:border-box;user-select:none;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    box-shadow:0 2px 6px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:transform 0.2s var(--spring-bounce), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .pm-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-card-hover);}
  .pm-card:active{transform:scale(.985);}
  .pm-card.selected{border-color:var(--accent);background:var(--accent-subtle);box-shadow:0 0 0 1.5px var(--accent), 0 4px 14px var(--blue-bg);}
  .pm-radio{
    width:20px;height:20px;border-radius:50%;border:2px solid var(--border-hover);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:border-color .15s ease, background .15s ease;
  }
  .pm-card.selected .pm-radio{border-color:var(--accent);background:var(--accent);}
  .pm-radio-dot{width:8px;height:8px;border-radius:50%;background:transparent;transition:background .15s ease;}
  .pm-card.selected .pm-radio-dot{background:#FFFFFF;}
  .pm-info{flex:1;}
  .pm-title{font-size:13px;font-weight:700;color:var(--ink);}
  .pm-desc{font-size:11px;color:var(--ink-muted);margin-top:2px;}
  .pm-badge{
    font-size:10px;font-weight:700;color:var(--good-dark);background:var(--good-bg);
    border:1px solid var(--good-border);padding:2px 7px;border-radius:99px;
  }

  .confirm-btn{
    width:100%;min-height:50px;background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);color:#fff;border:none;
    padding:13px 20px;border-radius:16px;font-family:'Inter Variable', 'Inter', -apple-system, sans-serif;font-weight:700;
    font-size:15px;cursor:pointer;
    transition:transform 0.2s var(--spring-bounce), background .15s ease, box-shadow .15s ease;
    box-shadow:0 4px 14px var(--blue-bg), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
    box-sizing:border-box;will-change:transform;touch-action:manipulation;
  }
  .confirm-btn:hover{background:var(--accent-hover);box-shadow:0 6px 18px var(--blue-bg);}
  .confirm-btn:active:not(:disabled){transform:scale(.98);}
  .confirm-btn:disabled{opacity:.5;cursor:not-allowed;}
  .btn-wa{
    background:linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important;
    color:#FFFFFF !important;
    border-radius:18px !important;
    box-shadow:0 4px 14px rgba(22, 163, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
  .btn-wa:hover{background:linear-gradient(135deg, #15803D 0%, #166534 100%) !important;box-shadow:0 6px 18px rgba(22, 163, 74, 0.4) !important;}
  .btn-secondary{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    box-shadow:0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }
  .btn-secondary:hover{background:var(--surface-hover) !important;}
  [data-theme="dark"] .btn-secondary{
    background:#1E293B !important;
    border-color:rgba(255, 255, 255, 0.1) !important;
    box-shadow:0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
  .btn-ghost{background:transparent !important;color:var(--ink-muted) !important;border:none !important;box-shadow:none !important;border-radius:18px !important;}
  .btn-ghost:hover{color:var(--ink) !important;}

  .success-box{text-align:center;padding:10px 0 4px;}
  .success-check{
    width:52px;height:52px;border-radius:50%;background:var(--good);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;
  }

  /* AMOUNT BOX & QRIS */
  .amount-box{
    background:var(--accent-subtle);border:1.5px solid var(--accent);border-radius:12px;
    padding:12px 14px;text-align:center;margin:12px 0 14px;
  }
  .amount-lbl{font-size:11px;font-weight:700;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.5px;}
  .amount-val{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:800;color:var(--ink);margin:4px 0 2px;}
  .amount-note{font-size:11px;color:var(--ink-medium);font-weight:600;}

  .qr-wrap{
    background:#FFFFFF;border:1px solid var(--border);border-radius:14px;padding:12px;
    width:fit-content;margin:14px auto;box-shadow:var(--shadow-sm);text-align:center;
  }
  .qr-wrap img{display:block;width:240px;max-width:100%;margin:0 auto;border-radius:8px;}

  .transfer-box{
    background:var(--surface-muted);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;margin-bottom:12px;font-size:12px;color:var(--ink);text-align:left;
  }
  .transfer-box .tb-title{font-weight:700;color:var(--ink);margin-bottom:4px;}
  .transfer-box .tb-num{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:700;color:var(--accent-dark);}
  .transfer-box .tb-name{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:normal;color:var(--ink-muted);margin-left:4px;}
  .transfer-box .tb-order{margin-top:6px;font-size:11.5px;color:var(--ink-muted);}
  .transfer-box .tb-order code{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink);background:var(--surface-hover);padding:2px 6px;border-radius:4px;}

  .estimate-pill{
    display:flex;align-items:center;gap:10px;background:rgba(16, 185, 129, 0.08);
    border:1px solid rgba(16, 185, 129, 0.28);border-radius:12px;padding:10px 13px;
    margin-bottom:14px;font-size:11.5px;color:var(--ink);line-height:1.4;text-align:left;
  }
  [data-theme="dark"] .estimate-pill{
    background:rgba(16, 185, 129, 0.12);
    border-color:rgba(52, 211, 153, 0.3);
  }
  .estimate-pill .est-ic{font-size:16px;flex-shrink:0;color:#10B981;}
  .estimate-pill.pill-amber{
    background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber-dark);
  }

  /* HISTORY ITEMS - ACCORDION BARIS RINGKAS (PERSIS ADMIN PANEL) */
  .hist-item{
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 18px -4px rgba(15, 23, 42, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
    margin-bottom:12px;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .hist-item:hover{
    border-color:var(--accent);
    transform:translateY(-1.5px);
    box-shadow:0 4px 12px rgba(15, 23, 42, 0.05), 0 14px 24px -6px var(--blue-bg), inset 0 1.5px 0 #FFF;
  }
  .hist-summary{
    padding:13px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
    background:transparent;
    transition:background .15s ease;
  }
  .hist-summary:hover{
    background:var(--surface-hover);
  }
  .hist-summary:active{
    transform:scale(0.995);
  }
  .hist-sum-left{
    display:flex;
    align-items:center;
    gap:11px;
    flex:1;
    min-width:0;
  }
  .hist-ic{
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    flex-shrink:0;
    background:linear-gradient(135deg, var(--tint, var(--accent)) 0%, color-mix(in srgb, var(--tint, var(--accent)) 75%, #ffffff) 100%);
    color:#FFFFFF;
    box-shadow:0 4px 12px color-mix(in srgb, var(--tint, var(--accent)) 42%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    border:none;
  }
  .hist-ic svg{
    width:20px;
    height:20px;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  }
  .hist-details{
    flex:1;
    min-width:0;
  }
  .hist-topline{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    color:var(--ink-muted);
    margin-bottom:2px;
  }
  .hist-ref-id{
    font-family:'JetBrains Mono',monospace;
    font-weight:700;
    font-size:11.5px;
    color:var(--accent-dark);
  }
  .hist-name{
    font-family:'Sora',sans-serif;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hist-sum-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    flex-shrink:0;
  }
  .hist-amt{
    font-family:'JetBrains Mono',monospace;
    font-weight:800;
    font-size:13px;
    white-space:nowrap;
  }
  .hist-sum-badge-wrap{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .hist-toggle-chevron{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-muted);
    transition:transform .2s ease;
  }
  .hist-expand-body{
    border-top:1px solid var(--border);
    background:var(--bg);
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .hist-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    background:var(--surface);
    padding:10px 12px;
    border-radius:10px;
    font-size:11.5px;
    border:1px solid var(--border);
  }
  .hist-detail-lbl{
    color:var(--ink-subtle);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
  }
  .hist-detail-val{
    color:var(--ink);
    font-weight:700;
    word-break:break-all;
  }
  .hist-actions-bar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:2px;
    flex-wrap:wrap;
  }
  .empty-hist{text-align:center;color:var(--ink-muted);font-size:13px;padding:40px 0;}
  .empty-hist-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 20px 24px;
    margin: 12px 0 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
  }
  .empty-hist-illustration {
    margin-bottom: 16px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .empty-hist-illustration svg {
    filter: drop-shadow(0 10px 20px var(--blue-bg));
    animation: emptyFloat 3.5s ease-in-out infinite;
  }
  @keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .empty-hist-title {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .empty-hist-desc {
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.5;
    max-width: 290px;
    margin-bottom: 20px;
  }
  .empty-hist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--blue-bg);
    transition: transform 0.18s var(--spring-bounce), box-shadow 0.18s ease;
  }
  .empty-hist-btn:active {
    transform: scale(0.95);
  }
  [data-theme="dark"] .empty-hist-box {
    background: #121B27;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .status-badge{
    display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
    padding:3px 9px;border-radius:99px;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .status-badge svg{
    width:12px;
    height:12px;
    flex-shrink:0;
    display:inline-block;
  }
  .status-pending{color:var(--amber-dark);background:var(--amber-bg);border:1px solid var(--amber-border);box-shadow:0 2px 8px rgba(245, 158, 11, 0.15);}
  .status-success{color:var(--good-dark);background:var(--good-bg);border:1px solid var(--good-border);box-shadow:0 2px 8px rgba(16, 185, 129, 0.15);}
  .status-failed{color:var(--rose-dark);background:var(--rose-bg);border:1px solid var(--rose-border);box-shadow:0 2px 8px rgba(239, 68, 68, 0.15);}
  .sn-box{
    font-size:11px;
    color:var(--ink);
    width:100%;
    box-sizing:border-box;
    word-break:break-all;
    overflow-wrap:anywhere;
  }
  .sn-box b{
    word-break:break-all;
    overflow-wrap:anywhere;
  }

  /* INFO CARDS (HALAMAN AKUN) */
  .info-cards-list{display:flex;flex-direction:column;gap:12px;}
  .info-card{
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border:1px solid var(--border);border-radius:22px;
    padding:16px 18px;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 20px -4px rgba(15, 23, 42, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
    transition:transform 0.2s var(--spring-bounce), box-shadow 0.2s ease;
  }
  .info-card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(15, 23, 42, 0.05), 0 14px 24px -6px var(--blue-bg), inset 0 1.5px 0 #FFF;
  }
  .info-card-header{
    display:flex;align-items:center;gap:10px;margin-bottom:8px;
  }
  .info-card-icon{
    width:38px;height:38px;border-radius:50%;
    background:linear-gradient(135deg, var(--accent) 0%, #409CFF 100%);
    color:#FFFFFF;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    box-shadow:0 4px 12px var(--blue-bg), inset 0 1px 1.5px rgba(255, 255, 255, 0.5);
  }
  .info-card-icon svg{display:block;width:19px;height:19px;color:#FFFFFF;stroke:#FFFFFF;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));}
  .info-card-title{
    font-family:'Sora',sans-serif;font-size:14px;font-weight:700;
    color:var(--ink);line-height:1.3;
  }
  .info-card-desc{
    font-size:12.5px;color:var(--ink-medium);line-height:1.45;
  }
  .info-status-row{display:flex;align-items:flex-start;gap:8px;}
  .info-dot-live{
    width:7px;height:7px;border-radius:50%;background:var(--good);
    margin-top:5px;flex-shrink:0;box-shadow:0 0 0 2.5px var(--good-bg);
  }
  .info-empty-state{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;padding:12px 0 6px;text-align:center;
    color:var(--ink-muted);font-size:12px;font-weight:500;
  }
  .info-empty-state svg{color:var(--ink-subtle);opacity:0.8;}
  .info-btn-secondary{
    display:inline-flex;align-items:center;justify-content:center;width:100%;
    margin-top:10px;padding:9px 14px;border-radius:14px;min-height:40px;
    background:var(--surface-muted);border:1px solid var(--line);
    color:var(--ink);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
    cursor:pointer;transition:transform 0.2s var(--spring-bounce), background .15s ease, box-shadow .15s ease;
    box-shadow:0 1px 3px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.85);
  }
  .info-btn-secondary:hover{background:var(--surface-hover);}
  .info-btn-secondary:active{transform:scale(.96);}
  .info-btn-danger{
    display:inline-flex;align-items:center;justify-content:center;width:100%;
    margin-top:12px;padding:9px 14px;border-radius:14px;min-height:40px;
    background:transparent;border:1px solid var(--rose-border);
    color:var(--rose-dark);font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
    cursor:pointer;transition:transform 0.2s var(--spring-bounce), background .15s ease, border-color .15s ease;
  }
  .info-btn-danger:hover{background:var(--rose-bg);border-color:var(--rose);}
  .info-btn-danger:active{transform:scale(.96);}

  /* CONTACTS MODAL LIST */
  .contact-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin:12px 0 16px;}
  .contact-item{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--surface-muted);border:1px solid var(--line);border-radius:16px;
    padding:11px 14px;cursor:pointer;transition:transform 0.2s var(--spring-bounce), background .15s ease, border-color .15s ease;
    box-shadow:0 1px 3px rgba(15,23,42,0.03), inset 0 1px 0 rgba(255,255,255,0.8);
  }
  .contact-item:hover{background:var(--surface-hover);border-color:var(--border-hover);}
  .contact-item:active{transform:scale(.97);}
  .contact-main{display:flex;align-items:center;gap:10px;flex:1;overflow:hidden;}
  .contact-avatar{
    width:34px;height:34px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;
  }
  .contact-meta{overflow:hidden;}
  .contact-name{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .contact-num{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-muted);margin-top:1px;}
  .contact-del-btn{
    border:none;background:transparent;color:var(--ink-muted);font-size:16px;
    padding:6px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;
  }
  .contact-del-btn:hover{color:var(--rose);background:var(--rose-bg);}

  /* DRAFT ORDER BANNER */
  .draft-banner{
    position:fixed;bottom:calc(66px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
    width:calc(100% - 24px);max-width:calc(var(--app-max) - 24px);
    background:var(--surface);border:1.5px solid var(--accent);border-radius:14px;
    padding:10px 14px;box-shadow:var(--shadow-lg);z-index:38;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    animation:slideUp .22s cubic-bezier(.16,1,.3,1);
  }
  .draft-banner:empty,
  .km-toast:empty{
    display:none !important;
  }
  @keyframes slideUp{from{transform:translate(-50%,20px);opacity:0;}to{transform:translate(-50%,0);opacity:1;}}
  .draft-left{display:flex;align-items:center;gap:10px;overflow:hidden;flex:1;}
  .draft-ic{
    width:32px;height:32px;border-radius:8px;background:var(--accent-light);color:var(--accent-dark);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;
  }
  .draft-text{overflow:hidden;}
  .draft-title{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .draft-desc{font-size:11px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .draft-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .draft-btn-resume{
    background:var(--accent);color:#FFFFFF;border:none;border-radius:8px;
    padding:6px 12px;font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;
    cursor:pointer;transition:background .15s ease;
  }
  .draft-btn-resume:hover{background:var(--accent-hover);}
  .draft-btn-close{
    background:transparent;border:none;color:var(--ink-muted);font-size:18px;
    padding:4px 6px;cursor:pointer;line-height:1;
  }
  .draft-btn-close:hover{color:var(--ink);}

  /* TOAST NOTIFICATION */
  .km-toast{
    position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-20px);
    background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;
    padding:9px 18px;border-radius:99px;box-shadow:var(--shadow-lg);
    opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1);
    will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:9999;
    max-width:90%;text-align:center;
  }
  .km-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  /* MOBILE-FIRST CONTAINER (STITCH SPEC: 430px MAX WIDTH) */
  :root {
    --app-max: 430px;
  }
  html {
    background: #E2E8F0;
  }
  body {
    background: #E2E8F0;
    display: flex;
    justify-content: center;
  }
  html[data-theme="dark"],
  [data-theme="dark"] body {
    background: #000000;
  }
  .app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background: var(--bg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow-x: hidden;
  }

  @media (max-width: 430px) {
    html {
      background: #007AFF;
    }
    body {
      background: linear-gradient(180deg, #007AFF 0px, #007AFF 200px, #F0F2F6 200px, #F0F2F6 100%);
      background-repeat: no-repeat;
      min-height: 100vh;
    }
    html[data-theme="dark"] {
      background: #000000;
    }
    html[data-theme="dark"] body {
      background: #000000;
      min-height: 100vh;
    }
    .app { box-shadow: none; }
  }


  .safari-bottom-bar-fix {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: max(34px, env(safe-area-inset-bottom, 34px));
    background: #FFFFFF;
    z-index: 50;
    pointer-events: none;
  }
  [data-theme="dark"] .safari-bottom-bar-fix {
    background: #000000;
  }
  @media (max-width: 359px){
    .voucher-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    .v-title{font-size:13px;}
    .v-price{font-size:12px;padding:4px 6px;}
  }

  /* ================= DANA STYLE DESIGN SYSTEM (STITCH) ================= */
  :root {
    --dana-blue: #007AFF;
    --dana-dark-blue: #0051A8;
    --dana-sky: #0A84FF;
    --dana-accent: #0062CC;
    --dana-bg: #F0F2F6;
    --dana-card: #FFFFFF;
  }

  [data-theme="dark"] {
    --dana-bg: #000000;
    --dana-card: #121B27;
  }

  /* Dana Top Header (Seamless Apple Royal Blue to Canvas Gradient) */
  header.top.dana-header {
    background: linear-gradient(180deg, 
      #007AFF 0%, 
      #0A84FF 30%, 
      #3B9EFF 60%, 
      color-mix(in srgb, #007AFF 40%, var(--bg)) 82%, 
      var(--bg) 100%
    );
    color: #FFFFFF;
    border-bottom: none;
    padding-top: max(16px, calc(14px + env(safe-area-inset-top, 0px)));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: 38px;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    z-index: 5;
  }

  /* Ambient Karisma Ecosystem SVG Background Artwork */
  .dana-header-bg-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .dana-header-svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .dana-header-top,
  .dana-carousel-section,
  .dana-carousel,
  .dana-dots {
    position: relative;
    z-index: 2;
  }

  [data-theme="dark"] header.top.dana-header {
    background: linear-gradient(180deg, 
      #0A84FF 0%, 
      #005BB5 35%, 
      #003366 65%, 
      color-mix(in srgb, #0A84FF 20%, #000000) 85%, 
      #000000 100%
    );
    box-shadow: none;
    border-bottom: none;
  }
  [data-theme="dark"] .dana-header-bg-art {
    opacity: 0.92;
  }

  .dana-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .dana-brand-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .dana-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 1);
    flex-shrink: 0;
    overflow: hidden;
    padding: 3px;
  }

  .dana-avatar-water {
    width: 31px;
    height: 20px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.25));
  }

  @keyframes waveFlowCurrent1 {
    0%, 100% { transform: translate3d(0, 0, 0) skewY(0deg) scaleY(1); }
    50% { transform: translate3d(0, -2.5px, 0) skewY(-0.8deg) scaleY(1.025); }
  }
  @keyframes waveFlowCurrent2 {
    0%, 100% { transform: translate3d(0, 0, 0) skewY(0deg) scaleY(1); }
    50% { transform: translate3d(0, 2.5px, 0) skewY(0.8deg) scaleY(0.975); }
  }
  @keyframes waveFlowCurrent3 {
    0%, 100% { transform: translate3d(0, 0, 0) skewY(0deg); }
    50% { transform: translate3d(0, -2px, 0) skewY(-0.6deg); }
  }

  .k-wave-top-node {
    transform-origin: 210px 75px;
    animation: waveFlowCurrent1 4.2s ease-in-out infinite;
  }
  .k-wave-mid-node {
    transform-origin: 210px 111px;
    animation: waveFlowCurrent2 3.6s ease-in-out infinite 0.4s;
  }
  .k-wave-bot-node {
    transform-origin: 210px 147px;
    animation: waveFlowCurrent3 4.5s ease-in-out infinite 0.8s;
  }

  .dana-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .dana-title {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: -0.2px;
  }

  .dana-badge-kilat {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #0F172A;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  }
  [data-theme="dark"] .dana-avatar {
    background: #1C1C1E;
    color: #0A84FF;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
  [data-theme="dark"] .dana-badge-kilat {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #0F172A;
    border: none;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  }

  .dana-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-top: 1px;
  }

  .dana-server-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #FFFFFF;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  /* Sleek Reseller Header Pill */
  .rsl-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(94, 234, 212, 0.4);
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
  }
  .rsl-header-pill:active {
    transform: scale(0.96);
  }
  .rsl-header-pill .rsl-pill-bal {
    font-family: 'JetBrains Mono', monospace;
    color: #5eead4;
    font-weight: 800;
  }
  .rsl-header-pill.rsl-cust-pill {
    background: rgba(245, 158, 11, 0.28);
    border-color: rgba(245, 158, 11, 0.55);
    color: #fef3c7;
  }

  .dana-ping-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.4);
    animation: danaPulse 2.5s ease-in-out infinite;
    will-change: opacity;
  }

  @keyframes danaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }

  /* Pull-to-Refresh (Alfagift / iOS Native Style) */
  html, body {
    overscroll-behavior-y: contain;
  }
  .ptr-wrap {
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: #007AFF;
    color: #FFFFFF;
    margin-bottom: -2px;
    position: relative;
    z-index: 25;
  }
  [data-theme="dark"] .ptr-wrap {
    background: #0A84FF;
    color: #FFFFFF;
  }
  .ptr-wrap.ptr-pulling {
    transition: none;
  }
  .ptr-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transform-origin: center center;
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  [data-theme="dark"] .ptr-spinner {
    color: #FFFFFF;
  }
  .ptr-wrap.ptr-refreshing {
    height: 60px !important;
  }
  .ptr-wrap.ptr-refreshing .ptr-spinner {
    opacity: 1 !important;
    animation: ptrSpin 0.8s steps(12, end) infinite !important;
  }
  @keyframes ptrSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Auto-Slide Promo Carousel with Bottom Gradient Blend */
  .dana-carousel {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 36px -6px rgba(0, 50, 150, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    user-select: none;
    margin-top: 6px;
  }
  .dana-carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 38px;
    background: linear-gradient(180deg, rgba(0, 122, 255, 0) 0%, rgba(0, 102, 214, 0.3) 55%, rgba(0, 81, 168, 0.6) 100%);
    pointer-events: none;
    z-index: 2;
  }

  .dana-carousel-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .dana-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 16px 18px;
    min-height: 140px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  .dana-slide.slide-wifi {
    background: linear-gradient(135deg, #0A2540 0%, #0F3E74 55%, #007AFF 100%);
    position: relative;
  }
  .dana-slide.slide-wifi::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 75% 25%, rgba(96, 165, 250, 0.25) 0%, transparent 55%);
    pointer-events: none;
  }
  .dana-slide.slide-wifi .dana-slide-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: none;
  }
  .dana-slide.slide-wifi h3 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  .dana-slide.slide-wifi .dana-slide-btn {
    background: #FFFFFF;
    color: #0051A8;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .dana-slide.slide-wifi .dana-slide-btn:active {
    transform: scale(0.95);
  }
  .dana-slide.slide-wifi .dana-slide-deco svg {
    color: #60A5FA;
    filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.65));
    animation: wifiSignalPulse 2.5s infinite ease-in-out;
  }
  @keyframes wifiSignalPulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.9)); }
  }

  /* Slide 1: Deep Obsidian Rose (Flash Sale PLN & Game) */
  .dana-slide.slide-1 {
    background: linear-gradient(135deg, #181926 0%, #281B2D 50%, #6B1D38 100%);
    position: relative;
  }
  .dana-slide.slide-1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 75% 25%, rgba(244, 63, 94, 0.25) 0%, transparent 52%);
    pointer-events: none;
  }
  .dana-slide.slide-1 .dana-slide-pill {
    background: #FFDD00;
    color: #4C0519;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .dana-slide.slide-1 .dana-slide-btn {
    background: #FFFFFF;
    color: #881337;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  /* Slide 2: Midnight Navy Indigo (Serba Hemat Pulsa) */
  .dana-slide.slide-2 {
    background: linear-gradient(135deg, #0B192C 0%, #1A2844 50%, #2A3B66 100%);
    position: relative;
  }
  .dana-slide.slide-2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 75% 25%, rgba(96, 165, 250, 0.25) 0%, transparent 52%);
    pointer-events: none;
  }
  .dana-slide.slide-2 .dana-slide-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .dana-slide.slide-2 .dana-slide-btn {
    background: #FFFFFF;
    color: #0F172A;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  /* Slide 3: Midnight Titanium Gold (Top Up Game & E-Wallet) */
  .dana-slide.slide-3 {
    background: linear-gradient(135deg, #18181B 0%, #27272A 50%, #9A3412 100%);
    position: relative;
  }
  .dana-slide.slide-3::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 75% 25%, rgba(251, 146, 60, 0.28) 0%, transparent 52%);
    pointer-events: none;
  }
  .dana-slide.slide-3 .dana-slide-pill {
    background: #FBBF24;
    color: #451A03;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .dana-slide.slide-3 .dana-slide-btn {
    background: #FFFFFF;
    color: #7C2D12;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  [data-theme="dark"] .dana-slide.slide-wifi {
    background: linear-gradient(135deg, #06152B 0%, #0B2545 60%, #134074 100%);
  }
  [data-theme="dark"] .dana-slide.slide-1 {
    background: linear-gradient(135deg, #1A0B14 0%, #2E1022 60%, #520D23 100%);
  }
  [data-theme="dark"] .dana-slide.slide-2 {
    background: linear-gradient(135deg, #091322 0%, #112240 60%, #1D3557 100%);
  }
  [data-theme="dark"] .dana-slide.slide-3 {
    background: linear-gradient(135deg, #18110B 0%, #2D1B0F 60%, #4D260D 100%);
  }

  .dana-slide-content {
    max-width: 72%;
    z-index: 2;
  }

  .dana-slide-pill {
    display: inline-block;
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #0F172A;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  }

  .dana-slide h3 {
    margin: 0 0 4px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
  }

  .dana-slide p {
    margin: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.35;
  }

  .dana-slide-btn {
    margin-top: 8px;
    display: inline-block;
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #0F172A;
    font-weight: 800;
    font-size: 10.5px;
    padding: 5px 14px;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .dana-slide-btn:active { transform: scale(0.95); }

  .dana-slide-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
  }
  .dana-slide-deco svg {
    color: #FFFFFF;
    opacity: 0.95;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
  }
  .dana-slide-deco .dana-slide-deco-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.25));
    animation: decoPulse 3s infinite ease-in-out;
  }
  .bento-half-ic .brand-real-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
  }
  @keyframes decoPulse {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.06) translateY(-2px); }
  }
  .dana-slide.slide-3 .dana-slide-deco svg {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.9));
  }

  /* =====================================================================
     HERO BANNER LIVE AMBIENT SVG WATERMARKS
     ===================================================================== */
  .slide-ambient-svg {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    height: 155px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.26;
    overflow: visible;
    transition: opacity 0.4s ease;
    will-change: transform, opacity;
  }
  .slide-ambient-svg svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  [data-theme="dark"] .slide-ambient-svg {
    opacity: 0.36;
  }

  .slide-wifi .slide-ambient-svg { color: #60A5FA; }
  .slide-1 .slide-ambient-svg { color: #FBBF24; }
  .slide-2 .slide-ambient-svg { color: #93C5FD; }
  .slide-3 .slide-ambient-svg { color: #FB923C; }

  /* Ambient SVG vector graphics (Static & GPU-Cool) */
  .anim-beacon-radar, .anim-energy-mesh, .anim-signal-flow, .anim-cyber-grid {
    animation: none !important;
    transform: translateY(-50%) !important;
  }

  .dana-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 10;
  }

  .dana-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.45);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .dana-dot.active {
    width: 22px;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }

  /* DANA Category Grid: 5 x 2 Grid (5 Kolom x 2 Baris) */
  .cats {
    margin: -16px 12px 6px;
    padding: 14px 6px 12px;
    min-height: 168px;
    background: var(--surface);
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.08), 0 12px 28px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 2px;
    position: relative;
    z-index: 10;
  }
  .cats.hidden,
  #catTiles.hidden,
  .app[data-page="hist"] #catTiles,
  .app[data-page="akun"] #catTiles {
    display: none !important;
  }
  @media (max-width: 360px) {
    .cats {
      margin: -12px 8px 6px;
      padding: 12px 4px 10px;
      gap: 10px 1px;
    }
  }

  .cat-tile {
    flex: initial;
    min-width: 0;
    max-width: none;
    height: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s var(--spring-bounce);
  }
  .cat-tile:active {
    transform: scale(0.9);
  }

  .cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s var(--spring-bounce), box-shadow 0.22s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    will-change: transform;
  }
  .cat-icon svg {
    width: 26px;
    height: 26px;
    display: block;
    filter: none;
  }
  .cat-icon .cat-real-img {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
    transition: transform 0.22s var(--spring-bounce);
  }
  .cat-tile:active .cat-icon .cat-real-img {
    transform: scale(0.92);
  }
  .bento-hero-ic .cat-real-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
  }
  .bento-half-ic .cat-real-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
  }

  .cat-name {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    line-height: 1.15;
    padding: 0 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    height: 22px;
  }

  /* Apple Wallet Duotone Squircle Icons: Dynamic Semantic Multi-Tone */
  .cat-tile .cat-icon {
    background: var(--tint-bg, #F0F2F6) !important;
    color: var(--tint, #007AFF) !important;
    border: 1px solid rgba(60, 60, 67, 0.08) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.22s var(--spring-bounce), box-shadow 0.22s ease, background 0.2s ease, color 0.2s ease;
  }
  .cat-tile:active .cat-icon {
    transform: scale(0.92);
    box-shadow: 0 0 0 2px var(--tint, #007AFF);
  }
  .cat-tile.active .cat-icon {
    background: var(--tint-bg, #F0F2F6) !important;
    color: var(--tint, #007AFF) !important;
    border-color: var(--tint, #007AFF) !important;
    box-shadow: 0 0 0 2px var(--tint, #007AFF), 0 4px 14px var(--tint-bg, rgba(0, 122, 255, 0.2)) !important;
    transform: translateY(-2px) scale(1.04);
  }
  .cat-tile.active .cat-name {
    color: var(--tint, #007AFF) !important;
    font-weight: 800;
  }

  [data-theme="dark"] .cats {
    background: #1C1C1E;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  [data-theme="dark"] .cat-tile .cat-icon {
    background: var(--tint-bg, #2C2C2E) !important;
    color: var(--tint, #0A84FF) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  [data-theme="dark"] .cat-tile:active .cat-icon {
    transform: scale(0.92);
    box-shadow: 0 0 0 2px var(--tint, #0A84FF);
  }
  [data-theme="dark"] .cat-tile.active .cat-icon {
    background: var(--tint-bg, #2C2C2E) !important;
    color: var(--tint, #0A84FF) !important;
    border-color: var(--tint, #0A84FF) !important;
    box-shadow: 0 0 0 2px var(--tint, #0A84FF), 0 4px 14px rgba(10, 132, 255, 0.25) !important;
    transform: translateY(-2px) scale(1.04);
  }
  [data-theme="dark"] .cat-tile.active .cat-name {
    color: var(--tint, #0A84FF) !important;
    font-weight: 800;
  }
  [data-theme="dark"] .hot-card,
  [data-theme="dark"] .xp-card,
  [data-theme="dark"] .alfa-card,
  [data-theme="dark"] .hist-item,
  [data-theme="dark"] .info-card,
  [data-theme="dark"] .input-card,
  [data-theme="dark"] .summary-box,
  [data-theme="dark"] .sheet {
    background: #121B27 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  }
  [data-theme="dark"] .dx-prod,
  [data-theme="dark"] .dx-rec,
  [data-theme="dark"] .voucher,
  [data-theme="dark"] .wifi-v-card,
  [data-theme="dark"] .pm-card {
    background: #172333 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
  [data-theme="dark"] nav.dana-bottom-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ============================================================
     STITCH LUXURY WIFI VOUCHER DESIGN
     ============================================================ */
  .wifi-voucher-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .wifi-v-card {
    position: relative;
    min-width: 0;
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 14px 12px 12px;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.22s var(--spring-bounce), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 124px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .wifi-v-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }
  .wifi-v-card:active {
    transform: scale(0.985);
  }
  .wifi-v-card.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 0 0 2px var(--accent), 0 8px 24px var(--blue-bg);
  }
  [data-theme="dark"] .wifi-v-card {
    background: #141B26;
    border-color: #27354A;
  }
  [data-theme="dark"] .wifi-v-card.selected {
    background: var(--accent-light);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent), 0 8px 24px var(--blue-bg);
  }
  .wifi-v-card .wifi-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2.5px 7px;
    border-radius: 99px;
    background: var(--accent-light);
    color: var(--accent-dark);
    letter-spacing: 0.2px;
  }
  .wifi-v-card.selected .wifi-tag {
    background: var(--accent);
    color: #fff;
  }
  .wifi-v-card .wifi-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
  .wifi-v-card.selected .wifi-check {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--blue-bg);
  }
  .wifi-v-card .wifi-durasi {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    padding-right: 28px;
    text-wrap: balance;
  }
  .wifi-v-card .wifi-spec {
    font-size: 10.5px;
    color: var(--ink-muted);
    line-height: 1.35;
    margin-bottom: 10px;
    text-wrap: balance;
  }
  .wifi-v-card .wifi-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: clamp(13px, 3.8vw, 15px);
    color: var(--accent-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  [data-theme="dark"] .wifi-v-card .wifi-price {
    color: var(--accent);
  }

  /* Stitch Perforated Digital Voucher Ticket Preview */
  .wifi-ticket-preview {
    background: var(--surface);
    border: 1.5px dashed var(--accent);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 16px 0 6px;
    position: relative;
    box-shadow: var(--shadow-sm);
  }
  [data-theme="dark"] .wifi-ticket-preview {
    background: #141B26;
    border-color: var(--accent);
  }
  .wifi-ticket-preview::before,
  .wifi-ticket-preview::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--bg);
    border-radius: 50%;
    transform: translateY(-50%);
    border: 1.5px solid var(--accent);
  }
  .wifi-ticket-preview::before { left: -8px; }
  .wifi-ticket-preview::after { right: -8px; }
  .wifi-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .wifi-ticket-header .title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-dark);
  }
  [data-theme="dark"] .wifi-ticket-header .title {
    color: var(--accent);
  }
  .wifi-ticket-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .wifi-ticket-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: 1.2px;
    color: var(--ink);
  }
  .wifi-ticket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--ink-muted);
  }

  /* Member Rumahan VIP Card */
  .wifi-member-box {
    background: linear-gradient(135deg, var(--accent-light) 0%, rgba(52, 199, 89, 0.10) 100%);
    border: 1.5px solid var(--accent);
    border-radius: 16px;
    padding: 14px;
    margin-top: 14px;
  }
  [data-theme="dark"] .wifi-member-box {
    background: linear-gradient(135deg, var(--accent-light) 0%, rgba(28, 28, 30, 0.7) 100%);
    border-color: var(--accent);
  }

  /* DANA Denomination Grid (2 Kolom) */
  .voucher-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  .voucher {
    border-radius: 18px !important;
    border: 1.5px solid var(--border) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 13px 14px 12px !important;
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%) !important;
    transition: border-color 0.2s ease, transform 0.2s var(--spring-bounce), box-shadow 0.2s ease, background 0.2s ease !important;
    cursor: pointer;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative;
    overflow: hidden;
  }

  .voucher:hover {
    border-color: var(--accent) !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: var(--shadow-card-hover) !important;
  }

  .voucher:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s var(--spring-bounce) !important;
  }

  /* ================= APPLE FLOATING GLASS DOCK (VISIONOS / IOS 18 STYLE) ================= */
  nav.dana-bottom-bar {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 414px;
    height: 56px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    z-index: 100;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  /* Frosted Glass Capsule for 4 Tabs */
  .apple-dock-capsule {
    flex: 1;
    height: 56px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 9999px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
    pointer-events: auto;
    box-sizing: border-box;
  }

  .dana-nav-item {
    flex: 1;
    height: 100%;
    min-height: 48px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 9999px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px !important;
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  .dana-nav-item svg {
    width: 21px;
    height: 21px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dana-nav-item.active {
    background: rgba(0, 122, 255, 0.12);
    border-color: rgba(0, 122, 255, 0.25);
    color: #007AFF;
    font-weight: 700;
  }

  .dana-nav-item.active svg {
    transform: scale(1.08);
  }

  .dana-nav-item:active {
    transform: scale(0.92);
  }

  .k-pop {
    transform-box: fill-box;
    transform-origin: center;
  }
  .dana-nav-item.active .k-pop,
  .apple-search-btn:active .k-pop {
    animation: k-p 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  @keyframes k-p {
    0% { transform: scale(1); }
    40% { transform: scale(1.24) translateY(-2px); }
    100% { transform: scale(1); }
  }

  /* Detached Apple Circular Search Button */
  .apple-search-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #007AFF;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .apple-search-btn:hover {
    background: #FFFFFF;
    color: #0062CC;
  }

  .apple-search-btn svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .apple-search-btn:active {
    transform: scale(0.90);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  }

  [data-theme="dark"] .apple-dock-capsule {
    background: rgba(28, 28, 30, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .dana-nav-item {
    color: #8E8E93;
  }

  [data-theme="dark"] .dana-nav-item.active {
    background: rgba(10, 132, 255, 0.2);
    border-color: rgba(10, 132, 255, 0.4);
    color: #0A84FF;
  }

  [data-theme="dark"] .apple-search-btn {
    background: rgba(28, 28, 30, 0.88);
    border-color: rgba(255, 255, 255, 0.14);
    color: #0A84FF;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .apple-search-btn:hover {
    background: rgba(44, 44, 46, 0.95);
    color: #409CFF;
  }

  /* ================= APPLE APP STORE DYNAMIC DOCK SEARCH BAR ================= */
  .apple-search-dismiss-btn {
    display: none !important;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(254, 237, 215, 0.95);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1.5px solid rgba(251, 191, 136, 0.7);
    color: #9A3412;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .apple-search-dismiss-btn:hover {
    background: #FED7AA;
  }
  .apple-search-dismiss-btn:active {
    transform: scale(0.92);
  }
  .apple-search-dismiss-btn svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .apple-search-pill-bar {
    display: none !important;
    flex: 1;
    height: 56px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
    align-items: center;
    padding: 0 12px 0 16px;
    gap: 8px;
    pointer-events: auto;
    box-sizing: border-box;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* KONDISI AKTIF PENCARIAN (HALAMAN TETAP DIAM & SCROLL BODY TERKUNCI HALUS TANPA LONCAT) */
  html.km-search-locked,
  body.km-search-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  html.km-search-locked {
    top: 0 !important;
  }
  body.km-search-locked {
    top: var(--km-search-scroll-top, 0px) !important;
    touch-action: none;
  }

  nav.dana-bottom-bar.search-active #dockCapsuleNormal,
  nav.dana-bottom-bar.search-active #appleSearchTrigger {
    display: none !important;
    pointer-events: none !important;
  }

  nav.dana-bottom-bar:not(.search-active) #dockCapsuleNormal {
    animation: springCapsuleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  nav.dana-bottom-bar:not(.search-active) #appleSearchTrigger {
    animation: springSearchBtnIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes springCapsuleIn {
    0% { transform: scale(0.94); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes springSearchBtnIn {
    0% { transform: scale(0.82); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  nav.dana-bottom-bar.search-active .apple-search-dismiss-btn {
    display: flex !important;
    pointer-events: auto !important;
    animation: springDismissIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  nav.dana-bottom-bar.search-active .apple-search-pill-bar {
    display: flex !important;
    pointer-events: auto !important;
    animation: springPillIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes springDismissIn {
    0% { transform: scale(0.65) rotate(-18deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  @keyframes springPillIn {
    0% { transform: scaleX(0.88) translateX(14px); opacity: 0; }
    100% { transform: scaleX(1) translateX(0); opacity: 1; }
  }

  .dock-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    flex-shrink: 0;
  }

  .dock-search-input,
  .dock-search-input:focus,
  .dock-search-input:focus-visible,
  .dock-search-input:active {
    flex: 1;
    height: 100%;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    box-shadow: none !important;
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
    margin: 0;
  }
  .dock-search-input::placeholder {
    color: var(--ink-muted);
    font-weight: 500;
  }

  .dock-search-clear {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-muted);
    border: none;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .dock-search-clear:active {
    transform: scale(0.9);
  }

  /* DARK MODE UNTUK SEARCH DOCK */
  [data-theme="dark"] .apple-search-dismiss-btn {
    background: rgba(120, 53, 15, 0.45);
    border-color: rgba(245, 158, 11, 0.4);
    color: #FDE68A;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  }
  [data-theme="dark"] .apple-search-pill-bar {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  }
  [data-theme="dark"] .dock-search-input {
    color: #FFFFFF;
  }
  [data-theme="dark"] .dock-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
  }

  /* ================= APPLE SPOTLIGHT RESULTS SHEET (MENGAMBANG DI ATAS DOCK) ================= */
  .spotlight-overlay {
    position: fixed;
    inset: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(88px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, padding-bottom;
  }

  .spotlight-overlay.show {
    opacity: 1;
    pointer-events: none;
  }

  .spotlight-overlay.show .spotlight-sheet {
    pointer-events: auto;
  }

  .spotlight-sheet {
    width: 100%;
    max-width: 414px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    max-height: calc(75vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    box-sizing: border-box;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .spotlight-overlay.show .spotlight-sheet {
    transform: translateY(0) scale(1);
  }

  .spotlight-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 4px 0;
  }
  .spotlight-results:empty {
    display: none !important;
  }

  .spotlight-count {
    padding: 8px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .spotlight-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s ease;
  }

  .spotlight-item:last-child {
    border-bottom: none;
  }

  .spotlight-item:active {
    background: var(--surface-hover);
  }

  .spotlight-item-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
  }

  .spotlight-item-cat {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
  }

  .spotlight-item-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--accent);
    margin-left: 12px;
    white-space: nowrap;
    text-align: right;
  }

  .spotlight-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.5;
  }


  /* ================= iOS NATIVE LAYERED SUBPAGE STACK ================= */
  .dx-subpage-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-max);
    background: var(--bg);
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 35px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    will-change: transform;
    --dx-hero: #007AFF;
    --dx-price: #0051A8;
    --dx-ink: #1C1C1E;
  }
  [data-theme="dark"] .dx-subpage-layer {
    background: #000000;
    --dx-hero: #0A84FF;
    --dx-price: #0A84FF;
    --dx-ink: #FFFFFF;
    box-shadow: -12px 0 35px rgba(0, 0, 0, 0.55);
  }

  /* Kontainer Scroll Mandiri: Semua kartu & konten digeser di sini, sementara tombol CTA tetap terkunci di bawah */
  .dx-subpage-scroll {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: calc(105px + env(safe-area-inset-bottom, 14px));
    min-height: 0;
    overscroll-behavior-y: contain;
    background: transparent;
  }

  /* Sticky CTA di dalam Subpage Layer (Dinamis: Terkunci di dasar layar / viewport) */
  .dx-subpage-layer .card-sticky-cta-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-max);
    padding: 8px 16px max(14px, env(safe-area-inset-bottom, 14px));
    box-sizing: border-box;
    z-index: 110;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--bg) 75%);
    transform: translate3d(0, 110%, 0) !important;
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
    will-change: transform, opacity;
  }
  .dx-subpage-layer .card-sticky-cta-wrap.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
  }
  [data-theme="dark"] .dx-subpage-layer .card-sticky-cta-wrap {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, var(--bg) 75%);
  }

  /* Animasi Transisi Kartu 200ms */
  .focus-card-anim {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  @media (prefers-reduced-motion: no-preference) {
    .focus-card-anim {
      animation: focusCardFadeSlide 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes focusCardFadeSlide {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  /* 4-step Stepper */
  .focus-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 16px;
    padding: 8px 10px;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  }
  .stepper-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-subtle);
    white-space: nowrap;
  }
  .stepper-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-muted);
    border: 1.5px solid var(--border);
    color: var(--ink-subtle);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stepper-item.active {
    color: var(--accent-dark);
    font-weight: 700;
  }
  [data-theme="dark"] .stepper-item.active {
    color: var(--accent);
  }
  .stepper-item.active .stepper-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 0 0 2px var(--accent-light);
  }
  .stepper-item.done {
    color: var(--good);
  }
  .stepper-item.done .stepper-dot {
    background: var(--good);
    border-color: var(--good);
    color: #FFFFFF;
  }
  .stepper-line {
    flex: 1 1 0%;
    height: 2px;
    background: var(--border);
    margin: 0 8px;
    min-width: 8px;
    border-radius: 1px;
  }
  .stepper-line.active {
    background: var(--accent);
  }

  /* Sticky Primary CTA di bagian bawah kartu (Dinamis) */
  .card-sticky-cta-wrap {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 110%);
    bottom: 0;
    width: 100%;
    max-width: 430px;
    margin: 0;
    padding: 8px 16px max(12px, env(safe-area-inset-bottom, 12px));
    box-sizing: border-box;
    z-index: 110;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--bg) 75%);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
    will-change: transform, opacity;
  }
  .card-sticky-cta-wrap.show {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  [data-theme="dark"] .card-sticky-cta-wrap {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, var(--bg) 75%);
  }
  .card-sticky-cta {
    pointer-events: auto;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    border: none;
    background: var(--accent);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--blue-bg);
    transition: transform 0.2s var(--spring-bounce), background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
  }
  .card-sticky-cta:not(.disabled):active {
    transform: scale(0.96);
  }
  .card-sticky-cta.disabled {
    background: var(--border);
    color: var(--ink-subtle);
    box-shadow: none;
    cursor: not-allowed;
  }

  /* Tombol Salin Nominal */
  .btn-copy-nominal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .btn-copy-nominal:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
  }
  .btn-copy-nominal:active {
    transform: scale(.96);
  }

  /* Aksesibilitas keyboard fokus & target sentuh min 44px (AGENTS.md / design.md best-practice) */
  :focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: inherit;
  }
  :focus:not(:focus-visible) {
    outline: none !important;
  }
  .cat-tile, .dana-nav-item, .confirm-btn, .btn-copy-nominal, .dx-prod, .wifi-v-card, .bento-card-hero, .bento-card-half {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Editorial Monospace Precision (Tabular Figures & Clean Alignment) */
  .bento-half-price,
  .bento-hero-price,
  .wifi-price,
  .dx-p-price,
  .amount-val,
  .row .val.num,
  .row.total-row .val,
  .transfer-box .tb-num,
  .contact-num,
  .dx-numchip span,
  .wifi-ticket-code,
  .receipt-code,
  .km-receipt-token,
  .km-receipt-mono,
  .sn-box,
  code, kbd, samp {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: 'tnum' 1, 'zero' 1;
  }

  /* Editorial Heading Tight Tracking (design.md best-practice) */
  .hb-head b,
  .dx-title,
  .bento-hero-title,
  .bento-half-name,
  .km-care-title,
  .km-agency-title,
  .section-title,
  .sheet-title {
    letter-spacing: -0.018em;
  }

  /* Tactile Copy Feedback (design.md / AGENTS.md) */
  .btn-copy-nominal.copy-success,
  button.copy-success {
    background: var(--good-bg, rgba(52, 199, 89, 0.16)) !important;
    color: var(--good-dark, #248a3d) !important;
    border-color: var(--good-border, rgba(52, 199, 89, 0.35)) !important;
    transform: scale(1.04);
    transition: all 0.15s ease;
  }
  [data-theme="dark"] .btn-copy-nominal.copy-success,
  [data-theme="dark"] button.copy-success {
    background: rgba(48, 209, 88, 0.22) !important;
    color: #30D158 !important;
    border-color: rgba(48, 209, 88, 0.45) !important;
  }

  /* Semantic Button Variants & Surface Dividers (design.md) */
  .btn-primary {
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--blue-bg);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .btn-primary:active {
    transform: scale(0.97);
  }

  .btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    font-weight: 600;
    border-radius: 12px;
    padding: 9px 15px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .btn-secondary:hover {
    background: var(--surface-hover);
  }

  .btn-ghost {
    background: transparent;
    color: var(--ink-muted);
    border: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .btn-ghost:hover {
    color: var(--ink);
    background: var(--surface-hover);
  }

  /* Thin restrained surface dividers (color-line-default) */
  .divider-line {
    height: 1px;
    background: var(--line, rgba(60, 60, 67, 0.08));
    border: none;
    margin: 12px 0;
  }
  [data-theme="dark"] .divider-line {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Quick action chips inside spotlight empty state */
  .spotlight-quick-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
  }
  .btn-spotlight-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-spotlight-chip:active {
    transform: scale(0.94);
    background: var(--surface-hover);
  }
  [data-theme="dark"] .btn-spotlight-chip {
    background: #1C1C1E;
    border-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
  }

  .btn-spotlight-clear-action {
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--blue-bg);
    transition: transform 0.12s ease, opacity 0.12s ease;
  }
  .btn-spotlight-clear-action:active {
    transform: scale(0.96);
    opacity: 0.9;
  }

  .app.focus-mode .section{padding-bottom:24px;}
  .stepper-item{gap:4px;font-size:10.5px;white-space:nowrap;}
  .stepper-text{font-size:10.5px;}
  .stepper-line{margin:0 4px;min-width:6px;}
  @media (max-width:360px){.stepper-item:not(.active):not(.done) .stepper-text{display:none;}}

  @media (max-width:599px){.app:not(.focus-mode) .cats{grid-template-columns:repeat(5,1fr) !important;gap:8px 1px !important;padding:10px 2px 8px !important;}}

  /* ===== WIDGET VOUCHER AKTIF DI BERANDA ===== */
  .active-voucher-banner {
    background: linear-gradient(135deg, var(--accent-light) 0%, rgba(52, 199, 89, 0.08) 100%);
    border: 1.5px solid var(--blue-border);
    border-radius: 18px;
    padding: 13px 15px;
    margin: 4px 0 16px;
    box-shadow: 0 4px 18px var(--blue-bg);
    position: relative;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  [data-theme="dark"] .active-voucher-banner {
    background: linear-gradient(135deg, var(--accent-light) 0%, rgba(48, 209, 88, 0.15) 100%);
    border-color: var(--blue-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  }

  /* ===== BERANDA: Paling Laris & Jelajahi Layanan ===== */
  .app:not(.focus-mode) .section{padding-top:4px;}
  .home-block{margin:0 0 12px;}
  .home-block:first-child{margin-top:0;}
  .hb-head{margin:0 0 8px;}
  .hb-head b{display:block;font-size:16px;font-weight:800;line-height:1.25;}

  .btn-repeat-order{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:6px;
    border:none;
    cursor:pointer;
    box-shadow:0 2px 6px var(--blue-bg);
    transition:transform .12s;
  }
  .btn-repeat-order:active{
    transform:scale(.95);
  }

  /* ===== ALFAGIFT SUB-TABS (AKTIVITAS: BELANJA RUTIN & RIWAYAT) ===== */
  .alfa-tabs-wrap {
    display: flex;
    background: color-mix(in srgb, var(--surface-muted) 80%, var(--border));
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 3px;
    margin: 4px 0 16px;
    gap: 4px;
    box-sizing: border-box;
  }
  .alfa-tab-btn {
    flex: 1;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
  }
  .alfa-tab-btn:active {
    transform: scale(0.97);
  }
  .alfa-tab-btn.active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  [data-theme="dark"] .alfa-tabs-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
  }
  [data-theme="dark"] .alfa-tab-btn.active {
    background: #1E293B;
    color: #F8FAFC;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .alfa-info-banner {
    background: linear-gradient(135deg, var(--accent-light), var(--accent-subtle));
    border: 1px solid var(--accent);
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
  .alfa-info-icon {
    font-size: 20px;
    flex: none;
    line-height: 1;
  }
  .alfa-info-text b {
    display: block;
    font-size: 12.5px;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .alfa-info-text span {
    font-size: 11px;
    color: var(--ink-muted);
    line-height: 1.4;
    display: block;
  }
  .alfa-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 74px;
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 18px -4px rgba(15, 23, 42, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
    transition: transform 0.22s var(--spring-bounce), border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .alfa-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), 0 14px 24px -6px var(--blue-bg), inset 0 1.5px 0 #FFF;
  }
  .alfa-card:active {
    transform: scale(0.975);
  }
  .alfa-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }
  .alfa-card-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tint, var(--accent)) 0%, color-mix(in srgb, var(--tint, var(--accent)) 75%, #ffffff) 100%);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--tint, var(--accent)) 45%, transparent), inset 0 1px 1.5px rgba(255, 255, 255, 0.55);
  }
  .alfa-card-ic svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  }
  .alfa-card-info {
    min-width: 0;
    flex: 1;
  }
  .alfa-card-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }
  .alfa-card-dest {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin: 2px 0 3px;
  }
  .alfa-card-dest b {
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
    font-weight: 700;
  }
  .alfa-card-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--good);
  }
  .btn-alfa-repeat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--blue-bg), inset 0 1px 1px rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    transition: transform 0.2s var(--spring-bounce), box-shadow 0.2s ease;
  }
  .btn-alfa-repeat:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px var(--blue-bg);
  }
  .btn-alfa-repeat:active {
    transform: scale(0.92);
  }

  .app.focus-mode .km-cs{display:none;}

  /* ===== Blok bawah beranda & produk: padat & rapi ===== */
  .km-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;background:none;border:0;border-radius:0;padding:2px 0;margin:12px 0 10px;}
  .km-trust > span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-muted);padding:0;border:0;}
  .km-trust > span svg{color:var(--accent-dark);flex:none;}
  .km-cs{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 14px;margin:8px 0;min-height:44px;}
  .km-cs span{font-size:12.5px;color:var(--ink);font-weight:600;}
  .km-cs b{font-size:12.5px;color:var(--accent-dark);font-weight:700;white-space:nowrap;}
  .km-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 4px;font-size:11.5px;color:var(--ink-muted);}
  .km-foot a{color:var(--ink-muted);text-decoration:none;cursor:pointer;font-weight:500;}
  .km-foot a:active{color:var(--accent);}
  .km-foot i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--ink-subtle);}

  /* =====================================================================
     DX — TAMPILAN HALAMAN KATEGORI ALA DANA
     Hanya kerangka: header berwarna + tombol kembali, kartu input
     mengambang, segmented tabs, daftar transaksi terakhir, grid nominal
     2 kolom. Warna & data produk tetap milik Karisma Market.
     Dipakai hanya saat .app.focus-mode (halaman kategori).
     ===================================================================== */
  .app.focus-mode{ --dx-hero:#007AFF; --dx-price:#0051A8; --dx-ink:#1C1C1E; }
  [data-theme="dark"] .app.focus-mode{ --dx-hero:#000000; --dx-price:#0A84FF; --dx-ink:#FFFFFF; }

  .dx-page{ padding-bottom:24px; }
  .app.focus-mode{ background:var(--bg); }

  .dx-hero{
    background: linear-gradient(180deg, 
      #007AFF 0%, 
      #0A84FF 32%, 
      #3B9EFF 62%, 
      color-mix(in srgb, #007AFF 30%, var(--bg)) 82%, 
      var(--bg) 100%
    );
    padding-top:max(16px, calc(14px + env(safe-area-inset-top, 0px)));
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px));
    padding-bottom:54px;
    color:#fff;
    position:relative;
    border-bottom:none;
  }
  .dx-hero::before{
    content:'';
    position:absolute;
    top:-300px;
    left:0;
    right:0;
    height:300px;
    background:#007AFF;
    pointer-events:none;
  }
  [data-theme="dark"] .dx-hero{
    background: linear-gradient(180deg, 
      #0A84FF 0%, 
      #005BB5 32%, 
      #003366 60%, 
      color-mix(in srgb, #0A84FF 15%, #000000) 80%, 
      #000000 100%
    );
  }
  [data-theme="dark"] .dx-hero::before{
    background:#0A84FF;
  }
  .dx-hero--tall{
    padding-bottom:28px;
    background: linear-gradient(180deg, 
      #007AFF 0%, 
      #0A84FF 30%, 
      #2B92FF 60%, 
      color-mix(in srgb, #007AFF 30%, var(--bg)) 80%, 
      var(--bg) 100%
    );
  }
  [data-theme="dark"] .dx-hero--tall{
    background: linear-gradient(180deg, 
      #0A84FF 0%, 
      #005BB5 30%, 
      #003366 55%, 
      color-mix(in srgb, #0A84FF 15%, #000000) 80%, 
      #000000 100%
    );
  }
  .dx-bar{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; min-height:48px; }
  .dx-back{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    margin-left:-10px; background:none; border:0; color:#fff; cursor:pointer; border-radius:50%;
  }
  .dx-back:active{ background:rgba(255,255,255,.18); }
  .dx-back svg{ width:24px; height:24px; }
  .dx-title{
    margin:0; text-align:center; color:#fff;
    font-family:'Sora','Inter',sans-serif; font-weight:700; font-size:18px; letter-spacing:-.1px;
  }

  /* ---------- KARTU PUTIH ---------- */
  .dx-card{
    position:relative; z-index:2;
    margin:-48px 16px 0; padding:16px 18px 18px;
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:24px;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 24px -4px rgba(15, 23, 42, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  }
  .dx-hero .dx-card{
    margin:14px 0 0;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.04), 0 10px 28px -4px rgba(15, 23, 42, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  }
  [data-theme="dark"] .dx-hero .dx-card{
    box-shadow:0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* ---------- SEGMENTED TABS (STANDAR KONSISTEN) ---------- */
  .dx-seg{
    display:flex; gap:4px; padding:3px; border-radius:9999px;
    background:color-mix(in srgb, var(--surface-muted) 80%, var(--border)); border:1px solid var(--border);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
  }
  .dx-seg::-webkit-scrollbar{ display:none; }
  .dx-seg button{
    flex:1 0 auto; min-height:44px; padding:0 16px; border:0; border-radius:9999px;
    background:transparent; color:var(--ink-muted); cursor:pointer; white-space:nowrap;
    font:700 13px 'Inter',sans-serif;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing:border-box;
  }
  .dx-seg button:active{ transform:scale(0.96); opacity:0.9; }
  .dx-seg button svg{ width:16px; height:16px; }
  .dx-seg button.on{
    background:var(--surface); color:var(--ink);
    box-shadow:0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  [data-theme="dark"] .dx-seg{
    background:rgba(255, 255, 255, 0.06);
    border-color:rgba(255, 255, 255, 0.08);
  }
  [data-theme="dark"] .dx-seg button.on{
    background:#1E293B; color:#F8FAFC;
    box-shadow:0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .dx-seg--card{ margin-bottom:16px; }
  /* varian di atas hero (telco & wifi): kaca transparan berkejelasan tinggi */
  .dx-seg--hero{ background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.24); border-radius:9999px; margin-top:14px; margin-bottom:2px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .dx-seg--hero button{ color:#FFFFFF; font-weight:700; flex:1 1 0; padding:0 10px; text-shadow:0 1px 2px rgba(0,0,0,0.35); min-height:38px; border-radius:9999px; }
  .dx-seg--hero button.on{ background:#FFFFFF; color:#0051A8; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.2); text-shadow:none; }
  [data-theme="dark"] .dx-seg--hero button.on{ background:#FFFFFF; color:#0051A8; }

  /* ---------- KARTU NOMOR (telco) ---------- */
  .dx-numcard{
    background:var(--surface); border:1.5px solid var(--border); border-radius:22px; overflow:hidden;
    box-shadow:0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 18px -4px rgba(15, 23, 42, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  }
  .dx-numrow{ display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; }
  .dx-op-logo{
    flex:0 0 auto; width:42px; height:42px; border-radius:50%;
    background:var(--accent-light); color:var(--accent-dark);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  }
  .dx-op-logo svg{ width:20px; height:20px; }
  .dx-op-logo b{ font:800 11.5px 'Inter',sans-serif; letter-spacing:.2px; }
  [data-theme="dark"] .dx-op-logo{ background:var(--accent-light); }
  .dx-numfield{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; cursor:text; }
  .dx-numlabel{ font:500 12px 'Inter',sans-serif; color:var(--ink-muted); line-height:1.3; }
  .dx-numfield input{
    width:100%; border:0 !important; outline:0; background:transparent !important; padding:0 !important;
    box-shadow:none !important; border-radius:0 !important; min-height:0 !important;
    font:600 22px/1.25 'Sora','Inter',sans-serif; letter-spacing:.3px; color:var(--ink);
  }
  .dx-numfield input::placeholder{ font-size:16px; font-weight:500; letter-spacing:0; color:var(--ink-subtle); }
  .dx-clear{
    flex:0 0 auto; width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; border:0; cursor:pointer;
    background:var(--surface-hover); color:var(--ink-muted); display:none; align-items:center; justify-content:center;
  }
  .dx-clear svg{ width:14px; height:14px; }
  .has-value .dx-clear, .dx-field.has-value .dx-clear{ display:flex; }
  .dx-vr{ flex:0 0 auto; width:1px; height:36px; background:var(--border); }
  .dx-contact{
    flex:0 0 auto; width:40px; height:40px; border:0; border-radius:10px; cursor:pointer;
    background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center;
  }
  .dx-contact svg{ width:20px; height:20px; }
  [data-theme="dark"] .dx-contact{ background:var(--accent-light); }
  .dx-numcard .op-detect{ margin:-4px 14px 10px 66px; }
  .dx-numcard #contactQuickSaveBox{ margin:-2px 14px 10px 66px; }
  .dx-strip{
    width:100%; display:flex; align-items:center; gap:10px; padding:11px 14px; border:0; cursor:pointer;
    background:var(--accent-subtle); color:var(--accent-dark); text-align:left;
    font:600 13.5px 'Inter',sans-serif; border-top:1px solid var(--border);
  }
  .dx-strip .dx-strip-ic{
    width:30px; height:30px; border-radius:50%; background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  }
  .dx-strip .dx-strip-ic svg{ width:16px; height:16px; }
  .dx-strip .dx-strip-txt{ flex:1 1 auto; }
  .dx-strip > svg{ width:18px; height:18px; flex:0 0 auto; }

  /* ---------- LEMBAR KONTEN (telco) ---------- */
  .dx-sheet{
    position:relative; z-index:2; margin-top:0; padding:12px 16px 8px;
    background:transparent; min-height:360px;
    padding-bottom:24px !important;
  }
  .dx-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 0 14px; margin-bottom:2px; scrollbar-width:none; box-sizing:border-box; }
  .dx-chips::-webkit-scrollbar{ display:none; }
  .dx-chip-op{
    flex:0 0 auto; min-height:40px; padding:0 14px; border-radius:999px; cursor:pointer;
    border:1.5px solid var(--border); background:var(--surface); color:var(--ink-medium);
    font:700 13px 'Inter',sans-serif; display:inline-flex; align-items:center; gap:8px;
    transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-sizing:border-box;
  }
  .dx-chip-op:active{ transform:none; opacity:0.85; }
  .dx-chip-op.on{
    border-color:var(--accent); background:var(--accent-subtle); color:var(--accent-dark);
    box-shadow:0 2px 8px var(--blue-bg);
  }
  .dx-chip-op svg{ width:14px; height:14px; }
  .dx-chip-logo-box{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .dx-chip-logo-box img{ width:20px; height:20px; object-fit:contain; border-radius:4px; }

  /* Brand Real Logo Standard & Brand Grid */
  .brand-real-logo{ display:inline-block; object-fit:contain; vertical-align:middle; border-radius:6px; flex-shrink:0; }
  .dx-brand-select-box{ margin:0 0 16px 0; display:flex; flex-direction:column; gap:8px; }
  .dx-brand-grid-header{ display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
  .dx-brand-grid-title{ font:700 13px/1.2 'Inter',-apple-system,sans-serif; color:var(--ink); letter-spacing:-0.1px; }
  .dx-brand-grid-count{ font:500 11px/1.2 'Inter',sans-serif; color:var(--ink-muted); }
  .dx-brand-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; box-sizing:border-box; }
  @media(max-width:360px){ .dx-brand-grid{ grid-template-columns:repeat(3, 1fr); } }
  .dx-brand-card{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:10px 4px 8px; background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
    cursor:pointer; transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1); text-align:center; min-height:80px;
    box-sizing:border-box; -webkit-tap-highlight-color:transparent;
  }
  .dx-brand-card:hover{ border-color:var(--border-strong, #cbd5e1); background:var(--surface-muted, #f8fafc); }
  .dx-brand-card:active{ transform:scale(0.96); }
  .dx-brand-card.is-active{
    border-color:var(--accent); background:var(--accent-subtle, #eff6ff);
    box-shadow:0 0 0 1.5px var(--accent), 0 3px 10px rgba(0, 102, 255, 0.12);
  }
  .dx-brand-card-icon-wrap{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; flex-shrink:0; }
  .dx-brand-card-icon-wrap img{ width:38px; height:38px; object-fit:contain; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
  .dx-brand-card-label{
    font:600 11px/1.2 'Inter',-apple-system,sans-serif; color:var(--ink); text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; word-break:break-word;
  }
  .dx-brand-card.is-active .dx-brand-card-label{ color:var(--accent-dark, #0052cc); font-weight:700; }
  .dx-brand-card-indicator{
    position:absolute; top:4px; right:4px; width:16px; height:16px; border-radius:50%;
    background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 4px rgba(0, 102, 255, 0.4);
  }
  .dx-brand-grid--pasca{ grid-template-columns:repeat(4, 1fr); }

  /* Biller List (Tagihan / PPOB) */
  .dx-biller-box{ margin:12px 0; display:flex; flex-direction:column; gap:8px; }
  .dx-biller-list{ display:flex; flex-direction:column; gap:8px; }
  .dx-biller-item{
    display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
    background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
    cursor:pointer; transition:all 0.2s ease; width:100%; box-sizing:border-box; text-align:left;
  }
  .dx-biller-item:active{ transform:scale(0.98); }
  .dx-biller-item.is-active{
    border-color:var(--accent); background:var(--accent-subtle, #eff6ff);
    box-shadow:0 2px 8px rgba(0, 102, 255, 0.08);
  }
  .dx-biller-item-left{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
  .dx-biller-logo-wrap{
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; border-radius:8px; background:var(--surface-muted, #f8fafc);
  }
  .dx-biller-logo-wrap img{ width:30px; height:30px; object-fit:contain; border-radius:6px; }
  .dx-biller-item-right{ display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:8px; }
  .dx-biller-check{
    width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .dx-biller-chevron{ color:var(--ink-muted); }

  /* ---------- LABEL + INPUT (kategori berbasis ID) ---------- */
  .dx-lbl-row{ display:flex; align-items:center; gap:6px; margin:2px 0 8px; }
  .dx-lbl{ font:600 12px 'Inter',sans-serif; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-muted); }
  .dx-info{
    width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ink-subtle); background:none;
    color:var(--ink-muted); font:700 12px/1 'Inter',sans-serif; cursor:pointer; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .dx-inputrow{
    display:flex; align-items:center; gap:6px; padding:0 6px 0 14px; min-height:54px;
    border:1.5px solid var(--border); border-radius:12px; background:var(--surface);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .dx-inputrow:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
  .dx-inputrow input{
    flex:1 1 auto; min-width:0; border:0 !important; outline:0; background:transparent !important;
    padding:0 !important; box-shadow:none !important; border-radius:0 !important; min-height:0 !important;
    font:500 16px 'Inter',sans-serif; color:var(--ink); height:50px;
  }
  .dx-inputrow input::placeholder{ color:var(--ink-subtle); font-weight:400; }
  .dx-inputrow .dx-clear{ width:44px; height:44px; min-width:44px; min-height:44px; }
  .dx-inputrow .dx-contact{ width:38px; height:38px; background:transparent; }
  .dx-check{
    flex:0 0 auto; min-height:38px; padding:0 14px; border:0; border-radius:99px; cursor:pointer;
    background:var(--accent); color:#fff; font:700 12.5px 'Inter',sans-serif;
  }
  .dx-check:disabled{ opacity:.6; }
  .dx-card #contactQuickSaveBox{ margin-top:8px; }
  .dx-card .validate-box{ margin-top:10px; }

  /* ---------- DAFTAR PENYEDIA (tagihan) ---------- */
  .dx-biller-title{ font:600 12px 'Inter',sans-serif; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-muted); margin:2px 0 8px; }
  .dx-biller{
    width:100%; display:flex; align-items:center; gap:12px; padding:13px 15px; margin-bottom:9px; cursor:pointer;
    border:1.5px solid var(--border); border-radius:18px;
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    box-shadow:var(--shadow-card); text-align:left;
    transition:transform 0.2s var(--spring-bounce), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .dx-biller:hover{ border-color:var(--accent); transform:translateY(-1.5px); box-shadow:var(--shadow-card-hover); }
  .dx-biller:active{ transform:scale(0.975); }
  .dx-biller.on{ border-color:var(--accent); background:var(--accent-subtle); box-shadow:0 0 0 1.5px var(--accent), var(--shadow-card); }
  .dx-biller-ic{
    flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark);
    display:flex; align-items:center; justify-content:center;
  }
  .dx-biller-ic svg{ width:20px; height:20px; }
  [data-theme="dark"] .dx-biller-ic{ background:var(--accent-light); }
  .dx-biller-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .dx-biller-tx b{ font:700 14px 'Inter',sans-serif; color:var(--ink); }
  .dx-biller-tx span{ font:400 12px 'Inter',sans-serif; color:var(--ink-muted); }
  .dx-radio{
    flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--border-hover);
    display:flex; align-items:center; justify-content:center;
  }
  .dx-biller.on .dx-radio{ border-color:var(--accent); }
  .dx-biller.on .dx-radio::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--accent); }
  .dx-empty b{ color:var(--ink); font-weight:600; }
  .dx-empty{ padding:28px 12px; text-align:center; font:400 13px 'Inter',sans-serif; color:var(--ink-muted); }

  /* ---------- TRANSAKSI TERAKHIR ---------- */
  .dx-section{ padding:0 16px; }
  .dx-sec-title{
    margin:20px 0 10px; font:600 12px 'Inter',sans-serif; letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink-muted);
  }
  .dx-rec{
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--border)) 100%);
    border:1px solid var(--border); border-radius:20px;
    margin-bottom:12px; overflow:hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 18px -4px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .dx-rec-top{ display:flex; align-items:center; gap:12px; padding:14px 14px 12px; }
  .dx-rec-ic{
    flex:0 0 auto; width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg, #0284C7 0%, #38BDF8 100%); color:#FFFFFF;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(2, 132, 199, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
    border:none;
  }
  .dx-rec-ic svg{ width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
  [data-theme="dark"] .dx-rec-ic{
    background:linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
    box-shadow:0 4px 16px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .dx-rec-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .dx-rec-main b{ font:600 15px 'Inter',sans-serif; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dx-rec-main span{ font:400 13px 'Inter',sans-serif; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dx-rec-amt{ flex:0 0 auto; font:600 16px 'Sora','Inter',sans-serif; color:var(--ink); }
  .dx-rec-bot{
    display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border);
  }
  .dx-rec-date{ flex:1 1 auto; font:500 13px 'Inter',sans-serif; color:var(--ink-muted); }
  .dx-link{
    min-height:40px; padding:0 4px; border:0; background:none; cursor:pointer;
    color:var(--accent); font:700 13px 'Inter',sans-serif; letter-spacing:.3px; text-transform:uppercase;
  }
  [data-theme="dark"] .dx-link{ color:var(--accent); }
  .dx-btn-o{
    min-height:40px; padding:0 16px; border-radius:8px; cursor:pointer;
    border:1.5px solid var(--accent); background:transparent; color:var(--accent);
    font:700 13px 'Inter',sans-serif; letter-spacing:.3px; text-transform:uppercase;
  }
  [data-theme="dark"] .dx-btn-o{ color:var(--accent); border-color:var(--accent); }
  .dx-btn-o:active, .dx-link:active{ opacity:.7; }

  /* ---------- GRID NOMINAL 2 KOLOM ---------- */
  .dx-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:2px; }
  .dx-prod{
    position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:8px;
    min-height:94px; padding:14px; text-align:left; cursor:pointer; min-width:0; overflow:hidden;
    touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent;
    background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, var(--bg)) 100%);
    border:1.5px solid var(--border); border-radius:18px;
    box-shadow:inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 2px 8px rgba(15, 23, 42, 0.04), 0 8px 18px -4px rgba(15, 23, 42, 0.06);
    transition:transform 0.22s var(--spring-bounce), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    will-change:transform;
  }
  .dx-prod:active{ transform:scale(0.985); }
  .dx-prod:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .dx-prod.is-selected{
    border-color:var(--accent); background:var(--accent-subtle);
    box-shadow:0 0 0 1.5px var(--accent), 0 8px 22px var(--blue-bg), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform:scale(1.015);
  }
  .dx-prod.is-selected:active{ transform:scale(0.985); }
  .dx-p-name{
    font:700 17px/1.25 'Sora','Inter',sans-serif; color:var(--ink); letter-spacing:-.1px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    text-wrap: balance;
  }
  .dx-prod.is-down .dx-p-name{ padding-right:56px; }
  .dx-p-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:0; }
  .dx-p-desc{
    font:400 11.5px/1.35 'Inter',sans-serif; color:var(--ink-muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .dx-p-chip{
    padding:3px 9px; border-radius:999px; background:var(--surface-hover); color:var(--ink-medium);
    font:600 12px 'Inter',sans-serif; white-space:nowrap;
  }
  .dx-p-price{
    font-family:'Sora','Inter',sans-serif;
    font-weight:700;
    font-size:clamp(14px, 4vw, 17px);
    line-height:1.2;
    color:var(--dx-price);
    letter-spacing:-.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .dx-tag{
    position:absolute; top:0; right:0; padding:4px 10px; border-radius:0 14px 0 12px;
    background:var(--rose-bg); color:var(--rose-dark); font:700 10.5px 'Inter',sans-serif; letter-spacing:.4px; text-transform:uppercase;
  }
  .dx-prod.is-down{ opacity:.62; }
  .dx-prod.is-down .dx-p-price{ color:var(--ink-muted); }

  .dx-block{ padding:0 16px; }
  .dx-block > .dx-sec-title:first-child{ margin-top:24px; }

  /* tombol Lanjut: lebih tegas, seperti CTA DANA */
  .app.focus-mode .card-sticky-cta{ min-height:52px; border-radius:14px; font-size:15px; }

  @media (max-width:359px){
    .dx-p-name{ font-size:14px; }
    .dx-p-price{ font-size:14px; }
    .dx-numfield input{ font-size:18px; }
  }
  @media (max-width:768px){
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
      font-size:16px !important;
    }
  }

  /* ---------- SPLASH SCREEN (LAUNCH SCREEN 1.2s - POLOS BIRU) ---------- */
  .km-splash-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
    will-change: opacity, transform;
  }
  .km-splash-screen.fade-out {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
    visibility: hidden;
  }
  .km-splash-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    animation: kmSplashPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes kmSplashPop {
    from { opacity: 0; transform: scale(0.88) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .km-splash-logo-wrap {
    width: 96px;
    height: 96px;
    border-radius: 26px;
    background: #FFFFFF;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 10px;
  }
  .km-splash-water-svg {
    width: 76px;
    height: 42px;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 122, 255, 0.3));
  }
  .km-splash-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
  }
  .km-splash-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: #007AFF;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .km-splash-title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  .km-splash-sub {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  .km-splash-loader {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 99px;
    margin-top: 26px;
    overflow: hidden;
    position: relative;
  }
  .km-splash-bar {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 99px;
    transform: translateX(-100%);
    animation: kmSplashFill 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes kmSplashFill {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  @keyframes kmSpin { to { transform: rotate(360deg); } }
  .spin-anim { animation: kmSpin 1s linear infinite; }
  .spinner {
    width: 38px;
    height: 38px;
    margin: 16px auto;
    border: 3.5px solid var(--border);
    border-top-color: #009995;
    border-radius: 50%;
    animation: kmSpin 0.8s linear infinite;
  }
  @keyframes kmPulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
  .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: kmPulseDot 1.2s ease-in-out infinite; }

  /* ================= RECEIPT MODAL & THERMAL PRINT (USER) ================= */
  .km-receipt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: kmReceiptFadeIn 0.2s ease-out;
  }
  @keyframes kmReceiptFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
  }
  .km-receipt-paper {
    background: #ffffff;
    color: #0f172a;
    width: 100%;
    max-width: 360px;
    border-radius: 16px;
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
  }
  .km-receipt-scroll {
    padding: 22px 18px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    color: #0f172a;
  }
  .km-receipt-actions {
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .km-receipt-header {
    text-align: center;
    margin-bottom: 10px;
  }
  .km-receipt-title {
    font-family: 'JetBrains Mono', Courier, monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #0f172a;
    margin: 0 0 3px;
  }
  .km-receipt-subtitle {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
  }
  .km-receipt-divider {
    border: none;
    border-top: 1px dashed #94a3b8;
    margin: 10px 0;
  }
  .km-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 11.5px;
    margin-bottom: 5px;
    line-height: 1.35;
  }
  .km-receipt-lbl {
    color: #64748b;
    font-weight: 500;
  }
  .km-receipt-val {
    color: #0f172a;
    font-weight: 700;
    text-align: right;
    max-width: 62%;
    word-break: break-word;
  }
  .km-receipt-sn-box {
    background: #f1f5f9;
    border: 1.5px dashed var(--accent, #007AFF);
    border-radius: 9px;
    padding: 8px 10px;
    margin: 8px 0;
    text-align: center;
  }
  .km-receipt-sn-lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--accent-dark, #0051A8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
  }
  .km-receipt-sn-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.5px;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
  }
  .km-receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    padding: 6px 0 2px;
  }
  .km-receipt-footer {
    text-align: center;
    font-size: 10px;
    color: #64748b;
    line-height: 1.35;
    margin-top: 10px;
  }

  /* THERMAL PRINTER MEDIA QUERY (USER) */
  @media print {
    body * {
      visibility: hidden !important;
    }
    #kmReceiptPrintContainerUser, #kmReceiptPrintContainerUser * {
      visibility: visible !important;
    }
    #kmReceiptPrintContainerUser {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: 58mm !important;
      max-width: 80mm !important;
      margin: 0 !important;
      padding: 4px !important;
      background: #fff !important;
      color: #000 !important;
      font-family: 'JetBrains Mono', Courier, monospace !important;
      font-size: 11px !important;
      line-height: 1.3 !important;
    }
    .km-receipt-actions, .no-print {
      display: none !important;
    }
  }

  /* =====================================================================
     KARTU EKOSISTEM KARISMA CARE (SERVIS & PERBAIKAN HP)
     ===================================================================== */
  .km-care-card {
    margin: 18px 0 20px;
    padding: 20px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 132, 199, 0.04) 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .km-care-card:active {
    transform: scale(0.985);
  }
  [data-theme="dark"] .km-care-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    border: 1.5px solid rgba(52, 211, 153, 0.28) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(16, 185, 129, 0.15) !important;
  }
  .km-care-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #059669 0%, #0D9488 100%);
    color: #FFFFFF;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
  }
  .km-care-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.35;
  }
  .km-care-desc {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .km-care-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }
  .km-care-tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-medium);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  [data-theme="dark"] .km-care-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
  }
  .km-care-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1.5px solid rgba(16, 185, 129, 0.3);
    color: #047857;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
    transition: all 0.15s ease;
  }
  [data-theme="dark"] .km-care-btn {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  /* =====================================================================
     KARTU & MODAL JASA PEMBUATAN WEB TOP-UP & PPOB (STANDALONE & TERPISAH)
     ===================================================================== */
  .km-agency-card {
    margin: 18px 0 22px;
    padding: 20px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--accent-subtle) 0%, rgba(15, 23, 42, 0.02) 100%);
    border: 1.5px solid var(--blue-border);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px var(--blue-bg), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .km-agency-card:active {
    transform: scale(0.985);
  }
  [data-theme="dark"] .km-agency-card {
    background: linear-gradient(135deg, var(--accent-subtle) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1.5px solid var(--blue-border);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  }
  .km-agency-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #FFFFFF;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px var(--blue-bg);
  }
  .km-agency-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.35;
  }
  .km-agency-desc {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .km-agency-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }
  .km-agency-tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-medium);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  [data-theme="dark"] .km-agency-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .km-agency-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1.5px solid var(--blue-border);
    color: var(--accent-dark);
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--blue-bg);
    transition: all 0.15s ease;
  }
  [data-theme="dark"] .km-agency-btn {
    background: var(--accent-light);
    color: #38bdf8;
    border-color: var(--blue-border);
  }

  /* MODAL DETAIL JASA PEMBUATAN WEB */
  .km-agency-modal-card {
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    border-radius: 22px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    animation: kmReceiptFadeIn 0.22s ease-out;
  }
  .km-agency-modal-header {
    background: linear-gradient(135deg, #0B192C 0%, #1A2844 100%);
    color: #FFFFFF;
    padding: 18px 20px 16px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .km-agency-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .km-agency-modal-close:hover { background: rgba(255, 255, 255, 0.25); }
  .km-agency-modal-body {
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink);
  }
  .km-agency-section {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .km-agency-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .km-agency-sec-title {
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .km-agency-faq-item {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .km-agency-faq-q {
    font-weight: 700;
    color: var(--ink);
    font-size: 12px;
    margin-bottom: 4px;
  }
  .km-agency-faq-a {
    color: var(--ink-muted);
    font-size: 11.5px;
    line-height: 1.45;
  }
  .km-agency-bonus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .km-agency-bonus-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-medium);
  }
  .km-agency-price-box {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-subtle) 100%);
    border: 1.5px dashed var(--blue-border);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin-top: 14px;
  }
  .km-agency-price-old {
    text-decoration: line-through;
    color: #ef4444;
    font-size: 13px;
    font-weight: 700;
  }
  .km-agency-price-promo {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-dark);
    margin: 4px 0 2px;
  }
  [data-theme="dark"] .km-agency-price-promo {
    color: #38bdf8;
  }
  .km-agency-wa-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #FFFFFF;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: transform 0.15s ease;
  }
  .km-agency-wa-btn:active { transform: scale(0.97); }

  /* =====================================================================
     BERANDA: APPLE BENTO GRID (IOS 18 CARD HIERARCHY)
     ===================================================================== */
  .bento-hot-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }
  .bento-card-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, #007AFF) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .bento-card-hero:active { transform: scale(0.98); }
  .bento-hero-left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bento-hero-ic {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .bento-hero-ic svg { width: 24px; height: 24px; display: block; }
  .bento-hero-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
  }
  .bento-hero-sub {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: 2px;
  }
  .bento-hero-right {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
  }
  .bento-hero-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    color: #007AFF;
  }
  .bento-hero-btn {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #007AFF;
    padding: 4px 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .bento-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bento-card-half {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .bento-card-half:active { transform: scale(0.97); }
  .bento-half-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .bento-card-half > div:last-child {
    position: relative;
    z-index: 1;
  }
  .bento-half-ic {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(0, 122, 255, 0.08);
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bento-half-ic svg { width: 20px; height: 20px; display: block; }
  .bento-half-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 99px;
    letter-spacing: 0.3px;
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .bento-half-badge[data-tag="POPULER"] {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
    border-color: rgba(245, 158, 11, 0.3);
  }
  .bento-half-badge[data-tag="LARIS"] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.3);
  }
  .bento-half-badge[data-tag="HEMAT"] {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    border-color: rgba(0, 122, 255, 0.24);
  }
  .bento-half-badge[data-tag="CEPAT"] {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
    border-color: rgba(139, 92, 246, 0.28);
  }
  .bento-half-badge[data-tag="GAMER"] {
    background: rgba(236, 72, 153, 0.12);
    color: #DB2777;
    border-color: rgba(236, 72, 153, 0.28);
  }
  .bento-half-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
  }
  .bento-half-prod {
    font-size: 11px;
    color: var(--ink-muted);
  }
  .bento-half-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    font-weight: 800;
    color: #007AFF;
    margin-top: 2px;
  }

  /* Ringkasan Jaminan Kilat */
  .km-trust-pills {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 8px;
    margin: 12px 0 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  }
  .km-trust-pill-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-medium);
  }
  .km-trust-pill-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  /* =====================================================================
     CARD AMBIENT ANIMATED SVG WATERMARK (WORLD-CLASS MOTION TEXTURE)
     ===================================================================== */
  .card-ambient-svg {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 86px;
    height: 86px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
    overflow: visible;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  .card-ambient-svg svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  [data-theme="dark"] .card-ambient-svg {
    opacity: 0.18;
  }
  .bento-card-hero .card-ambient-svg {
    width: 115px;
    height: 115px;
    right: 80px;
    bottom: -22px;
    opacity: 0.14;
  }
  [data-theme="dark"] .bento-card-hero .card-ambient-svg {
    opacity: 0.22;
  }
  .bento-card-half:hover .card-ambient-svg,
  .bento-card-hero:hover .card-ambient-svg,
  .km-care-card:hover .card-ambient-svg,
  .km-agency-card:hover .card-ambient-svg {
    opacity: 0.24;
    transform: scale(1.08);
  }
  [data-theme="dark"] .bento-card-half:hover .card-ambient-svg,
  [data-theme="dark"] .bento-card-hero:hover .card-ambient-svg,
  [data-theme="dark"] .km-care-card:hover .card-ambient-svg,
  [data-theme="dark"] .km-agency-card:hover .card-ambient-svg {
    opacity: 0.34;
  }

  /* GPU-Accelerated Micro-Motion Keyframes */
  @keyframes electricEnergyGlow {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px) scale(1.04); }
  }
  .anim-electric {
    transform-origin: center;
    animation: electricEnergyGlow 6s ease-in-out infinite;
  }

  @keyframes cellularWaveFloat {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(4deg) scale(1.06); }
  }
  .anim-cellular {
    transform-origin: bottom right;
    animation: cellularWaveFloat 9s ease-in-out infinite;
  }

  @keyframes orbitRingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .anim-orbit {
    transform-origin: center;
    animation: orbitRingSpin 24s linear infinite;
  }

  @keyframes dataStreamPulse {
    0%, 100% { transform: scale(0.97); opacity: 0.6; }
    50% { transform: scale(1.06); opacity: 1; }
  }
  .anim-data {
    transform-origin: center;
    animation: dataStreamPulse 8s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .anim-electric, .anim-cellular, .anim-orbit, .anim-data {
      animation: none !important;
    }
    .k-w, .k-line, .k-ok, .k-draw, .k-chk { opacity: 1 !important; stroke-dashoffset: 0 !important; }
    .k-glow, .k-ring, .k-up, .k-dn, .k-coin, .k-btn, .k-spin, .k-fire, .k-sweep, .k-rot, .k-shake, .k-flip, .k-pop { animation: none !important; }
  }

  /* === OPTIMASI PERFORMA TINGGI (COOL & ULTRA-RINGAN) === */
  /* Nonaktifkan infinite animation loop non-stop pada 10 ikon kategori agar CPU/GPU HP tetap dingin (0% Idle) */
  .k-w, .k-line, .k-ok, .k-draw, .k-chk { opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .k-glow, .k-ring, .k-up, .k-dn, .k-coin, .k-btn, .k-spin, .k-fire, .k-sweep, .k-rot, .k-shake, .k-flip, .k-pop, .k-float {
    animation: none !important;
  }
  .k-glow { filter: none !important; }

  /* Efek respon sentuhan ringan saat tombol kategori ditekan */
  .dana-grid-item:active {
    transform: scale(0.94);
    transition: transform 0.1s ease;
  }

  .bento-card-hero .rd {
    color: var(--wifi, #0284C7);
    position: absolute;
    right: -25px;
    top: 50%;
    width: 175px;
    height: 175px;
    margin-top: -87.5px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
  }
  [data-theme="dark"] .bento-card-hero .rd {
    color: var(--wifi, #38BDF8);
    opacity: 0.45;
  }

  /* =====================================================================
     CONSISTENT APPLE BOTTOM GRADIENT BLEND ACROSS ALL APP CARDS
     ===================================================================== */
  .bento-card-hero,
  .bento-card-half,
  .cats,
  .km-trust-pills,
  .km-care-card,
  .km-agency-card,
  .input-card,
  .dx-card,
  .dx-numcard,
  .wifi-v-card,
  .dx-prod,
  .hist-item,
  .pm-card,
  .alfa-card,
  .transfer-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, 
      var(--surface) 0%, 
      color-mix(in srgb, var(--surface) 97%, #007AFF) 60%, 
      color-mix(in srgb, var(--surface) 89%, #007AFF) 100%
    );
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px -2px rgba(0, 122, 255, 0.08), 0 10px 24px -5px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  /* Subtle ambient bottom gradient fade (Hanya untuk hero cards, bukan input cards) */
  .bento-card-hero::after,
  .bento-card-half::after,
  .cats::after,
  .km-care-card::after,
  .km-agency-card::after,
  .hist-item::after,
  .pm-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 122, 255, 0.06) 100%);
    pointer-events: none;
    border-radius: 0 0 inherit inherit;
    z-index: 1;
  }

  /* Dark Theme Overrides for All Cards */
  [data-theme="dark"] .bento-card-hero,
  [data-theme="dark"] .bento-card-half,
  [data-theme="dark"] .cats,
  [data-theme="dark"] .km-trust-pills,
  [data-theme="dark"] .km-care-card,
  [data-theme="dark"] .km-agency-card,
  [data-theme="dark"] .input-card,
  [data-theme="dark"] .dx-card,
  [data-theme="dark"] .dx-numcard,
  [data-theme="dark"] .wifi-v-card,
  [data-theme="dark"] .dx-prod,
  [data-theme="dark"] .hist-item,
  [data-theme="dark"] .pm-card,
  [data-theme="dark"] .alfa-card,
  [data-theme="dark"] .transfer-box {
    background: linear-gradient(180deg, 
      #1C1C1E 0%, 
      #17181C 55%, 
      color-mix(in srgb, #1C1C1E 72%, #0A84FF) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(10, 132, 255, 0.12) !important;
  }

  [data-theme="dark"] .bento-card-hero::after,
  [data-theme="dark"] .bento-card-half::after,
  [data-theme="dark"] .cats::after,
  [data-theme="dark"] .km-care-card::after,
  [data-theme="dark"] .km-agency-card::after,
  [data-theme="dark"] .hist-item::after,
  [data-theme="dark"] .pm-card::after {
    background: linear-gradient(180deg, transparent 0%, rgba(10, 132, 255, 0.12) 100%) !important;
  }

  [data-theme="dark"] .bento-hero-ic,
  [data-theme="dark"] .bento-half-ic {
    background: #2C2C2E;
    color: #0A84FF;
  }
  [data-theme="dark"] .bento-hero-btn {
    background: #0A84FF;
  }
  [data-theme="dark"] .bento-hero-price,
  [data-theme="dark"] .bento-half-price {
    color: #0A84FF;
  }
  [data-theme="dark"] .bento-half-badge {
    background: rgba(10, 132, 255, 0.15);
    color: #0A84FF;
  }
  [data-theme="dark"] .bento-half-badge[data-tag="POPULER"] {
    background: rgba(251, 191, 36, 0.16);
    color: #FBBF24;
    border-color: rgba(251, 191, 36, 0.35);
  }
  [data-theme="dark"] .bento-half-badge[data-tag="LARIS"] {
    background: rgba(52, 211, 153, 0.16);
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.35);
  }
  [data-theme="dark"] .bento-half-badge[data-tag="HEMAT"] {
    background: rgba(10, 132, 255, 0.16);
    color: #60A5FA;
    border-color: rgba(10, 132, 255, 0.35);
  }
  [data-theme="dark"] .bento-half-badge[data-tag="CEPAT"] {
    background: rgba(167, 139, 250, 0.16);
    color: #C4B5FD;
    border-color: rgba(167, 139, 250, 0.35);
  }
  [data-theme="dark"] .bento-half-badge[data-tag="GAMER"] {
    background: rgba(244, 114, 182, 0.16);
    color: #F472B6;
    border-color: rgba(244, 114, 182, 0.35);
  }

  /* GPU Compositing Performance (fixing-motion-performance - ui-skills.com) */
  .sheet, .overlay, .toast, .spotlight-sheet, .km-receipt-card, .dana-nav-item, .cat-tile, .pm-card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* ================= MITRA RESELLER: SMART PRICING & DUAL-MODE ================= */
  .dx-rsl-badge {
    user-select: none;
    transition: background-color 0.15s ease;
  }
  .dx-rsl-badge:hover {
    background-color: rgba(0, 153, 149, 0.12) !important;
  }
  body.km-reseller-customer-view .dx-rsl-badge,
  body.km-reseller-customer-view .km-kasir-only,
  body.km-reseller-customer-view .rsl-profit-box {
    display: none !important;
  }
  #kmResellerTopBar {
    position: relative;
    z-index: 10;
    transition: opacity 0.2s ease;
  }
  .app:not([data-page="home"]) #kmResellerTopBar {
    display: none !important;
  }
  .rsl-switch-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .rsl-switch-btn.is-active {
    box-shadow: 0 2px 6px rgba(0, 153, 149, 0.35);
  }

  /* ================= RINGKASAN MENU AKUN "SAYA" (GROUPED LIST) ================= */
  .km-settings-section {
    margin-top: 10px;
  }
  .km-settings-title {
    font-family: 'Sora', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-muted);
    margin-bottom: 6px;
    padding-left: 4px;
  }
  .km-settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(15, 23, 42, 0.04);
  }
  .km-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .km-setting-row:last-child {
    border-bottom: none;
  }
  .km-setting-row:hover,
  .km-setting-row:active {
    background-color: var(--accent-subtle);
  }
  .km-setting-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .km-setting-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .km-setting-icon svg {
    width: 16px;
    height: 16px;
  }
  .km-setting-text {
    min-width: 0;
  }
  .km-setting-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
  }
  .km-setting-sub {
    font-size: 10.5px;
    color: var(--ink-muted);
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .km-setting-right {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
    flex-shrink: 0;
    margin-left: 8px;
  }
  .km-setting-badge {
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }
  .km-setting-chevron {
    color: var(--ink-subtle);
    font-size: 15px;
    line-height: 1;
    margin-left: 1px;
  }