/* ═══════════════════════════════════════════════════════════════
   BizHub / Sika — Premium Business OS UI (v2)
   Professional fintech design · Mobile-first · Desktop-class
   Fonts: Nunito (display + body) · JetBrains Mono (data)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    /* ── Core palette ─────────────────────────────── */
    --bg:            #f5f7fb;
    --bg-warm:       #f7f6f2;
    --bg-elev:       #ffffff;
    /* Subtle diamond watermark used as the app-wide page backdrop */
    --app-bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46' fill='none' stroke='%2394a3b8' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M23 0 46 23 23 46 0 23Z'/%3E%3Cpath d='M21 21l4 4M25 21l-4 4'/%3E%3C/svg%3E");
    --surface:       #ffffff;
    --surface-hover: #f8fafc;
    --surface-alt:   #fafbfd;
    --surface-raised:#ffffff;
    --surface-3:     var(--surface-alt);

    --primary:       #0b1220;
    --primary-soft:  #111827;
    --primary-ink:   #0f172a;

    --accent:        #10b981;
    --accent-2:      #059669;
    --accent-hover:  #0ea371;
    --accent-soft:   rgba(16,185,129,.10);
    --accent-glow:   rgba(16,185,129,.22);
    --accent-ring:   rgba(16,185,129,.28);

    --indigo:        #6366f1;
    --indigo-soft:   rgba(99,102,241,.10);
    --violet:        #8b5cf6;
    --violet-soft:   rgba(139,92,246,.10);
    --amber:         #f59e0b;
    --amber-soft:    rgba(245,158,11,.10);
    --red:           #ef4444;
    --red-soft:      rgba(239,68,68,.08);
    --green:         #10b981;
    --green-soft:    rgba(16,185,129,.08);
    --blue:          #3b82f6;
    --blue-soft:     rgba(59,130,246,.08);
    --teal:          #14b8a6;
    --teal-soft:     rgba(20,184,166,.10);

    --text:          #000000;
    --text-2:        #475569;
    --text-3:        #64748b;
    --text-inv:      #ffffff;
    --border:        #e2e8f0;
    --border-soft:   #edf1f7;
    --border-light:  #f1f5f9;
    --divider:       rgba(15,23,42,.06);

    /* ── Typography ───────────────────────────────── */
    --font-display:'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-body:   'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* ── Radii & shadows ──────────────────────────── */
    --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --r-full:999px;

    --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
    --shadow-md: 0 6px 16px -6px rgba(15,23,42,.10), 0 2px 4px rgba(15,23,42,.04);
    --shadow-lg: 0 16px 40px -12px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.05);
    --shadow-xl: 0 28px 60px -20px rgba(15,23,42,.24), 0 10px 20px rgba(15,23,42,.06);
    --shadow-pop:0 20px 50px -12px rgba(16,185,129,.28);

    /* ── Dimensions ───────────────────────────────── */
    --topbar-h:   64px;
    --bnav-h:     68px;
    --sidebar-w:  272px;
    --sidebar-w-collapsed: 74px;
    --container:  1200px;
    --container-lg:1320px;
    --safe-b:     env(safe-area-inset-bottom, 0px);
    --safe-t:     env(safe-area-inset-top, 0px);
    --fixed-btn-size: clamp(42px, 11vw, 52px);
    --fixed-btn-icon: clamp(1.05rem, 3.8vw, 1.28rem);
    --fixed-btn-offset: clamp(10px, 3.4vw, 18px);
    --compact-fixed-h: clamp(38px, 10vw, 46px);

    /* ── Motion ───────────────────────────────────── */
    --ease:        cubic-bezier(.4,0,.2,1);
    --ease-out:    cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.175,.885,.32,1.275);
}

/* ══════════════ Base & Reset ═══════════════════════ */
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0}
html {
    /* Global type scale. Every font on the platform — component CSS and the
       thousands of inline style="font-size:.8rem" declarations alike — is set
       in rem, so this one number is the honest lever for "fonts are too big":
       change it and everything scales together, hierarchy intact.
       14px was oversized on phones; the steps below shrink hardest where the
       complaint came from (small Android screens). Tuned by feel over three
       rounds on 30 Jul 2026 — down, further down, then back up a quarter step
       ("now they look too small"). The only fonts exempt are
       the two 16px input rules further down — below 16px, iOS Safari zooms the
       whole viewport on every input focus. */
    font-size:13.25px;-webkit-text-size-adjust:100%;
    scroll-behavior:smooth;text-rendering:optimizeLegibility;
}
body {
    font-family:var(--font-body);color:var(--text);
    background-color:var(--bg);
    background-image:var(--app-bg-pattern);
    background-size:46px 46px;
    background-position:center top;
    line-height:1.55;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-feature-settings:'cv11','ss01','ss03';
}
/* The small-device steps of the global type scale (see the html rule above).
   Android phones are where "everything looks too big" was reported: a 412px
   Pixel viewport lands on 12.5px, a 360px budget device on 12px. */
@media (max-width: 768px) { html { font-size:12.75px } }
@media (max-width: 430px) { html { font-size:12.25px } }
@media (max-width: 360px) { html { font-size:11.75px } }

input,textarea,select,button {font-family:var(--font-body)}
img,svg,video {max-width:100%;display:block}
button {cursor:pointer}
a {color:inherit}
::selection {background:var(--accent-soft);color:var(--accent-2)}

/* Custom scrollbar */
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track {background:transparent}
::-webkit-scrollbar-thumb {background:rgba(15,23,42,.12);border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover {background:rgba(15,23,42,.22);background-clip:content-box;border:2px solid transparent}

/* ══════════════ App Loader ═════════════════════════
   Shares its "Emerald Night" ambient with the auth screen
   so the boot → login crossfade reads as one scene.
   NOTE: the .24s fade below is paired with a 260ms
   setTimeout in app.js _hideLoader — keep them in sync. */
.app-loader {
    position:fixed;inset:0;z-index:9999;
    background:linear-gradient(178deg,#04231d 0%,#06342a 56%,#021512 100%);
    overflow:hidden;
    transition:opacity .24s var(--ease), visibility .24s var(--ease);
}
.app-loader.is-hidden {opacity:0;visibility:hidden;pointer-events:none}

/* The uploaded start image fills the screen at EVERY size. It used to appear
   only above 960px, so on a phone — where nearly every user is — the asset was
   never seen and the screen was an empty gradient. */
.loader-photo {
    position:absolute;inset:0;
    background-size:cover;background-position:50% 42%;
    transform:scale(1.06);
    animation:loaderDrift 18s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.app-loader:not(.has-start-image) .loader-photo {display:none}
@keyframes loaderDrift {
    from {transform:scale(1.06) translate3d(0,0,0)}
    to   {transform:scale(1.13) translate3d(0,-1.4%,0)}
}

/* Two scrims: one seats the type, one keeps the brand hue in the photograph.
   The lower half carries text over whatever the picture happens to contain —
   printed shirts, signage — so it has to go properly dark, not merely tinted. */
.loader-scrim {
    position:absolute;inset:0;
    background:
        linear-gradient(180deg,
            rgba(2,21,18,.34) 0%,
            rgba(2,21,18,.06) 26%,
            rgba(2,21,18,.55) 56%,
            rgba(2,21,18,.88) 78%,
            rgba(2,17,14,.97) 100%),
        linear-gradient(120deg,rgba(4,45,36,.50) 0%,rgba(4,45,36,0) 62%);
}
/* Without a photo the ground keeps a light of its own so it never reads empty. */
.app-loader:not(.has-start-image) .loader-scrim {
    background:radial-gradient(85% 55% at 18% 88%,rgba(5,150,105,.26) 0%,transparent 68%);
}

.loader-stack {
    position:absolute;left:0;right:0;bottom:0;
    padding:0 clamp(26px,7vw,56px) clamp(46px,10vh,84px);
    display:flex;flex-direction:column;align-items:flex-start;gap:13px;
    text-align:left;
    animation:loaderRise .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes loaderRise {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.loader-logo {
    font-family:var(--font-display);
    font-size:clamp(2.6rem,12vw,3.4rem);font-weight:800;letter-spacing:-.045em;
    color:var(--text-inv);line-height:1;
}
.loader-logo span {color:#059669}
.loader-logo img {height:clamp(48px,13vw,62px);width:auto;max-width:min(74vw,320px);object-fit:contain;display:block}
/* Two start logos may be set — a phone mark and a wider one. Only ever one is
   displayed; the other is hidden rather than absent so no layout shift occurs
   when the viewport crosses the breakpoint. */
.loader-logo .loader-logo-lg {display:none}

.loader-copy {display:flex;flex-direction:column;gap:5px}
.loader-title {
    font-family:var(--font-display);
    font-size:clamp(1.06rem,4.4vw,1.24rem);font-weight:800;letter-spacing:-.015em;
    color:#fff;line-height:1.3;
}
/* The status line reports real stages (session → account → permissions →
   workspace), so each change is faded rather than swapped, to read as
   progress instead of a flicker. */
.loader-text {
    font-size:.86rem;font-weight:500;color:rgba(255,255,255,.62);
    transition:opacity .22s var(--ease);
}
.loader-text.is-swapping {opacity:0}

.loader-dots {display:flex;align-items:center;gap:9px;margin-top:5px}
.loader-dots i {
    width:9px;height:9px;border-radius:50%;background:#059669;
    animation:loaderBreathe 1.5s ease-in-out infinite;
}
.loader-dots i:nth-child(2) {animation-delay:.2s}
.loader-dots i:nth-child(3) {animation-delay:.4s}
@keyframes loaderBreathe {
    0%,100% {transform:scale(.72);opacity:.34}
    45%     {transform:scale(1);opacity:1}
}

@media (min-width:900px) {
    .loader-stack {padding-bottom:clamp(60px,13vh,104px);gap:16px}
    .loader-logo  {font-size:clamp(3.2rem,4.4vw,4.4rem)}
    .loader-logo img {height:clamp(58px,5vw,76px)}
    .loader-logo .loader-logo-sm {display:none}
    .loader-logo .loader-logo-lg {display:block}
    .loader-title {font-size:1.42rem}
    .loader-text  {font-size:.94rem}
    .loader-photo {background-position:50% 38%}
}
@media (prefers-reduced-motion:reduce) {
    .loader-photo,.loader-stack {animation:none;transform:none}
}

/* ══════════════ Screens ════════════════════════════ */
.screen {min-height:100dvh}

/* ══════════════ Auth Screen (login / OTP) ══════════
   "Sunrise Conversation" — a full-bleed, card-less flow.
   One question fills the screen; steps slide in; the form
   floats on a living emerald→gold gradient (warm, on-brand,
   not the usual fintech navy). JS contract is unchanged:
   element IDs, .auth-step display toggling, .visible on the
   country modal, [hidden] semantics and the 6 sibling OTP
   inputs still drive app.js — selectors stay ID/class-stable. */
.auth-screen-bg {
    --au-ink:#0f172a;
    --au-ink-soft:#475569;
    --au-ink-faint:#94a3b8;
    --au-surface:#ffffff;
    --au-glass:#f1f5f9;
    --au-glass-line:#e2e8f0;
    --au-emerald:#059669;
    --au-emerald-deep:#065f46;
    height:100svh;
    height:100dvh;
    display:block;
    background:
        radial-gradient(60% 50% at 84% 8%, rgba(251,191,36,.30) 0%, transparent 60%),
        radial-gradient(55% 55% at 10% 6%, rgba(16,185,129,.30) 0%, transparent 62%),
        radial-gradient(70% 60% at 88% 96%, rgba(20,184,166,.28) 0%, transparent 66%),
        radial-gradient(50% 45% at 4% 92%, rgba(245,158,11,.20) 0%, transparent 62%),
        linear-gradient(165deg,#03271f 0%,#064e3b 38%,#0b6b57 68%,#0f766e 100%);
    position:relative;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    isolation:isolate;
    color:var(--au-ink);
}
/* Admin start-screen image takes over the whole background */
.auth-photo {
    position:absolute;inset:0;z-index:-3;
    background-size:cover;background-position:center;
}
.auth-scrim {
    position:absolute;inset:0;z-index:-3;pointer-events:none;
    background:linear-gradient(165deg,rgba(3,39,31,.90) 0%,rgba(6,78,59,.78) 45%,rgba(15,118,110,.6) 100%);
}
.auth-screen-bg:not(.has-start-image) .auth-scrim {display:none}
.auth-screen-bg::before {
    content:'';position:absolute;inset:0;z-index:-2;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(92% 88% at 50% 28%,#000 18%,transparent 100%);
    mask-image:radial-gradient(92% 88% at 50% 28%,#000 18%,transparent 100%);
    pointer-events:none;
}
.auth-screen-bg::after {
    content:'';position:absolute;inset:0;z-index:-1;
    background:radial-gradient(130% 100% at 50% -12%,transparent 50%,rgba(1,20,15,.62) 100%);
    pointer-events:none;
}
/* Slow-drifting aurora orbs — the "living" background (transform-only, GPU-friendly) */
.auth-ambient {position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.auth-orb {position:absolute;border-radius:50%;filter:blur(6px);opacity:.5;will-change:transform}
.auth-orb-a {
    width:min(70vw,620px);height:min(70vw,620px);left:-16%;top:-14%;
    background:radial-gradient(circle at 40% 40%, rgba(52,211,153,.42) 0%, rgba(16,185,129,.12) 46%, transparent 72%);
    animation:authDriftA 28s ease-in-out infinite alternate;
}
.auth-orb-b {
    width:min(78vw,700px);height:min(78vw,700px);right:-22%;bottom:-20%;
    background:radial-gradient(circle at 60% 45%, rgba(20,184,166,.36) 0%, rgba(13,148,136,.10) 50%, transparent 74%);
    animation:authDriftB 34s ease-in-out infinite alternate;
}
.auth-orb-c {
    width:min(52vw,420px);height:min(52vw,420px);right:2%;top:6%;
    background:radial-gradient(circle at 50% 50%, rgba(251,191,36,.32) 0%, rgba(245,158,11,.10) 48%, transparent 70%);
    animation:authDriftC 24s ease-in-out infinite alternate;
}
/* Centering column inside the fixed-height scroller. The card uses
   margin:auto so it centers when there's room and top-aligns (never
   clips) once the content grows taller than the viewport. */
.auth-container {
    position:relative;z-index:1;
    width:100%;min-height:100%;
    padding:clamp(14px,3svh,26px) clamp(16px,5vw,28px) calc(clamp(14px,3svh,26px) + var(--safe-b));
    display:flex;flex-direction:column;
}
/* Contained white card — a calm, solid surface so the moving
   background stays as ambience and never reads as distraction. */
.auth-card {
    position:relative;width:100%;max-width:460px;margin:auto;
    display:flex;flex-direction:column;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:clamp(16px,3.5vw,22px) clamp(20px,5vw,28px);
    box-shadow:0 40px 100px -40px rgba(2,8,20,.7), 0 10px 30px -14px rgba(2,8,20,.35);
    overflow:hidden;
    animation:authCardIn .55s var(--ease-out) both;
}
/* Brand bar — logo + secure chip, at the top of the card */
.auth-header {
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding-bottom:12px;margin-bottom:14px;
    border-bottom:1px solid var(--border-light);
}
.auth-logo {
    font-family:var(--font-display);font-size:1.6rem;font-weight:800;
    color:var(--primary);letter-spacing:-.02em;line-height:1;
    display:flex;align-items:center;min-width:0;
}
.auth-logo span {
    background:linear-gradient(135deg,#10b981,#0d9488);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-kicker {
    display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
    padding:7px 12px;border-radius:999px;
    background:#ecfdf5;border:1px solid rgba(16,185,129,.22);
    color:var(--accent-2);font-size:.68rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;
}
.auth-kicker i {color:var(--accent)}
.auth-assurance-row {
    display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;justify-content:center;
}
.auth-assurance-row span {
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 12px;border-radius:999px;
    background:var(--au-glass);border:1px solid var(--au-glass-line);
    color:var(--au-ink-soft);font-size:.74rem;font-weight:700;white-space:nowrap;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.auth-assurance-row i {color:var(--accent);font-size:.82rem}
/* The conversation. The visible step centers itself in the free space. */
.auth-step {
    background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    margin:0;width:100%;
}
.auth-step>* {animation:authRise .5s var(--ease-out) both}
.auth-step>*:nth-child(2) {animation-delay:.05s}
.auth-step>*:nth-child(3) {animation-delay:.1s}
.auth-step>*:nth-child(4) {animation-delay:.15s}
.auth-step>*:nth-child(5) {animation-delay:.2s}
.auth-step>*:nth-child(6) {animation-delay:.25s}
.auth-step>*:nth-child(7) {animation-delay:.3s}
.auth-step>*:nth-child(8) {animation-delay:.35s}
.auth-step>*:nth-child(9) {animation-delay:.4s}
.auth-step>*:nth-child(n+10) {animation-delay:.45s}
/* Progress rail — the conversational stages (Number → Code) */
.auth-progress {display:flex;align-items:center;gap:8px;margin-bottom:24px}
.auth-progress span {height:5px;border-radius:999px;background:var(--au-glass);flex:1;position:relative;overflow:hidden}
.auth-progress span.on::after {
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(90deg,#34d399,#fcd34d);
}
.auth-step-head {margin-bottom:14px}
.auth-eyebrow {
    display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;
    color:var(--au-ink-soft);font-size:.94rem;font-weight:700;
}
.auth-step-title {
    font-family:var(--font-display);
    font-size:clamp(1.8rem,6vw,2.35rem);font-weight:800;color:var(--text);
    letter-spacing:-.03em;line-height:1.08;
}
.auth-step-sub {margin-top:8px;color:var(--au-ink-soft);font-size:.95rem;line-height:1.5;font-weight:500}
.auth-field {margin-bottom:10px}
.auth-meta-row {display:flex;justify-content:center;margin-top:10px}
.auth-helper-link {
    border:none;background:transparent;color:var(--accent-2);
    font:inherit;font-size:.85rem;font-weight:700;
    cursor:pointer;padding:2px 4px;text-decoration:underline;text-underline-offset:3px;
    transition:color .15s var(--ease);
}
.auth-helper-link:hover {color:var(--accent-hover)}
.auth-legal {
    text-align:center;margin:10px auto 0;
    max-width:40ch;color:var(--au-ink-faint);
    font-size:.76rem;line-height:1.5;font-weight:500;
}
.auth-legal a {color:var(--accent-2) !important;font-weight:700}
.auth-card .auth-field label {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:9px;color:var(--au-ink-soft);font-size:.82rem;font-weight:700;letter-spacing:.01em;
}
/* Remember-me: glass toggle for the dark background */
.auth-remember {margin:2px 0 12px}
.remember-check {
    display:flex;align-items:center;gap:11px;cursor:pointer;
    color:var(--au-ink-soft);font-weight:600;font-size:.88rem;user-select:none;
    -webkit-tap-highlight-color:transparent;
}
.remember-check input {
    appearance:none;-webkit-appearance:none;
    width:42px;height:24px;border-radius:999px;flex-shrink:0;
    background:#e2e8f0;position:relative;cursor:pointer;
    border:none;outline:none;margin:0;
    transition:background .25s var(--ease);
}
.remember-check input::after {
    content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);
    transition:transform .25s var(--ease-spring);
}
.remember-check input:checked {background:linear-gradient(135deg,#10b981,#059669)}
.remember-check input:checked::after {transform:translateX(18px)}
.remember-check input:focus-visible {box-shadow:0 0 0 4px rgba(5,150,105,.18)}
.remember-check:hover input:not(:checked) {background:#cbd5e1}

/* Global base — .phone-input-wrap is reused by marketplace and
   admin templates; keep these metrics stable and scope all auth
   styling behind #auth-screen / .auth-card below. */
.phone-input-wrap {
    display:flex;align-items:center;
    border:1px solid var(--border);border-radius:18px;
    overflow:hidden;transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.phone-input-wrap:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft), 0 10px 28px -22px rgba(15,23,42,.8);
    transform:translateY(-1px);
}
/* Country picker button (replaces old .phone-prefix) */
.country-picker-btn {
    display:flex;align-items:center;gap:5px;
    padding:0 14px;height:56px;min-width:90px;
    background:#f8fafc;border:none;outline:none;
    cursor:pointer;font-size:.95rem;font-weight:700;color:var(--text-2);
    border-right:1px solid var(--border);transition:background .15s;
    flex-shrink:0;
    border-radius:0;
}
.country-picker-btn:hover {background:var(--surface-hover);}
#selected-flag {font-size:1.2rem;line-height:1;}
#selected-dial {font-size:.88rem;font-weight:800;letter-spacing:.01em;color:var(--primary);}

/* Country picker modal — bottom sheet on mobile, dialog on larger screens.
   JS opens with display:flex + .visible and waits 280ms on close. */
.country-modal-overlay {
    position:fixed;inset:0;z-index:9999;
    background:rgba(2,8,20,.6);
    display:flex;align-items:flex-end;justify-content:center;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .25s var(--ease);
}
.country-modal-overlay.visible {opacity:1;}
.country-modal-sheet {
    width:100%;max-width:480px;
    background:var(--surface);
    border-radius:26px 26px 0 0;
    max-height:82dvh;display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .26s var(--ease-out);
    padding-bottom:var(--safe-b);
    box-shadow:0 -24px 70px rgba(2,8,20,.4);
}
.country-modal-sheet::before {
    content:'';width:42px;height:4px;border-radius:999px;
    background:var(--border);margin:10px auto 0;flex-shrink:0;
}
.country-modal-overlay.visible .country-modal-sheet {transform:translateY(0);}
@media(min-width:640px) {
    .country-modal-overlay {align-items:center;padding:24px}
    .country-modal-sheet {
        border-radius:24px;max-height:min(640px,86dvh);
        transform:translateY(14px) scale(.96);opacity:0;
        transition:transform .26s var(--ease-out), opacity .22s var(--ease);
    }
    .country-modal-overlay.visible .country-modal-sheet {transform:none;opacity:1}
    .country-modal-sheet::before {display:none}
}
.country-modal-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px 0;
}
.country-modal-title {font-size:1.05rem;font-weight:800;color:var(--text);}
.country-modal-close {
    border:none;cursor:pointer;
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-2);font-size:1rem;
    background:var(--surface-alt);transition:all .15s;
}
.country-modal-close:hover {background:var(--border-soft);color:var(--text);}
.country-search-wrap {
    padding:14px 20px 10px;position:relative;
}
.country-search-icon {
    position:absolute;left:32px;top:50%;transform:translateY(-50%);
    color:var(--text-3);font-size:.9rem;pointer-events:none;
}
.country-search-wrap .country-search-input {
    width:100%;padding:11px 14px 11px 36px;
    border:1.5px solid var(--border);border-radius:12px;
    font-size:.92rem;background:var(--surface-alt);color:var(--text);
    outline:none;transition:all .18s;
}
.country-search-wrap .country-search-input:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff}
.country-list {
    flex:1;overflow-y:auto;padding:0 12px 16px;
    -webkit-overflow-scrolling:touch;
}
.country-item {
    width:100%;display:flex;align-items:center;gap:12px;
    padding:11px 12px;border:none;background:none;cursor:pointer;
    border-radius:12px;transition:background .13s, transform .13s var(--ease);text-align:left;
    font-size:.92rem;color:var(--text);
}
.country-item:hover {background:var(--surface-hover);}
.country-item:active {transform:scale(.985)}
.country-item.selected {background:#ecfdf5;}
.country-flag {font-size:1.3rem;width:28px;text-align:center;flex-shrink:0;}
.country-name {flex:1;font-weight:600;}
.country-code {font-size:.82rem;color:var(--text-3);font-weight:600;font-variant-numeric:tabular-nums;}
.country-check {color:var(--accent-2);font-size:1rem;margin-left:4px;}
.country-empty {text-align:center;padding:32px 16px;color:var(--text-3);font-size:.9rem;}

/* keep old .phone-prefix for any legacy usage */
.phone-prefix {
    padding:0 16px;font-weight:600;color:var(--text-2);
    background:var(--surface-alt);height:54px;
    display:flex;align-items:center;font-size:.95rem;
    border-right:1px solid var(--border);
}
.phone-input-wrap input {
    flex:1;border:none;outline:none;padding:0 16px;
    height:56px;font-size:1rem;font-weight:700;
    letter-spacing:.02em;background:transparent;color:var(--text);
    min-width:0;
    border-radius:0;
}

/* ── Auth-scoped inputs: bright frosted pills floating on the dark bg.
   #auth-screen + !important armor these against the later global
   !important blocks (.btn radius, input[type=*] radius/border,
   letter-spacing:0, .input-group border-color). ── */
.auth-card .phone-input-wrap {
    border:1.5px solid var(--border);border-radius:16px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.auth-card .phone-input-wrap:focus-within {
    border-color:#059669;
    box-shadow:0 0 0 4px rgba(5,150,105,.13), 0 14px 32px -20px rgba(5,150,105,.5);
    transform:translateY(-1px);
}
#auth-screen .phone-input-wrap input {
    height:52px;font-size:1.05rem;font-weight:700;
    letter-spacing:.04em !important;
    border:none !important;border-radius:0 !important;
    background:transparent !important;box-shadow:none !important;
    padding:0 16px;caret-color:#059669;color:#000;
}
#auth-screen .phone-input-wrap input:focus {border:none !important;box-shadow:none !important;outline:none}
.auth-card .country-picker-btn {height:52px;background:#f8fafc;border-right:1px solid var(--border)}
#auth-screen .input-group>input,
#auth-screen .auth-pw-wrap input {
    min-height:50px;border-radius:14px !important;
    border:1.5px solid var(--border) !important;
    font-size:1rem;font-weight:600;background:#fff;color:#000;
    box-shadow:0 1px 2px rgba(15,23,42,.04);caret-color:#059669;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
#auth-screen .auth-pw-wrap input {padding-right:48px}
#auth-screen .input-group>input:focus,
#auth-screen .auth-pw-wrap input:focus {
    border-color:#059669 !important;
    box-shadow:0 0 0 4px rgba(5,150,105,.13), 0 14px 32px -20px rgba(5,150,105,.5);
    outline:none;transform:translateY(-1px);
}
#auth-screen .input-group>input::placeholder,
#auth-screen .phone-input-wrap input::placeholder {color:#64748b;font-weight:500}
/* Sign-in method tabs — glass segmented control with a sliding white pill */
.auth-method-tabs {
    display:flex;gap:4px;position:relative;
    background:var(--surface-alt);
    border:1px solid var(--border-soft);
    border-radius:15px;padding:5px;margin-bottom:12px;
}
.auth-method-tabs button {
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    border:none;background:transparent;cursor:pointer;
    padding:11px 12px;border-radius:11px;
    font:inherit;font-size:.85rem;font-weight:800;color:var(--text-3);
    transition:color .2s var(--ease);
    -webkit-tap-highlight-color:transparent;
    position:relative;z-index:1;
}
.auth-method-tabs button i {font-size:.95rem}
.auth-method-tabs button:hover {color:var(--text)}
.auth-method-tabs button.active {
    background:linear-gradient(135deg,#10b981,#059669);color:#fff;
    box-shadow:0 8px 18px -8px rgba(5,150,105,.6);
}
@supports selector(:has(*)) {
    .auth-method-tabs::before {
        content:'';position:absolute;top:5px;bottom:5px;left:5px;
        width:calc(50% - 7px);border-radius:11px;
        background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 18px -8px rgba(5,150,105,.6);
        transition:transform .3s var(--ease-spring);z-index:0;
    }
    .auth-method-tabs:has(#auth-tab-password.active)::before {transform:translateX(calc(100% + 4px))}
    .auth-method-tabs button.active {background:transparent;box-shadow:none;color:#fff}
}
/* Password field */
.auth-pw-wrap {position:relative}
.auth-pw-wrap input {width:100%;padding-right:48px}
.auth-pw-eye {
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    width:38px;height:38px;border-radius:11px;
    border:none;background:transparent;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-3);font-size:1.05rem;
    transition:background .15s var(--ease), color .15s var(--ease);
}
.auth-pw-eye:hover {background:var(--accent-soft);color:var(--accent-2)}
.auth-forgot-row {display:flex;justify-content:flex-end;margin-top:9px}
/* Invite code — glass ticket */
.auth-invite-entry {margin:-2px 0 10px}
.auth-invite-trigger {
    width:100%;min-height:46px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    border:1.5px dashed rgba(5,150,105,.35);
    border-radius:14px;background:#f0fdf9;
    color:#047857;font:inherit;font-size:.86rem;font-weight:800;
    cursor:pointer;
    transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.auth-invite-trigger:hover {border-color:rgba(5,150,105,.55);background:#ecfdf5;transform:translateY(-1px)}
.auth-invite-trigger i {font-size:1rem;color:var(--accent)}
.auth-invite-field[hidden] {display:none!important}
.auth-invite-clear {
    border:none;background:transparent;color:var(--red);
    font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;padding:0;
}
#auth-invite-code {
    min-height:50px;border-radius:14px !important;background:#fff;
    border:1.5px solid var(--border) !important;font-weight:700;color:#000;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#auth-invite-code:focus {
    border-color:#059669 !important;
    box-shadow:0 0 0 4px rgba(5,150,105,.13);outline:none;
}
/* Primary CTAs: bright white pill with deep-emerald ink — pops on the dark bg */
#btn-send-otp,#btn-verify-otp,#btn-reset-password {
    min-height:50px;border-radius:15px !important;
    font-size:1.02rem;font-weight:800;letter-spacing:.01em !important;
    background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;
    box-shadow:0 18px 36px -18px rgba(5,150,105,.65), 0 2px 6px rgba(5,150,105,.16);
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
#btn-send-otp:hover,#btn-verify-otp:hover,#btn-reset-password:hover {
    transform:translateY(-2px);
    box-shadow:0 24px 44px -18px rgba(5,150,105,.75), 0 4px 10px rgba(5,150,105,.2);
    filter:saturate(1.06);
}
#btn-send-otp:active,#btn-verify-otp:active,#btn-reset-password:active {transform:translateY(0) scale(.985)}
#btn-send-otp::after,#btn-verify-otp::after,#btn-reset-password::after {
    content:'';position:absolute;top:0;bottom:0;left:-70%;width:50%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
    transform:skewX(-18deg);transition:left .55s var(--ease);pointer-events:none;
}
#btn-send-otp:hover::after,#btn-verify-otp:hover::after,#btn-reset-password:hover::after {left:115%}
#btn-send-otp .btn-text,#btn-verify-otp .btn-text,#btn-reset-password .btn-text {display:inline-flex;align-items:center;gap:8px}
#btn-send-otp .btn-text i,#btn-verify-otp .btn-text i,#btn-reset-password .btn-text i {transition:transform .2s var(--ease)}
#btn-send-otp:hover .btn-text i {transform:translateX(4px)}
#btn-send-otp .btn-loading i,#btn-verify-otp .btn-loading i,#btn-reset-password .btn-loading i {color:#fff}

/* OTP step */
.auth-otp-badge {
    width:46px;height:46px;border-radius:14px;margin-bottom:12px;
    background:linear-gradient(145deg,#ecfdf5,#d1fae5);border:1px solid rgba(16,185,129,.25);
    display:flex;align-items:center;justify-content:center;
    color:#059669;font-size:1.25rem;
    box-shadow:0 12px 26px -16px rgba(5,150,105,.55);
}
.otp-info-line {display:flex;align-items:flex-start;gap:10px;margin-top:12px}
.otp-info-line .help-trigger {flex-shrink:0}
.otp-info {color:var(--text-2);margin:0;font-size:.95rem;line-height:1.55;flex:1;font-weight:500}
.otp-info strong {color:var(--text);font-weight:800;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.otp-info strong img {flex-shrink:0;border-radius:3px}
.auth-card .otp-inputs {display:flex;gap:clamp(7px,2.4vw,12px);justify-content:space-between;margin:16px 0 18px}
.auth-card .otp-inputs input,
.auth-card .input-group .otp-inputs input {
    flex:1 1 0;width:auto;min-width:0;max-width:60px;
    height:54px;min-height:54px;padding:0;
    text-align:center;font-size:1.6rem;font-weight:800;
    border:1.5px solid var(--border) !important;
    border-radius:16px !important;outline:none;font-family:var(--font-display);
    background:#fff;color:#000;caret-color:#059669;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.auth-card .otp-inputs input:focus {
    border-color:#059669 !important;
    box-shadow:0 0 0 4px rgba(5,150,105,.14), 0 12px 26px -16px rgba(5,150,105,.5);
    transform:translateY(-3px);
}
.auth-card .otp-inputs input:not(:placeholder-shown) {
    border-color:#059669 !important;background:#ecfdf5;
    animation:otpPop .24s var(--ease-spring);
}
#auth-forgot-step .otp-inputs {margin:6px 0 4px}
#auth-forgot-step .auth-step-sub strong {color:var(--text);font-weight:800}
.otp-actions {display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}
.otp-actions .btn-link {color:var(--accent-2);font-weight:700}
.otp-actions .btn-link:hover {color:var(--accent-hover)}
.otp-actions .btn-link:disabled {color:var(--text-3)}

/* ── Responsive ── */
@media(max-width:380px) {
    .auth-container {padding-left:16px;padding-right:16px}
    .auth-kicker {display:none}
    .auth-step-title {font-size:1.85rem}
    .auth-method-tabs button {font-size:.78rem;padding:9px 8px;gap:5px}
    .auth-card .otp-inputs {gap:6px}
    .auth-card .otp-inputs input,
    .auth-card .input-group .otp-inputs input {height:56px;min-height:56px;font-size:1.35rem;border-radius:14px !important}
    .auth-card .country-picker-btn {padding:0 10px;min-width:76px}
    #auth-screen .phone-input-wrap input {padding:0 12px}
    #btn-send-otp,#btn-verify-otp,#btn-reset-password {padding-left:16px;padding-right:16px}
    #btn-reset-password {font-size:.94rem}
}

@media(min-width:640px) {
    .auth-card {max-width:480px}
    .auth-step-title {font-size:clamp(1.95rem,4vw,2.4rem)}
}

/* Short viewport (keyboard open / landscape phone): tighten vertical rhythm */
@media(max-height:720px) {
    .auth-header {padding-bottom:0}
    .auth-progress {margin-bottom:16px}
    .auth-step-head {margin-bottom:16px}
    .auth-eyebrow {margin-bottom:8px}
    .auth-field {margin-bottom:11px}
    .auth-method-tabs {margin-bottom:12px}
    #auth-screen .phone-input-wrap input,.auth-card .country-picker-btn {height:48px}
    #auth-screen .input-group>input,#auth-screen .auth-pw-wrap input {min-height:46px}
    #btn-send-otp,#btn-verify-otp,#btn-reset-password {min-height:46px}
    .auth-remember {margin-bottom:10px}
    .auth-card .otp-inputs {margin:12px 0 14px}
    .auth-card .otp-inputs input,
    .auth-card .input-group .otp-inputs input {height:50px;min-height:50px;font-size:1.35rem}
    .auth-otp-badge {width:46px;height:46px;font-size:1.2rem;margin-bottom:12px;border-radius:14px}
}
@media(max-height:560px) {
    .auth-container {padding-top:14px}
    .auth-step-title {font-size:1.65rem}
    .auth-otp-badge {display:none}
}

/* Desktop / large screens: same centered conversation, more presence.
   No split panel — the living background carries the extra width. */
@media(min-width:960px) {
    .auth-container {padding-top:clamp(16px,4vh,40px);padding-bottom:clamp(16px,4vh,40px)}
    .auth-card {max-width:496px;padding:clamp(18px,1.8vw,24px) clamp(24px,2.4vw,32px)}
    .auth-logo {font-size:1.8rem}
    .auth-step-title {font-size:clamp(2.1rem,2.2vw,2.55rem)}
    .auth-step-sub {font-size:1.05rem;max-width:40ch}
    .auth-eyebrow {font-size:1rem}
    .auth-orb {opacity:.62}
}

/* iOS zoom-on-focus guard: keep auth inputs at 16px on phones */
@media(max-width:767px) {
    #auth-screen .input-group>input,
    #auth-screen .auth-pw-wrap input,
    #auth-screen .phone-input-wrap input,
    .country-search-wrap .country-search-input {font-size:16px}
}

/* Auth motion */
@keyframes authCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes authRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes otpPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes authDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,6vh,0) scale(1.14)}}
@keyframes authDriftB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7vw,-6vh,0) scale(1.1)}}
@keyframes authDriftC{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5vw,8vh,0)}}

@media (prefers-reduced-motion: reduce) {
    .auth-orb,.loader-logo,.loader-logo::after {animation:none!important}
    .auth-card,.auth-step>* {animation-duration:.01ms!important;animation-delay:0ms!important}
    .auth-card .otp-inputs input:not(:placeholder-shown) {animation:none!important}
}

/* ══════════════ Onboarding ═════════════════════════ */
.onboard-container {
    min-height:100dvh;padding:44px 24px calc(44px + var(--safe-b));
    max-width:520px;margin:0 auto;background:var(--bg-warm);
}
.onboard-header {margin-bottom:32px}
.onboard-step {
    display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
    background:var(--accent-soft);color:var(--accent-2);
    font-size:.76rem;font-weight:700;border-radius:var(--r-full);
    margin-bottom:14px;letter-spacing:.02em;
    border:1px solid var(--accent-ring);
}
.onboard-header h2 {
    font-family:var(--font-display);font-size:1.8rem;font-weight:700;
    color:var(--primary);letter-spacing:-.02em;line-height:1.15;
}
.onboard-header p {color:var(--text-2);margin-top:6px;font-size:.95rem}

/* ══════════════ Forms ══════════════════════════════ */
.form-stack {display:flex;flex-direction:column;gap:18px}
.input-group {display:flex;flex-direction:column;gap:8px}
.input-group label {
    font-size:.82rem;font-weight:600;color:var(--text);letter-spacing:.005em;
}
.required {color:var(--red)}

.input-group input,
.input-group textarea,
.input-group select {
    width:100%;padding:13px 15px;border:1.5px solid var(--border);
    border-radius:var(--r-sm);font-size:.94rem;
    outline:none;transition:all .18s var(--ease);background:var(--surface);
    color:var(--text);font-weight:500;
    box-shadow:var(--shadow-xs);
}
.input-group input:hover,
.input-group textarea:hover,
.input-group select:hover {border-color:var(--text-3)}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
}
.input-group input::placeholder,
.input-group textarea::placeholder {color:var(--text-3);font-weight:400}
.input-group textarea {resize:vertical;min-height:80px;line-height:1.5}
.input-group input:disabled,
.input-group select:disabled {background:var(--surface-alt);color:var(--text-3);cursor:not-allowed}
.input-row {display:grid;grid-template-columns:1fr 1fr;gap:14px}

.file-upload {
    position:relative;border:2px dashed var(--border);
    border-radius:var(--r-md);padding:22px;
    text-align:center;cursor:pointer;transition:all .18s var(--ease);
    color:var(--text-3);font-size:.88rem;font-weight:500;
    background:var(--surface-alt);
}
.file-upload:hover {
    border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
    transform:translateY(-1px);
}
.file-upload.has-file {border-color:var(--accent);border-style:solid;color:var(--accent);background:var(--accent-soft)}
.file-upload i {font-size:1.5rem;display:block;margin-bottom:8px}
.file-upload input[type="file"] {position:absolute;inset:0;opacity:0;cursor:pointer}

.optional-fields summary {
    cursor:pointer;font-size:.86rem;font-weight:600;
    color:var(--accent);list-style:none;padding:10px 0;
    display:inline-flex;align-items:center;gap:6px;
}
.optional-fields summary::before {content:'+';font-size:1.1rem;line-height:1}
.optional-fields[open] summary::before {content:'−'}

/* ══════════════ Buttons ════════════════════════════ */
.btn {
    display:inline-flex;align-items:center;justify-content:center;
    gap:8px;padding:13px 22px;border:none;border-radius:var(--r-sm);
    font-size:.92rem;font-weight:600;cursor:pointer;
    transition:all .18s var(--ease);text-decoration:none;
    position:relative;overflow:hidden;letter-spacing:.005em;
    white-space:nowrap;
}
.btn::before {
    content:'';position:absolute;inset:0;background:rgba(255,255,255,.12);
    opacity:0;transition:opacity .18s var(--ease);
}
.btn:hover::before {opacity:1}
.btn:active {transform:translateY(1px) scale(.99)}

.btn-primary {
    background:var(--accent);
    color:var(--text-inv);
    box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.btn-primary:hover {
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(16,185,129,.3);
}
.btn-primary:active {transform:translateY(0);box-shadow:0 1px 4px rgba(16,185,129,.2)}
.btn-dark {
    background:var(--primary);color:var(--text-inv);
    box-shadow:0 4px 14px -4px rgba(15,23,42,.4);
}
.btn-dark:hover {background:var(--primary-soft);transform:translateY(-1px)}
.btn-outline {
    background:var(--surface);border:1.5px solid var(--border);color:var(--text);
    box-shadow:var(--shadow-xs);
}
.btn-outline:hover {border-color:var(--text-3);background:var(--surface-hover);transform:translateY(-1px)}
.btn-danger {
    background:var(--red);color:var(--text-inv);
    box-shadow:0 4px 14px -4px rgba(239,68,68,.4);
}
.btn-danger:hover {transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(239,68,68,.5)}
.btn-ghost {background:transparent;color:var(--text-2)}
.btn-ghost:hover {background:var(--surface-hover);color:var(--text)}

.btn-sm {padding:9px 16px;font-size:.82rem;border-radius:var(--r-xs)}
.btn-lg {padding:16px 28px;font-size:1rem;border-radius:var(--r-md)}
.btn-block {width:100%}
.btn:disabled {opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn:disabled::before {display:none}

.btn-link {
    background:none;border:none;color:var(--accent);
    font-size:.88rem;cursor:pointer;font-weight:600;padding:4px 0;
    display:inline-flex;align-items:center;gap:6px;
    transition:color .15s var(--ease);
}
.btn-link:hover {color:var(--accent-hover);text-decoration:underline}
.btn-link:disabled {color:var(--text-3);cursor:not-allowed;text-decoration:none}

.customer-dropdown {box-shadow:0 8px 24px rgba(0,0,0,.12) !important}
.customer-dropdown-item {cursor:pointer;border-bottom:1px solid var(--border-light);transition:background .15s var(--ease)}
.customer-dropdown-item:hover {background:var(--surface-hover)}
.customer-dropdown-item:last-child {border-bottom:none}
.customer-dropdown-item.walk-in {background:var(--surface-hover);font-weight:600}

.ai-btn {
    background:#f5f3ff;
    color:#7c3aed;border:1px solid #ddd6fe;font-weight:700;
    box-shadow:none;
    transition:all .18s var(--ease-spring);
    min-height:var(--compact-fixed-h);
    padding:0 clamp(10px,3vw,14px);
    gap:6px;
    font-size:clamp(.74rem,2.7vw,.84rem);
}
.ai-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 22px -12px rgba(124,58,237,.6);
    background:#7c3aed;color:#fff;border-color:#7c3aed;
}
.ai-btn:active {transform:scale(.98)}
.ai-btn i {margin-right:4px}

/* Admin quick-action tiles — subtle hover lift */
.admin-qa-tile { transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.admin-qa-tile:hover { transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(15,23,42,.45); border-color:var(--accent-ring); }
.admin-qa-tile:active { transform:translateY(0); }

/* Reusable tinted action button — pass a color via --c (soft, fills on hover) */
.btn.btn-tint {
    border:1px solid color-mix(in srgb, var(--c,#10b981) 32%, var(--border-soft))!important;
    color:var(--c,#10b981)!important;
    background:color-mix(in srgb, var(--c,#10b981) 8%, var(--surface))!important;
    box-shadow:none;
}
.btn.btn-tint i { color:inherit!important; }
.btn.btn-tint:hover {
    background:var(--c,#10b981)!important; color:#fff!important;
    border-color:var(--c,#10b981)!important;
    transform:translateY(-1px);
    box-shadow:0 8px 18px -10px color-mix(in srgb, var(--c,#10b981) 60%, transparent);
}
.btn.btn-tint:active { transform:translateY(0) scale(.98); }
.btn-sm.ai-btn {
    min-height:34px;
    padding:0 clamp(9px,2.8vw,12px);
}

@media (max-width:380px) {
    .btn-sm.ai-btn {
        width:34px;
        min-width:34px;
        padding:0;
        font-size:0;
        gap:0;
        border-radius:10px;
    }
    .btn-sm.ai-btn i {
        margin:0;
        font-size:.96rem;
    }
}

.btn-fab {
    position:fixed;bottom:calc(var(--bnav-h) + var(--fixed-btn-offset) + var(--safe-b));
    right:var(--fixed-btn-offset);width:var(--fixed-btn-size);height:var(--fixed-btn-size);border-radius:var(--r-full);
    background:var(--accent);
    color:var(--text-inv);border:none;
    font-size:var(--fixed-btn-icon);box-shadow:var(--shadow-lg),0 7px 20px rgba(16,185,129,.32);
    cursor:pointer;z-index:50;display:flex;align-items:center;justify-content:center;
    transition:all .22s var(--ease-spring);
}
.btn-fab:hover {transform:scale(1.06) rotate(6deg)}
.btn-fab:active {transform:scale(.92)}

.menu-fab {
    position:fixed;
    bottom:calc(var(--bnav-h) + var(--fixed-btn-offset) + var(--safe-b));
    left:var(--fixed-btn-offset);width:var(--fixed-btn-size);height:var(--fixed-btn-size);border-radius:var(--r-full);
    background:linear-gradient(135deg,#14b88a 0%,#087f63 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.62);
    box-shadow:
        0 10px 28px rgba(8,127,99,.30),
        0 4px 12px rgba(15,23,42,.14),
        inset 0 1px 0 rgba(255,255,255,.28);
    cursor:pointer;z-index:50;display:flex;align-items:center;justify-content:center;
    transition:all .2s var(--ease-spring);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.menu-fab::after {
    content:'';
    position:absolute;
    inset:clamp(-4px,-1vw,-2px);
    border-radius:inherit;
    border:1px solid rgba(20,184,138,.28);
    pointer-events:none;
}
.menu-fab i {font-size:var(--fixed-btn-icon);line-height:1;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.menu-fab:hover {transform:translateY(-3px);box-shadow:0 18px 38px rgba(8,127,99,.38),0 6px 16px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.32)}
.menu-fab:active {transform:scale(.94)}
@media (max-width: 859px) {
    body.pos-mobile-checkout-visible #mobile-menu-fab {
        z-index: 1 !important;
        opacity: 0;
        pointer-events: none;
    }
    body.pos-mobile-checkout-visible #pos-mobile-checkout {
        z-index: 1200 !important;
    }
}

.btn:focus-visible,
.btn-link:focus-visible,
.menu-toggle:focus-visible,
.topbar-icon:focus-visible,
.bnav-item:focus-visible,
.nav-item:focus-visible,
.biz-picker-btn:focus-visible,
.biz-switcher:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:3px solid var(--accent-ring);
    outline-offset:2px;
}

/* ══════════════ Topbar ═════════════════════════════ */
.topbar {
    position:fixed;top:0;left:0;right:0;height:var(--topbar-h);
    background:rgba(255,255,255,.80);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--divider);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;z-index:100;
}
.topbar-left,.topbar-right {display:flex;align-items:center;gap:10px}
.menu-toggle {
    background:var(--surface-alt);border:1px solid var(--border-soft);
    color:var(--text);cursor:pointer;flex-shrink:0;
    width:40px;height:40px;padding:0;
    display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
    transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.menu-toggle:hover {background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-xs)}
.menu-toggle:active {transform:scale(.93)}
.menu-toggle-bars {position:relative;display:block;width:19px;height:13px}
.menu-toggle-bars span {
    position:absolute;left:0;height:2px;width:100%;
    background:currentColor;border-radius:2px;
    transition:transform .28s var(--ease-out),opacity .18s var(--ease),top .28s var(--ease-out),width .28s var(--ease-out);
}
.menu-toggle-bars span:nth-child(1) {top:0}
.menu-toggle-bars span:nth-child(2) {top:5.5px;width:78%}
.menu-toggle-bars span:nth-child(3) {top:11px}
.menu-toggle:hover .menu-toggle-bars span:nth-child(2) {width:100%}
.menu-toggle.is-active .menu-toggle-bars span:nth-child(1) {top:5.5px;transform:rotate(45deg)}
.menu-toggle.is-active .menu-toggle-bars span:nth-child(2) {opacity:0}
.menu-toggle.is-active .menu-toggle-bars span:nth-child(3) {top:5.5px;transform:rotate(-45deg);width:100%}
.biz-switcher {
    border:1.5px solid var(--border);border-radius:var(--r-sm);
    padding:8px 12px;font-size:.85rem;font-weight:600;
    color:var(--text);outline:none;max-width:180px;
    background:var(--surface);cursor:pointer;
    transition:all .18s var(--ease);
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
    padding-right:30px;appearance:none;-webkit-appearance:none;
}
.biz-switcher:hover {border-color:var(--text-3)}
.biz-switcher:focus {border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.topbar-icon {
    background:var(--surface-alt);border:1px solid var(--border-soft);font-size:1.05rem;
    color:var(--text-2);cursor:pointer;padding:9px;
    border-radius:var(--r-sm);transition:all .15s var(--ease);
    display:flex;align-items:center;justify-content:center;
    position:relative;width:38px;height:38px;
}
.topbar-icon:hover {background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-xs)}
.topbar-online {
    display:flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 10px;
    background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:var(--r-sm);
    color:var(--text-2);cursor:pointer;font-weight:700;font-size:.9rem;line-height:1;
    transition:all .15s var(--ease);
}
.topbar-online:hover {background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-xs)}
.topbar-online i {font-size:1rem;color:#059669}
.topbar-online-dot {width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);animation:topbarOnlinePulse 1.8s var(--ease) infinite}
.topbar-online-num {color:var(--text);font-variant-numeric:tabular-nums}
@keyframes topbarOnlinePulse{0%,100%{opacity:1}50%{opacity:.4}}

@media (max-width:420px) {
    :root {
        --topbar-h:56px;
        --bnav-h:58px;
        --fixed-btn-size:clamp(40px,11vw,46px);
        --fixed-btn-icon:clamp(1rem,4vw,1.16rem);
        --fixed-btn-offset:clamp(8px,3vw,12px);
        --compact-fixed-h:36px;
    }
    .topbar {padding:0 10px}
    .topbar-left,.topbar-right {gap:7px}
    .topbar-icon,
    .topbar-flag {
        width:34px;
        height:34px;
        border-radius:9px;
        font-size:.96rem;
        padding:7px;
    }
    .avatar-sm {
        width:34px;
        height:34px;
        border-radius:50%;
        font-size:.96rem;
        padding:0;
        flex:0 0 34px;
    }
    .topbar-flag img {width:20px}
    .topbar-quick-add {box-shadow:0 2px 8px rgba(16,185,129,.28)}
    .topbar-online {height:34px;padding:0 9px 0 8px;font-size:.85rem;gap:5px}
    .topbar-online i {display:none}
}
.icon-badge {
    position:absolute;top:-2px;right:-2px;
    min-width:18px;height:18px;padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:var(--surface);font-size:.66rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--surface);
    box-shadow:0 2px 6px rgba(239,68,68,.35);
}
.avatar-sm {
    width:38px;height:38px;border-radius:var(--r-full);
    background:var(--accent);
    color:var(--text-inv);display:flex;align-items:center;justify-content:center;
    font-size:.82rem;font-weight:700;cursor:pointer;overflow:hidden;padding:0;
    flex:0 0 38px;
    transition:transform .15s var(--ease);
    box-shadow:0 2px 8px rgba(16,185,129,.3),inset 0 1px 0 rgba(255,255,255,.2);
    letter-spacing:.02em;
}
.avatar-sm:hover {transform:scale(1.06)}
.avatar-sm img {display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ══════════════ Custom Business Picker ═════════════ */
.biz-picker-btn {
    display:flex;align-items:center;gap:8px;
    background:var(--surface-alt);border:1.5px solid var(--border);
    border-radius:var(--r-sm);padding:5px 10px 5px 6px;
    cursor:pointer;transition:all .15s var(--ease);
    max-width:200px;height:38px;
}
.biz-picker-btn:hover {background:var(--surface);border-color:var(--text-3);box-shadow:var(--shadow-xs)}
.biz-avatar-xs {
    width:26px;height:26px;border-radius:var(--r-xs);
    background:var(--accent);
    color:#fff;font-size:.72rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0;
}
.biz-avatar-xs img {width:100%;height:100%;object-fit:cover}
.biz-picker-name {
    font-size:.82rem;font-weight:700;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:130px;flex:1;
}
.biz-picker-caret {font-size:.65rem;color:var(--text-3);flex-shrink:0;transition:transform .2s}
.biz-picker-btn.open .biz-picker-caret {transform:rotate(180deg)}

@media (max-width: 520px) {
    .biz-picker-btn { padding: 5px 8px 5px 6px; max-width: 56px; }
    .biz-picker-name { display: none; }
    .biz-picker-caret { display: none; }
}

/* Biz picker dropdown panel */
.biz-picker-panel {
    position:fixed;top:calc(var(--topbar-h) + 6px);left:56px;
    width:260px;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:var(--shadow-xl);z-index:350;
    opacity:0;transform:translateY(-6px) scale(.98);
    transition:opacity .22s var(--ease),transform .22s var(--ease);
    pointer-events:none;
}
.biz-picker-panel.open {opacity:1;transform:none;pointer-events:all}
.biz-picker-search-wrap {
    padding:12px 12px 8px;position:relative;border-bottom:1px solid var(--border-soft);
}
.biz-picker-search-icon {
    position:absolute;left:22px;top:50%;transform:translateY(-50%);
    color:var(--text-3);font-size:.8rem;pointer-events:none;
}
.biz-picker-search {
    width:100%;padding:8px 10px 8px 30px;
    border:1.5px solid var(--border);border-radius:var(--r-sm);
    font-size:.82rem;background:var(--surface-alt);color:var(--text);
    outline:none;transition:border-color .15s;
}
.biz-picker-search:focus {border-color:var(--accent);}
.biz-picker-list {max-height:240px;overflow-y:auto;padding:6px 6px;}
.biz-picker-item {
    width:100%;display:flex;align-items:center;gap:10px;
    padding:9px 10px;border:none;background:none;cursor:pointer;
    border-radius:var(--r-sm);transition:background .13s;text-align:left;
}
.biz-picker-item:hover {background:var(--surface-hover)}
.biz-picker-item.active {background:var(--accent-soft)}
.biz-picker-item-av {
    width:32px;height:32px;border-radius:var(--r-xs);
    background:var(--accent);
    color:#fff;font-size:.8rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0;
}
.biz-picker-item-av img {width:100%;height:100%;object-fit:cover}
.biz-picker-item-info {flex:1;min-width:0;}
.biz-picker-item-name {font-size:.85rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz-picker-item-cat {font-size:.72rem;color:var(--text-3);}
.biz-picker-item-check {color:var(--accent);font-size:1rem;flex-shrink:0}
.biz-picker-footer {
    border-top:1px solid var(--border-soft);padding:8px 10px;
}
.biz-picker-footer button {
    width:100%;display:flex;align-items:center;gap:8px;
    padding:9px 10px;border:none;background:none;cursor:pointer;
    border-radius:var(--r-sm);font-size:.82rem;font-weight:600;
    color:var(--accent);transition:background .13s;
}
.biz-picker-footer button:hover {background:var(--accent-soft)}
.biz-picker-empty {
    display:flex;align-items:center;gap:8px;padding:16px 10px;
    color:var(--text-3);font-size:.82rem;
}

/* ══════════════ Country Flag in Topbar ═════════════ */
.topbar-flag {
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:var(--r-xs);
    background:var(--surface-alt);border:1px solid var(--border-soft);
    overflow:hidden;cursor:default;flex-shrink:0;
}
.topbar-flag img {width:22px;height:auto;display:block;border-radius:2px;}

/* Quick-add button highlight */
.topbar-quick-add {
    background:var(--accent) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 2px 8px rgba(16,185,129,.35);
}
.topbar-quick-add:hover {
    filter:brightness(1.07);
    box-shadow:0 4px 14px rgba(16,185,129,.4);
    transform:translateY(-1px);
}

/* ══════════════ Quick Actions Panel ════════════════ */
.panel-overlay {
    position:fixed;inset:0;z-index:299;
    background:rgba(15,23,42,.28);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.quick-actions-panel {
    position:fixed;top:calc(var(--topbar-h) + 6px);right:10px;
    width:min(320px, calc(100vw - 20px));
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-xl);box-shadow:var(--shadow-xl);
    z-index:350;padding:0 0 4px;
    max-height:calc(100dvh - var(--topbar-h) - 16px);
    overflow:hidden;
    opacity:0;transform:translateY(-8px) scale(.97);
    transition:opacity .22s var(--ease),transform .22s var(--ease);
    pointer-events:none;
}
.quick-actions-panel.open {opacity:1;transform:none;pointer-events:all}
.qa-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px 8px;border-bottom:1px solid var(--border-soft);
}
.qa-title {font-size:.85rem;font-weight:700;color:var(--text);letter-spacing:.01em;text-transform:uppercase;}
.qa-close {
    background:var(--surface-alt);border:1px solid var(--border-soft);
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:.8rem;color:var(--text-2);
    transition:all .15s;
}
.qa-close:hover {background:var(--border-soft);color:var(--text)}
.qa-grid {
    display:grid;grid-template-columns:1fr 1fr;
    gap:6px;padding:10px 10px 6px;
}
.qa-menu-list {
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:6px;
    max-height:calc(100dvh - var(--topbar-h) - 70px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}
.qa-item {
    display:flex;flex-direction:column;align-items:center;gap:7px;
    padding:14px 8px;border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);background:var(--surface-alt);
    cursor:pointer;transition:all .15s var(--ease);
    font-size:.76rem;font-weight:700;color:var(--text-2);
    text-align:center;
}
.qa-menu-list .qa-item {
    flex-direction:row;
    justify-content:flex-start;
    width:100%;
    min-height:38px;
    padding:7px 9px;
    border:0;
    border-radius:var(--r-md);
    background:transparent;
    color:var(--text);
    font-size:.8rem;
    text-align:left;
    gap:8px;
}
.qa-menu-list .qa-item i {
    width:29px;
    height:29px;
    border-radius:10px;
    background:var(--surface-alt);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.92rem;
    flex-shrink:0;
}
.qa-menu-list .qa-item:hover {
    background:var(--surface-hover);
    box-shadow:none;
}
.qa-menu-list .qa-item.qa-primary {
    grid-column:auto;
    background:var(--accent-soft);
    border:0;
    color:var(--text);
    box-shadow:none;
    padding:7px 9px;
}
.qa-menu-list .qa-item.qa-primary i {
    background:var(--accent);
    color:#fff;
}
.qa-menu-list .qa-sale i {background:rgba(16,185,129,.14);color:#059669;}
.qa-menu-list .qa-product i {background:rgba(37,99,235,.12);color:#2563eb;}
.qa-menu-list .qa-expense i {background:rgba(220,38,38,.11);color:#dc2626;}
.qa-menu-list .qa-purchase i {background:rgba(217,119,6,.13);color:#d97706;}
.qa-menu-list .qa-customer i {background:rgba(124,58,237,.12);color:#7c3aed;}
.qa-menu-list .qa-team i {background:rgba(14,165,233,.12);color:#0284c7;}
.qa-menu-list .qa-storefront i {background:rgba(79,70,229,.12);color:#4f46e5;}
.qa-menu-list .qa-whatsapp i {background:rgba(37,211,102,.16);color:#128c4a;}
.qa-item i {font-size:1.35rem;color:var(--text-2);transition:transform .18s var(--ease-spring)}
.qa-item:hover {background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:var(--shadow-xs)}
.qa-item:hover i {transform:scale(1.15) translateY(-1px)}
.qa-item.qa-primary {
    background:var(--accent);
    border-color:transparent;color:#fff;
    box-shadow:0 4px 12px rgba(16,185,129,.28);
    grid-column:span 2;flex-direction:row;gap:10px;padding:14px 16px;
}
.qa-item.qa-primary i {color:#fff;font-size:1.1rem;}
.qa-item.qa-primary:hover {filter:brightness(1.05);transform:none;box-shadow:0 6px 18px rgba(16,185,129,.35)}

.notifications-menu-panel {
    position:fixed;
    top:calc(var(--topbar-h) + 6px);
    right:10px;
    width:min(360px, calc(100vw - 20px));
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    box-shadow:var(--shadow-xl);
    z-index:350;
    padding:0 0 8px;
    opacity:0;
    transform:translateY(-8px) scale(.97);
    transition:opacity .22s var(--ease),transform .22s var(--ease);
    pointer-events:none;
    overflow:hidden;
}

.team-stats-grid {
    font-family:inherit;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
    gap:10px;
    margin:12px 0 14px;
}
.team-stat {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
}
.team-stat i {
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-alt);
    color:var(--accent);
}
.team-stat b {display:block;font-size:1.2rem;color:var(--text);line-height:1}
.team-stat span {display:block;margin-top:3px;font-size:.76rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.team-stat-green i {background:rgba(16,185,129,.12);color:#059669}
.team-stat-red i {background:rgba(239,68,68,.12);color:#dc2626}
.team-stat-amber i {background:rgba(245,158,11,.14);color:#d97706}
.team-stat-blue i {background:rgba(59,130,246,.12);color:#2563eb}
.badge-gray {background:var(--surface-alt);color:var(--text-3);border:1px solid var(--border-soft)}
.team-panel {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.team-panel-title {
    margin:10px 0 0;
    font-size:.78rem;
    font-weight:700;
    color:var(--text-3);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.hr-report-layout {
    display:grid;
    grid-template-columns:minmax(0,420px) minmax(0,1fr);
    gap:14px;
    align-items:start;
}
.crm-report-layout {
    display:grid;
    grid-template-columns:minmax(0,420px) minmax(0,1fr);
    gap:14px;
    align-items:start;
}
.hr-report-layout .team-panel {
    min-width:0;
}
.crm-report-layout .card {
    min-width:0;
}
.hr-report-layout .data-item-left {
    min-width:0;
}
.crm-report-layout .data-item-left {
    min-width:0;
}
.team-member-card {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
}
.team-member-card.is-suspended {background:rgba(239,68,68,.035)}
.team-avatar {
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:rgba(16,185,129,.12);
    color:var(--accent);
    font-weight:700;
}
.team-avatar-amber {background:rgba(245,158,11,.14);color:#d97706}
.team-member-main {min-width:0;flex:1}
.team-member-title {font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-member-sub {margin-top:3px;font-size:.8rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-actions,.team-role-actions {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.team-role-toolbar {
    display:flex;
    justify-content:flex-end;
    margin-bottom:12px;
}
.team-roles-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
    gap:12px;
}
.team-role-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
}
.team-role-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.team-role-title {font-weight:700;color:var(--text)}
.team-role-meta {margin-top:4px;font-size:.78rem;color:var(--text-3)}
.team-role-chips {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.team-role-chips span {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    background:var(--surface-alt);
    color:var(--text-2);
    font-size:.72rem;
    font-weight:700;
}
.role-modal-form {max-height:min(72dvh,620px);overflow-y:auto;padding-right:2px}
.role-permission-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.role-permission-group {
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    overflow:hidden;
}
.role-permission-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    background:var(--surface-alt);
    cursor:pointer;
    font-weight:700;
}
.role-permission-head span {
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-business-shell {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.admin-business-header {
    align-items:flex-start;
    margin-bottom:4px;
}
.admin-business-subtitle {
    margin-top:6px;
    color:var(--text-3);
    font-size:.86rem;
    max-width:720px;
}
.admin-business-header-actions,
.admin-business-actions,
.admin-business-modal-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.admin-business-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
    gap:10px;
}
.admin-business-toolbar {
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(140px,180px) minmax(140px,180px);
    gap:10px;
    align-items:center;
}
.admin-business-toolbar .search-bar {
    margin:0;
}
.admin-business-toolbar select {
    min-height:44px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text);
    font-weight:700;
    padding:0 12px;
}
.admin-business-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.admin-business-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:14px;
    background:var(--surface);
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-xs);
    transition:box-shadow .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);
}
.admin-business-card:hover {
    border-color:var(--border);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
}
.admin-business-main {
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}
.admin-business-avatar {
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:var(--accent-soft);
    color:var(--accent-2);
    font-weight:700;
}
.admin-business-avatar.large {
    width:52px;
    height:52px;
    border-radius:14px;
    font-size:1.12rem;
}
.admin-business-copy {
    min-width:0;
    flex:1;
}
.admin-business-title-row {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex-wrap:wrap;
}
.admin-business-name {
    font-weight:700;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.admin-business-meta,
.admin-business-metrics {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:6px;
    color:var(--text-3);
    font-size:.78rem;
    font-weight:700;
}
.admin-business-meta span,
.admin-business-metrics span {
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.admin-business-metrics b {
    color:var(--text-2);
}
.admin-business-detail-head {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.admin-business-detail-title {
    font-weight:700;
    color:var(--text);
}
.admin-business-detail-sub {
    margin-top:3px;
    color:var(--text-3);
    font-size:.8rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.admin-business-modal-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:14px 0;
}
.admin-business-modal-grid div,
.admin-business-owner-box {
    border:1px solid var(--border-soft);
    background:var(--surface-alt);
    border-radius:var(--r-md);
}
.admin-business-modal-grid div {
    padding:12px;
    text-align:center;
}
.admin-business-modal-grid b {
    display:block;
    color:var(--text);
    font-weight:700;
    line-height:1.15;
}
.admin-business-modal-grid span,
.admin-business-owner-box span {
    display:block;
    margin-top:4px;
    color:var(--text-3);
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.admin-business-owner-box {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    overflow:hidden;
    margin-bottom:14px;
}
.admin-business-owner-box div {
    padding:12px;
    min-width:0;
}
.admin-business-owner-box div+div {
    border-left:1px solid var(--border-soft);
}
.admin-business-owner-box strong {
    display:block;
    margin-top:4px;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.admin-business-deleted-note {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    padding:12px;
    border-radius:var(--r-md);
    background:var(--red-soft);
    color:#b91c1c;
    font-weight:700;
    font-size:.84rem;
}

.admin-users-shell {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.admin-users-header {
    align-items:flex-start;
    margin-bottom:4px;
}
.admin-users-subtitle {
    margin-top:6px;
    color:var(--text-3);
    font-size:.86rem;
    max-width:720px;
}
.admin-users-header-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.admin-users-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
    gap:10px;
}
.admin-users-message-panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
}
.admin-users-panel-title {
    color:var(--text);
    font-weight:700;
}
.admin-users-panel-sub {
    margin-top:4px;
    color:var(--text-3);
    font-size:.84rem;
}
.admin-users-toolbar {
    display:grid;
    grid-template-columns:minmax(230px,1fr) minmax(120px,160px) minmax(130px,170px) minmax(130px,170px);
    gap:10px;
    align-items:center;
}
.admin-users-toolbar .search-bar {margin:0}
.admin-users-toolbar select {
    min-height:44px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text);
    font-weight:700;
    padding:0 12px;
}
.admin-users-selection-bar {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:10px 12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface-alt);
    color:var(--text-2);
    font-size:.84rem;
    font-weight:700;
}
.admin-users-selection-bar label {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
}
.admin-users-selection-bar input,
.admin-user-select input {
    width:17px;
    height:17px;
    accent-color:var(--accent);
}
.admin-pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text-2);
    font-size:.84rem;
    font-weight:700;
}
.admin-pagination-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.admin-pagination-actions span {
    color:var(--text-3);
    font-size:.78rem;
}
.admin-pagination button:disabled {
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}
.admin-users-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.admin-user-card {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px;
    background:var(--surface);
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-xs);
    transition:box-shadow .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);
}
.admin-user-card:hover {
    border-color:var(--border);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
}
.admin-user-select {
    display:flex;
    align-items:center;
    margin:0;
}
.admin-user-main {
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}
.admin-user-avatar {
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:var(--indigo-soft);
    color:var(--indigo);
    font-weight:700;
}
.admin-user-avatar.large {
    width:54px;
    height:54px;
    border-radius:15px;
    font-size:1.15rem;
}
.admin-user-copy {
    min-width:0;
    flex:1;
}
.admin-user-title-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
}
.admin-user-name {
    color:var(--text);
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.admin-user-meta {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:6px;
    color:var(--text-3);
    font-size:.78rem;
    font-weight:700;
}
.admin-user-meta span {
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.admin-user-side {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
.admin-user-profile-pill {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:700;
    white-space:nowrap;
}
.admin-user-profile-pill.is-complete {
    background:var(--green-soft);
    color:var(--accent-2);
}
.admin-user-profile-pill.is-incomplete {
    background:var(--amber-soft);
    color:#b45309;
}
.admin-user-modal-head {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.admin-user-modal-name {
    color:var(--text);
    font-weight:700;
}
.admin-user-modal-sub {
    margin-top:3px;
    color:var(--text-3);
    font-size:.82rem;
}
.admin-user-modal-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
.admin-user-modal-grid div {
    padding:12px;
    text-align:center;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface-alt);
}
.admin-user-modal-grid b {
    display:block;
    color:var(--text);
    font-weight:700;
    line-height:1.2;
}
.admin-user-modal-grid span {
    display:block;
    margin-top:4px;
    color:var(--text-3);
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

@media (max-width: 760px) {
    .admin-business-toolbar,
    .admin-business-card,
    .admin-users-toolbar,
    .admin-user-card {
        grid-template-columns:1fr;
    }
    .admin-business-actions,
    .admin-user-side {
        justify-content:flex-start;
    }
    .admin-users-message-panel {
        align-items:flex-start;
        flex-direction:column;
    }
    .admin-business-modal-grid,
    .admin-business-owner-box,
    .admin-user-modal-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .admin-business-owner-box div+div {
        border-left:0;
        border-top:1px solid var(--border-soft);
    }
    .admin-business-detail-head {
        grid-template-columns:auto minmax(0,1fr);
    }
    .admin-business-detail-head .badge {
        grid-column:1 / -1;
        justify-self:start;
    }
}
.role-permission-actions {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:4px 10px;
    padding:10px 12px 12px;
}
.role-permission-actions label {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:30px;
    font-size:.83rem;
    font-weight:700;
    color:var(--text-2);
    cursor:pointer;
}
.role-permission-actions input,.role-permission-head input {accent-color:var(--accent)}

/* ── /payments: totals, and one payment in full ──────────────────────────── */
.pay-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
    margin:0 0 12px;
}
.pay-stat {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
}
.pay-stat-ic {
    flex:none;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:color-mix(in srgb, var(--c) 14%, transparent);
    color:var(--c);
    font-size:1rem;
}
.pay-stat-body {min-width:0}
.pay-stat-value {font-weight:800;color:var(--text-1);font-size:1.02rem;line-height:1.2}
.pay-stat-label {font-size:.78rem;color:var(--text-2);font-weight:600;margin-top:1px}
.pay-stat-sub {font-size:.72rem;color:var(--text-3);margin-top:1px}
.pay-stat-note {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.78rem;
    color:var(--text-3);
    margin:-4px 0 12px;
}
.pay-row:focus-visible {outline:2px solid var(--accent);outline-offset:2px}

.pay-detail-head {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pay-detail-amount {font-size:1.5rem;font-weight:800;color:var(--text-1)}
.pay-detail-title {font-weight:700;color:var(--text-2);margin:2px 0 12px}
.pay-detail-rows {display:flex;flex-direction:column;gap:1px;background:var(--border-soft);border-radius:var(--r-md);overflow:hidden}
.pay-detail-row {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:9px 12px;
    background:var(--surface);
    font-size:.83rem;
}
.pay-detail-row span {color:var(--text-3);font-weight:600;flex:none}
.pay-detail-row b {color:var(--text-1);text-align:right;word-break:break-word;min-width:0}
.pay-detail-ref {font-family:Consolas,ui-monospace,monospace;font-size:.78rem}
.pay-detail-actions {display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pay-detail-note {
    font-size:.8rem;
    color:var(--text-3);
    line-height:1.45;
    padding:10px 12px;
    border-radius:var(--r-md);
    background:var(--surface-alt);
}

/* ── Staff Management: business picker ───────────────────────────────────────
   One card per business, one column on a phone, two on a tablet, three from
   desktop up. Capped at three deliberately — auto-fill would keep adding
   columns on a wide monitor and the cards would stop being readable. */
.admin-biz-toolbar {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.admin-biz-toolbar .search-bar {flex:1 1 220px;margin:0}
.admin-biz-toolbar select {
    flex:0 0 auto;
    min-height:42px;
    padding:0 12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text-1);
    font-weight:600;
    font-size:.85rem;
}
.admin-biz-count {font-size:.8rem;color:var(--text-3);margin-bottom:10px}
.admin-biz-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
.admin-biz-card {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
}
.admin-biz-card-head {display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.admin-biz-card-title {
    font-weight:700;
    color:var(--text-1);
    line-height:1.3;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.admin-biz-card-owner {font-size:.82rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-biz-card-stats {display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.78rem;color:var(--text-3);font-weight:600}
.admin-biz-card-stats span {display:inline-flex;align-items:center;gap:5px}
.admin-biz-card-stats .has-staff {color:var(--accent)}
.admin-biz-card-stats .no-staff {color:var(--text-3)}
.admin-biz-card .btn-block {margin-top:auto}
.admin-biz-pager {display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:16px}
.admin-biz-pager-gap {color:var(--text-3);padding:0 2px}

@media (min-width:640px) {
    .admin-biz-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px) {
    .admin-biz-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Platform staff role editor: every action carries a line of explanation, so the
   rows are two-line and the grid is wider than the one-line business rows. */
.role-permission-actions label.perm-rich {
    align-items:flex-start;
    min-height:0;
    padding:5px 0;
    font-weight:600;
}
.role-permission-actions label.perm-rich input {margin-top:3px;flex:none}
.role-permission-actions label.perm-rich strong {color:var(--text-1);font-weight:700}
.role-permission-actions label.perm-rich small {font-weight:500;color:var(--text-3);line-height:1.35}
.platform-perm-group .role-permission-actions {grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.platform-group-desc {font-weight:500;color:var(--text-3);font-size:.78rem}
.platform-group-toggle {display:flex;align-items:center;gap:8px;white-space:nowrap}
.platform-group-count {color:var(--text-3);font-weight:600;font-size:.75rem}
.platform-perm-toolbar {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.platform-perm-toolbar .search-bar {flex:1 1 200px;margin:0}
.platform-perm-total {font-size:.8rem;color:var(--text-3);margin-bottom:8px}
.platform-template-row {display:flex;gap:8px;flex-wrap:wrap}
.platform-biz-detail {padding:0 12px 12px}
.platform-biz-detail > summary {cursor:pointer;font-size:.82rem;color:var(--text-3);padding:8px 0}

@media (max-width:640px) {
    .platform-perm-group .role-permission-actions {grid-template-columns:1fr}
}

@media (max-width:640px) {
    .hr-tab-bar {
        flex-wrap:wrap;
        overflow:visible;
    }
    .hr-tab-bar button {
        flex:1 1 calc(50% - 6px);
        min-width:0;
        white-space:normal;
        line-height:1.2;
    }
    .hr-report-layout {
        grid-template-columns:minmax(0,1fr);
        gap:12px;
    }
    .crm-report-layout {
        grid-template-columns:minmax(0,1fr);
        gap:12px;
    }
    .hr-report-date-row {
        grid-template-columns:minmax(0,1fr);
        gap:10px;
    }
    .crm-report-date-row {
        grid-template-columns:minmax(0,1fr);
        gap:10px;
    }
    .team-member-card {align-items:flex-start;flex-wrap:wrap}
    .team-member-main {flex-basis:calc(100% - 54px)}
    .team-actions {width:100%;justify-content:flex-start;padding-left:54px}
    .team-roles-grid {grid-template-columns:1fr}
    .role-permission-actions {grid-template-columns:1fr}
}
.notifications-menu-panel.open {opacity:1;transform:none;pointer-events:all}
.notifications-menu-list {
    max-height:min(58dvh, 430px);
    overflow-y:auto;
    padding:8px;
}
.notif-menu-loading,
.notif-menu-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:132px;
    color:var(--text-3);
    font-weight:700;
    text-align:center;
}
.notif-menu-empty i,
.notif-menu-loading i {font-size:1.5rem;color:var(--accent)}
.notif-menu-empty small {font-size:.76rem;font-weight:650;color:var(--text-3)}
.notif-menu-item {
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:10px;
    position:relative;
    border:0;
    background:transparent;
    border-radius:var(--r-md);
    padding:10px;
    text-align:left;
    cursor:pointer;
    transition:background .15s var(--ease), transform .15s var(--ease);
}
.notif-menu-item:hover {background:var(--surface-hover)}
.notif-menu-item:active {transform:scale(.985)}
.notif-menu-item.unread {background:rgba(16,185,129,.055)}
.notif-menu-icon {
    width:36px;
    height:36px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.notif-menu-copy {display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.notif-menu-title {
    color:var(--text);
    font-weight:700;
    font-size:.86rem;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.notif-menu-text {
    color:var(--text-2);
    font-size:.78rem;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.notif-menu-time {color:var(--text-3);font-size:.7rem;font-weight:700;margin-top:1px}
.notif-menu-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    margin-top:6px;
    flex-shrink:0;
}
.notif-menu-view-all {
    width:calc(100% - 16px);
    min-height:42px;
    margin:0 8px;
    padding:10px 12px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface-alt);
    color:var(--accent-2);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    transition:background .15s var(--ease), border-color .15s var(--ease);
}
.notif-menu-view-all:hover {background:var(--accent-soft);border-color:var(--accent-ring)}

/* ══════════════ Business Context Sheet ═════════════ */
.biz-ctx-sheet-panel {
    position:fixed;bottom:0;left:0;right:0;z-index:350;
    max-width:480px;margin:0 auto;
    background:var(--surface);
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow:0 -20px 60px -10px rgba(15,23,42,.25);
    transform:translateY(100%);transition:transform .32s var(--ease-out);
    padding-bottom:max(var(--safe-b),env(safe-area-inset-bottom,16px));
}
.biz-ctx-sheet-panel.open {transform:translateY(0)}
.biz-ctx-biz-header {
    display:flex;align-items:center;gap:14px;
    padding:20px 20px 16px;
    border-bottom:1px solid var(--border-soft);
}
.biz-ctx-logo {
    width:52px;height:52px;border-radius:var(--r-md);
    background:var(--accent);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0;
    box-shadow:0 4px 12px rgba(16,185,129,.22);
}
.biz-ctx-logo-img {width:100%;height:100%;object-fit:cover}
.biz-ctx-logo-initial {color:#fff;font-size:1.4rem;font-weight:700;}
.biz-ctx-biz-info {flex:1;min-width:0;}
.biz-ctx-biz-name {font-size:1rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz-ctx-biz-cat {font-size:.78rem;color:var(--text-3);margin-top:2px;}
.biz-ctx-close {
    background:var(--surface-alt);border:1px solid var(--border-soft);
    width:34px;height:34px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:.88rem;color:var(--text-2);transition:all .15s;
}
.biz-ctx-close:hover {background:var(--border-soft);color:var(--text)}
.biz-ctx-menu {padding:10px 12px 6px;display:flex;flex-direction:column;gap:4px;}
.biz-ctx-menu-item {
    width:100%;display:flex;align-items:center;gap:14px;
    padding:13px 12px;border:none;background:none;cursor:pointer;
    border-radius:var(--r-md);transition:background .15s;text-align:left;
}
.biz-ctx-menu-item:hover {background:var(--surface-hover)}
.biz-ctx-menu-icon {
    width:40px;height:40px;border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;flex-shrink:0;
}
.biz-ctx-menu-label {font-size:.88rem;font-weight:700;color:var(--text);}
.biz-ctx-menu-sub {font-size:.74rem;color:var(--text-3);margin-top:1px;}

/* ══════════════ Dashboard Business Card ════════════ */
.dash-biz-card {
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;margin-bottom:16px;
    background:var(--surface);border:1.5px solid var(--border-soft);
    border-radius:var(--r-xl);cursor:pointer;
    transition:all .16s var(--ease);
    box-shadow:0 1px 4px rgba(15,23,42,.04);
}
.dash-biz-card:hover {border-color:var(--accent-ring);box-shadow:0 4px 16px rgba(16,185,129,.10);}
.dash-biz-logo {
    width:44px;height:44px;border-radius:var(--r-md);
    background:var(--accent);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0;
    box-shadow:0 3px 8px rgba(16,185,129,.2);
}
.dash-biz-logo-img {width:100%;height:100%;object-fit:cover}
.dash-biz-logo-initial {color:#fff;font-size:1.2rem;font-weight:700;}
.dash-biz-info {flex:1;min-width:0;}
.dash-biz-name {font-size:.92rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-biz-sub {font-size:.74rem;color:var(--text-3);margin-top:1px;}
.dash-biz-actions {display:flex;align-items:center;gap:6px;}
.dash-biz-caret {color:var(--text-3);font-size:.75rem;transition:transform .2s}
.dash-biz-card:hover .dash-biz-caret {transform:translateY(2px)}

/* ══════════════ Notification Improvements ══════════ */
.notif-unread {
    background:var(--accent-soft) !important;
    border-left:3px solid var(--accent) !important;
}
.notif-dot {
    width:8px;height:8px;background:var(--accent);
    border-radius:50%;flex-shrink:0;display:inline-block;
}
.notif-icon-wrap {
    width:38px;height:38px;border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;flex-shrink:0;margin-right:2px;
}
.notif-icon-wrap.badge-amber {background:var(--amber-soft);color:var(--amber)}
.notif-icon-wrap.badge-green {background:var(--green-soft);color:var(--green)}
.notif-icon-wrap.badge-blue {background:var(--blue-soft);color:var(--blue)}
.notif-icon-wrap.badge-red {background:var(--red-soft);color:var(--red)}
.notif-preview {
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:230px;font-size:.8rem;
}
.ann-detail-body {padding:4px 0 16px}
.ann-detail-meta {
    display:flex;align-items:center;gap:10px;margin-bottom:14px;
    padding-bottom:12px;border-bottom:1px solid var(--border-soft);
}
.ann-detail-message {
    font-size:.93rem;line-height:1.65;color:var(--text);
    white-space:pre-wrap;word-break:break-word;
}

/* ══════════════ Sidebar ════════════════════════════ */
.sidebar {
    position:fixed;top:0;left:-100%;bottom:0;
    width:var(--sidebar-w);background:var(--surface);
    z-index:250;transition:left .3s var(--ease-out);
    display:flex;flex-direction:column;
    box-shadow:var(--shadow-xl);
}
.sidebar.open {left:0}
.sidebar-overlay {
    position:fixed;inset:0;background:rgba(15,23,42,.4);
    z-index:249;opacity:0;visibility:hidden;
    transition:all .25s var(--ease);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.sidebar-overlay.open {opacity:1;visibility:visible}
.sidebar-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 22px 18px;border-bottom:1px solid var(--border-soft);
}
.sidebar-logo {
    font-family:var(--font-display);font-size:1.15rem;font-weight:600;
    color:var(--primary);letter-spacing:-.03em;
}
.sidebar-logo span {
    background:var(--accent);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sidebar-close {
    background:var(--surface-alt);border:1px solid var(--border-soft);font-size:1rem;
    color:var(--text-2);cursor:pointer;width:34px;height:34px;border-radius:var(--r-full);
    display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.sidebar-close:hover {background:var(--border-light);color:var(--text)}
.sidebar-nav {flex:1;overflow-y:auto;padding:14px 10px 20px;scrollbar-width:thin}
.nav-item {
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;border-radius:var(--r-sm);
    color:var(--text-2);text-decoration:none;
    font-size:.9rem;font-weight:500;transition:all .15s var(--ease);
    margin-bottom:2px;position:relative;
}
.nav-item i {font-size:1.05rem;width:20px;text-align:center;opacity:.75;flex-shrink:0}
.nav-item:hover {background:var(--surface-hover);color:var(--text)}
.nav-item.active {
    background:linear-gradient(90deg,var(--accent-soft),transparent);
    color:var(--accent-2);font-weight:600;
}
.nav-item.active i {opacity:1;color:var(--accent-2)}
.nav-item.active::before {
    content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;
    background:var(--accent);border-radius:0 3px 3px 0;
}
.nav-subitem {padding:9px 14px 9px 44px;font-size:.86rem}
.nav-subitem.active::before {display:none}
.nav-group {
    border-radius:var(--r-md);
    margin:4px 6px;overflow:hidden;
    border:1px solid transparent;
    background:transparent;
    transition:all .18s var(--ease);
}
.nav-group[open] {background:var(--surface-alt);border-color:var(--border-soft)}
.nav-group.active-group,
.nav-group.active-group[open] {
    border-color:var(--accent-ring);
    background:linear-gradient(180deg,var(--accent-soft),transparent);
    box-shadow:0 4px 12px rgba(16,185,129,.08);
}
.nav-group-summary {
    list-style:none;
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;cursor:pointer;
    color:var(--text);font-size:.9rem;font-weight:600;
    transition:background .15s var(--ease);border-radius:var(--r-md);
}
.nav-group-summary:hover {background:var(--surface-hover)}
.nav-group[open] .nav-group-summary {background:transparent}
.nav-group.active-group .nav-group-summary {color:var(--accent-2)}
.nav-group.active-group .nav-group-summary i {opacity:1;color:var(--accent-2)}
.nav-group-summary::-webkit-details-marker {display:none}
.nav-group-summary i {font-size:1.05rem;width:20px;text-align:center;opacity:.75;flex-shrink:0}
.nav-group-caret {
    margin-left:auto;opacity:.55;
    transition:transform .2s var(--ease);font-size:.8rem!important;
}
.nav-group[open] .nav-group-caret {transform:rotate(180deg)}
.nav-group-body {padding:4px 0 8px}

.info-banner {
    border:1px solid rgba(59,130,246,.2);
    background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(99,102,241,.05));
    border-radius:var(--r-lg);padding:14px 16px;
    display:flex;gap:12px;align-items:flex-start;
    color:var(--primary);margin-bottom:14px;
}
.info-banner i {color:var(--blue);font-size:1.2rem;margin-top:1px;flex-shrink:0}
.info-banner-title {font-weight:700;margin-bottom:2px;font-size:.92rem}
.info-banner-sub {color:var(--text-2);font-size:.85rem;line-height:1.5}

.nav-section {
    padding:14px 14px 8px;
    font-size:.7rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--text-3);
}
.nav-divider {height:1px;background:var(--border-soft);margin:10px 14px}
.sidebar-footer {
    padding:14px 20px calc(14px + var(--safe-b));
    border-top:1px solid var(--border-soft);
    background:var(--surface-alt);
    flex-shrink:0;
}
.sidebar-signout {
    display:flex;align-items:center;gap:10px;width:100%;
    padding:10px 14px;border-radius:var(--r-sm);
    font-size:.9rem;font-weight:600;cursor:pointer;
    color:#ef4444;border:1.5px solid #ef4444;
    background:transparent;transition:all .15s var(--ease);
}
.sidebar-signout:hover {background:rgba(239,68,68,.08);border-color:#dc2626;color:#dc2626}
.sidebar-plan-row {
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:7px 10px;margin-bottom:8px;border-radius:8px;
    background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.18);
}
.sidebar-plan-name {
    font-size:.75rem;font-weight:600;color:#4338ca;
    display:flex;align-items:center;gap:5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-plan-name .bi {font-size:.8rem;color:var(--indigo);}
.sidebar-plan-btn {
    font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:20px;
    background:#6366f1;color:#fff;border:none;cursor:pointer;
    white-space:nowrap;flex-shrink:0;transition:background .15s;
}
.sidebar-plan-btn:hover {background:#4f46e5;}

/* ══════════════ Bottom Nav ═════════════════════════ */
.bottom-nav {
    position:fixed;bottom:0;left:0;right:0;
    /* generous safe-area fallback: 20px for notched phones without env() support */
    height:calc(var(--bnav-h) + max(var(--safe-b), env(safe-area-inset-bottom, 20px)));
    padding:0 4px;
    padding-bottom:max(var(--safe-b), env(safe-area-inset-bottom, 20px));
    background:rgba(255,255,255,.95);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--divider);
    display:flex;justify-content:space-around;align-items:center;
    z-index:200; /* raised above modals backdrop for reliable tap */
    box-shadow:0 -4px 24px -4px rgba(15,23,42,.10);
    /* ensure items never get squeezed below minimum tap area */
    min-height:calc(60px + max(var(--safe-b), env(safe-area-inset-bottom, 20px)));
}
/* Push page content up so nothing hides behind nav */
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav { height: calc(var(--bnav-h) + 20px); padding-bottom: 20px; }
    .page-content { padding-bottom: calc(var(--bnav-h) + 20px + 22px) !important; }
}
.bnav-item {
    display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;color:var(--text-3);
    font-size:.66rem;font-weight:600;cursor:pointer;
    padding:6px 10px;transition:all .18s var(--ease);
    border-radius:var(--r-sm);position:relative;
    flex:1;min-width:0;max-width:80px;
    min-height:clamp(38px,10vw,44px);/* compact touch target */
}
.nav-badge {
    position:absolute;top:6px;right:10px;
    min-width:16px;height:16px;padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:var(--surface);font-size:.65rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 4px rgba(239,68,68,.3);
}
.bottom-nav .nav-badge {top:3px;right:14px}
.bnav-item i {font-size:clamp(1.05rem,4.2vw,1.22rem);transition:transform .22s var(--ease-spring)}
.bnav-item:hover {color:var(--text-2)}
.bnav-item.active {color:var(--accent-2)}
.bnav-item.active i {transform:scale(1.12) translateY(-1px)}
.bnav-item.active::before {
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;
    background:var(--accent);
    border-radius:0 0 3px 3px;
}

/* ══════════════ Page Content ═══════════════════════ */
.page-content {
    margin-top:var(--topbar-h);
    padding:22px 16px calc(var(--bnav-h) + max(var(--safe-b), env(safe-area-inset-bottom, 20px)) + 28px);
    min-height:calc(100dvh - var(--topbar-h));
    animation:fadeUp .35s var(--ease-out);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════ Cards ══════════════════════════════ */
.card {
    background:var(--surface);border-radius:var(--r-lg);
    padding:20px;box-shadow:var(--shadow-sm);
    border:1px solid var(--border-soft);
    transition:all .2s var(--ease);
    position:relative;
}
.card:hover {box-shadow:var(--shadow-md);border-color:var(--border)}
.card-title {
    font-size:.72rem;font-weight:700;color:var(--text-3);
    text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;
}
.card-value {
    font-family:var(--font-display);font-size:1.75rem;font-weight:700;
    color:var(--text);letter-spacing:-.025em;line-height:1.1;
}
.card-sub {font-size:.78rem;color:var(--text-3);margin-top:6px;font-weight:500;display:flex;align-items:center;gap:4px}
.card-sub.up {color:var(--accent-2)}
.card-sub.down {color:var(--red)}

.stat-grid {
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:12px;margin-bottom:22px;
}
.stat-card {position:relative;overflow:hidden}
.stat-card::after {
    content:'';position:absolute;top:-20px;right:-20px;
    width:80px;height:80px;border-radius:50%;opacity:.06;
}
.stat-icon {
    position:absolute;top:16px;right:16px;
    width:42px;height:42px;border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:1.05rem;
}
.stat-icon.teal {background:var(--accent-soft);color:var(--accent-2)}
.stat-icon.amber {background:var(--amber-soft);color:var(--amber)}
.stat-icon.red {background:var(--red-soft);color:var(--red)}
.stat-icon.blue {background:var(--blue-soft);color:var(--blue)}
.stat-icon.green {background:var(--green-soft);color:var(--green)}
.stat-icon.violet {background:var(--violet-soft);color:var(--violet)}
.stat-icon.indigo {background:var(--indigo-soft);color:var(--indigo)}

/* ══════════════ Packages ═══════════════════════════ */
.packages-grid {display:flex;flex-direction:column;gap:14px}
.package-card {
    background:var(--surface);border-radius:var(--r-lg);
    padding:26px;border:1.5px solid var(--border);
    transition:all .22s var(--ease);cursor:pointer;
    position:relative;
}
.package-card:hover {
    border-color:var(--accent);
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}
.package-card.popular {
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent),var(--shadow-md);
    background:
        linear-gradient(180deg,var(--accent-soft),transparent 40%),
        var(--surface);
}
.package-card.popular::before {
    content:'★ Most Popular';display:inline-block;
    background:var(--accent);
    color:var(--text-inv);
    font-size:.7rem;font-weight:700;padding:5px 14px;
    border-radius:var(--r-full);margin-bottom:14px;letter-spacing:.02em;
    box-shadow:0 4px 12px rgba(16,185,129,.3);
}
.package-name {font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text);letter-spacing:-.01em}
.package-price {
    font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--text);
    margin:10px 0;letter-spacing:-.03em;line-height:1;
}
.package-price span {font-size:.85rem;font-weight:500;color:var(--text-3)}
.package-features {list-style:none;padding:0;margin:18px 0}
.package-features li {
    padding:8px 0;font-size:.88rem;color:var(--text-2);
    display:flex;align-items:center;gap:10px;font-weight:500;
    border-bottom:1px solid var(--border-soft);
}
.package-features li:last-child {border-bottom:none}
.package-features li i {color:var(--accent);font-size:.95rem;flex-shrink:0}
.package-features li.disabled {color:var(--text-3);opacity:.55}
.package-features li.disabled i {color:var(--text-3)}

/* ══════════════ Data List ══════════════════════════ */
.data-list {display:flex;flex-direction:column;gap:8px}

/* Settings page: lay out the action items as a responsive card grid.
   Phones = 2 per row (minimum), tablets = 3, larger screens = 4. */
.settings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:560px) {.settings-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:900px) {.settings-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
}
.settings-grid .data-item {flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;height:100%}
.settings-grid .data-item > .bi-chevron-right {display:none}
.settings-grid .data-item-title {white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

.data-item {
    background:var(--surface);border-radius:var(--r-md);
    padding:14px 16px;
    display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;transition:all .15s var(--ease);
    box-shadow:var(--shadow-xs);border:1px solid var(--border-soft);
}
.data-item:hover {
    box-shadow:var(--shadow-md);transform:translateY(-1px);
    border-color:var(--border);
}
.data-item:active {transform:translateY(0)}
.data-item-left {display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.data-item-title {
    font-weight:600;font-size:.92rem;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.data-item-sub {font-size:.78rem;color:var(--text-3);font-weight:500}
.data-item-right {text-align:right;flex-shrink:0;margin-left:12px}
.data-item-amount {
    font-family:var(--font-display);font-weight:700;font-size:1rem;
    color:var(--text);letter-spacing:-.015em;
}

.badge {
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 10px;border-radius:var(--r-full);
    font-size:.7rem;font-weight:700;letter-spacing:.02em;
    line-height:1.5;
}
.badge-green {background:var(--green-soft);color:var(--accent-2);border:1px solid var(--accent-ring)}
.badge-amber {background:var(--amber-soft);color:#b45309;border:1px solid rgba(245,158,11,.25)}
.badge-red {background:var(--red-soft);color:#b91c1c;border:1px solid rgba(239,68,68,.25)}
.badge-blue {background:var(--blue-soft);color:#1d4ed8;border:1px solid rgba(59,130,246,.25)}
.badge-violet {background:var(--violet-soft);color:#6d28d9;border:1px solid rgba(139,92,246,.25)}

/* ══════════════ Page Header ════════════════════════ */
.page-header {
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:22px;gap:12px;flex-wrap:wrap;
}
.page-title {
    font-family:var(--font-display);font-size:1.5rem;
    font-weight:700;color:var(--text);letter-spacing:-.025em;line-height:1.15;
}

/* ══════════════ Modal ══════════════════════════════ */
.modal-overlay {
    position:fixed;inset:0;background:rgba(15,23,42,.48);
    z-index:2500;display:flex;align-items:flex-end;
    justify-content:center;opacity:0;visibility:hidden;
    transition:all .28s var(--ease);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.modal-overlay.open {opacity:1;visibility:visible}
.modal {
    background:var(--surface);
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    width:100%;max-width:560px;max-height:90dvh;
    overflow-y:auto;padding:26px 24px calc(26px + var(--safe-b));
    transform:translateY(100%);transition:transform .38s var(--ease-out);
    box-shadow:0 -20px 60px -10px rgba(15,23,42,.3);
}
.modal-overlay.open .modal {transform:translateY(0)}
.modal-header {
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border-soft);
    position:sticky;top:0;background:var(--surface);padding-top:2px;z-index:2;
}
.modal-title {
    font-family:var(--font-display);font-size:1.15rem;font-weight:700;
    color:var(--text);letter-spacing:-.015em;
}
.modal-close {
    background:var(--surface-alt);border:1px solid var(--border-soft);
    font-size:1rem;color:var(--text-2);cursor:pointer;
    width:36px;height:36px;border-radius:var(--r-full);
    display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.modal-close:hover {background:var(--border-light);color:var(--text)}

/* ══════════════ Help / Info Modals ═════════════════ */
/* Contextual "?" trigger button */
.help-trigger {
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;
    background:var(--surface-alt);border:1px solid var(--border-soft);
    color:var(--text-3);cursor:pointer;font-size:.95rem;
    transition:all .15s;flex-shrink:0;
}
.help-trigger:hover {background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent);}

/* Help modal body */
.modal-help-body {padding-bottom:12px;}
.help-steps {display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.help-step {
    display:flex;align-items:flex-start;gap:14px;
    padding:14px;background:var(--surface-alt);
    border-radius:var(--r-md);border:1px solid var(--border-soft);
}
.help-step-num {
    width:28px;height:28px;border-radius:50%;flex-shrink:0;
    background:var(--accent);
    color:#fff;font-size:.8rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.help-step strong {display:block;font-size:.9rem;color:var(--text);margin-bottom:3px;}
.help-step div:last-child {font-size:.85rem;color:var(--text-2);line-height:1.5;}
.help-note {
    display:flex;align-items:flex-start;gap:10px;
    padding:12px 14px;border-radius:var(--r-sm);
    background:var(--accent-soft);
    font-size:.83rem;color:var(--text-2);line-height:1.55;
}
.help-note i {color:var(--accent);font-size:1rem;margin-top:1px;flex-shrink:0;}
.help-list {
    padding-left:0;margin:0 0 16px;list-style:none;
    display:flex;flex-direction:column;gap:10px;
}
.help-list li {
    padding:10px 14px;background:var(--surface-alt);
    border-radius:var(--r-sm);border:1px solid var(--border-soft);
    font-size:.86rem;color:var(--text-2);line-height:1.5;
}
.help-list li strong {color:var(--text);font-weight:700;}

/* ══════════════ Empty State ════════════════════════ */
.empty-state {
    text-align:center;padding:56px 24px;color:var(--text-3);
    background:var(--surface);border-radius:var(--r-lg);
    border:1px dashed var(--border);
}
.empty-state i {
    font-size:2.8rem;margin-bottom:14px;display:block;
    color:var(--text-3);opacity:.5;
}
.empty-state h3 {
    font-family:var(--font-display);font-size:1.05rem;
    color:var(--text);margin-bottom:6px;font-weight:700;
}
.empty-state p {font-size:.88rem;font-weight:500;max-width:40ch;margin:0 auto}

/* ══════════════ Toast ══════════════════════════════ */
.toast {
    position:fixed;bottom:calc(var(--bnav-h) + var(--safe-b) + 18px);
    left:50%;transform:translateX(-50%) translateY(100px);
    background:var(--primary);color:var(--text-inv);
    padding:12px 22px;border-radius:var(--r-full);
    font-size:.88rem;font-weight:600;z-index:20000;
    opacity:0;transition:all .32s var(--ease-spring);
    white-space:nowrap;box-shadow:var(--shadow-xl);max-width:90%;
    letter-spacing:.005em;
    display:inline-flex;align-items:center;gap:8px;
}
.toast.show {opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error {background:#ef4444}
.toast.success {background:var(--accent)}

/* ══════════════ Search Bar ═════════════════════════ */
.search-bar {
    display:flex;align-items:center;gap:10px;
    background:var(--surface);border:1.5px solid var(--border);
    border-radius:var(--r-sm);padding:0 14px;margin-bottom:16px;
    transition:all .18s var(--ease);box-shadow:var(--shadow-xs);
}
.search-bar:hover {border-color:var(--text-3)}
.search-bar:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
}
.search-bar i {color:var(--text-3);font-size:1rem}
.search-bar input {
    flex:1;border:none;outline:none;padding:12px 0;
    font-size:.92rem;background:transparent;color:var(--text);font-weight:500;
}

/* ══════════════ Product Grid ═══════════════════════ */
.product-grid {
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.product-card {
    background:var(--surface);border-radius:var(--r-md);
    overflow:hidden;cursor:pointer;
    transition:all .22s var(--ease);
    box-shadow:var(--shadow-xs);border:1px solid var(--border-soft);
    display:flex;flex-direction:column;
}
.product-card:hover {
    box-shadow:var(--shadow-lg);
    transform:translateY(-3px);border-color:var(--border);
}
.product-card:active {transform:translateY(0)}
.product-img {
    width:100%;aspect-ratio:1;object-fit:cover;
    background:var(--surface-alt);
}
.product-info {padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.product-name {
    font-weight:600;font-size:.88rem;color:var(--text);line-height:1.4;
    line-clamp:2;-webkit-line-clamp:2;display:-webkit-box;
    -webkit-box-orient:vertical;overflow:hidden;
}
.product-price {
    font-family:var(--font-display);font-size:1rem;font-weight:700;
    color:var(--accent-2);margin-top:4px;letter-spacing:-.015em;
}
.product-store {font-size:.72rem;color:var(--text-3);margin-top:2px;font-weight:500}
.product-stock {
    font-size:.68rem;padding:3px 8px;border-radius:var(--r-full);
    display:inline-block;margin-top:6px;font-weight:700;align-self:flex-start;
}

body.mp2 .product-info {padding:10px 12px;gap:3px}
body.mp2 .product-name {font-size:.82rem}
body.mp2 .product-price {font-size:.92rem}
body.mp2 .product-store {font-size:.68rem}

@media (min-width: 768px) {
    body.mp2 .product-grid {grid-template-columns:repeat(3,1fr)}
}

@media (min-width: 992px) {
    body.mp2 .product-grid {grid-template-columns:repeat(4,1fr);gap:14px}
}

@media (min-width: 1200px) {
    body.mp2 .product-grid {grid-template-columns:repeat(5,1fr)}
}

/* ══════════════ Tab Bar ════════════════════════════ */
.tab-bar {
    display:flex;gap:4px;background:var(--surface-alt);
    border-radius:var(--r-sm);padding:4px;margin-bottom:18px;
    border:1px solid var(--border-soft);
}
.tab-bar button {
    flex:1;padding:9px 14px;border:none;background:transparent;
    font-size:.84rem;font-weight:600;color:var(--text-2);
    cursor:pointer;border-radius:7px;transition:all .2s var(--ease);
}
.tab-bar button:hover {color:var(--text)}
.tab-bar button.active {
    background:var(--surface);color:var(--text);
    box-shadow:var(--shadow-xs);
}

/* ══════════════ Section Label ══════════════════════ */
.section-label {
    font-size:.74rem;font-weight:700;color:var(--text-3);
    text-transform:uppercase;letter-spacing:.08em;
    margin-bottom:12px;margin-top:8px;
}

/* ══════════════ Avatar Large ═══════════════════════ */
.avatar-lg {
    width:88px;height:88px;border-radius:var(--r-full);
    background:var(--accent);
    color:var(--text-inv);display:flex;align-items:center;
    justify-content:center;font-size:2rem;font-weight:700;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(16,185,129,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.avatar-lg img {width:100%;height:100%;object-fit:cover}

/* ══════════════ Utility ════════════════════════════ */
.text-teal,.text-accent {color:var(--accent-2)!important}
.text-red {color:var(--red)!important}
.text-green {color:var(--green)!important}
.text-muted {color:var(--text-3)!important}
.mt-8 {margin-top:8px}.mt-16 {margin-top:16px}.mt-24 {margin-top:24px}.mb-16 {margin-bottom:16px}
.flex {display:flex}
.flex-between {display:flex;justify-content:space-between;align-items:center;gap:12px}
.spin {animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════ Skeleton Loading ═══════════════════ */
.skeleton {
    background:linear-gradient(90deg,var(--border-light) 25%,var(--surface) 50%,var(--border-light) 75%);
    background-size:200% 100%;animation:shimmer 1.6s infinite ease-in-out;
    border-radius:var(--r-md);
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.page-loader {margin-top:6px}
.page-loader-bar {
    height:3px;border-radius:999px;
    background:rgba(16,185,129,.12);overflow:hidden;
}
.page-loader-bar-inner {
    height:100%;width:40%;
    background:linear-gradient(90deg,rgba(16,185,129,.2),rgba(16,185,129,.85),rgba(16,185,129,.2));
    animation:pagebar 1.2s infinite var(--ease);
}
@keyframes pagebar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.page-loader-body {display:flex;align-items:center;gap:12px;padding:16px 4px}
.page-loader-icon {
    width:36px;height:36px;border-radius:12px;
    background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
    color:var(--accent-2);
}
.page-loader-text {color:var(--text-2);font-size:.92rem;font-weight:600}

/* ══════════════ Tablet & Desktop ═══════════════════ */
@media(max-width:767px) {
    input,textarea,select {font-size:16px}

    /* On mobile, biz picker becomes a bottom sheet */
    .biz-picker-panel {
        position:fixed;top:auto;left:0;right:0;bottom:0;
        width:100%;border-radius:var(--r-2xl) var(--r-2xl) 0 0;
        border:none;border-top:1px solid var(--border-soft);
        transform:translateY(100%) !important;
        opacity:1 !important;
        transition:transform .3s var(--ease-out);
        pointer-events:none;
        padding-bottom:max(var(--safe-b),env(safe-area-inset-bottom,16px));
    }
    .biz-picker-panel.open {transform:translateY(0) !important;pointer-events:all}
    .biz-picker-list {max-height:45dvh}

    .quick-actions-panel,
    .notifications-menu-panel {
        top:calc(var(--topbar-h) + 8px);
        right:8px;
        left:auto;
        bottom:auto;
        width:min(340px, calc(100vw - 16px));
        max-height:calc(100dvh - var(--topbar-h) - 18px);
        border-radius:var(--r-xl);
        border:1px solid var(--border);
        transform:translateY(-8px) scale(.97) !important;
        opacity:0 !important;
        transition:opacity .22s var(--ease),transform .22s var(--ease);
        pointer-events:none;
        padding-bottom:8px;
    }
    .quick-actions-panel.open,
    .notifications-menu-panel.open {
        opacity:1 !important;
        transform:none !important;
        pointer-events:all;
    }
    .qa-grid {grid-template-columns:1fr;gap:2px;padding:6px}
    .qa-menu-list {max-height:calc(100dvh - var(--topbar-h) - 72px)}
    .qa-item {padding:8px 10px;font-size:.8rem;}
    .qa-item i {font-size:.92rem;}
    .qa-item.qa-primary {grid-column:auto;flex-direction:row;}

    /* Biz picker name truncate tighter */
    .biz-picker-name {max-width:90px;}

    /* Notif preview shorter on mobile */
    .notif-preview {max-width:180px;}
}

@media(min-width:768px) {
    :root {--topbar-h:68px}
    .sidebar {
        left:0;position:fixed;top:var(--topbar-h);bottom:0;
        box-shadow:none;
        border-right:1px solid var(--border-soft);
        background:var(--surface);
        transition:width .26s var(--ease-out),box-shadow .26s var(--ease-out);
    }
    .sidebar-header,.sidebar-close {display:none}
    .sidebar-overlay {display:none}
    .menu-toggle {display:flex}
    .menu-fab {display:none!important}
    .bottom-nav {display:none}
    .page-content {
        margin-left:var(--sidebar-w);
        padding:28px 32px 40px;
        max-width:none;
        transition:left .26s var(--ease-out),margin-left .26s var(--ease-out);
    }
    .page-content > * {max-width:var(--container);margin-left:auto;margin-right:auto}

    /* ── Collapsible sidebar (icon rail + hover / focus flyout) ── */
    /* Scoped to #main-app + !important to override the fixed-shell layout rules. */
    body.sidebar-collapsed #main-app .page-content {left:var(--sidebar-w-collapsed)!important}
    body.sidebar-collapsed #main-app .sidebar {width:var(--sidebar-w-collapsed)!important;overflow-x:hidden}
    /* Rail: center icons, hide labels/bodies */
    body.sidebar-collapsed .sidebar .nav-item,
    body.sidebar-collapsed .sidebar .nav-group-summary,
    body.sidebar-collapsed .sidebar .sidebar-signout {justify-content:center;gap:0;padding-left:0;padding-right:0}
    body.sidebar-collapsed .sidebar .nav-subitem {padding-left:0}
    body.sidebar-collapsed .sidebar .nav-item i,
    body.sidebar-collapsed .sidebar .nav-group-summary i:first-child {opacity:1}
    body.sidebar-collapsed .sidebar .nav-item > span:not(.nav-badge),
    body.sidebar-collapsed .sidebar .nav-group-summary > span,
    body.sidebar-collapsed .sidebar .nav-group-caret,
    body.sidebar-collapsed .sidebar .nav-section,
    body.sidebar-collapsed .sidebar .nav-divider,
    body.sidebar-collapsed .sidebar #sidebar-plan-chip,
    body.sidebar-collapsed .sidebar .nav-menu-search,
    body.sidebar-collapsed .sidebar .sidebar-signout span {display:none}
    body.sidebar-collapsed .sidebar .nav-group-body {max-height:0;overflow:hidden;padding-top:0;padding-bottom:0}
    body.sidebar-collapsed .sidebar .sidebar-footer {padding-left:10px;padding-right:10px}
    body.sidebar-collapsed .sidebar .sidebar-signout {border-color:transparent}
    /* Workspace-switch buttons (Become a Partner / Back to Business) shrink to icon pills */
    body.sidebar-collapsed .sidebar .nav-mode-exit-btn span {display:none}
    body.sidebar-collapsed .sidebar .nav-item.active::before {left:0}
    /* Subitems collapse to a hairline in the rail so groups stay compact */
    body.sidebar-collapsed .sidebar .nav-subitem {min-height:0;height:0;padding-top:0;padding-bottom:0;overflow:hidden}
    /* Badge shrinks to a dot */
    body.sidebar-collapsed .sidebar .nav-badge {
        position:absolute;top:6px;right:14px;min-width:8px;width:8px;height:8px;
        padding:0;font-size:0;line-height:0;border-radius:50%;
    }

    /* Hover / keyboard-focus flyout — expand over content, reveal everything */
    body.sidebar-collapsed #main-app .sidebar:hover,
    body.sidebar-collapsed #main-app .sidebar:focus-within {
        width:var(--sidebar-w)!important;overflow-x:visible;
        box-shadow:var(--shadow-xl);z-index:260;
    }
    body.sidebar-collapsed .sidebar:hover .nav-item,
    body.sidebar-collapsed .sidebar:focus-within .nav-item,
    body.sidebar-collapsed .sidebar:hover .nav-group-summary,
    body.sidebar-collapsed .sidebar:focus-within .nav-group-summary {justify-content:flex-start;gap:12px;padding-left:14px;padding-right:14px}
    body.sidebar-collapsed .sidebar:hover .nav-subitem,
    body.sidebar-collapsed .sidebar:focus-within .nav-subitem {padding:7px 10px 7px 23px;height:auto;min-height:34px;overflow:visible}
    body.sidebar-collapsed .sidebar:hover .nav-item > span:not(.nav-badge),
    body.sidebar-collapsed .sidebar:focus-within .nav-item > span:not(.nav-badge),
    body.sidebar-collapsed .sidebar:hover .nav-group-summary > span,
    body.sidebar-collapsed .sidebar:focus-within .nav-group-summary > span,
    body.sidebar-collapsed .sidebar:hover .nav-section,
    body.sidebar-collapsed .sidebar:focus-within .nav-section,
    body.sidebar-collapsed .sidebar:hover .nav-divider,
    body.sidebar-collapsed .sidebar:focus-within .nav-divider,
    body.sidebar-collapsed .sidebar:hover #sidebar-plan-chip,
    body.sidebar-collapsed .sidebar:focus-within #sidebar-plan-chip,
    body.sidebar-collapsed .sidebar:hover .nav-menu-search,
    body.sidebar-collapsed .sidebar:focus-within .nav-menu-search,
    body.sidebar-collapsed .sidebar:hover .sidebar-signout span,
    body.sidebar-collapsed .sidebar:focus-within .sidebar-signout span {display:revert}
    body.sidebar-collapsed .sidebar:hover .nav-group-caret,
    body.sidebar-collapsed .sidebar:focus-within .nav-group-caret {display:inline-flex}
    body.sidebar-collapsed .sidebar:hover .nav-group-body,
    body.sidebar-collapsed .sidebar:focus-within .nav-group-body {max-height:none;overflow:visible;padding-top:1px;padding-bottom:5px}
    body.sidebar-collapsed .sidebar:hover .sidebar-footer,
    body.sidebar-collapsed .sidebar:focus-within .sidebar-footer {padding-left:20px;padding-right:20px}
    body.sidebar-collapsed .sidebar:hover .sidebar-signout,
    body.sidebar-collapsed .sidebar:focus-within .sidebar-signout {justify-content:flex-start;gap:10px;border-color:rgba(239,68,68,.34)}
    body.sidebar-collapsed .sidebar:hover .nav-mode-exit-btn span,
    body.sidebar-collapsed .sidebar:focus-within .nav-mode-exit-btn span {display:revert}
    body.sidebar-collapsed .sidebar:hover .nav-badge,
    body.sidebar-collapsed .sidebar:focus-within .nav-badge {
        position:static;width:auto;min-width:18px;height:auto;
        padding:1px 6px;font-size:.68rem;line-height:1.4;border-radius:20px;
    }
    /* Rail a11y: labels stay in the accessibility tree (visually hidden, not
       display:none) so icon-only links keep their accessible names. Overrides
       the display:none hide list above by source order; the flyout's
       display:revert + the reset below restore them visually on expand. */
    body.sidebar-collapsed .sidebar .nav-item > span:not(.nav-badge),
    body.sidebar-collapsed .sidebar .nav-group-summary > span,
    body.sidebar-collapsed .sidebar .sidebar-signout span {
        display:inline-block;position:absolute;width:1px;height:1px;
        padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
    }
    body.sidebar-collapsed .sidebar:hover .nav-item > span:not(.nav-badge),
    body.sidebar-collapsed .sidebar:focus-within .nav-item > span:not(.nav-badge),
    body.sidebar-collapsed .sidebar:hover .nav-group-summary > span,
    body.sidebar-collapsed .sidebar:focus-within .nav-group-summary > span,
    body.sidebar-collapsed .sidebar:hover .sidebar-signout span,
    body.sidebar-collapsed .sidebar:focus-within .sidebar-signout span {
        position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
    }
    .btn-fab {bottom:28px;right:28px}
    .stat-grid {grid-template-columns:repeat(4,1fr);gap:16px}
    .product-grid {grid-template-columns:repeat(3,1fr);gap:16px}
    .modal {
        border-radius:var(--r-xl);
        max-width:560px;padding:28px;
    }
    .modal-overlay {align-items:center;padding:24px}
    .page-title {font-size:1.7rem}
    .card {padding:22px}
    .card-value {font-size:1.9rem}
    .topbar {padding:0 24px}
}

body.pos-fullscreen #sidebar {display:none!important;}
body.pos-fullscreen header.topbar {display:none!important;}
body.pos-fullscreen .page-content {
    margin:0!important;
    padding:12px 16px!important;
    width:100vw!important;
    max-width:none!important;
    box-sizing:border-box!important;
}
body.pos-fullscreen .page-content > * {
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
}

@media(min-width:1024px) {
    :root {--sidebar-w:280px}
    .product-grid {grid-template-columns:repeat(4,1fr)}
    .page-content {padding:32px 40px 44px}
    /* Wider biz picker on desktop */
    .biz-picker-panel {width:280px}
    .biz-picker-name {max-width:160px}
    /* QA panel: 4-col grid on large screens */
    .qa-grid {grid-template-columns:repeat(4,1fr)}
    .qa-item.qa-primary {grid-column:span 4}
    /* Business context sheet: centered card on desktop */
    .biz-ctx-sheet-panel {
        max-width:420px;
        border-radius:var(--r-2xl);
        bottom:auto;top:50%;left:50%;
        transform:translate(-50%,-50%) scale(.95);
        transition:transform .28s var(--ease-out), opacity .28s;
        opacity:0;pointer-events:none;
    }
    .biz-ctx-sheet-panel.open {
        transform:translate(-50%,-50%) scale(1);
        opacity:1;pointer-events:all;
    }
}

@media(min-width:1280px) {
    .page-content > * {max-width:var(--container)}
}

/* ══════════════ Print ═════════════════════════════ */
@media print {
    .topbar,.sidebar,.bottom-nav,.btn-fab,.sidebar-overlay,.menu-fab {display:none!important}
    .page-content {margin:0;padding:0}
    body {background:#fff}
}

/* ══════════════════════════════════════════════════ */
/* Marketplace                                         */
/* ══════════════════════════════════════════════════ */
body.mp-page {background:var(--bg-warm)}
body.mp2 {background:var(--bg);padding-bottom:calc(var(--bnav-h) + var(--safe-b))}

.mp2-topbar {
    position:fixed;top:0;left:0;right:0;z-index:140;
    background:rgba(255,255,255,.9);
    backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-bottom:1px solid var(--divider);
    padding-top:var(--safe-t);
}
.mp2-topbar-inner {
    max-width:var(--container-lg);margin:0 auto;
    height:var(--topbar-h);
    display:flex;align-items:center;gap:12px;
    padding:0 14px;
}
.mp2-brand {display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.mp2-brand-mark {
    width:34px;height:34px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);
    color:var(--text-inv);font-family:var(--font-display);
    font-weight:700;letter-spacing:-.04em;font-size:1.05rem;
    box-shadow:0 8px 20px rgba(16,185,129,.25),inset 0 1px 0 rgba(255,255,255,.2);
}
.mp2-brand-text {font-family:var(--font-display);font-weight:700;color:var(--primary);letter-spacing:-.03em;font-size:.98rem}
.mp2-search {
    flex:1;display:flex;align-items:center;gap:10px;
    background:var(--surface);
    border:1.5px solid var(--border-soft);
    border-radius:999px;
    padding:10px 14px;
    transition:all .18s var(--ease);
    box-shadow:var(--shadow-xs);
}
.mp2-search:focus-within {border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.mp2-search i {color:var(--text-3)}
.mp2-search input {border:none;outline:none;background:transparent;width:100%;font-size:.9rem;font-weight:600}
.mp2-icon-btn {
    width:44px;height:44px;border-radius:14px;
    border:1px solid var(--border-soft);
    background:var(--surface);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .18s var(--ease);
    box-shadow:var(--shadow-xs);color:var(--text-2);
    position:relative;
}
.mp2-icon-btn:hover {transform:translateY(-1px);box-shadow:var(--shadow-md);color:var(--text);border-color:var(--border)}
.mp2-wish-btn {width:40px;height:40px;border-radius:14px}
.mp2-wish-btn i {color:var(--text-3)}
.mp2-wish-btn.active {border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.08)}
.mp2-wish-btn.active i {color:#ef4444}
.mp2-badge {
    position:absolute;top:-6px;right:-6px;
    min-width:20px;height:20px;padding:0 6px;
    border-radius:999px;
    background:var(--accent);
    color:var(--text-inv);font-size:.68rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--surface);
    box-shadow:0 2px 6px rgba(16,185,129,.35);
}

.mp2-view {
    padding-top:calc(var(--topbar-h) + var(--safe-t));
    padding-bottom:calc(var(--bnav-h) + var(--safe-b) + 16px);
}
.mp2-bottom-nav {
    position:fixed;left:0;right:0;bottom:0;z-index:150;
    height:calc(var(--bnav-h) + var(--safe-b));
    padding-bottom:var(--safe-b);
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--divider);
    display:flex;align-items:center;
}
.mp2-desktop-only {display:none}

@media (min-width: 992px) {
    body.mp2 {padding-bottom:0}
    .mp2-bottom-nav {display:none}
    .mp2-desktop-only {display:flex}
    .mp2-view {padding-bottom:24px}
    .mp-filter-fab {display:none}
}
.mp2-nav-item {
    flex:1;border:none;background:transparent;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:10px 6px;
    color:var(--text-3);
    font-weight:700;font-size:.72rem;
}
.mp2-nav-item i {font-size:1.25rem}
.mp2-nav-item.active {color:var(--primary)}
.mp2-nav-item.active i {color:var(--accent-2)}

.mp2-page {max-width:var(--container-lg);margin:0 auto}
.mp2-pad {padding:12px 14px 0}
.mp2-section {padding:0 14px}
.mp2-rowhead {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 8px}
.mp2-rowtitle {font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.02rem}
.mp2-h1 {font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.2rem;margin-bottom:10px}
.mp2-select {border:1px solid var(--border-soft);background:var(--surface);border-radius:12px;padding:8px 10px;font-weight:700;font-size:.82rem}
.mp2-more {margin-top:12px}

.mp2-chip-row {display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.mp2-chip-row::-webkit-scrollbar {display:none}
.mp2-chip {
    border:1px solid var(--border-soft);
    background:var(--surface);
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;font-size:.78rem;
    display:inline-flex;align-items:center;gap:7px;
    white-space:nowrap;
    box-shadow:var(--shadow-xs);
}
.mp2-chip.active {background:var(--accent-soft);border-color:rgba(16,185,129,.25);color:var(--accent-2)}

.mp2-back {border:none;background:transparent;color:var(--text-2);font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px}
.mp2-back:hover {background:rgba(15,23,42,.04);color:var(--text)}

.mp2-banner {
    margin:14px 14px 0;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--border-soft);
    background:linear-gradient(180deg,rgba(16,185,129,.12),rgba(16,185,129,.06));
    display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.mp2-banner-title {font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}
.mp2-banner-sub {color:var(--text-2);font-weight:700;font-size:.86rem;margin-top:2px}

.mp2-img-ph {
    background:var(--surface-alt);
    border:1px solid var(--border-soft);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-3);
}
.mp2-img-square {aspect-ratio:1;border-radius:0}
.mp2-img-hero {height:280px}
.mp2-img-thumb {width:64px;height:64px;border-radius:14px}

.mp2-card-badges {position:absolute;left:10px;top:10px;display:flex;gap:8px;align-items:center}
.mp2-badge-pill {
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(15,23,42,.72);
    color:#fff;border-radius:999px;
    padding:4px 10px;
    font-size:.72rem;font-weight:700;
}
.mp2-rating {
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(15,23,42,.10);
    color:var(--primary);
    border-radius:999px;
    padding:4px 10px;
    font-size:.72rem;font-weight:700;
}
.mp2-card-row {display:flex;align-items:center;justify-content:space-between;gap:10px}
.mp2-rating-lg {display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--primary)}
.mp2-rating-sub {color:var(--text-3);font-weight:700}

.mp2-cats-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mp2-cat-tile {
    border:1px solid var(--border-soft);
    background:var(--surface);
    border-radius:16px;
    padding:14px;
    text-align:left;
    box-shadow:var(--shadow-xs);
    transition:all .18s var(--ease);
}
.mp2-cat-tile:hover {transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border)}
.mp2-cat-ic {width:42px;height:42px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-2);font-size:1.2rem}
.mp2-cat-name {margin-top:10px;font-weight:700;color:var(--primary);letter-spacing:-.01em}
.mp2-cat-sub {margin-top:4px;color:var(--text-3);font-weight:700;font-size:.78rem}

.mp2-stores-grid {display:flex;flex-direction:column;gap:12px}
.mp2-store-tile {
    border:1px solid var(--border-soft);
    background:var(--surface);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-xs);
    text-align:left;
    transition:all .18s var(--ease);
}
.mp2-store-tile:hover {transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border)}
.mp2-store-banner {height:72px;background:linear-gradient(135deg,var(--indigo-soft),var(--accent-soft));background-size:cover;background-position:center}
.mp2-store-body {display:flex;gap:12px;padding:12px 14px 14px;align-items:flex-start}
.mp2-store-logo {width:54px;height:54px;border-radius:18px;background:var(--surface-alt);border:1px solid var(--border-soft);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mp2-store-logo img {width:100%;height:100%;object-fit:cover}
.mp2-store-meta {min-width:0}
.mp2-store-name {font-weight:700;color:var(--primary);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.mp2-store-sub {margin-top:4px;color:var(--text-2);font-weight:600;font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp2-store-foot {margin-top:8px;color:var(--text-3);font-weight:700;font-size:.78rem}

.mp2-store-hero {display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border-soft);background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow-xs)}
.mp2-store-hero-logo {width:64px;height:64px;border-radius:18px;border:1px solid var(--border-soft);background:var(--surface-alt);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mp2-store-hero-logo img {width:100%;height:100%;object-fit:cover}
.mp2-store-hero-meta {min-width:0}
.mp2-store-hero-name {font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.15rem;display:flex;align-items:center;gap:8px}
.mp2-store-hero-sub {margin-top:4px;color:var(--text-2);font-weight:600;font-size:.88rem}
.mp2-store-hero-tags {margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.mp2-tag {display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-soft);background:rgba(15,23,42,.03);padding:6px 10px;border-radius:999px;color:var(--text-2);font-weight:700;font-size:.74rem}
.mp2-tag-featured {background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22);color:#b45309}
.mp2-store-link {border:none;background:transparent;color:var(--text);font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:0}
.mp2-store-link:hover {color:var(--accent-2)}

.mp2-product-card {border:1px solid var(--border-soft);background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-xs)}
.mp2-product-body {padding:14px}
.mp2-product-title {font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.12rem;line-height:1.2}
.mp2-product-price {font-family:var(--font-display);font-weight:700;color:var(--accent-2);font-size:1.15rem}
.mp2-product-top {display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mp2-product-subrow {margin-top:8px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.mp2-product-tags {margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.mp2-product-desc {margin-top:12px;color:var(--text-2);font-weight:500;line-height:1.6}
.mp2-atc {margin-top:14px;display:flex;gap:10px;align-items:center}
.mp2-qty {display:flex;align-items:center;border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;background:var(--surface-alt)}
.mp2-qty-btn {width:38px;height:38px;border:none;background:transparent;font-weight:700;color:var(--primary);font-size:1.1rem}
.mp2-qty-input {width:46px;height:38px;border:none;background:transparent;text-align:center;font-weight:700}
.mp2-atc-btn {flex:1}

.mp2-cart-item {display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:start}
.mp2-cart-item-main {min-width:0}
.mp2-cart-qty-input {width:46px}
.mp2-checkout {margin-top:18px}
.mp2-muted {margin-top:6px;color:var(--text-3);font-weight:700;font-size:.8rem}

.mp2-card {border:1px solid var(--border-soft);background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow-xs)}
.mp2-card-title {font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.08rem}
.mp2-card-sub {margin-top:4px;color:var(--text-2);font-weight:600;font-size:.88rem}
.mp2-account-top {display:flex;gap:12px;align-items:center}
.mp2-avatar {width:44px;height:44px;border-radius:16px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display)}
.mp2-account-meta {min-width:0}
.mp2-account-name {font-weight:700;color:var(--primary)}
.mp2-account-sub {margin-top:2px;color:var(--text-3);font-weight:700;font-size:.8rem}
.mp2-orders {margin-top:10px;display:flex;flex-direction:column;gap:10px}
.mp2-order {border:1px solid var(--border-soft);border-radius:16px;padding:12px;background:var(--surface-alt)}
.mp2-order-row {display:flex;justify-content:space-between;gap:10px;align-items:center}
.mp2-order-ref {font-weight:700;color:var(--primary)}
.mp2-order-amt {font-weight:700;color:var(--accent-2);font-family:var(--font-display)}
.mp2-order-sub {margin-top:6px;color:var(--text-2);font-weight:700;font-size:.82rem;display:flex;gap:10px;flex-wrap:wrap}

.mp2-empty {text-align:center;padding:28px 14px;border:1px dashed var(--border);border-radius:18px;background:rgba(255,255,255,.7)}
.mp2-empty-ic {width:52px;height:52px;border-radius:18px;background:var(--surface-alt);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:var(--text-3);font-size:1.4rem}
.mp2-empty-title {font-weight:700;color:var(--primary);font-size:1.05rem}
.mp2-empty-sub {margin-top:6px;color:var(--text-2);font-weight:600;font-size:.88rem;margin-bottom:14px}

.mp2-home-grid {display:grid;grid-template-columns:1fr;gap:16px;padding:0 14px}
.mp2-col {min-width:0}
.mp2-side-card {border:1px solid var(--border-soft);background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow-xs)}
.mp2-side-title {font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center}
.mp2-side-list {margin-top:10px;display:flex;flex-direction:column;gap:8px}
.mp2-side-link {border:1px solid var(--border-soft);background:var(--surface-alt);border-radius:14px;padding:10px 12px;font-weight:700;color:var(--primary);display:flex;justify-content:space-between;align-items:center;gap:10px}
.mp2-side-link:hover {border-color:var(--border);background:var(--surface);box-shadow:var(--shadow-xs)}
.mp2-side-sub {color:var(--text-3);font-weight:700;font-size:.75rem}

@media (min-width: 992px) {
    .mp2-home-grid {grid-template-columns:280px 1fr 320px;align-items:start}
    .mp2-section {padding:0}
    .mp2-pad {padding:12px 0 0}
    .mp2-page {padding:0 20px}
    .mp2-topbar-inner {padding:0 20px}
}

@media (min-width: 768px) {
    .product-grid {grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 1100px) {
    .product-grid {grid-template-columns:repeat(4,1fr);gap:14px}
}

.mp2-card-atc {
    position:absolute;right:10px;bottom:10px;
    width:38px;height:38px;border-radius:14px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);
}
.mp2-card-atc:hover {background:var(--accent);border-color:rgba(16,185,129,.25);color:#fff}

.mp-topbar {
    position:sticky;top:0;z-index:120;
    background:rgba(255,255,255,.85);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid var(--divider);
}
.mp-topbar-inner {
    max-width:var(--container-lg);margin:0 auto;
    height:76px;padding:0 20px;
    display:flex;align-items:center;gap:14px;
}
.mp-brand {display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.mp-brand-mark {
    width:40px;height:40px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);
    color:var(--text-inv);font-family:var(--font-display);
    font-weight:700;letter-spacing:-.04em;font-size:1.2rem;
    box-shadow:0 8px 20px rgba(16,185,129,.25),inset 0 1px 0 rgba(255,255,255,.2);
}
.mp-brand-text {
    font-family:var(--font-display);font-weight:700;
    color:var(--primary);letter-spacing:-.03em;font-size:1.05rem;
}
.mp-search {
    flex:1;display:flex;align-items:center;gap:10px;
    background:var(--surface);
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);padding:11px 14px;
    transition:all .18s var(--ease);
    box-shadow:var(--shadow-xs);
}
.mp-search:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
}
.mp-search i {color:var(--text-3)}
.mp-search input {
    border:none;outline:none;background:transparent;
    width:100%;font-size:.92rem;font-weight:500;
}
.mp-actions {display:flex;align-items:center;gap:8px}
.mp-icon-btn {
    width:44px;height:44px;border-radius:var(--r-md);
    border:1px solid var(--border-soft);
    background:var(--surface);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .18s var(--ease);
    box-shadow:var(--shadow-xs);color:var(--text-2);
}
.mp-icon-btn:hover {
    transform:translateY(-1px);box-shadow:var(--shadow-md);
    color:var(--text);border-color:var(--border);
}
.mp-cart-btn {position:relative}
.mp-badge {
    position:absolute;top:-6px;right:-6px;
    min-width:20px;height:20px;padding:0 5px;
    border-radius:999px;
    background:var(--accent);
    color:var(--text-inv);font-size:.68rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--surface);
    box-shadow:0 2px 6px rgba(16,185,129,.35);
}
.mp-sell-btn {
    text-decoration:none;
    padding:11px 16px;border-radius:var(--r-md);
    background:var(--primary);color:var(--text-inv);
    font-size:.86rem;font-weight:700;
    box-shadow:0 8px 20px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.08);
    transition:all .18s var(--ease);
    white-space:nowrap;
}
.mp-sell-btn:hover {transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.24)}

.mp-shell {
    max-width:var(--container-lg);margin:0 auto;
    display:grid;grid-template-columns:1fr;gap:18px;padding:20px 16px;
}
.mp-sidebar {display:none}
.mp-main {min-width:0}

.mp-hero {
    background:
        radial-gradient(1200px 400px at 20% 10%, rgba(16,185,129,.2) 0%, transparent 55%),
        radial-gradient(900px 380px at 90% 30%, rgba(99,102,241,.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.85) 100%);
    border:1px solid rgba(15,23,42,.06);
    border-radius:var(--r-2xl);
    padding:28px 22px;
    box-shadow:var(--shadow-md);
    position:relative;overflow:hidden;
}
.mp-hero::after {
    content:'';position:absolute;top:-50px;right:-50px;
    width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle,rgba(16,185,129,.12) 0%,transparent 70%);
    pointer-events:none;
}
.mp-hero-badge {
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    background:var(--accent-soft);color:var(--accent-2);
    font-weight:700;font-size:.78rem;letter-spacing:.02em;
    border:1px solid var(--accent-ring);
}
.mp-hero-title {
    margin-top:14px;font-family:var(--font-display);
    font-weight:700;letter-spacing:-.04em;font-size:1.85rem;
    color:var(--primary);line-height:1.1;max-width:22ch;
}
.mp-hero-sub {
    margin-top:12px;color:var(--text-2);
    max-width:58ch;font-size:.98rem;line-height:1.55;
}
.mp-hero-cta {margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.mp-hero-error {
    background:
        radial-gradient(600px 300px at 20% 20%, rgba(239,68,68,.1) 0%, transparent 60%),
        linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 70%);
}

.mp-store-hero {
    border-radius:var(--r-2xl);overflow:hidden;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:var(--shadow-lg);
    background:
        radial-gradient(800px 400px at 20% 20%, rgba(16,185,129,.3) 0%, transparent 55%),
        linear-gradient(135deg, #0b1220 0%, #111827 45%, #1e293b 100%);
}
.mp-store-hero-inner {padding:22px}
.mp-back {
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    color:rgba(255,255,255,.82);font-weight:700;font-size:.84rem;
    padding:6px 10px;border-radius:var(--r-sm);
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    transition:all .15s var(--ease);
}
.mp-back:hover {background:rgba(255,255,255,.1);color:#fff}
.mp-store-card {
    margin-top:16px;display:flex;gap:16px;align-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-lg);padding:16px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mp-store-logo {
    width:64px;height:64px;border-radius:var(--r-md);overflow:hidden;
    background:rgba(16,185,129,.18);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    border:1px solid rgba(16,185,129,.3);
}
.mp-store-logo img {width:100%;height:100%;object-fit:cover}
.mp-store-letter {
    font-family:var(--font-display);font-weight:700;
    color:#fff;font-size:1.6rem;
}
.mp-store-name {
    font-family:var(--font-display);font-weight:700;
    color:#fff;letter-spacing:-.03em;
    font-size:1.35rem;line-height:1.15;
}
.mp-store-sub {margin-top:4px;color:rgba(255,255,255,.72);font-size:.88rem;font-weight:500}
.mp-store-badges {margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.mp-pill {
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 12px;border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    color:rgba(255,255,255,.9);
    font-size:.78rem;font-weight:700;
}

.mp-panel {
    background:var(--surface);border:1px solid var(--border-soft);
    border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-xs);
}
.mp-panel-muted {background:var(--surface-alt)}
.mp-panel-title {
    font-size:.78rem;font-weight:700;color:var(--primary);
    letter-spacing:.02em;margin-bottom:12px;
    text-transform:uppercase;
}
.mp-cat-list {display:flex;flex-direction:column;gap:4px}
.mp-cat {
    border:none;background:transparent;cursor:pointer;
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:var(--r-sm);
    color:var(--text-2);font-weight:600;font-size:.88rem;
    transition:all .15s var(--ease);text-align:left;
}
.mp-cat i {opacity:.7;flex-shrink:0}
.mp-cat:hover {background:var(--surface-hover);color:var(--text)}
.mp-cat.active {
    background:var(--accent-soft);color:var(--accent-2);font-weight:700;
}
.mp-cat.active i {opacity:1}
.mp-cat-count {
    margin-left:auto;font-size:.72rem;color:var(--text-3);font-weight:700;
    padding:2px 8px;background:var(--surface-alt);border-radius:var(--r-full);
}
.mp-cat.active .mp-cat-count {background:var(--surface);color:var(--accent-2)}
.mp-filter-row label {font-size:.78rem;font-weight:700;color:var(--text);display:block;margin-bottom:8px}
.mp-price-row {display:flex;gap:8px;margin-bottom:10px}
.mp-price-row input {
    width:100%;padding:10px 12px;border-radius:var(--r-sm);
    border:1.5px solid var(--border);
    background:var(--surface);outline:none;font-size:.88rem;font-weight:500;
    transition:all .15s var(--ease);
}
.mp-price-row input:focus {border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

.mp-chip-row {
    display:flex;gap:8px;overflow:auto;padding:10px 2px 2px;margin-top:14px;
    -ms-overflow-style:none;scrollbar-width:none;
}
.mp-chip-row::-webkit-scrollbar {display:none}
.mp-chip {
    border:1px solid var(--border-soft);cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 14px;border-radius:999px;
    background:var(--surface);
    color:var(--text-2);font-weight:700;font-size:.82rem;
    white-space:nowrap;
    transition:all .15s var(--ease);box-shadow:var(--shadow-xs);
}
.mp-chip:hover {border-color:var(--text-3);color:var(--text);transform:translateY(-1px)}
.mp-chip.active {
    background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-2);
    box-shadow:0 4px 12px rgba(16,185,129,.15);
}
.mp-chip-ghost {background:var(--surface-alt)}

.mp-toolbar {
    display:flex;align-items:center;justify-content:space-between;
    margin-top:14px;gap:10px;flex-wrap:wrap;
}
.mp-results {color:var(--text-3);font-weight:700;font-size:.85rem}
.mp-grid {margin-top:14px}
.mp-card {border:1px solid var(--border-soft)}
.mp-img {position:relative;background:var(--surface-alt)}
.mp-img-ph {
    height:100%;display:flex;align-items:center;justify-content:center;
    color:var(--text-3);font-size:2rem;opacity:.5;
}
.mp-add {
    flex:0 0 auto;width:34px;height:34px;padding:0;
    border:none;background:none;border-radius:0;box-shadow:none;
    color:#000;font-size:1.45rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:transform .15s var(--ease),color .15s var(--ease);
}
.mp-add:hover {transform:scale(1.15);background:none;color:#000}
.mp-add:active {transform:scale(.9)}
.mp-add:disabled {opacity:.35;cursor:not-allowed}
/* price + add-to-cart button on the same row */
.mp-cardline {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.mp-cardline .mp-price,.mp-cardline .mp-mini-price {margin-top:0;}
.mp-name {
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;color:var(--text);font-weight:600;
}
.mp-price {
    margin-top:6px;font-family:var(--font-display);
    font-weight:700;color:var(--primary);letter-spacing:-.02em;font-size:1.05rem;
}
.mp-store {margin-top:6px;color:var(--text-3);font-size:.8rem;font-weight:600}
.mp-store a {color:inherit;text-decoration:none;transition:color .15s}
.mp-store a:hover {color:var(--accent-2)}

.mp-load-wrap {display:flex;justify-content:center;margin:22px 0 8px}
.mp-empty {
    background:var(--surface);border:1px dashed var(--border);
    border-radius:var(--r-2xl);padding:44px 28px;text-align:center;
    box-shadow:var(--shadow-xs);
}
.mp-empty i {font-size:2.6rem;color:var(--text-3);opacity:.4}
.mp-empty h3 {
    margin-top:12px;font-family:var(--font-display);font-weight:700;
    color:var(--primary);letter-spacing:-.02em;font-size:1.1rem;
}
.mp-empty p {margin-top:6px;color:var(--text-3);font-weight:500}

.mp-product-modal {display:grid;grid-template-columns:1fr;gap:16px}
.mp-pimg {
    width:100%;height:260px;object-fit:cover;border-radius:var(--r-lg);
    background:var(--surface-alt);border:1px solid var(--border-soft);
}
.mp-pimg-ph {display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:2.4rem;opacity:.5}
.mp-pprice {
    font-family:var(--font-display);font-weight:700;color:var(--primary);
    font-size:1.75rem;letter-spacing:-.03em;line-height:1.1;
}
.mp-pdesc {margin-top:10px;color:var(--text-2);font-weight:500;line-height:1.55}
.mp-muted {color:var(--text-3)!important}
.mp-ppills {margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.mp-pactions {margin-top:18px}

.mp-cart-store {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.mp-cart-store-title {font-weight:700;color:var(--primary);letter-spacing:-.015em;font-size:1rem}
.mp-cart-list {display:flex;flex-direction:column;gap:10px}
.mp-cart-item {
    display:grid;grid-template-columns:56px 1fr auto;gap:12px;
    align-items:center;padding:12px;
    border-radius:var(--r-md);border:1px solid var(--border-soft);
    background:var(--surface);transition:all .15s var(--ease);
}
.mp-cart-item:hover {border-color:var(--border);box-shadow:var(--shadow-xs)}
.mp-cart-thumb {
    width:56px;height:56px;border-radius:var(--r-sm);overflow:hidden;
    background:var(--surface-alt);
    display:flex;align-items:center;justify-content:center;color:var(--text-3);
}
.mp-cart-thumb img {width:100%;height:100%;object-fit:cover}
.mp-cart-name {font-weight:700;color:var(--text);letter-spacing:-.015em;font-size:.92rem}
.mp-cart-sub {color:var(--text-3);font-weight:600;font-size:.78rem;margin-top:2px}
.mp-cart-qty {margin-top:8px;display:flex;align-items:center;gap:6px}
.mp-qty-btn {
    width:32px;height:32px;border-radius:var(--r-xs);
    border:1px solid var(--border);background:var(--surface);cursor:pointer;
    transition:all .15s var(--ease);color:var(--text-2);
    display:flex;align-items:center;justify-content:center;
}
.mp-qty-btn:hover {border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.mp-qty-btn:disabled {opacity:.4;cursor:not-allowed}
.mp-cart-qty input {
    width:56px;padding:7px 8px;border-radius:var(--r-xs);
    border:1px solid var(--border);background:var(--surface);
    text-align:center;font-weight:700;outline:none;
}
.mp-trash {
    margin-left:6px;width:32px;height:32px;border-radius:var(--r-xs);
    border:1px solid rgba(239,68,68,.25);
    background:var(--red-soft);color:var(--red);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s var(--ease);
}
.mp-trash:hover {background:var(--red);color:#fff}
.mp-cart-amt {font-weight:700;color:var(--primary);font-family:var(--font-display)}
.mp-cart-total {margin-top:14px;padding-top:14px;border-top:1px dashed var(--border)}
.mp-kv {
    display:flex;justify-content:space-between;align-items:center;
    gap:10px;color:var(--text-2);font-weight:700;font-size:.88rem;margin-top:8px;
}
.mp-thanks {text-align:center;padding:16px 8px}
.mp-thanks-icon {
    width:80px;height:80px;border-radius:var(--r-xl);margin:0 auto 14px;
    background:linear-gradient(135deg,var(--accent-soft),var(--green-soft));
    border:1px solid var(--accent-ring);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent-2);font-size:2.4rem;
    box-shadow:0 8px 24px rgba(16,185,129,.16);
}
.mp-thanks-title {
    font-family:var(--font-display);font-weight:700;color:var(--primary);
    letter-spacing:-.04em;font-size:1.7rem;
}
.mp-thanks-sub {margin-top:8px;color:var(--text-2);font-weight:600}
.mp-alert {background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px}
.mp-alert-red {background:var(--red-soft);border-color:rgba(239,68,68,.2);color:#b91c1c;font-weight:700}
.mp-small {font-size:.84rem;color:var(--text-2);font-weight:600;line-height:1.55}

@media(min-width:768px) {
    .mp-hero {padding:36px 32px}
    .mp-hero-title {font-size:2.3rem}
    .mp-store-hero-inner {padding:32px}
    .mp-store-name {font-size:1.65rem}
}

@media(min-width:960px) {
    .mp-shell {
        grid-template-columns:300px 1fr;gap:22px;padding:24px 20px;
    }
    .mp-sidebar {
        display:flex;flex-direction:column;gap:16px;
        position:sticky;top:96px;
        max-height:calc(100dvh - 116px);overflow:auto;padding-bottom:20px;
    }
    .mp-chip-row {display:none}
    .mp-hero {padding:40px 36px}
    .mp-hero-title {font-size:2.6rem}
    .mp-product-modal {grid-template-columns:1.1fr .9fr;align-items:start}
    .mp-pimg {height:340px}
}

@media(min-width:1200px) {
    .mp-shell {grid-template-columns:320px 1fr;gap:28px}
    .mp-hero-title {font-size:2.8rem}
}

/* ── Verification Feature ──────────────────────────── */
.upload-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--surface);
    position: relative;
}
.upload-drop-zone:hover,
.upload-drop-zone.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.upload-drop-zone.has-file {
    border-color: #10b981;
    background: rgba(16,185,129,.06);
}
.upload-drop-zone .drop-icon {
    font-size: 2rem;
    color: var(--text-3);
    margin-bottom: 8px;
    display: block;
    transition: color .2s;
}
.upload-drop-zone:hover .drop-icon,
.upload-drop-zone.has-file .drop-icon {
    color: var(--accent);
}
.upload-drop-zone .drop-label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
}
.upload-drop-zone .drop-sub {
    font-size: .76rem;
    color: var(--text-3);
    margin-top: 4px;
}
.upload-drop-zone .drop-preview {
    max-width: 100%;
    max-height: 140px;
    border-radius: 10px;
    object-fit: contain;
    margin-top: 10px;
    display: none;
}
.upload-drop-zone.has-file .drop-preview {
    display: block;
    margin: 10px auto 0;
}
.upload-drop-zone input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Verified badge — inline in headings */
.verif-badge {
    color: #10b981;
    font-size: 1em;
    vertical-align: middle;
    margin-left: 4px;
}
/* Larger badge for profile/storefront hero */
.verif-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16,185,129,.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.verif-badge-large i {
    font-size: 1rem;
}

/* Verification benefit grid */
.verif-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}
.verif-benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-hover);
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
}
.verif-benefit-item i {
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Step indicator for verification flow */
.verif-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}
.verif-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.verif-step + .verif-step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.verif-step.done + .verif-step::before,
.verif-step.active + .verif-step::before {
    background: var(--accent);
}
.verif-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-3);
    position: relative;
    z-index: 1;
}
.verif-step.done .verif-step-dot {
    background: var(--accent);
    color: #fff;
}
.verif-step.active .verif-step-dot {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.verif-step-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-3);
    margin-top: 5px;
    text-align: center;
}

/* ============================================================
   MARKETPLACE — NEW STOREFRONT COMPONENTS
   ============================================================ */

/* ---- Cart FAB ---- */
.mp-cart-fab {
    position: fixed;
    bottom: var(--fixed-btn-offset);
    right: var(--fixed-btn-offset);
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 7px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    min-height: var(--compact-fixed-h);
    padding: 0 clamp(12px, 3.5vw, 16px);
    font-size: clamp(.74rem, 2.8vw, .86rem);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99,102,241,.35);
    transition: transform .15s, box-shadow .15s;
}
.mp-cart-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99,102,241,.45);
}
.mp-cart-fab i { font-size: clamp(1rem, 4vw, 1.12rem); }
.mp-fab-info, .mp-cart-fab-info { display: flex; flex-direction: column; line-height: 1.2; }
.mp-fab-count, .mp-cart-fab-count { font-size: .78rem; opacity: .85; }
.mp-fab-total, .mp-cart-fab-total { font-size: .95rem; font-weight: 700; }

/* ---- Filters FAB ---- */
.mp-filter-fab {
    position: fixed;
    bottom: var(--fixed-btn-offset);
    left: var(--fixed-btn-offset);
    z-index: 1200;
    width: var(--fixed-btn-size);
    height: var(--fixed-btn-size);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    cursor: pointer;
    backdrop-filter: blur(10px);
}
.mp-filter-fab i { font-size: var(--fixed-btn-icon); color: var(--primary); }

@media (max-width:360px) {
    .mp-cart-fab {
        width:var(--fixed-btn-size);
        min-width:0;
        padding:0;
        justify-content:center;
    }
    .mp-cart-fab .mp-fab-info,
    .mp-cart-fab .mp-cart-fab-info {display:none}
}

/* ---- Map modal overlay (sits above checkout, doesn't replace it) ---- */
.mp-map-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}
.mp-map-modal-overlay.open,
.mp-map-modal-overlay.mp-map-overlay-open {
    opacity: 1;
    pointer-events: all;
}
.mp-map-modal-inner {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 560px;
    padding: 20px;
    box-shadow: 0 -6px 40px rgba(0,0,0,.18);
    transform: translateY(30px);
    transition: transform .22s;
}
.mp-map-modal-overlay.open .mp-map-modal-inner,
.mp-map-modal-overlay.mp-map-overlay-open .mp-map-modal-inner {
    transform: translateY(0);
}
#mp-map-leaflet { height: 300px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }

/* ---- Full-page Product Panel ---- */
.mp-product-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.mp-product-panel.mp-product-panel-open {
    transform: translateX(0);
}
.mp-panel-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 18px;
}
.mp-panel-topbar button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-1);
    font-size: 1.25rem;
    padding: 4px;
    border-radius: 8px;
    line-height: 1;
}
.mp-panel-topbar button:hover { background: var(--border); }
.mp-panel-topbar-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-panel-body {
    flex: 1;
    padding: 0 0 100px;
}

/* Gallery */
.mp-panel-gallery {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 10px;
}
.mp-panel-mainimg {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    background: var(--border);
    cursor: zoom-in;
}
.mp-panel-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.mp-panel-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s;
    background: var(--border);
}
.mp-panel-thumb.active,
.mp-panel-thumb:hover {
    border-color: var(--primary);
}

/* Panel body sections */
.mp-panel-info { padding: 18px 18px 0; }
.mp-panel-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    margin: 4px 0 10px;
}
.mp-panel-store-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--text-2);
    margin-bottom: 12px;
}
.mp-panel-store-row a { color: var(--primary); text-decoration: none; font-weight: 600; }
.mp-panel-desc {
    font-size: .88rem;
    color: var(--text-2);
    line-height: 1.55;
    white-space: pre-wrap;
    padding: 0 18px;
    margin-bottom: 16px;
}
.mp-panel-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
    padding: 0 18px;
    margin-bottom: 8px;
}

/* Variation chips */
.mp-var-group { padding: 0 18px; margin-bottom: 16px; }
.mp-var-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mp-var-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 14px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-1);
    transition: border-color .15s, background .15s;
    line-height: 1.3;
}
.mp-var-chip:hover {
    border-color: var(--primary-soft, rgba(99,102,241,.35));
    background: var(--accent-soft, rgba(16,185,129,.08));
}
.mp-var-chip.active {
    border-color: var(--primary);
    background: var(--primary-soft, rgba(99,102,241,.1));
    color: var(--primary);
}
.mp-var-chip .mp-var-mod {
    font-size: .7rem;
    font-weight: 700;
    color: var(--accent);
}

/* Related products */
.mp-related-wrap { padding: 0 18px; }
.mp-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}
@media (min-width: 480px) {
    .mp-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.mp-related-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.mp-related-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.mp-related-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--border);
}
.mp-related-card-info { padding: 8px 10px; }
.mp-related-card-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-related-card-price {
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 2px;
}

/* Fixed add-to-cart footer on panel */
.mp-panel-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2010;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.mp-panel-footer-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}
.mp-panel-footer .btn { flex: 1; }

/* Featured badge */
.mp-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* In-cart product card state */
.mp-add.mp-add-incart {
    background: none;
    color: var(--accent);
    border: none;
}
.mp-add.mp-add-incart:hover {
    background: none;
    color: var(--accent-dark, #059669);
}
.mp-incart-badge {
    font-size: .72rem;
    color: var(--accent);
    font-weight: 700;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ---- Checkout layout — sticky footer ---- */
.mp-checkout-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.mp-checkout-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
}
.mp-checkout-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

/* spin animation for loading indicators */
@keyframes spin{ to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .7s linear infinite; }

/* Modal checkout: make modal flex so inner scroll + sticky footer works */
.modal:has(.mp-checkout-wrap) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}
.modal:has(.mp-checkout-wrap) .modal-header {
    flex-shrink: 0;
    position: relative; /* disable sticky since modal doesn't scroll anymore */
}
.modal:has(.mp-checkout-wrap) .mp-checkout-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.mp-checkout-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 4px 0 12px;
    -webkit-overflow-scrolling: touch;
}
.mp-checkout-footer {
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}

/* ---- Product panel inner layout ---- */
.mp-panel-content { padding: 16px 18px 0; }
.mp-panel-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.3;
    margin-bottom: 4px;
}
.mp-panel-price {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--primary);
}
.mp-panel-store {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--text-2);
    margin: 6px 0 14px;
}
.mp-panel-store a { color: var(--primary); font-weight: 700; text-decoration: none; }
.mp-panel-section {
    padding: 0;
    margin-bottom: 18px;
}
.mp-panel-desc {
    font-size: .88rem;
    color: var(--text-2);
    line-height: 1.6;
    white-space: pre-wrap;
}
/* Panel thumb as background-image div */
.mp-panel-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s;
    background-color: var(--border);
    background-size: cover;
    background-position: center;
}
/* Related products grid inside panel */
.mp-panel-related {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}
@media (min-width: 380px) { .mp-panel-related { grid-template-columns: repeat(3, 1fr); }
}
.mp-related-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.mp-related-card:hover {
    box-shadow: 0 3px 14px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.mp-related-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--border) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--text-3);
}
.mp-related-name {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-1);
    padding: 6px 8px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-related-price {
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary);
    padding: 0 8px 8px;
}

/* Featured badge on panel gallery */
.mp-featured-badge-panel {
    align-self: flex-start;
    margin-bottom: 4px;
}

/* Product panel polish */
.mp-product-panel {
    background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 36%);
}
.mp-panel-topbar {
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mp-panel-content {
    padding-top: 12px;
}
.mp-panel-name {
    font-size: 1.4rem;
    line-height: 1.25;
    margin-bottom: 6px;
}
.mp-panel-gallery {
    padding: 18px 18px 12px;
}
.mp-panel-mainimg {
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(15,23,42,.12);
}
.mp-panel-section {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
}
.mp-panel-section-title,
.mp-panel-desc,
.mp-var-group {
    padding-left: 0;
    padding-right: 0;
}
.mp-panel-footer {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mp-pd-section {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
}
.mp-pd-section-label {
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}
.mp-pd-price-row {
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mp-panel-desc {
    line-height: 1.6;
    font-size: .94rem;
    color: var(--text-2);
}
.mp-pd-trust {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 10px;
}
.mp-var-chip {
    border-radius: 999px;
}
.mp-pd-atc-btn {
    border-radius: 12px;
    min-height: 46px;
    font-weight: 700;
}

/* ============================================================
   DASHBOARD REDESIGN — Donezo-inspired mobile-first
   ============================================================ */

/* ── Greeting header ── */
/* ── Dashboard identity strip — slim, no card chrome ── */
.dsb-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 1px 1px 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--border-soft);
    animation: sx-rise .4s cubic-bezier(.22,1,.36,1) both;
}
.dsb-strip-biz {
    display: flex;
    align-items: center;
    gap: 11px;
    background: transparent;
    border: none;
    padding: 3px;
    margin: -3px;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    flex: 1 1 auto;
    transition: background .15s ease;
}
.dsb-strip-biz:hover { background: var(--surface-alt); }
.dsb-strip-biz:active { transform: scale(.995); }
.dsb-strip-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    overflow: hidden;
    /* double-ring signature: surface gap + emerald halo */
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent-ring), 0 8px 16px -8px var(--accent-glow);
}
.dsb-strip-logo img { width: 100%; height: 100%; object-fit: cover; }
.dsb-strip-copy { min-width: 0; }
.dsb-strip-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1.06rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1.15;
    min-width: 0;
}
.dsb-strip-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsb-strip-name i {
    font-size: .68rem;
    color: var(--text-3);
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 2px 3px;
    flex-shrink: 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.dsb-strip-biz:hover .dsb-strip-name i {
    color: var(--accent-2);
    border-color: var(--accent-ring);
    background: var(--accent-soft);
}
.dsb-strip-greet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: .66rem;
    font-weight: 780;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dsb-strip-greet i { font-size: .76rem; }
.dsb-strip-side { flex-shrink: 0; }
.dsb-strip-side .dsb-sub-pill {
    margin-bottom: 0;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: .74rem;
    gap: 6px;
}
.dsb-strip-side .dsb-sub-pill .dsb-sub-days { font-size: .66rem; padding: 1px 6px; }
/* controls line: scope toggle left, branch right — only rendered when needed */
.dsb-strip-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.dsb-strip-controls .dsb-scope-toggle { margin-bottom: 0; padding: 2px; }
.dsb-strip-controls .dsb-scope-toggle button { padding: 6px 12px; font-size: .76rem; }
.dsb-strip-branch { margin-left: auto; }
.dsb-strip-branch .branch-select {
    min-height: 34px;
    border-radius: 10px;
    font-size: .78rem;
    max-width: 200px;
    border-color: var(--border-soft);
    background-color: var(--surface-alt);
}
@media (max-width: 420px) {
    .dsb-strip-side .dsb-sub-pill { padding: 5px 8px; font-size: .7rem; }
    .dsb-strip-name { font-size: .98rem; }
}

/* ── Subscription pill ── */
.dsb-sub-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent-2);
    margin-bottom: 14px;
    transition: all .15s;
}
.dsb-sub-pill:hover { background: rgba(16,185,129,.15); }
.dsb-sub-pill.urgent { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: var(--amber); }
.dsb-sub-pill.no-plan { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.2); color: var(--red); }
.dsb-sub-days {
    background: rgba(16,185,129,.15);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: .72rem;
}
.dsb-sub-cta { margin-left: auto; font-weight: 700; font-size: .78rem; }

/* ── Setup card ── */
.dsb-setup-card {
    background: #0f5c42;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.dsb-setup-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.dsb-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.dsb-setup-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.dsb-setup-sub { font-size: .78rem; opacity: .65; }
.dsb-setup-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.dsb-setup-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.dsb-setup-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}
.dsb-setup-steps { display: flex; flex-direction: column; gap: 8px; }
.dsb-setup-step {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s;
}
.dsb-setup-step:hover { background: rgba(255,255,255,.16); }
.dsb-setup-step.done { opacity: .55; cursor: default; text-decoration: line-through; }
.dsb-setup-step-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

/* ── Scope toggle ── */
.dsb-scope-toggle {
    display: inline-flex;
    gap: 3px;
    margin-bottom: 14px;
    padding: 3px;
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}
.dsb-scope-toggle button {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: .8rem;
    font-weight: 750;
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.dsb-scope-toggle button:hover { color: var(--text); }
.dsb-scope-toggle button.active {
    background: var(--accent-2);
    color: #fff;
    box-shadow: 0 6px 14px -8px var(--accent-glow);
}

/* ── Section header ── */
.dsb-section { margin-bottom: 20px; }
.dsb-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.dsb-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}
.dsb-section-sub {
    font-size: .76rem;
    color: var(--text-3);
    font-weight: 600;
}

.dsb-widget {
    padding: 16px 16px 14px;
    border-radius: 20px !important;
    overflow: hidden;
}
.dsb-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.dsb-widget-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}
.dsb-widget-sub {
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-3);
    margin-top: 2px;
}

.dsb-today .dsb-mini-btn { padding: 6px 9px; }

/* ── Snapshot stacked stats ── */
.dsb-snapshot-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dsb-snapshot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-soft);
    background: var(--surface-3);
    border-radius: 14px;
    cursor: pointer;
    transition: all .14s;
    min-width: 0;
    overflow: hidden;
}
.dsb-snapshot-item:hover {
    border-color: var(--accent-ring);
    box-shadow: var(--shadow-xs);
    transform: translateX(2px);
}
.dsb-snapshot-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
/* Solid chips: plain solid fill + matching same-hue solid glyph (no washes) */
.dsb-snapshot-icon.green { background: #059669; color: #ecfdf5; }
.dsb-snapshot-icon.blue { background: #2a78d6; color: #eff6ff; }
.dsb-snapshot-icon.amber { background: #d97706; color: #fffbeb; }
.dsb-snapshot-icon.red { background: #dc2626; color: #fef2f2; }
.dsb-snapshot-icon.violet { background: #7c3aed; color: #f5f3ff; }
.dsb-snapshot-body { flex: 1; min-width: 0; }
.dsb-snapshot-body .k {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsb-snapshot-body .v {
    font-size: .98rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.dsb-snapshot-body .s {
    font-size: .70rem;
    font-weight: 650;
    color: var(--text-3);
    margin-top: 1px;
}
.dsb-snapshot-end {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-2);
    flex-shrink: 0;
    text-align: right;
}

.dsb-qa-card {
    padding: 14px 14px 12px;
    border-radius: 20px !important;
}
.dsb-qa-card .dsb-section-hdr { margin-bottom: 10px; }

.dsb-hbars { display: flex; flex-direction: column; gap: 10px; }
.dsb-hbars-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    color: var(--text-3);
    font-weight: 700;
}
.dsb-hbar-row { cursor: pointer; }
.dsb-hbar-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.dsb-hbar-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
    color: var(--text-2);
    font-size: .82rem;
}
.dsb-hbar-left span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsb-hbar-left i { color: var(--text-3); }
.dsb-hbar-val { font-weight: 700; font-size: .82rem; color: var(--text); }
.dsb-hbar-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1.5px solid var(--border-soft);
    overflow: hidden;
}
.dsb-hbar-fill { height: 100%; border-radius: 999px; }
.dsb-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1.5px solid var(--border-soft);
    background: var(--surface-3);
}
.dsb-seg button {
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: .74rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s, transform .12s;
}
.dsb-seg button:active { transform: scale(.98); }
.dsb-seg button.active {
    background: #111827;
    color: #fff;
    box-shadow: var(--shadow-xs);
}
.dsb-mini-btn {
    border: 1.5px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-2);
    padding: 7px 10px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .12s;
}
.dsb-mini-btn:hover { border-color: var(--accent-ring); box-shadow: var(--shadow-xs); color: var(--text); }
.dsb-analytics-chart { width: 100%; }
.dsb-line-empty {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-3);
    font-weight: 700;
}
.dsb-line-empty i { font-size: 1.2rem; }
.dsb-donut {
    display: flex;
    gap: 12px;
    align-items: center;
}
.dsb-donut-ring {
    width: 132px;
    height: 132px;
    border-radius: 999px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.dsb-donut-hole {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-shadow: 0 2px 10px -4px rgba(15,23,42,.2);
}
.dsb-donut-big {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1.1;
}
.dsb-donut-sub {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-3);
    margin-top: 4px;
    line-height: 1.15;
}
.dsb-donut-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dsb-donut-legend-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: .76rem;
}
.dsb-donut-legend-row .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}
.dsb-donut-legend-row .lbl {
    font-weight: 700;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsb-donut-legend-row .pct {
    font-weight: 700;
    color: var(--text-3);
}
.dsb-donut-legend-row .amt {
    font-weight: 700;
    color: var(--text);
}
@media (max-width: 460px) {
    .dsb-donut { flex-direction: column; align-items: stretch; }
    .dsb-donut-ring { margin: 0 auto; }
    .dsb-donut-legend-row { grid-template-columns: 12px 1fr auto; }
    .dsb-donut-legend-row .amt { grid-column: 2 / -1; color: var(--text-2); }
}

/* ── Quick actions ── */
.dsb-qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}
.dsb-qa-btn {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: 16px;
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-2);
    transition: all .15s;
    box-shadow: var(--shadow-xs);
    min-width: 0;
}
.dsb-qa-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsb-qa-btn:hover {
    border-color: var(--accent-ring);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}
.dsb-qa-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
/* Solid chips: plain solid fill + matching same-hue solid glyph (no washes) */
.dsb-qa-icon.green { background: #059669; color: #ecfdf5; }
.dsb-qa-icon.blue { background: #2a78d6; color: #eff6ff; }
.dsb-qa-icon.amber { background: #d97706; color: #fffbeb; }
.dsb-qa-icon.violet { background: #7c3aed; color: #f5f3ff; }
.dsb-qa-icon.teal { background: #0d9488; color: #f0fdfa; }
.dsb-qa-icon.indigo { background: #4f46e5; color: #eef2ff; }

/* ── Activity list ── */
.dsb-activity-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dsb-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border-radius: 14px;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
}
.dsb-activity-item:hover {
    background: var(--surface-hover);
    border-color: var(--border-soft);
}
.dsb-activity-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
    overflow: hidden;
}
.dsb-activity-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsb-av-green { background: linear-gradient(135deg, #10b981, #059669); }
.dsb-av-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.dsb-av-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dsb-av-violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.dsb-av-teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.dsb-activity-info {
    flex: 1;
    min-width: 0;
}
.dsb-activity-name {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsb-activity-sub {
    font-size: .72rem;
    color: var(--text-3);
    margin-top: 1px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsb-activity-amount {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    margin-top: 2px;
}
.dsb-status-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-align: right;
}
.dsb-status-badge.paid { background: rgba(16,185,129,.12);  color: #059669; }
.dsb-status-badge.inprogress { background: rgba(245,158,11,.12);  color: #d97706; }
.dsb-status-badge.pending { background: rgba(248,113,113,.12);  color: #dc2626; }

/* ── AI FAB ── */
.dsb-ai-fab {
    position: fixed;
    bottom: calc(var(--bnav-h) + var(--fixed-btn-offset) + var(--safe-b));
    right: var(--fixed-btn-offset);
    z-index: 900;
    min-width: clamp(68px, 21vw, 82px);
    height: var(--compact-fixed-h);
    padding: 0 clamp(10px, 3vw, 14px);
    gap: 6px;
    border-radius: 999px;
    background: #7c3aed;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 22px -6px rgba(124,58,237,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(.74rem, 2.8vw, .86rem);
    font-weight: 700;
    transition: transform .15s, box-shadow .15s;
}
.dsb-ai-fab i { font-size: clamp(1rem, 4vw, 1.14rem); }
.dsb-ai-fab:hover {
    transform: translateY(-2px);
    background: #6d28d9;
    box-shadow: 0 12px 30px -6px rgba(124,58,237,.6);
}

@media (max-width:360px) {
    .dsb-ai-fab {
        width:var(--fixed-btn-size);
        min-width:0;
        height:var(--fixed-btn-size);
        padding:0;
        border-radius:999px;
    }
    .dsb-ai-fab span {display:none}
}

/* ── Desktop overrides ── */
@media (min-width: 768px) {
    .dsb-qa-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* ============================================================
   COMPREHENSIVE DESIGN OVERHAUL — Mobile-first Donezo aesthetic
   All components refreshed for true app feel
   ============================================================ */

/* ── Override core variables for richer look ── */
:root {
    --bg:              #f4f6fb;
    --surface:         #ffffff;
    --surface-hover:   #f8fafc;
    --border-soft:     #eef0f6;
    --border:          #e3e7f0;
    --topbar-h:        60px;
    --bnav-h:          62px;
    --r-card:          18px;
    --r-item:          14px;
    --r-btn:           12px;
}

/* ── Topbar — cleaner, more native ── */
.topbar {
    height: var(--topbar-h);
    padding: 0 16px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 var(--border-soft);
}
.topbar-logo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #0a2e1a;
}
.topbar-logo span {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all .15s;
}
.topbar-icon:hover { border-color: var(--accent-ring); color: var(--accent-2); }

.avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a2e1a, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    flex: 0 0 34px;
    border: 2px solid var(--border-soft);
    transition: border-color .15s;
}
.avatar-sm:hover { border-color: var(--accent-ring); }
.avatar-sm img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ── Bottom nav — pill active state ── */
.bottom-nav {
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -1px 0 var(--border-soft), 0 -8px 24px rgba(15,23,42,.06);
}
.bnav-item {
    gap: 2px;
    font-size: clamp(.55rem, 2.45vw, .62rem);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 5px 6px;
    border-radius: 10px;
    transition: all .18s;
}
.bnav-item i { font-size: clamp(1.02rem, 4vw, 1.16rem); }
.bnav-item.active {
    color: #0a2e1a;
    background: rgba(16,185,129,.1);
    border-radius: 12px;
}
.bnav-item.active i { transform: none; color: #0a2e1a; }
.bnav-item.active::before { display: none; } /* remove old top indicator */
.bottom-nav {
    display: grid;
    grid-template-columns: repeat(var(--bnav-count, 5), minmax(0, 1fr));
    justify-content: stretch;
    gap: 2px;
}
.bnav-item {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-left: 3px;
    padding-right: 3px;
}
.bnav-item span:not(.nav-badge) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.05;
}
@media (max-width: 360px) {
    .bnav-item { font-size: .52rem; padding-left:2px; padding-right:2px; }
    .bnav-item i { font-size: 1rem; }
}

@media (min-width: 768px) {
    .bottom-nav { display: none !important; }
}

/* ── Page header — section heading style ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
}
.page-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.025em;
    line-height: 1.2;
}
.section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    margin-bottom: 10px;
}

/* ── Cards — cleaner mobile cards ── */
.card {
    border-radius: var(--r-card) !important;
    border: 1.5px solid var(--border-soft);
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.07); }

/* ── Stat cards — redesigned ── */
.stat-grid {
    gap: 10px;
    margin-bottom: 20px;
}
.stat-card {
    border-radius: var(--r-card) !important;
    padding: 16px;
    border: 1.5px solid var(--border-soft);
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
    transition: all .15s;
}
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.card-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    margin-bottom: 8px;
}
.card-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 4px;
}
.card-sub {
    font-size: .74rem;
    color: var(--text-3);
    font-weight: 500;
    margin-top: 4px;
}

.compact-stat-grid .stat-card {
    min-height: 94px;
    padding: 14px !important;
}
.compact-stat-grid .card-title {
    font-size: .66rem;
    line-height: 1.25;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.compact-stat-grid .card-value {
    font-size: clamp(1rem, 2.5vw, 1.22rem);
    line-height: 1.16;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}
.compact-stat-grid .card-sub {
    font-size: .72rem;
    line-height: 1.35;
}

.page-transition-loader {
    min-height: calc(100dvh - var(--topbar-h) - var(--bnav-h) - 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 14px;
    color: var(--text-2);
}
.page-transition-spinner {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 10px 24px rgba(16, 185, 129, .22);
}
.page-transition-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
}
.page-transition-sub {
    margin-top: 2px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-3);
}

@media (max-width: 420px) {
    .compact-stat-grid .card-value { font-size: .98rem; }
    .page-transition-loader {
        min-height: 220px;
        justify-content: flex-start;
    }
}

/* ── Data list — better touch targets ── */
.data-list { gap: 8px; padding: 8px 10px; }
.data-item {
    border-radius: var(--r-item) !important;
    padding: 14px 16px;
    border: 1.5px solid rgba(15, 23, 42, .07);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
    transition: all .14s;
    -webkit-tap-highlight-color: transparent;
}
.data-item:active {
    transform: scale(.99);
    background: var(--surface-hover);
}
.data-item-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}
.data-item-sub {
    font-size: .76rem;
    color: var(--text-3);
    margin-top: 2px;
}
.data-item-amount {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ── Badges — pill style ── */
.badge {
    padding: 3px 9px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    border: none !important;
}
.badge-green { background: rgba(16,185,129,.12); color: #059669; }
.badge-amber { background: rgba(245,158,11,.12); color: #b45309; }
.badge-red { background: rgba(239,68,68,.1);   color: #b91c1c; }
.badge-blue { background: rgba(59,130,246,.1);  color: #1d4ed8; }
.badge-violet { background: rgba(139,92,246,.1);  color: #6d28d9; }

/* ── Buttons — more native feel ── */
.btn {
    border-radius: var(--r-btn) !important;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn-primary {
    background: #10b981;
    border: none;
    box-shadow: 0 4px 14px rgba(16,185,129,.22);
}
.btn-primary:hover {
    background: #0ea371;
    box-shadow: 0 6px 20px rgba(16,185,129,.28);
    transform: translateY(-1px);
}
.btn-outline {
    border: 1.5px solid var(--border);
    color: var(--text-2);
    background: var(--surface);
}
.btn-outline:hover { border-color: var(--accent-ring); color: var(--accent-2); }
.btn-sm { border-radius: 10px !important; font-size: .78rem; }

/* ── Forms — better mobile inputs ── */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="password"], input[type="date"],
input[type="search"], input[type="url"], select, textarea {
    border-radius: 12px !important;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: .9rem;
    padding: 11px 14px;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.input-group label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
}

/* ── Modal — proper bottom sheet ── */
.modal-overlay {
    z-index: 2500;
    align-items: flex-end;
    overflow: hidden;
    overscroll-behavior: contain;
}
.modal {
    border-radius: 24px 24px 0 0 !important;
    padding: 0;
    overflow: hidden;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overscroll-behavior: contain;
}
.modal-handle {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}
.modal-header {
    padding: 14px 20px 14px;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    flex-shrink: 0;
}
.modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}
.modal-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-hover);
    border: 1.5px solid var(--border-soft);
    font-size: .85rem;
}
.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px calc(20px + var(--safe-b));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-body .form-stack > .modal-actions,
.modal > .form-stack > .modal-actions {
    grid-column: 1 / -1;
}
.modal-actions .btn {
    margin-top: 0 !important;
}
.modal-actions .modal-danger-icon {
    justify-content: center;
}
/* When modal doesn't have an explicit modal-body, apply padding to contents */
.modal > .form-stack,
.modal > div:not(.modal-handle):not(.modal-header):not(.modal-body) {
    padding: 16px 20px calc(20px + var(--safe-b));
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
html.modal-open,
body.modal-open {
    overflow: hidden;
}
@media (max-width: 767px) {
    .modal-body.modal-body-has-actions {
        padding-bottom: 0;
    }
    .modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 8;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 6px;
        margin: 12px -20px 0;
        padding: 10px 12px calc(8px + var(--safe-b));
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid var(--border-soft);
        box-shadow: 0 -16px 30px rgba(15, 23, 42, .08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .modal-actions .btn {
        flex: 1 1 9.5rem;
        width: auto !important;
        min-width: min(100%, 8rem);
        max-width: 100%;
        min-height: 40px;
        height: auto;
        padding: 9px 10px !important;
        font-size: .8rem;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
    .modal-actions .modal-primary-action {
        flex: 999 1 12rem;
    }
    .modal-actions .modal-danger-icon {
        flex: 0 0 42px;
        width: 42px !important;
        min-width: 42px;
        max-width: 42px;
        padding: 0 !important;
        font-size: .95rem;
    }
    .modal-actions > .btn:only-child,
    .modal-actions > a.btn:only-child,
    .modal-actions > button.btn:only-child {
        flex-basis: 100%;
    }
    .modal-actions > div {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
    .modal-actions > div > .btn {
        flex: 1 1 9.5rem;
        width: auto !important;
        min-width: min(100%, 8rem);
    }
    .modal-actions > div > .modal-primary-action {
        flex: 999 1 12rem;
    }
    .modal-actions > div > .modal-danger-icon {
        flex: 0 0 42px;
        width: 42px !important;
        min-width: 42px;
        max-width: 42px;
    }
}
@media (min-width: 768px) {
    .modal { border-radius: 20px !important; max-height: 85dvh; }
    .modal-handle { display: none; }
}

/* ── Skeleton loader — replaces the old spinner ── */
.page-skeleton {
    padding: 4px 0;
    animation: skelPulse 1.4s ease infinite;
}
.skel-header {
    height: 28px;
    width: 55%;
    background: var(--border-soft);
    border-radius: 10px;
    margin-bottom: 20px;
}
.skel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.skel-card {
    height: 90px;
    background: var(--border-soft);
    border-radius: 18px;
}
.skel-list { display: flex; flex-direction: column; gap: 8px; }
.skel-row {
    height: 64px;
    background: var(--border-soft);
    border-radius: 14px;
}
.skel-row.short { height: 48px; }
@keyframes skelPulse{
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* ── Info banner — refined ── */
.info-banner {
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59,130,246,.07), rgba(99,102,241,.04));
    border: 1.5px solid rgba(59,130,246,.15);
    padding: 13px 15px;
    margin-bottom: 16px;
}

/* ── Empty state — more app-like ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.empty-state i {
    font-size: 2.8rem;
    color: var(--border);
    margin-bottom: 16px;
    display: block;
}
.empty-state h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
}
.empty-state p {
    font-size: .84rem;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 260px;
}

/* ── Tab bar — pill style ── */
.tab-bar {
    display: flex;
    gap: 4px;
    background: var(--border-soft);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 16px;
}
.tab-bar button {
    flex: 1;
    padding: 7px 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-3);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.tab-bar button.active {
    background: var(--surface);
    color: #0a2e1a;
    box-shadow: 0 1px 4px rgba(15,23,42,.1);
}

/* ── Page loader bar — thin top progress ── */
.page-loader-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-soft);
    z-index: 9999;
}
.page-loader-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #0a2e1a);
    animation: loaderBar 1.2s ease-in-out infinite;
}
@keyframes loaderBar{
    0%   { width: 0%;   margin-left: 0; }
    50%  { width: 60%;  margin-left: 20%; }
    100% { width: 0%;   margin-left: 100%; }
}

/* ── Form stack — better spacing ── */
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-row .input-group { min-width: 0; }

/* ── Modal form: 2 input-groups per row on all screen sizes ── */
.modal-body .form-stack,
.modal > .form-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
/* Everything except .input-group spans both columns */
.modal-body .form-stack > *,
.modal > .form-stack > * {
    grid-column: 1 / -1;
}
/* .input-group children auto-place: 2 per row */
.modal-body .form-stack > .input-group,
.modal > .form-stack > .input-group {
    grid-column: auto;
    min-width: 0;
}
/* Textareas and file-upload inputs always full width */
.modal-body .form-stack > .input-group:has(textarea),
.modal-body .form-stack > .input-group:has(.file-upload),
.modal > .form-stack > .input-group:has(textarea),
.modal > .form-stack > .input-group:has(.file-upload) {
    grid-column: 1 / -1;
}

/* ── Section header pattern (shared with dsb) ── */
.app-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.app-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}

/* ── Topbar notification dot ── */
.topbar-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    border: 1.5px solid var(--surface);
}

/* ── Toast — more polished ── */
.toast {
    z-index: 20000 !important;
    border-radius: 14px !important;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15,23,42,.16) !important;
    padding: 12px 18px !important;
    width: max-content;
    min-width: min(220px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.4;
    text-align: left;
    justify-content: flex-start;
    border-radius: 16px !important;
    bottom: calc(var(--bnav-h) + var(--safe-b) + 16px);
}
.toast.error,
.toast.danger {
    background: #dc2626;
    color: #fff;
}

/* ── Quick actions sheet ── */
.qa-item {
    border-radius: 14px;
    padding: 14px 10px;
    border: 1.5px solid var(--border-soft);
    gap: 8px;
}
.qa-item i { font-size: 1.3rem; }

/* ── Page-level back navigation ── */
.page-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-2);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}
.page-back-btn:hover { color: var(--accent-2); }
.page-back-btn i { font-size: 1.1rem; }

/* ── Progress bar component ── */
.progress-bar-wrap {
    height: 6px;
    background: var(--border-soft);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s var(--ease-out);
}
.progress-bar-fill.green { background: linear-gradient(90deg, #10b981, #059669); }
.progress-bar-fill.amber { background: linear-gradient(90deg, #f59e0b, #d97706); }
.progress-bar-fill.red { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* ── Sidebar — small refinements ── */
.sidebar { border-right: 1px solid var(--border-soft); }
.nav-item {
    border-radius: 12px;
    padding: 9px 12px;
    font-size: .87rem;
}
.nav-subitem {
    margin-left: 10px;
    padding: 8px 12px 8px 24px;
    font-size: .84rem;
}
.nav-subitem i {
    font-size: .9rem;
    opacity: .55;
}
.nav-item.active {
    background: rgba(16,185,129,.1);
    color: #0a2e1a;
}
.nav-item.active i { color: #0a2e1a; opacity: 1; }
.nav-item.active::before {
    background: linear-gradient(180deg, #10b981, #0a2e1a);
    left: 0;
    border-radius: 0 3px 3px 0;
    width: 3px;
}

/* ── Desktop polish ── */
@media (min-width: 768px) {
    .page-title { font-size: 1.35rem; }
    .card { border-radius: 20px !important; }
    .data-item { border-radius: 16px !important; padding: 14px 18px; }
    .stat-card { padding: 20px; }
    .card-value { font-size: 1.8rem; }
}

/* ---- Product image carousel (marketplace) ---- */
.mp-img-carousel { position: relative; width: 100%; overflow: hidden; background: var(--bg-soft); border-radius: 14px 14px 0 0; }
.mp-img-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; gap: 0; }
.mp-img-carousel-track::-webkit-scrollbar { display: none; }
.mp-carousel-img { flex: 0 0 100%; width: 100%; max-height: 38vw; object-fit: cover; scroll-snap-align: start; cursor: zoom-in; }
.mp-img-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 4px; background: var(--bg-soft); }
.mp-img-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s; }
.mp-img-dot.active { background: var(--primary); }
.mp-product-img { width: 100%; max-height: 55vw; object-fit: cover; border-radius: 14px 14px 0 0; display: block; }
.mp-product-img-placeholder { height: 30vw; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border-radius: 14px 14px 0 0; }

@media (min-width: 992px) {
    .mp-carousel-img {max-height:300px}
}

/* ══════════════ Marketplace Homepage Redesign ══════════════ */
/* Hero carousel */
.mp-hero-carousel-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 0 0 20px 20px; margin-bottom: 0; background: #1e1b4b; }
.mp-hero-track { position: relative; width: 100%; }
.mp-hero-slide { position: relative; width: 100%; min-height: 260px; display: none; align-items: center; background: linear-gradient(135deg,#1e1b4b,#4338ca); }
.mp-hero-slide.active { display: flex; }
.mp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 60%, transparent 100%); }
.mp-hero-content { position: relative; z-index: 2; padding: 32px 20px 56px; color: #fff; }
.mp-hero-title { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 8px; font-family: var(--font-display); }
.mp-hero-sub { font-size: .88rem; opacity: .85; margin-bottom: 18px; line-height: 1.5; }
.mp-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); padding: 4px 12px; border-radius: 100px; font-size: .78rem; font-weight: 700; margin-bottom: 12px; }
.mp-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background .2s; }
.mp-hero-arrow:hover { background: rgba(255,255,255,.35); }
.mp-hero-prev { left: 12px; }
.mp-hero-next { right: 12px; }
.mp-hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.mp-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .2s; }
.mp-hero-dot.active { background: #fff; width: 22px; border-radius: 4px; }

/* Section headers */
.mp-section-hdr { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 8px; font-weight: 700; font-size: .95rem; color: var(--text); }
.mp-section-hdr .btn-link { font-size: .82rem; color: var(--accent); font-weight: 700; background: none; border: none; cursor: pointer; padding: 0; }

/* Horizontal scroll rows */
.mp-hscroll-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.mp-hscroll-row::-webkit-scrollbar { display: none; }
.mp-hscroll-skeleton { width: 140px; height: 200px; border-radius: 14px; background: var(--bg-soft); flex-shrink: 0; animation: shimmer 1.2s infinite; }

/* Mini product cards (horizontal scroll) */
.mp-mini-card { flex: 0 0 140px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-light); overflow: hidden; cursor: pointer; scroll-snap-align: start; transition: box-shadow .15s; }
.mp-mini-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.mp-mini-img { width: 100%; height: 130px; position: relative; background: var(--bg-soft); }
.mp-mini-info { padding: 8px 10px 10px; }
.mp-mini-name { font-size: .8rem; font-weight: 700; line-height: 1.3; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp-mini-price { font-size: .85rem; font-weight: 700; color: var(--accent); margin-top: 4px; }

/* Store cards (horizontal scroll) */
.mp-store-mini-card { flex: 0 0 150px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-light); overflow: hidden; cursor: pointer; scroll-snap-align: start; transition: box-shadow .15s; }
.mp-store-mini-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.mp-store-mini-banner { width: 100%; height: 70px; background: var(--bg-soft); }
.mp-store-mini-body { padding: 8px 10px 12px; text-align: center; }
.mp-store-mini-logo { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; margin: -24px auto 6px; border: 2px solid var(--surface); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; }
.mp-store-mini-logo img { width: 100%; height: 100%; object-fit: cover; }
.mp-store-mini-name { font-size: .82rem; font-weight: 700; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-store-mini-sub { font-size: .74rem; color: var(--text-3); margin-top: 2px; }

/* Category banner */
.mp-cat-banner { width: 100%; height: 120px; border-radius: 14px; margin-bottom: 4px; background: var(--bg-soft); }
.mp-cat-section { margin-bottom: 8px; }

/* Back to top */
.mp-back-top { position: fixed; bottom: calc(var(--bnav-h) + var(--fixed-btn-offset) + var(--safe-b)); right: var(--fixed-btn-offset); width: var(--fixed-btn-size); height: var(--fixed-btn-size); border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fixed-btn-icon); box-shadow: 0 4px 16px rgba(0,0,0,.18); z-index: 1100; transition: opacity .2s; }
.mp-back-top:hover { opacity: .85; }

/* Dashboard rebuild: stable columns, less whitespace, card-like hero */
.dsb-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 22px;
}

.dsb-main-column,
.dsb-side-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

.dsb-dashboard-grid .card {
    margin: 0;
}

.dsb-widget,
.dsb-qa-card {
    border-radius: 16px !important;
    padding: 14px;
}

.dsb-widget-head {
    margin-bottom: 8px;
}

.dsb-snapshot-list,
.dsb-activity-list {
    gap: 6px;
}

.dsb-snapshot-item,
.dsb-activity-item {
    padding: 10px 12px;
}

.dsb-qa-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dsb-qa-btn {
    min-height: 86px;
    padding: 12px 8px;
}

.dsb-donut {
    align-items: flex-start;
}

.dsb-donut-ring {
    width: 118px;
    height: 118px;
    flex-shrink: 0;
}

@media (min-width: 760px) {
    .dsb-dashboard-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(310px, .9fr);
        gap: 14px;
    }

    .dsb-side-column {
        position: sticky;
        top: calc(var(--topbar-h) + 12px);
    }
}

@media (min-width: 1180px) {
    .dsb-dashboard-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(340px, .85fr);
        gap: 16px;
    }

    .dsb-main-column,
    .dsb-side-column {
        gap: 14px;
    }
}

@media (max-width: 520px) {

    .dsb-qa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dsb-donut {
        align-items: stretch;
    }
}

/* Premium coupon tickets and order variation details */
.coupon-ticket-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
.coupon-ticket {min-height:152px;background:#fff;border:0;border-radius:22px;box-shadow:0 18px 42px rgba(15,23,42,.08);display:grid;grid-template-columns:minmax(130px,.9fr) 28px minmax(170px,1.1fr);align-items:stretch;overflow:hidden;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.coupon-ticket:hover {transform:translateY(-2px);box-shadow:0 22px 52px rgba(15,23,42,.12)}
.coupon-ticket-left,.coupon-ticket-right {padding:24px 22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.coupon-fire {width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f59e0b;background:rgba(245,158,11,.1);font-size:1.3rem;margin-bottom:8px}
.coupon-off {color:#2f594f;font-size:1.45rem;font-weight:700;line-height:1.1}
.coupon-sub,.coupon-date {color:#6b7280;font-size:.9rem;margin-top:8px}
.coupon-ticket-cut {position:relative;background:radial-gradient(circle at 50% 0,#eef2f7 0 18px,transparent 19px),radial-gradient(circle at 50% 100%,#eef2f7 0 18px,transparent 19px)}
.coupon-ticket-cut::after {content:"";position:absolute;top:28px;bottom:28px;left:50%;border-left:2px dashed #d7dce3;transform:translateX(-50%)}
.coupon-code-pill {min-width:180px;max-width:100%;padding:12px 20px;border-radius:12px;border:2px dotted rgba(11,122,87,.65);background:rgba(11,122,87,.14);color:#07865f;font-size:1.05rem;font-weight:700;text-transform:uppercase;overflow-wrap:anywhere}
.coupon-actions {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.order-variation-pill {display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:4px 9px;border-radius:999px;background:rgba(245,158,11,.12);color:#9a5b00;font-size:.76rem;font-weight:700}
.order-variation-mod {color:#0b7a57;font-weight:700;font-size:.76rem}
@media (max-width:560px) {
    .coupon-ticket-grid {grid-template-columns:1fr;gap:12px}
    .coupon-ticket {min-height:138px;grid-template-columns:minmax(112px,.9fr) 22px minmax(130px,1.1fr);border-radius:18px}
    .coupon-ticket-left,.coupon-ticket-right {padding:18px 12px}
    .coupon-off {font-size:1.15rem}
    .coupon-code-pill {min-width:0;width:100%;font-size:.9rem;padding:10px 12px}
    .coupon-sub,.coupon-date {font-size:.78rem}
}

/* Business, CRM, and Finance workspace polish */
#page-content {
    max-width: 1180px;
    margin: 0 auto;
}

.page-header {
    gap: 12px;
    align-items: center;
    padding: 14px 0 12px;
}

.page-title {
    letter-spacing: 0;
    line-height: 1.15;
}

.section-label {
    margin: 18px 0 10px;
    letter-spacing: .02em;
    color: var(--text-2);
}

.card,
.data-list,
.empty-state,
.info-banner {
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.card {
    border-radius: 16px !important;
}

.data-list {
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
}

.data-item {
    min-height: 66px;
    padding: 14px 16px !important;
    border-color: rgba(15, 23, 42, .07) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05) !important;
    transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}

.data-item:hover {
    background: #f8fafc !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .09) !important;
}

.data-item-title {
    line-height: 1.25;
    letter-spacing: 0;
}

.data-item-sub {
    line-height: 1.45;
}

.data-item-amount {
    letter-spacing: 0;
}

.stat-grid {
    gap: 12px;
}

.stat-card {
    min-height: 116px;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.table-wrap,
.table-card {
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.btn,
.btn-sm,
.badge,
.tag,
input,
select,
textarea {
    letter-spacing: 0 !important;
}

.input-row {
    gap: 12px;
}

.input-group input,
.input-group select,
.input-group textarea {
    border-color: rgba(15, 23, 42, .12) !important;
    background: #fff;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 64%, white) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.tabs {
    gap: 6px;
    background: #f8fafc;
    padding: 5px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .07);
}

.tabs button {
    border-radius: 10px !important;
}

@media (min-width: 900px) {
    .page-header {
        min-height: 54px;
    }

    .data-list.compact-grid,
    .settings-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    #page-content {
        max-width: none;
    }

    .page-header {
        padding-top: 8px;
    }

    .data-item {
        padding: 13px 14px !important;
    }
}

.menu-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.menu-manager-section + .menu-manager-section {
    margin-top: 18px;
}

.menu-manager-card {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
    overflow: hidden;
}

.menu-manager-head,
.menu-manager-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.menu-manager-head {
    padding: 14px 16px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-light);
}

.menu-manager-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text);
    font-weight: 700;
}

.menu-manager-title i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--accent);
    background: var(--accent-soft);
    flex-shrink: 0;
}

.menu-manager-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-manager-list {
    display: grid;
}

.menu-manager-item {
    min-height: 58px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
}

.menu-manager-item:first-child {
    border-top: 0;
}

.menu-manager-item-main {
    min-width: 0;
}

.menu-manager-item-title {
    color: var(--text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-manager-item-page {
    margin-top: 2px;
    color: var(--text-3);
    font-size: .76rem;
    font-weight: 700;
}

.menu-toggle-control {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.menu-toggle-control input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
}

.menu-toggle-control span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
    transition: background .16s var(--ease), box-shadow .16s var(--ease);
    pointer-events: none;
}

.menu-toggle-control span::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    transition: transform .16s var(--ease);
}

.menu-toggle-control input:checked + span {
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04), 0 6px 14px rgba(16, 185, 129, .18);
}

.menu-toggle-control input:checked + span::after {
    transform: translateX(20px);
}

.menu-toggle-control input:focus-visible + span {
    outline: 3px solid var(--accent-ring);
    outline-offset: 3px;
}

.menu-toggle-control.locked {
    opacity: .56;
    cursor: default;
}

.menu-toggle-control.locked input {
    cursor: not-allowed;
}

.bottom-menu-settings-card {
    margin-bottom: 14px;
}

.bottom-menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-size: .76rem;
    font-weight: 700;
}

.bottom-menu-body {
    padding: 14px 16px 16px;
}

.bottom-menu-fixed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: clamp(8px,2.4vw,10px) clamp(10px,3vw,12px);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 700;
}

.bottom-menu-fixed span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: clamp(.78rem, 2.8vw, .9rem);
}

.bottom-menu-fixed small {
    color: var(--text-3);
    font-size: clamp(.62rem, 2.2vw, .72rem);
    font-weight: 700;
    text-transform: uppercase;
}

.bottom-menu-choice-section + .bottom-menu-choice-section {
    margin-top: 14px;
}

.bottom-menu-section-title {
    margin: 0 0 8px;
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bottom-menu-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.bottom-menu-choice-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: clamp(48px, 13vw, 56px);
    padding: clamp(8px, 2.6vw, 10px);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}

.bottom-menu-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bottom-menu-choice-card.selected {
    border-color: var(--accent-ring);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .1);
}

.bottom-menu-choice-card.disabled:not(.selected) {
    opacity: .48;
    cursor: not-allowed;
}

.bottom-menu-choice-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--accent);
    flex: 0 0 auto;
}

.bottom-menu-choice-text {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.bottom-menu-choice-text strong,
.bottom-menu-choice-text small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-menu-choice-text strong {
    color: var(--text);
    font-size: .86rem;
}

.bottom-menu-choice-text small {
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 700;
}

.bottom-menu-choice-check {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    opacity: 0;
    transform: scale(.82);
    transition: opacity .15s var(--ease), transform .15s var(--ease);
    flex: 0 0 auto;
}

.bottom-menu-choice-card.selected .bottom-menu-choice-check {
    opacity: 1;
    transform: scale(1);
}

.bottom-menu-preview {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin-top: 14px;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-alt);
}

.bottom-menu-preview-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-3);
    font-size: .62rem;
    font-weight: 700;
}

.bottom-menu-preview-item i {
    font-size: 1rem;
}

.bottom-menu-preview-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-menu-preview-item.fixed {
    color: var(--accent-2);
}

.bottom-menu-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

@media (max-width: 520px) {
    .menu-manager-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-manager-head,
    .menu-manager-item {
        padding-left: 12px;
        padding-right: 12px;
    }

    .bottom-menu-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .bottom-menu-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.withdrawal-account-page {
    display: grid;
    gap: 16px;
}

.wa-page-header {
    align-items: flex-start;
}

.wa-page-header .btn {
    flex-shrink: 0;
}

.wa-kicker {
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wa-hero,
.wa-status-panel,
.wa-form-panel,
.wa-guidance-panel,
.wa-support-strip,
.wa-detail-card {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: var(--surface);
}

.wa-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(16, 185, 129, .1), rgba(59, 130, 246, .08)),
        var(--surface);
}

.wa-hero-icon,
.wa-status-icon,
.wa-guidance-icon,
.wa-support-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.wa-hero-icon {
    color: #047857;
    background: rgba(16, 185, 129, .14);
    font-size: 1.25rem;
}

.wa-hero h1,
.wa-panel-head h2,
.wa-status-copy h2,
.wa-guidance-head h3 {
    margin: 0;
    color: var(--text);
    letter-spacing: 0;
    line-height: 1.18;
}

.wa-hero h1 {
    font-size: 1.12rem;
    font-weight: 700;
}

.wa-hero p,
.wa-status-copy p {
    margin: 5px 0 0;
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.5;
}

.wa-status-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.wa-status-panel.is-verified {
    background: rgba(16, 185, 129, .06);
}

.wa-status-panel.is-review {
    background: rgba(245, 158, 11, .06);
}

.wa-status-panel.is-verified .wa-status-icon {
    color: #047857;
    background: rgba(16, 185, 129, .14);
}

.wa-status-panel.is-review .wa-status-icon {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.wa-status-copy {
    min-width: 0;
}

.wa-status-copy h2,
.wa-panel-head h2 {
    margin-top: 3px;
    font-size: 1.2rem;
    font-weight: 700;
}

.wa-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.wa-status-badge.is-verified {
    color: #047857;
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .22);
}

.wa-status-badge.is-review {
    color: #b45309;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .25);
}

.wa-status-badge.is-draft {
    color: #1d4ed8;
    background: rgba(59, 130, 246, .1);
    border: 1px solid rgba(59, 130, 246, .2);
}

.wa-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.wa-detail-card {
    min-height: 86px;
    padding: 14px;
}

.wa-detail-card span {
    display: block;
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wa-detail-card strong {
    display: block;
    margin-top: 8px;
    color: var(--text);
    font-size: .95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.wa-request-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: var(--surface);
}

.wa-request-state.is-pending {
    border-color: rgba(245, 158, 11, .24);
    background: rgba(245, 158, 11, .06);
}

.wa-request-state.is-approved {
    border-color: rgba(16, 185, 129, .22);
    background: rgba(16, 185, 129, .06);
}

.wa-request-state.is-rejected {
    border-color: rgba(239, 68, 68, .2);
    background: rgba(239, 68, 68, .05);
}

.wa-request-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.wa-request-state.is-approved .wa-request-icon {
    color: #047857;
    background: rgba(16, 185, 129, .14);
}

.wa-request-state.is-rejected .wa-request-icon {
    color: #b91c1c;
    background: rgba(239, 68, 68, .12);
}

.wa-request-title {
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
}

.wa-request-text,
.wa-request-note {
    margin-top: 3px;
    color: var(--text-2);
    font-size: .84rem;
    line-height: 1.45;
}

.wa-request-note {
    color: var(--text-3);
}

.wa-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wa-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: var(--surface);
}

.wa-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #1d4ed8;
    background: rgba(59, 130, 246, .1);
}

.wa-action-icon.is-danger {
    color: #b91c1c;
    background: rgba(239, 68, 68, .1);
}

.wa-action-copy {
    min-width: 0;
}

.wa-action-title {
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
}

.wa-action-copy p {
    margin: 3px 0 0;
    color: var(--text-3);
    font-size: .8rem;
    line-height: 1.45;
}

.wa-support-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(245, 158, 11, .06);
    border-color: rgba(245, 158, 11, .2);
}

.wa-support-icon {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.wa-support-body {
    flex: 1;
    min-width: 0;
}

.wa-support-title {
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
}

.wa-support-text {
    margin-top: 2px;
    color: var(--text-2);
    font-size: .84rem;
    line-height: 1.45;
}

.wa-setup-layout {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.45fr);
    gap: 14px;
    align-items: start;
}

.wa-guidance-panel,
.wa-form-panel {
    padding: 18px;
}

.wa-guidance-panel {
    display: grid;
    gap: 16px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .025), rgba(16, 185, 129, .05)),
        var(--surface);
}

.wa-guidance-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-guidance-head h3 {
    margin-top: 3px;
    font-size: 1rem;
    font-weight: 700;
}

.wa-guidance-icon {
    color: #1d4ed8;
    background: rgba(59, 130, 246, .12);
}

.wa-step-list {
    display: grid;
    gap: 10px;
}

.wa-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
    font-size: .86rem;
    line-height: 1.35;
}

.wa-step b {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #047857;
    background: rgba(16, 185, 129, .12);
    font-size: .78rem;
    font-weight: 700;
}

.wa-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border-radius: 8px;
    color: #1d4ed8;
    background: rgba(59, 130, 246, .08);
    font-size: .82rem;
    line-height: 1.45;
}

.wa-form-panel {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.wa-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.wa-type-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-alt);
}

.wa-type-segment button {
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-2);
    background: transparent;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}

.wa-type-segment button:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .7);
}

.wa-type-segment button.active {
    color: #047857;
    background: #fff;
    box-shadow: 0 1px 8px rgba(15, 23, 42, .08);
}

.wa-submit {
    margin-top: 2px;
}

.wa-submit .btn-text,
.wa-submit .btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 860px) {
    .wa-setup-layout {
        grid-template-columns: 1fr;
    }

    .wa-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .wa-page-header {
        align-items: stretch;
    }

    .wa-page-header,
    .wa-hero,
    .wa-status-panel,
    .wa-panel-head {
        grid-template-columns: 1fr;
    }

    .wa-page-header,
    .wa-hero,
    .wa-panel-head {
        flex-direction: column;
    }

    .wa-hero,
    .wa-status-panel,
    .wa-support-strip,
    .wa-guidance-head,
    .wa-action-card {
        align-items: flex-start;
    }

    .wa-status-panel {
        display: flex;
        flex-direction: column;
    }

    .wa-action-card {
        grid-template-columns: 1fr;
    }

    .wa-status-badge {
        align-self: flex-start;
    }

    .wa-type-segment {
        grid-template-columns: 1fr;
    }
}

/* Shell safety: keep fixed header/sidebar from covering backend pages */
:root {
    --app-shell-bottom:calc(var(--bnav-h) + max(var(--safe-b), env(safe-area-inset-bottom, 0px)));
}

#main-app {
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
}

#main-app .page-content {
    position:fixed;
    top:var(--topbar-h);
    right:0;
    bottom:var(--app-shell-bottom);
    left:0;
    width: 100%;
    max-width: none !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    height: auto;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scroll-padding-top: 16px;
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}

#main-app .page-content > * {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    #main-app .topbar {
        left: 0;
        right: 0;
    }

    #main-app .sidebar {
        top: var(--topbar-h) !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-w) !important;
    }

    #main-app .page-content {
        left: var(--sidebar-w) !important;
        bottom: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
        padding: 28px 32px 44px !important;
    }
}

@media (max-width: 767px) {
    #main-app .topbar {
        left: 0;
        right: 0;
    }

    #main-app .sidebar {
        top: 0 !important;
        height: 100dvh;
        max-height: 100dvh;
    }

    #main-app .page-content {
        top: var(--topbar-h) !important;
        bottom: var(--app-shell-bottom) !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 18px 16px calc(var(--bnav-h) + max(var(--safe-b), env(safe-area-inset-bottom, 20px)) + 28px) !important;
    }

    #main-app .page-content > * {
        max-width: none;
    }
}

body.pos-fullscreen #main-app .page-content {
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height: 100dvh !important;
    margin-top: 0 !important;
}

/* POS variation picker — locked, tappable chips (never a dropdown) so the
   cashier selects options in one tap on a tablet. */
.pos-var-modal {gap:16px}
.pos-var-head {
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;border:1px solid var(--border-light);border-radius:var(--r-md);
    background:var(--surface-alt);
}
.pos-var-head-name {font-weight:700;color:var(--text);font-size:.98rem;line-height:1.3}
.pos-var-head-price {
    flex-shrink:0;font-size:.8rem;font-weight:700;color:var(--text-3);
    display:flex;align-items:baseline;gap:6px;white-space:nowrap;
}
.pos-var-head-price span {font-size:1.12rem;font-weight:800;color:var(--accent-2)}
.pos-var-group + .pos-var-group {margin-top:4px}
.pos-var-label {
    display:inline-flex;align-items:center;gap:7px;
    margin-bottom:9px;padding:5px 11px;border-radius:999px;
    background:var(--accent-soft);
    font-weight:800;font-size:.72rem;color:var(--text);
    text-transform:uppercase;letter-spacing:.05em;
}
.pos-var-label::before {
    content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;
    background:var(--accent);
}
.pos-var-chips {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
    gap:8px;
}
.pos-var-chip {
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:48px;padding:7px 10px;
    border:2px solid var(--border);border-radius:var(--r-md);
    background:var(--surface);color:var(--text);
    font-weight:700;line-height:1.2;text-align:center;cursor:pointer;
    transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease),transform .1s var(--ease);
    -webkit-tap-highlight-color:transparent;user-select:none;
}
.pos-var-chip:hover:not(:disabled):not(.active) {border-color:var(--accent);color:var(--accent)}
.pos-var-chip:active:not(:disabled) {transform:scale(.97)}
.pos-var-chip.active {
    border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
    box-shadow:0 0 0 2px var(--accent-soft);
}
.pos-var-chip:disabled {
    opacity:.5;cursor:not-allowed;background:var(--surface-alt);
    border-style:dashed;
}
.pos-var-chip:disabled .pos-var-chip-val {text-decoration:line-through}
.pos-var-chip-val {font-size:.86rem;font-weight:750}
.pos-var-chip-meta {font-size:.66rem;font-weight:700;color:var(--text-3)}
.pos-var-chip.active .pos-var-chip-meta {color:var(--accent);opacity:.85}

/* Slightly roomier tap targets on tablet-width screens */
@media (min-width:641px) {
    .pos-var-chips {grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
    .pos-var-chip {min-height:54px}
    .pos-var-chip-val {font-size:.92rem}
}

/* Delivery management workspace */
.delivery-console,
.admin-delivery-shell {
    display: grid;
    gap: 16px;
}

.delivery-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: linear-gradient(135deg, #fff 0%, #eefaf4 58%, #eff6ff 100%);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
}

.delivery-hero-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0;
}

.delivery-hero-sub {
    max-width: 760px;
    margin-top: 6px;
    color: var(--text-3);
    font-weight: 700;
    line-height: 1.45;
}

.delivery-hero-actions,
.delivery-card-actions,
.delivery-map-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.delivery-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.delivery-stat-card {
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.delivery-stat-label {
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
}

.delivery-stat-value {
    margin-top: 6px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--primary);
}

.delivery-layout,
.admin-delivery-grid {
    display: grid;
    grid-template-columns: minmax(270px, .85fr) minmax(0, 1.25fr);
    gap: 14px;
    align-items: start;
}

.admin-delivery-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
}

.admin-delivery-side {
    display: grid;
    gap: 14px;
}

.delivery-panel {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .05);
}

.delivery-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-alt);
}

.delivery-panel-title {
    font-weight: 700;
    color: var(--text);
}

.delivery-panel-sub {
    margin-top: 2px;
    font-size: .78rem;
    color: var(--text-3);
    font-weight: 700;
}

.delivery-settings-body {
    padding: 14px;
}

.delivery-card-list {
    display: grid;
}

.delivery-person-card,
.delivery-order-row,
.delivery-activity-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-top: 1px solid var(--border-light);
}

.delivery-person-card:first-child,
.delivery-order-row:first-child,
.delivery-activity-row:first-child {
    border-top: 0;
}

.delivery-person-card[onclick],
.delivery-order-row[onclick] {
    cursor: pointer;
}

.delivery-person-card[onclick]:hover,
.delivery-order-row[onclick]:hover {
    background: var(--surface-alt);
}

.delivery-person-name,
.delivery-order-ref,
.delivery-order-row .data-item-title,
.delivery-activity-action {
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.delivery-person-meta,
.delivery-order-meta,
.delivery-order-row .data-item-sub,
.delivery-activity-meta {
    margin-top: 4px;
    color: var(--text-3);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.delivery-modal {
    display: grid;
    gap: 14px;
}

.delivery-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.delivery-modal-mapbox {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-alt);
}

.delivery-map-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: var(--text-3);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
}

.delivery-map-actions {
    justify-content: flex-start;
}

.delivery-map-actions .text-muted {
    font-size: .82rem;
    font-weight: 700;
}

/* Coverage / vendor selection — clean toggle chips (no mid-word wrapping) */
.dp-coverage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.dp-coverage-tools { display: flex; align-items: center; gap: 8px; }
.dp-coverage-count {
    font-size: .72rem;
    font-weight: 800;
    color: var(--accent-2);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    border-radius: 99px;
    padding: 2px 9px;
}
.dp-coverage-link {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--accent-2);
    font-weight: 750;
    font-size: .78rem;
    padding: 2px 4px;
}
.dp-coverage-link:hover { text-decoration: underline; }
.dp-coverage-search {
    position: relative;
    margin-bottom: 8px;
}
.dp-coverage-search i {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: .9rem;
}
.dp-coverage-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: .84rem;
}

.delivery-city-grid,
.dp-vendor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
    padding: 2px;
}

.dp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 700;
    font-size: .82rem;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.dp-chip:hover { border-color: var(--accent-ring); }
.dp-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dp-chip-tick {
    font-size: .78rem;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity .12s ease, max-width .12s ease;
}
.dp-chip:has(input:checked) {
    border-color: var(--accent-2);
    background: var(--accent-soft);
    color: var(--accent-2);
}
.dp-chip:has(input:checked) .dp-chip-tick { opacity: 1; max-width: 16px; }
.dp-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(5, 150, 105, .14); }

.dp-vendor-hint {
    font-size: .78rem;
    color: var(--text-3);
    font-weight: 600;
    margin-bottom: 8px;
}

.dp-coverage-add {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.dp-coverage-add input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: .84rem;
}
.dp-coverage-add input:focus {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .14);
    outline: none;
}
.dp-coverage-add .btn { flex-shrink: 0; }
/* Custom (user-added) chips read as active-by-default via a dashed edge */
.dp-chip-custom:not(:has(input:checked)) {
    border-style: dashed;
}
.dp-chip-custom { padding-right: 8px; }
.dp-chip-x {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-3);
    padding: 0 0 0 2px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
    transition: color .12s ease;
}
.dp-chip-x:hover { color: var(--red, #ef4444); }

.delivery-modal-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 2px -2px -2px;
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface) 35%);
}

.modal:has(.delivery-modal) {
    width: min(720px, calc(100vw - 22px));
}

@media (max-width: 900px) {
    .delivery-hero,
    .delivery-layout,
    .admin-delivery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .delivery-hero {
        padding: 14px;
    }

    .delivery-hero-actions,
    .delivery-card-actions,
    .delivery-modal-actions {
        justify-content: stretch;
    }

    .delivery-hero-actions .btn,
    .delivery-card-actions .btn,
    .delivery-modal-actions .btn {
        width: 100%;
    }

    .delivery-stat-grid,
    .delivery-modal-grid,
    .delivery-person-card,
    .delivery-order-row,
    .delivery-activity-row {
        grid-template-columns: 1fr;
    }

    .delivery-panel-head {
        align-items: flex-start;
    }

    .delivery-modal-actions {
        display: grid;
    }

    .modal:has(.delivery-modal) {
        width: 100%;
        max-width: 100%;
        max-height: 94dvh;
    }
}

/* ═══════════════════════════════════════════════════════
   PAGE UI ENHANCEMENTS — Orders, Products, Inventory,
   Invoices, Deliveries, Storefront, Customer Carts
   ═══════════════════════════════════════════════════════ */

/* ── Command Bar (search + actions row) ─────────────── */
.cmd-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.cmd-bar-search {
    flex: 1; min-width: 180px; position: relative;
    display: flex; align-items: center;
}
.cmd-bar-search i {
    position: absolute; left: 12px; color: var(--text-3); font-size: .95rem; pointer-events: none;
}
.cmd-bar-search input {
    width: 100%; padding: 9px 12px 9px 36px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); font-size: .88rem;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.cmd-bar-search input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.cmd-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Transaction page search + filter (sales / expenses / purchases) ── */
.txn-toolbar {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: nowrap;
    margin: 0 0 14px;
}
.txn-search {
    position: relative; display: flex; align-items: center;
    flex: 1 1 auto; min-width: 0; margin: 0;
}
.txn-search-ico {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: .95rem; line-height: 1; pointer-events: none;
}
.txn-search-input {
    width: 100%; height: 44px; padding: 0 40px 0 40px;
    border: 1px solid var(--border); border-radius: var(--r-md, 12px);
    background: var(--surface); font: inherit; font-size: .9rem; color: var(--text);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
#sales-search, #purchases-search, #expenses-search { padding-left: 34px; }
.txn-search-input::placeholder { color: var(--text-3); }
.txn-search-input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring, var(--accent-soft));
}
.txn-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; background: transparent;
    color: var(--text-3); cursor: pointer; font-size: 1rem; border-radius: 999px;
    transition: color .15s, background .15s;
}
.txn-search-clear:hover { color: var(--red); background: var(--surface-hover); }

/* Dimension filter dropdown (payment method / category / status) */
.txn-filter-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.txn-filter-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: .9rem; line-height: 1; pointer-events: none;
}
.txn-filter-caret {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: .8rem; line-height: 1; pointer-events: none;
}
.txn-filter-select {
    height: 44px; min-width: 168px; max-width: 260px;
    padding: 0 30px 0 34px;
    border: 1px solid var(--border); border-radius: var(--r-md, 12px);
    background: var(--surface); font: inherit; font-size: .88rem; font-weight: 600; color: var(--text);
    cursor: pointer; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.txn-filter-select:hover { border-color: var(--border-strong, var(--border)); }
.txn-filter-select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring, var(--accent-soft));
}
@media (max-width: 520px) {
    /* Keep search + filter on one row, just tighten the dropdown. */
    .txn-toolbar { gap: 8px; }
    .txn-filter-select { min-width: 128px; max-width: 148px; padding-left: 30px; font-size: .84rem; }
    .txn-filter-ico { left: 10px; font-size: .82rem; }
}
/* Two or more dropdowns (e.g. /sales: payment method + money state) need room:
   the search claims its own row and the dropdowns share the next one. */
.txn-toolbar--multi { flex-wrap: wrap; }
@media (max-width: 860px) {
    .txn-toolbar--multi .txn-search { flex: 1 0 100%; }
    .txn-toolbar--multi .txn-filter-wrap { flex: 1 1 0; min-width: 0; }
    .txn-toolbar--multi .txn-filter-select { min-width: 0; max-width: none; width: 100%; }
}

/* ── Stat Strip (horizontal scrollable KPIs) ─────────── */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px; margin-bottom: 20px;
}
.stat-strip-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 14px 16px;
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.stat-strip-card .ssc-label {
    font-size: .72rem; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .06em;
}
.stat-strip-card .ssc-value {
    font-family: var(--font-display); font-size: 1.45rem;
    font-weight: 700; color: var(--text); letter-spacing: -.03em; line-height: 1;
}
.stat-strip-card .ssc-sub {
    font-size: .75rem; color: var(--text-3); font-weight: 500; margin-top: 2px;
}
.stat-strip-card .ssc-icon {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 1.6rem; opacity: .22;
}

/* ── Page Layout (main + sidebar) ───────────────────── */
.page-layout {
    display: block;
}
@media (min-width: 1024px) {
    .page-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 18px; align-items: start;
    }
    .page-layout.wide { grid-template-columns: 1fr 340px; }
}
@media (min-width: 1280px) {
    .page-layout { grid-template-columns: 1fr 320px; }
    .page-layout.wide { grid-template-columns: 1fr 380px; }
}
.page-layout-side { display: none; }
@media (min-width: 1024px) {
    .page-layout-side { display: block; }
}

/* ── Order Card (enhanced) ──────────────────────────── */
.order-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 0; overflow: hidden; cursor: pointer;
    transition: all .18s var(--ease);
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column;
}
.order-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border); }
.order-card-accent {
    height: 3px; background: var(--oc-color, var(--accent));
    flex-shrink: 0;
}
.order-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.order-card-top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.order-card-ref {
    font-weight: 700; font-size: .93rem; color: var(--text); letter-spacing: -.01em;
}
.order-card-meta {
    display: flex; justify-content: space-between; align-items: center;
}
.order-card-customer {
    font-size: .82rem; color: var(--text-2); font-weight: 500;
    display: flex; align-items: center; gap: 5px;
}
.order-card-amount {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; letter-spacing: -.02em; color: var(--text);
}
.order-card-foot {
    font-size: .75rem; color: var(--text-3); border-top: 1px solid var(--border-light);
    padding-top: 8px; display: flex; align-items: center; justify-content: space-between;
}
/* order list grid for large screens */
.orders-grid {
    display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 1024px) {
    .orders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (min-width: 1400px) {
    .orders-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Orders Summary Sidebar ─────────────────────────── */
.orders-sidebar-section {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-xs);
    margin-bottom: 14px;
}
.orders-sidebar-section .oss-title {
    font-weight: 700; font-size: .88rem; color: var(--text);
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.status-legend { display: flex; flex-direction: column; gap: 8px; }
.status-legend-item {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .83rem;
}
.status-legend-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; margin-right: 6px; flex-shrink: 0;
}

/* ── Invoice Cards (enhanced) ───────────────────────── */
.invoice-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); overflow: hidden;
    box-shadow: var(--shadow-xs); margin-bottom: 10px;
    transition: all .15s var(--ease);
}
.invoice-card:hover { box-shadow: var(--shadow-md); }
.invoice-card-stripe {
    height: 100%; width: 4px; border-radius: 0; flex-shrink: 0;
    background: var(--ic-color, var(--accent));
}
.invoice-card-inner {
    display: flex; gap: 0; min-height: 86px;
}
.invoice-card-content {
    flex: 1; padding: 14px 16px; display: flex;
    flex-direction: column; gap: 6px;
}
.invoice-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.invoice-card-num {
    font-weight: 700; color: var(--primary); font-size: .95rem;
}
.invoice-card-amount {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem; letter-spacing: -.02em;
}
.invoice-card-customer {
    font-size: .82rem; color: var(--text-2); font-weight: 500;
}
.invoice-card-actions {
    display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px;
    border-top: 1px solid var(--border-light); padding-top: 10px;
}
/* 2-col invoice grid on large screens */
.invoices-grid {
    display: flex; flex-direction: column; gap: 0;
}
@media (min-width: 1100px) {
    .invoices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .invoices-grid .invoice-card { margin-bottom: 0; }
}

/* ── Product Grid Enhancements ──────────────────────── */
.products-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) { .products-page-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) { .products-page-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (min-width: 1200px) { .products-page-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1500px) { .products-page-grid { grid-template-columns: repeat(6, 1fr); }
}

.prod-card-v2 {
    background: var(--surface); border-radius: var(--r-md);
    overflow: hidden; cursor: pointer;
    transition: all .2s var(--ease);
    box-shadow: var(--shadow-xs); border: 1px solid var(--border-soft);
    display: flex; flex-direction: column; position: relative;
}
.prod-card-v2:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border); }
.prod-card-v2:active { transform: translateY(0); }
.prod-card-v2 .pcv-img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    background: var(--surface-alt); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.prod-card-v2 .pcv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@supports not (aspect-ratio: 1 / 1) {
    .product-img,
    .prod-card-v2 .pcv-img,
    .mp2-img-square {
        height: min(44vw, 180px);
    }
}
.prod-card-v2 .pcv-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.prod-card-v2 .pcv-name {
    font-weight: 700; font-size: .78rem; color: var(--text); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-card-v2 .pcv-price {
    font-family: var(--font-display); font-size: .97rem; font-weight: 700;
    color: var(--accent-2); letter-spacing: -.015em;
}
.prod-card-v2 .pcv-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.prod-card-v2 .pcv-feat {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.prod-card-v2 .pcv-promote {
    margin: 0 12px 10px; font-size: .75rem; border-radius: var(--r-sm); padding: 6px;
}

/* ── Category filter chips ──────────────────────────── */
.category-chips {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 4px; margin-bottom: 14px;
    scrollbar-width: none;
}
.category-chips::-webkit-scrollbar { display: none; }
.cat-chip {
    flex-shrink: 0; padding: 6px 14px; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); transition: all .15s;
    white-space: nowrap;
}
.cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cat-chip.active {
    background: var(--accent); color: #fff;
    border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-glow);
}

/* ── Products Page v3 ───────────────────────────────── */
.prod-stats-bar {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px;
}
@media (min-width: 600px) { .prod-stats-bar { grid-template-columns: repeat(4, 1fr); }
}
.prod-stat-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 13px 14px;
    box-shadow: var(--shadow-xs); display: flex; align-items: center; gap: 11px;
    transition: box-shadow .15s;
}
.prod-stat-card:hover { box-shadow: var(--shadow-md); }
.prod-stat-icon {
    width: 38px; height: 38px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.prod-stat-label {
    font-size: .68rem; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .05em; line-height: 1;
}
.prod-stat-value {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    color: var(--text); letter-spacing: -.025em; line-height: 1.2; margin-top: 2px;
}
.prod-stat-sub { font-size: .7rem; color: var(--text-3); margin-top: 2px; }

.prod-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.prod-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.prod-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.prod-search-wrap { position: relative; flex: 1; min-width: 160px; max-width: 340px; }
.prod-search-wrap .search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: .9rem; pointer-events: none;
}
.prod-search-wrap input {
    width: 100%; padding: 8px 34px 8px 32px;
    border: 1px solid var(--border); border-radius: var(--r-full);
    font-size: .83rem; background: var(--surface); color: var(--text);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.prod-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.prod-search-wrap .search-clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-3); cursor: pointer;
    font-size: .9rem; padding: 2px; line-height: 1; transition: color .15s;
}
.prod-search-wrap .search-clear:hover { color: var(--red); }

.prod-sort-select {
    padding: 8px 28px 8px 10px; border: 1px solid var(--border);
    border-radius: var(--r-sm); font-size: .79rem; font-weight: 600;
    background: var(--surface); color: var(--text-2); cursor: pointer;
    outline: none; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
    transition: border-color .15s;
}
.prod-sort-select:focus { border-color: var(--accent); outline: none; }

.view-toggle {
    display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.view-toggle-btn {
    padding: 7px 11px; background: var(--surface); border: none;
    color: var(--text-3); cursor: pointer; font-size: .9rem;
    transition: all .15s; line-height: 1; outline: none;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn:hover { background: var(--surface-alt); color: var(--text-2); }
.view-toggle-btn.active { background: var(--accent); color: #fff; }

/* ── Stock filter tabs ── */
.stock-filter-tabs {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px; margin-bottom: 16px;
}
.stock-filter-tabs::-webkit-scrollbar { display: none; }
.stock-tab {
    flex-shrink: 0; padding: 5px 13px; border-radius: var(--r-full);
    font-size: .75rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); transition: all .15s; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}
.stock-tab:hover { border-color: var(--accent); color: var(--accent); }
.stock-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-glow); }
.stock-tab.tab-low.active { background: var(--amber); border-color: var(--amber); box-shadow: 0 2px 8px rgba(245,158,11,.3); }
.stock-tab.tab-out.active { background: var(--red); border-color: var(--red); box-shadow: 0 2px 8px rgba(239,68,68,.28); }
.stock-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; background: rgba(0,0,0,.12);
    border-radius: 99px; padding: 0 4px; font-size: .6rem; font-weight: 700;
}
.stock-tab.active .stock-tab-badge { background: rgba(255,255,255,.25); }

/* ── Product list view ── */
.prod-list-view { display: flex; flex-direction: column; gap: 5px; }
.prod-list-row {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all .15s var(--ease);
    box-shadow: var(--shadow-xs);
}
.prod-list-row:hover { box-shadow: var(--shadow-md); border-color: var(--border); transform: translateX(2px); }
.prod-list-thumb {
    width: 46px; height: 46px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0;
    background: var(--surface-alt); display: flex; align-items: center;
    justify-content: center; color: var(--text-3); font-size: 1.2rem;
}
.prod-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-list-info { flex: 1; min-width: 0; }
.prod-list-name {
    font-weight: 700; font-size: .84rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-list-sub { font-size: .73rem; color: var(--text-3); margin-top: 2px; }
.prod-list-price {
    font-family: var(--font-display); font-weight: 700; font-size: .92rem;
    color: var(--accent-2); letter-spacing: -.01em; flex-shrink: 0; text-align: right;
}
.prod-list-price .old-price {
    font-size: .72rem; font-weight: 500; color: var(--text-3);
    text-decoration: line-through; display: block; line-height: 1;
}

/* ── Product page pagination ── */
.prod-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 5px; flex-wrap: wrap;
}
.prod-pager-btn {
    min-width: 34px; height: 34px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-2);
    font-size: .81rem; font-weight: 700; cursor: pointer;
    transition: all .15s; display: inline-flex;
    align-items: center; justify-content: center; line-height: 1;
}
.prod-pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.prod-pager-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-glow); }
.prod-pager-btn:disabled { opacity: .38; cursor: not-allowed; }
.prod-pager-ellipsis { font-size: .82rem; color: var(--text-3); padding: 0 2px; line-height: 34px; }

/* ── Inventory Stock Rows ───────────────────────────── */
.inv-row {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 12px 16px;
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    transition: all .15s var(--ease); box-shadow: var(--shadow-xs);
}
.inv-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.inv-row-indicator {
    width: 4px; height: 40px; border-radius: 4px; flex-shrink: 0;
    background: var(--inv-color, var(--accent));
}
.inv-row-info { flex: 1; min-width: 0; }
.inv-row-name { font-weight: 700; font-size: .78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-row-bar {
    height: 5px; background: var(--border-light); border-radius: 3px;
    margin-top: 7px; overflow: hidden;
}
.inv-row-bar-fill { height: 100%; border-radius: 3px; transition: width .3s var(--ease); }
.inv-row-qty {
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
    letter-spacing: -.03em; flex-shrink: 0; min-width: 48px; text-align: right;
}
.inv-row-cat {
    font-size: .72rem; color: var(--text-3); margin-top: 2px; font-weight: 500;
}
/* 2-col inventory grid on large screens */
.inventory-list {
    display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 900px) {
    .inventory-list { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1300px) {
    .inventory-list { grid-template-columns: repeat(3, 1fr); }
}

/* ── Storefront Page ────────────────────────────────── */
.sf-store-hero {
    background: var(--primary);
    border-radius: var(--r-lg); padding: 24px; margin-bottom: 18px;
    position: relative; overflow: hidden; color: var(--text-inv);
}
.sf-store-hero::before {
    content: ''; position: absolute; top: -40%; right: -10%;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}
.sf-hero-logo {
    width: 60px; height: 60px; border-radius: 16px; overflow: hidden;
    background: rgba(255,255,255,.1); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; margin-bottom: 14px;
    border: 2px solid rgba(255,255,255,.15);
}
.sf-hero-name {
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
    letter-spacing: -.03em; line-height: 1.1;
}
.sf-hero-url {
    font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 4px;
    font-family: var(--font-mono); word-break: break-all;
}
.sf-hero-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
}
.sf-hero-btn {
    padding: 8px 16px; border-radius: var(--r-md); font-size: .82rem; font-weight: 700;
    cursor: pointer; border: none; display: flex; align-items: center; gap: 6px;
    transition: all .15s; text-decoration: none;
}
.sf-hero-btn-primary {
    background: var(--accent); color: #fff;
}
.sf-hero-btn-primary:hover { background: var(--accent-hover); }
.sf-hero-btn-outline {
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.18);
}
.sf-hero-btn-outline:hover { background: rgba(255,255,255,.18); }
.sf-stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px;
}
.sf-stat {
    background: rgba(255,255,255,.08); border-radius: var(--r-sm);
    padding: 10px; text-align: center; border: 1px solid rgba(255,255,255,.08);
}
.sf-stat-val { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.sf-stat-lbl { font-size: .65rem; color: rgba(255,255,255,.5); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 420px) {
    .sf-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .sf-stat-val { font-size: 1.1rem; }
}
.sf-settings-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 900px) {
    .sf-settings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .sf-settings-grid { grid-template-columns: repeat(3, 1fr); }
}
.sf-settings-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-xs);
}
.sf-settings-card-title {
    font-weight: 700; font-size: .92rem; color: var(--text);
    margin-bottom: 4px; display: flex; align-items: center; gap: 7px;
}
.sf-settings-card-sub {
    font-size: .8rem; color: var(--text-3); margin-bottom: 14px; line-height: 1.4;
}
.sf-settings-card-icon {
    width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem;
}

/* ── Delivery Page Enhancements ─────────────────────── */
.delivery-kpi-bar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: 18px;
}
.delivery-kpi {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 14px 16px;
    box-shadow: var(--shadow-xs); text-align: center;
    position: relative; overflow: hidden;
}
.delivery-kpi::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--dk-color, var(--accent));
}
.delivery-kpi-val {
    font-family: var(--font-display); font-size: 1.8rem;
    font-weight: 700; letter-spacing: -.04em; line-height: 1;
    color: var(--text);
}
.delivery-kpi-lbl {
    font-size: .72rem; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;
}

/* ── Cart Cards ─────────────────────────────────────── */
.cart-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 14px 16px;
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    transition: all .15s var(--ease); box-shadow: var(--shadow-xs);
}
.cart-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cart-avatar {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--indigo));
}
.cart-info { flex: 1; min-width: 0; }
.cart-name { font-weight: 700; font-size: .9rem; color: var(--text); }
.cart-meta { font-size: .76rem; color: var(--text-3); margin-top: 2px; }
.cart-right { text-align: right; flex-shrink: 0; }
.cart-amount { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; }
.cart-items { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.carts-list-v2 { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) {
    .carts-list-v2 { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1300px) {
    .carts-list-v2 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Archived Products Table Upgrade ───────────────── */
.archived-table {
    width: 100%; border-collapse: collapse; font-size: .88rem;
}
.archived-table thead tr {
    background: var(--surface-alt);
}
.archived-table th {
    padding: 10px 14px; text-align: left; font-size: .72rem;
    font-weight: 700; color: var(--text-3); text-transform: uppercase;
    letter-spacing: .06em; border-bottom: 1px solid var(--border-soft);
}
.archived-table td {
    padding: 11px 14px; border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.archived-table tbody tr {
    cursor: pointer; transition: background .1s;
}
.archived-table tbody tr:hover { background: var(--surface-hover); }
.archived-table tbody tr:last-child td { border-bottom: none; }

/* ── Empty State (v2) ───────────────────────────────── */
.empty-v2 {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 48px 24px; text-align: center;
    color: var(--text-3);
}
.empty-v2 i { font-size: 2.8rem; margin-bottom: 12px; opacity: .5; }
.empty-v2 h3 { font-size: 1rem; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.empty-v2 p { font-size: .84rem; }

/* ── Section Header (with action) ──────────────────── */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.section-head-label {
    font-size: .74rem; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .08em;
}

/* ── Pill Tabs ───────────────────────────────────────── */
.pill-tabs {
    display: flex; gap: 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
}
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tab {
    padding: 7px 18px; border-radius: 99px;
    font-size: .82rem; font-weight: 700;
    border: 1.5px solid var(--border);
    background: var(--surface); color: var(--text-2);
    cursor: pointer; white-space: nowrap;
    transition: all .15s; flex-shrink: 0;
    line-height: 1.4;
}
.pill-tab:hover { border-color: var(--text-3); color: var(--text); }
.pill-tab.active { background: #0b1220; color: #fff; border-color: #0b1220; }
/* Count riding inside a tab — tells you what the tab holds before you tap it. */
.pill-tab-n {
    display: inline-block; margin-left: 5px; padding: 0 6px;
    border-radius: 99px; background: var(--surface-hover); color: var(--text-3);
    font-size: .72rem; font-weight: 800; line-height: 1.6;
}
.pill-tab.active .pill-tab-n { background: rgba(255,255,255,.18); color: #fff; }

/* The period a document page is showing, next to its headline figures. */
.doc-range-chip {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 12px; padding: 5px 12px;
    border: 1px solid var(--accent-ring); border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-2);
    font-size: .74rem; font-weight: 750;
}
.doc-range-chip i { font-size: .8rem; }

/* ── Transaction List rows (Sales, Expenses, Purchases) ── */
.txn-list {
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--surface);
}
.txn-row {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
    transition: background .12s;
}
.txn-row:last-child { border-bottom: none; }
.txn-row:hover { background: var(--surface-hover); }
.txn-row-top { display: flex; gap: 12px; align-items: flex-start; }
.txn-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1.1rem;
}
.txn-info { flex: 1; min-width: 0; max-width: 100%; }
.txn-name {
    font-weight: 700; font-size: .93rem;
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; word-break: break-word;
    line-height: 1.32;
    color: var(--text);
}
.txn-sub {
    font-size: .78rem; color: var(--text-3); margin-top: 2px;
    overflow-wrap: anywhere; word-break: break-word;
}
.txn-right { text-align: right; flex: 0 1 42%; min-width: 104px; max-width: 180px; }
.txn-amount { font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -.02em; overflow-wrap: anywhere; }
.txn-date { font-size: .73rem; color: var(--text-3); margin-top: 2px; font-weight: 500; overflow-wrap: anywhere; }
.txn-actions { display: flex; gap: 8px; margin-top: 10px; padding-left: 56px; flex-wrap: wrap; }
.txn-actions .btn { font-size: .8rem; padding: 6px 14px; border-radius: 99px; }
.txn-list,
.txn-row,
.txn-row-top,
.exp-layout,
.pur-layout,
.exp-layout > div,
.pur-layout > div {
    min-width: 0;
    max-width: 100%;
}
.purchase-detail-items {
    table-layout: fixed;
}
.purchase-detail-items th,
.purchase-detail-items td {
    min-width: 0;
}
.purchase-detail-items .purchase-item-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}
@media (max-width: 520px) {
    .txn-row-top { flex-wrap: wrap; }
    .txn-right {
        max-width: none;
        min-width: 0;
        flex-basis: 100%;
        text-align: left;
        padding-left: 56px;
    }
}
.btn-muted {
    background: #f1f5f9; color: #334155;
    border: 1px solid #e2e8f0; font-weight: 600;
    transition: background .15s, border-color .15s;
}
.btn-muted:hover { background: #e2e8f0; border-color: #cbd5e1; color: #000; }

/* ── Responsive page header on large screens ─────── */
@media (min-width: 900px) {
    .page-header { margin-bottom: 26px; }
    .page-title { font-size: 1.75rem; }
    .stat-strip { grid-template-columns: repeat(4, 1fr); }
}

/* Pull to refresh */
.pull-refresh-indicator {
    position: fixed;
    top: calc(var(--safe-t) + 6px);
    left: 50%;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: var(--text-2);
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -58px);
    transition: opacity .18s var(--ease), transform .22s var(--ease-out), color .18s var(--ease);
}
.pull-refresh-indicator.visible {
    opacity: 1;
}
.pull-refresh-indicator.ready {
    color: var(--accent);
}
.pull-refresh-spinner {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.pull-refresh-spinner i {
    font-size: .95rem;
    line-height: 1;
}
.pull-refresh-indicator.refreshing .pull-refresh-spinner i {
    animation: spin 1s linear infinite;
}
.pull-refresh-text {
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .pull-refresh-indicator {
        background: rgba(15,23,42,.88);
        border-color: rgba(255,255,255,.10);
        color: rgba(255,255,255,.78);
    }
}

/* ══════════════ App Tour Guide ══════════════════════════════════ */
.tour-backdrop {
    position:fixed;inset:0;background:rgba(10,15,30,.72);
    z-index:1400;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    animation:tour-fade-in .25s ease;
}
.tour-card {
    position:fixed;left:50%;bottom:-100%;
    transform:translateX(-50%);
    width:min(92vw,420px);
    background:var(--surface);
    border-radius:20px;
    box-shadow:0 24px 64px -12px rgba(0,0,0,.45);
    z-index:1401;
    display:flex;flex-direction:column;
    overflow:hidden;
    transition:bottom .35s cubic-bezier(.34,1.56,.64,1);
}
.tour-card--visible { bottom:50%; transform:translateX(-50%) translateY(50%); }
.tour-card--exit { bottom:-100%; transition:bottom .3s ease; }
.tour-progress-bar {
    height:3px;background:var(--border-light);flex-shrink:0;
}
.tour-progress-fill {
    height:100%;background:var(--accent);
    transition:width .4s var(--ease);border-radius:0 3px 3px 0;
}
.tour-icon-wrap {
    width:54px;height:54px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    margin:22px auto 0;flex-shrink:0;
}
.tour-icon-wrap i { font-size:1.6rem; }
.tour-step-counter {
    text-align:center;font-size:.75rem;font-weight:700;
    color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;
    margin-top:10px;
}
.tour-title {
    text-align:center;font-size:1.15rem;font-weight:700;
    color:var(--text);margin:6px 24px 0;line-height:1.25;
}
.tour-body {
    text-align:center;font-size:.9rem;color:var(--text-2);
    line-height:1.7;margin:10px 24px 0;
}
.tour-dots {
    display:flex;align-items:center;justify-content:center;
    gap:6px;margin:16px 24px 0;flex-wrap:wrap;
}
.tour-dot {
    width:7px;height:7px;border-radius:50%;
    background:var(--border-soft);cursor:pointer;
    transition:all .2s var(--ease);flex-shrink:0;
}
.tour-dot--done { background:var(--accent);opacity:.45; }
.tour-dot--active { background:var(--accent);width:20px;border-radius:4px; }
.tour-actions {
    display:flex;align-items:center;justify-content:flex-end;
    gap:8px;padding:16px 20px 22px;flex-wrap:wrap;
}
.tour-btn-skip {
    margin-right:auto;font-size:.82rem;color:var(--text-3);
    background:none;border:none;cursor:pointer;padding:6px 0;
    font-weight:600;transition:color .15s;
}
.tour-btn-skip:hover { color:var(--text-2); }
.tour-btn-prev {
    display:flex;align-items:center;gap:5px;
    padding:8px 14px;border-radius:var(--r-sm);
    border:1.5px solid var(--border-soft);background:transparent;
    color:var(--text-2);font-size:.88rem;font-weight:600;cursor:pointer;
    transition:all .15s var(--ease);
}
.tour-btn-prev:hover { background:var(--surface-hover);color:var(--text); }
.tour-btn-next {
    display:flex;align-items:center;gap:5px;
    padding:8px 18px;border-radius:var(--r-sm);
    background:var(--accent);color:#fff;
    font-size:.88rem;font-weight:700;cursor:pointer;border:none;
    transition:all .15s var(--ease);
}
.tour-btn-next:hover { background:var(--accent-2); }
.tour-btn-finish {
    display:flex;align-items:center;gap:5px;
    padding:8px 18px;border-radius:var(--r-sm);
    background:#10b981;color:#fff;
    font-size:.88rem;font-weight:700;cursor:pointer;border:none;
    transition:all .15s var(--ease);
}
.tour-btn-finish:hover { background:#059669; }
@keyframes tour-fade-in{ from{opacity:0} to{opacity:1} }
/* Explicit z-index on card so it stays above the lifted sidebar */
.tour-card { z-index:1600; }
@media(min-width:768px) {
    .tour-card { width:min(90vw,440px); }
}

/* Sidebar lifted above tour backdrop (z-index 1400) but below card (1600) */
#sidebar[data-tour-lift] {
    z-index:1500!important;
}
/* Highlighted nav item inside the lifted sidebar */
.tour-nav-active {
    background:rgba(79,70,229,.12)!important;
    box-shadow:inset 0 0 0 2px var(--accent)!important;
    border-radius:var(--r-sm);
    position:relative;
    animation:tour-nav-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-nav-pulse{
    0%,100%{ box-shadow:inset 0 0 0 2px var(--accent),0 0 0 0 rgba(79,70,229,.0); }
    50%{ box-shadow:inset 0 0 0 2px var(--accent),0 0 0 6px rgba(79,70,229,.18); }
}
/* Sidebar hint pill inside tour card */
.tour-nav-hint {
    display:flex;align-items:center;justify-content:center;gap:4px;
    font-size:.78rem;font-weight:700;color:var(--accent);
    margin:6px 24px 0;padding:5px 12px;
    background:rgba(79,70,229,.08);
    border:1px solid rgba(79,70,229,.18);
    border-radius:var(--r-sm);
}
.tour-nav-hint i { font-size:1rem; }

/* ═══════════════ Ticket Modal ═══════════════════════════════════ */
.tkt-tabs {display:flex;border-bottom:1px solid var(--border-light);flex-shrink:0;overflow-x:auto;background:var(--surface);}
.tkt-tab {display:inline-flex;align-items:center;gap:5px;padding:9px 14px;font-size:.82rem;font-weight:700;border:none;background:none;cursor:pointer;color:var(--text-3);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0;letter-spacing:.01em;}
.tkt-tab.tkt-tab--active {color:var(--accent);border-bottom-color:var(--accent);}
.tkt-tab-count {display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--accent);color:#fff;border-radius:9px;font-size:.63rem;font-weight:700;line-height:1;flex-shrink:0;}
/* Thread layout: body switches to flex-column so only messages scroll */
.tkt-body {flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;min-height:200px;}
.tkt-body--thread {overflow:hidden;display:flex;flex-direction:column;padding:0;}
.tkt-thread-scroll {flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 14px;}

/* Intro banner */
.tkt-intro {display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:rgba(79,70,229,.07);border:1px solid rgba(79,70,229,.15);border-radius:var(--r-md);margin-bottom:20px;}
.tkt-intro-icon {font-size:1.7rem;color:var(--accent);flex-shrink:0;line-height:1.1;}
.tkt-intro-title {font-size:.88rem;font-weight:700;color:var(--text);margin:0 0 3px;}
.tkt-intro-text {font-size:.83rem;color:var(--text-2);line-height:1.55;margin:0;}

/* Form fields */
.tkt-field {margin-bottom:18px;}
.tkt-label {display:block;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-bottom:7px;}
.tkt-input,.tkt-textarea {
    width:100%;padding:11px 14px;font-size:.9rem;
    border:1.5px solid var(--border-light);border-radius:var(--r-md);
    background:var(--surface-2);color:var(--text);
    transition:border-color .15s,background .15s;
    box-sizing:border-box;font-family:inherit;
}
.tkt-input:focus,.tkt-textarea:focus {outline:none;border-color:var(--accent);background:var(--surface);}
.tkt-textarea {resize:vertical;min-height:110px;line-height:1.5;}

/* Ticket list */
.tkt-list {display:flex;flex-direction:column;gap:8px;}
.tkt-item {
    display:flex;align-items:center;gap:12px;padding:14px;
    border-radius:var(--r-md);cursor:pointer;
    border:1px solid var(--border-light);background:var(--surface);
    transition:background .12s,border-color .15s,transform .1s;
}
.tkt-item:hover {background:var(--surface-2);border-color:rgba(79,70,229,.3);transform:translateY(-1px);}
.tkt-item:active {transform:translateY(0);}
.tkt-item-icon {width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;}
.tkt-item-content {flex:1;min-width:0;}
.tkt-item-header {display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.tkt-item-subject {flex:1;min-width:0;font-weight:700;font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tkt-item-sub {font-size:.75rem;color:var(--text-3);}

/* Status badges */
.tkt-badge {display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:.67rem;font-weight:700;letter-spacing:.03em;flex-shrink:0;}
.tkt-badge--open {background:rgba(79,70,229,.1);color:var(--accent);}
.tkt-badge--in_progress {background:rgba(245,158,11,.12);color:#d97706;}
.tkt-badge--resolved {background:rgba(16,185,129,.12);color:#059669;}
.tkt-badge--closed {background:rgba(100,116,139,.1);color:var(--text-3);}

/* Thread view */
.tkt-thread {display:flex;flex-direction:column;gap:8px;}
.tkt-bubble-row {display:flex;gap:8px;align-items:flex-end;}
/* --self = current viewer's own messages → appear on the RIGHT */
.tkt-bubble-row--self {flex-direction:row-reverse;}
.tkt-bubble-row--self .tkt-bubble-meta {text-align:right;}
.tkt-avatar {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.78rem;}
.tkt-bubble-wrap {max-width:80%;}
.tkt-bubble-meta {font-size:.65rem;font-weight:600;color:var(--text-3);margin-bottom:3px;}
.tkt-bubble {padding:8px 12px;font-size:.86rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.tkt-bubble--self {border-radius:14px 4px 14px 14px;background:var(--accent);color:#fff;}
.tkt-bubble--other {border-radius:4px 14px 14px 14px;background:rgba(16,185,129,.15);color:var(--text);}
.tkt-typing-bubble {display:inline-flex;align-items:center;gap:8px;min-width:82px;}
.tkt-typing-dots {display:inline-flex;align-items:center;gap:4px;color:inherit;}
.tkt-typing-dots i {width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:tktTypingDot 1s infinite ease-in-out;}
.tkt-typing-dots i:nth-child(2) {animation-delay:.16s;}
.tkt-typing-dots i:nth-child(3) {animation-delay:.32s;}
@keyframes tktTypingDot{
    0%,80%,100%{transform:translateY(0);opacity:.35;}
    40%{transform:translateY(-3px);opacity:.95;}
}
.tkt-new-ai-typing {
    align-items:center;gap:8px;margin-top:10px;padding:10px 12px;
    border-radius:var(--r-sm);background:rgba(79,70,229,.08);
    color:var(--accent);font-size:.82rem;font-weight:700;
}
.tkt-new-ai-typing i {font-size:1rem;flex-shrink:0;}

/* Thread header */
.tkt-thread-header {
    display:flex;align-items:center;gap:8px;
    padding:9px 14px;
    border-bottom:1px solid var(--border-light);
    flex-shrink:0;
}
.tkt-back-btn {
    background:var(--surface-2);border:1px solid var(--border-light);
    cursor:pointer;padding:7px 10px;color:var(--accent);
    font-size:1rem;border-radius:var(--r-sm);
    transition:background .12s;flex-shrink:0;
    display:flex;align-items:center;
}
.tkt-back-btn:hover {background:var(--border-light);}
.tkt-thread-info {flex:1;min-width:0;}
.tkt-thread-subject {font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.tkt-thread-user {font-size:.74rem;color:var(--text-3);margin-top:2px;}

/* Status select (admin) */
.tkt-status-wrap {display:flex;align-items:center;gap:6px;flex-shrink:0;}
.tkt-status-label {font-size:.75rem;font-weight:700;color:var(--text-3);}
.tkt-status-sel {font-size:.82rem;padding:5px 10px;border-radius:var(--r-sm);border:1.5px solid var(--border-light);background:var(--surface);color:var(--text);cursor:pointer;}

/* Reply box — flex-shrink:0 keeps it pinned when parent is .tkt-body--thread */
.tkt-reply-box {border-top:1px solid var(--border-light);padding:10px 14px;flex-shrink:0;}
.tkt-human-btn {margin-bottom:8px;height:38px;font-size:.84rem;}
.tkt-human-banner {
    display:flex;align-items:center;gap:8px;margin-bottom:8px;
    padding:9px 11px;border-radius:var(--r-sm);
    background:rgba(245,158,11,.12);color:#92400e;
    font-size:.8rem;font-weight:700;line-height:1.35;
    transition:opacity .24s ease,transform .24s ease;
}
.tkt-human-banner i {font-size:1rem;flex-shrink:0;}
.tkt-human-banner--taken {background:rgba(16,185,129,.12);color:#047857;}

/* Closed banner — shown instead of reply box, flex-shrink:0 so it stays at bottom */
.tkt-closed-banner {
    text-align:center;padding:12px 18px;font-size:.83rem;color:var(--text-3);
    border-top:1px solid var(--border-light);background:var(--surface-2);
    flex-shrink:0;
}

/* Support satisfaction rating (1–5) */
.tkt-rating {
    border-top:1px solid var(--border-light);
    background:var(--surface-2,var(--surface-alt));
    padding:12px 14px;text-align:center;flex-shrink:0;
}
.tkt-rating-title {font-size:.83rem;font-weight:700;color:var(--text);margin-bottom:8px;}
.tkt-rating-stars {display:inline-flex;gap:4px;align-items:center;}
.tkt-star {
    background:none;border:0;padding:2px;cursor:pointer;line-height:1;font-size:1.5rem;
    transition:transform .12s var(--ease,ease);
}
.tkt-star i {color:#cbd5e1;transition:color .12s;}
.tkt-star--on i {color:#f5b301;}
.tkt-star:hover {transform:scale(1.15);}
.tkt-rating-note {font-size:.74rem;color:var(--text-3);margin-top:6px;}
.tkt-rating-chip {
    display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
    font-size:.78rem;color:#f5b301;margin-top:4px;
}
.tkt-rating-chip .bi {font-size:.78rem;}
.tkt-rating-chip-num {color:var(--text-2);font-weight:600;margin-left:4px;}

/* Empty state */
.tkt-empty {display:flex;flex-direction:column;align-items:center;padding:48px 20px;text-align:center;}
.tkt-empty-icon {font-size:2.4rem;color:var(--text-4,var(--text-3));margin-bottom:14px;}
.tkt-empty h3 {font-size:.95rem;font-weight:700;color:var(--text-2);margin:0 0 6px;}
.tkt-empty p {font-size:.83rem;color:var(--text-3);margin:0;}

/* ── Ticket modal height fix ────────────────────────────────────────
   Force the ticket modal to fill the available viewport so that the
   flex-column layout (thread header + scroll + reply box) works and
   the message area gets maximum height.                              */
#tickets-modal {
    height:90dvh;
    max-height:90dvh;
    overflow:hidden;
    padding-top:0;
    padding-bottom:0;
}
#tickets-modal .modal-handle {padding:6px 0 4px;}
#tickets-modal .modal-header {padding:8px 16px;margin-bottom:0;}
#tickets-modal .tkt-body {min-height:0;}
@media(min-width:768px) {
    #tickets-modal {height:min(86dvh,740px);max-height:min(86dvh,740px);}
}

/* ══════════════════ Help Page ════════════════════════════════════════ */
.help-hero {
    display:flex;align-items:center;gap:14px;
    background:linear-gradient(135deg,rgba(79,70,229,.1) 0%,rgba(139,92,246,.07) 100%);
    border:1px solid rgba(79,70,229,.15);
    border-radius:var(--r-xl);padding:18px 20px;margin-bottom:20px;
}
.help-hero-icon {
    width:52px;height:52px;border-radius:50%;flex-shrink:0;
    background:var(--accent);
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:#fff;
    box-shadow:0 4px 14px rgba(79,70,229,.35);
}
.help-hero-title {font-size:1rem;font-weight:700;color:var(--text);margin:0 0 3px;}
.help-hero-sub {font-size:.82rem;color:var(--text-2);margin:0;line-height:1.45;}

/* Active-tickets alert row */
.help-alert {
    display:flex;align-items:center;gap:12px;
    padding:13px 16px;border-radius:var(--r-lg);cursor:pointer;
    background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.22);
    transition:background .12s;margin-bottom:20px;
}
.help-alert:hover {background:rgba(245,158,11,.13);}
.help-alert-icon {width:38px;height:38px;border-radius:50%;flex-shrink:0;background:rgba(245,158,11,.18);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#d97706;}
.help-alert-body {flex:1;min-width:0;}
.help-alert-title {font-size:.88rem;font-weight:700;color:#92400e;}
.help-alert-sub {font-size:.76rem;color:#b45309;margin-top:2px;}
.help-alert-badge {min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#d97706;color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* Channel card grid */
.help-channel-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:20px;}
.help-channel-card {
    background:var(--surface);border:1px solid var(--border-light);
    border-radius:var(--r-lg);padding:16px 12px;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:8px;cursor:pointer;
    transition:border-color .15s,transform .12s,box-shadow .15s;
}
.help-channel-card:hover {border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(79,70,229,.12);}
.help-channel-card:active {transform:translateY(0);}
.help-channel-icon {width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.help-channel-title {font-size:.82rem;font-weight:700;color:var(--text);}
.help-channel-sub {font-size:.74rem;color:var(--text-3);line-height:1.4;}

/* App-guide card */
.help-guide-card {
    display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:var(--surface);border:1px solid var(--border-light);
    border-radius:var(--r-lg);cursor:pointer;
    transition:border-color .15s,background .12s;
}
.help-guide-card:hover {border-color:var(--accent);background:var(--surface-2);}
.help-guide-icon {width:40px;height:40px;border-radius:var(--r-md);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}

/* Floating action button for Help Desk Ticket */
.help-fab {
    position:fixed;
    bottom:calc(68px + var(--safe-b,0px));
    right:18px;z-index:400;
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 20px;
    background:var(--accent);color:#fff;
    border:none;border-radius:999px;
    font-size:.88rem;font-weight:700;cursor:pointer;
    box-shadow:0 4px 18px rgba(79,70,229,.45);
    transition:transform .15s,box-shadow .15s;
    white-space:nowrap;
}
.help-fab:hover {transform:translateY(-2px);box-shadow:0 8px 26px rgba(79,70,229,.5);}
.help-fab:active {transform:translateY(0);}
/* On desktop the bottom nav is hidden, move FAB lower */
@media(min-width:768px) {.help-fab {bottom:24px;}
}

/* ── Communications page ─────────────────────────────────── */
.comm-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.comm-stat {background:var(--card-bg);border:1px solid var(--border-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;}
.comm-stat--green .comm-stat-n {color:#10b981;}
.comm-stat--accent .comm-stat-n {color:var(--accent);}
.comm-stat-n {font-size:1.6rem;font-weight:700;line-height:1;color:var(--text);}
.comm-stat-l {font-size:.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;}
@media(max-width:600px) {.comm-stats {grid-template-columns:repeat(2,1fr);}
}
/* comm tab bar */
.comm-tab-bar {display:flex;gap:4px;background:var(--bg-2);border-radius:12px;padding:4px;margin-bottom:16px;}
.comm-tab {flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:none;border-radius:9px;font-size:.88rem;font-weight:600;color:var(--text-2);background:transparent;cursor:pointer;transition:all .15s;}
.comm-tab.active {background:var(--card-bg);color:var(--text);box-shadow:0 1px 6px rgba(0,0,0,.1);}
.comm-pill {font-size:.65rem;font-weight:700;padding:1px 7px;border-radius:20px;line-height:1.6;}
.comm-pill--green {background:rgba(16,185,129,.15);color:#10b981;}
.comm-pill--accent {background:rgba(79,70,229,.13);color:var(--accent);}
/* comm empty state */
.comm-empty {display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px;gap:10px;color:var(--text-2);}
.comm-empty i {font-size:2.8rem;opacity:.35;margin-bottom:4px;}
.comm-empty h3 {font-size:1.05rem;font-weight:700;color:var(--text);margin:0;}
.comm-empty p {font-size:.88rem;color:var(--text-2);max-width:320px;line-height:1.6;margin:0;}

/* ── Announcement cards ───────────────────────────────────── */
.ann-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px;}
.ann-card {position:relative;display:flex;background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,transform .15s;}
.ann-card:hover {box-shadow:0 5px 22px rgba(0,0,0,.11);transform:translateY(-2px);}
.ann-card-bar {width:5px;flex-shrink:0;}
.ann-card--info    .ann-card-bar {background:#3b82f6;}
.ann-card--warning .ann-card-bar {background:#f59e0b;}
.ann-card--success .ann-card-bar {background:#10b981;}
.ann-card--promo   .ann-card-bar {background:var(--accent);}
.ann-card-inner {flex:1;padding:14px 14px 12px;display:flex;flex-direction:column;gap:7px;min-width:0;}
.ann-card-top {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ann-chip {display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px;}
.ann-chip--info {background:rgba(59,130,246,.12);color:#3b82f6;}
.ann-chip--warning {background:rgba(245,158,11,.12);color:#d97706;}
.ann-chip--success {background:rgba(16,185,129,.12);color:#059669;}
.ann-chip--promo {background:rgba(79,70,229,.12);color:var(--accent);}
.ann-dot {width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.ann-dot--on {background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2);}
.ann-dot--off {background:var(--text-3);}
.ann-title {font-weight:700;font-size:.95rem;color:var(--text);line-height:1.3;}
.ann-msg {font-size:.83rem;color:var(--text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ann-foot {display:flex;gap:14px;font-size:.72rem;color:var(--text-3);margin-top:2px;}
.ann-foot span {display:flex;align-items:center;gap:4px;}
/* ghost icon background */
.ann-card-ghost {position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:3.2rem;opacity:.045;pointer-events:none;color:var(--text);}
.ann-card--info    .ann-card-ghost {color:#3b82f6;opacity:.1;}
.ann-card--warning .ann-card-ghost {color:#f59e0b;opacity:.1;}
.ann-card--success .ann-card-ghost {color:#10b981;opacity:.1;}
.ann-card--promo   .ann-card-ghost {color:var(--accent);opacity:.1;}

/* ── Promotions admin grid ───────────────────────────────── */
.promo-admin-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.promo-admin-card {background:var(--card-bg);border:1px solid var(--border-light);border-radius:16px;overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column;}
.promo-admin-card:hover {box-shadow:0 6px 28px rgba(0,0,0,.13);transform:translateY(-3px);}
.promo-admin-thumb {position:relative;width:100%;height:148px;overflow:hidden;background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(124,58,237,.2));}
.promo-admin-thumb img {width:100%;height:100%;object-fit:cover;display:block;}
.promo-admin-thumb-placeholder {width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.8rem;color:var(--accent);opacity:.45;}
.promo-admin-thumb .pasp {position:absolute;top:10px;left:10px;}
.pasp {font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em;backdrop-filter:blur(6px);}
.pasp--live {background:rgba(16,185,129,.25);color:#10b981;border:1px solid rgba(16,185,129,.4);}
.pasp--off {background:rgba(0,0,0,.4);color:#ccc;}
.promo-admin-body {padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.promo-admin-title {font-weight:700;font-size:.94rem;color:var(--text);line-height:1.3;}
.promo-admin-text {font-size:.81rem;color:var(--text-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.promo-admin-footer {display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.promo-mode-tag {display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--bg-2);color:var(--text-3);}
.promo-mode-tag--cta {background:rgba(79,70,229,.1);color:var(--accent);}
/* target audience chips in promo modal */
.promo-tgt-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.promo-tgt-chip {display:block;cursor:pointer;border-radius:12px;user-select:none;}
.promo-tgt-chip input {position:absolute;opacity:0;width:0;height:0;}
.promo-tgt-chip span {display:flex;align-items:center;gap:8px;padding:11px 14px;border:2px solid var(--border-light);border-radius:12px;font-size:.88rem;font-weight:600;color:var(--text-2);transition:all .15s;}
.promo-tgt-chip input:checked + span {border-color:var(--accent);background:rgba(79,70,229,.09);color:var(--accent);}
.promo-tgt-chip.is-disabled {pointer-events:none;opacity:.38;}
/* image upload zone */
.promo-upload-zone {position:relative;border:2px dashed var(--border-light);border-radius:14px;overflow:hidden;min-height:130px;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg-2);}
.promo-upload-zone:hover,.promo-upload-zone.dragover {border-color:var(--accent);background:rgba(79,70,229,.04);}
.promo-upload-zone.uploading {opacity:.6;pointer-events:none;}
.promo-upload-placeholder {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:26px 16px;color:var(--text-3);}
.promo-upload-placeholder i {font-size:1.9rem;opacity:.45;}
.promo-upload-placeholder span {font-size:.84rem;font-weight:500;}
.promo-upload-placeholder small {font-size:.73rem;color:var(--text-3);}
#promo-img-preview img {width:100%;max-height:190px;object-fit:cover;display:block;}
#promo-img-preview.has-img {min-height:0;}
.promo-upload-clear {position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.78rem;transition:background .15s;}
.promo-upload-clear:hover {background:rgba(0,0,0,.75);}
/* toggle label */
.toggle-label {display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;font-size:.88rem;}
.toggle-cb {width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}

/* ── Variation per-option pricing ──────────────────────────── */
.var-price-hint {font-size:.74rem;color:var(--text-3);margin-bottom:8px;line-height:1.45;}
.var-price-row {display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap;}
.var-price-name {flex:1;min-width:64px;font-size:.85rem;font-weight:600;color:var(--text);}
.var-switch {position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:.76rem;font-weight:600;color:var(--text-2);white-space:nowrap;}
.var-switch input {position:absolute;opacity:0;width:0;height:0;}
.var-switch-track {position:relative;width:40px;height:23px;border-radius:999px;background:var(--border,#d1d5db);transition:background .2s ease;flex:none;}
.var-switch-track::after {content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .2s ease;}
.var-switch input:checked + .var-switch-track {background:var(--primary,#0f5f45);}
.var-switch input:checked + .var-switch-track::after {transform:translateX(17px);}
.var-switch input:focus-visible + .var-switch-track {box-shadow:0 0 0 3px var(--accent-soft,rgba(16,185,129,.3));}
.var-price-input {width:130px;padding:7px 11px;font-size:.84rem;border:1px solid var(--border);border-radius:8px;background:var(--surface,#fff);color:var(--text);transition:border-color .15s,box-shadow .15s;}
.var-price-input:focus {outline:none;border-color:var(--primary,#0f5f45);box-shadow:0 0 0 3px var(--accent-soft,rgba(16,185,129,.18));}
.var-price-remove {font-size:.9rem;padding:4px 8px;color:var(--red,#dc2626);background:none;border:none;cursor:pointer;border-radius:7px;line-height:1;transition:background .15s;}
.var-price-remove:hover {background:var(--red-soft,rgba(220,38,38,.1));}

/* ── Promotional popup modal ─────────────────────────────── */
.promo-overlay {position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:20px;animation:promoFadeIn .2s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.promo-overlay--out {animation:promoFadeOut .26s ease forwards;}
@keyframes promoFadeIn{from{opacity:0}to{opacity:1}}
@keyframes promoFadeOut{from{opacity:1}to{opacity:0}}
.promo-modal {position:relative;background:var(--card-bg);border-radius:24px;overflow:hidden;width:100%;max-width:400px;box-shadow:0 28px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);animation:promoSlideUp .34s cubic-bezier(.16,1,.3,1);}
@keyframes promoSlideUp{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.promo-overlay--out .promo-modal {animation:promoSlideDown .24s ease forwards;}
@keyframes promoSlideDown{to{opacity:0;transform:translateY(16px) scale(.97)}}
.promo-close {position:absolute;top:12px;right:12px;z-index:20;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.82rem;transition:background .15s,transform .1s;backdrop-filter:blur(6px);}
.promo-close:hover {background:rgba(0,0,0,.78);transform:scale(1.1);}
.promo-image {position:relative;width:100%;overflow:hidden;background:var(--bg-2);}
.promo-image img {width:100%;display:block;object-fit:cover;max-height:240px;}
.promo-image::after {content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(to top,var(--card-bg) 0%,transparent 100%);pointer-events:none;}
.promo-image--only::after {display:none;}
.promo-img-placeholder {height:8px;background:linear-gradient(90deg,var(--accent),#7c3aed);}
.promo-body {padding:22px 22px 20px;}
.promo-title {font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.25;letter-spacing:-.015em;}
.promo-text {font-size:.91rem;color:var(--text-2);line-height:1.65;margin-bottom:16px;}
.promo-cta-btn {display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-size:.93rem;font-weight:700;padding:13px 24px;border-radius:14px;text-decoration:none;transition:opacity .15s,transform .1s;letter-spacing:.01em;}
.promo-cta-btn:hover {opacity:.9;transform:translateY(-1px);}
.promo-progress {height:3px;background:var(--border-light);}
.promo-progress-bar {height:100%;background:linear-gradient(90deg,var(--accent),#7c3aed);transform-origin:left;animation:promoProgress linear forwards;}
@keyframes promoProgress{from{width:100%}to{width:0%}}

/* Sidebar UX refinement */
.sidebar {
    border-right:1px solid rgba(15,23,42,.09);
    background:
        linear-gradient(180deg,#fff 0%,#fbfcfe 52%,#f7faf9 100%),
        var(--surface);
    color:#000;
}
.sidebar-header {
    position:relative;
    min-height:76px;
    padding:18px 18px 14px;
    border-bottom:0;
    background:linear-gradient(180deg,rgba(16,185,129,.07),rgba(255,255,255,0));
}
.sidebar-header::after {
    content:'';
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(15,23,42,.11),transparent);
}
.sidebar-logo {
    min-width:0;
    max-width:198px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:0;
    line-height:1.1;
}
.sidebar-close {
    width:36px;
    height:36px;
    border-radius:12px;
    background:#fff;
    border-color:rgba(148,163,184,.28);
    box-shadow:var(--shadow-xs);
}
.sidebar-close:hover {
    transform:translateY(-1px);
    background:#f8fafc;
    box-shadow:var(--shadow-sm);
}
.sidebar-nav {
    padding:7px 10px 14px;
    scrollbar-gutter:stable;
    scroll-padding-top:8px;
}
.sidebar-nav::-webkit-scrollbar {width:8px}
.sidebar-nav::-webkit-scrollbar-thumb {
    background:rgba(148,163,184,.38);
    border:2px solid transparent;
    border-radius:999px;
    background-clip:content-box;
}
.nav-section {
    position:relative;
    z-index:1;
    margin:3px 2px 4px;
    padding:8px 9px 4px;
    background:transparent;
    color:#475569;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.13em;
}
.nav-divider {
    height:1px;
    margin:9px 8px;
    background:linear-gradient(90deg,transparent,rgba(148,163,184,.36),transparent);
}
.nav-item,
.nav-group-summary {
    min-height:40px;
    border-radius:11px;
    outline:0;
    -webkit-tap-highlight-color:transparent;
}
.nav-item {
    margin:1px 2px;
    padding:8px 10px;
    color:#000;
    font-size:.88rem;
    font-weight:700;
    line-height:1.2;
}
.nav-item span:not(.nav-badge),
.nav-group-summary span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.nav-item i,
.nav-group-summary i:not(.nav-group-caret) {
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(15,23,42,.04);
    color:#64748b;
    opacity:1;
    flex:0 0 auto;
    transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.nav-item:hover,
.nav-group-summary:hover {
    background:#f1f6f4;
    color:#000;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);
}
.nav-item:hover i,
.nav-group-summary:hover i:not(.nav-group-caret) {
    background:#e7f6ef;
    color:#0a2e1a;
    transform:translateY(-1px);
}
.nav-item.active {
    background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(10,46,26,.08));
    color:#0a2e1a;
    font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(16,185,129,.18),0 10px 24px -18px rgba(16,185,129,.8);
}
.nav-item.active i {
    background:#0a2e1a;
    color:#fff;
    box-shadow:0 8px 16px -10px rgba(10,46,26,.9);
}
.nav-item.active::before {
    content:'';
    position:absolute;
    background:linear-gradient(180deg,#10b981,#0a2e1a);
    left:0;
    top:9px;
    bottom:9px;
    border-radius:0 6px 6px 0;
    width:3px;
}
.nav-group {
    margin:3px 2px;
    border-radius:13px;
    overflow:hidden;
}
.nav-group[open] {
    background:rgba(248,250,252,.58);
    border-color:rgba(226,232,240,.76);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.nav-group.active-group,
.nav-group.active-group[open] {
    border-color:rgba(16,185,129,.18);
    background:rgba(248,250,252,.64);
    box-shadow:inset 3px 0 0 rgba(16,185,129,.2), inset 0 1px 0 rgba(255,255,255,.82);
}
.nav-group-summary {
    padding:7px 10px;
    color:#000;
    font-size:.88rem;
    font-weight:700;
}
.nav-group[open] .nav-group-summary {
    border-bottom-left-radius:9px;
    border-bottom-right-radius:9px;
}
.nav-group-caret {
    margin-left:auto;
    width:20px!important;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(148,163,184,.12);
    color:#64748b;
    opacity:1;
    transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.nav-group[open] .nav-group-caret {
    transform:rotate(180deg);
    background:rgba(148,163,184,.14);
    color:#475569;
}
.nav-group-body {
    position:relative;
    padding:1px 0 5px;
}
.nav-group-body::before {
    content:'';
    position:absolute;
    left:25px;
    top:3px;
    bottom:23px;
    width:1px;
    background:linear-gradient(180deg,rgba(148,163,184,.18),rgba(148,163,184,.42),rgba(148,163,184,.12));
}
.nav-subitem {
    margin:1px 6px 1px 17px;
    padding:7px 10px 7px 23px;
    font-size:.84rem;
    font-weight:700;
    min-height:34px;
    color:#475569;
}
.nav-subitem::after {
    content:'';
    position:absolute;
    left:5px;
    top:50%;
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(148,163,184,.55);
    transform:translateY(-50%);
    transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.nav-subitem:hover::after {
    background:#10b981;
    transform:translateY(-50%) scale(1.1);
}
.nav-subitem.active {
    margin-left:17px;
    background:rgba(16,185,129,.1);
    color:#0a2e1a;
    font-weight:700;
}
.nav-subitem.active::before {display:none}
.nav-subitem.active::after {
    background:#0a2e1a;
    box-shadow:0 0 0 4px rgba(16,185,129,.12);
}
.nav-subitem i {
    display:none;
}
.nav-badge {
    flex-shrink:0;
    margin-left:auto;
    border-radius:999px;
    font-size:.68rem;
    font-weight:700;
    box-shadow:0 4px 10px rgba(239,68,68,.18);
}
.sidebar-footer {
    padding:13px 14px calc(13px + var(--safe-b));
    border-top:1px solid rgba(226,232,240,.82);
    background:linear-gradient(180deg,rgba(250,251,253,.88),#fff);
}
.sidebar-plan-row {
    min-height:38px;
    padding:8px 10px;
    border-radius:10px;
    background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(16,185,129,.08));
    border-color:rgba(99,102,241,.16);
}
.sidebar-plan-btn {
    min-height:26px;
    border-radius:8px;
}
.sidebar-signout {
    min-height:42px;
    justify-content:center;
    border-radius:10px;
    border-color:rgba(239,68,68,.34);
    background:#fff;
    box-shadow:var(--shadow-xs);
}
.sidebar-signout:hover {
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm);
}
.nav-item:focus-visible,
.nav-group-summary:focus-visible,
.sidebar-close:focus-visible,
.sidebar-plan-btn:focus-visible,
.sidebar-signout:focus-visible {
    outline:3px solid var(--accent-ring);
    outline-offset:2px;
}
@media(max-width:767px) {
    .sidebar {
        width:min(88vw,340px);
        left:0; /* parked — all motion via compositor-friendly transform */
        border-right:none;
        border-radius:0 20px 20px 0;
        box-shadow:0 28px 70px -18px rgba(15,23,42,.36);
        transform:translateX(calc(-100% - 60px)); /* own width + shadow reach */
        opacity:.98;
        overflow:hidden;
        transition:transform .28s var(--ease-out);
    }
    .sidebar.open {transform:translateX(0)}
    .sidebar-header {padding-top:calc(18px + var(--safe-t))}
    .sidebar-overlay {background:rgba(15,23,42,.44)}
    .sidebar-nav {padding-bottom:22px}
}
@media(min-width:768px) {
    .sidebar {
        box-shadow:none;
        background:linear-gradient(180deg,#fff 0%,#fbfcfe 58%,#f8fafc 100%);
    }
}

/* Sidebar polish pass — search input tokenized (focus ring un-suppressed),
   AA ink on active/danger/plan text, press feedback, motion coherence.
   Appended after the refinement block so equal-specificity ties land here. */
.nav-menu-search {padding:8px 2px 6px}
.nav-menu-search > div {position:relative}
.nav-menu-search .bi-search {position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.8rem;color:var(--text-3);pointer-events:none}
#nav-menu-search-input {width:100%;padding:8px 10px 8px 32px;border:1px solid var(--border-light);border-radius:var(--r-sm);background:var(--surface-hover);font-size:.82rem;font-weight:500;color:var(--text)}
@media(max-width:767px){#nav-menu-search-input {font-size:16px}} /* no iOS focus-zoom in the drawer */

/* Badges flow inline at the row end (matching the rail flyout's pill look);
   AA red: white on #ef4444 is 3.76:1, on #dc2626 it passes at 4.83:1 */
.sidebar-nav .nav-badge {position:static;margin-left:auto;min-width:18px;height:auto;padding:1px 6px;line-height:1.4}
.nav-badge {background:#dc2626;box-shadow:0 4px 10px rgba(220,38,38,.18)}

/* AA ink: active-group summary (#059669 measured 3.4-3.8:1), sign-out and
   the plan Upgrade pill — one step down each ramp, same hue roles */
.nav-group.active-group .nav-group-summary,
.nav-group.active-group .nav-group-summary i {color:#047857}
.sidebar-signout {color:#dc2626}
.sidebar-signout:hover {background:rgba(220,38,38,.08);border-color:rgba(239,68,68,.55);color:#b91c1c}
.sidebar-plan-btn {background:#4f46e5}
.sidebar-plan-btn:hover {background:#4338ca}

/* Press feedback — the tap highlight is suppressed above but was never
   replaced; comfortable touch targets on coarse pointers only */
.nav-item:active,
.nav-group-summary:active {background:#e9f1ee;transition-duration:.05s}
.sidebar-close:active {transform:translateY(0);box-shadow:var(--shadow-xs)}
.sidebar-signout:active {transform:translateY(0);background:rgba(220,38,38,.12);box-shadow:var(--shadow-xs)}
.nav-mode-exit-btn:active {background:var(--border-light)}
@media(pointer:coarse){.sidebar .nav-item, .sidebar .nav-group-summary {min-height:44px}}

/* Motion coherence: explicit transition list so the focus ring snaps instead
   of fading (transition:all animated the outline), summaries glide like items,
   and padding/gap track the rail's .26s width transition instead of racing it */
.nav-item,
.nav-group-summary {transition:background-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease),padding .26s var(--ease-out),gap .26s var(--ease-out)}
.nav-group[open] .nav-group-body {animation:navGroupIn .2s var(--ease-out)}
@keyframes navGroupIn {from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nav-group[open] .nav-group-body {animation:none}}

/* Chrome: scrollbar-width:thin makes Chromium ignore the ::-webkit pill
   styling, so give the thin bar its intended colors; match the topbar seam
   to the sidebar's border where the two meet on desktop */
.sidebar-nav {scrollbar-color:rgba(148,163,184,.38) transparent}
@media(min-width:768px){.topbar {border-bottom-color:rgba(15,23,42,.09)}}

.branch-select {
    min-height:34px;
    max-width:210px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    font-size:.84rem;
    font-weight:700;
    padding:6px 30px 6px 10px;
}

/* ═══════════════════════════════════════════════════
   Global overrides — search bar, data-list
   ═══════════════════════════════════════════════════ */

.search-bar {
    border-radius: var(--r-item) !important;
    border-color: rgba(15, 23, 42, .1) !important;
    background: var(--surface) !important;
    padding: 0 14px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
    gap: 10px;
}
.search-bar:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
.search-bar i {
    font-size: .95rem;
    color: var(--text-3);
    flex-shrink: 0;
}
.search-bar input {
    padding: 11px 0 !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════
   CRM Pages — Customers, Suppliers, Wallet, SMS
   ═══════════════════════════════════════════════════ */

/* ── CRM KPI Row (Customers page) ── */
.crm-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
@media (max-width: 640px) {
    .crm-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.crm-kpi {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 13px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow .15s;
}
.crm-kpi:hover { box-shadow: var(--shadow-sm); }
.crm-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.crm-kpi-body { flex: 1; min-width: 0; }
.crm-kpi-val {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.crm-kpi-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── CRM Segment Tabs ── */
.crm-seg-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.crm-seg-tabs::-webkit-scrollbar { display: none; }
.crm-seg-tab {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.crm-seg-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(11,18,32,.18);
}
.crm-seg-tab:not(.active):hover {
    border-color: var(--accent-ring);
    color: var(--accent-2);
}

/* ── CRM Customer Card ── */
.crm-customer-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.crm-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-avatar span {
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.crm-customer-info { flex: 1; min-width: 0; }
.crm-customer-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.3;
}
.crm-customer-meta {
    font-size: .73rem;
    color: var(--text-3);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-customer-stats { text-align: right; flex-shrink: 0; }
.crm-stat-num {
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
}
.crm-stat-sub {
    font-size: .7rem;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── CRM Supplier Cards ── */
.supplier-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.supplier-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.supplier-info { flex: 1; min-width: 0; }
.supplier-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}
.supplier-meta {
    font-size: .73rem;
    color: var(--text-3);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.supplier-contact-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.supplier-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-hover);
    border: 1px solid var(--border-light);
    font-size: .7rem;
    color: var(--text-2);
    font-weight: 600;
}

/* ── SMS Wallet Hero ── */
.wallet-hero {
    background: #111827;
    border-radius: var(--r-lg);
    padding: clamp(16px, 4.5vw, 22px) clamp(14px, 4.5vw, 20px);
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.wallet-hero::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(16,185,129,.14);
}
.wallet-hero::after {
    content: '';
    position: absolute;
    bottom: -30px; right: 60px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(99,102,241,.12);
}
.wallet-hero-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.55);
    margin-bottom: 10px;
}
.wallet-hero-sms {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.05;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    overflow-wrap: anywhere;
}
.wallet-hero-sms span {
    font-size: clamp(.85rem, 3.4vw, 1rem);
    font-weight: 600;
    opacity: .65;
    margin-left: 0;
}
.wallet-hero-balance {
    font-size: clamp(.82rem, 3.4vw, 1rem);
    font-weight: 700;
    color: rgba(255,255,255,.65);
    margin-top: 4px;
    margin-bottom: 18px;
    overflow-wrap: anywhere;
}
.wallet-hero-sub {
    font-size: .76rem;
    color: rgba(255,255,255,.45);
    margin-bottom: 18px;
}
.wallet-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    position: relative;
    z-index: 1;
}
.wallet-hero-stat {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}
.wallet-hero-stat-val {
    font-size: clamp(.82rem, 3.4vw, .95rem);
    font-weight: 700;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.wallet-hero-stat-sub {
    font-size: .66rem;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
@media (max-width: 380px) {
    .wallet-hero-stats { grid-template-columns: 1fr 1fr; }
    .wallet-hero-stat:last-child { grid-column: 1 / -1; }
    .wallet-tab { padding: 9px 6px; font-size: .74rem; gap: 4px; }
}

/* ── Wallet Tab Bar ── */
.wallet-tab-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.wallet-tab {
    flex: 1;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.wallet-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(11,18,32,.18);
}
.wallet-tab:not(.active):hover { border-color: var(--accent-ring); color: var(--accent-2); }

/* ── Wallet Transaction Items ── */
.txn-item { display: flex !important; align-items: center; gap: 12px; }
.txn-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.txn-icon.credit { background: var(--green-soft); color: var(--green); }
.txn-icon.debit { background: var(--red-soft);   color: var(--red); }
.txn-icon.pending { background: rgba(245,158,11,.12); color: #d97706; }
.txn-info { flex: 1; min-width: 0; }
.txn-title { font-size: .88rem; font-weight: 700; color: var(--text); }
.txn-date { font-size: .71rem; color: var(--text-3); margin-top: 2px; }
.txn-right { text-align: right; flex-shrink: 0; }
.txn-amount { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
.txn-amount.credit { color: var(--green); }
.txn-amount.debit { color: var(--red); }
.txn-amount.pending { color: #d97706; }
.txn-sms { font-size: .7rem; color: var(--text-3); margin-top: 1px; }
.txn-pending-badge { font-size: .68rem; font-weight: 700; color: #d97706; background: rgba(245,158,11,.12); border-radius: 6px; padding: 1px 6px; margin-top: 3px; display: inline-block; }
.txn-pending-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.txn-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px; border: none; cursor: pointer;
    font-size: .78rem; font-weight: 700; line-height: 1;
    transition: opacity .14s;
}
.txn-action-btn:active { opacity: .75; }
.txn-action-btn.pay { background: rgba(16,185,129,.12); color: var(--green); }
.txn-action-btn.check { background: rgba(99,102,241,.1); color: var(--indigo); }
.txn-row .txn-right {
    flex: 0 1 42%;
    min-width: 104px;
    max-width: 180px;
}
.txn-row .txn-name,
.txn-row .txn-sub {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 480px) {
    .txn-action-label { display: none; }
    .txn-action-btn { padding: 7px; border-radius: 50%; font-size: .9rem; }
}
@media (max-width: 520px) {
    .txn-row .txn-right {
        max-width: none;
        min-width: 0;
        flex-basis: 100%;
    }
}

/* ── Hubtel checkout iframe modal ── */
.hubtel-checkout-modal {
    height: 92dvh !important;
    max-height: 92dvh !important;
}
.hubtel-iframe-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hubtel-iframe-wrap iframe {
    width: 100%;
    flex: 1;
    border: none;
    display: block;
    background: #fff;
}

/* ── SMS Tab Bar ── */
.sms-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    background: var(--surface-hover);
    border-radius: 12px;
    padding: 4px;
    border: 1.5px solid var(--border-soft);
    overflow-x: auto;
    scrollbar-width: none;
}
.sms-tab-bar::-webkit-scrollbar { display: none; }
.sms-tab {
    flex: 1;
    padding: 8px 10px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.sms-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* ── SMS Campaign Cards ── */
.sms-campaign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
@media (min-width: 540px) { .sms-campaign-grid { grid-template-columns: repeat(3, 1fr); }
}
.sms-campaign-card {
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 16px 14px;
    cursor: pointer;
    transition: all .16s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-xs);
}
.sms-campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-ring);
}
.sms-campaign-card:active { transform: scale(.98); }
.sms-campaign-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.sms-campaign-title {
    font-size: .83rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}
.sms-campaign-desc {
    font-size: .7rem;
    color: var(--text-3);
    line-height: 1.4;
}

/* ── SMS History Item ── */
.sms-hist-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.sms-hist-status {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sms-hist-status.ok { background: var(--green); }
.sms-hist-status.err { background: var(--red); }
.sms-hist-status.pend { background: var(--amber); }
.sms-hist-info { flex: 1; min-width: 0; }
.sms-hist-phone { font-size: .85rem; font-weight: 700; color: var(--text); }
.sms-hist-msg { font-size: .72rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-hist-meta { font-size: .7rem; color: var(--text-3); text-align: right; flex-shrink: 0; }

/* Admin packages */
.admin-packages-shell {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.admin-packages-header {
    align-items:flex-start;
    margin-bottom:0;
}
.admin-packages-subtitle {
    margin-top:6px;
    color:var(--text-3);
    font-size:.82rem;
    line-height:1.5;
    max-width:720px;
}
.admin-packages-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.admin-package-overview {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
}
.admin-package-stat {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
    min-width:0;
}
.admin-package-stat i {
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:rgba(99,102,241,.1);
    color:var(--indigo);
    font-size:1rem;
}
.admin-package-stat-green i {background:rgba(16,185,129,.11);color:var(--green)}
.admin-package-stat-blue i {background:rgba(59,130,246,.11);color:var(--blue)}
.admin-package-stat-amber i {background:rgba(245,158,11,.13);color:var(--amber)}
.admin-package-stat b {
    display:block;
    color:var(--text);
    font-size:1rem;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.admin-package-stat span {
    display:block;
    margin-top:3px;
    color:var(--text-3);
    font-size:.66rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.admin-package-toolbar {
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(150px,190px) minmax(130px,170px);
    gap:10px;
    align-items:center;
}
.admin-package-toolbar .search-bar {
    margin:0;
}
.admin-package-toolbar select {
    min-height:42px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text);
    font-size:.8rem;
    font-weight:700;
    padding:0 12px;
}
.admin-package-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:12px;
}
.admin-package-empty {
    grid-column:1/-1;
}
.admin-package-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
    min-width:0;
}
.admin-package-card-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.admin-package-name-wrap {
    min-width:0;
}
.admin-package-cycle {
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(13,148,136,.1);
    color:var(--teal);
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.admin-package-card h3 {
    margin:8px 0 4px;
    color:var(--text);
    font-size:1rem;
    line-height:1.2;
}
.admin-package-card p {
    margin:0;
    color:var(--text-3);
    font-size:.74rem;
    line-height:1.45;
}
.admin-package-price {
    text-align:right;
    flex-shrink:0;
}
.admin-package-price b {
    display:block;
    color:var(--primary);
    font-size:1rem;
    line-height:1.1;
    white-space:nowrap;
}
.admin-package-price span {
    display:block;
    margin-top:4px;
    color:var(--text-3);
    font-size:.66rem;
    font-weight:700;
}
.admin-package-limits {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.admin-package-limits div {
    min-width:0;
    padding:9px;
    border-radius:10px;
    background:var(--surface-hover);
    border:1px solid var(--border-light);
}
.admin-package-limits i {
    color:var(--accent);
    font-size:.95rem;
}
.admin-package-limits b {
    display:block;
    margin-top:5px;
    color:var(--text);
    font-size:.86rem;
}
.admin-package-limits span {
    display:block;
    margin-top:2px;
    color:var(--text-3);
    font-size:.62rem;
    font-weight:700;
}
.admin-package-feature-row {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    min-height:28px;
}
.admin-package-chip {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(37,99,235,.09);
    color:var(--blue);
    font-size:.66rem;
    font-weight:700;
}
.admin-package-chip.is-muted {
    background:var(--surface-hover);
    color:var(--text-3);
}
.admin-package-card-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:4px;
}
.admin-package-footnote {
    color:var(--text-3);
    font-size:.7rem;
    font-weight:700;
}

/* Admin finance pages */
.admin-finance-shell {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.admin-finance-header {
    align-items:flex-start;
    margin-bottom:0;
}
.admin-finance-subtitle {
    margin-top:6px;
    color:var(--text-3);
    font-size:.82rem;
    line-height:1.5;
    max-width:760px;
}
.admin-finance-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
}
.admin-finance-context {
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px 13px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(16,185,129,.05));
    color:var(--text-2);
}
.admin-finance-context i {
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:9px;
    background:var(--surface);
    color:var(--blue);
    box-shadow:var(--shadow-xs);
}
.admin-finance-context b {
    display:block;
    color:var(--text);
    font-size:.82rem;
    line-height:1.25;
}
.admin-finance-context p {
    margin:3px 0 0;
    color:var(--text-3);
    font-size:.74rem;
    line-height:1.5;
}
.admin-finance-stat {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:12px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
}
.admin-finance-stat i,
.admin-finance-icon {
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:rgba(99,102,241,.1);
    color:var(--indigo);
    font-size:1rem;
}
.admin-finance-stat.stat-green i,
.admin-finance-icon.stat-green {background:rgba(16,185,129,.11);color:var(--green)}
.admin-finance-stat.stat-red i,
.admin-finance-icon.stat-red {background:rgba(239,68,68,.11);color:var(--red)}
.admin-finance-stat.stat-blue i,
.admin-finance-icon.stat-blue {background:rgba(59,130,246,.11);color:var(--blue)}
.admin-finance-stat.stat-amber i,
.admin-finance-icon.stat-amber {background:rgba(245,158,11,.13);color:var(--amber)}
.admin-finance-stat b {
    display:block;
    color:var(--text);
    font-size:1rem;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.admin-finance-stat span {
    display:block;
    margin-top:3px;
    color:var(--text-3);
    font-size:.66rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.admin-finance-tabs {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:2px 1px 4px;
    scrollbar-width:thin;
}
.admin-finance-tab {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    padding:0 12px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text-2);
    font-size:.76rem;
    font-weight:700;
    cursor:pointer;
    transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);
}
.admin-finance-tab b {
    min-width:24px;
    height:22px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--soft);
    color:var(--text-3);
    font-size:.68rem;
}
.admin-finance-tab:hover,
.admin-finance-tab.active {
    border-color:rgba(59,130,246,.35);
    background:rgba(59,130,246,.08);
    color:var(--primary);
    box-shadow:var(--shadow-xs);
}
.admin-finance-tab.active b {
    background:var(--primary);
    color:#fff;
}
.admin-finance-toolbar {
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(130px,180px) minmax(130px,180px);
    gap:10px;
    align-items:center;
}
.admin-finance-toolbar.two-col {
    grid-template-columns:minmax(240px,1fr) minmax(140px,220px);
}
.admin-finance-toolbar.compact {
    grid-template-columns:minmax(220px,1fr) minmax(130px,180px);
    margin-top:10px;
}
.admin-finance-toolbar .search-bar {
    margin:0;
}
.admin-finance-toolbar select {
    min-height:42px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    color:var(--text);
    font-size:.8rem;
    font-weight:700;
    padding:0 12px;
}
.admin-finance-panel {
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    padding:14px;
    box-shadow:var(--shadow-xs);
}
.admin-finance-panel-head {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}
.admin-finance-panel h3 {
    margin:0;
    color:var(--text);
    font-size:.94rem;
}
.admin-finance-panel p {
    margin:4px 0 0;
    color:var(--text-3);
    font-size:.74rem;
    line-height:1.45;
}
.admin-finance-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.admin-finance-list.compact {
    margin-top:10px;
}
.admin-finance-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    min-width:0;
    padding:13px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-md);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
}
.admin-finance-card.compact {
    padding:11px;
}
.admin-finance-card.is-action {
    cursor:pointer;
    transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.admin-finance-card.is-action:hover {
    border-color:var(--border);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
}
.admin-finance-card-main {
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}
.admin-finance-copy {
    min-width:0;
}
.admin-finance-title-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.admin-finance-title-row h3 {
    margin:0;
    color:var(--text);
    font-size:.88rem;
    line-height:1.25;
}
.admin-finance-meta {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:5px;
    color:var(--text-3);
    font-size:.7rem;
    line-height:1.35;
}
.admin-finance-meta span {
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-width:0;
}
.admin-finance-side {
    text-align:right;
    flex-shrink:0;
}
.admin-finance-side b {
    display:block;
    color:var(--primary);
    font-size:.94rem;
    line-height:1.15;
    white-space:nowrap;
}
.admin-finance-side span {
    display:block;
    margin-top:3px;
    color:var(--text-3);
    font-size:.66rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.admin-finance-pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:11px;
    color:var(--text-3);
    font-size:.72rem;
    font-weight:700;
}
.admin-finance-page-controls {
    display:flex;
    align-items:center;
    gap:5px;
}
.admin-finance-page-controls button {
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1.5px solid var(--border-soft);
    border-radius:9px;
    background:var(--surface);
    color:var(--text-2);
    font-size:.74rem;
    font-weight:700;
    cursor:pointer;
}
.admin-finance-page-controls button:hover:not(:disabled),
.admin-finance-page-controls button.active {
    border-color:rgba(59,130,246,.35);
    background:var(--primary);
    color:#fff;
}
.admin-finance-page-controls button:disabled {
    opacity:.45;
    cursor:not-allowed;
}
.admin-finance-page-gap {
    padding:0 3px;
    color:var(--text-3);
}
@media (max-width:760px) {
    .admin-packages-header,
    .admin-package-card-head,
    .admin-package-card-actions {
        flex-direction:column;
        align-items:stretch;
    }
    .admin-package-toolbar {
        grid-template-columns:1fr;
    }
    .admin-package-grid {
        grid-template-columns:1fr;
    }
    .admin-package-price {
        text-align:left;
    }
    .admin-finance-header,
    .admin-finance-card,
    .admin-finance-panel-head {
        grid-template-columns:1fr;
        flex-direction:column;
        align-items:stretch;
    }
    .admin-finance-context,
    .admin-finance-pagination {
        flex-direction:column;
        align-items:stretch;
    }
    .admin-finance-toolbar,
    .admin-finance-toolbar.two-col,
    .admin-finance-toolbar.compact {
        grid-template-columns:1fr;
    }
    .admin-finance-side {
        text-align:left;
    }
}

@media (max-width:420px) {
    :root {
        --topbar-h:56px;
        --bnav-h:58px;
        --fixed-btn-size:clamp(40px,11vw,46px);
        --fixed-btn-icon:clamp(1rem,4vw,1.16rem);
        --fixed-btn-offset:clamp(8px,3vw,12px);
        --compact-fixed-h:36px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Sales Experience — sleek, intuitive, addictive (prefix .sx-)
   ════════════════════════════════════════════════════════════════ */
.sx-wrap { --sx-cash:#10b981; --sx-momo:#6366f1; --sx-card:#3b82f6; --sx-bank:#8b5cf6; --sx-credit:#f59e0b; }

/* Hero revenue card — the dopamine focal point */
.sx-hero {
    position:relative; overflow:hidden;
    border-radius:20px; padding:15px 19px 16px;
    color:#fff; margin:0 0 14px;
    background:#059669;
    box-shadow:0 14px 34px -22px rgba(5,150,105,.8), inset 0 1px 0 rgba(255,255,255,.14);
    animation:sx-hero-in .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sx-hero-in{ from{opacity:0;transform:translateY(10px) scale(.985);} to{opacity:1;transform:none;} }
/* Flat solid hero variants (minimal gradient) — distinct accent per module */
.sx-hero.sx-hero-rose { background:#be123c; box-shadow:0 18px 44px -24px rgba(190,18,60,.8), inset 0 1px 0 rgba(255,255,255,.14); }
.sx-hero.sx-hero-indigo { background:#4338ca; box-shadow:0 18px 44px -24px rgba(67,56,202,.8), inset 0 1px 0 rgba(255,255,255,.14); }
.sx-hero.sx-hero-blue { background:#1d4ed8; box-shadow:0 14px 34px -22px rgba(29,78,216,.8), inset 0 1px 0 rgba(255,255,255,.14); }
.sx-hero::after {
    content:""; position:absolute; right:-40px; top:-60px;
    width:230px; height:230px; border-radius:50%;
    background:radial-gradient(circle at center, rgba(255,255,255,.16), transparent 68%);
    pointer-events:none;
}
.sx-hero-top { display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.sx-hero-eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    font-size:.69rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
    color:rgba(255,255,255,.86);
}
.sx-hero-eyebrow i { font-size:.9rem; }
.sx-hero-chip {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
    padding:5px 11px; border-radius:999px;
    font-size:.72rem; font-weight:700; color:#fff; backdrop-filter:blur(4px);
    white-space:nowrap;
}
.sx-hero-amt-row {
    display:flex; align-items:center; gap:11px; flex-wrap:wrap;
    position:relative; z-index:1; margin:9px 0 2px;
}
.sx-hero-total {
    font-family:var(--font-display);
    font-size:clamp(1.45rem,5vw,1.95rem); font-weight:800;
    letter-spacing:-.03em; line-height:1.05;
    text-shadow:0 2px 18px rgba(0,0,0,.14);
}
.sx-hero-total.sx-masked { letter-spacing:.14em; font-size:clamp(1.3rem,4.4vw,1.7rem); }
.sx-eye {
    width:34px; height:34px; flex-shrink:0; border-radius:11px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.26);
    color:#fff; cursor:pointer; font-size:1.02rem;
    transition:background .15s ease, transform .12s ease;
}
.sx-eye:hover { background:rgba(255,255,255,.28); transform:translateY(-1px); }
.sx-eye:active { transform:scale(.92); }

/* First-visit privacy hint modal */
.sx-hint-overlay {
    position:fixed; inset:0; z-index:1600; padding:20px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,15,30,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    animation:sx-fade .2s ease;
}
.sx-hint-card {
    width:min(92vw,340px); background:var(--surface); border-radius:22px;
    padding:26px 22px 22px; text-align:center;
    box-shadow:0 30px 70px -22px rgba(0,0,0,.45), 0 0 0 1px var(--border-soft);
    animation:sx-pop .32s cubic-bezier(.22,1,.36,1);
}
.sx-hint-ic {
    width:58px; height:58px; border-radius:18px; margin:0 auto 15px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent-2); font-size:1.65rem;
}
.sx-hint-title { font-weight:800; font-size:1.08rem; color:var(--text); margin-bottom:7px; letter-spacing:-.01em; }
.sx-hint-text { font-size:.87rem; color:var(--text-2); line-height:1.55; margin-bottom:20px; }
.sx-hint-actions { display:flex; flex-direction:column; gap:9px; }
@keyframes sx-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes sx-pop{ from{opacity:0;transform:translateY(12px) scale(.96);} to{opacity:1;transform:none;} }

/* Refined action buttons (replaces the raw btn look) */
.sx-act {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.79rem; font-weight:750; line-height:1;
    padding:8px 15px; border-radius:11px; cursor:pointer;
    border:1px solid var(--border-soft); background:var(--surface-alt);
    color:var(--text-2); transition:transform .13s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sx-act i { font-size:.9rem; }
.sx-act:hover {
    transform:translateY(-1px);
    border-color:var(--sx-c,#10b981); color:var(--sx-c,#10b981);
    background:color-mix(in srgb, var(--sx-c,#10b981) 9%, var(--surface));
    box-shadow:0 8px 18px -12px var(--sx-c,#10b981);
}
.sx-act:active { transform:translateY(0) scale(.97); }
.sx-act.sx-act-solid {
    background:var(--sx-c,#10b981); border-color:var(--sx-c,#10b981); color:#fff;
    box-shadow:0 8px 18px -12px var(--sx-c,#10b981);
}
.sx-act.sx-act-solid:hover { filter:brightness(1.06); color:#fff; transform:translateY(-1px); }
/* Non-interactive info chip (e.g. order payment method) */
.sx-pay-chip {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.75rem; font-weight:750; line-height:1;
    padding:8px 12px; border-radius:11px;
    color:var(--sx-c,#64748b);
    background:color-mix(in srgb, var(--sx-c,#64748b) 10%, var(--surface));
    border:1px solid color-mix(in srgb, var(--sx-c,#64748b) 26%, transparent);
}
.sx-pay-chip i { font-size:.85rem; }

/* Refined page-header controls (New Sale / Add Expense / Use AI / branch / help) */
.sx-wrap .page-header { margin-bottom:12px; }
.sx-wrap .page-header .btn-sm,
.sx-wrap .page-header .ai-btn,
.sx-wrap .page-header .branch-select,
.sx-wrap .page-header .help-trigger {
    height:38px; min-height:38px; border-radius:12px;
    font-size:.82rem; font-weight:750;
    display:inline-flex; align-items:center; justify-content:center;
}
.sx-wrap .page-header .btn-primary {
    padding:0 16px; background:var(--accent); border:1px solid var(--accent);
    box-shadow:0 8px 18px -11px var(--accent-glow);
}
.sx-wrap .page-header .btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 24px -11px var(--accent-glow); }
.sx-wrap .page-header .btn-primary i { font-size:.95rem; }
/* Use AI — tasteful soft violet that fills on hover (no gradient) */
.sx-wrap .page-header .ai-btn {
    padding:0 14px; gap:6px;
    background:#f5f3ff; color:#7c3aed; border:1px solid #ddd6fe;
    box-shadow:none;
}
.sx-wrap .page-header .ai-btn:hover {
    background:#7c3aed; color:#fff; border-color:#7c3aed;
    transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(124,58,237,.6);
}
.sx-wrap .page-header .ai-btn i { margin:0; font-size:.95rem; }
/* Branch dropdown + help button aligned to the same pill height */
.sx-wrap .page-header .branch-select {
    padding:0 32px 0 13px; border:1px solid var(--border-soft);
    background-color:var(--surface); color:var(--text-2); cursor:pointer;
    box-shadow:var(--shadow-xs);
}
.sx-wrap .page-header .branch-select:hover { border-color:var(--text-3); }
.sx-wrap .page-header .help-trigger {
    width:38px; padding:0; color:var(--text-3);
    background:var(--surface-alt); border:1px solid var(--border-soft);
}
.sx-wrap .page-header .help-trigger:hover { color:var(--accent-2); border-color:var(--accent-ring); background:var(--accent-soft); }
@media (max-width:380px) {
    .sx-wrap .page-header .ai-btn { width:38px; min-width:38px; padding:0; font-size:0; gap:0; }
    .sx-wrap .page-header .ai-btn i { font-size:1rem; }
}
.sx-hero-sub {
    display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:1; margin-top:10px;
}
.sx-hero-pill {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.20);
    padding:6px 11px; border-radius:12px; font-size:.77rem; font-weight:650;
    color:rgba(255,255,255,.94);
}
.sx-hero-pill b { font-weight:800; color:#fff; }
.sx-hero-pill i { opacity:.9; }

/* Payment method mini-cards */
.sx-pm-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px; margin-bottom:20px;
}
.sx-pm-card {
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:16px; padding:13px 14px;
    box-shadow:var(--shadow-xs);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    animation:sx-rise .45s cubic-bezier(.22,1,.36,1) both;
}
.sx-pm-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(15,23,42,.4); border-color:var(--sx-c,#10b981); }
.sx-pm-head { display:flex; align-items:center; gap:9px; }
.sx-pm-dot {
    width:34px; height:34px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--sx-c,#10b981); color:#fff; font-size:1rem;
    box-shadow:0 6px 14px -8px var(--sx-c,#10b981);
}
.sx-pm-label { font-size:.74rem; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.sx-pm-count { font-size:.72rem; color:var(--text-3); font-weight:600; }
.sx-pm-val {
    font-family:var(--font-display); font-size:1.28rem; font-weight:800;
    color:var(--text); letter-spacing:-.02em; margin:9px 0 8px; line-height:1;
}
.sx-pm-bar { height:6px; border-radius:99px; background:var(--border-light); overflow:hidden; }
.sx-pm-bar > i { display:block; height:100%; border-radius:99px; background:var(--sx-c,#10b981);
    transform-origin:left; animation:sx-grow .7s cubic-bezier(.22,1,.36,1) both; }
.sx-pm-share { font-size:.7rem; font-weight:700; color:var(--sx-c,#10b981); margin-top:6px; }
/* Billed-but-unpaid tail on a payment card — money still to come, not money in. */
.sx-pm-owed {
    margin-top:6px; padding-top:6px; border-top:1px dashed var(--border-light);
    font-size:.68rem; font-weight:700; color:#b45309;
}
.sx-pm-owed i { font-size:.66rem; margin-right:2px; }
@keyframes sx-grow{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes sx-rise{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* Received vs receivable tiles (sales page) */
.sx-rcv-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
    gap:10px; margin-bottom:8px;
}
.sx-rcv-tile {
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border-soft);
    border-left:3px solid var(--sx-c,#10b981);
    border-radius:14px; padding:12px 14px;
    box-shadow:var(--shadow-xs);
    animation:sx-rise .4s cubic-bezier(.22,1,.36,1) both;
}
.sx-rcv-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sx-rcv-ic {
    width:26px; height:26px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--sx-c,#10b981) 14%, transparent);
    color:var(--sx-c,#10b981); font-size:.82rem;
}
.sx-rcv-label { font-size:.7rem; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.sx-rcv-val {
    font-family:var(--font-display); font-size:1.2rem; font-weight:800;
    color:#000; letter-spacing:-.02em; line-height:1;
}
.sx-rcv-sub { font-size:.71rem; color:var(--text-3); font-weight:600; margin-top:5px; }
.sx-rcv-note {
    font-size:.75rem; color:var(--text-2); font-weight:600;
    background:var(--surface-hover); border:1px solid var(--border-light);
    border-radius:12px; padding:9px 12px; margin-bottom:20px;
}
.sx-rcv-note i { color:var(--blue,#0284c7); margin-right:4px; }

/* Section toolbar */
.sx-sec { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.sx-sec-title { font-size:.95rem; font-weight:800; color:var(--text); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.sx-sec-title i { color:var(--accent); }
.sx-sec-count {
    font-size:.72rem; font-weight:800; color:var(--accent-2);
    background:var(--accent-soft); border:1px solid var(--accent-ring);
    padding:3px 10px; border-radius:999px;
}

/* Sale rows */
.sx-list { display:flex; flex-direction:column; gap:9px; }
.sx-item {
    position:relative; display:flex; align-items:center; gap:13px;
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:16px; padding:13px 15px 13px 17px;
    box-shadow:var(--shadow-xs); cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    animation:sx-rise .4s cubic-bezier(.22,1,.36,1) both;
}
.sx-item::before {
    content:""; position:absolute; left:0; top:12px; bottom:12px; width:3.5px;
    border-radius:0 4px 4px 0; background:var(--sx-c,#10b981);
    opacity:.85; transition:top .15s, bottom .15s;
}
.sx-item:hover { transform:translateY(-2px); box-shadow:0 16px 32px -22px rgba(15,23,42,.5); border-color:var(--sx-c,#10b981); }
.sx-item:hover::before { top:6px; bottom:6px; }
.sx-item:active { transform:translateY(0) scale(.995); }
.sx-ico {
    width:42px; height:42px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.12rem;
    background:color-mix(in srgb, var(--sx-c,#10b981) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--sx-c,#10b981) 26%, transparent);
    color:var(--sx-c,#10b981);
}
.sx-body { flex:1; min-width:0; }
.sx-ref { font-weight:750; font-size:.9rem; color:var(--text); line-height:1.25; overflow-wrap:anywhere; }
.sx-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.76rem; color:var(--text-3); margin-top:3px; }
.sx-meta .sx-tag { display:inline-flex; align-items:center; gap:4px; }
.sx-meta .sx-method {
    text-transform:capitalize; font-weight:700;
    color:var(--sx-c,#10b981);
}
.sx-end { text-align:right; flex-shrink:0; }
.sx-amt { font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:var(--text); letter-spacing:-.02em; }
.sx-time { font-size:.72rem; color:var(--text-3); font-weight:600; margin-top:2px; }
.sx-chev { color:var(--text-3); font-size:1.05rem; margin-left:2px; flex-shrink:0; transition:transform .15s, color .15s; }
.sx-item:hover .sx-chev { transform:translateX(3px); color:var(--sx-c,#10b981); }
.sx-item-actions {
    display:none; gap:8px; margin-top:11px; padding-top:11px;
    border-top:1px dashed var(--border-soft); width:100%;
}
.sx-item.sx-open .sx-item-actions { display:flex; flex-wrap:wrap; }
.sx-item.sx-open { flex-wrap:wrap; }

.sx-empty {
    text-align:center; padding:52px 18px;
    background:var(--surface); border:1px dashed var(--border-soft); border-radius:18px;
}
.sx-empty i { font-size:2.6rem; color:var(--accent); opacity:.55; display:block; margin-bottom:12px; }
.sx-empty h4 { margin:0 0 4px; font-weight:800; color:var(--text-2); }
.sx-empty p { margin:0; font-size:.85rem; color:var(--text-3); }

/* Donut ring for sidebar */
.sx-donut-wrap { display:flex; align-items:center; gap:16px; }
.sx-donut { width:104px; height:104px; flex-shrink:0; position:relative; border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.04); }
.sx-donut > div {
    position:absolute; inset:17px; background:var(--surface); border-radius:50%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    box-shadow:0 2px 8px -4px rgba(15,23,42,.18);
}
.sx-donut small { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.sx-donut b { font-size:.9rem; font-weight:800; color:var(--text); }
.sx-legend { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.sx-legend-row { display:flex; align-items:center; gap:8px; font-size:.78rem; }
.sx-legend-dot { width:10px; height:10px; border-radius:4px; flex-shrink:0; }
.sx-legend-name { font-weight:700; color:var(--text-2); text-transform:capitalize; flex:1; min-width:0; }
.sx-legend-val { font-weight:700; color:var(--text-3); white-space:nowrap; }

@media (min-width:720px) {
    .sx-item-actions { display:flex !important; flex-wrap:wrap; margin-top:0; padding-top:0; border-top:none;
        width:auto; margin-left:6px; }
    .sx-item.sx-open { flex-wrap:nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-hero,.sx-pm-card,.sx-item,.sx-pm-bar>i { animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   Settings / form page kit (.spg-) — clean hero + section cards
   Reused across profile, business, storefront and other form pages
   ════════════════════════════════════════════════════════════════ */
.spg-hero {
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:16px;
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:20px; padding:18px 20px; margin-bottom:16px;
    box-shadow:0 10px 26px -20px rgba(15,23,42,.35);
    animation:sx-rise .4s cubic-bezier(.22,1,.36,1) both;
}
.spg-hero-accent { position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--sx-c,var(--accent)); }
.spg-hero-ic {
    width:58px; height:58px; border-radius:17px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.55rem;
    background:color-mix(in srgb, var(--sx-c,var(--accent)) 13%, var(--surface));
    color:var(--sx-c,var(--accent));
    border:1px solid color-mix(in srgb, var(--sx-c,var(--accent)) 26%, transparent);
}
.spg-hero-body { flex:1; min-width:0; }
.spg-hero-title { font-size:1.2rem; font-weight:800; color:var(--text); letter-spacing:-.02em; line-height:1.15; overflow-wrap:anywhere; }
.spg-hero-sub { font-size:.83rem; color:var(--text-3); font-weight:650; margin-top:3px; overflow-wrap:anywhere; }
.spg-prog { display:flex; align-items:center; gap:9px; margin-top:10px; }
.spg-prog-bar { flex:1; max-width:200px; height:7px; border-radius:99px; background:var(--border-light); overflow:hidden; }
.spg-prog-bar > i { display:block; height:100%; border-radius:99px; background:var(--sx-c,var(--accent));
    transform-origin:left; animation:sx-grow .7s cubic-bezier(.22,1,.36,1) both; }
.spg-prog span { font-size:.74rem; font-weight:800; color:var(--sx-c,var(--accent)); white-space:nowrap; }

.spg-sec {
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:18px; padding:18px; margin-bottom:14px;
    box-shadow:0 6px 20px -16px rgba(15,23,42,.28);
}
.spg-sec-head { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.spg-sec-ic {
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.02rem;
    background:color-mix(in srgb, var(--sx-c,var(--accent)) 13%, var(--surface));
    color:var(--sx-c,var(--accent-2));
    border:1px solid color-mix(in srgb, var(--sx-c,var(--accent)) 24%, transparent);
}
.spg-sec-title { font-size:.98rem; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.spg-sec-sub { font-size:.78rem; color:var(--text-3); font-weight:650; margin-top:1px; }
.spg-sec.spg-danger { border-color:rgba(239,68,68,.22); background:rgba(239,68,68,.035); }
.spg-avatar-wrap { position:relative; width:72px; height:72px; flex-shrink:0; }
.spg-avatar-wrap .avatar-lg { width:72px; height:72px; }
.spg-avatar-cam {
    position:absolute; bottom:-2px; right:-2px; width:28px; height:28px;
    background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:2px solid var(--surface); box-shadow:0 4px 10px -4px var(--accent-glow);
}
.spg-avatar-cam i { color:#fff; font-size:.75rem; }

/* /edit-business: settings cards flow in one column on small screens and
   two per row on large ones — business details left, payment information
   and taxes stacked in the right column so heights stay tight. */
.eb-cols { display:block; }
@media (min-width:1080px) {
    .eb-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 18px; align-items:start; }
    .eb-cols .eb-col { min-width:0; }
}

/* ════════════════════════════════════════════════════════════════
   Notifications — compact rows (.ntf-), tight paddings
   ════════════════════════════════════════════════════════════════ */
.ntf-sec {
    display:flex; align-items:center; gap:8px;
    margin:17px 2px 8px;
    font-size:.73rem; font-weight:800; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.07em;
}
.ntf-sec i { color:var(--accent-2); font-size:.86rem; }
.ntf-cnt {
    background:var(--accent-soft); color:var(--accent-2);
    border:1px solid var(--accent-ring);
    border-radius:99px; padding:2px 8px;
    font-size:.68rem; font-weight:800;
}
.ntf-act {
    margin-left:auto; border:none; background:none; cursor:pointer;
    color:var(--accent-2); font-weight:750; font-size:.76rem;
    text-transform:none; letter-spacing:0;
    display:inline-flex; align-items:center; gap:4px; padding:2px 4px;
}
.ntf-act:hover { text-decoration:underline; }
.ntf-list {
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:15px; overflow:hidden;
}
.ntf-row {
    position:relative; display:flex; align-items:center; gap:12px;
    padding:13px 14px; cursor:pointer; transition:background .12s;
}
.ntf-row + .ntf-row { border-top:1px solid var(--border-light); }
.ntf-row:hover { background:var(--surface-hover); }
.ntf-row.unread { background:color-mix(in srgb, var(--n,#6366f1) 5%, var(--surface)); }
.ntf-row.unread::before {
    content:''; position:absolute; left:0; top:11px; bottom:11px; width:2.5px;
    border-radius:0 3px 3px 0; background:var(--n,#6366f1);
}
.ntf-ico {
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:.98rem;
    background:color-mix(in srgb, var(--n,#6366f1) 12%, transparent);
    color:var(--n,#6366f1);
}
.ntf-body { flex:1; min-width:0; }
.ntf-title {
    display:flex; align-items:center; gap:6px;
    font-size:.9rem; font-weight:750; color:var(--text); line-height:1.3;
    min-width:0;
}
.ntf-dot { width:6px; height:6px; border-radius:50%; background:var(--n,#6366f1); flex-shrink:0; }
.ntf-prev {
    font-size:.8rem; color:var(--text-3); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ntf-end {
    flex-shrink:0; display:flex; flex-direction:column;
    align-items:flex-end; gap:3px; text-align:right;
}
.ntf-time { font-size:.71rem; font-weight:650; color:var(--text-3); white-space:nowrap; }
.ntf-amt { font-size:.88rem; font-weight:800; color:var(--text); white-space:nowrap; }
.ntf-empty {
    padding:24px 15px; text-align:center;
    color:var(--text-3); font-size:.84rem; font-weight:600;
}
.ntf-empty i { display:block; font-size:1.5rem; margin-bottom:6px; opacity:.55; color:var(--accent); }

/* ════════════════════════════════════════════════════════════════
   Auth styles live in the "Auth Screen (login / OTP)" section near
   the top of this file. Kept here: a global fix that repairs the
   `hidden` attribute against author display rules
   (.input-group{display:flex} was silently defeating it).
   ════════════════════════════════════════════════════════════════ */
[hidden] { display:none !important; }

/* ════════════════════════════════════════════════════════════════
   Dashboard: "Visit your storefront" premium CTA card
   ════════════════════════════════════════════════════════════════ */
.dsb-store-cta {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    cursor: pointer;
    text-align: left;
    border-radius: 18px;
    background: linear-gradient(135deg, #0d4f3f 0%, #047857 45%, #059669 100%);
    color: #fff;
    box-shadow: 0 16px 34px -18px rgba(5, 150, 105, .7);
    transition: transform .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
    position: relative;
    overflow: hidden;
    animation: sx-rise .4s cubic-bezier(.22, 1, .36, 1) both;
}
.dsb-store-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--app-bg-pattern);
    background-size: 46px 46px;
    opacity: .6;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.dsb-store-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -18px rgba(4, 120, 87, .85); }
.dsb-store-cta:active { transform: none; }
.dsb-store-cta-ic {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}
.dsb-store-cta-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.dsb-store-cta-title { font-weight: 800; font-size: .96rem; letter-spacing: -.01em; }
.dsb-store-cta-sub { font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .82); }
.dsb-store-cta-arrow { font-size: 1.1rem; opacity: .9; flex-shrink: 0; position: relative; z-index: 1; transition: transform .15s var(--ease, ease); }
.dsb-store-cta:hover .dsb-store-cta-arrow { transform: translate(2px, -2px); }

/* ════════════════════════════════════════════════════════════════
   WhatsApp Business page — simplified layout
   ════════════════════════════════════════════════════════════════ */
/* Connect hero (not-connected state) */
.wa-hero {
    text-align: center;
    max-width: 520px;
    margin: 8px auto 0;
    padding: 26px 22px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 18px 40px -30px rgba(37,211,102,.5);
}
.wa-hero-ic {
    width: 60px; height: 60px; margin: 0 auto 14px;
    border-radius: 18px; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.9rem;
    box-shadow: 0 12px 26px -12px rgba(37,211,102,.7);
}
.wa-hero-title { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.wa-hero-sub { font-size: .86rem; color: var(--text-3); line-height: 1.6; margin: 8px auto 18px; max-width: 440px; }
.wa-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wa-hero-note {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light);
    font-size: .76rem; color: var(--text-3); line-height: 1.6;
}
.wa-hero-note b { color: var(--text-2); font-weight: 800; }

/* Connected status strip */
.wa-status {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 13px 15px; margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    border-left: 4px solid #25D366;
}
.wa-status-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wa-status-ic {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    background: #25D366; color: #fff; font-size: 1.25rem;
    display: flex; align-items: center; justify-content: center;
}
.wa-status-num { font-size: 1rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-status-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.wa-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-2);
    border: 1px solid var(--accent-ring);
    font-size: .7rem; font-weight: 800;
}
.wa-status-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* Segmented tabs */
.wa-tabs {
    display: flex; gap: 4px; margin-bottom: 14px;
    background: var(--surface-alt); border: 1px solid var(--border-soft);
    border-radius: 13px; padding: 4px; overflow-x: auto;
}
.wa-tab {
    flex: 1 1 auto; min-width: max-content;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; background: transparent; cursor: pointer;
    padding: 9px 12px; border-radius: 10px;
    font: inherit; font-size: .82rem; font-weight: 750; color: var(--text-3);
    white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.wa-tab i { font-size: .9rem; }
.wa-tab:hover { color: var(--text); }
.wa-tab.active { background: var(--surface); color: var(--accent-2); box-shadow: 0 2px 8px -2px rgba(15,23,42,.14), inset 0 0 0 1px var(--accent-ring); }

/* Catalog tab internals */
.wa-cat-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.wa-cat-act { border: 1px solid var(--border-soft); border-radius: 12px; padding: 13px; background: var(--surface-alt); }
.wa-cat-act-h { font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.wa-cat-act-s { font-size: .78rem; color: var(--text-3); line-height: 1.55; margin: 7px 0 11px; }
.wa-cat-act-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-cat-listhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.wa-cat-listtitle { font-weight: 800; color: var(--text); font-size: .92rem; }

/* ════════════════════════════════════════════════════════════════
   WhatsApp chat, broadcast & logs — responsive app-style layout
   ════════════════════════════════════════════════════════════════ */
.wa-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 26px 18px; text-align: center;
    color: var(--text-3); font-size: .82rem; line-height: 1.55;
}
.wa-empty i { font-size: 1.6rem; opacity: .6; }
.wa-empty-lg { flex: 1; }
.wa-empty-lg i { font-size: 2.2rem; opacity: .9; }

/* Chat two-pane / one-pane */
.wa-chat {
    display: flex;
    height: 64vh; min-height: 420px; max-height: 640px;
    border: 1px solid var(--border-soft); border-radius: 16px;
    overflow: hidden; background: var(--surface);
}
.wa-chat-list {
    width: 300px; flex: 0 0 300px; min-width: 0;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-soft);
}
.wa-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-cl-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 13px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto;
}
.wa-cl-title { font-weight: 800; color: var(--text); font-size: .9rem; }
.wa-cl-count {
    display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px;
    background: var(--surface-alt); color: var(--text-3); font-size: .68rem; font-weight: 800;
}
.wa-cl-scroll { flex: 1; overflow-y: auto; }
.wa-cl-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--border-soft); flex: 0 0 auto; }

.wa-conv {
    display: flex; align-items: center; gap: 11px; padding: 11px 13px;
    cursor: pointer; border-bottom: 1px solid var(--border-light);
    transition: background .12s;
}
.wa-conv:hover { background: var(--surface-hover); }
.wa-conv.active { background: color-mix(in srgb, #25D366 9%, var(--surface)); }
.wa-conv-av {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, #25D366, #128C7E); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem;
}
.wa-conv-av-sm { width: 36px; height: 36px; font-size: .88rem; }
.wa-conv-body { flex: 1; min-width: 0; }
.wa-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wa-conv-name { font-weight: 750; color: var(--text); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wa-conv-time { font-size: .68rem; color: var(--text-3); flex: 0 0 auto; }
.wa-conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.wa-conv-last { font-size: .78rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wa-conv-badge {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #25D366; color: #fff; font-size: .68rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

.wa-cm-head { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto; }
.wa-cm-back { display: none; border: none; background: none; cursor: pointer; color: var(--text-2); font-size: 1.15rem; padding: 2px 4px; }
.wa-cm-name { font-weight: 800; color: var(--text); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-cm-phone { font-size: .74rem; color: var(--text-3); }
.wa-cm-msgs {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column;
    background: var(--surface-alt);
}
.wa-msg { display: flex; margin: 4px 0; max-width: 100%; }
.wa-msg.out { justify-content: flex-end; }
.wa-msg.in { justify-content: flex-start; }
.wa-bubble {
    max-width: 80%; padding: 8px 11px 6px; border-radius: 12px;
    font-size: .86rem; line-height: 1.45; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
    box-shadow: 0 1px 1px rgba(15,23,42,.06);
}
.wa-msg.in .wa-bubble { background: var(--surface); border-bottom-left-radius: 4px; }
.wa-msg.out .wa-bubble { background: #d9fdd3; color: #0b3b23; border-bottom-right-radius: 4px; }
.wa-bubble-time { display: block; font-size: .64rem; opacity: .7; margin-top: 3px; text-align: right; }
.wa-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-soft); flex: 0 0 auto; background: var(--surface); }
.wa-composer textarea {
    flex: 1; min-width: 0; resize: none; overflow-y: auto;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 20px;
    font: inherit; font-size: .88rem; line-height: 1.4; max-height: 120px;
    background: var(--surface);
}
.wa-composer textarea:focus { outline: none; border-color: #25D366; box-shadow: 0 0 0 3px rgba(37,211,102,.14); }
.wa-composer .wa-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Mobile: one pane at a time */
@media (max-width: 760px) {
    .wa-chat { height: calc(100dvh - 260px); min-height: 400px; max-height: none; }
    .wa-chat-list { width: 100%; flex: 1 0 100%; border-right: none; }
    .wa-chat-main { display: none; flex: 1 0 100%; }
    .wa-chat.show-chat .wa-chat-list { display: none; }
    .wa-chat.show-chat .wa-chat-main { display: flex; }
    .wa-cm-back { display: inline-flex; align-items: center; }
}

/* Broadcast */
.wa-bc { display: grid; grid-template-columns: 1fr; gap: 14px; }
.wa-bc-list { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; max-height: 460px; }
.wa-bc-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--border-light); }
.wa-bc-row:hover { background: var(--surface-hover); }
.wa-bc-row.checked { background: color-mix(in srgb, #25D366 7%, var(--surface)); }
.wa-bc-row input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #25D366; }
.wa-bc-name { font-weight: 700; color: var(--text); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-bc-phone { font-size: .76rem; color: var(--text-3); }
.wa-bc-modes { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: 12px; margin-bottom: 12px; }
.wa-bc-modes .wa-tab { flex: 0 0 auto; }
.wa-bc-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); margin: 0 0 12px; cursor: pointer; }
.wa-bc-check input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #25D366; }
@media (min-width: 760px) { .wa-bc { grid-template-columns: minmax(0,1fr) 340px; }
}

/* Logs (API activity + catalog activity) */
.wa-logs { border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; background: var(--surface); margin-top: 16px; }
.wa-logs-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--border-soft); font-weight: 800; font-size: .84rem; color: var(--text); }
.wa-logs-head i { color: var(--accent-2); }
.wa-log { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--border-light); }
.wa-log:last-child { border-bottom: none; }
.wa-log-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.wa-log-ic { width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.wa-log-body { flex: 1; min-width: 0; }
.wa-log-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wa-log-action { font-weight: 750; color: var(--text); font-size: .8rem; font-family: ui-monospace, Menlo, monospace; text-transform: none; }
.wa-log-to { font-size: .74rem; color: var(--text-3); }
.wa-log-http { font-size: .68rem; font-weight: 700; color: var(--text-3); background: var(--surface-alt); border-radius: 6px; padding: 1px 6px; }
.wa-log-meta { font-size: .74rem; color: var(--text-3); margin-top: 1px; }
.wa-log-err { font-size: .74rem; color: var(--red); margin-top: 2px; word-break: break-word; line-height: 1.45; }
.wa-log-time { font-size: .7rem; color: var(--text-3); flex: 0 0 auto; white-space: nowrap; margin-top: 2px; }

/* Readable log title (non-monospace) */
.wa-log-name { font-weight: 750; color: var(--text); font-size: .84rem; }

/* Mobile: opened chat becomes a full-height pane with the composer pinned
   above the bottom nav so the input + send never scroll away. */
@media (max-width: 760px) {
    .wa-chat.show-chat {
        position: fixed;
        left: 0; right: 0;
        top: var(--topbar-h, 60px);
        bottom: var(--bnav-h, 62px);
        height: auto; min-height: 0; max-height: none;
        z-index: 2000;
        border-radius: 0; border: none;
    }
    /* Composer pinned above the bottom nav, above any fixed page FAB */
    .wa-chat.show-chat .wa-composer {
        position: relative; z-index: 2001;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    /* An open full-screen chat hides the floating menu button so it can't
       cover the composer's attach/send controls. */
    body.wa-chat-open .menu-fab { display: none !important; }
}

/* WhatsApp media bubbles + attach button */
.wa-bubble.has-media { padding: 4px 4px 6px; }
.wa-media-img { display: block; }
.wa-media-img img { display: block; max-width: 220px; max-height: 260px; width: 100%; border-radius: 9px; object-fit: cover; }
.wa-media-cap { padding: 5px 7px 0; font-size: .84rem; }
.wa-media-doc {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; min-width: 160px; max-width: 260px;
    text-decoration: none; color: inherit;
}
.wa-media-doc i { font-size: 1.4rem; color: #059669; flex: 0 0 auto; }
.wa-media-doc span { font-size: .82rem; font-weight: 700; word-break: break-word; }
.wa-attach {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-3); font-size: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.wa-attach:hover { background: var(--surface-hover); color: var(--accent-2); }

/* WhatsApp file-send preview dialog */
.wa-file-preview {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-alt); border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 10px; max-height: 320px; overflow: hidden;
}
.wa-file-preview img { max-width: 100%; max-height: 300px; border-radius: 10px; object-fit: contain; }
.wa-file-doc {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface-alt); border: 1px solid var(--border-soft);
    border-radius: 14px; padding: 14px 16px;
}
.wa-file-doc > i { font-size: 2rem; color: #059669; flex: 0 0 auto; }
.wa-file-name { font-weight: 750; color: var(--text); font-size: .9rem; word-break: break-word; }
.wa-file-size { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.wa-msg-placeholder { font-style: italic; opacity: .8; display: inline-flex; align-items: center; gap: 5px; }

.wa-media-video { max-width: 240px; max-height: 280px; border-radius: 9px; display: block; }
.wa-media-audio { width: 220px; max-width: 100%; height: 40px; display: block; }

/* WhatsApp message templates */
.wa-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.wa-tpl {
    border: 1px solid var(--border-soft); border-radius: 12px;
    padding: 12px 13px; background: var(--surface);
}
.wa-tpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wa-tpl-name { font-weight: 800; color: var(--text); font-size: .9rem; font-family: ui-monospace, Menlo, monospace; word-break: break-word; }
.wa-tpl-meta { font-size: .72rem; color: var(--text-3); text-transform: capitalize; margin-top: 2px; }
.wa-tpl-body {
    font-size: .82rem; color: var(--text-2); line-height: 1.5; margin-top: 8px;
    white-space: pre-wrap; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wa-tpl-reason { font-size: .76rem; color: var(--red); margin-top: 7px; line-height: 1.45; }
.wa-tpl-actions { display: flex; gap: 8px; margin-top: 11px; }
.wa-tpl-preview {
    background: #d9fdd3; color: #0b3b23; border-radius: 12px; border-bottom-left-radius: 4px;
    padding: 10px 12px; font-size: .86rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.wa-tpl-pick {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--border-soft); border-radius: 12px; padding: 11px 12px;
    background: var(--surface); cursor: pointer; transition: background .12s;
}
.wa-tpl-pick:hover { background: var(--surface-hover); }
.wa-tpl-pick .wa-tpl-body { -webkit-line-clamp: 2; margin-top: 3px; }

/* WhatsApp template starters (create modal) */
.wa-preset-grid { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.wa-preset {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--border-soft); border-radius: 11px; padding: 10px 12px;
    background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
}
.wa-preset:hover { background: var(--surface-hover); }
.wa-preset.active { border-color: #25D366; background: color-mix(in srgb, #25D366 7%, var(--surface)); }
.wa-preset > i { font-size: 1.05rem; color: var(--accent-2); flex: 0 0 auto; margin-top: 1px; }
.wa-preset-title { font-weight: 750; color: var(--text); font-size: .84rem; }
.wa-preset-body {
    font-size: .75rem; color: var(--text-3); line-height: 1.45; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 560px) { .wa-preset-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SMS — compose-first experience
   ════════════════════════════════════════════════════════════════ */
.sms-compose { padding: 16px 16px 18px; margin-bottom: 16px; }
.sms-compose-label {
    font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 8px;
}

/* Audience pills */
.sms-aud { display: flex; gap: 8px; flex-wrap: wrap; }
.sms-aud-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--border-soft); border-radius: 12px;
    background: var(--surface); cursor: pointer; padding: 9px 13px;
    font: inherit; font-size: .84rem; font-weight: 700; color: var(--text-2);
    transition: border-color .12s, background .12s, color .12s;
}
.sms-aud-pill i { font-size: .95rem; opacity: .8; }
.sms-aud-pill b { font-weight: 800; color: var(--text-3); font-size: .8rem; }
.sms-aud-pill:hover { background: var(--surface-hover); }
.sms-aud-pill.active {
    border-color: #10b981; background: color-mix(in srgb, #10b981 8%, var(--surface)); color: var(--text);
}
.sms-aud-pill.active b { color: var(--accent-2); }

/* Selected-customers picker */
.sms-picker { margin-top: 12px; border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px; background: var(--surface-alt); }
.sms-picker-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.sms-picker-tools input { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: .84rem; background: var(--surface); }
.sms-picker-list { max-height: 240px; overflow-y: auto; }

/* Quick-message chips */
.sms-chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.sms-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border-soft); border-radius: 999px;
    background: var(--surface-alt); cursor: pointer; padding: 6px 11px;
    font: inherit; font-size: .78rem; font-weight: 700; color: var(--text-2);
    transition: background .12s, border-color .12s;
}
.sms-chip i { font-size: .82rem; color: var(--accent-2); }
.sms-chip:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent-2); }

/* Message box */
.sms-msg {
    width: 100%; resize: vertical; min-height: 96px;
    padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px;
    font: inherit; font-size: .92rem; line-height: 1.5; background: var(--surface);
}
.sms-msg:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }

/* Live summary */
.sms-summary { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 9px 2px 14px; font-size: .78rem; color: var(--text-3); font-weight: 650; }
.sms-summary b { color: var(--text); font-weight: 800; }

.sms-send { font-weight: 800; }
.sms-sender-line { margin-top: 9px; text-align: center; font-size: .78rem; color: var(--text-3); }
.sms-sender-line b { color: var(--text-2); font-weight: 800; }
.sms-warn { color: var(--amber); font-weight: 700; }
.sms-warn a { color: var(--accent-2); font-weight: 800; }

/* Which sender ID this message goes out under — only shown when a business
   holds more than one approved name. */
.sms-sender-pick { display: flex; gap: 7px; flex-wrap: wrap; }
.sms-sender-chip.active {
    background: var(--accent-soft);
    border-color: var(--accent-ring);
    color: var(--accent-2);
    font-weight: 800;
}
.sms-sender-chip.active i { color: var(--accent-2); }

/* Sending, and what came of it. Sits where the button was, so the answer
   appears exactly where the waiting happened. */
.sms-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid var(--border-light);
    background: var(--surface-hover);
    margin-bottom: 10px;
}
.sms-status-spin { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; }
.sms-status-body { flex: 1; min-width: 0; }
.sms-status-title { font-weight: 800; font-size: .93rem; }
.sms-status-sub { font-size: .78rem; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.sms-status-sub b { color: var(--text-2); font-weight: 800; }
.sms-status-x {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px;
    font-size: .8rem;
}
.sms-status-x:hover { color: var(--text); }
.sms-status-busy .sms-status-spin { color: var(--accent-2); }
.sms-status-good { background: var(--accent-soft); border-color: var(--accent-ring); }
.sms-status-good .sms-status-spin { color: var(--accent-2); }
.sms-status-bad .sms-status-spin { color: var(--red); }

/* A long send arrives in legs, so this is a real proportion of the list rather
   than an animation standing in for one. */
.sms-progress {
    height: 5px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
    margin-top: 8px;
}
.sms-progress-fill {
    height: 100%;
    background: var(--accent-2);
    border-radius: 3px;
    transition: width .3s ease;
}

/* Secondary tab bar spacing */
.sms-tab-bar-sec { margin-top: 4px; }

/* SMS two-column on large screens: compose left, utilities right */
.sms-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sms-layout-main { min-width: 0; }
.sms-layout-side { min-width: 0; }
.sms-layout .sms-compose { margin-bottom: 0; }
.sms-layout .sms-tab-bar-sec { margin-top: 0; }
@media (min-width: 1000px) {
    .sms-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
    .sms-layout-side { position: sticky; top: 16px; }
}

/* Suppliers — card list with message action */
.sup-list { display: flex; flex-direction: column; gap: 10px; }
.sup-card {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; background: var(--surface);
    border: 1px solid var(--border-soft); border-radius: 14px;
    animation: sx-rise .4s cubic-bezier(.22,1,.36,1) both;
}
.sup-av {
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
    background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem;
}
.sup-body { flex: 1; min-width: 0; cursor: pointer; }
.sup-name { font-weight: 750; color: var(--text); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-sub { font-size: .8rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-loc { font-size: .76rem; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.sup-loc i { color: var(--accent-2); }
.sup-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (min-width: 760px) { .sup-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* WhatsApp delivery ticks (outbound messages) */
.wa-tick { font-size: .82rem; margin-left: 3px; vertical-align: -1px; color: rgba(11,59,35,.45); }
.wa-tick-read { color: #53bdeb; }
.wa-tick-fail { color: #ef4444; }

/* WhatsApp chat: CRM customer strip in the header */
.wa-cm-crm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    padding: 8px 13px; border-bottom: 1px solid var(--border-soft);
    background: var(--surface-alt); font-size: .76rem; color: var(--text-3); font-weight: 650;
}
.wa-cm-crm span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wa-cm-crm i { color: var(--accent-2); }
.wa-cm-crm a { margin-left: auto; color: var(--accent-2); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.wa-cm-crm a:hover { text-decoration: underline; }

/* ══════════════ Date picker (flatpickr) — brand theme (compact) ══════════════
   Loaded after flatpickr.min.css so these win. Applies to the dashboard
   filter AND every date field (App.setupDatePickers / Filters.datePickerConfig).
   Fixed compact footprint (7 × 34px grid) so it stays small on every screen. */
.flatpickr-calendar {
    font-family: var(--font-body);
    font-size: .84rem;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    border: 1.5px solid var(--border);
    background: var(--surface);
    padding: 3px;
    width: auto !important;
}
/* Drop the little pointer arrow for a cleaner popover */
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }

/* Shrink the day/week grid so the whole popover is compact (7 × 34px = 238px) */
.flatpickr-days { width: 238px !important; }
.flatpickr-days .dayContainer { width: 238px !important; min-width: 238px !important; max-width: 238px !important; }
.flatpickr-weekdays { width: 238px; }
.flatpickr-rContainer { width: 238px; }

.flatpickr-months { padding-top: 3px; align-items: center; }
.flatpickr-months .flatpickr-month { color: var(--text); height: 34px; }
.flatpickr-current-month {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: .86rem; padding-top: 0; height: 34px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.fp-year-select {
    font-family: var(--font-body); font-weight: 800; font-size: .82rem; color: var(--text);
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: var(--r-xs); padding: 3px 6px;
    -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s var(--ease);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.fp-year-select:hover { border-color: var(--accent); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.fp-year-select option { background: var(--surface); color: var(--text); }

/* Nav arrows */
.flatpickr-prev-month, .flatpickr-next-month {
    border-radius: var(--r-xs); padding: 5px 8px; transition: background .15s var(--ease);
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--text-2); width: 13px; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: var(--accent-soft); }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--accent-2); }

/* Weekday header */
.flatpickr-weekdays { margin-top: 2px; }
span.flatpickr-weekday { color: var(--text-3); font-weight: 800; font-size: .64rem; text-transform: uppercase; letter-spacing: .02em; }

/* Day cells — compact, brand selection/hover/today */
.flatpickr-day {
    color: var(--text); font-weight: 600; font-size: .82rem;
    height: 34px; line-height: 34px; max-width: 34px;
    border-radius: var(--r-xs); border: 1.5px solid transparent;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }
.flatpickr-day.today { border-color: var(--accent); color: var(--accent-2); font-weight: 800; }
.flatpickr-day.today:hover { background: var(--accent-soft); color: var(--accent-2); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus,
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 2px 8px -3px var(--accent-glow);
}
.flatpickr-day.inRange {
    background: var(--accent-soft); border-color: transparent; color: var(--accent-2);
    box-shadow: -5px 0 0 var(--accent-soft), 5px 0 0 var(--accent-soft);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-3); }

/* "Today" shortcut button (injected via datePickerConfig onReady) */
.fp-today-foot {
    display: flex; justify-content: center;
    padding: 6px 6px 4px; margin-top: 3px;
    border-top: 1px solid var(--border-light);
}
.fp-today-btn {
    font-family: var(--font-body); font-weight: 800; font-size: .74rem;
    color: var(--accent-2); background: var(--accent-soft);
    border: 1px solid var(--accent-ring); border-radius: var(--r-full);
    padding: 6px 16px; transition: all .15s var(--ease);
}
.fp-today-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Time field (type="time") — friendly Hour / Minute / AM·PM dropdowns (App._enhanceTimeInput) */
.app-time { display: inline-flex; align-items: center; gap: 6px; }
.app-time select {
    width: auto; min-width: 60px; text-align: center; text-align-last: center;
    padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text); font-family: var(--font-body);
    font-weight: 700; font-size: .9rem; cursor: pointer;
    -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.app-time select:hover { border-color: var(--text-3); }
.app-time select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.app-time .app-time-sep { font-weight: 800; color: var(--text-3); }
.app-time .app-time-ap { min-width: 66px; }

/* ============================================================
   DASHBOARD REDESIGN 2026 — sleek fintech console (dsz-)
   Charts follow the dataviz method: validated palette, thin
   marks, recessive grid, legends + direct values, hover layer.
   Loaded last on purpose: overrides earlier dashboard passes.
   ============================================================ */

/* ── Hero revenue panel ───────────────────────────── */
.dsz-hero-wrap { width: 100%; display: grid; gap: 12px; }
/* The revenue card wears the brand: a deep emerald face with the same
   low-poly facet texture as the old platinum skin, recolored to greens.
   White figures + translucent furniture carry the ATM identity on dark. */
.dsz-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 24px;
    padding: clamp(13px, 1.9vw, 19px);
    color: #ecfdf5;
    cursor: pointer;
    background:
        linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(2,44,34,.22) 66%, rgba(255,255,255,.08) 100%),
        linear-gradient(0deg, rgba(2,44,34,.14), rgba(2,44,34,.14)),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'130'%20viewBox%3D'0%200%20200%20130'%3E%3Crect%20width%3D'200'%20height%3D'130'%20fill%3D'%23067352'%2F%3E%3Cg%20stroke%3D'%23ffffff'%20stroke-width%3D'0.5'%20stroke-opacity%3D'0.10'%3E%3Cpolygon%20points%3D'0%2C0%2055%2C0%2020%2C40'%20fill%3D'%230b9c72'%2F%3E%3Cpolygon%20points%3D'55%2C0%2020%2C40%2070%2C55'%20fill%3D'%23045b43'%2F%3E%3Cpolygon%20points%3D'55%2C0%20120%2C0%2070%2C55'%20fill%3D'%23088a64'%2F%3E%3Cpolygon%20points%3D'120%2C0%2070%2C55%20140%2C45'%20fill%3D'%23056048'%2F%3E%3Cpolygon%20points%3D'120%2C0%20200%2C0%20140%2C45'%20fill%3D'%230ca378'%2F%3E%3Cpolygon%20points%3D'200%2C0%20140%2C45%20200%2C70'%20fill%3D'%23055e46'%2F%3E%3Cpolygon%20points%3D'0%2C0%2020%2C40%200%2C75'%20fill%3D'%2307785a'%2F%3E%3Cpolygon%20points%3D'20%2C40%2070%2C55%2045%2C95'%20fill%3D'%230a956d'%2F%3E%3Cpolygon%20points%3D'20%2C40%200%2C75%2045%2C95'%20fill%3D'%2304563f'%2F%3E%3Cpolygon%20points%3D'70%2C55%20140%2C45%20110%2C90'%20fill%3D'%23067050'%2F%3E%3Cpolygon%20points%3D'70%2C55%2045%2C95%20110%2C90'%20fill%3D'%230b9c72'%2F%3E%3Cpolygon%20points%3D'140%2C45%20200%2C70%20170%2C100'%20fill%3D'%23088260'%2F%3E%3Cpolygon%20points%3D'140%2C45%20110%2C90%20170%2C100'%20fill%3D'%23045941'%2F%3E%3Cpolygon%20points%3D'0%2C75%2045%2C95%2015%2C130'%20fill%3D'%23088a64'%2F%3E%3Cpolygon%20points%3D'45%2C95%20110%2C90%2070%2C130'%20fill%3D'%23055c45'%2F%3E%3Cpolygon%20points%3D'45%2C95%2015%2C130%2070%2C130'%20fill%3D'%230a956d'%2F%3E%3Cpolygon%20points%3D'110%2C90%20170%2C100%20130%2C130'%20fill%3D'%23088a64'%2F%3E%3Cpolygon%20points%3D'110%2C90%2070%2C130%20130%2C130'%20fill%3D'%23066a4d'%2F%3E%3Cpolygon%20points%3D'170%2C100%20200%2C70%20200%2C130'%20fill%3D'%230a956d'%2F%3E%3Cpolygon%20points%3D'170%2C100%20130%2C130%20200%2C130'%20fill%3D'%23055c44'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/cover no-repeat,
        linear-gradient(135deg, #047857 0%, #036148 50%, #059669 100%);
    box-shadow: 0 24px 48px -20px rgba(4,90,66,.55), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
    animation: sx-rise .45s var(--ease-out) both;
}
.dsz-hero::before {
    content: '';
    position: absolute; inset: 0;
    /* Faint facet-edge sheen so the emerald reads as cut material, not flat paint. */
    background: linear-gradient(58deg, rgba(255,255,255,.14) 0%, transparent 25%, rgba(2,44,34,.14) 55%, transparent 78%);
    pointer-events: none;
}
.dsz-hero:hover { transform: translateY(-2px); box-shadow: 0 28px 54px -22px rgba(4,90,66,.6), inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.2); }
.dsz-hero:active { transform: none; }
.dsz-hero:focus-visible { outline: 3px solid rgba(255,255,255,.75); outline-offset: 3px; }

/* ── ATM / bank-card furniture ─────────────────────────── */
/* The card face used to carry two perpetual animations: a holographic glare
   sweeping across every 7s, and a blurred orb drifting on a 14s loop. Both were
   decoration only, and motion that never stops is what makes a screen you look
   at every day read as synthetic rather than real — it also kept the compositor
   awake on phones for no information gain. Removed.

   The highlight below stays, but static: it still gives the metal face depth,
   it just no longer moves. */
.dsz-card-glow {
    position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
    top: -20%; right: -10%;
    background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 42%, transparent 70%);
    filter: blur(18px); opacity: .6; pointer-events: none; z-index: 0;
}
.dsz-hero > * { position: relative; z-index: 2; }
.dsz-hero .dsz-card-glow { z-index: 0; }
/* EMV chip + contactless, sitting on the right in line with the amount. */
.dsz-card-chipwrap { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dsz-card-chip {
    position: relative;
    width: 40px; height: 31px; border-radius: 6px;
    background: linear-gradient(145deg, #fff6cc 0%, #ffd24d 44%, #d99a12 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -1px 2px rgba(120,72,0,.5), 0 1px 3px rgba(0,0,0,.28);
    flex: none;
}
.dsz-card-chip::before, .dsz-card-chip::after {
    content: ''; position: absolute; inset: 5px 4px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(120,72,0,.55) 46%, rgba(120,72,0,.55) 54%, transparent 55%),
        linear-gradient(rgba(120,72,0,.45) 1px, transparent 1px);
    background-size: 100% 100%, 100% 8px;
}
.dsz-card-chip > span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 15px; height: 19px; border: 1px solid rgba(120,72,0,.55); border-radius: 4px;
    background: linear-gradient(145deg, #ffe9a8, #d9a93f);
}
.dsz-card-wave {
    display: inline-flex; color: rgba(255,255,255,.65); font-size: .95rem;
    transform: rotate(90deg); transform-origin: center;
}
/* Masked card number built from the store ID (last group = store id). */
.dsz-card-number {
    display: flex; gap: clamp(10px, 3vw, 20px);
    margin-top: clamp(7px, 1.2vw, 11px);
    font-family: var(--font-mono, "Courier New", monospace);
    font-size: clamp(.78rem, 2vw, .95rem); font-weight: 700; letter-spacing: .1em;
    color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(2,44,34,.45);
}
.dsz-card-number span { display: inline-flex; }
.dsz-card-last4 { color: #a7f3d0; letter-spacing: .18em; text-shadow: 0 1px 2px rgba(2,44,34,.45); }
/* Cardholder + issuer row along the bottom. */
.dsz-card-holder {
    position: relative;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
    margin-top: clamp(8px, 1.3vw, 12px);
}
.dsz-card-holder-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* .dsz-card-label removed: nothing rendered it, and at .56rem in
   rgba(60,68,78,.65) it sat at 3.0–3.4:1 on the card face — below the 4.5:1 AA
   floor for small text. Deleted rather than left as a trap for the next reuse. */
.dsz-card-holder-name {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(2,44,34,.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.dsz-card-brand { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dsz-card-brand-name {
    font-family: var(--font-display);
    font-size: .85rem; font-weight: 800; letter-spacing: -.01em;
    color: #ffffff; text-shadow: 0 1px 2px rgba(2,44,34,.45);
    font-style: italic;
}
.dsz-card-brand-mark { display: inline-flex; }
.dsz-card-brand-mark i { font-size: 1.25rem; }
.dsz-card-brand-mark i:first-child { color: rgba(255,255,255,.85); }
.dsz-card-brand-mark i:last-child { color: #e8b42a; margin-left: -11px; }
/* No reduced-motion override needed here any more — the card face is static for
   everyone, which is what this block used to arrange only for people who asked. */
/* The reports hero reuses .dsz-hero styling but is a light card — hide the ATM furniture there. */
.rpt-hero .dsz-card-number, .rpt-hero .dsz-card-holder,
.rpt-hero .dsz-card-glow, .rpt-hero .dsz-card-chipwrap { display: none; }
.dsz-hero-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.dsz-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(209,250,229,.85);
}
.dsz-hero-eyebrow i { font-size: .8rem; color: #6ee7b7; }
.dsz-hero-range {
    font-size: .6rem;
    font-weight: 800;
    color: #ecfdf5;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsz-hero-amt-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(8px, 1.4vw, 12px);
}
/* Amount (left) + eye toggle grouped, so the chip sits opposite on the right. */
.dsz-atm-amt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dsz-hero-fig {
    font-family: var(--font-display);
    /* Proportional figures at display size (never tabular-nums here). */
    font-weight: 800;
    /* A touch larger than the platinum face wore it — the headline earns it. */
    font-size: clamp(1.3rem, 3.4vw, 1.9rem);
    letter-spacing: -.02em;
    line-height: 1.05;
    /* White-to-mint fill, embossed on the emerald face. */
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf9 55%, #c8f2e2 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1px 2px rgba(2,44,34,.5));
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsz-hero-fig.sx-masked { font-size: clamp(1.05rem, 2.7vw, 1.5rem); letter-spacing: .08em; }
.dsz-hero-eye {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.26);
    color: #ecfdf5;
    font-size: 1rem;
    transition: background .15s;
}
.dsz-hero-eye:hover { background: rgba(255,255,255,.28); }
.dsz-hero-split {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: .76rem;
    font-weight: 700;
    color: rgba(209,250,229,.8);
}
.dsz-hero-split b { color: #ffffff; font-weight: 800; }
.dsz-hero-split .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: 1px;
}
.dsz-hero-foot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: clamp(8px, 1.4vw, 12px);
    padding-top: 10px;
    border-top: 1px solid rgba(90,100,115,.2);
}
.dsz-hero-net {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}
.dsz-hero-net.pos { background: rgba(5,150,105,.12); color: #047857; border: 1px solid rgba(5,150,105,.32); }
.dsz-hero-net.neg { background: rgba(220,38,38,.10); color: #b91c1c; border: 1px solid rgba(220,38,38,.3); }
/* On the emerald card the chips go translucent-on-dark. Polarity survives in
   the tint: mint for positive, rose for negative. (.rpt-hero re-overrides
   these further down for its light surface.) */
.dsz-hero .dsz-hero-net.pos { background: rgba(255,255,255,.15); color: #d1fae5; border-color: rgba(255,255,255,.28); }
.dsz-hero .dsz-hero-net.neg { background: rgba(127,29,29,.45); color: #fecaca; border-color: rgba(252,165,165,.4); }
.dsz-hero .dsz-delta.up,
.dsz-hero .dsz-delta.down,
.dsz-hero .dsz-delta.neu { background: rgba(255,255,255,.15); color: #ecfdf5; }
.dsz-hero .dsz-delta.up i   { color: #6ee7b7; }
.dsz-hero .dsz-delta.down i { color: #fda4af; }
.dsz-hero-net em {
    font-style: normal;
    font-weight: 700;
    opacity: .8;
    font-size: .7rem;
}
.dsz-hero-spark {
    flex: 1 1 120px;
    max-width: 240px;
    min-width: 0;
    opacity: .95;
}
.dsz-hero-spark .dsz-spark { width: 100%; height: 40px; display: block; }

/* ── Revenue streams (redesigned) ──────────────────────────
   One composition bar showing how the range's revenue splits across the three
   streams, then a tappable row per stream. Replaces the old three-chip strip. */
.dsz-streams {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 13px 14px 8px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    animation: sx-rise .45s var(--ease-out) both;
    animation-delay: 45ms;
}
.dsz-streams-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 2px 9px;
}
.dsz-streams-title { font-size: .8rem; font-weight: 800; color: var(--text); }
.dsz-streams-total { font-size: .82rem; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dsz-streams-bar {
    display: flex; gap: 3px;
    height: 8px; border-radius: 999px; overflow: hidden;
    margin: 0 2px 6px;
}
.dsz-streams-bar span { display: block; height: 100%; border-radius: 999px; min-width: 6px; }
.dsz-streams-bar.is-empty span { flex: 1; background: var(--border-light); min-width: 0; }
.dsz-streams-rows { display: flex; flex-direction: column; }
.dsz-streams-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 2px;
    background: none; border: 0; border-top: 1px solid var(--border-light);
    text-align: left; cursor: pointer; font: inherit; color: inherit;
    transition: background .15s var(--ease);
    border-radius: 10px;
}
.dsz-streams-row:first-child { border-top: 0; }
.dsz-streams-row:hover { background: var(--surface-hover); }
.dsz-streams-row:active { background: var(--surface-alt); }
.dsz-streams-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dsz-streams-ic {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
}
.dsz-streams-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dsz-streams-lbl {
    font-size: .82rem; font-weight: 750; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsz-streams-sub { font-size: .7rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.dsz-streams-end { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.dsz-streams-end b { font-size: .86rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.dsz-streams-share { font-size: .68rem; font-weight: 800; }
.dsz-streams-go { font-size: .72rem; color: var(--text-3); flex: none; }

/* ── Critical money alerts — the red ticker ─────────────────
   Rendered only when something needs attention. The track is duplicated in the
   markup, so translating it -50% loops seamlessly; this animation is a
   functional rotation of notices in a one-line strip, not decoration. */
.dsz-alerts {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    margin: 0 0 12px;
    padding: 9px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 13px;
    cursor: pointer; font: inherit; text-align: left;
    box-shadow: 0 1px 3px rgba(185,28,28,.08);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.dsz-alerts:hover { background: #fee2e2; border-color: #fca5a5; }
.dsz-alerts:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }
.dsz-alerts-ic {
    width: 28px; height: 28px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #dc2626; color: #fff; font-size: .82rem;
}
.dsz-alerts-viewport { display: block; flex: 1; min-width: 0; overflow: hidden; }
/* The marquee, written the most boring way CSS allows — every property a
   longhand, no shorthand, no custom properties, no inline styles. Both earlier
   attempts froze on iPhone through known WebKit bugs: a separate
   animation-duration does not reliably override an animation: shorthand, and
   var() INSIDE the shorthand hits a second WebKit bug where the animation never
   registers. Longhands with -webkit- twins have no such history. Duration is
   picked by a .dsz-tick-N class (there are only three alert kinds). */
.dsz-alerts-track {
    display: inline-flex; align-items: center; white-space: nowrap;
    -webkit-animation-name: dszAlertsTicker;
            animation-name: dszAlertsTicker;
    -webkit-animation-duration: 16s;
            animation-duration: 16s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
}
.dsz-alerts-track.dsz-tick-2 { -webkit-animation-duration: 24s; animation-duration: 24s; }
.dsz-alerts-track.dsz-tick-3 { -webkit-animation-duration: 32s; animation-duration: 32s; }
/* Pause on hover only where hover is a real state. On iOS, :hover sticks after a
   tap, which would freeze the ticker permanently the first time it is touched. */
@media (hover: hover) and (pointer: fine) {
    .dsz-alerts:hover .dsz-alerts-track { -webkit-animation-play-state: paused; animation-play-state: paused; }
}
@-webkit-keyframes dszAlertsTicker {
    from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    to   { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); }
}
@keyframes dszAlertsTicker {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
}
.dsz-alerts-msg { font-size: .78rem; font-weight: 600; color: #7f1d1d; }
.dsz-alerts-msg b { font-weight: 800; color: #991b1b; }
.dsz-alerts-msg em { font-style: normal; font-weight: 800; color: #b91c1c; }
.dsz-alerts-sep { margin: 0 12px; color: #fca5a5; font-weight: 800; }
.dsz-alerts-go { font-size: .8rem; color: #b91c1c; flex: none; }
/* No reduced-motion stop here, by explicit owner decision: the ticker is the
   delivery mechanism for money alerts and must scroll everywhere. The gentle
   16–32s drift is mild, and tapping the strip gives the same content statically
   in a modal, which is the accessible reading path. */

/* Alerts modal — list of alerts, then a detail view per alert. */
.dsz-alert-list { display: flex; flex-direction: column; gap: 8px; }
.dsz-alert-row {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 11px 12px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px;
    cursor: pointer; font: inherit; text-align: left;
    transition: background .15s var(--ease);
}
.dsz-alert-row:hover { background: #fee2e2; }
.dsz-alert-row > i { color: #b91c1c; font-size: .8rem; flex: none; }
.dsz-alert-row-ic {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(220,38,38,.12); color: #dc2626; font-size: 1rem;
}
.dsz-alert-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dsz-alert-row-title { font-size: .88rem; font-weight: 800; color: #7f1d1d; }
.dsz-alert-row-sub { font-size: .76rem; font-weight: 600; color: #991b1b; }
.dsz-alert-overdue { font-style: normal; font-weight: 800; color: #b91c1c; }
.dsz-alert-total {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: #fef2f2; border: 1px solid #fecaca;
    font-size: .95rem; font-weight: 800; color: #7f1d1d;
}
.dsz-alert-total em { font-style: normal; font-weight: 600; font-size: .78rem; color: #991b1b; }
.dsz-alert-total-overdue {
    font-size: .72rem; font-weight: 800; color: #fff;
    background: #dc2626; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.dsz-alert-items {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-light); border-radius: 12px;
    max-height: 264px; overflow-y: auto;
}
.dsz-alert-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-top: 1px solid var(--border-light);
}
.dsz-alert-item:first-child { border-top: 0; }
.dsz-alert-item.is-overdue { background: #fff7f7; }
.dsz-alert-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dsz-alert-item-ref { font-size: .8rem; font-weight: 750; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsz-alert-item-ref span { font-weight: 600; color: var(--text-3); }
.dsz-alert-item-sub { font-size: .7rem; font-weight: 600; color: var(--text-3); }
.dsz-alert-item-sub em { font-style: normal; font-weight: 800; color: #dc2626; }
.dsz-alert-item > b { font-size: .84rem; font-weight: 800; color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.dsz-alert-action {
    padding: 11px 13px; border-radius: 12px;
    background: var(--surface-alt); border: 1px solid var(--border-soft);
}
.dsz-alert-action-title {
    display: flex; align-items: center; gap: 7px;
    font-size: .78rem; font-weight: 800; color: var(--text); margin-bottom: 5px;
}
.dsz-alert-action-title i { color: var(--amber); }
.dsz-alert-action-body { font-size: .8rem; font-weight: 500; color: var(--text-2); line-height: 1.6; }

/* ── KPI stat tiles ───────────────────────────────── */
.dsz-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.dsz-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 15px 16px 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
    cursor: pointer;
    transition: transform .16s var(--ease), box-shadow .18s var(--ease), border-color .16s var(--ease);
    animation: sx-rise .45s var(--ease-out) both;
    animation-delay: calc(60ms + var(--i, 0) * 45ms);
}
.dsz-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent-ring);
    box-shadow: 0 10px 24px -12px rgba(15,23,42,.18);
}
.dsz-tile:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.dsz-tile-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dsz-tile-ic {
    width: 34px; height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.dsz-tile-label {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsz-tile-val {
    margin-top: 9px;
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsz-tile-sub {
    margin-top: 2px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsz-tile-spark { margin-top: 8px; }
.dsz-tile-spark .dsz-spark { width: 100%; height: 30px; display: block; }
.dsz-spark { overflow: visible; }

/* ── "vs previous period" delta pills ─────────────────
   Reference-dashboard style comparison chips. Colour follows polarity
   (good/bad), not raw direction — costs invert; neutral for measures with
   no good/bad reading. Text colours are the palette's semantic delta pair
   (≥4.5:1 on their soft washes). */
.dsz-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsz-delta i { font-size: .66rem; }
.dsz-delta em { font-style: normal; font-weight: 700; opacity: .78; }
.dsz-delta.up   { background: rgba(4,120,87,.09);   color: #047857; }
.dsz-delta.down { background: rgba(220,38,38,.08);  color: #dc2626; }
.dsz-delta.neu  { background: rgba(100,116,139,.1); color: #475569; }
.dsz-tile-delta { margin-top: 4px; min-width: 0; }
/* Let the hero foot wrap when the net chip, delta pill and sparkline
   can't share one row. */
.dsz-hero-foot { flex-wrap: wrap; }
.dsz-hero .dsz-delta { flex-shrink: 0; }

/* ── Trend chart card ─────────────────────────────── */
.dsz-chart { position: relative; height: 238px; }
/* Double class beats the ≥760px .dsz-chart height bump below */
.dsz-chart.dsz-chart-sm { height: 200px; }
.dsz-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.dsz-chip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    border: 1px solid var(--border-soft);
    background: var(--surface-alt);
    border-radius: 12px;
    padding: 8px 11px;
}
.dsz-chip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    white-space: nowrap;
}
.dsz-chip span i:not(.dsz-chip-bi) {
    width: 14px; height: 3px;
    border-radius: 999px;
    display: inline-block;
}
.dsz-chip span i.dsz-chip-bi { font-size: .78rem; width: auto; height: auto; background: none; }
.dsz-chip b {
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Payments mix (100% stacked bar + value rows) ── */
.dsz-mix { display: flex; flex-direction: column; gap: 12px; }
.dsz-mix-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.dsz-mix-total span {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-3);
}
.dsz-mix-total b {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}
.dsz-mix-bar {
    display: flex;
    gap: 2px; /* the surface gap does the separating — no strokes */
    height: 24px; /* bar ≤ 24px thick per mark spec */
    width: 100%;
}
.dsz-mix-seg {
    min-width: 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: filter .15s var(--ease), transform .15s var(--ease);
}
.dsz-mix-seg:first-child { border-radius: 9px 3px 3px 9px; }
.dsz-mix-seg:last-child { border-radius: 3px 9px 9px 3px; }
.dsz-mix-seg:only-child { border-radius: 9px; }
.dsz-mix-seg:hover, .dsz-mix-seg:focus-visible { filter: brightness(1.08); transform: scaleY(1.06); }
.dsz-mix-seg:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
.dsz-mix-seg span {
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.22);
    padding: 0 4px;
}
.dsz-mix-rows { display: flex; flex-direction: column; }
.dsz-mix-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 9px;
    padding: 7px 1px;
    font-size: .78rem;
    border-bottom: 1px solid var(--border-light);
}
.dsz-mix-row:last-child { border-bottom: none; }
.dsz-mix-row .dot { width: 10px; height: 10px; border-radius: 4px; }
.dsz-mix-row .lbl {
    font-weight: 750;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsz-mix-row .cnt { font-size: .68rem; font-weight: 700; color: var(--text-3); }
.dsz-mix-row .pct { font-weight: 800; color: var(--text-2); min-width: 34px; text-align: right; }
.dsz-mix-row .amt { font-weight: 800; color: var(--text); min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.dsz-mix-empty, .dsz-dow-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 12px;
    color: var(--text-3);
    font-weight: 700;
}
.dsz-mix-empty i { font-size: 1.15rem; }

/* ── Busiest days (weekday columns, single hue) ──── */
.dsz-dow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 148px;
    padding-top: 2px;
}
.dsz-dow-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: default;
    border-radius: 8px;
}
.dsz-dow-col:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.dsz-dow-val {
    min-height: 15px;
    font-size: .6rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}
.dsz-dow-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--border); /* hairline baseline */
}
.dsz-dow-fill {
    width: min(64%, 22px); /* thin marks — never fill the slot */
    border-radius: 4px 4px 2px 2px; /* rounded data-end, square-ish baseline */
    background: #059669;
    min-height: 2px;
    transition: filter .15s;
}
.dsz-dow-col:hover .dsz-dow-fill { filter: brightness(1.1); }
.dsz-dow-day {
    font-size: .64rem;
    font-weight: 750;
    color: var(--text-3);
    letter-spacing: .02em;
}
.dsz-dow-day.peak { color: var(--text); font-weight: 800; }

/* ── Widget shell polish (dashboard cards) ────────── */
.dsb-dashboard-grid .dsb-widget,
.dsb-dashboard-grid .dsb-qa-card {
    border-radius: 20px !important;
    border: 1px solid var(--border-soft);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.dsb-dashboard-grid .dsb-widget-head { margin-bottom: 12px; }
.dsb-widget-title { font-size: .92rem; font-weight: 800; color: var(--text); letter-spacing: -.015em; }
.dsb-widget-sub { font-size: .72rem; font-weight: 700; color: var(--text-3); margin-top: 2px; }

/* Cashflow bars — thin tracks, rounded data-end, square baseline */
.dsb-hbars { gap: 12px; }
.dsb-hbar-track {
    height: 8px;
    border: none;
    background: var(--border-light);
    border-radius: 999px;
}
.dsb-hbar-fill { border-radius: 2px 4px 4px 2px; transition: width .5s var(--ease-out); }
.dsb-hbar-row { border-radius: 8px; }
.dsb-hbar-row:hover .dsb-hbar-left { color: var(--text); }

/* Activity list polish */
.dsb-activity-item { border-radius: 14px; }
.dsb-activity-item:hover { transform: translateX(2px); }
.dsb-activity-avatar { border-radius: 13px; font-weight: 800; }
.dsb-activity-amount { font-variant-numeric: tabular-nums; }

/* Snapshot + quick-action polish */
.dsb-snapshot-item { border-width: 1px; border-radius: 14px; }
.dsb-snapshot-end { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 800; }
.dsb-qa-btn { border-width: 1px; border-radius: 15px; }
.dsb-seg button.active { background: var(--primary-ink); }

/* Dashboard green = #059669 everywhere on this page (accents, icons, washes) */
.dsb-strip-logo {
    background: #059669;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px rgba(5,150,105,.32), 0 8px 16px -8px rgba(5,150,105,.3);
}
.dsb-av-green { background: linear-gradient(135deg, #059669, #047857); }
.dsb-sub-pill { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.26); color: #047857; }
.dsb-sub-pill .dsb-sub-days { background: rgba(5,150,105,.14); }
.dsb-sub-pill:hover { background: rgba(5,150,105,.14); }
.dsb-status-badge.paid { background: rgba(5,150,105,.12); color: #047857; }
.dsb-strip-biz:hover .dsb-strip-name i { color: #059669; border-color: rgba(5,150,105,.3); background: rgba(5,150,105,.08); }

/* ── Reports page (rpt-) — same dsz system ────────── */
.rpt-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.rpt-tiles { margin: 12px 0; }

/* Reports hero — its own identity: light "paper ledger" panel (soft paper
   gradient + horizontal ruling, ink figures) vs the dashboard's dark emerald. */
.rpt-hero {
    cursor: default;
    color: var(--text);
    background:
        radial-gradient(46% 70% at 96% 0%, rgba(13,148,136,.09) 0%, transparent 58%),
        radial-gradient(40% 60% at 2% 100%, rgba(42,120,214,.07) 0%, transparent 60%),
        linear-gradient(165deg, #ffffff 0%, #f8fbfd 55%, #eef4f9 100%);
    border: 1px solid var(--border-soft);
    box-shadow: 0 10px 30px -18px rgba(15,23,42,.16);
}
.rpt-hero::before {
    background: repeating-linear-gradient(0deg, rgba(15,23,42,.045) 0 1px, transparent 1px 26px);
    background-size: auto;
    -webkit-mask-image: radial-gradient(130% 115% at 50% 100%, #000 20%, transparent 80%);
    mask-image: radial-gradient(130% 115% at 50% 100%, #000 20%, transparent 80%);
}
.rpt-hero:hover {
    transform: none;
    box-shadow: 0 10px 30px -18px rgba(15,23,42,.16);
}
.rpt-hero .dsz-hero-eyebrow { color: var(--text-3); }
.rpt-hero .dsz-hero-eyebrow i { color: #0d9488; }
.rpt-hero .dsz-hero-range {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--text-2);
}
.rpt-hero .dsz-hero-fig { color: var(--text); -webkit-text-fill-color: var(--text); background: none; filter: none; text-shadow: none; }
.rpt-hero .dsz-hero-eye {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-2);
}
.rpt-hero .dsz-hero-eye:hover { background: var(--surface-hover); }
.rpt-hero .dsz-hero-foot { border-top-color: var(--divider); }
.rpt-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-2);
    min-width: 0;
}
.rpt-hero-stats b { color: var(--text); font-weight: 800; }
.rpt-hero-stats .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: 1px;
}
.rpt-hero .dsz-hero-net.pos { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rpt-hero .dsz-hero-net.neg { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* The pulse row — plain-words verdict + animated spend meter */
.rpt-hero-pulse {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    margin-top: 13px;
}
.rpt-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
    animation: sx-rise .5s var(--ease-out) .15s both;
}
.rpt-verdict.good { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rpt-verdict.warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.rpt-verdict.bad { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.rpt-verdict.quiet { background: var(--surface-alt); color: var(--text-3); border-color: var(--border-soft); }
.rpt-meter { flex: 1 1 200px; min-width: 0; }
.rpt-meter-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.rpt-meter-top span {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-3);
}
.rpt-meter-top b { font-size: .78rem; font-weight: 800; color: var(--text); }
/* Meter: the fill carries severity; the track is a lighter step of the same ramp */
.rpt-meter-track { height: 8px; border-radius: 999px; overflow: hidden; }
.rpt-meter-track i { display: block; height: 100%; border-radius: 999px; animation: rpt-meter-grow .9s var(--ease-out) .2s both; }
.rpt-meter-track.good { background: #d1fae5; }
.rpt-meter-track.good i { background: #059669; }
.rpt-meter-track.warn { background: #fef3c7; }
.rpt-meter-track.warn i { background: #d97706; }
.rpt-meter-track.bad { background: #fee2e2; }
.rpt-meter-track.bad i { background: #dc2626; }
.rpt-meter-track.quiet { background: var(--border-light); }
.rpt-meter-track.quiet i { background: #94a3b8; }
@keyframes rpt-meter-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) {
    .rpt-meter-track i, .rpt-verdict { animation: none; }
}
.rpt-table-card { padding-bottom: 6px; }
.rpt-scroll { overflow-x: auto; }
.dsz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.dsz-table th {
    padding: 9px 10px;
    text-align: left;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.dsz-table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-2);
    font-weight: 650;
}
.dsz-table tbody tr:last-child td { border-bottom: none; }
.dsz-table td.num, .dsz-table th.num {
    text-align: right;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dsz-table .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: -1px;
}
.dsz-table tr.total td {
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    font-weight: 800;
    color: var(--text);
}
.dsz-table tr.note td {
    background: #fffbeb;
    color: #92400e;
    font-weight: 700;
    font-size: .8rem;
}
.rpt-tag {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: .05em;
    white-space: nowrap;
}
.rpt-dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: .8rem;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rpt-dir.in { background: #ecfdf5; color: #047857; }
.rpt-dir.out { background: #fef2f2; color: #dc2626; }

/* ── Responsive ───────────────────────────────────── */
@media (min-width: 640px) {
    .dsz-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dsz-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
    .rpt-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
    .dsz-chart { height: 266px; }
}
@media (max-width: 400px) {
    .dsz-hero { border-radius: 20px; }
    .dsz-hero-split { flex-direction: column; gap: 4px; }
    .dsz-hero-spark { display: none; }
    .dsz-mix-row .cnt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dsz-hero, .dsz-tile { animation: none; }
    .dsz-hero, .dsz-tile, .dsz-mix-seg, .dsb-hbar-fill { transition: none; }
}

/* ── Store download buttons (Get the App page) ─────────────────────────────
   The brand mark sits inline with the label; .btn already centres its content,
   so this only needs the gap and a guard against the SVG being squashed. */
.dl-store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.dl-store-btn svg {
    flex: none;
}

/* ── Partner mode chrome ───────────────────────────────────────────────────
   Partner mode swaps the whole sidebar for the partner menu. The topbar pill
   replaces the business picker so it is always obvious which workspace you are
   in, and it doubles as the way out. */
.partner-mode-pill {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(16, 185, 129, .32);
    border-radius: 999px;
    background: rgba(16, 185, 129, .1);
    color: #047857;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.partner-mode-pill:hover {
    background: rgba(16, 185, 129, .18);
    border-color: rgba(16, 185, 129, .5);
}

.partner-mode-pill i {
    font-size: .78rem;
    opacity: .75;
}

.partner-mode-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
    flex: none;
}

.partner-mode-label {
    white-space: nowrap;
}

@media (max-width: 420px) {
    /* Keep the dot and the swap arrows; the word is implied by the green dot. */
    .partner-mode-label {
        display: none;
    }
}

/* Workspace switch buttons at the foot of each menu. */
.nav-mode-exit,
.nav-mode-switch {
    padding: 10px 12px 14px;
}

.nav-mode-exit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    background: var(--surface-hover, #f8fafc);
    color: var(--text-2, #475569);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.nav-mode-exit-btn:hover {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.nav-mode-exit-btn.is-enter {
    border-color: rgba(16, 185, 129, .32);
    background: rgba(16, 185, 129, .08);
    color: #047857;
}

.nav-mode-exit-btn.is-enter:hover {
    background: rgba(16, 185, 129, .16);
    border-color: rgba(16, 185, 129, .5);
}

/* ── Partner agreement modal ───────────────────────────────────────────────
   The text is in a scroll box rather than a long modal so the accept control
   stays on screen; the button unlocks only once it has been scrolled to the end,
   which is the whole point of showing it. */
.pa-agree-box {
    max-height: 42vh;
    min-height: 180px;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

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

.pa-agree-h {
    margin: 14px 0 0;
    color: var(--text);
    font-size: .88rem;
    font-weight: 800;
}

.pa-agree-box .pa-agree-h:first-child {
    margin-top: 0;
}

.pa-agree-p {
    margin: 5px 0 0;
    color: var(--text-2);
    font-size: .85rem;
    line-height: 1.65;
}

.pa-agree-scrollhint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: -4px;
    color: var(--text-3);
    font-size: .78rem;
    font-weight: 600;
}

.pa-agree-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: var(--surface-hover);
    border: 1px solid var(--border-light);
    border-radius: 11px;
    cursor: pointer;
    transition: opacity .18s ease, border-color .18s ease;
}

.pa-agree-check input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--accent);
    flex: none;
}

.pa-agree-check span {
    color: var(--text-2);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ══════════════ Cash-up, Receivables & Quotations ══════════════
   Three modules that all show money owed or money counted. They share the
   same card grammar as the rest of the app; only the accents differ. */

.badge-slate { background: rgba(100,116,139,.12); color: #334155; border: 1px solid rgba(100,116,139,.25); }

.page-sub { font-size: .8rem; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.flex-row { display: flex; align-items: center; }
.skeleton-card { height: 120px; border-radius: 16px; background: var(--surface-hover); animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

/* ── POS shift bar ─────────────────────────────────────────── */
.pos-shift {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 14px; margin-bottom: 10px;
    border: 1px solid var(--border-light); border-radius: 14px;
    background: var(--surface);
}
.pos-shift.open { border-color: rgba(5,150,105,.35); background: linear-gradient(180deg, rgba(5,150,105,.06), var(--surface)); }
.pos-shift-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.pos-shift-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: none; }
.pos-shift-dot.live { background: #059669; box-shadow: 0 0 0 4px rgba(5,150,105,.16); }
.pos-shift-title { font-size: .86rem; font-weight: 800; color: var(--text-1); }
.pos-shift-sub { font-size: .74rem; color: var(--text-3); font-weight: 600; }
.pos-shift-figs { display: flex; gap: 16px; }
.pos-shift-fig { display: flex; flex-direction: column; }
.pos-shift-fig span { font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); font-weight: 800; }
.pos-shift-fig b { font-size: .95rem; color: var(--text-1); font-weight: 800; }
.pos-shift-acts { display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) {
    .pos-shift-figs { width: 100%; justify-content: space-between; }
    .pos-shift-acts { width: 100%; }
    .pos-shift-acts .btn:last-child { flex: 1; }
}

/* ── Cash-up modal ─────────────────────────────────────────── */
.cashup-card {
    border: 1px solid var(--border-light); border-radius: 13px;
    background: var(--surface-hover); padding: 4px 12px; margin-bottom: 10px;
}
.cashup-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 0; font-size: .85rem; color: var(--text-2);
    border-bottom: 1px solid var(--border-light);
}
.cashup-line:last-child { border-bottom: 0; }
.cashup-line b { color: #000; font-weight: 800; white-space: nowrap; }
.cashup-line em { font-style: normal; color: var(--text-3); font-size: .78rem; }
.cashup-line.pos b { color: #047857; }
.cashup-line.neg b { color: #b91c1c; }
.cashup-line.muted, .cashup-line.muted b { color: var(--text-3); }
.cashup-line.total { border-top: 1.5px solid var(--border); margin-top: 2px; padding-top: 10px; font-size: .95rem; }
.cashup-variance:empty { display: none; }
.cashup-flag {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 13px; border-radius: 12px; margin-bottom: 4px;
    font-size: .86rem; font-weight: 800;
    background: var(--surface-hover); color: var(--text-2);
}
.cashup-flag.good { background: rgba(5,150,105,.1); color: #047857; }
.cashup-flag.warn { background: rgba(245,158,11,.12); color: #b45309; }
.cashup-flag.bad  { background: rgba(220,38,38,.1); color: #b91c1c; }

/* ── Receivables ───────────────────────────────────────────── */
.rcv-hero {
    padding: 16px 18px; border-radius: 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, #047857 0%, #036148 55%, #059669 100%);
    color: #ecfdf5;
}
.rcv-hero-lbl { font-size: .7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(209,250,229,.85); }
.rcv-hero-val { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; line-height: 1.1; margin-top: 3px; }
.rcv-hero-sub { font-size: .76rem; font-weight: 600; color: rgba(209,250,229,.8); margin-top: 3px; }

.rcv-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
/* Each bucket is a filter button: tap an age to work that money alone. */
.rcv-bucket {
    display: block; width: 100%; text-align: left; font: inherit;
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--surface);
    cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.rcv-bucket:hover { border-color: var(--text-3); transform: translateY(-1px); }
.rcv-bucket:active { transform: translateY(0) scale(.98); }
.rcv-bucket:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(5,150,105,.25)); }
.rcv-bucket.active { border-color: #0f172a; box-shadow: inset 0 0 0 1px #0f172a; }
.rcv-bucket.active .rcv-bucket-lbl { color: var(--text-1); }
.rcv-bucket-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
.rcv-bucket-n {
    display: inline-block; margin-left: 3px; padding: 0 5px;
    border-radius: 99px; background: var(--surface-hover); color: var(--text-3);
    font-size: .64rem; font-weight: 800; letter-spacing: 0;
}
.rcv-bucket-val { font-size: .95rem; font-weight: 800; color: #000; margin-top: 2px; }
.rcv-bucket.ok    { border-left: 3px solid #059669; }
.rcv-bucket.warn  { border-left: 3px solid #0891b2; }
.rcv-bucket.warn2 { border-left: 3px solid #f59e0b; }
.rcv-bucket.bad   { border-left: 3px solid #ea580c; }
.rcv-bucket.worst { border-left: 3px solid #b91c1c; }

/* Banner naming the active age filter, with the way out of it. */
.rcv-active-filter {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 9px 13px;
    border: 1px solid var(--accent-ring); border-radius: 12px;
    background: var(--accent-soft); color: var(--text-1);
    font-size: .78rem; font-weight: 650;
}
.rcv-active-filter i { color: var(--accent); }
.rcv-active-filter button {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--text-2); font: inherit; font-size: .74rem; font-weight: 700;
    padding: 4px 11px; cursor: pointer; white-space: nowrap;
}
.rcv-active-filter button:hover { border-color: var(--text-3); color: var(--text-1); }

.rcv-list { display: grid; gap: 8px; }
.rcv-row {
    padding: 12px 14px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--border-light); background: var(--surface);
    transition: border-color .18s ease, transform .18s ease;
}
.rcv-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.rcv-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rcv-name { font-size: .9rem; font-weight: 800; color: var(--text-1); }
.rcv-sub { font-size: .74rem; color: var(--text-3); font-weight: 600; margin-top: 1px; }
.rcv-amt { text-align: right; white-space: nowrap; }
.rcv-amt b { display: block; font-size: 1rem; font-weight: 800; color: #000; }
.rcv-amt span { font-size: .7rem; font-weight: 700; }
.rcv-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-hover); margin-top: 9px; }
.rcv-bar span { display: block; height: 100%; }
.rcv-bar .b-cur { background: #059669; }
.rcv-bar .b-30  { background: #0891b2; }
.rcv-bar .b-60  { background: #f59e0b; }
.rcv-bar .b-90  { background: #ea580c; }
.rcv-bar .b-old { background: #b91c1c; }

/* ── Statement & quote tables ──────────────────────────────── */
.stmt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-hover); border-radius: 13px; }
.stmt-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3); }
.stmt-total { font-size: 1.5rem; font-weight: 800; color: #000; line-height: 1.1; }
.stmt-sub { font-size: .74rem; color: var(--text-3); font-weight: 600; }
.stmt-credit { font-size: .74rem; color: var(--text-2); font-weight: 700; margin-top: 3px; }
.stmt-wrap { border: 1px solid var(--border-light); border-radius: 12px; overflow-x: auto; }
.stmt-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.stmt-table th { padding: 8px 10px; text-align: left; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); background: var(--surface-3); }
.stmt-table td { padding: 9px 10px; border-top: 1px solid var(--border-light); color: var(--text-2); vertical-align: top; }
.stmt-table .stmt-num, .stmt-table th.stmt-num { text-align: right; white-space: nowrap; }
.stmt-table b { color: #000; }

/* ── Quotation editor ──────────────────────────────────────── */
.qt-item { display: grid; grid-template-columns: 1fr 68px 96px 34px; gap: 6px; margin-bottom: 6px; }
.qt-item input { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .84rem; font-weight: 600; min-width: 0; }
.qt-item-x { border: 1px solid var(--border-light); border-radius: 10px; background: var(--surface); color: #b91c1c; cursor: pointer; }
.qt-total-box { border: 1px solid var(--border-light); border-radius: 13px; background: var(--surface-hover); padding: 4px 13px; }
.qt-total-row { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0; font-size: .85rem; color: var(--text-2); border-bottom: 1px solid var(--border-light); }
.qt-total-row:last-child { border-bottom: 0; }
.qt-total-row b { color: #000; font-weight: 800; }
.qt-total-row.grand { font-size: .98rem; }
.qt-total-row.grand b { color: var(--accent-2); }
@media (max-width: 480px) {
    .qt-item { grid-template-columns: 1fr 1fr 34px; }
    .qt-item input:first-child { grid-column: 1 / -1; }
}

/* ── Invoices / Quotations switch ──────────────────────────────
   One sidebar entry, two views. A segmented control rather than a second
   nav item, because the two documents are read together. */
/* These switch between whole PAGES, not sections of one, so the selected tab
   has to be obvious — but the strip sits above real content and should not
   shout. Slim track, small type, and a soft tint for the active tab rather
   than a heavy solid fill. */
.doc-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 14px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    background: var(--surface-hover);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.doc-tabs::-webkit-scrollbar { display: none; }

.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s var(--ease), color .16s var(--ease),
                box-shadow .16s var(--ease);
}
.doc-tab i { font-size: .88rem; opacity: .75; }

.doc-tab:hover:not(.active) {
    background: var(--surface);
    color: var(--text-1);
}

/* Tinted rather than filled. At this size white-on-green would sit at 3.8:1;
   deep green on a pale wash clears 7:1 and reads lighter, which is the point. */
.doc-tab.active {
    background: rgba(4, 120, 87, .12);
    color: #065f46;
    box-shadow: inset 0 0 0 1px rgba(4, 120, 87, .22);
}
.doc-tab.active i { opacity: 1; }

.doc-tab:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    /* Full width on a phone so the group reads as one control. */
    .doc-tabs { display: flex; width: 100%; }
    .doc-tab { flex: 1 0 auto; justify-content: center; padding: 6px 10px; font-size: .74rem; }
}

/* ── Sidebar submenu density on touch / small screens ──────────
   Submenu items sit in a dense list under their group heading, so the 44px
   touch target that suits top-level items makes the group read as scattered
   rather than as one block. A slightly smaller target and tighter margins
   pull them back together while staying comfortably tappable. */
@media (pointer: coarse) {
    .sidebar .nav-item.nav-subitem { min-height: 36px; }
}
@media (max-width: 859px) {
    .sidebar .nav-group-body { padding-top: 0; padding-bottom: 4px; }
    .sidebar .nav-subitem {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 6px;
        padding-bottom: 6px;
        min-height: 36px;
    }
    /* The rail tracks the shorter list so it doesn't overshoot the last item. */
    .sidebar .nav-group-body::before { top: 2px; bottom: 16px; }
}

/* ── Document colours (business settings) ──────────────────────
   A picker plus a live preview that runs the same derivation the PDF does,
   so what the owner approves here is what prints. */
.eb-color-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 5px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}
.eb-color-field input[type="color"] {
    width: 38px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    background: none;
    cursor: pointer;
    flex: none;
}
.eb-color-field input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 4px 2px;
    font-size: .86rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-1);
}
.eb-color-field input[type="text"]:focus { outline: none; }

.eb-doc-preview {
    border: 1px solid var(--border-light);
    border-radius: 13px;
    overflow: hidden;
    background: #ffffff;
}
.eb-doc-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.eb-doc-name { font-size: .95rem; font-weight: 800; line-height: 1.15; }
.eb-doc-meta { font-size: .68rem; font-weight: 650; margin-top: 2px; }
.eb-doc-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .09em;
}
.eb-doc-ref { font-size: .66rem; font-weight: 750; margin-top: 4px; }
.eb-doc-body { padding: 12px 14px 14px; }
.eb-doc-amt { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.eb-doc-rule { height: 1.5px; margin: 9px 0 8px; border-radius: 2px; }
.eb-doc-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .8rem;
    color: #334155;
    padding-bottom: 9px;
}
.eb-doc-line b { color: #000; font-weight: 800; }
.eb-doc-grand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 9px;
}
.eb-doc-grand span { font-size: .66rem; font-weight: 800; letter-spacing: .07em; }
.eb-doc-grand b { font-size: .95rem; font-weight: 800; }
.eb-doc-pill {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 11px;
    border: 1px solid;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}

/* ── Commission rules ──────────────────────────────────────────
   A rule is a sentence, not a form row: who, on what, at what rate. */
.cmm-rules { display: grid; gap: 8px; }
.cmm-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border-light);
    border-radius: 13px;
    background: var(--surface);
}
.cmm-rule.off { opacity: .55; }
.cmm-rule-who { font-size: .87rem; font-weight: 800; color: var(--text-1); }
.cmm-rule-sub { font-size: .76rem; font-weight: 650; color: var(--text-3); margin-top: 2px; }

/* ── Admin · Hubtel Balances ─────────────────────────── */
.hb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 8px; }
.hb-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-left: 3px solid var(--hb-c, #0ea5e9);
    border-radius: 16px; padding: 15px 16px; box-shadow: var(--shadow-xs);
}
.hb-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hb-card-ic {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--hb-c, #0ea5e9); color: #fff; font-size: 1rem;
    box-shadow: 0 6px 14px -8px var(--hb-c, #0ea5e9);
}
.hb-card-label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.hb-card-acct { font-size: .72rem; font-weight: 650; color: var(--text-3); margin-top: 1px; }
.hb-card-val {
    font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
    color: #000; letter-spacing: -.02em; line-height: 1;
}
/* An unreadable balance must never look like a confident zero. */
.hb-card-val.hb-unknown { font-size: 1.05rem; color: #b45309; }
.hb-card-sub { font-size: .74rem; font-weight: 620; color: var(--text-3); margin-top: 7px; }
.hb-checked { font-size: .72rem; font-weight: 620; color: var(--text-3); margin: 0 0 18px; }

.hb-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-bottom: 14px; }
.hb-dir-btn {
    text-align: left; padding: 11px 13px; border-radius: 13px; cursor: pointer;
    border: 1.5px solid var(--border); background: var(--surface); font: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.hb-dir-btn span { display: block; font-size: .84rem; font-weight: 800; color: var(--text-1); }
.hb-dir-btn small { display: block; font-size: .72rem; font-weight: 620; color: var(--text-3); margin-top: 2px; }
.hb-dir-btn:hover { border-color: var(--text-3); }
.hb-dir-btn.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-ring, rgba(5,150,105,.15)); }

.hb-flow {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 13px;
    background: var(--surface-hover); border: 1px solid var(--border-light);
}
.hb-flow-end { flex: 1 1 0; min-width: 0; }
.hb-flow-lbl { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.hb-flow-name { font-size: .85rem; font-weight: 800; color: var(--text-1); margin-top: 2px; }
.hb-flow-bal { font-size: .74rem; font-weight: 650; color: var(--text-3); margin-top: 1px; }
.hb-flow-arrow { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }

.hb-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.hb-quick button {
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--text-2); font: inherit; font-size: .76rem; font-weight: 700;
    padding: 5px 12px; cursor: pointer;
}
.hb-quick button:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.hb-preview { font-size: .78rem; font-weight: 650; color: var(--text-2); margin-top: 10px; min-height: 1.2em; }
.hb-preview i { color: var(--accent); margin-right: 3px; }
.hb-note {
    font-size: .74rem; font-weight: 620; color: var(--text-3);
    margin-top: 10px; line-height: 1.5;
}
.hb-note i { color: var(--blue, #0284c7); margin-right: 3px; }

.hb-list { display: flex; flex-direction: column; gap: 8px; }
.hb-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--border-light); background: var(--surface);
}
.hb-row-main { min-width: 0; }
.hb-row-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hb-row-dir { font-size: .85rem; font-weight: 800; color: var(--text-1); }
.hb-row-sub { font-size: .73rem; font-weight: 620; color: var(--text-3); margin-top: 2px; word-break: break-word; }
.hb-row-msg { font-size: .73rem; font-weight: 650; color: #b45309; margin-top: 3px; }
.hb-row-end { text-align: right; flex-shrink: 0; }
.hb-row-amt { font-size: 1rem; font-weight: 800; color: #000; }

/* ── Admin · Notification Register ───────────────────── */
.nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
.nt-card {
    border: 1px solid var(--border-light); border-left: 3px solid var(--nt-c, #64748b);
    border-radius: 14px; padding: 13px 15px; background: var(--surface);
    display: flex; flex-direction: column; gap: 8px;
}
/* A switched-off notification reads as inactive without disappearing. */
.nt-card.nt-off { opacity: .62; border-left-style: dashed; }
.nt-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nt-title { font-size: .89rem; font-weight: 800; color: var(--text-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nt-key { font-size: .68rem; font-weight: 700; color: var(--text-3); font-family: ui-monospace, monospace; margin-top: 2px; word-break: break-all; }
.nt-desc { font-size: .77rem; font-weight: 620; color: var(--text-2); margin-top: 5px; line-height: 1.45; }
.nt-sample {
    font-size: .77rem; line-height: 1.5; color: var(--text-2);
    background: var(--surface-hover); border: 1px solid var(--border-light);
    border-radius: 10px; padding: 9px 11px; word-break: break-word;
}
.nt-sample b { color: var(--text-1); }
.nt-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .71rem; font-weight: 650; color: var(--text-3); }
.nt-meta i { margin-right: 3px; }
.nt-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; }

/* ── Admin directory avatars (business logo / user photo) ─────────────
   The image is layered over the initial rather than replacing it, so a
   missing or broken upload falls back to the letter instead of a hole. */
.admin-avatar-wrap { position: relative; overflow: hidden; }
.admin-avatar-wrap > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    background: var(--surface);
}

/* ══════════════ Sign-in card: slimmed ═══════════════════════════
   The phone step stacked twelve blocks and stood ~609px tall — past the
   viewport on a small phone. Everything below trims height without taking a
   capability away: the rare things stop holding permanent space.
   ═══════════════════════════════════════════════════════════════ */

/* Logo and title are one block. The divider between them cost 26px to draw a
   line between two things that belong together. */
.auth-screen-bg .auth-header {
    padding-bottom: 0;
    margin-bottom: 10px;
    border-bottom: 0;
}
.auth-screen-bg .auth-logo { font-size: 1.2rem; }
.auth-screen-bg .auth-step-head { margin-bottom: 12px; }
.auth-screen-bg .auth-step-title {
    font-size: clamp(1.25rem, 4.4vw, 1.45rem);
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* Slimmer method switch — same tap targets, less chrome around them. */
.auth-screen-bg .auth-method-tabs {
    border-radius: 13px;
    padding: 3px;
    margin-bottom: 11px;
}
.auth-screen-bg .auth-method-tabs button {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: .81rem;
}

/* Slimmer fields. 56px was generous for a single line of digits. */
.auth-screen-bg .country-picker-btn { height: 44px; min-width: 82px; font-size: .9rem; }
/* The wrap takes its height from its tallest child, so the input has to come
   down with the country button or the field stays 56px regardless. */
.auth-screen-bg .phone-input-wrap { border-radius: 15px; }
.auth-screen-bg .phone-input-wrap input { height: 44px; font-size: .95rem; padding: 0 14px; }
.auth-screen-bg .auth-field { margin-bottom: 9px; }
.auth-screen-bg .auth-pw-wrap input,
.auth-screen-bg .auth-field input[type="text"],
.auth-screen-bg .auth-field input[type="password"] { height: 44px; }

/* Smaller call to action. */
.auth-screen-bg .auth-step .btn-lg {
    min-height: 44px;
    padding: 0 18px;
    font-size: .94rem;
    border-radius: 14px;
}

/* Remember-me and the code link share one row. Two full-width dashed buttons
   and a checkbox row became this. */
.auth-meta-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 11px;
}
.auth-remember-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: var(--au-ink-soft);
    font-weight: 600;
    font-size: .82rem;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* The app's own switch, as the sale sheet uses for "Show payment info". */
.auth-toggle-sm { width: 40px; height: 23px; }
.auth-toggle-sm span::after { width: 18px; height: 18px; left: 2.5px; top: 2.5px; }
.auth-toggle-sm input:checked + span::after { transform: translateX(17px); }

.auth-code-link {
    border: 0;
    background: none;
    padding: 2px 0;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent-2);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.auth-code-link:hover { color: var(--au-emerald-deep); }

/* The panel behind that link: invite and partner in one place. */
.auth-code-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-alt);
    padding: 10px;
    margin-bottom: 10px;
}
.auth-code-panel[hidden] { display: none; }
.auth-code-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.auth-code-tabs button {
    flex: 1;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    padding: 6px;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    color: var(--text-3);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.auth-code-tabs button.active {
    border-color: rgba(5,150,105,.45);
    background: #f0fdf9;
    color: #047857;
}
.auth-code-field[hidden] { display: none; }
.auth-code-field input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 0 12px;
    font: inherit;
    font-size: .88rem;
}
.auth-code-help {
    border: 0;
    background: none;
    padding: 6px 0 0;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    color: var(--accent-2);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The help link now rides on the legal line rather than owning a row. */
.auth-screen-bg .auth-legal { margin-top: 11px; }
.auth-screen-bg .auth-legal a,
.auth-legal-link {
    color: var(--accent-2);
    font-weight: 700;
    text-decoration: none;
}
.auth-legal-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}