/* =================================================================
   ZAPIM PORTAL v2 — Base design system
   -----------------------------------------------------------------
   Layered alongside site.css; introduces the new component
   vocabulary (.card / .kpi / .dt-wrap / .chip / .btn-primary /
   .input / .field / .section-card / .step-pill / .dropzone / etc.)

   THEME INTEGRATION
   -----------------
   Old site.css owns these tokens per-theme:
     --accent, --accent-hover, --accent-light, --accent-text,
     --card-bg, --card-border, --page-bg, --text-primary,
     --text-secondary, --text-muted, --success, --danger, --warning,
     --info, --table-header-bg, --table-hover, --input-bg,
     --input-border, --input-focus
   This file maps the new design tokens onto those, so each existing
   theme automatically gets the new look with its own accent colour:
     --lime         => --accent           (per-theme primary action)
     --lime-2       => --accent-hover
     --lime-soft    => --accent-light
     --lime-ink     => --text-on-accent
     --ink          => --text-primary
     --ink-2/3/4    => --text-secondary / --text-muted (graded)
     --bg / surface => --card-bg
     --bg-soft      => --page-bg
     --bg-panel     => --table-header-bg
     --line         => --card-border
   Two new themes shipped on top: "sharp-lime" (the reference look)
   and "dark" (deep ink + bright lime). They override the mapping
   inside their own [data-theme="..."] block.
   ================================================================= */

/* DM Sans is loaded by site.css already; we add the Geist + Geist
   Mono pair for v2 surfaces. Falls back to Inter / system stack. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;450;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    /* Type — Geist for prose, Geist Mono for numbers/IDs */
    --v2-font-sans: "Geist", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --v2-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Radii scale */
    --v2-radius-sm: 6px;
    --v2-radius: 10px;
    --v2-radius-lg: 14px;
    --v2-radius-xl: 20px;
    /* Layout */
    --v2-sidebar-w: 244px;
    --v2-topbar-h: 56px;
    /* Default mappings — overridden per-theme below.
       These exist so v2 components have something to read even
       if a theme block forgets to set one. */
    --lime: var(--accent, #2f81d6);
    --lime-2: var(--accent-hover, #2670be);
    --lime-soft: var(--accent-light, #e8f2fc);
    --lime-soft-2: var(--accent-light, #e8f2fc);
    --lime-ink: var(--text-on-accent, #ffffff);
    --ink: var(--text-primary, #1a2a3e);
    --ink-2: var(--text-primary, #24271e);
    --ink-3: var(--text-secondary, #5a5f52);
    --ink-4: var(--text-muted, #8a8f80);
    --ink-5: #b4b8ab;
    --bg: var(--card-bg, #ffffff);
    --bg-soft: var(--page-bg, #fafafa);
    --bg-panel: var(--table-header-bg, #f5f6f4);
    --bg-muted: var(--table-stripe, #f1f2ef);
    --surface: var(--card-bg, #ffffff);
    --surface-2: var(--card-bg, #ffffff);
    --surface-hi: var(--table-header-bg, #f5f6f4);
    --line: var(--card-border, #e7e8e4);
    --line-strong: var(--card-border, #d9dbd4);
    --v2-danger: var(--danger, #e5484d);
    --v2-danger-soft: var(--danger-light, #fdecec);
    --v2-warn: var(--warning, #f5a524);
    --v2-warn-soft: var(--warning-light, #fdf3e0);
    --v2-info: var(--info, #0ea5e9);
    --v2-info-soft: var(--info-light, #e6f6fe);
    --v2-success: var(--success, #0f9d6e);
    --v2-success-soft: var(--success-light, #ecfdf5);
    --v2-shadow-1: 0 1px 0 rgba(13,15,10,.04), 0 1px 2px rgba(13,15,10,.04);
    --v2-shadow-2: 0 2px 4px rgba(13,15,10,.04), 0 8px 24px rgba(13,15,10,.06);
    --v2-shadow-pop: 0 8px 30px rgba(13,15,10,.08), 0 2px 6px rgba(13,15,10,.05);
}

/* ---------- Per-theme v2 overrides ----------
   For each existing theme we map the new design's lime/ink semantics
   onto the theme's own accent + surfaces. This means switching
   themes still works for v2 components — Arctic Blue keeps blue,
   Cloud Sage keeps green, etc. */

[data-theme="arctic-blue"], :root {
    --lime: #2f81d6;
    --lime-2: #2670be;
    --lime-soft: #e8f2fc;
    --lime-soft-2: #d6e8f8;
    --lime-ink: #ffffff;
    --ink: #1a2a3e;
    --ink-2: #24271e;
    --ink-3: #546b82;
    --ink-4: #8899aa;
    --ink-5: #b4b8ab;
    --bg: #ffffff;
    --bg-soft: #f0f4f8;
    --bg-panel: #f5f8fb;
    --bg-muted: #e7eef5;
    --surface: #ffffff;
    --surface-hi: #f5f8fb;
    --line: #dce6f0;
    --line-strong: #c8d4e0;
}

[data-theme="midnight-emerald"] {
    --lime: #10b981;
    --lime-2: #0d9668;
    --lime-soft: #0f2a20;
    --lime-soft-2: #143524;
    --lime-ink: #022c22;
    --ink: #e2e8f0;
    --ink-2: #cbd4dc;
    --ink-3: #8fa4b8;
    --ink-4: #5a7a8f;
    --ink-5: #3a5466;
    --bg: #111c27;
    --bg-soft: #0b1219;
    --bg-panel: #0f1923;
    --bg-muted: #162636;
    --surface: #111c27;
    --surface-2: #162636;
    --surface-hi: #0f1923;
    --line: #1e3348;
    --line-strong: #2a4560;
    --v2-shadow-1: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --v2-shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --v2-shadow-pop: 0 10px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

[data-theme="obsidian-amber"] {
    --lime: #e6a84d;
    --lime-2: #d4983e;
    --lime-soft: #251e17;
    --lime-soft-2: #2e261e;
    --lime-ink: #2a1e0a;
    --ink: #f0e6d4;
    --ink-2: #d4cab8;
    --ink-3: #a89888;
    --ink-4: #6e6058;
    --ink-5: #4a3e36;
    --bg: #1a1614;
    --bg-soft: #141110;
    --bg-panel: #1e1916;
    --bg-muted: #241f1b;
    --surface: #1a1614;
    --surface-2: #241f1b;
    --surface-hi: #1e1916;
    --line: #332c26;
    --line-strong: #3d3530;
    --v2-shadow-1: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --v2-shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --v2-shadow-pop: 0 10px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

[data-theme="cloud-sage"] {
    --lime: #4a8c62;
    --lime-2: #3e7a54;
    --lime-soft: #e7f2eb;
    --lime-soft-2: #d4e8db;
    --lime-ink: #ffffff;
    --ink: #1e3328;
    --ink-2: #2a4836;
    --ink-3: #5a7a66;
    --ink-4: #8aa898;
    --ink-5: #b4c8bc;
    --bg: #ffffff;
    --bg-soft: #f2f6f3;
    --bg-panel: #f0f5f2;
    --bg-muted: #e8eee9;
    --surface: #ffffff;
    --surface-hi: #f0f5f2;
    --line: #d4e0d8;
    --line-strong: #bed0c4;
}

[data-theme="slate-violet"] {
    --lime: #a78bfa;
    --lime-2: #8b6ff0;
    --lime-soft: #1e1a32;
    --lime-soft-2: #2a2444;
    --lime-ink: #1e1a38;
    --ink: #e2dff0;
    --ink-2: #c8c4dc;
    --ink-3: #9590b3;
    --ink-4: #5e5a80;
    --ink-5: #403c5c;
    --bg: #141226;
    --bg-soft: #0e0d18;
    --bg-panel: #161424;
    --bg-muted: #1c1a30;
    --surface: #141226;
    --surface-2: #1c1a30;
    --surface-hi: #1c1a30;
    --line: #2a2744;
    --line-strong: #302c52;
    --v2-shadow-1: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --v2-shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --v2-shadow-pop: 0 10px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

[data-theme="pearl-white"] {
    --lime: #8a7968;
    --lime-2: #7a6a5a;
    --lime-soft: #f0ebe4;
    --lime-soft-2: #e6dfd4;
    --lime-ink: #ffffff;
    --ink: #3a322a;
    --ink-2: #4e463c;
    --ink-3: #7a6e62;
    --ink-4: #a89888;
    --ink-5: #c8b8a8;
    --bg: #ffffff;
    --bg-soft: #f5f2ee;
    --bg-panel: #f5f0ea;
    --bg-muted: #ebe5dc;
    --surface: #ffffff;
    --surface-hi: #f5f0ea;
    --line: #e0d8cf;
    --line-strong: #d0c8be;
}

[data-theme="evergreen"] {
    --lime: #c87a30;
    --lime-2: #b06a26;
    --lime-soft: #f3e6d4;
    --lime-soft-2: #e8d5b8;
    --lime-ink: #ffffff;
    --ink: #1b3422;
    --ink-2: #284536;
    --ink-3: #5a7566;
    --ink-4: #8aa898;
    --ink-5: #b4c8bc;
    --bg: #ffffff;
    --bg-soft: #f4f6f2;
    --bg-panel: #f0f3eb;
    --bg-muted: #e6ebde;
    --surface: #ffffff;
    --surface-hi: #f0f3eb;
    --line: #d8e0cf;
    --line-strong: #bccfa0;
}

/* "Sharp Lime" — the reference design exactly. New default. */
[data-theme="sharp-lime"] {
    --lime: #a3e635;
    --lime-2: #bef264;
    --lime-soft: #f0fbd6;
    --lime-soft-2: #e7f7c0;
    --lime-ink: #1a2e05;
    --ink: #0d0f0a;
    --ink-2: #24271e;
    --ink-3: #5a5f52;
    --ink-4: #8a8f80;
    --ink-5: #b4b8ab;
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --bg-panel: #f5f6f4;
    --bg-muted: #f1f2ef;
    --surface: #ffffff;
    --surface-hi: #f5f6f4;
    --line: #e7e8e4;
    --line-strong: #d9dbd4;
}

/* "Dark" — deep ink + bright lime. New theme. */
[data-theme="dark"] {
    color-scheme: dark;
    --lime: #a3e635;
    --lime-2: #bef264;
    --lime-soft: #1a2a06;
    --lime-soft-2: #223a0a;
    --lime-ink: #0a1400;
    --ink: #eaf2e2;
    --ink-2: #c9d3bd;
    --ink-3: #8a9480;
    --ink-4: #6a7464;
    --ink-5: #4a5247;
    --bg: #0e1217;
    --bg-soft: #0a0d10;
    --bg-panel: #12161b;
    --bg-muted: #161b22;
    --surface: #0e1217;
    --surface-2: #161b22;
    --surface-hi: #1b2028;
    --line: #1e242c;
    --line-strong: #2a313a;
    --v2-shadow-1: 0 1px 0 rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
    --v2-shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --v2-shadow-pop: 0 10px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
}

/* =================================================================
   APP SHELL
   ================================================================= */
.v2-app {
    display: grid;
    grid-template-columns: var(--v2-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--v2-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
    background: var(--bg-soft);
    font-family: var(--v2-font-sans);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

.v2-sidebar {
    grid-area: sidebar;
    min-width: 0;
}

.v2-topbar {
    grid-area: topbar;
    min-width: 0;
}

.v2-main {
    grid-area: main;
    min-width: 0;
}

.v2-mono {
    font-family: var(--v2-font-mono);
    font-feature-settings: "tnum";
}

/* =================================================================
   SIDEBAR — primary
   ================================================================= */
.v2-sidebar {
    background: var(--bg);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.v2-brand {
    height: var(--v2-topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.v2-brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--lime);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.02em;
    position: relative;
}

    .v2-brand-mark::after {
        content: '';
        position: absolute;
        right: -2px;
        top: -2px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--lime);
        border: 1.5px solid var(--bg);
    }

.v2-brand-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.v2-brand-env {
    margin-left: auto;
    font-family: var(--v2-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-panel);
}

.v2-nav-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 16px;
    scrollbar-width: thin;
}

    .v2-nav-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .v2-nav-scroll::-webkit-scrollbar-thumb {
        background: var(--line-strong);
        border-radius: 3px;
    }

.v2-nav-section {
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
    padding: 14px 12px 6px;
}

.v2-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-2);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background .12s, color .12s;
}

    .v2-nav-item:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

    .v2-nav-item.active {
        background: var(--ink);
        color: #fff;
    }

        .v2-nav-item.active .v2-nav-icon {
            color: var(--lime);
        }

[data-theme="dark"] .v2-nav-item.active,
[data-theme="midnight-emerald"] .v2-nav-item.active,
[data-theme="obsidian-amber"] .v2-nav-item.active,
[data-theme="slate-violet"] .v2-nav-item.active {
    background: var(--lime);
    color: var(--lime-ink);
}

    [data-theme="dark"] .v2-nav-item.active .v2-nav-icon,
    [data-theme="midnight-emerald"] .v2-nav-item.active .v2-nav-icon,
    [data-theme="obsidian-amber"] .v2-nav-item.active .v2-nav-icon,
    [data-theme="slate-violet"] .v2-nav-item.active .v2-nav-icon {
        color: var(--lime-ink);
    }

.v2-nav-icon {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    flex-shrink: 0;
}

.v2-nav-item:hover .v2-nav-icon {
    color: var(--ink);
}

.v2-nav-item .v2-chev {
    margin-left: auto;
    width: 12px;
    height: 12px;
    color: var(--ink-4);
    transition: transform .18s ease;
}

    .v2-nav-item .v2-chev.open {
        transform: rotate(90deg);
    }

.v2-nav-count {
    margin-left: auto;
    font-family: var(--v2-font-mono);
    font-size: 10.5px;
    background: var(--lime);
    color: var(--lime-ink);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.v2-nav-item.active .v2-nav-count {
    background: var(--lime);
    color: var(--lime-ink);
}

.v2-nav-sub {
    display: none;
    padding: 2px 0 6px 30px;
    position: relative;
}

    .v2-nav-sub::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 4px;
        bottom: 8px;
        width: 1px;
        background: var(--line);
    }

    .v2-nav-sub.open {
        display: block;
    }

    .v2-nav-sub .v2-nav-item {
        padding: 5px 10px;
        font-size: 12.5px;
        color: var(--ink-3);
        border-radius: 6px;
    }

        .v2-nav-sub .v2-nav-item:hover {
            background: var(--bg-panel);
            color: var(--ink);
        }

        .v2-nav-sub .v2-nav-item.active {
            background: var(--bg-panel);
            color: var(--ink);
            font-weight: 500;
            box-shadow: inset 3px 0 0 var(--lime);
            border-radius: 6px;
        }

[data-theme="dark"] .v2-nav-sub .v2-nav-item.active,
[data-theme="midnight-emerald"] .v2-nav-sub .v2-nav-item.active,
[data-theme="obsidian-amber"] .v2-nav-sub .v2-nav-item.active,
[data-theme="slate-violet"] .v2-nav-sub .v2-nav-item.active {
    background: var(--surface-hi);
    color: var(--ink);
}

.v2-nav-subgroup {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 12px 10px 6px;
    margin-top: 4px;
}

    .v2-nav-subgroup:first-child {
        margin-top: 0;
        padding-top: 6px;
    }

/* ── OLD LINKS — Phase A++ migration scaffold ─────────────────────────
   Wraps every legacy nav sub-group inside one collapsible parent so the
   sidebar isn't dominated by the long pre-v2 menu. As Phase B+ pages are
   reskinned, their links may be promoted out of here into new top-level
   groups added above. The parent itself is permanent until every link
   inside it has a v2-aligned home elsewhere.

   Design notes:
     · Parent toggle uses a slightly muted color so it visually recedes
       compared to "current" top-level items (Dashboard, Accounts, future
       Phase B groups).
     · The body's left-indent is reset to zero so nested sub-groups
       (Messaging, Contacts, etc.) align with their normal indentation
       rather than compounding to ~60px deep.
     · The vertical guide-line that .v2-nav-sub::before normally shows is
       suppressed at the parent level — we keep it on the inner sub-groups
       only, so visually it looks like the inner sub-groups are siblings,
       not grandchildren.
   ──────────────────────────────────────────────────────────────────── */
.v2-nav-old-toggle {
    color: var(--ink-3);
}

    .v2-nav-old-toggle:hover {
        color: var(--ink);
    }

.v2-nav-old-body {
    /* Reset the parent .v2-nav-sub's left indent so the nested sub-groups
       inside don't compound their padding (they'd otherwise sit ~60px deep). */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 4px;
}

    .v2-nav-old-body::before {
        /* Suppress the vertical guide-line on the parent — the inner sub-groups
       still have their own. Without this, the parent's line would visually
       compete with each inner sub-group's line. */
        display: none;
    }

/* Inner section labels (e.g. "Messaging") inside OLD LINKS get a
   slightly more muted treatment so they don't shout louder than the
   parent's "Old Links" label. */
.v2-nav-section-sub {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 10px 12px 4px;
    margin-top: 2px;
}

    .v2-nav-section-sub:first-child {
        margin-top: 0;
    }

/* Sidebar footer (workspace) */
.v2-workspace {
    border-top: 1px solid var(--line);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.v2-ws-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bg-muted);
    color: var(--ink-2);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
}

.v2-ws-meta {
    flex: 1;
    min-width: 0;
}

.v2-ws-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-ws-id {
    font-family: var(--v2-font-mono);
    font-size: 10.5px;
    color: var(--ink-4);
}

.v2-ws-action {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .v2-ws-action:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

/* =================================================================
   TOPBAR
   ================================================================= */
.v2-topbar {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.v2-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    min-width: 0;
}

    .v2-crumbs a {
        color: var(--ink-3);
        text-decoration: none;
    }

        .v2-crumbs a:hover {
            color: var(--ink);
        }

    .v2-crumbs .v2-sep {
        color: var(--ink-5);
    }

    .v2-crumbs .v2-here {
        color: var(--ink);
        font-weight: 500;
    }

.v2-topbar-spacer {
    flex: 1;
}

.v2-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 320px;
    height: 32px;
    padding: 0 10px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-3);
    font-size: 12.5px;
}

    .v2-search:hover {
        border-color: var(--line-strong);
    }

.v2-search-input {
    flex: 1;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
}

    .v2-search-input::placeholder {
        color: var(--ink-4);
    }

.v2-search:focus-within {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent);
}

.v2-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--v2-font-mono);
    font-size: 10.5px;
    color: var(--ink-4);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
}

.v2-env-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--lime-soft);
    border: 1px solid var(--lime);
    color: var(--lime-ink);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

    .v2-env-chip .v2-env-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--lime-ink);
    }

[data-theme="dark"] .v2-env-chip,
[data-theme="midnight-emerald"] .v2-env-chip,
[data-theme="obsidian-amber"] .v2-env-chip,
[data-theme="slate-violet"] .v2-env-chip {
    color: var(--lime);
}

    [data-theme="dark"] .v2-env-chip .v2-env-dot,
    [data-theme="midnight-emerald"] .v2-env-chip .v2-env-dot,
    [data-theme="obsidian-amber"] .v2-env-chip .v2-env-dot,
    [data-theme="slate-violet"] .v2-env-chip .v2-env-dot {
        background: var(--lime);
    }

.v2-wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
}

    .v2-wallet:hover {
        background: var(--bg-panel);
    }

.v2-wallet-label {
    font-size: 10.5px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.v2-wallet-amount {
    font-family: var(--v2-font-mono);
    font-feature-settings: "tnum";
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.v2-icon-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
}

    .v2-icon-btn:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

    .v2-icon-btn .v2-num-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 14px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--ink);
        color: #fff;
        font-family: var(--v2-font-mono);
        font-size: 9.5px;
        font-weight: 600;
        display: grid;
        place-items: center;
        border: 1.5px solid var(--bg);
    }

[data-theme="dark"] .v2-icon-btn .v2-num-badge,
[data-theme="midnight-emerald"] .v2-icon-btn .v2-num-badge,
[data-theme="obsidian-amber"] .v2-icon-btn .v2-num-badge,
[data-theme="slate-violet"] .v2-icon-btn .v2-num-badge {
    background: var(--lime);
    color: var(--lime-ink);
}

.v2-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    color: var(--ink);
}

    .v2-user-btn:hover {
        background: var(--bg-panel);
    }

    .v2-user-btn .v2-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--bg-muted);
        color: var(--ink-2);
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 600;
    }

    .v2-user-btn .v2-user-name {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink);
    }

.v2-divider-v {
    width: 1px;
    height: 20px;
    background: var(--line);
    margin: 0 2px;
}

/* Theme picker — hover popover */
.v2-theme-popover {
    position: relative;
}

.v2-theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--v2-shadow-pop);
    display: none;
    flex-direction: column;
    gap: 1px;
    z-index: 30;
}

    .v2-theme-menu.open {
        display: flex;
    }

.v2-theme-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ink-2);
    cursor: pointer;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
}

    .v2-theme-menu-item:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

    .v2-theme-menu-item.active {
        background: var(--lime-soft);
        color: var(--lime-ink);
        font-weight: 500;
    }

[data-theme="dark"] .v2-theme-menu-item.active,
[data-theme="midnight-emerald"] .v2-theme-menu-item.active,
[data-theme="obsidian-amber"] .v2-theme-menu-item.active,
[data-theme="slate-violet"] .v2-theme-menu-item.active {
    color: var(--lime);
}

.v2-theme-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}

/* =================================================================
   PAGE / CONTENT
   ================================================================= */
.v2-page {
    padding: 24px 32px 64px;
    max-width: 1440px;
}

.v2-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.v2-page-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.v2-page-sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
}

.v2-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* =================================================================
   ALERTS (TempData)
   ================================================================= */
.v2-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    animation: v2-slide-in .25s ease;
}

@keyframes v2-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.v2-alert.success {
    background: var(--lime-soft);
    color: var(--lime-ink);
    border: 1px solid var(--lime);
}

.v2-alert.danger {
    background: var(--v2-danger-soft);
    color: #8a1d20;
    border: 1px solid #f5b7b9;
}

.v2-alert.info {
    background: var(--v2-info-soft);
    color: #075985;
    border: 1px solid #a6dbf2;
}

.v2-alert.warn {
    background: var(--v2-warn-soft);
    color: #7a4d09;
    border: 1px solid #f7c97a;
}

[data-theme="dark"] .v2-alert.success,
[data-theme="midnight-emerald"] .v2-alert.success,
[data-theme="obsidian-amber"] .v2-alert.success,
[data-theme="slate-violet"] .v2-alert.success {
    color: var(--lime);
    border-color: color-mix(in srgb, var(--lime) 60%, transparent);
}

.v2-alert .v2-alert-close {
    margin-left: auto;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    font-size: 16px;
}

/* =================================================================
   CARDS
   ================================================================= */
.v2-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--v2-shadow-1);
    overflow: hidden;
}

[data-theme="dark"] .v2-card,
[data-theme="midnight-emerald"] .v2-card,
[data-theme="obsidian-amber"] .v2-card,
[data-theme="slate-violet"] .v2-card {
    box-shadow: none;
}

.v2-card-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.v2-card-sub {
    font-size: 12.5px;
    color: var(--ink-4);
}

.v2-card-body {
    padding: 16px;
}

.v2-card-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* =================================================================
   BUTTONS
   ================================================================= */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background .12s, border-color .12s, transform .05s;
}

    .v2-btn:hover {
        background: var(--bg-panel);
        border-color: var(--line-strong);
    }

    .v2-btn:active {
        transform: translateY(0.5px);
    }

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

.v2-btn-primary {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
}

    .v2-btn-primary:hover {
        background: var(--lime-2);
        border-color: var(--lime-2);
        color: var(--lime-ink);
    }

.v2-btn-dark {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

    .v2-btn-dark:hover {
        background: #1a1d12;
        color: #fff;
    }

[data-theme="dark"] .v2-btn-dark,
[data-theme="midnight-emerald"] .v2-btn-dark,
[data-theme="obsidian-amber"] .v2-btn-dark,
[data-theme="slate-violet"] .v2-btn-dark {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
}

    [data-theme="dark"] .v2-btn-dark:hover,
    [data-theme="midnight-emerald"] .v2-btn-dark:hover,
    [data-theme="obsidian-amber"] .v2-btn-dark:hover,
    [data-theme="slate-violet"] .v2-btn-dark:hover {
        background: var(--lime-2);
        border-color: var(--lime-2);
        color: var(--lime-ink);
    }

.v2-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}

    .v2-btn-ghost:hover {
        background: var(--bg-panel);
        color: var(--ink);
        border-color: transparent;
    }

.v2-btn-danger {
    background: var(--v2-danger);
    border-color: var(--v2-danger);
    color: #fff;
}

    .v2-btn-danger:hover {
        opacity: .9;
        color: #fff;
    }

.v2-btn-sm {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
    border-radius: 6px;
}

/* =================================================================
   CHIPS / BADGES / STATUS
   ================================================================= */
.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--bg-panel);
    color: var(--ink-2);
    letter-spacing: 0.01em;
}

    .v2-chip::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ink-4);
    }

    .v2-chip.success {
        background: var(--lime-soft);
        border-color: var(--lime);
        color: var(--lime-ink);
    }

        .v2-chip.success::before {
            background: var(--lime-ink);
        }

[data-theme="dark"] .v2-chip.success,
[data-theme="midnight-emerald"] .v2-chip.success,
[data-theme="obsidian-amber"] .v2-chip.success,
[data-theme="slate-violet"] .v2-chip.success {
    color: var(--lime);
    border-color: color-mix(in srgb, var(--lime) 50%, transparent);
}

.v2-chip.warn {
    background: var(--v2-warn-soft);
    border-color: #f7c97a;
    color: #7a4d09;
}

    .v2-chip.warn::before {
        background: var(--v2-warn);
    }

.v2-chip.danger {
    background: var(--v2-danger-soft);
    border-color: #f5b7b9;
    color: #8a1d20;
}

    .v2-chip.danger::before {
        background: var(--v2-danger);
    }

.v2-chip.info {
    background: var(--v2-info-soft);
    border-color: #a6dbf2;
    color: #075985;
}

    .v2-chip.info::before {
        background: var(--v2-info);
    }

/* Status pills (campaign/template statuses) */
.v2-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

    .v2-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.85;
    }

    .v2-status.running {
        background: var(--lime-soft);
        color: var(--lime-ink);
        border-color: var(--lime);
    }

    .v2-status.scheduled {
        background: var(--v2-info-soft);
        color: #075985;
        border-color: #a6dbf2;
    }

    .v2-status.draft {
        background: var(--v2-warn-soft);
        color: #7a4d09;
        border-color: #f7c97a;
    }

    .v2-status.completed {
        background: #ecfdf5;
        color: #166534;
        border-color: #bbf7d0;
    }

    .v2-status.failed {
        background: var(--v2-danger-soft);
        color: #8a1d20;
        border-color: #f5b7b9;
    }

    .v2-status.paused {
        background: var(--bg-panel);
        color: var(--ink-3);
        border-color: var(--line-strong);
    }

    .v2-status.archived {
        background: var(--bg-panel);
        color: var(--ink-4);
        border-color: var(--line-strong);
    }

/* Category tags (Marketing / Utility / etc) */
.v2-cat {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

    .v2-cat.marketing {
        background: var(--v2-info-soft);
        color: #075985;
        border-color: #a6dbf2;
    }

    .v2-cat.transactional {
        background: var(--lime-soft);
        color: var(--lime-ink);
        border-color: var(--lime);
    }

    .v2-cat.otp {
        background: var(--v2-warn-soft);
        color: #7a4d09;
        border-color: #f7c97a;
    }

    .v2-cat.service {
        background: var(--bg-panel);
        color: var(--ink-2);
        border-color: var(--line-strong);
    }

/* =================================================================
   KPI TILES
   ================================================================= */
.v2-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.v2-kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--v2-shadow-1);
}

[data-theme="dark"] .v2-kpi,
[data-theme="midnight-emerald"] .v2-kpi,
[data-theme="obsidian-amber"] .v2-kpi,
[data-theme="slate-violet"] .v2-kpi {
    box-shadow: none;
}

.v2-kpi-eyebrow {
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}

.v2-kpi-value {
    font-family: var(--v2-font-mono);
    font-feature-settings: "tnum";
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.1;
}

.v2-kpi-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 4px;
}

.v2-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--v2-font-mono);
    font-feature-settings: "tnum";
    font-size: 11.5px;
    font-weight: 600;
}

    .v2-delta.up {
        color: #1a7f37;
    }

    .v2-delta.down {
        color: #b42318;
    }

[data-theme="dark"] .v2-delta.up,
[data-theme="midnight-emerald"] .v2-delta.up,
[data-theme="obsidian-amber"] .v2-delta.up,
[data-theme="slate-violet"] .v2-delta.up {
    color: var(--lime);
}

/* Filter-row mini KPIs (clickable) */
.v2-kpi-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.v2-kpi-mini {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    position: relative;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
}

    .v2-kpi-mini:hover {
        border-color: var(--ink-4);
    }

    .v2-kpi-mini.active {
        border-color: var(--lime);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 18%, transparent);
    }

.v2-kpi-mini-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.v2-kpi-mini-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    background: var(--bg-panel);
    color: var(--ink-3);
}

.v2-kpi-mini-value {
    font-size: 22px;
    font-weight: 600;
    font-family: var(--v2-font-mono);
    font-feature-settings: "tnum";
    color: var(--ink);
    line-height: 1;
}

.v2-kpi-mini-trend {
    font-size: 10.5px;
    color: var(--ink-4);
    font-family: var(--v2-font-mono);
}

    .v2-kpi-mini-trend.up {
        color: #1a7f37;
    }

    .v2-kpi-mini-trend.down {
        color: #b42318;
    }

[data-theme="dark"] .v2-kpi-mini-trend.up,
[data-theme="midnight-emerald"] .v2-kpi-mini-trend.up,
[data-theme="obsidian-amber"] .v2-kpi-mini-trend.up,
[data-theme="slate-violet"] .v2-kpi-mini-trend.up {
    color: var(--lime);
}

/* Live dot */
.v2-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}

    .v2-live-dot::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1.5px solid var(--lime);
        opacity: 0.5;
        animation: v2-pulse 1.6s ease-out infinite;
    }

@keyframes v2-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* =================================================================
   FORM ELEMENTS
   ================================================================= */
.v2-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.v2-field-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-req {
    color: var(--v2-danger);
    margin-left: -2px;
}

.v2-field-help {
    font-size: 11.5px;
    color: var(--ink-4);
    line-height: 1.45;
}

.v2-field-error {
    font-size: 11.5px;
    color: var(--v2-danger);
}

.v2-field-counter {
    font-family: var(--v2-font-mono);
    font-size: 11px;
    color: var(--ink-4);
}

.v2-input,
.v2-select,
.v2-textarea {
    width: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 8px 10px;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}

.v2-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
    font-family: var(--v2-font-mono);
    font-size: 12.5px;
}

    .v2-input::placeholder, .v2-textarea::placeholder {
        color: var(--ink-4);
    }

    .v2-input:hover, .v2-select:hover, .v2-textarea:hover {
        border-color: var(--ink-4);
    }

    .v2-input:focus, .v2-select:focus, .v2-textarea:focus {
        border-color: var(--lime);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent);
    }

[data-theme="dark"] .v2-input,
[data-theme="dark"] .v2-select,
[data-theme="dark"] .v2-textarea,
[data-theme="midnight-emerald"] .v2-input,
[data-theme="midnight-emerald"] .v2-select,
[data-theme="midnight-emerald"] .v2-textarea,
[data-theme="obsidian-amber"] .v2-input,
[data-theme="obsidian-amber"] .v2-select,
[data-theme="obsidian-amber"] .v2-textarea,
[data-theme="slate-violet"] .v2-input,
[data-theme="slate-violet"] .v2-select,
[data-theme="slate-violet"] .v2-textarea {
    background: var(--bg-panel);
    border-color: var(--line);
}

.v2-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.v2-input-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg);
    overflow: hidden;
}

    .v2-input-group:focus-within {
        border-color: var(--lime);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent);
    }

    .v2-input-group .v2-input {
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

        .v2-input-group .v2-input:focus {
            box-shadow: none;
        }

.v2-affix {
    padding: 0 10px;
    font-family: var(--v2-font-mono);
    font-size: 12px;
    color: var(--ink-4);
    background: var(--bg-panel);
    border-left: 1px solid var(--line);
    height: 36px;
    display: grid;
    place-items: center;
    white-space: nowrap;
}

    .v2-affix.left {
        border-left: 0;
        border-right: 1px solid var(--line);
    }

/* Switches */
.v2-switch {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--line-strong);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s;
    border: 0;
    padding: 0;
}

    .v2-switch::after {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        top: 2px;
        left: 2px;
        transition: transform .18s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    .v2-switch.on {
        background: var(--lime);
    }

        .v2-switch.on::after {
            transform: translateX(14px);
            background: var(--lime-ink);
        }

/* Radio cards */
.v2-radio-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.v2-radio-card {
    position: relative;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.v2-rc-title {
    font-weight: 500;
    color: var(--ink);
    font-size: 13px;
}

.v2-rc-sub {
    font-size: 11px;
    color: var(--ink-4);
}

.v2-radio-card.active {
    border-color: var(--lime);
    background: var(--lime-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 15%, transparent);
}

    .v2-radio-card.active .v2-rc-title {
        color: var(--lime-ink);
    }

[data-theme="dark"] .v2-radio-card.active,
[data-theme="midnight-emerald"] .v2-radio-card.active,
[data-theme="obsidian-amber"] .v2-radio-card.active,
[data-theme="slate-violet"] .v2-radio-card.active {
    color: var(--lime);
}

    [data-theme="dark"] .v2-radio-card.active .v2-rc-title,
    [data-theme="midnight-emerald"] .v2-radio-card.active .v2-rc-title,
    [data-theme="obsidian-amber"] .v2-radio-card.active .v2-rc-title,
    [data-theme="slate-violet"] .v2-radio-card.active .v2-rc-title {
        color: var(--lime);
    }

/* Checkbox */
.v2-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background: var(--bg);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s, border-color .12s;
}

    .v2-cb:hover {
        border-color: var(--ink-4);
    }

    .v2-cb:checked {
        background: var(--lime);
        border-color: var(--lime);
    }

        .v2-cb:checked::after {
            content: '';
            width: 9px;
            height: 5px;
            border-left: 2px solid var(--lime-ink);
            border-bottom: 2px solid var(--lime-ink);
            transform: rotate(-45deg) translate(1px, -1px);
        }

/* Dropzone */
.v2-dropzone {
    border: 1.5px dashed var(--line-strong);
    border-radius: 10px;
    padding: 20px;
    background: var(--bg-soft);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

    .v2-dropzone:hover {
        border-color: var(--lime);
        background: var(--lime-soft);
    }

.v2-dz-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.v2-dz-sub {
    font-size: 11.5px;
    color: var(--ink-4);
    font-family: var(--v2-font-mono);
}

.v2-dz-icon {
    color: var(--ink-3);
    margin-bottom: 4px;
}

.v2-dropzone:hover .v2-dz-icon {
    color: var(--lime-ink);
}

[data-theme="dark"] .v2-dropzone:hover .v2-dz-icon,
[data-theme="midnight-emerald"] .v2-dropzone:hover .v2-dz-icon,
[data-theme="obsidian-amber"] .v2-dropzone:hover .v2-dz-icon,
[data-theme="slate-violet"] .v2-dropzone:hover .v2-dz-icon {
    color: var(--lime);
}

/* =================================================================
   STEP PILLS (wizards)
   ================================================================= */
.v2-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.v2-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
    font-size: 12.5px;
    color: var(--ink-3);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

    .v2-step-pill .v2-sp-num {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--bg-panel);
        color: var(--ink-3);
        font-family: var(--v2-font-mono);
        font-feature-settings: "tnum";
        font-size: 11px;
        font-weight: 600;
        display: grid;
        place-items: center;
    }

    .v2-step-pill.on {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff;
    }

        .v2-step-pill.on .v2-sp-num {
            background: var(--lime);
            color: var(--lime-ink);
        }

[data-theme="dark"] .v2-step-pill.on,
[data-theme="midnight-emerald"] .v2-step-pill.on,
[data-theme="obsidian-amber"] .v2-step-pill.on,
[data-theme="slate-violet"] .v2-step-pill.on {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
}

    [data-theme="dark"] .v2-step-pill.on .v2-sp-num,
    [data-theme="midnight-emerald"] .v2-step-pill.on .v2-sp-num,
    [data-theme="obsidian-amber"] .v2-step-pill.on .v2-sp-num,
    [data-theme="slate-violet"] .v2-step-pill.on .v2-sp-num {
        background: var(--lime-ink);
        color: var(--lime);
    }

.v2-step-pill.done {
    color: var(--ink);
}

    .v2-step-pill.done .v2-sp-num {
        background: var(--lime);
        color: var(--lime-ink);
    }

.v2-step-sep {
    width: 12px;
    height: 1px;
    background: var(--line-strong);
    flex-shrink: 0;
}

/* Section card (numbered) */
.v2-section-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
    scroll-margin-top: calc(var(--v2-topbar-h) + 16px);
}

.v2-sc-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-sc-num {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--lime);
    font-family: var(--v2-font-mono);
    font-size: 12px;
    font-weight: 600;
    display: grid;
    place-items: center;
}

[data-theme="dark"] .v2-sc-num,
[data-theme="midnight-emerald"] .v2-sc-num,
[data-theme="obsidian-amber"] .v2-sc-num,
[data-theme="slate-violet"] .v2-sc-num {
    background: var(--lime);
    color: var(--lime-ink);
}

.v2-sc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.v2-sc-sub {
    font-size: 12px;
    color: var(--ink-4);
}

.v2-sc-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sticky bottom action bar */
.v2-action-bar {
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--v2-shadow-2);
    z-index: 10;
}

.v2-action-bar-spacer {
    flex: 1;
}

/* Layout: split form + preview */
.v2-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.v2-create-form {
    min-width: 0;
}

.v2-create-aside {
    position: sticky;
    top: calc(var(--v2-topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Cost pill */
.v2-cost-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--lime-soft);
    border: 1px solid var(--lime);
    color: var(--lime-ink);
    font-size: 12px;
    font-weight: 500;
}

    .v2-cost-pill .v2-cp-amt {
        font-family: var(--v2-font-mono);
        font-feature-settings: "tnum";
        font-weight: 600;
    }

[data-theme="dark"] .v2-cost-pill,
[data-theme="midnight-emerald"] .v2-cost-pill,
[data-theme="obsidian-amber"] .v2-cost-pill,
[data-theme="slate-violet"] .v2-cost-pill {
    color: var(--lime);
}

/* =================================================================
   PHONE PREVIEW (WhatsApp brand colors — never themed)
   ================================================================= */
.v2-phone-frame {
    background: #111;
    border-radius: 28px;
    padding: 8px;
    box-shadow: var(--v2-shadow-pop);
    width: 280px;
    margin: 0 auto;
}

.v2-phone-screen {
    background: #e5ddd5;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.4), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.3), transparent 40%);
}

.v2-phone-header {
    background: #075e54;
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-ph-back {
    color: #fff;
    font-family: var(--v2-font-mono);
    opacity: 0.85;
}

.v2-ph-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
}

.v2-ph-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

.v2-ph-num {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-family: var(--v2-font-mono);
}

.v2-phone-body {
    padding: 14px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 360px;
}

.v2-bubble {
    max-width: 88%;
    padding: 8px 10px 6px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #111;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}

    .v2-bubble.in {
        background: #fff;
        align-self: flex-start;
        border-top-left-radius: 4px;
    }

    .v2-bubble.out {
        background: #dcf8c6;
        align-self: flex-end;
        border-top-right-radius: 4px;
    }

.v2-bubble-header {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: #111;
}

.v2-bubble-footer {
    font-size: 10.5px;
    color: rgba(0,0,0,0.55);
    margin-top: 4px;
}

.v2-bubble-meta {
    font-size: 10px;
    color: #667781;
    text-align: right;
    margin-top: 2px;
    font-family: var(--v2-font-mono);
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

    .v2-bubble-meta .v2-ticks {
        color: #4fc3f7;
    }

.v2-bubble-cta {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
    color: #00a5f4;
    font-size: 12.5px;
    font-weight: 500;
}

.v2-bubble-media {
    margin: -8px -10px 6px;
    background: #cfd5cf;
    height: 130px;
    display: grid;
    place-items: center;
    color: #6a7d54;
    font-family: var(--v2-font-mono);
    font-size: 11px;
    overflow: hidden;
}

    .v2-bubble-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* WhatsApp-style action buttons under a template bubble (chips, not part of the bubble) */
.v2-bubble-buttons {
    margin-top: 4px;
    width: 88%;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .v2-bubble-buttons.in {
        align-self: flex-start;
    }

.v2-bubble-btn {
    background: #fff;
    color: #00a884;
    text-align: center;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(0,0,0,0.06);
}

    .v2-bubble-btn.flow {
        background: #075E54;
        color: #fff;
    }

/* =================================================================
   SUMMARY mini-table (right-pane "ledger")
   ================================================================= */
.v2-summary {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px 14px;
    font-size: 12.5px;
}

    .v2-summary dt {
        color: var(--ink-4);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 10.5px;
        font-weight: 500;
        padding-top: 2px;
    }

    .v2-summary dd {
        color: var(--ink);
        font-weight: 500;
    }

        .v2-summary dd.mono {
            font-family: var(--v2-font-mono);
            font-feature-settings: "tnum";
        }

/* Inline alert (in-page, non-toast) */
.v2-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

    .v2-inline-alert.info {
        background: var(--v2-info-soft);
        color: #075985;
        border: 1px solid #a6dbf2;
    }

    .v2-inline-alert.warn {
        background: var(--v2-warn-soft);
        color: #7a4d09;
        border: 1px solid #f7c97a;
    }

    .v2-inline-alert.danger {
        background: var(--v2-danger-soft);
        color: #8a1d20;
        border: 1px solid #f5b7b9;
    }

    .v2-inline-alert.success {
        background: var(--lime-soft);
        color: var(--lime-ink);
        border: 1px solid var(--lime);
    }

/* =================================================================
   MODAL (used by Create Campaign review)
   ================================================================= */
.v2-modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(13,15,10,0.5);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: v2-fade-in .15s;
}

    .v2-modal-scrim.open {
        display: flex;
    }

@keyframes v2-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[data-theme="dark"] .v2-modal-scrim,
[data-theme="midnight-emerald"] .v2-modal-scrim,
[data-theme="obsidian-amber"] .v2-modal-scrim,
[data-theme="slate-violet"] .v2-modal-scrim {
    background: rgba(0,0,0,0.7);
}

.v2-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--v2-shadow-pop);
    overflow: hidden;
    animation: v2-slide-up .2s;
}

@keyframes v2-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.v2-modal.lg {
    max-width: 600px;
}

.v2-modal-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.v2-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.v2-modal-sub {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 4px;
}

.v2-modal-body {
    padding: 16px 18px;
}

.v2-modal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* =================================================================
   SECONDARY SIDEBAR
   ================================================================= */
.v2-main-with-secondary {
    display: grid;
    grid-template-columns: var(--v2-ss-w, 220px) minmax(0, 1fr);
    min-height: calc(100vh - var(--v2-topbar-h));
    transition: grid-template-columns 0.2s ease;
}

    .v2-main-with-secondary.ss-collapsed {
        --v2-ss-w: 56px;
    }

.v2-secondary-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    position: sticky;
    top: var(--v2-topbar-h);
    height: calc(100vh - var(--v2-topbar-h));
    overflow-y: auto;
    overflow-x: hidden;
}

.v2-ss-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

.v2-ss-head-ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--lime-soft);
    color: var(--lime-ink);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

[data-theme="dark"] .v2-ss-head-ic,
[data-theme="midnight-emerald"] .v2-ss-head-ic,
[data-theme="obsidian-amber"] .v2-ss-head-ic,
[data-theme="slate-violet"] .v2-ss-head-ic {
    color: var(--lime);
}

.v2-ss-head-t {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-ss-collapse {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

    .v2-ss-collapse:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

    .v2-ss-collapse svg {
        transition: transform 0.2s ease;
    }

.v2-ss-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-ss-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .v2-ss-item:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

    .v2-ss-item.active {
        background: var(--lime-soft);
        color: var(--lime-ink);
        font-weight: 600;
        border-color: color-mix(in srgb, var(--lime) 40%, transparent);
    }

[data-theme="dark"] .v2-ss-item.active,
[data-theme="midnight-emerald"] .v2-ss-item.active,
[data-theme="obsidian-amber"] .v2-ss-item.active,
[data-theme="slate-violet"] .v2-ss-item.active {
    color: var(--lime);
}

.v2-ss-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: var(--ink-4);
    flex-shrink: 0;
}

.v2-ss-item.active .v2-ss-icon {
    color: inherit;
}

.v2-ss-item:hover .v2-ss-icon {
    color: var(--ink-3);
}

.v2-ss-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.v2-main-with-secondary.ss-collapsed .v2-secondary-sidebar {
    padding: 14px 6px;
}

.v2-main-with-secondary.ss-collapsed .v2-ss-head {
    padding: 4px 0 12px;
    justify-content: center;
}

.v2-main-with-secondary.ss-collapsed .v2-ss-head-ic,
.v2-main-with-secondary.ss-collapsed .v2-ss-head-t {
    display: none;
}

.v2-main-with-secondary.ss-collapsed .v2-ss-collapse svg {
    transform: rotate(180deg);
}

.v2-main-with-secondary.ss-collapsed .v2-ss-label {
    display: none;
}

.v2-main-with-secondary.ss-collapsed .v2-ss-item {
    justify-content: center;
    padding: 10px 8px;
}

/* =================================================================
   FOCUS / SCROLLBAR / UTILITIES
   ================================================================= */
.v2-app :focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
    border-radius: 6px;
}

.v2-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-grid-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.v2-grid-3 {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
}

.v2-eyebrow {
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}

.v2-muted {
    color: var(--ink-4);
}

.v2-strong {
    color: var(--ink);
    font-weight: 600;
}

.v2-mono-num {
    font-family: var(--v2-font-mono);
    font-feature-settings: "tnum";
}

.v2-tag-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Mobile drawer — sidebar slide-in trigger button (visible <=768px) */
.v2-mobile-trigger {
    width: 32px;
    height: 32px;
    display: none;
    place-items: center;
    border-radius: 8px;
    color: var(--ink-2);
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .v2-mobile-trigger:hover {
        background: var(--bg-panel);
        color: var(--ink);
    }

.v2-scrim {
    position: fixed;
    inset: 0;
    background: rgba(13,15,10,0.45);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

    .v2-scrim.open {
        opacity: 1;
        pointer-events: auto;
    }

[data-theme="dark"] .v2-scrim,
[data-theme="midnight-emerald"] .v2-scrim,
[data-theme="obsidian-amber"] .v2-scrim,
[data-theme="slate-violet"] .v2-scrim {
    background: rgba(0,0,0,0.6);
}

.v2-topbar-mobile-brand {
    display: none;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1280px) {
    .v2-search {
        width: 240px;
    }

    .v2-page {
        padding: 22px 24px 56px;
    }
}

@media (max-width: 1024px) {
    .v2-app {
        --v2-sidebar-w: 64px;
    }

    .v2-sidebar .v2-brand-name,
    .v2-sidebar .v2-brand-env,
    .v2-sidebar .v2-nav-section,
    .v2-sidebar .v2-nav-item .v2-nav-count,
    .v2-sidebar .v2-nav-item .v2-chev,
    .v2-sidebar .v2-nav-sub,
    .v2-sidebar .v2-workspace .v2-ws-meta,
    .v2-sidebar .v2-workspace .v2-ws-action {
        display: none;
    }

    .v2-sidebar .v2-brand {
        justify-content: center;
        padding: 0;
    }

    .v2-sidebar .v2-nav-scroll {
        padding: 8px 6px 16px;
    }

    .v2-sidebar .v2-nav-item {
        justify-content: center;
        gap: 0;
        padding: 9px 8px;
        font-size: 0;
    }

    .v2-sidebar .v2-workspace {
        justify-content: center;
        padding: 10px 6px;
    }

    .v2-topbar {
        padding: 0 14px;
        gap: 8px;
    }

    .v2-crumbs {
        display: none;
    }

    .v2-wallet-label {
        display: none;
    }

    .v2-search {
        width: 200px;
    }

    .v2-user-btn .v2-user-name {
        display: none;
    }

    .v2-user-btn {
        padding: 2px;
    }

    .v2-grid-2 {
        grid-template-columns: 1fr;
    }

    .v2-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

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

    .v2-page-head {
        flex-wrap: wrap;
    }

    .v2-page-actions {
        flex-wrap: wrap;
    }

    .v2-create-layout {
        grid-template-columns: 1fr;
    }

    .v2-create-aside {
        position: static;
    }

    .v2-kpi-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .v2-app {
        --v2-topbar-h: 52px;
        --v2-sidebar-w: 0px;
        grid-template-columns: 1fr;
        grid-template-rows: var(--v2-topbar-h) 1fr;
        grid-template-areas: "topbar" "main";
    }

    .v2-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--v2-shadow-pop);
    }

        .v2-sidebar.open {
            transform: translateX(0);
        }

        .v2-sidebar .v2-brand-name,
        .v2-sidebar .v2-brand-env,
        .v2-sidebar .v2-nav-section,
        .v2-sidebar .v2-nav-item .v2-nav-count,
        .v2-sidebar .v2-nav-item .v2-chev,
        .v2-sidebar .v2-workspace .v2-ws-meta,
        .v2-sidebar .v2-workspace .v2-ws-action {
            display: revert;
        }

        .v2-sidebar .v2-brand-env {
            display: inline-block;
        }

        .v2-sidebar .v2-nav-sub {
            display: none;
        }

            .v2-sidebar .v2-nav-sub.open {
                display: block;
            }

        .v2-sidebar .v2-brand {
            justify-content: flex-start;
            padding: 0 16px;
        }

        .v2-sidebar .v2-nav-scroll {
            padding: 8px 8px 16px;
        }

        .v2-sidebar .v2-nav-item {
            justify-content: flex-start;
            gap: 10px;
            padding: 9px 12px;
            font-size: 13px;
        }

        .v2-sidebar .v2-workspace {
            justify-content: flex-start;
            padding: 10px 12px;
        }

    .v2-mobile-trigger {
        display: grid;
    }

    .v2-topbar {
        padding: 0 12px;
        gap: 6px;
    }

    .v2-search,
    .v2-env-chip,
    .v2-wallet,
    .v2-divider-v {
        display: none;
    }

    .v2-topbar-mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
    }

    .v2-page {
        padding: 16px 16px 48px;
        max-width: 100%;
    }

    .v2-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .v2-page-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .v2-page-title {
        font-size: 20px;
    }

    .v2-kpi-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .v2-kpi {
        padding: 14px;
    }

    .v2-kpi-value {
        font-size: 24px;
    }

    .v2-grid-2, .v2-grid-3 {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .v2-field-row {
        grid-template-columns: 1fr;
    }

    .v2-radio-row {
        grid-template-columns: 1fr;
    }

    .v2-card-head {
        padding: 12px 14px;
        flex-wrap: wrap;
    }

    .v2-card-body {
        padding: 14px;
    }

    .v2-card-foot {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .v2-action-bar {
        flex-wrap: wrap;
    }

    .v2-summary {
        grid-template-columns: 90px 1fr;
    }

    .v2-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-main-with-secondary,
    .v2-main-with-secondary.ss-collapsed {
        grid-template-columns: 1fr;
    }

        .v2-main-with-secondary > .v2-secondary-sidebar {
            position: static;
            height: auto;
            padding: 8px 12px;
            border-right: 0;
            border-bottom: 1px solid var(--line);
            overflow-x: auto;
            overflow-y: visible;
        }

            .v2-main-with-secondary > .v2-secondary-sidebar .v2-ss-head {
                display: none;
            }

            .v2-main-with-secondary > .v2-secondary-sidebar .v2-ss-nav {
                flex-direction: row;
                gap: 4px;
                flex-wrap: nowrap;
                min-width: max-content;
            }
}

@media (max-width: 480px) {
    .v2-kpi-grid {
        grid-template-columns: 1fr;
    }

    .v2-kpi-value {
        font-size: 26px;
    }

    .v2-page-title {
        font-size: 19px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE B — V2 LIST-PAGE COMPONENTS
   --------------------------------------------------------------------------
   Reusable components that every Phase B list page consumes:
     · .v2-sumcards-strip   — horizontal row of clickable KPI tiles
     · .v2-sumcard          — single KPI tile (shows count + label)
     · .v2-toolbar          — search field + filter dropdowns + actions row
     · .v2-table            — sortable striped data table
     · .v2-status-pill      — colored chip used in Status column
     · .v2-cat-pill         — colored chip used in Category column
     · .v2-bulk-bar         — sticky banner at top of table when N rows selected
     · .v2-result-summary   — toast/banner shown after a bulk action completes

   Theming notes
   -------------
   All colors come from existing CSS variables (--lime, --teal, --amber, etc.)
   so the strip auto-themes with the rest of the portal. Each .v2-sumcard
   carries an explicit tone (.tone-lime / .tone-teal / .tone-amber / .tone-red
   / .tone-gray / .tone-blue) — picked at the call site based on the
   semantic of the bucket.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KPI strip ─────────────────────────────────────────────────────── */
.v2-sumcards-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.v2-sumcard {
    appearance: none;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, transform .12s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink);
    font-family: inherit;
}

    .v2-sumcard:hover {
        border-color: var(--lime);
        transform: translateY(-1px);
    }

    .v2-sumcard.active {
        border-color: var(--lime);
        box-shadow: 0 0 0 1px var(--lime) inset;
    }

    .v2-sumcard .v2-sc-head {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--ink-3);
        text-transform: uppercase;
        font-weight: 600;
    }

    .v2-sumcard .v2-sc-icon {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--lime-soft);
        color: var(--lime-ink);
        flex-shrink: 0;
    }

    .v2-sumcard .v2-sc-value {
        font-size: 22px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    /* Tone variants for sumcard icon + (optional) thin bottom border */
    .v2-sumcard.tone-blue .v2-sc-icon {
        background: rgba(64,138,255,.12);
        color: #408AFF;
    }

    .v2-sumcard.tone-teal .v2-sc-icon {
        background: rgba(0,160,135,.12);
        color: #00A087;
    }

    .v2-sumcard.tone-amber .v2-sc-icon {
        background: rgba(214,158,46,.14);
        color: #B8861F;
    }

    .v2-sumcard.tone-red .v2-sc-icon {
        background: rgba(218,75,75,.12);
        color: #DA4B4B;
    }

    .v2-sumcard.tone-gray .v2-sc-icon {
        background: rgba(120,120,120,.10);
        color: #6B6B6B;
    }

    .v2-sumcard.tone-purple .v2-sc-icon {
        background: rgba(140,90,210,.12);
        color: #8C5AD2;
    }

[data-theme="dark"] .v2-sumcard.tone-amber .v2-sc-icon,
[data-theme="midnight-emerald"] .v2-sumcard.tone-amber .v2-sc-icon,
[data-theme="obsidian-amber"] .v2-sumcard.tone-amber .v2-sc-icon,
[data-theme="slate-violet"] .v2-sumcard.tone-amber .v2-sc-icon {
    color: #E5B85A;
}

/* ── Toolbar (search + filters + right-aligned actions) ─────────── */
.v2-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
}

    .v2-toolbar .v2-search {
        flex: 1 1 280px;
        max-width: 360px;
        position: relative;
    }

        .v2-toolbar .v2-search input {
            width: 100%;
            padding: 8px 10px 8px 32px;
            border: 1px solid var(--line);
            border-radius: 7px;
            background: var(--bg);
            font-size: 13px;
            color: var(--ink);
        }

    .v2-toolbar .v2-search-ic {
        position: absolute;
        left: 9px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-4);
        pointer-events: none;
    }

    .v2-toolbar select.v2-select {
        min-width: 130px;
        padding: 7px 10px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: var(--bg);
        font-size: 12.5px;
        color: var(--ink);
    }

    .v2-toolbar .v2-toolbar-spacer {
        flex: 1 1 auto;
    }

/* ── Sortable data table ──────────────────────────────────────────── */
.v2-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.v2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .v2-table thead th {
        background: var(--bg-panel);
        border-bottom: 1px solid var(--line);
        padding: 10px 12px;
        text-align: left;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink-3);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        user-select: none;
    }

        .v2-table thead th.sortable {
            cursor: pointer;
            transition: color .1s;
        }

            .v2-table thead th.sortable:hover {
                color: var(--ink);
            }

            .v2-table thead th.sortable .v2-sort-ind {
                display: inline-block;
                width: 10px;
                margin-left: 3px;
                color: var(--ink-4);
                font-size: 10px;
            }

            .v2-table thead th.sortable.sorted-asc .v2-sort-ind::after {
                content: '▲';
                color: var(--lime-ink);
            }

            .v2-table thead th.sortable.sorted-desc .v2-sort-ind::after {
                content: '▼';
                color: var(--lime-ink);
            }

    .v2-table tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        vertical-align: middle;
    }

    .v2-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .v2-table tbody tr:hover {
        background: var(--bg-panel);
    }

    .v2-table tbody tr.selected {
        background: var(--lime-soft);
    }

        .v2-table tbody tr.selected:hover {
            background: var(--lime-soft);
        }

    .v2-table .v2-td-mono {
        font-family: var(--v2-font-mono);
        font-size: 12px;
    }

    .v2-table .v2-td-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .v2-table .v2-td-actions {
        text-align: right;
        white-space: nowrap;
    }

    .v2-table .v2-td-name {
        font-weight: 500;
    }

        .v2-table .v2-td-name .v2-td-sub {
            display: block;
            font-size: 11.5px;
            font-weight: 400;
            color: var(--ink-4);
            margin-top: 2px;
        }

    /* Row checkbox cell */
    .v2-table .v2-td-check {
        width: 32px;
        padding-right: 0;
    }

    .v2-table .v2-check {
        width: 14px;
        height: 14px;
        border: 1px solid var(--line);
        border-radius: 3px;
        background: var(--bg);
        cursor: pointer;
        accent-color: var(--lime);
    }

/* Empty state inside the table */
.v2-table-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-4);
    font-size: 13px;
}

    .v2-table-empty strong {
        display: block;
        font-size: 14px;
        color: var(--ink-3);
        margin-bottom: 4px;
    }

/* ── Status / category pills ──────────────────────────────────────── */
.v2-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-panel);
    color: var(--ink-3);
    white-space: nowrap;
}

    .v2-status-pill::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    .v2-status-pill.tone-teal {
        background: rgba(0,160,135,.12);
        color: #00A087;
    }

    .v2-status-pill.tone-amber {
        background: rgba(214,158,46,.14);
        color: #B8861F;
    }

    .v2-status-pill.tone-red {
        background: rgba(218,75,75,.12);
        color: #DA4B4B;
    }

    .v2-status-pill.tone-gray {
        background: rgba(120,120,120,.10);
        color: #6B6B6B;
    }

    .v2-status-pill.tone-blue {
        background: rgba(64,138,255,.12);
        color: #408AFF;
    }

    .v2-status-pill.tone-purple {
        background: rgba(140,90,210,.12);
        color: #8C5AD2;
    }

    .v2-status-pill.tone-lime {
        background: var(--lime-soft);
        color: var(--lime-ink);
    }

[data-theme="dark"] .v2-status-pill.tone-amber,
[data-theme="midnight-emerald"] .v2-status-pill.tone-amber,
[data-theme="obsidian-amber"] .v2-status-pill.tone-amber,
[data-theme="slate-violet"] .v2-status-pill.tone-amber {
    color: #E5B85A;
}

.v2-cat-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-panel);
    color: var(--ink-3);
    white-space: nowrap;
}

    .v2-cat-pill.tone-blue {
        background: rgba(64,138,255,.12);
        color: #408AFF;
    }

    .v2-cat-pill.tone-teal {
        background: rgba(0,160,135,.12);
        color: #00A087;
    }

    .v2-cat-pill.tone-amber {
        background: rgba(214,158,46,.14);
        color: #B8861F;
    }

    .v2-cat-pill.tone-lime {
        background: var(--lime-soft);
        color: var(--lime-ink);
    }

/* ── Bulk action bar (slides down when rows are selected) ─────────── */
.v2-bulk-bar {
    display: none;
    align-items: center;
    gap: 12px;
    background: var(--lime-soft);
    border: 1px solid var(--lime);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    color: var(--lime-ink);
    font-size: 13px;
    animation: v2-bulk-slide-in .15s ease-out;
}

    .v2-bulk-bar.open {
        display: flex;
    }

    .v2-bulk-bar .v2-bulk-count {
        font-weight: 600;
        flex-shrink: 0;
    }

    .v2-bulk-bar .v2-bulk-spacer {
        flex: 1 1 auto;
    }

    .v2-bulk-bar .v2-btn {
        background: var(--bg-card);
        color: var(--ink);
        border-color: var(--line);
    }

        .v2-bulk-bar .v2-btn:hover {
            background: var(--bg);
            border-color: var(--lime);
        }

    .v2-bulk-bar .v2-bulk-clear {
        background: transparent;
        border: 0;
        color: var(--lime-ink);
        cursor: pointer;
        padding: 4px 8px;
        font-size: 12px;
        text-decoration: underline;
    }

@keyframes v2-bulk-slide-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Bulk action result summary ──────────────────────────────────── */
.v2-result-summary {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 12px;
    font-size: 13px;
}

    .v2-result-summary.success {
        border-color: #00A087;
    }

    .v2-result-summary.warn {
        border-color: #B8861F;
    }

    .v2-result-summary.danger {
        border-color: #DA4B4B;
    }

    .v2-result-summary .v2-rs-head {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .v2-result-summary details {
        margin-top: 8px;
    }

        .v2-result-summary details summary {
            cursor: pointer;
            font-size: 12px;
            color: var(--ink-3);
        }

        .v2-result-summary details ul {
            margin: 6px 0 0;
            padding-left: 18px;
            font-size: 12px;
            color: var(--ink-3);
        }

/* Mobile niceties for the table */
@media (max-width: 768px) {
    .v2-table-wrap {
        overflow-x: auto;
    }

    .v2-table {
        min-width: 800px;
    }
}