/* ═══════════════════════════════════════════════════════════════
   NATAYA APP — Design System (Wondr BNI inspired)
   Default palette: genz (Wondr) · Light + Dark · 3 densities · ID/EN
   Port dari design package: project/src/tokens.jsx + ui.jsx + home-modern.jsx
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════
   PALETTES — 5 themes × (light + dark)
   Default = genz (Wondr BNI inspired)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. GENZ (Wondr) — DEFAULT ─── */
:root,
[data-palette="genz"][data-theme="light"],
[data-palette="genz"]:not([data-theme]) {
    --bg: #F6F7F2;
    --surface: #FFFFFF;
    --surface-alt: #F0F2EA;
    --line: rgba(12,26,24,0.08);
    --line-strong: rgba(12,26,24,0.16);
    --ink: #0B1A18;
    --ink-muted: rgba(11,26,24,0.62);
    --ink-soft: rgba(11,26,24,0.38);
    --brand: #17C3A8;          /* teal primary */
    --brand-soft: #C8F0E8;
    --brand-ink: #0B6B5E;
    --accent: #C8F000;         /* electric lime hero */
    --accent-soft: #E8F89A;
    --accent-ink: #4A6500;
    --pop: #FF7A1A;            /* orange secondary */
    --pop-soft: #FFE4CC;
    --variety: #8B5CF6;        /* violet variety */
    --variety-soft: #E8DEFC;
    --cream: #FFF4E8;          /* warm card bg */
    --danger: #E14A4A;
    --danger-soft: #FBDCDC;
    --warning: #FF7A1A;
    --warning-soft: #FFE4CC;
    --success: #17C3A8;
    --success-soft: #C8F0E8;
    --info: #8B5CF6;
    --info-soft: #E8DEFC;
}
[data-palette="genz"][data-theme="dark"] {
    --bg: #07110F;
    --surface: #0F1C19;
    --surface-alt: #162623;
    --line: rgba(230,255,250,0.08);
    --line-strong: rgba(230,255,250,0.16);
    --ink: #EAFBF7;
    --ink-muted: rgba(234,251,247,0.64);
    --ink-soft: rgba(234,251,247,0.40);
    --brand: #2DD4BF;
    --brand-soft: rgba(45,212,191,0.18);
    --brand-ink: #7CF0DE;
    --accent: #D0F23A;
    --accent-soft: rgba(208,242,58,0.18);
    --accent-ink: #D0F23A;
    --pop: #FF8F3F;
    --pop-soft: rgba(255,143,63,0.18);
    --variety: #A78BFA;
    --variety-soft: rgba(167,139,250,0.20);
    --cream: rgba(255,143,63,0.12);
    --danger: #F37575;
    --danger-soft: rgba(243,117,117,0.18);
    --warning: #FF8F3F;
    --warning-soft: rgba(255,143,63,0.18);
    --success: #2DD4BF;
    --success-soft: rgba(45,212,191,0.18);
    --info: #A78BFA;
    --info-soft: rgba(167,139,250,0.20);
}

/* ─── 2. KAIN (heritage terracotta + cream) ─── */
[data-palette="kain"][data-theme="light"], [data-palette="kain"]:not([data-theme]) {
    --bg: #F7F2EC; --surface: #FFFFFF; --surface-alt: #FBF6EF;
    --line: rgba(47,32,20,0.10); --line-strong: rgba(47,32,20,0.18);
    --ink: #2B1D12; --ink-muted: rgba(43,29,18,0.62); --ink-soft: rgba(43,29,18,0.42);
    --brand: #B4502A; --brand-soft: #F3DBC9; --brand-ink: #6B2E14;
    --accent: #3F5A3A; --accent-soft: #DCE5D4; --accent-ink: #1F2D1C;
    --pop: #B8801C; --pop-soft: #F6E5C1;
    --variety: #2F5773; --variety-soft: #D4E0E9;
    --cream: #FBF6EF;
    --danger: #B23A2F; --danger-soft: #F5DAD6;
    --warning: #B8801C; --warning-soft: #F6E5C1;
    --success: #3F6F3A; --success-soft: #D7E7D3;
    --info: #2F5773; --info-soft: #D4E0E9;
}
[data-palette="kain"][data-theme="dark"] {
    --bg: #14100C; --surface: #1C1813; --surface-alt: #221D17;
    --line: rgba(255,240,220,0.08); --line-strong: rgba(255,240,220,0.14);
    --ink: #F5EDE2; --ink-muted: rgba(245,237,226,0.62); --ink-soft: rgba(245,237,226,0.38);
    --brand: #E37A4A; --brand-soft: rgba(227,122,74,0.22); --brand-ink: #FFBF9E;
    --accent: #9BBF93; --accent-soft: rgba(155,191,147,0.18); --accent-ink: #9BBF93;
    --pop: #E9B45C; --pop-soft: rgba(233,180,92,0.18);
    --variety: #8DB5D2; --variety-soft: rgba(141,181,210,0.18);
    --cream: rgba(227,122,74,0.10);
    --danger: #E87163; --danger-soft: rgba(232,113,99,0.18);
    --warning: #E9B45C; --warning-soft: rgba(233,180,92,0.18);
    --success: #8BC788; --success-soft: rgba(139,199,136,0.18);
    --info: #8DB5D2; --info-soft: rgba(141,181,210,0.18);
}

/* ─── 3. INDIGO (utilitarian ledger) ─── */
[data-palette="indigo"][data-theme="light"], [data-palette="indigo"]:not([data-theme]) {
    --bg: #F2F4F8; --surface: #FFFFFF; --surface-alt: #F8FAFC;
    --line: rgba(15,23,42,0.09); --line-strong: rgba(15,23,42,0.16);
    --ink: #0F172A; --ink-muted: rgba(15,23,42,0.62); --ink-soft: rgba(15,23,42,0.42);
    --brand: #3B4FE3; --brand-soft: #DEE2FC; --brand-ink: #1E2A96;
    --accent: #0EA5A4; --accent-soft: #CDECEC; --accent-ink: #054747;
    --pop: #D97706; --pop-soft: #FBE4C5;
    --variety: #0284C7; --variety-soft: #CCE6F4;
    --cream: #FBE4C5;
    --danger: #DC2626; --danger-soft: #FCD8D8;
    --warning: #D97706; --warning-soft: #FBE4C5;
    --success: #059669; --success-soft: #C7ECDC;
    --info: #0284C7; --info-soft: #CCE6F4;
}
[data-palette="indigo"][data-theme="dark"] {
    --bg: #0B1020; --surface: #121836; --surface-alt: #161C3E;
    --line: rgba(226,232,240,0.08); --line-strong: rgba(226,232,240,0.14);
    --ink: #E6E9F4; --ink-muted: rgba(230,233,244,0.62); --ink-soft: rgba(230,233,244,0.38);
    --brand: #7D8DFF; --brand-soft: rgba(125,141,255,0.20); --brand-ink: #B8C2FF;
    --accent: #4CDFDE; --accent-soft: rgba(76,223,222,0.18); --accent-ink: #4CDFDE;
    --pop: #FBBF24; --pop-soft: rgba(251,191,36,0.18);
    --variety: #60A5FA; --variety-soft: rgba(96,165,250,0.18);
    --cream: rgba(251,191,36,0.10);
    --danger: #F87171; --danger-soft: rgba(248,113,113,0.18);
    --warning: #FBBF24; --warning-soft: rgba(251,191,36,0.18);
    --success: #34D399; --success-soft: rgba(52,211,153,0.18);
    --info: #60A5FA; --info-soft: rgba(96,165,250,0.18);
}

/* ─── 4. NOIR (mono + gold accent) ─── */
[data-palette="noir"][data-theme="light"], [data-palette="noir"]:not([data-theme]) {
    --bg: #F4F3F1; --surface: #FFFFFF; --surface-alt: #FAF9F7;
    --line: rgba(0,0,0,0.10); --line-strong: rgba(0,0,0,0.18);
    --ink: #0D0D0D; --ink-muted: rgba(13,13,13,0.62); --ink-soft: rgba(13,13,13,0.38);
    --brand: #0D0D0D; --brand-soft: #E8E6E2; --brand-ink: #000000;
    --accent: #C48B4A; --accent-soft: #F2E3CE; --accent-ink: #5A3D1A;
    --pop: #C48B4A; --pop-soft: #F2E3CE;
    --variety: #2F5773; --variety-soft: #D4E0E9;
    --cream: #F2E3CE;
    --danger: #C1272D; --danger-soft: #F5D6D8;
    --warning: #B8801C; --warning-soft: #F5E4C2;
    --success: #3C7D3F; --success-soft: #D8E7D8;
    --info: #2F5773; --info-soft: #D4E0E9;
}
[data-palette="noir"][data-theme="dark"] {
    --bg: #0A0A0A; --surface: #141414; --surface-alt: #1A1A1A;
    --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14);
    --ink: #F5F4F2; --ink-muted: rgba(245,244,242,0.62); --ink-soft: rgba(245,244,242,0.38);
    --brand: #F5F4F2; --brand-soft: rgba(255,255,255,0.10); --brand-ink: #FFFFFF;
    --accent: #E2B27B; --accent-soft: rgba(226,178,123,0.18); --accent-ink: #E2B27B;
    --pop: #E2B27B; --pop-soft: rgba(226,178,123,0.18);
    --variety: #8DB5D2; --variety-soft: rgba(141,181,210,0.18);
    --cream: rgba(226,178,123,0.10);
    --danger: #E6696E; --danger-soft: rgba(230,105,110,0.18);
    --warning: #E9B45C; --warning-soft: rgba(233,180,92,0.18);
    --success: #88C18A; --success-soft: rgba(136,193,138,0.18);
    --info: #8DB5D2; --info-soft: rgba(141,181,210,0.18);
}

/* ─── 5. TEH (tea green + sand) ─── */
[data-palette="teh"][data-theme="light"], [data-palette="teh"]:not([data-theme]) {
    --bg: #F1F4EE; --surface: #FFFFFF; --surface-alt: #F7F8F2;
    --line: rgba(30,40,25,0.09); --line-strong: rgba(30,40,25,0.16);
    --ink: #1B241A; --ink-muted: rgba(27,36,26,0.62); --ink-soft: rgba(27,36,26,0.40);
    --brand: #3E7C3A; --brand-soft: #D7EACC; --brand-ink: #204C1F;
    --accent: #C77B2B; --accent-soft: #F1DEC4; --accent-ink: #5C3711;
    --pop: #C77B2B; --pop-soft: #F1DEC4;
    --variety: #2D6A8A; --variety-soft: #CFDFE8;
    --cream: #F1DEC4;
    --danger: #C24436; --danger-soft: #F3D5D0;
    --warning: #B8851C; --warning-soft: #F3E4BF;
    --success: #3E7C3A; --success-soft: #D7EACC;
    --info: #2D6A8A; --info-soft: #CFDFE8;
}
[data-palette="teh"][data-theme="dark"] {
    --bg: #0E140D; --surface: #161D14; --surface-alt: #1C2418;
    --line: rgba(230,240,220,0.08); --line-strong: rgba(230,240,220,0.14);
    --ink: #EAF1E3; --ink-muted: rgba(234,241,227,0.62); --ink-soft: rgba(234,241,227,0.38);
    --brand: #7FBC72; --brand-soft: rgba(127,188,114,0.20); --brand-ink: #B4DFAB;
    --accent: #E3A35C; --accent-soft: rgba(227,163,92,0.18); --accent-ink: #E3A35C;
    --pop: #E3A35C; --pop-soft: rgba(227,163,92,0.18);
    --variety: #78AFC8; --variety-soft: rgba(120,175,200,0.18);
    --cream: rgba(227,163,92,0.10);
    --danger: #E56D5F; --danger-soft: rgba(229,109,95,0.18);
    --warning: #E9B45C; --warning-soft: rgba(233,180,92,0.18);
    --success: #8BCD84; --success-soft: rgba(139,205,132,0.18);
    --info: #78AFC8; --info-soft: rgba(120,175,200,0.18);
}

/* ═══════════════════════════════════════════════════════════════
   DENSITY — affects spacing & type scale via custom props
   ═══════════════════════════════════════════════════════════════ */
:root,
[data-density="normal"] {
    --row: 52px; --row-sm: 44px; --gap: 12px; --gap-lg: 16px; --pad: 16px; --pad-lg: 20px;
    --type-mega: 40px; --type-title: 28px; --type-h2: 22px; --type-h3: 17px;
    --type-body: 16px; --type-sub: 14px; --type-cap: 12px; --type-micro: 11px;
}
[data-density="compact"] {
    --row: 44px; --row-sm: 38px; --gap: 10px; --gap-lg: 14px; --pad: 14px; --pad-lg: 18px;
    --type-mega: 36px; --type-title: 26px; --type-h2: 20px; --type-h3: 16px;
    --type-body: 15px; --type-sub: 13px; --type-cap: 11.5px; --type-micro: 10.5px;
}
[data-density="comfy"] {
    --row: 60px; --row-sm: 50px; --gap: 14px; --gap-lg: 18px; --pad: 18px; --pad-lg: 24px;
    --type-mega: 44px; --type-title: 30px; --type-h2: 24px; --type-h3: 18px;
    --type-body: 17px; --type-sub: 15px; --type-cap: 13px; --type-micro: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
html, body {
    min-height: 100vh; min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--type-body, 16px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--brand); color: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   SHELL & MAIN — mobile-first layout
   ═══════════════════════════════════════════════════════════════ */
.app-shell {
    background: var(--bg);
    min-height: 100vh; min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    position: relative;
}
.app-main {
    max-width: 480px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
.app-display-mega {
    font-size: var(--type-mega);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1;
    font-feature-settings: 'tnum';
    color: var(--ink);
    /* Cegah overflow horizontal kalau angka terlalu panjang */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-title    { font-size: var(--type-title); font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.app-h2       { font-size: var(--type-h2);    font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; }
.app-h3       { font-size: var(--type-h3);    font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; }
.app-body     { font-size: var(--type-body);  font-weight: 500; }
.app-sub      { font-size: var(--type-sub);   font-weight: 500; color: var(--ink-muted); }
.app-cap      { font-size: var(--type-cap);   font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-muted); }
.app-micro    { font-size: var(--type-micro); font-weight: 600; color: var(--ink-soft); }
.app-mono     { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.app-ink           { color: var(--ink); }
.app-ink-muted     { color: var(--ink-muted); }
.app-ink-soft      { color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR (floating in lime hero, or solid in non-hero pages)
   ═══════════════════════════════════════════════════════════════ */
.app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    gap: 10px;
}
.app-topbar-brand {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.app-avatar {
    width: 38px; height: 38px; border-radius: 19px;
    background: var(--ink); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; letter-spacing: -0.4px;
    flex-shrink: 0;
}
.app-avatar-sub {
    font-size: 11px; font-weight: 600; opacity: 0.7;
    letter-spacing: -0.1px;
    color: inherit;
}
.app-avatar-name {
    font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
    margin-top: -1px;
    color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
}
.app-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.app-icon-btn {
    width: 36px; height: 36px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(11,26,24,0.08);
    color: var(--ink);
    position: relative;
    transition: background 0.15s, transform 0.1s;
}
.app-icon-btn:hover { background: rgba(11,26,24,0.14); }
.app-icon-btn:active { transform: scale(0.94); }
.app-icon-btn .badge-dot {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px;
    background: var(--pop);
    border: 2px solid var(--accent);
    color: #fff;
    font-size: 9px; font-weight: 800;
    line-height: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: -0.2px;
    box-sizing: border-box;
}
.app-icon-btn .badge-dot .badge-num {
    line-height: 1;
}
[data-theme="dark"] .app-icon-btn .badge-dot {
    border-color: var(--surface);
}
[data-theme="dark"] .app-icon-btn { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .app-icon-btn:hover { background: rgba(255,255,255,0.16); }

/* ═══════════════════════════════════════════════════════════════
   LIME HERO (top section dengan greeting + omzet display)
   ═══════════════════════════════════════════════════════════════ */
.app-hero {
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #6d28d9 100%);
    color: #fff;
    padding: 8px 0 22px;
    position: relative;
    overflow: hidden;
}
/* Bubble dekorasi — tone ungu gelap kasih depth, sedikit highlight putih */
.app-hero::before {
    content: ""; position: absolute;
    right: -60px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
                                rgba(255,255,255,0.28) 0%,
                                rgba(76,29,149,0.32) 70%);
    pointer-events: none;
}
.app-hero::after {
    content: ""; position: absolute;
    right: 60px; bottom: -70px;
    width: 130px; height: 130px; border-radius: 50%;
    background: rgba(76,29,149,0.30);
    pointer-events: none;
}
.app-hero > * { position: relative; z-index: 1; }

.app-hero .app-icon-btn {
    background: rgba(76,29,149,0.30);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.app-hero .app-display-mega { color: #fff; }
.app-hero .app-avatar-sub,
.app-hero .app-avatar-name { color: #fff; }
.app-hero .app-avatar {
    background: #4c1d95;
    color: #ddd6fe;
}
.app-hero-content {
    padding: 0 20px;
}
.app-hero-meta {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
}
.app-delta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #4c1d95; color: #ddd6fe;
    padding: 4px 10px; border-radius: 99px;
    font-size: 11px; font-weight: 800;
    letter-spacing: -0.1px;
}
.app-delta-chip--neg { background: rgba(255,255,255,0.95); color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   SHELF — white rounded container under hero
   ═══════════════════════════════════════════════════════════════ */
.app-shelf {
    background: var(--surface);
    border-radius: 28px 28px 0 0;
    padding: 22px 18px 24px;
    box-shadow: 0 -12px 30px rgba(11,26,24,0.06);
    position: relative;
    z-index: 1;
}
[data-theme="dark"] .app-shelf {
    box-shadow: 0 -12px 30px rgba(0,0,0,0.30);
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACTION PILLS (4-grid: teal/orange/violet/grey)
   ═══════════════════════════════════════════════════════════════ */
.app-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.app-action {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; cursor: pointer; text-decoration: none;
    transition: transform 0.15s;
}
.app-action:active { transform: scale(0.96); }
.app-action-pill {
    width: 56px; height: 56px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
[data-density="compact"] .app-action-pill { width: 50px; height: 50px; border-radius: 16px; }
[data-density="comfy"]   .app-action-pill { width: 60px; height: 60px; border-radius: 20px; }
.app-action-pill--teal   { background: var(--brand);   color: #FFFFFF; box-shadow: 0 6px 14px rgba(23,195,168,0.34); }
.app-action-pill--orange { background: var(--pop);     color: #FFFFFF; box-shadow: 0 6px 14px rgba(255,122,26,0.34); }
.app-action-pill--violet { background: var(--variety); color: #FFFFFF; box-shadow: 0 6px 14px rgba(139,92,246,0.34); }
.app-action-pill--grey   { background: var(--surface-alt); color: var(--ink); box-shadow: none; }
.app-action-pill--lime   { background: var(--accent);  color: var(--ink); box-shadow: 0 6px 14px rgba(200,240,0,0.40); }
.app-action-label {
    font-size: 11px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.1px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED CARD (hero teal card with blob accents)
   ═══════════════════════════════════════════════════════════════ */
.app-featured {
    display: block;            /* <a> is inline by default → block <div> children break out */
    margin-top: 22px;
    border-radius: 22px;
    background: var(--brand);
    color: #FFFFFF;
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.app-featured::before {
    content: ""; position: absolute;
    right: -28px; bottom: -34px;
    width: 140px; height: 140px; border-radius: 70px;
    background: rgba(255,255,255,0.12);
}
.app-featured::after {
    content: ""; position: absolute;
    right: 22px; top: -14px;
    width: 44px; height: 44px; border-radius: 22px;
    background: var(--accent); opacity: 0.85;
}
.app-featured > * { position: relative; z-index: 1; }
.app-featured-label {
    font-size: 11px; font-weight: 700;
    opacity: 0.85; letter-spacing: 0.6px; text-transform: uppercase;
}
.app-featured-title {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.5px; margin-top: 4px;
    line-height: 1.2;
}
.app-featured-kv {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px;
}
.app-featured-kv-item .k {
    font-size: 10.5px; opacity: 0.8; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.app-featured-kv-item .v {
    font-size: 15px; font-weight: 800;
    font-feature-settings: 'tnum'; margin-top: 2px;
}
.app-featured-kv-divider {
    width: 1px; height: 30px; background: rgba(255,255,255,0.25);
}
.app-featured-cta {
    padding: 9px 14px; border-radius: 99px;
    background: var(--ink); color: var(--accent);
    font-size: 12px; font-weight: 800;
    letter-spacing: -0.1px; cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
    transition: transform 0.15s;
}
.app-featured-cta:active { transform: scale(0.96); }
.app-featured-spacer { flex: 1; }

/* Override .app-cap warna ketika dalam .app-featured (white text on teal bg) */
.app-featured .app-cap { color: rgba(255, 255, 255, 0.92); }
/* Override .app-hero — text putih di lime bg supaya match dengan bubble overlay */
.app-hero .app-cap { color: rgba(255,255,255,0.92); }

/* ═══════════════════════════════════════════════════════════════
   BENTO GRID (2-card row: cream + violet)
   ═══════════════════════════════════════════════════════════════ */
.app-bento {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 10px;
}
.app-bento-card {
    display: block;            /* defensive: <a> sebagai container with block children */
    border-radius: 22px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 116px;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.15s;
}
.app-bento-card:active { transform: scale(0.97); }
.app-bento-card--cream  { background: var(--cream); }
.app-bento-card--violet { background: var(--variety-soft); }
.app-bento-card .blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.app-bento-card--cream .blob {
    right: -12px; top: -12px;
    width: 60px; height: 60px;
    background: var(--pop); opacity: 0.18;
}
.app-bento-card--violet .blob {
    right: -14px; bottom: -16px;
    width: 68px; height: 68px;
    background: var(--variety); opacity: 0.22;
}
.app-bento-card > * { position: relative; z-index: 1; }
.app-bento-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
}
.app-bento-card--cream .app-bento-label  { color: var(--pop); }
.app-bento-card--violet .app-bento-label { color: var(--variety); }
.app-bento-value {
    font-size: 20px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.5px;
    margin-top: 4px; font-feature-settings: 'tnum';
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-bento-value.is-negative { color: var(--danger); }
.app-bento-sub {
    font-size: 11.5px; font-weight: 600;
    color: var(--ink-muted);
    margin-top: 3px;
    /* Batasi 1 baris dengan ellipsis supaya tidak wrap awkward */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.3;
}
.app-bento-sub.is-warn { color: var(--pop); font-weight: 700; }
.app-bento-cta {
    display: flex; align-items: center; gap: 4px;
    margin-top: 10px;
    font-size: 11px; font-weight: 700;
}
.app-bento-card--cream  .app-bento-cta { color: var(--pop); }
.app-bento-card--violet .app-bento-cta { color: var(--variety); }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER + LIST ROWS (top picks)
   ═══════════════════════════════════════════════════════════════ */
.app-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 22px; margin-bottom: 4px;
}
.app-section-title {
    font-size: 15px; font-weight: 800; letter-spacing: -0.3px;
    color: var(--ink);
}
.app-section-link {
    font-size: 11px; font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}
.app-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: background 0.1s;
}
.app-row:last-child { border-bottom: none; }
.app-row-icon {
    width: 40px; height: 40px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.app-row-icon--teal   { background: rgba(23,195,168,0.15); color: var(--brand); }
.app-row-icon--orange { background: rgba(255,122,26,0.15); color: var(--pop); }
.app-row-icon--violet { background: rgba(139,92,246,0.15); color: var(--variety); }
.app-row-body { flex: 1; min-width: 0; }
.app-row-meta-line {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.app-row-chip {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.4px; text-transform: uppercase;
    line-height: 1;
}
.app-row-chip--teal   { color: var(--brand); }
.app-row-chip--orange { color: var(--pop); }
.app-row-chip--violet { color: var(--variety); }
.app-row-time {
    font-size: 10.5px; font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.1px;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
.app-row-title {
    font-size: 13.5px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.2px;
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row-sub {
    font-size: 11.5px; font-weight: 500;
    color: var(--ink-muted);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row-chevron { color: var(--ink-soft); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TAB (floating glass nav, pill active state)
   ═══════════════════════════════════════════════════════════════ */
.app-bottom-tab {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    border-top: 1px solid var(--line);
    display: flex;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    z-index: 100;
}
[data-theme="dark"] .app-bottom-tab {
    background: rgba(15,28,25,0.88);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.35);
}
.app-bottom-tab-inner {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
}
.app-tab-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    text-decoration: none;
    color: var(--ink-muted);
    border-radius: 999px;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease,
                padding 0.3s ease, transform 0.15s ease;
    min-height: 40px;
}
.app-tab-item:active {
    transform: scale(0.94);
    opacity: 0.85;
}
.app-tab-item .label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.2s ease 0.05s;
}
.app-tab-item.is-active {
    color: #fff;
    background: linear-gradient(90deg, #a78bfa 0%, #8b5cf6 100%);
    padding: 8px 16px;
    box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.45);
}
.app-tab-item.is-active .label {
    max-width: 120px;
    opacity: 1;
    font-weight: 700;
}
[data-theme="dark"] .app-tab-item.is-active {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   FLASH MESSAGE
   ═══════════════════════════════════════════════════════════════ */
.app-flash {
    margin: 12px 16px 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    display: flex; align-items: flex-start; gap: 8px;
    border: 1px solid;
    line-height: 1.45;
}
.app-flash .bi-icon { flex-shrink: 0; margin-top: 1px; }
.app-flash--success { background: var(--success-soft); color: var(--success); border-color: rgba(23,195,168,0.30); }
.app-flash--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(225,74,74,0.30); }
.app-flash--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(255,122,26,0.30); }
.app-flash--info    { background: var(--info-soft);    color: var(--info);    border-color: rgba(139,92,246,0.30); }
.app-flash-close {
    margin-left: auto; opacity: 0.6; cursor: pointer;
    color: inherit;
    font-size: 18px; line-height: 1;
}
.app-flash-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER (untuk halaman non-home seperti Profile / Preferences)
   ═══════════════════════════════════════════════════════════════ */
.app-page-header {
    padding: 16px 20px 8px;
}
.app-page-back {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--brand);
    font-size: 14px; font-weight: 600;
    margin-bottom: 4px;
    text-decoration: none;
}
.app-page-title {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.7px;
    color: var(--ink);
    line-height: 1.15;
}
.app-page-subtitle {
    font-size: 13px; color: var(--ink-muted);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   LIST CARD (rounded white container with rows)
   ═══════════════════════════════════════════════════════════════ */
.app-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    margin: 12px 16px;
}
.app-card-pad { padding: 16px; }
.app-card-title {
    font-size: 11px; font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 14px 16px 8px;
}
.app-info-row {
    display: flex; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    min-height: var(--row);
}
.app-info-row:last-child { border-bottom: none; }
.app-info-key {
    font-size: 13px; color: var(--ink-muted);
    flex-shrink: 0;
}
.app-info-val {
    font-size: 14px; font-weight: 600;
    color: var(--ink);
    margin-left: auto;
    text-align: right;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS (form & action)
   ═══════════════════════════════════════════════════════════════ */
.app-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 50px; padding: 0 20px;
    border-radius: 14px;
    font-size: 15px; font-weight: 700;
    letter-spacing: -0.15px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s, background 0.15s;
    text-decoration: none;
    border: 1px solid transparent;
    font-family: inherit;
}
.app-btn:active:not(:disabled) { transform: scale(0.97); }
.app-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.app-btn--full { width: 100%; }
.app-btn--primary {
    background: var(--brand);
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(23,195,168,0.30);
}
.app-btn--primary:hover { filter: brightness(1.05); }
.app-btn--secondary {
    background: var(--brand-soft);
    color: var(--brand-ink);
}
.app-btn--ghost {
    background: var(--surface-alt);
    color: var(--ink);
    border-color: var(--line);
}
.app-btn--ghost:hover { background: var(--surface); border-color: var(--line-strong); }
.app-btn--danger {
    background: var(--danger);
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(225,74,74,0.30);
}
.app-btn--lime {
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 6px 14px rgba(200,240,0,0.40);
}
.app-btn--logout {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: rgba(225,74,74,0.20);
}

/* ═══════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════ */
.app-field { margin-bottom: 14px; }
.app-label {
    display: block;
    font-size: 11px; font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 6px;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.app-input {
    display: block; width: 100%;
    height: 50px; padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font-size: 16px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.app-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.app-input::placeholder { color: var(--ink-soft); }
.app-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Native date/time inputs — iOS Safari fix ───────────────────
   iOS Safari render <input type="date"> dengan default width yang collapse ke
   content size, text center, dan tidak tampil ikon kalender. Hasilnya
   terlihat sempit & berbeda dari browser lain. Override jadi konsisten. */
input[type="date"].app-input,
input[type="datetime-local"].app-input,
input[type="time"].app-input,
input[type="month"].app-input {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    min-height: 50px;
    line-height: 1.4;
    box-sizing: border-box;
    /* Pastikan width tidak collapse di iOS */
    min-width: 0;
    /* Padding kanan untuk ruang ikon kalender custom */
    padding-right: 40px;
    /* Tampilkan placeholder yang sama dengan input text */
    color: var(--ink);
    /* iOS kadang pakai font sistem yang aneh — paksa font app */
    font-family: inherit;
    /* Ikon kalender custom via background SVG */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
}
/* Hilangkan native iOS calendar arrow yang muncul kadang-kadang */
input[type="date"].app-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].app-input::-webkit-calendar-picker-indicator,
input[type="time"].app-input::-webkit-calendar-picker-indicator,
input[type="month"].app-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 100%; height: 100%;
    cursor: pointer;
}
/* iOS placeholder-shown state untuk date — saat empty, tampil hint text */
input[type="date"].app-input:not(:focus):placeholder-shown {
    color: var(--ink-soft);
}
.app-input-wrap { position: relative; }
.app-input-wrap .app-input { padding-left: 44px; }
.app-input-wrap .app-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ink-soft);
    pointer-events: none;
}
.app-input--has-toggle { padding-right: 50px; }
.app-input-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
    transition: background 0.15s, color 0.15s;
}
.app-input-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.app-helper {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: 11.5px; color: var(--ink-soft);
}

/* Select (radio chips for preferences) */
.app-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.app-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: all 0.15s;
    line-height: 1;
}
.app-chip:hover { border-color: var(--brand); }
.app-chip.is-active {
    background: var(--brand);
    color: #FFFFFF;
    border-color: var(--brand);
}
.app-chip-color {
    width: 14px; height: 14px; border-radius: 7px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE — full-screen lime hero + white card
   ═══════════════════════════════════════════════════════════════ */
.app-login {
    min-height: 100vh; min-height: 100dvh;
    background: var(--accent);
    color: var(--ink);
    display: flex; flex-direction: column;
    padding: 40px 20px 20px;
    padding-top: calc(40px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    position: relative;
    overflow: hidden;
}
.app-login::before {
    content: ""; position: absolute;
    right: -60px; top: 60px;
    width: 200px; height: 200px; border-radius: 100px;
    background: var(--brand); opacity: 0.85;
    pointer-events: none;
}
.app-login::after {
    content: ""; position: absolute;
    left: -40px; bottom: 280px;
    width: 140px; height: 140px; border-radius: 70px;
    background: var(--pop); opacity: 0.55;
    pointer-events: none;
}
.app-login-brand {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
    margin-bottom: 30px;
    z-index: 1;
}
.app-login-logo {
    /* Adaptive container: square logo (80x80) atau wordmark rectangular (auto-width).
       Image fills with object-fit: contain dan padding internal. */
    min-width: 80px; max-width: 240px;
    height: 80px;
    border-radius: 20px;
    background: #FFFFFF;
    color: #17C3A8;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 36px; letter-spacing: -1.5px;
    box-shadow: 0 10px 26px rgba(11, 26, 24, 0.22);
    padding: 10px 14px;
    overflow: hidden;
}
.app-login-logo-img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.app-login-title {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.8px; line-height: 1.1;
    text-align: center;
    color: #FFFFFF;          /* putih per request */
    text-shadow: 0 2px 12px rgba(11, 26, 24, 0.15);
}
.app-login-sub {
    font-size: 13px; opacity: 0.92;
    text-align: center;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}
.app-login-card {
    background: var(--surface);
    border-radius: 28px;
    padding: 24px 22px 20px;
    box-shadow: 0 18px 48px rgba(11,26,24,0.18);
    margin: auto 0;
    z-index: 1;
}
.app-login-card .app-input { background: var(--surface-alt); }
.app-login-card .app-btn { margin-top: 10px; }
.app-login-foot {
    text-align: center;
    font-size: 12px; color: var(--ink-soft);
    margin-top: 18px;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ERROR PAGE
   ═══════════════════════════════════════════════════════════════ */
.app-error {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--bg);
    color: var(--ink);
}
.app-error-code {
    font-size: 96px; font-weight: 900;
    letter-spacing: -4px; line-height: 1;
    color: var(--brand);
}
.app-error-title {
    font-size: 22px; font-weight: 800;
    margin-top: 10px;
}
.app-error-msg {
    font-size: 14px; color: var(--ink-muted);
    margin-top: 8px; max-width: 320px;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.app-mt-4  { margin-top: 4px; }
.app-mt-8  { margin-top: 8px; }
.app-mt-12 { margin-top: 12px; }
.app-mt-16 { margin-top: 16px; }
.app-mt-22 { margin-top: 22px; }
.app-px-20 { padding-left: 20px; padding-right: 20px; }
.app-flex  { display: flex; }
.app-flex-col { display: flex; flex-direction: column; }
.app-items-center { align-items: center; }
.app-justify-between { justify-content: space-between; }
.app-gap-4  { gap: 4px; }
.app-gap-8  { gap: 8px; }
.app-gap-10 { gap: 10px; }
.app-flex-1 { flex: 1; min-width: 0; }
.app-hide   { display: none; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* Hide scrollbars on horizontal scrollers */
.hscroll::-webkit-scrollbar { display: none; }
.hscroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ═══════════════════════════════════════════════════════════════
   MODULE LIST (POS, SO, CMT, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* Module hero — KPI summary di atas list */
.app-mod-hero {
    background: var(--surface);
    margin: 0 16px 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px;
}
.app-mod-hero-main { flex: 1; min-width: 0; }
.app-mod-hero-label {
    font-size: 11px; font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.6px; text-transform: uppercase;
}
.app-mod-hero-value {
    font-size: 26px; font-weight: 800;
    letter-spacing: -0.7px; line-height: 1.1;
    color: var(--ink); font-feature-settings: 'tnum';
    margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-mod-hero-meta {
    font-size: 12px; color: var(--ink-muted);
    margin-top: 4px;
}
.app-mod-hero-side {
    flex-shrink: 0;
    text-align: right;
}
.app-mod-hero-side .num {
    font-size: 20px; font-weight: 800;
    color: var(--brand);
    font-feature-settings: 'tnum';
}
.app-mod-hero-side .lbl {
    font-size: 10.5px; font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.5px; text-transform: uppercase;
    margin-top: 2px;
}

/* Filter chips bar (horizontal scroll) */
.app-chips-bar {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 4px 16px 12px;
    scrollbar-width: none;
}
.app-chips-bar::-webkit-scrollbar { display: none; }
.app-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 12.5px; font-weight: 700;
    white-space: nowrap;
    transition: all 0.15s;
    text-decoration: none;
    flex-shrink: 0;
}
.app-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.app-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--accent);
}
.app-chip-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--surface-alt);
    color: var(--ink);
    font-size: 10px; font-weight: 800;
    line-height: 1;
}
.app-chip.is-active .app-chip-count {
    background: var(--accent);
    color: var(--ink);
}

/* Search field (mobile) */
.app-search {
    margin: 0 16px 12px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    height: 44px;
}
.app-search input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    color: var(--ink);
    font-size: 14.5px;
}
.app-search input::placeholder { color: var(--ink-soft); }
.app-search-icon { color: var(--ink-soft); flex-shrink: 0; }

/* List card (POS/SO/CMT row) */
.app-list-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    margin: 0 16px 10px;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.1s, border-color 0.15s;
    position: relative;
}
.app-list-card:active { transform: scale(0.98); }
.app-list-card:hover { border-color: var(--line-strong); }
.app-list-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
/* Pertama child (umumnya wrapper id+title) harus bisa shrink supaya title
   truncate via ellipsis, dan status badge selalu tampil utuh di kanan. */
.app-list-card-head > :first-child {
    min-width: 0;
    flex: 1 1 auto;
}
.app-list-card-id {
    font-size: 11.5px; font-weight: 700;
    color: var(--ink-muted);
    font-family: ui-monospace, monospace;
    letter-spacing: 0.2px;
}
.app-list-card-status {
    font-size: 10px; font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    flex-shrink: 0;
}
.app-list-card-status--draft    { background: rgba(148, 163, 184, 0.18); color: var(--ink-muted); }
.app-list-card-status--lunas    { background: var(--brand-soft); color: var(--brand-ink); }
.app-list-card-status--belum    { background: var(--pop-soft); color: var(--pop); }
.app-list-card-status--sebagian { background: var(--variety-soft); color: var(--variety); }
.app-list-card-status--void     { background: var(--danger-soft); color: var(--danger); }
.app-list-card-status--selesai  { background: var(--brand-soft); color: var(--brand-ink); }
.app-list-card-status--proses   { background: var(--variety-soft); color: var(--variety); }
.app-list-card-status--approved { background: var(--brand-soft); color: var(--brand-ink); }
.app-list-card-status--overdue  { background: var(--danger-soft); color: var(--danger); }
.app-list-card-status--due-soon { background: var(--pop-soft); color: var(--pop); }
.app-list-card-status--batal    { background: var(--danger-soft); color: var(--danger); }
.app-list-card-title {
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-list-card-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11.5px; color: var(--ink-muted);
    margin-top: 4px;
}
.app-list-card-meta .dot::before {
    content: '·'; color: var(--ink-soft); margin-right: 8px;
}
.app-list-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    gap: 8px;
}
.app-list-card-amount {
    font-size: 17px; font-weight: 800;
    color: var(--ink);
    font-feature-settings: 'tnum';
    letter-spacing: -0.3px;
    line-height: 1;
}
.app-list-card-amount.is-warn { color: var(--pop); }

/* Progress bar (CMT) */
.app-progress {
    width: 100%; height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}
.app-progress-bar {
    height: 100%;
    background: var(--brand);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.app-progress-bar--warn { background: var(--pop); }
.app-progress-bar--danger { background: var(--danger); }
.app-progress-meta {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 600;
    color: var(--ink-muted);
    margin-top: 4px;
    font-feature-settings: 'tnum';
}

/* Section header dalam module */
.app-mod-section-head {
    padding: 4px 16px 8px;
    display: flex; align-items: baseline; justify-content: space-between;
}
.app-mod-section-title {
    font-size: 13px; font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.4px; text-transform: uppercase;
}
.app-mod-section-count {
    font-size: 12px; font-weight: 600;
    color: var(--ink-soft);
}

/* Empty state */
.app-mod-empty {
    text-align: center;
    padding: 60px 24px 40px;
}
.app-mod-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 12px;
    border-radius: 32px;
    background: var(--surface-alt);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
}
.app-mod-empty-title {
    font-size: 15px; font-weight: 700;
    color: var(--ink);
}
.app-mod-empty-sub {
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* ─── Receipt-style item row (POS detail) ─── */
.app-receipt-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}
.app-receipt-item:first-of-type { border-top: 1px solid var(--line); }
.app-receipt-item-main { min-width: 0; }
.app-receipt-item-name {
    font-size: 14px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.15px;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-receipt-item-meta {
    font-size: 11.5px; font-weight: 600;
    color: var(--ink-muted);
    margin-top: 3px;
}
.app-receipt-item-sku {
    font-size: 10.5px;
    font-family: ui-monospace, monospace;
    color: var(--ink-soft);
    margin-top: 2px;
}
.app-receipt-item-qty {
    text-align: right;
    flex-shrink: 0;
    line-height: 1.3;
}
.app-receipt-item-qty .qty {
    display: inline-block;
    font-size: 14px; font-weight: 800;
    color: var(--ink);
    font-feature-settings: 'tnum';
}
.app-receipt-item-qty .rate {
    display: block;
    font-size: 10.5px; color: var(--ink-soft);
    font-feature-settings: 'tnum';
    margin-top: 2px;
}
.app-receipt-item-amount {
    font-size: 14px; font-weight: 800;
    color: var(--ink);
    font-feature-settings: 'tnum';
    text-align: right;
    min-width: 80px;
    line-height: 1.3;
}

/* Display mega strikethrough (untuk transaksi void) */
.app-mod-hero-value.is-strike {
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    text-decoration-thickness: 3px;
    color: var(--ink-muted);
}

/* ─── Bottom sheet modal (untuk konfirmasi void, dll) ─── */
.app-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.app-modal[hidden] { display: none; }
.app-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 26, 24, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: appModalFadeIn 0.2s ease;
    pointer-events: auto;
}
@keyframes appModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.app-modal-sheet {
    position: relative;
    z-index: 10000;
    pointer-events: auto;
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 48px rgba(11, 26, 24, 0.18);
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    animation: appModalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
}
@keyframes appModalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.app-modal-grip {
    width: 40px; height: 5px;
    background: var(--line-strong);
    border-radius: 3px;
    margin: 0 auto 12px;
}
.app-modal-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.app-modal-title {
    font-size: 18px; font-weight: 800;
    color: var(--ink); letter-spacing: -0.3px;
    line-height: 1.25;
}
.app-modal-sub {
    font-size: 12.5px; color: var(--ink-muted);
    margin-top: 2px;
}
.app-modal-body { margin-bottom: 16px; }
.app-modal-foot {
    display: flex; gap: 10px;
    padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   POS CREATE FLOW
   ═══════════════════════════════════════════════════════════════ */

/* Customer chip bar */
.app-pos-customer-bar {
    margin: 0 16px 12px;
}
.app-pos-customer-chip {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--brand-soft);
    border: 1px solid transparent;
    border-radius: 99px;
    color: var(--brand-ink);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.app-pos-customer-chip:hover { background: var(--brand); color: #fff; }
.app-pos-customer-chip .lbl { color: var(--ink-muted); font-weight: 600; }
.app-pos-customer-chip:hover .lbl { color: rgba(255,255,255,0.8); }
.app-pos-customer-chip .val { flex: 1; text-align: left; }

/* Product list card */
.app-pos-product {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin: 0 16px 8px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.app-pos-product:hover { border-color: var(--brand); }
.app-pos-product:active { transform: scale(0.98); }
.app-pos-product.is-disabled {
    opacity: 0.5; cursor: not-allowed;
    pointer-events: none;
}
.app-pos-product-thumb {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--surface-alt);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
}
.app-pos-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-pos-product-main { flex: 1; min-width: 0; }
.app-pos-product-name {
    font-size: 14px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-pos-product-meta {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 1px;
}
.app-pos-product-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
}
.app-pos-product-foot .harga {
    font-size: 14px; font-weight: 800;
    color: var(--brand);
}
.app-pos-product-foot .stok {
    font-size: 11px; font-weight: 600;
    color: var(--ink-soft);
}
.app-pos-product-foot .stok.is-out { color: var(--danger); font-weight: 700; }
.app-pos-product-add {
    width: 32px; height: 32px;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.app-pos-product:hover .app-pos-product-add { background: var(--brand); color: #fff; }
.app-pos-product.is-disabled .app-pos-product-add { background: var(--danger-soft); color: var(--danger); }

/* Warna chips di varian picker */
.app-pos-warna-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--surface-alt);
    border: 1.5px solid var(--line);
    border-radius: 99px;
    color: var(--ink);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.app-pos-warna-chip:hover { border-color: var(--brand); }
.app-pos-warna-chip.is-active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-ink);
    font-weight: 800;
}
.app-pos-warna-chip .dot {
    width: 14px; height: 14px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

/* Size grid (varian picker) */
.app-pos-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.app-pos-size-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px 8px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
    min-height: 64px;
}
.app-pos-size-btn:hover { border-color: var(--brand); }
.app-pos-size-btn.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.app-pos-size-btn.is-disabled {
    opacity: 0.45; cursor: not-allowed;
    background: var(--surface-alt);
}
.app-pos-size-btn .size {
    font-size: 15px; font-weight: 800;
    letter-spacing: -0.2px;
}
.app-pos-size-btn .stok {
    font-size: 10.5px; font-weight: 600;
    color: var(--ink-muted);
    margin-top: 2px;
    font-feature-settings: 'tnum';
}
.app-pos-size-btn.is-active .stok { color: rgba(255, 255, 255, 0.8); }
.app-pos-size-btn.is-disabled .stok { color: var(--danger); }

/* Qty stepper */
.app-pos-qty-stepper {
    display: flex; align-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.app-pos-qty-stepper .step {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.1s;
    flex-shrink: 0;
}
.app-pos-qty-stepper .step:hover { background: var(--line); }
.app-pos-qty-stepper .step:active { background: var(--line-strong); }
.app-pos-qty-stepper input {
    flex: 1;
    height: 44px;
    border: none; outline: none; background: transparent;
    text-align: center;
    font-size: 17px; font-weight: 800;
    color: var(--ink);
    font-feature-settings: 'tnum';
}
.app-pos-qty-stepper input::-webkit-outer-spin-button,
.app-pos-qty-stepper input::-webkit-inner-spin-button { display: none; }

/* Sticky cart pill (above bottom-tab) */
.app-pos-cart-pill {
    position: fixed;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 448px;
    height: 56px;
    padding: 0 18px 0 16px;
    background: var(--ink);
    color: var(--accent);
    border-radius: 99px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 12px 32px rgba(11, 26, 24, 0.32);
    cursor: pointer;
    z-index: 90;
    border: none;
    transition: transform 0.15s, box-shadow 0.15s;
    animation: appCartPillSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-pos-cart-pill:hover { transform: translateX(-50%) translateY(-2px); }
.app-pos-cart-pill:active { transform: translateX(-50%) scale(0.97); }
@keyframes appCartPillSlide {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.app-pos-cart-pill .ico {
    width: 36px; height: 36px;
    background: var(--accent);
    color: var(--ink);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.app-pos-cart-pill .ct {
    background: var(--accent);
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 12px; font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.app-pos-cart-pill .lbl {
    flex: 1;
    font-size: 14px; font-weight: 700;
    text-align: left;
    color: #fff;
}
.app-pos-cart-pill .amt {
    font-size: 15px; font-weight: 800;
    color: var(--accent);
    flex-shrink: 0;
}

/* Cart item row in cart modal */
.app-pos-cart-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.app-pos-cart-item:last-of-type { border-bottom: none; }
.app-pos-cart-item .main {
    flex: 1; min-width: 0;
}
.app-pos-cart-item .name {
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-pos-cart-item .meta {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: 2px;
}
.app-pos-cart-item .rate {
    font-size: 12px; font-weight: 600;
    color: var(--ink-soft);
    margin-top: 2px;
}
.app-pos-cart-item .qty-stepper {
    display: flex; align-items: center;
    background: var(--surface-alt);
    border-radius: 99px;
    padding: 2px;
    gap: 0;
    flex-shrink: 0;
}
.app-pos-cart-item .qty-stepper .step {
    width: 28px; height: 28px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-muted);
    cursor: pointer;
}
.app-pos-cart-item .qty-stepper .step:hover { background: var(--surface); color: var(--ink); }
.app-pos-cart-item .qty-stepper .num {
    min-width: 24px;
    text-align: center;
    font-size: 13px; font-weight: 800;
    color: var(--ink);
}
.app-pos-cart-item .trash {
    width: 32px; height: 32px;
    border-radius: 16px;
    background: var(--danger-soft);
    color: var(--danger);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.app-pos-cart-item .trash:hover { background: var(--danger); color: #fff; }

/* Method bayar grid */
.app-pos-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.app-pos-method {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 10px 6px;
    background: var(--surface-alt);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.app-pos-method:hover { border-color: var(--brand); }
.app-pos-method.is-active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-ink);
}
.app-pos-method.is-active .ico { color: var(--brand); }
.app-pos-method .ico {
    color: var(--ink-muted);
    transition: color 0.15s;
}
.app-pos-method .lbl {
    font-size: 11.5px; font-weight: 700;
    color: var(--ink);
}

/* ─── Thermal print preview (mimics 58mm/80mm receipt) ─── */
.app-thermal-preview {
    background: #FAFAF7;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 14px 12px;
    font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.45;
    color: #1a1a1a;
    white-space: pre;
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .app-thermal-preview {
    background: #1a1a1a;
    color: #d4d4d4;
    border-color: var(--line-strong);
}

/* @media print fallback — kalau user pakai window.print() langsung dari halaman */
@media print {
    .app-shell *:not(.app-thermal-preview):not(.app-thermal-preview *) {
        visibility: hidden;
    }
    .app-thermal-preview {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        background: white;
        color: black;
        border: none;
        font-size: 10px;
        padding: 0;
        max-height: none;
        overflow: visible;
    }
}

/* Customer row in picker modal */
/* ═══════════════════════════════════════════════════════════════
   COLLAPSE — bagian tertentu di sticky footer bisa collapse/expand.
   Submit button & summary tetap visible. Hanya body yang collapse.
   ═══════════════════════════════════════════════════════════════ */
.app-collapse-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--surface-alt, #f1f5f9);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink);
    font-size: 13px; font-weight: 700;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.app-collapse-toggle:hover {
    background: var(--brand-soft, #e0f7f3);
    border-color: var(--brand);
}
.app-collapse-toggle-label {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
}
.app-collapse-toggle-sub {
    font-size: 11px;
    color: var(--ink-muted);
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-collapse-toggle-chev {
    color: var(--ink-soft);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    margin-left: 10px;
}
.app-collapse-toggle[aria-expanded="true"] .app-collapse-toggle-chev {
    transform: rotate(180deg);
}
.app-collapse-toggle[aria-expanded="true"] {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.app-collapse-body {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.22s ease,
                margin-top 0.32s ease;
    opacity: 1;
    margin-top: 8px;
}
.app-collapse-body.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.app-collapse-grip {
    width: 100%;
    height: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: ns-resize;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    opacity: 0.6;
}
.app-collapse-grip::before {
    content: '';
    width: 44px; height: 4px;
    background: var(--line-strong, #cbd5e1);
    border-radius: 99px;
    transition: width 0.18s, background 0.18s;
}
.app-collapse-grip:hover { opacity: 1; }
.app-collapse-grip:hover::before {
    width: 56px;
    background: var(--brand);
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH-SELECT — auto-enhanced <select data-searchable="true">
   Visual = text input + dropdown panel di body level.
   ═══════════════════════════════════════════════════════════════ */
.ss-wrap {
    position: relative;
    display: block;
}
.ss-wrap .ss-input {
    cursor: pointer;
    padding-right: 38px;
}
.ss-wrap.is-disabled .ss-input {
    background: var(--surface-alt);
    color: var(--ink-muted);
    cursor: not-allowed;
}
.ss-caret {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.18s;
}
.ss-wrap.is-open .ss-caret { transform: translateY(-50%) rotate(180deg); }
.ss-wrap.is-disabled .ss-caret { opacity: 0.5; cursor: not-allowed; }

.ss-box {
    position: fixed;
    z-index: 10100;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(11, 26, 24, 0.16);
    max-height: 280px;
    overflow-y: auto;
    min-width: 180px;
}
.ss-item {
    display: block; width: 100%;
    padding: 10px 14px;
    background: transparent; border: 0;
    text-align: left; font-size: 13.5px;
    color: var(--ink); cursor: pointer;
    border-bottom: 1px solid var(--line);
    line-height: 1.35;
}
.ss-item:last-child { border-bottom: 0; }
.ss-item:hover,
.ss-item.is-active { background: var(--brand-soft); color: var(--brand-ink); }
.ss-item.is-selected {
    background: var(--brand);
    color: #fff; font-weight: 700;
}
.ss-item.is-selected mark { color: #fff; }
.ss-item mark {
    background: transparent; color: var(--brand);
    font-weight: 800; padding: 0;
}
.ss-empty {
    padding: 14px; font-size: 12.5px;
    color: var(--ink-soft); text-align: center;
}

.app-pos-cust-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(23, 195, 168, 0.15);
    user-select: none;
    -webkit-user-select: none;
}
.app-pos-cust-row:hover { border-color: var(--brand); background: var(--brand-soft); }
.app-pos-cust-row .ico {
    width: 36px; height: 36px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
}
.app-pos-cust-row .main { flex: 1; min-width: 0; }
.app-pos-cust-row .nama {
    font-size: 13.5px; font-weight: 700;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-pos-cust-row .meta {
    font-size: 11px; color: var(--ink-muted);
    margin-top: 2px;
}

/* FAB (floating action button) — for "Buat Transaksi" etc., siap di Phase 3.2 */
.app-fab {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 56px; height: 56px;
    border-radius: 28px;
    background: var(--ink);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(11, 26, 24, 0.30);
    z-index: 50;
    border: none; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.app-fab:hover { transform: translateY(-1px); }
.app-fab:active { transform: scale(0.94); }

/* ═══════════════════════════════════════════════════════════════
   BOTTOM SHEET — slide-up overlay menu (di-trigger oleh
   <a data-bottom-sheet="more">). Markup di _partials/bottom_sheet.php
   ═══════════════════════════════════════════════════════════════ */
.app-sheet {
    position: fixed; inset: 0;
    z-index: 100;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
}
.app-sheet[hidden] { display: none; }
.app-sheet.is-open { pointer-events: auto; }

.app-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 26, 24, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.app-sheet.is-open .app-sheet-backdrop { opacity: 1; }

.app-sheet-panel {
    position: relative;
    width: 100%; max-width: 540px;
    max-height: 82vh;
    background: var(--surface);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(11, 26, 24, 0.25);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.32, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.app-sheet.is-open .app-sheet-panel { transform: translateY(0); }

.app-sheet-handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
    margin: 6px auto 10px;
    opacity: 0.55;
}

.app-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}
.app-sheet-title {
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.2px;
}
.app-sheet-close {
    background: var(--surface-alt);
    border: none; cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: background 0.15s;
}
.app-sheet-close:hover { background: var(--line); }
.app-sheet-close:active { transform: scale(0.94); }

.app-sheet-body { padding: 0 2px; }

.app-sheet-group-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 6px 4px 10px;
}
.app-sheet-group-label:not(:first-child) { margin-top: 18px; }

.app-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.app-sheet-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    border: 1px solid transparent;
}
.app-sheet-item:hover { background: var(--line); border-color: var(--line-strong); }
.app-sheet-item:active { transform: scale(0.96); }

.app-sheet-item-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    display: flex; align-items: center; justify-content: center;
}
.app-sheet-item-label {
    font-size: 12px; font-weight: 600;
    text-align: center; line-height: 1.2;
    letter-spacing: -0.1px;
}

.app-sheet-item.is-danger .app-sheet-item-icon {
    background: var(--danger-soft);
    color: var(--danger);
}
.app-sheet-item.is-danger .app-sheet-item-label { color: var(--danger); }

/* "Segera"/"Soon" — modul belum punya route, visually muted */
.app-sheet-item.is-soon {
    position: relative;
    opacity: 0.55;
    cursor: default;
}
.app-sheet-item.is-soon:hover {
    background: var(--surface-alt);
    border-color: transparent;
}
.app-sheet-item.is-soon:active { transform: none; }
.app-sheet-item.is-soon .app-sheet-item-icon {
    background: var(--line);
    color: var(--ink-muted);
}
.app-sheet-item-badge {
    position: absolute;
    top: 4px; right: 4px;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--pop);
    background: var(--pop-soft);
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
}

@media (max-width: 360px) {
    .app-sheet-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   TOAST — simple bottom toast untuk feedback ringan
   ═══════════════════════════════════════════════════════════════ */
.app-toast {
    position: fixed;
    left: 50%;
    bottom: calc(100px + env(safe-area-inset-bottom));
    transform: translate(-50%, 20px);
    background: var(--ink);
    color: var(--surface);
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 13px; font-weight: 600;
    letter-spacing: -0.1px;
    box-shadow: 0 10px 24px rgba(11, 26, 24, 0.32);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.22s cubic-bezier(0.32, 0.72, 0.32, 1);
    max-width: 80vw; text-align: center;
}
.app-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ═══════════════════════════════════════════════════════════════
   SUBMIT BUTTON LOADING STATE — auto-add saat double-submit guard aktif
   ═══════════════════════════════════════════════════════════════ */
button[type="submit"].is-submitting {
    opacity: 0.78;
    cursor: wait !important;
    position: relative;
    pointer-events: none;
}
button[type="submit"].is-submitting::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 14px; height: 14px;
    margin-top: -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: appBtnSpin 0.6s linear infinite;
    opacity: 0.8;
}
@keyframes appBtnSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ─── Pagination ─────────────────────────────────────────── */
.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 24px;
    padding: 0 4px;
}
.app-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    flex: 1;
    max-width: 120px;
}
.app-pagination-btn:not(.is-disabled):hover,
.app-pagination-btn:not(.is-disabled):active {
    background: var(--surface-alt);
    border-color: var(--line-strong);
}
.app-pagination-btn.is-disabled {
    color: var(--ink-muted);
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.app-pagination-page {
    font-size: 12px;
    color: var(--ink-muted);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ─── Skeleton loading ──────────────────────────────────── */
.app-skel {
    background: linear-gradient(
        90deg,
        var(--surface-alt) 0%,
        var(--line) 50%,
        var(--surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: appSkelShimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
.app-skel-line { height: 12px; margin: 6px 0; }
.app-skel-title { height: 18px; width: 60%; margin: 8px 0; }
.app-skel-card {
    height: 80px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.app-skel-stat {
    height: 64px;
    border-radius: 12px;
}
.app-skel-chart {
    height: 200px;
    border-radius: 12px;
    margin: 12px 0;
}
@keyframes appSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.app-skel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}