/* ============================================================
   EMILOCK SAAS — NEO FINANCE ENTERPRISE
   A monochrome-first design system inspired by Linear, Stripe,
   Mercury, Ramp, Vercel, Attio, Notion and Raycast.
   ============================================================ */
:root {
    /* —— Core palette ——————————————————————————————— */
    --ink-950: #0A0F1C;
    --ink-900: #111827; /* PRIMARY */
    --ink-800: #1F2937;
    --ink-700: #374151; /* SECONDARY */
    --ink-600: #4B5563;
    --ink-500: #6B7280;
    --ink-400: #9CA3AF;
    --ink-300: #D1D5DB;
    --ink-200: #E5E7EB; /* BORDER */
    --ink-100: #F3F4F6;
    --ink-50: #F8FAFC; /* BACKGROUND */
    --ink-0: #FFFFFF; /* SURFACE */
    /* —— Accent (sparingly used) ——————————————————— */
    --accent-50: #EFF6FF;
    --accent-100: #DBEAFE;
    --accent-200: #BFDBFE;
    --accent-300: #93C5FD;
    --accent-400: #60A5FA;
    --accent-500: #3B82F6;
    --accent-600: #2563EB; /* ACCENT */
    --accent-700: #1D4ED8;
    --accent-800: #1E40AF;
    --accent-900: #1E3A8A;
    --accent: #2563EB;
    /* —— Brand variable aliases (keep names for JS-injected styles) —— */
    /* Re-mapped from purple → ink to neutralize purple-heavy code paths */
    --brand-50: #F3F4F6;
    --brand-100: #E5E7EB;
    --brand-200: #D1D5DB;
    --brand-300: #9CA3AF;
    --brand-400: #6B7280;
    --brand-500: #374151;
    --brand-600: #1F2937;
    --brand-700: #111827;
    --brand-800: #0A0F1C;
    --brand-900: #030712;
    --brand: #111827;
    --brand-grad: linear-gradient(180deg,#1F2937 0%,#111827 100%);
    --brand-grad-dark: linear-gradient(180deg,#111827 0%,#030712 100%);
    /* —— Semantic colors ———————————————————————————— */
    --green-50: #ECFDF5;
    --green-100: #D1FAE5;
    --green-200: #A7F3D0;
    --green-500: #10B981;
    --green-600: #059669;
    --green-700: #047857;
    --red-50: #FEF2F2;
    --red-100: #FEE2E2;
    --red-200: #FECACA;
    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --amber-50: #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-200: #FDE68A;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-700: #B45309;
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --cyan-50: #ECFEFF;
    --cyan-500: #06B6D4;
    --pink-50: #FDF2F8;
    --pink-500: #EC4899;
    --violet-500: #8B5CF6; /* used only by per-role identity dots */
    /* —— Shadows: soft, layered, low-contrast ————— */
    --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
    --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
    --shadow-lg: 0 4px 8px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.08);
    --shadow-xl: 0 20px 56px rgba(15,23,42,.16), 0 4px 12px rgba(15,23,42,.06);
    --shadow-brand: 0 4px 12px -2px rgba(17,24,39,.20);
    --shadow-ring: 0 0 0 4px rgba(37,99,235,.10);
    --shadow-floating: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08), 0 16px 48px rgba(15,23,42,.06);
    /* —— Radius scale ———————————————————————————— */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    /* —— Layout ———————————————————————————————— */
    --side-w: 248px;
    --side-gap: 14px;
    --topbar-h: 60px;
    /* —— Typography ——————————————————————————————— */
    --font-display: 'Bricolage Grotesque','Geist',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-body: 'Geist','Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono: 'Geist Mono','JetBrains Mono',ui-monospace,monospace;
    /* —— Transitions ———————————————————————————— */
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

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

html, body {
    height: 100%
}

body {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-800);
    background: var(--ink-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11','ss01','ss03';
    letter-spacing: -.005em;
}

button, input, select, textarea {
    font: inherit;
    color: inherit
}

a {
    color: inherit;
    text-decoration: none
}

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

/* —— Tabular numerals everywhere amounts matter —— */
.font-mono, .led-dr, .led-cr, .led-bal, .ccode, .iso-badge, .rv-token,
.pkg-create-code, .pkg-mx-num, .pkg-mx-unit, .tbw-amt, .sv, .plan-price,
.rev-stat-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   LOGIN — Editorial split layout
   ============================================================ */
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--ink-0);
    position: relative;
}

.login-left {
    background: radial-gradient(900px 600px at 75% 10%, rgba(37,99,235,.22), transparent 60%), radial-gradient(700px 500px at 15% 90%, rgba(17,24,39,.85), transparent 60%), linear-gradient(160deg, #0A0F1C 0%, #111827 55%, #0A0F1C 100%);
    color: #fff;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .login-left::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
        pointer-events: none;
    }

    .login-left::after {
        content: "";
        position: absolute;
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37,99,235,.30), transparent 60%);
        filter: blur(40px);
        pointer-events: none;
    }

.login-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em;
    position: relative;
}

.login-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--ink-900);
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
}

.login-hero {
    position: relative;
    max-width: 540px
}

    .login-hero h1 {
        font-family: var(--font-display);
        font-size: 56px;
        line-height: 1.02;
        font-weight: 600;
        letter-spacing: -.035em;
        margin-bottom: 22px;
        color: #fff;
    }

        .login-hero h1 em {
            font-style: italic;
            font-weight: 500;
            background: linear-gradient(135deg,#fff 30%, var(--accent-300) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

    .login-hero p {
        font-size: 16px;
        line-height: 1.6;
        color: rgba(255,255,255,.65);
        max-width: 480px;
        font-weight: 400;
    }

.login-stats {
    display: flex;
    gap: 48px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
}

.login-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}

.login-stat span {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    letter-spacing: .02em;
    margin-top: 2px;
    display: block;
}

.login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: var(--ink-0);
    position: relative;
}

    .login-right::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 50% 50%, var(--ink-100) 1px, transparent 1px);
        background-size: 28px 28px;
        opacity: .4;
        pointer-events: none;
        mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    }

.login-card {
    width: 100%;
    max-width: 420px;
    position: relative;
}

    .login-card h2 {
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -.025em;
        color: var(--ink-900);
        margin-bottom: 6px;
    }

    .login-card .lc-sub {
        color: var(--ink-500);
        margin-bottom: 28px;
        font-size: 14px;
    }

.role-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px
}

.role-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
    transition: all .18s var(--ease-out);
    text-align: left;
    width: 100%;
}

    .role-option:hover {
        border-color: var(--ink-300);
        background: var(--ink-50);
    }

    .role-option.selected {
        border-color: var(--ink-900);
        background: var(--ink-0);
        box-shadow: 0 0 0 3px rgba(17,24,39,.06);
    }

.ro-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.role-option[data-r="admin"] .ro-icon {
    background: var(--ink-900)
}

.role-option[data-r="reseller"] .ro-icon {
    background: var(--accent-600)
}

.role-option[data-r="dealer"] .ro-icon {
    background: var(--ink-700)
}

.role-option[data-r="parent"] .ro-icon {
    background: linear-gradient(135deg,#10B981,#059669)
}

.ro-meta strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -.01em;
}

.ro-meta span {
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 1px;
    display: block;
}

.ro-chev {
    margin-left: auto;
    color: var(--ink-300);
    transition: transform .18s var(--ease-out), color .15s;
}

.role-option:hover .ro-chev {
    transform: translateX(2px)
}

.role-option.selected .ro-chev {
    color: var(--ink-900);
    transform: translateX(2px)
}

.form-field {
    margin-bottom: 14px
}

    .form-field label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-700);
        margin-bottom: 6px;
        letter-spacing: -.005em;
    }

    .form-field input {
        width: 100%;
        padding: 11px 13px;
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        background: var(--ink-0);
        transition: all .15s var(--ease-out);
        font-size: 14px;
    }

        .form-field input:focus {
            outline: none;
            border-color: var(--ink-900);
            box-shadow: 0 0 0 3px rgba(17,24,39,.08);
        }

.login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    margin-bottom: 18px;
    font-size: 13px;
}

    .login-actions a {
        color: var(--ink-900);
        font-size: 13px;
        font-weight: 500;
        border-bottom: 1px dashed var(--ink-300);
        padding-bottom: 1px;
    }

        .login-actions a:hover {
            border-bottom-color: var(--ink-900)
        }

.login-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--ink-900);
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: -.005em;
    box-shadow: var(--shadow-brand);
    transition: transform .12s var(--ease-out), background .15s;
    font-family: var(--font-body);
}

    .login-btn:hover {
        background: var(--ink-800);
        transform: translateY(-1px)
    }

.login-foot {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-500);
}

    .login-foot a {
        color: var(--ink-900);
        font-weight: 500;
        border-bottom: 1px dashed var(--ink-300)
    }

/* ============================================================
   APP SHELL — Floating sidebar architecture
   ============================================================ */
.app {
    display: none;
    min-height: 100vh;
    background: var(--ink-50);
    position: relative;
}
    /* Subtle dotted grid background — adds depth without noise */
    .app::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px, rgba(17,24,39,.04) 1px, transparent 0);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }

    .app.show {
        display: grid;
        grid-template-columns: calc(var(--side-w) + var(--side-gap) * 2) 1fr;
    }

/* ——— Floating Sidebar ——————————————————————————— */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--side-gap);
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .sidebar::before {
        content: "";
        position: absolute;
        inset: var(--side-gap);
        background: var(--ink-950);
        border-radius: var(--radius-3xl);
        z-index: -1;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);
        background-image: radial-gradient(600px 400px at 50% 0%, rgba(37,99,235,.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 30%);
    }

.sidebar-inner {
    background: transparent;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #CBD5E1;
}

.side-brand {
    padding: 18px 18px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.side-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--ink-900);
    font-size: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
    font-weight: 700;
}

.side-brand-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -.015em;
    line-height: 1.1;
}

.side-brand-tag {
    font-size: 9.5px;
    color: rgba(203,213,225,.45);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 1px;
}

/* Workspace pill (formerly side-role) */
.side-role {
    margin: 6px 14px 8px;
    padding: 9px 11px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .side-role:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.10);
    }

.side-role-av {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: -.01em;
}

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

    .side-role-info strong {
        display: block;
        color: #fff;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .side-role-info span {
        font-size: 11px;
        color: rgba(255,255,255,.45);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

.side-role::after {
    content: "⇅";
    color: rgba(255,255,255,.35);
    font-size: 13px;
    line-height: 1;
}

/* Role switcher pills — refined */
.role-switcher {
    margin: 0 14px 10px;
    padding: 3px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1px;
}

.rs-btn {
    padding: 6px 4px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255,255,255,.50);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: all .15s var(--ease-out);
    font-family: var(--font-body);
}

    .rs-btn:hover {
        color: rgba(255,255,255,.85)
    }

    .rs-btn.active {
        background: rgba(255,255,255,.10);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

/* —— Sidebar quick actions (Command palette trigger) —— */
.side-quick {
    margin: 0 14px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-md);
    color: rgba(255,255,255,.55);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}

    .side-quick:hover {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.12);
        color: rgba(255,255,255,.85);
    }

    .side-quick svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
    }

    .side-quick .sq-kbd {
        margin-left: auto;
        display: flex;
        gap: 2px;
    }

    .side-quick kbd {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        padding: 2px 5px;
        border-radius: 4px;
        background: rgba(255,255,255,.08);
        color: rgba(255,255,255,.55);
        border: 1px solid rgba(255,255,255,.06);
        line-height: 1;
    }

/* —— Nav ——— */
.side-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 10px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.10) transparent;
}

    .side-nav::-webkit-scrollbar {
        width: 4px
    }

    .side-nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.10);
        border-radius: 2px
    }

        .side-nav::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,.18)
        }

.nav-group-label {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255,255,255,.30);
    text-transform: uppercase;
    letter-spacing: .10em;
    padding: 14px 10px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .15s var(--ease-out);
    color: rgba(203,213,225,.75);
    font-size: 13px;
    font-weight: 450;
    margin-bottom: 1px;
    position: relative;
    letter-spacing: -.005em;
}

    .nav-item:hover {
        background: rgba(255,255,255,.05);
        color: #fff;
    }

    .nav-item.active {
        background: rgba(255,255,255,.08);
        color: #fff;
        font-weight: 500;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

        .nav-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 14px;
            border-radius: 0 2px 2px 0;
            background: var(--accent-500);
        }

    .nav-item .ic, .nav-item i {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        opacity: .85;
    }

    .nav-item:hover .ic, .nav-item.active .ic {
        opacity: 1
    }

    .nav-item svg {
        stroke-width: 1.75
    }

    .nav-item .badge {
        margin-left: auto;
        background: rgba(255,255,255,.08);
        padding: 1px 6px;
        border-radius: 99px;
        font-size: 9.5px;
        font-weight: 600;
        color: rgba(255,255,255,.65);
        letter-spacing: .02em;
        font-variant-numeric: tabular-nums;
    }

    .nav-item.active .badge {
        background: rgba(37,99,235,.20);
        color: var(--accent-300);
    }

    .nav-item.nav-locked {
        opacity: .40
    }

        .nav-item.nav-locked:hover {
            opacity: .65
        }

    .nav-item .nav-lock {
        margin-left: auto;
        font-size: 10px;
        opacity: .6;
        filter: grayscale(.6);
    }

/* —— Sidebar footer —— */
.side-foot {
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 10.5px;
    color: rgba(255,255,255,.40);
}

    .side-foot > div:first-child {
        display: flex;
        align-items: center;
        gap: 7px;
        font-weight: 500;
    }

/* ============================================================
   MAIN AREA
   ============================================================ */
.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--side-gap) var(--side-gap) var(--side-gap) 0;
    position: relative;
    z-index: 1;
}

.main-inner {
    background: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* —— Topbar —— floating, glass-effect optional */
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--ink-0);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-2xl);
    position: sticky;
    top: var(--side-gap);
    z-index: 30;
    box-shadow: var(--shadow-sm);
}

    .topbar h1 {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.015em;
        margin: 0;
        line-height: 1.15;
    }

    .topbar .bread {
        font-size: 11.5px;
        color: var(--ink-500);
        margin-top: 1px;
        letter-spacing: -.005em;
    }
        /* Breadcrumb separator visual hint */
        .topbar .bread::before {
            content: "⌂";
            color: var(--ink-400);
            margin-right: 6px;
            font-size: 11px;
        }

/* —— Top global search transforms into command palette trigger —— */
.topbar-search {
    flex: 1;
    max-width: 420px;
    margin-left: 8px;
    position: relative;
}

    .topbar-search input {
        width: 100%;
        padding: 8px 12px 8px 36px;
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        background: var(--ink-50);
        font-size: 13px;
        transition: all .15s var(--ease-out);
        color: var(--ink-800);
        font-family: var(--font-body);
    }

        .topbar-search input::placeholder {
            color: var(--ink-400)
        }

        .topbar-search input:focus {
            outline: none;
            border-color: var(--ink-300);
            background: #fff;
            box-shadow: var(--shadow-ring);
        }

    .topbar-search .ic, .topbar-search i {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        pointer-events: none;
        width: 15px;
        height: 15px;
    }

    .topbar-search::after {
        content: "⌘K";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        color: var(--ink-400);
        background: #fff;
        border: 1px solid var(--ink-200);
        border-radius: 4px;
        padding: 2px 5px;
        pointer-events: none;
        letter-spacing: 0;
    }

/* —— Topbar wallet pill (preserved hook) —— */
.tb-wallet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 10px;
    margin-right: 0;
    background: var(--ink-900);
    color: #fff;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
    transition: all .15s var(--ease-out);
}

    .tb-wallet:hover {
        background: var(--ink-800);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .tb-wallet .tbw-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        display: grid;
        place-items: center;
        color: #fff;
        flex-shrink: 0;
    }

    .tb-wallet .tbw-body {
        display: flex;
        flex-direction: column;
        line-height: 1.1
    }

    .tb-wallet .tbw-label {
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: .08em;
        opacity: .55;
        text-transform: uppercase;
    }

    .tb-wallet .tbw-amt {
        font-family: var(--font-mono);
        font-weight: 600;
        font-size: 12.5px;
        margin-top: 1px;
        letter-spacing: -.01em;
    }

    .tb-wallet .tbw-plus {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--accent-600);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
        margin-left: 2px;
        flex-shrink: 0;
        transition: background .15s;
    }

    .tb-wallet:hover .tbw-plus {
        background: var(--accent-500)
    }

/* —— Shop filter pill (preserved hook) —— */
.tb-shop-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    margin-right: 0;
    background: #fff;
    color: var(--ink-800);
    border: 1px solid var(--ink-200);
    border-radius: 99px;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}

    .tb-shop-filter:hover {
        border-color: var(--ink-300);
        background: var(--ink-50);
    }

    .tb-shop-filter .tbs-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--ink-900);
        display: grid;
        place-items: center;
        color: #fff;
        flex-shrink: 0;
    }

    .tb-shop-filter .tbs-body {
        display: flex;
        flex-direction: column;
        line-height: 1.1
    }

    .tb-shop-filter .tbs-label {
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: .08em;
        color: var(--ink-500);
        text-transform: uppercase;
    }

    .tb-shop-filter .tbs-name {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 12px;
        margin-top: 1px;
        color: var(--ink-900);
        letter-spacing: -.005em;
    }

    .tb-shop-filter .tbs-caret {
        color: var(--ink-400);
        font-size: 10px;
        margin-left: 2px;
    }

/* Shop filter dropdown */
.shop-filter-menu {
    position: absolute;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
    min-width: 280px;
    padding: 5px;
    z-index: 9999;
}

.shop-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .12s;
}

    .shop-filter-item:hover {
        background: var(--ink-50)
    }

    .shop-filter-item.active {
        background: var(--ink-100);
        color: var(--ink-900)
    }

    .shop-filter-item .sfi-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .shop-filter-item .sfi-name {
        flex: 1;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -.005em;
    }

    .shop-filter-item .sfi-meta {
        font-size: 11px;
        color: var(--ink-500);
        font-variant-numeric: tabular-nums;
    }

    .shop-filter-item .sfi-check {
        width: 16px;
        height: 16px;
        color: var(--ink-900);
        opacity: 0;
    }

    .shop-filter-item.active .sfi-check {
        opacity: 1
    }

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--ink-200);
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-600);
    transition: all .15s var(--ease-out);
    position: relative;
}

    .icon-btn:hover {
        background: var(--ink-50);
        color: var(--ink-900);
        border-color: var(--ink-300);
    }

    .icon-btn .dot {
        position: absolute;
        top: 5px;
        right: 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-600);
        border: 2px solid #fff;
    }

    .icon-btn svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.75
    }

/* User chip */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 11px 3px 3px;
    background: #fff;
    border-radius: 99px;
    cursor: pointer;
    border: 1px solid var(--ink-200);
    transition: all .15s;
}

    .topbar-user:hover {
        background: var(--ink-50);
        border-color: var(--ink-300)
    }

    .topbar-user .av {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--ink-900);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 600;
    }

    .topbar-user .un {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-800);
        letter-spacing: -.005em;
    }

/* ============================================================
   CONTENT
   ============================================================ */
.content {
    padding: 18px 0 60px;
    min-width: 0;
    position: relative;
}

/* ============================================================
   GUARANTOR CARD — repeatable list on the Customer modal's Complete KYC tab
   ============================================================ */
.guarantor-card {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    background: var(--ink-50);
    padding: 16px;
    margin-bottom: 14px;
}

.guarantor-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.guarantor-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink-900);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* ============================================================
   CARDS / SECTIONS
   ============================================================ */
.card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

    .card:hover {
        border-color: var(--ink-300)
    }

.card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ink-100);
}

    .card-head h3 {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.01em;
    }

    .card-head .sub {
        font-size: 11.5px;
        color: var(--ink-500);
        margin-top: 2px;
        letter-spacing: -.005em;
    }

.card-actions {
    margin-left: auto;
    display: flex;
    gap: 6px
}

.card-body {
    padding: 18px
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

    .section-head h2 {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.025em;
        line-height: 1.15;
    }

    .section-head .sh-sub {
        font-size: 13px;
        color: var(--ink-500);
        margin-top: 4px;
        letter-spacing: -.005em;
    }

.section-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .15s var(--ease-out);
    line-height: 1.1;
    font-family: var(--font-body);
    letter-spacing: -.005em;
    white-space: nowrap;
}

    .btn:hover {
        transform: translateY(-1px)
    }

    .btn:active {
        transform: translateY(0)
    }

.btn-primary {
    background: var(--ink-900);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, var(--shadow-sm);
}

    .btn-primary:hover {
        background: var(--ink-800);
        box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, var(--shadow-md)
    }

.btn-blue {
    background: var(--accent-600);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(37,99,235,.20);
}

    .btn-blue:hover {
        background: var(--accent-700);
        box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px -2px rgba(37,99,235,.30)
    }

.btn-ghost {
    background: #fff;
    border-color: var(--ink-200);
    color: var(--ink-700);
}

    .btn-ghost:hover {
        background: var(--ink-50);
        border-color: var(--ink-300);
        color: var(--ink-900)
    }

.btn-soft {
    background: var(--ink-100);
    color: var(--ink-800);
    border-color: transparent;
}

    .btn-soft:hover {
        background: var(--ink-200)
    }

.btn-soft-blue {
    background: var(--accent-50);
    color: var(--accent-700);
    border-color: transparent;
}

    .btn-soft-blue:hover {
        background: var(--accent-100)
    }

.btn-success {
    background: var(--green-600);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}

    .btn-success:hover {
        background: var(--green-700)
    }

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

    .btn-danger:hover {
        background: var(--red-50);
        border-color: var(--red-300)
    }

.btn-sm {
    padding: 5px 9px;
    font-size: 11.5px;
    border-radius: var(--radius-sm)
}

.btn-edit {
    background: var(--ink-100);
    color: var(--ink-900);
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-edit:hover {
        background: var(--ink-200)
    }

/* ============================================================
   PILLS / TAGS
   ============================================================ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .01em;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.pill-brand {
    background: var(--ink-900);
    color: #fff;
}

.pill-success {
    background: var(--green-50);
    color: var(--green-700);
    border-color: var(--green-200);
}

.pill-danger {
    background: var(--red-50);
    color: var(--red-700);
    border-color: var(--red-200);
}

.pill-amber {
    background: var(--amber-50);
    color: var(--amber-700);
    border-color: var(--amber-200);
}

.pill-blue {
    background: var(--accent-50);
    color: var(--accent-700);
    border-color: var(--accent-200);
}

.pill-slate {
    background: var(--ink-100);
    color: var(--ink-700);
    border-color: var(--ink-200);
}

.pill-cyan {
    background: var(--cyan-50);
    color: #0E7490;
    border-color: #A5F3FC;
}

/* Pills with dot indicator */
.pill::before {
    display: none
}

.pill-success::before, .pill-danger::before, .pill-amber::before, .pill-blue::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 1px;
}

.pill-success::before {
    background: var(--green-500)
}

.pill-danger::before {
    background: var(--red-500)
}

.pill-amber::before {
    background: var(--amber-500)
}

.pill-blue::before {
    background: var(--accent-500)
}

/* ============================================================
   TABLES — Airtable-inspired
   ============================================================ */
.tbl-wrap {
    overflow-x: auto;
    border-radius: var(--radius-xl);
}

.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

    .tbl thead th {
        text-align: left;
        padding: 9px 14px;
        background: var(--ink-50);
        color: var(--ink-500);
        font-weight: 600;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        border-bottom: 1px solid var(--ink-200);
        position: sticky;
        top: 0;
        white-space: nowrap;
    }

    .tbl tbody td {
        padding: 11px 14px;
        border-bottom: 1px solid var(--ink-100);
        color: var(--ink-700);
        letter-spacing: -.005em;
    }

    .tbl tbody tr {
        transition: background .12s;
    }

        .tbl tbody tr:hover {
            background: var(--ink-50)
        }

        .tbl tbody tr:last-child td {
            border-bottom: 0
        }

    .tbl .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .tbl tfoot td, .tbl tfoot th {
        padding: 11px 14px;
        background: var(--ink-50);
        color: var(--ink-900);
        font-weight: 600;
        border-top: 1px solid var(--ink-200);
    }

    .tbl .tbl-name {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .tbl .tbl-av {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-md);
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        flex-shrink: 0;
        letter-spacing: -.01em;
    }

.tbl-name-main {
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -.005em;
}

.tbl-name-sub {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 1px;
}

/* ============================================================
   FORMS
   ============================================================ */
.fld {
    margin-bottom: 5px;
}

    .fld label {
        display: block;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--ink-700);
        margin-bottom: 5px;
        letter-spacing: -.005em;
    }

        .fld label .req {
            color: var(--red-500)
        }

.input, .select, .textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: #fff;
    transition: all .15s var(--ease-out);
    font-size: 13px;
    color: var(--ink-900);
    font-family: inherit;
    letter-spacing: -.005em;
}

    .input:focus, .select:focus, .textarea:focus {
        outline: none;
        border-color: var(--ink-900);
        box-shadow: 0 0 0 3px rgba(17,24,39,.07);
    }

    .input::placeholder, .textarea::placeholder {
        color: var(--ink-400)
    }

.textarea {
    resize: vertical;
    min-height: 80px
}

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

.cust-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

    .cust-form-grid > .fld {
        margin: 0
    }

@media (max-width: 680px) {
    .cust-form-grid {
        grid-template-columns: 1fr
    }
}

/* —— KYC wizard step indicator —— */
.kyc-wizard-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    margin-bottom: 14px;
}

.kyc-step {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: 1;
    transition: all .15s var(--ease-out);
    border: 1px solid transparent;
    min-width: 0;
}

    .kyc-step:not(.locked):hover {
        background: rgba(255,255,255,.7)
    }

    .kyc-step.locked {
        cursor: not-allowed;
        opacity: .45
    }

    .kyc-step.active {
        background: #fff;
        border-color: var(--ink-200);
        box-shadow: var(--shadow-sm);
    }

    .kyc-step.done .kyc-step-num {
        background: var(--green-500);
        color: #fff;
    }

    .kyc-step.incomplete .kyc-step-num {
        background: var(--amber-100);
        color: var(--amber-700);
        border: 1px solid var(--amber-200);
    }

.kyc-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    transition: all .15s;
}

.kyc-step.active .kyc-step-num {
    background: var(--ink-900);
    color: #fff;
}

.kyc-step-body {
    flex: 1;
    min-width: 0
}

.kyc-step-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1;
}

.kyc-step.active .kyc-step-label {
    color: var(--ink-900)
}

.kyc-step-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-900);
    font-size: 12.5px;
    margin-top: 2px;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kyc-step-connector {
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background: var(--ink-200);
    transition: background .2s;
}

    .kyc-step-connector.done {
        background: var(--green-500)
    }

/* —— Loan wizard Step 3 — Review sections —— */
.rev-section {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    margin-bottom: 12px;
    overflow: hidden;
}

.rev-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
}

.rev-section-tag {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--ink-900);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.rev-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-900);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -.005em;
}

.rev-section-sub {
    font-size: 10.5px;
    color: var(--ink-500);
    margin-top: 1px;
}

.rev-section-body {
    padding: 14px
}

.rev-stat {
    padding: 10px 12px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
}

.rev-stat-label {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rev-stat-val {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-900);
    font-size: 18px;
    margin-top: 3px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.rev-stat-sub {
    font-size: 10.5px;
    color: var(--ink-500);
    margin-top: 2px;
}

/* —— Cheque entry table —— */
.ch-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    background: #fff;
}

.ch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 880px;
}

    .ch-table thead th {
        padding: 8px 10px;
        text-align: left;
        font-size: 10px;
        font-weight: 600;
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: .06em;
        background: var(--ink-50);
        border-bottom: 1px solid var(--ink-200);
        white-space: nowrap;
    }

    .ch-table tbody td {
        padding: 6px 8px;
        border-bottom: 1px solid var(--ink-100);
        vertical-align: middle;
    }

    .ch-table tbody tr:last-child td {
        border-bottom: none
    }

    .ch-table tbody tr:hover {
        background: var(--ink-50)
    }

    .ch-table .ch-num-cell {
        text-align: center;
        width: 46px
    }

.ch-row-badge {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--ink-100);
    color: var(--ink-600);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
}

    .ch-row-badge.is-primary {
        background: var(--ink-900);
        color: #fff;
    }

.ch-table input.input {
    padding: 5px 8px;
    font-size: 11.5px;
    border-radius: var(--radius-sm);
    min-width: 0;
    width: 100%;
}

.fld-row-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

/* ============================================================
   TOGGLE
   ============================================================ */
.toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0
}

    .toggle input {
        opacity: 0;
        width: 0;
        height: 0
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--ink-300);
    border-radius: 999px;
    transition: .2s var(--ease-out);
}

    .toggle-slider::before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: .2s var(--ease-out);
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.toggle input:checked + .toggle-slider {
    background: var(--ink-900)
}

    .toggle input:checked + .toggle-slider::before {
        transform: translateX(14px)
    }

/* ============================================================
   STAT / KPI CARDS — Executive panels
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: all .2s var(--ease-out);
}

    .stat-card:hover {
        border-color: var(--ink-300);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
    /* Subtle decorative line — runs at top of card */
    .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--ink-200), transparent);
        opacity: .6;
    }

    .stat-card .si {
        width: 34px;
        height: 34px;
        border-radius: var(--radius-md);
        display: grid;
        place-items: center;
        font-size: 15px;
        color: #fff;
        margin-bottom: 14px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    }

    .stat-card .sv {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.03em;
        line-height: 1.05;
    }

    .stat-card .sl {
        font-size: 12px;
        color: var(--ink-500);
        margin-top: 3px;
        font-weight: 500;
        letter-spacing: -.005em;
    }

    .stat-card .st {
        margin-top: 10px;
        font-size: 11px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        border-radius: 99px;
    }

.st-up {
    color: var(--green-700);
    background: var(--green-50);
}

.st-dn {
    color: var(--red-700);
    background: var(--red-50);
}

/* ============================================================
   PLAN CARDS
   ============================================================ */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.plan-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-2xl);
    padding: 24px;
    position: relative;
    transition: all .2s var(--ease-out);
    box-shadow: var(--shadow-xs);
}

    .plan-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
        border-color: var(--ink-300);
    }

    .plan-card.featured {
        border-color: var(--ink-900);
        background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
        box-shadow: 0 0 0 1px var(--ink-900), var(--shadow-md);
    }

        .plan-card.featured::before {
            content: "POPULAR";
            position: absolute;
            top: -1px;
            right: 18px;
            background: var(--ink-900);
            color: #fff;
            padding: 3px 10px;
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: .08em;
        }

.plan-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.plan-tag {
    background: var(--ink-100);
    color: var(--ink-900);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.005em;
}

.plan-card.featured .plan-tag {
    background: var(--ink-900);
    color: #fff;
}

.plan-price {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -.035em;
    line-height: 1;
}

    .plan-price .pp-curr {
        color: var(--ink-900)
    }

    .plan-price .pp-unit {
        font-size: 13px;
        color: var(--ink-500);
        font-weight: 400;
        font-family: var(--font-body);
        letter-spacing: -.005em;
    }

.plan-dur {
    font-size: 12px;
    color: var(--ink-500);
    font-style: normal;
    margin-top: 6px;
    margin-bottom: 18px;
}

.plan-divider {
    height: 1px;
    background: var(--ink-200);
    margin: 0 -24px 18px;
}

.plan-feat-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-900);
    margin-bottom: 12px;
    letter-spacing: -.01em;
}

.plan-feats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px
}

    .plan-feats li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 12.5px;
        color: var(--ink-700);
        letter-spacing: -.005em;
        line-height: 1.4;
    }

        .plan-feats li::before {
            content: "✓";
            font-weight: 600;
            color: var(--green-600);
            margin-top: 0;
            flex-shrink: 0;
            font-size: 13px;
            line-height: 1.3;
        }

        .plan-feats li.disabled {
            color: var(--ink-400);
            text-decoration: line-through
        }

            .plan-feats li.disabled::before {
                content: "×";
                color: var(--ink-400)
            }

/* ============================================================
   TABS — Segmented
   ============================================================ */
.tabs {
    display: inline-flex;
    gap: 2px;
    background: var(--ink-100);
    padding: 3px;
    border-radius: var(--radius-md);
    border: 1px solid var(--ink-200);
    box-shadow: none;
    margin-bottom: 22px;
}

.tab {
    flex: 1;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    color: var(--ink-600);
    font-size: 13px;
    transition: all .15s var(--ease-out);
    letter-spacing: -.005em;
}

    .tab:hover {
        color: var(--ink-900)
    }

    .tab.active {
        background: #fff;
        color: var(--ink-900);
        box-shadow: var(--shadow-sm);
    }

/* ============================================================
   PACKAGE CARDS
   ============================================================ */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.pkg-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .15s var(--ease-out);
    position: relative;
}

    .pkg-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--ink-300);
    }

    .pkg-card.pkg-popular {
        border: 1px solid var(--ink-900);
        box-shadow: 0 0 0 1px var(--ink-900), var(--shadow-md);
        transform: translateY(-2px);
    }

.pkg-popular-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--ink-900);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 4px 11px;
    border-radius: 0 var(--radius-xl) 0 var(--radius-sm);
}

.pkg-head {
    padding: 20px 18px 14px;
    text-align: center
}

.pkg-price {
    padding: 14px 18px 12px;
    text-align: center;
    border-bottom: 1px dashed var(--ink-200);
}

.pkg-features {
    list-style: none;
    margin: 0;
    padding: 14px 18px;
    flex: 1;
}

/* ============================================================
   SHOP MANAGEMENT
   ============================================================ */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.shop-card {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    background: #fff;
    overflow: hidden;
    transition: all .15s var(--ease-out);
}

    .shop-card:hover {
        border-color: var(--ink-300);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.shop-stripe {
    height: 3px;
    background: var(--shop-color, var(--ink-900));
}

.shop-body {
    padding: 16px 18px
}

/* ============================================================
   POS — Attribute rows
   ============================================================ */
.attr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ink-100);
    background: #fff;
    transition: background .12s;
}

    .attr-row:hover {
        background: var(--ink-50)
    }

    .attr-row:last-child {
        border-bottom: 0
    }

.attr-handle {
    color: var(--ink-300);
    cursor: grab;
    font-size: 14px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

    .attr-handle:hover {
        color: var(--ink-700)
    }

    .attr-handle:active {
        cursor: grabbing
    }

/* POS Product cards */
.pos-prod-card {
    border: 1px solid var(--ink-200);
    transition: all .15s var(--ease-out);
}

    .pos-prod-card:hover {
        border-color: var(--ink-300);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .pos-prod-card.pos-prod-inactive {
        background: var(--ink-50);
        border-style: dashed;
    }

.pos-prod-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 2px;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(-4px);
    transition: all .15s;
    pointer-events: none;
}

.pos-prod-card:hover .pos-prod-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pos-prod-actions .btn {
    padding: 3px 7px;
    font-size: 11px
}

/* ============================================================
   POS / BILLING
   ============================================================ */
.billing-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px;
    align-items: start;
}

.billing-prods {
    min-width: 0
}

.billing-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 8px;
}

.bill-prod-card {
    user-select: none;
    border-radius: var(--radius-md) !important
}

    .bill-prod-card:hover {
        border-color: var(--ink-400) !important;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.billing-cart {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
    min-height: 560px;
    position: sticky;
    top: 14px;
    overflow: hidden;
}

    .billing-cart > .bill-cart-header {
        flex-shrink: 0
    }

    .billing-cart > .bill-cart-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .billing-cart > .bill-cart-footer {
        flex-shrink: 0;
        border-top: 1px solid var(--ink-100);
        background: var(--ink-50);
    }

.cart-qb {
    width: 22px;
    height: 22px;
    border: 1px solid var(--ink-200);
    background: #fff;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: all .12s;
}

    .cart-qb:hover {
        background: var(--ink-100);
        border-color: var(--ink-300);
    }

@media (max-width:1100px) {
    .billing-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .billing-cart {
        position: static;
        height: auto;
        min-height: auto
    }
}

/* ============================================================
   PURCHASE EDITOR
   ============================================================ */
.purch-line-head {
    display: grid;
    grid-template-columns: 1fr 90px 110px 110px 32px;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--ink-200);
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.purch-line {
    display: grid;
    grid-template-columns: 1fr 90px 110px 110px 32px;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

    .purch-line .input {
        font-size: 12px;
        padding: 6px 9px
    }

.purch-pp-panel {
    position: fixed;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
    max-height: 340px;
    overflow-y: auto;
    z-index: 9999;
}

.purch-pp-item:hover {
    background: var(--ink-50) !important;
}

@media (max-width:720px) {
    .purch-line-head {
        display: none
    }

    .purch-line {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px;
        background: var(--ink-50);
        border-radius: var(--radius-md);
        margin-bottom: 10px;
    }

        .purch-line .input:first-child {
            grid-column: 1/-1
        }
}

/* ============================================================
   CREATE PACKAGE — Feature matrix
   ============================================================ */
.pkg-create-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.pkg-create-cell {
    background: #fff;
    padding: 13px 16px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: all .15s;
}

    .pkg-create-cell:focus-within {
        border-color: var(--ink-900);
        box-shadow: 0 0 0 3px rgba(17,24,39,.06);
    }

.pkg-create-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-500);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pkg-create-input {
    width: 100%;
    border: 0;
    padding: 2px 0;
    background: transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink-900);
    letter-spacing: -.02em;
}

    .pkg-create-input:focus {
        outline: 0
    }

    .pkg-create-input::placeholder {
        color: var(--ink-300);
        font-weight: 500
    }

.pkg-create-help {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    font-size: 12px;
    color: var(--ink-700);
    margin-bottom: 16px;
    letter-spacing: -.005em;
}

    .pkg-create-help strong {
        color: var(--ink-900)
    }

.pkg-create-code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--ink-100);
    color: var(--ink-900);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.pkg-mx {
    display: flex;
    flex-direction: column
}

.pkg-mx-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ink-50);
    padding: 9px 16px;
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
}

.pkg-mx-group-input {
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-900);
    padding: 2px 4px;
    flex: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .pkg-mx-group-input:focus {
        outline: 1px dashed var(--ink-400);
        background: #fff;
        border-radius: 4px;
    }

.pkg-mx-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 160px minmax(280px,1.4fr) 28px;
    gap: 14px;
    align-items: center;
    padding: 11px 16px;
    background: #fff;
    border-bottom: 1px solid var(--ink-100);
}

    .pkg-mx-row:hover {
        background: var(--ink-50)
    }

    .pkg-mx-row:last-child {
        border-bottom: 0
    }

.pkg-mx-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.pkg-mx-label {
    border: 0;
    background: transparent;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--ink-900);
    padding: 1px 2px;
    width: 100%;
    letter-spacing: -.005em;
}

    .pkg-mx-label:focus {
        outline: 1px dashed var(--ink-400);
        background: #fff;
        border-radius: 3px;
    }

.pkg-mx-desc {
    border: 0;
    background: transparent;
    font-size: 11px;
    color: var(--ink-500);
    padding: 1px 2px;
    width: 100%;
}

    .pkg-mx-desc:focus {
        outline: 1px dashed var(--ink-400);
        background: #fff;
        border-radius: 3px;
    }

.pkg-mx-type select {
    width: 100%;
    font-size: 12px;
    padding: 6px 10px
}

.pkg-mx-value {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.pkg-mx-num {
    width: 78px;
    padding: 6px 8px;
    font-size: 12px;
    text-align: center;
    font-family: var(--font-mono);
}

.pkg-mx-num-sm {
    width: 54px
}

.pkg-mx-unit {
    width: 80px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--ink-700);
}

.pkg-mx-unit-sm {
    width: 64px
}

.pkg-mx-text {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px
}

.pkg-mx-bool-pair {
    display: flex;
    gap: 5px
}

.pkg-mx-bool {
    width: 42px;
    height: 32px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-400);
    cursor: pointer;
    transition: all .12s;
}

    .pkg-mx-bool:hover {
        border-color: var(--ink-400);
        color: var(--ink-700);
    }

    .pkg-mx-bool.on {
        background: var(--ink-900);
        border-color: var(--ink-900);
        color: #fff;
    }

    .pkg-mx-bool.off {
        background: var(--ink-100);
        border-color: var(--ink-300);
        color: var(--ink-700);
    }

.pkg-mx-addon {
    display: flex;
    align-items: center;
    gap: 6px
}

.pkg-mx-rupee {
    font-weight: 600;
    color: var(--ink-700)
}

.pkg-mx-x {
    font-size: 11px;
    color: var(--ink-500)
}

.pkg-mx-quota {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px
}

.pkg-mx-pack {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding-top: 3px;
    font-size: 11px;
    color: var(--ink-500);
}

.pkg-mx-remove {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    color: var(--ink-300);
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

    .pkg-mx-remove:hover {
        background: var(--red-50);
        color: var(--red-500)
    }

@media (max-width:1100px) {
    .pkg-mx-row {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .pkg-mx-type select {
        width: auto
    }
}

/* ============================================================
   API EDITOR MODAL — replacement vars panel
   ============================================================ */
.api-modal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    min-height: 560px;
}

.api-rv-panel {
    background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 600px;
    overflow-y: auto;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, var(--shadow-md);
}

.api-rv-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.api-rv-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -.005em;
}

.api-rv-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    opacity: .6;
    margin-top: 3px;
    text-transform: uppercase;
}

.api-rv-list {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.rv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .12s;
    border: 1px solid transparent;
}

    .rv-item:hover {
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.15);
    }

    .rv-item.rv-primary {
        background: rgba(37,99,235,.18);
        border-color: rgba(37,99,235,.30);
    }

.rv-token {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.rv-copy {
    opacity: .5;
    font-size: 12px;
    flex-shrink: 0
}

.rv-item:hover .rv-copy {
    opacity: 1
}

.api-rv-usage {
    margin-top: 14px;
    padding: 12px;
    background: rgba(0,0,0,.30);
    border-radius: var(--radius-md);
    font-size: 11px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.06);
}

.api-form-panel {
    min-width: 0
}

/* —— Fund request segmented tabs —— */
.fr-segtab {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--ink-600);
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -.005em;
}

    .fr-segtab:hover {
        color: var(--ink-900)
    }

    .fr-segtab.active {
        background: #fff;
        color: var(--ink-900);
        box-shadow: var(--shadow-sm);
    }

.fr-segtab-count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    background: var(--ink-100);
    color: var(--ink-600);
    padding: 1px 6px;
    border-radius: 99px;
}

.fr-segtab.active .fr-segtab-count {
    background: var(--ink-900);
    color: #fff;
}

.fr-kpi .fr-kpi-pending {
    border: 1px solid var(--amber-200) !important;
    background: linear-gradient(180deg, var(--amber-50) 0%, #fff 100%) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.10);
}

.fr-toplevel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.fr-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    padding: 14px 18px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all .15s var(--ease-out);
    position: relative;
}

    .fr-tab:hover {
        border-color: var(--ink-300);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .fr-tab.active {
        border-color: var(--ink-900);
        background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
        box-shadow: 0 0 0 1px var(--ink-900);
    }

.fr-tab-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.fr-tab-body {
    flex: 1;
    min-width: 0
}

.fr-tab-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-900);
    letter-spacing: -.01em;
}

.fr-tab-sub {
    font-size: 11.5px;
    color: var(--ink-500);
    margin-top: 2px;
}

.fr-tab-badge {
    background: var(--ink-900);
    color: #fff;
    border-radius: 99px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}

/* ============================================================
   MODAL — Slide-over / centered hybrid
   ============================================================ */
.modal-back {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.40);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
}

    .modal-back.show {
        display: flex;
        animation: modalBackIn .2s var(--ease-out)
    }

@keyframes modalBackIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.modal {
    background: #fff;
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--ink-200);
    animation: modalIn .25s var(--ease-out);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }

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

.modal-lg {
    max-width: 920px
}

.modal-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    gap: 12px;
}

    .modal-head h3 {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.015em;
    }

    .modal-head .x {
        margin-left: auto;
        cursor: pointer;
        padding: 6px;
        border-radius: var(--radius-md);
        color: var(--ink-500);
        transition: all .15s;
    }

        .modal-head .x:hover {
            background: var(--ink-100);
            color: var(--ink-900)
        }

.modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1
}

.modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--ink-100);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: var(--ink-50);
}

/* ============================================================
   PRELOADER — injected by alert.js (preloader.load() / preloader.remove()),
   above modals (1000) and toasts (9999) so it can cover a modal mid-submit.
   ============================================================ */
.preloader-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,15,28,.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

    .preloader-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.preloader-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--ink-200);
    border-top-color: var(--accent-600);
    border-radius: 50%;
    animation: preloaderSpin .7s linear infinite;
}

@keyframes preloaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   CONFIRM DIALOG — injected by alert.js (confirmDialog(message, onConfirm, opts)),
   replaces window.confirm() with an app-styled prompt. Above the preloader (10050)
   so a confirm can still be shown/read while a loader is up.
   ============================================================ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,15,28,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    padding: 24px;
}

    .confirm-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.confirm-box {
    background: #fff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 380px;
    padding: 24px;
    transform: translateY(8px);
    transition: transform .15s ease;
}

    .confirm-overlay.show .confirm-box {
        transform: translateY(0);
    }

.confirm-message {
    font-size: 14px;
    color: var(--ink-900);
    line-height: 1.5;
    margin-bottom: 20px;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-rack {
    position: fixed;
    bottom: 24px;
    right: 26px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--ink-900);
    color: #fff;
    border: 1px solid var(--ink-800);
    border-left: 3px solid var(--ink-700);
    border-radius: var(--radius-lg);
    padding: 11px 16px;
    box-shadow: var(--shadow-xl);
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    font-size: 13px;
    letter-spacing: -.005em;
    animation: slide-in .3s var(--ease-out);
}

    .toast.success {
        border-left-color: var(--green-500)
    }

    .toast.error {
        border-left-color: var(--red-500)
    }

    .toast.info {
        border-left-color: var(--accent-500)
    }

@keyframes slide-in {
    from {
        transform: translateX(20px);
        opacity: 0
    }

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

/* ============================================================
   TEMPLATE-MAPPING DRAWER (right-side slide-in)
   ============================================================ */
.tpld-back {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.40);
    backdrop-filter: blur(6px);
    display: none;
    z-index: 120;
}

    .tpld-back.show {
        display: block;
        animation: modalBackIn .22s var(--ease-out);
    }

.tpld {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 600px;
    max-width: calc(100vw - 36px);
    background: #fff;
    box-shadow: var(--shadow-xl);
    border-left: 1px solid var(--ink-200);
    z-index: 121;
    display: flex;
    flex-direction: column;
}

/* A class-toggled transform transition never settles in some render
   environments (stuck at its start frame) — a one-shot keyframe animation,
   same mechanism already used by .modal/.tpldm, is reliable instead. */
.tpld-back.show .tpld {
    animation: tpldSlideIn .3s var(--ease-out);
}

@keyframes tpldSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.tpld-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ink-100);
    position: relative
}

.tpld-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-400);
    margin-bottom: 7px
}

    .tpld-eyebrow .ic {
        width: 14px;
        height: 14px
    }

.tpld-head h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -.015em
}

.tpld-head .sub {
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 2px
}

.tpld-head .desc {
    font-size: 13px;
    color: var(--ink-600);
    margin-top: 11px;
    line-height: 1.5;
    max-width: 480px
}

.tpld-head .x {
    position: absolute;
    top: 18px;
    right: 20px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-md);
    color: var(--ink-500);
    transition: all .15s
}

    .tpld-head .x:hover {
        background: var(--ink-100);
        color: var(--ink-900)
    }

    .tpld-head .x svg {
        width: 18px;
        height: 18px
    }

.tpld-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 22px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-100)
}

.tpld-search {
    position: relative;
    flex: 1;
    max-width: 280px
}

    .tpld-search svg {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        color: var(--ink-400);
        stroke: currentColor;
        fill: none;
        stroke-width: 2
    }

    .tpld-search input {
        width: 100%;
        padding: 7px 10px 7px 30px;
        font-size: 12.5px;
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-md);
        background: #fff;
        outline: none;
        font-family: inherit;
        transition: border-color .15s, box-shadow .15s
    }

        .tpld-search input:focus {
            border-color: var(--accent);
            box-shadow: var(--shadow-ring)
        }

.tpld-count {
    font-size: 12px;
    color: var(--ink-500);
    white-space: nowrap
}

    .tpld-count strong {
        color: var(--ink-900);
        font-weight: 600
    }

.tpld-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px
}

.tpld-foot {
    padding: 13px 22px;
    border-top: 1px solid var(--ink-100);
    background: var(--ink-50);
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .tpld-foot .note-txt {
        font-size: 11.5px;
        color: var(--ink-400)
    }

.tpld-evt {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    margin-bottom: 10px;
    background: #fff;
    transition: border-color .15s
}

    .tpld-evt.open {
        border-color: var(--ink-300);
        box-shadow: var(--shadow-sm)
    }

.tpld-evt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    cursor: pointer;
    border-radius: var(--radius-xl)
}

    .tpld-evt-head:hover {
        background: var(--ink-50)
    }

.tpld-evt.open .tpld-evt-head:hover {
    background: transparent
}

.tpld-evt-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0
}

.tpld-evt-ic {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .tpld-evt-ic svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2
    }

    .tpld-evt-ic.mapped {
        background: var(--green-50);
        color: var(--green-700)
    }

    .tpld-evt-ic.incomplete {
        background: var(--amber-50);
        color: var(--amber-700)
    }

    .tpld-evt-ic.unset {
        background: var(--ink-100);
        color: var(--ink-400)
    }

.tpld-evt-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.3
}

.tpld-evt-sub {
    font-size: 11.5px;
    color: var(--ink-500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tpld-evt-right {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0
}

.tpld-chev {
    width: 15px;
    height: 15px;
    color: var(--ink-400);
    transition: transform .2s;
    stroke: currentColor;
    fill: none;
    stroke-width: 2
}

.tpld-evt.open .tpld-chev {
    transform: rotate(90deg)
}

.tpld-evt-body {
    display: none;
    padding: 0 15px 15px;
    border-top: 1px solid var(--ink-100);
    margin-top: 0
}

.tpld-evt.open .tpld-evt-body {
    display: block;
    animation: slide-in .2s var(--ease-out)
}

.tpld-fld-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
    margin: 14px 0 6px
}

.tpld-preview {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 11px 13px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-700)
}

.tpld-ph {
    background: var(--accent-50);
    color: var(--accent-700);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600
}

.tpld-varbox {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 2px 13px
}

.tpld-var {
    display: grid;
    grid-template-columns: 118px 18px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ink-200)
}

    .tpld-var:last-child {
        border-bottom: none
    }

.tpld-var-tag {
    display: inline-block;
    background: var(--accent-50);
    color: var(--accent-700);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600
}

.tpld-var-lbl {
    font-size: 10px;
    color: var(--ink-400);
    margin-top: 3px
}

.tpld-var-arrow {
    text-align: center;
    color: var(--ink-300)
}

    .tpld-var-arrow svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2
    }

.tpld-var select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 12px
}

.tpld-evt-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px
}

.tpld-empty-hint {
    font-size: 12.5px;
    color: var(--ink-400);
    font-style: italic;
    padding: 6px 0
}

/* Tabular event view */
.tpld-table {
    width: 100%;
    border-collapse: collapse
}

    .tpld-table thead th {
        text-align: left;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ink-400);
        padding: 0 12px 9px;
        border-bottom: 1px solid var(--ink-200)
    }

        .tpld-table thead th:last-child {
            text-align: right
        }

.tpld-trow > td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ink-100);
    vertical-align: middle
}

.tpld-trow {
    transition: background .12s
}

    .tpld-trow:hover {
        background: var(--ink-50)
    }

    .tpld-trow.open {
        background: var(--ink-50)
    }

.tpld-tr-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0
}

.tpld-tr-desc {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px
}

.tpld-tpl-select {
    width: 100%;
    min-width: 170px;
    font-size: 12.5px
}

.tpld-tr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px
}

.tpld-mapbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

    .tpld-mapbtn svg {
        width: 13px;
        height: 13px;
        transition: transform .2s;
        stroke: currentColor;
        fill: none;
        stroke-width: 2
    }

.tpld-trow.open .tpld-mapbtn svg {
    transform: rotate(90deg)
}

.tpld-detail > td {
    padding: 0;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200)
}

.tpld-detail-inner {
    padding: 6px 16px 18px
}

.tpld-tr-muted {
    font-size: 12px;
    color: var(--ink-400)
}

/* Mapping modal — stacks ABOVE the drawer (z>121) */
.tpldm-back {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.48);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 140;
    padding: 24px
}

    .tpldm-back.show {
        display: flex;
        animation: modalBackIn .2s var(--ease-out)
    }

.tpldm {
    background: #fff;
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--ink-200);
    animation: modalIn .25s var(--ease-out)
}

.tpldm-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    gap: 12px
}

    .tpldm-head h3 {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.015em
    }

    .tpldm-head .tpldm-sub {
        font-size: 12px;
        color: var(--ink-500);
        margin-top: 1px;
        font-family: var(--font-mono)
    }

    .tpldm-head .x {
        margin-left: auto;
        cursor: pointer;
        padding: 6px;
        border-radius: var(--radius-md);
        color: var(--ink-500);
        transition: all .15s
    }

        .tpldm-head .x:hover {
            background: var(--ink-100);
            color: var(--ink-900)
        }

        .tpldm-head .x svg {
            width: 18px;
            height: 18px
        }

.tpldm-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1
}

.tpldm-foot {
    padding: 13px 22px;
    border-top: 1px solid var(--ink-100);
    background: var(--ink-50);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center
}

.tpld-seg {
    display: inline-flex;
    background: var(--ink-100);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
    margin-bottom: 10px
}

.tpld-seg-btn {
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--ink-500);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .12s
}

    .tpld-seg-btn:hover {
        color: var(--ink-800)
    }

    .tpld-seg-btn.active {
        background: #fff;
        color: var(--ink-900);
        box-shadow: var(--shadow-xs)
    }

.tpld-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1.5px dashed var(--ink-300);
    border-radius: var(--radius-md);
    background: var(--ink-50);
    cursor: pointer;
    transition: all .15s
}

    .tpld-upload:hover {
        border-color: var(--accent);
        background: var(--accent-50)
    }

    .tpld-upload input[type=file] {
        display: none
    }

    .tpld-upload .ic {
        width: 18px;
        height: 18px;
        color: var(--ink-400);
        flex-shrink: 0
    }

.tpld-upload-txt {
    font-size: 12.5px;
    color: var(--ink-600)
}

.tpld-upload-name {
    font-size: 12.5px;
    color: var(--green-700);
    font-weight: 600
}

.tpld-btnrow {
    padding: 11px 0;
    border-bottom: 1px dashed var(--ink-200)
}

    .tpld-btnrow:last-child {
        border-bottom: none
    }

.tpld-btnrow-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px
}

.tpld-btn-badge {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ink-100);
    color: var(--ink-600)
}

.tpld-btnrow-head strong {
    font-size: 12.5px;
    color: var(--ink-900)
}

.tpld-btn-url {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-500);
    margin-bottom: 7px;
    word-break: break-all
}

.tpld-url-base {
    color: var(--ink-600)
}

.tpld-btn-bind {
    display: flex;
    align-items: center;
    gap: 8px
}

    .tpld-btn-bind .select {
        flex: 1
    }

.tpld-btn-static {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-400)
}

.tpld-media-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink-100);
    color: var(--ink-600);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    margin-bottom: 8px
}

    .tpld-media-chip .ic {
        width: 14px;
        height: 14px
    }

.tpld-prev-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--ink-200)
}

.tpld-prev-btn {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-700);
    padding: 6px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--ink-200)
}

@keyframes modal-shake {
    10%,90% {
        transform: translateX(-1px)
    }

    20%,80% {
        transform: translateX(2px)
    }

    30%,50%,70% {
        transform: translateX(-4px)
    }

    40%,60% {
        transform: translateX(4px)
    }
}

.toast i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center
}

.toast.success i {
    color: var(--green-500)
}

.toast.error i {
    color: var(--red-500)
}

.toast.info i {
    color: var(--accent-400)
}

/* ============================================================
   CHART CARD
   ============================================================ */
.chart-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-xs);
}

.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .chart-head h3 {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-900);
        letter-spacing: -.01em;
    }

.chart-pills {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--ink-100);
    border-radius: var(--radius-md)
}

.chart-pill {
    padding: 4px 9px;
    font-size: 10.5px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-600);
    cursor: pointer;
    font-weight: 500;
    transition: all .15s;
}

    .chart-pill:hover {
        color: var(--ink-900)
    }

    .chart-pill.active {
        background: #fff;
        color: var(--ink-900);
        box-shadow: var(--shadow-xs);
    }

/* ============================================================
   LICENSE TRANSFER
   ============================================================ */
.transfer-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 14px 0;
    border-bottom: 1px dashed var(--ink-200);
}

    .transfer-row:last-of-type {
        border-bottom: none
    }

.qty-btns {
    display: flex;
    gap: 6px
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    transition: transform .12s var(--ease-spring);
}

    .qty-btn:hover {
        transform: scale(1.06)
    }

.qty-minus {
    background: var(--red-500);
    box-shadow: 0 2px 6px -1px rgba(239,68,68,.30)
}

.qty-plus {
    background: var(--green-500);
    box-shadow: 0 2px 6px -1px rgba(16,185,129,.30)
}

/* ============================================================
   SETTING ROWS
   ============================================================ */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ink-100);
}

    .setting-row:last-child {
        border-bottom: 0
    }

.setting-label {
    font-weight: 500;
    color: var(--ink-900);
    font-size: 13px;
    margin-bottom: 2px;
    letter-spacing: -.005em;
}

.setting-desc {
    font-size: 11.5px;
    color: var(--ink-500);
    line-height: 1.4;
}

.sm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}

.sm-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

.sm-name {
    font-weight: 500;
    color: var(--ink-900);
    font-size: 12.5px;
    min-width: 90px;
    letter-spacing: -.005em;
}

.sm-url {
    color: var(--ink-600);
    font-size: 11.5px;
    flex: 1;
    font-family: var(--font-mono);
}

.sm-actions {
    display: flex;
    gap: 5px
}

.og-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    transition: background .15s;
}

    .og-row:hover {
        background: var(--ink-100)
    }

.og-key {
    font-weight: 500;
    color: var(--ink-900);
    font-size: 12px;
    min-width: 110px;
    font-family: var(--font-mono);
}

.og-val {
    color: var(--ink-700);
    font-size: 12px;
    flex: 1
}

.contact-row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr 32px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.contact-x {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--red-200);
    background: #fff;
    color: var(--red-600);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .15s;
}

    .contact-x:hover {
        background: var(--red-50);
        border-color: var(--red-300)
    }

/* ============================================================
   DEVICE CARD
   ============================================================ */
.device-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    padding: 16px;
    transition: all .2s var(--ease-out);
}

    .device-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--ink-300);
    }

.dc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.dc-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--ink-100);
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--ink-600);
}

    .dc-icon.locked {
        background: var(--red-50);
        color: var(--red-600);
        border: 1px solid var(--red-200);
    }

    .dc-icon.unlocked {
        background: var(--green-50);
        color: var(--green-700);
        border: 1px solid var(--green-200);
    }

.dc-name {
    font-weight: 600;
    color: var(--ink-900);
    font-size: 13.5px;
    letter-spacing: -.005em;
}

.dc-meta {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 1px;
}

/* ============================================================
   PROGRESS
   ============================================================ */
.progress {
    height: 6px;
    background: var(--ink-100);
    border-radius: 99px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--ink-900);
    border-radius: 99px;
    transition: width .4s var(--ease-out);
}

    .progress-bar.warn {
        background: linear-gradient(90deg,var(--amber-500),var(--red-500))
    }

    .progress-bar.ok {
        background: var(--green-500)
    }

/* ============================================================
   DEVICE MANAGE PAGE
   ============================================================ */
.dm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 48px
}

@media(max-width:1100px) {
    .dm-grid {
        grid-template-columns: 1fr;
        gap: 6px
    }
}

.dm-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--ink-100);
    gap: 14px;
}

    .dm-row:last-child {
        border-bottom: 0
    }

.dm-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -.005em;
}

.dm-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}

.dm-btn {
    min-width: 80px;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: all .18s var(--ease-spring);
    font-family: var(--font-body);
    letter-spacing: -.005em;
    position: relative;
}

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

.dm-btn-active {
    background: var(--accent-600);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(37,99,235,.20);
}

    .dm-btn-active:hover {
        background: var(--accent-700);
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px -2px rgba(37,99,235,.30);
    }

    .dm-btn-active:active {
        transform: translateY(0)
    }

.dm-btn-idle {
    background: var(--ink-100);
    color: var(--ink-700);
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}

    .dm-btn-idle:hover {
        background: var(--ink-200);
        color: var(--ink-900);
        transform: translateY(-1px);
    }

    .dm-btn-idle:active {
        transform: translateY(0)
    }

.dm-single-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    background: var(--accent-600);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: all .18s var(--ease-spring);
    font-family: var(--font-body);
    letter-spacing: -.005em;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(37,99,235,.20);
}

    .dm-single-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .dm-single-btn:hover {
        background: var(--accent-700);
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px -2px rgba(37,99,235,.30);
    }

    .dm-single-btn:active {
        transform: translateY(0)
    }

    .dm-single-btn:focus-visible {
        outline: 2px solid var(--accent-600);
        outline-offset: 2px
    }

/* ============================================================
   LOAN SHEET — Ledger/EMI Schedule tabs
   ============================================================ */
.ls-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--ink-200);
    margin-bottom: 14px;
    margin-top: 6px;
}

.ls-tab {
    padding: 9px 16px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .15s var(--ease-out);
    position: relative;
    font-family: var(--font-body);
    letter-spacing: -.005em;
}

    .ls-tab:hover {
        color: var(--ink-900)
    }

    .ls-tab.active {
        color: var(--ink-900);
        border-bottom-color: var(--ink-900);
        font-weight: 600;
    }

    .ls-tab .count {
        display: inline-block;
        margin-left: 6px;
        background: var(--ink-100);
        color: var(--ink-600);
        padding: 1px 7px;
        border-radius: 99px;
        font-size: 10.5px;
        font-weight: 600;
    }

    .ls-tab.active .count {
        background: var(--ink-900);
        color: #fff
    }

/* Ledger amount cells */
.led-dr {
    color: var(--red-600);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px
}

.led-cr {
    color: var(--green-600);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px
}

.led-bal {
    color: var(--ink-900);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px
}

/* ============================================================
   PHONE FIELD — Country-code selector
   ============================================================ */
.phone-wrap {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 6px;
    position: relative;
}

.cc-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    user-select: none;
    white-space: nowrap;
    transition: all .12s;
}

    .cc-trigger:hover {
        border-color: var(--ink-300)
    }

    .cc-trigger.open {
        border-color: var(--ink-900);
        box-shadow: 0 0 0 3px rgba(17,24,39,.07);
    }

    .cc-trigger .iso-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 18px;
        padding: 0 5px;
        background: var(--ink-900);
        color: #fff;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .04em;
        font-family: var(--font-mono);
    }

    .cc-trigger .ccode {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--ink-700);
        font-weight: 500;
    }

    .cc-trigger .arrow {
        margin-left: auto;
        opacity: .4;
        font-size: 9px
    }

.cc-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    top: calc(100% + 4px);
    left: 0;
    width: 300px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
    overflow: hidden;
}

    .cc-dropdown.open {
        display: block
    }

.cc-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .cc-search input {
        flex: 1;
        border: 0;
        outline: 0;
        font-size: 13px;
        font-family: inherit;
        background: transparent;
        color: var(--ink-900);
    }

.cc-list {
    max-height: 260px;
    overflow-y: auto
}

.cc-opt {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ink-50);
    font-size: 13px;
    transition: background .1s;
}

    .cc-opt:hover {
        background: var(--ink-50)
    }

    .cc-opt.active {
        background: var(--ink-100)
    }

    .cc-opt .iso-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 20px;
        padding: 0 5px;
        background: var(--ink-900);
        color: #fff;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .04em;
        font-family: var(--font-mono);
    }

    .cc-opt .cname {
        color: var(--ink-700);
        align-self: center
    }

    .cc-opt .ccode {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--ink-500);
        align-self: center;
        font-weight: 500;
    }

/* ============================================================
   EMERGENCY CONTACTS / GUARANTORS
   ============================================================ */
.ec-empty {
    padding: 16px;
    text-align: center;
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--radius-lg);
    color: var(--ink-500);
    font-size: 12.5px;
    margin-bottom: 10px;
}

.ec-add-btn {
    width: 100%;
    padding: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-lg);
    color: var(--ink-700);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12.5px;
    transition: all .15s;
}

    .ec-add-btn:hover {
        background: var(--ink-50);
        border-color: var(--ink-900);
        border-style: solid;
        color: var(--ink-900);
    }

.ec-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 13px 16px;
    margin-bottom: 10px;
    position: relative;
}

.ec-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink-100);
}

.ec-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink-900);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
}

.ec-title {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-900);
    font-size: 13px;
    letter-spacing: -.005em;
}

.ec-remove {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--red-600);
    border: 1px solid var(--red-200);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .12s;
}

    .ec-remove:hover {
        background: var(--red-500);
        color: #fff;
        border-color: var(--red-500)
    }

    .ec-remove svg {
        width: 13px;
        height: 13px;
        stroke-width: 2
    }

/* ============================================================
   CHANNEL CARDS
   ============================================================ */
.ch-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

@media(max-width:640px) {
    .ch-grid {
        grid-template-columns: 1fr
    }
}

.ch-card {
    display: block;
    cursor: pointer;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    background: #fff;
    transition: all .15s;
    position: relative;
}

    .ch-card:hover {
        border-color: var(--ink-300);
        background: var(--ink-50)
    }

    .ch-card:has(input:checked) {
        border-color: var(--ink-900);
        background: var(--ink-50);
        box-shadow: 0 0 0 1px var(--ink-900);
    }

    .ch-card input[type="checkbox"] {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--ink-900);
    }

.ch-card-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-right: 24px
}

.ch-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0
}

.ch-name {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-900);
    font-size: 13px;
    letter-spacing: -.005em;
}

.ch-desc {
    font-size: 11.5px;
    color: var(--ink-600);
    margin-top: 2px;
    line-height: 1.4;
}

.ch-meta {
    font-size: 10px;
    color: var(--ink-500);
    margin-top: 5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* EMI bulk action bar */
.emi-bulk-bar {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    background: var(--ink-900);
    color: #fff;
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    font-size: 12.5px;
}

    .emi-bulk-bar .pulse {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent-400);
        animation: bulkPulse 1.4s infinite;
    }

@keyframes bulkPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(96,165,250,.5)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(96,165,250,0)
    }
}

/* Wallpaper picker */
.wp-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
    margin-top: 8px;
}

@media(max-width:680px) {
    .wp-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

.wp-card {
    position: relative;
    cursor: pointer;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 2px solid transparent;
    transition: all .15s;
    background: #fff;
}

    .wp-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md)
    }

    .wp-card.wp-selected {
        border-color: var(--ink-900);
        box-shadow: 0 0 0 3px rgba(17,24,39,.10);
    }

.wp-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink-900);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

    .wp-check svg {
        width: 13px;
        height: 13px;
        stroke: #fff;
        stroke-width: 3
    }

/* Filter pills */
.filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.filter-pill {
    padding: 5px 12px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 99px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-700);
    transition: all .15s;
    letter-spacing: -.005em;
}

    .filter-pill:hover {
        border-color: var(--ink-300);
        color: var(--ink-900)
    }

    .filter-pill.active {
        background: var(--ink-900);
        color: #fff;
        border-color: var(--ink-900);
    }

/* ============================================================
   DASHBOARD WIDGETS
   ============================================================ */
.widget-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.recent-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ink-100);
}

    .activity-item:last-child {
        border-bottom: 0
    }

.activity-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-text {
    font-size: 12.5px;
    color: var(--ink-800);
    line-height: 1.45;
    letter-spacing: -.005em;
}

    .activity-text strong {
        font-weight: 600;
        color: var(--ink-900)
    }

.activity-time {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 2px;
}

/* Empty states */
.empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-500)
}

    .empty .icon {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-xl);
        background: var(--ink-100);
        display: grid;
        place-items: center;
        margin: 0 auto 14px;
        color: var(--ink-400);
        font-size: 24px;
    }

    .empty h4 {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        color: var(--ink-900);
        margin-bottom: 4px;
        letter-spacing: -.015em;
    }

    .empty p {
        font-size: 12.5px
    }

/* Inline notes */
.note {
    background: var(--accent-50);
    border: 1px solid var(--accent-200);
    color: var(--accent-900);
    border-radius: var(--radius-lg);
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
    letter-spacing: -.005em;
}

    .note.amber {
        background: var(--amber-50);
        border-color: var(--amber-200);
        color: var(--amber-700);
    }

    .note.brand {
        background: var(--ink-50);
        border-color: var(--ink-200);
        color: var(--ink-700);
    }

        .note.brand strong {
            color: var(--ink-900)
        }

/* Grid helpers */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

/* ============================================================
   COMMAND PALETTE (Cmd+K) — Raycast style
   ============================================================ */
.cmd-back {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 150;
    padding: 96px 24px 24px;
}

    .cmd-back.show {
        display: flex;
        animation: modalBackIn .15s var(--ease-out)
    }

.cmd-palette {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: cmdIn .18s var(--ease-out);
}

@keyframes cmdIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.99)
    }

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

.cmd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ink-100);
}

    .cmd-search svg {
        width: 18px;
        height: 18px;
        color: var(--ink-400);
        stroke-width: 2;
        fill: none;
        stroke: currentColor;
    }

    .cmd-search input {
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 15px;
        color: var(--ink-900);
        font-family: var(--font-body);
        letter-spacing: -.005em;
    }

        .cmd-search input::placeholder {
            color: var(--ink-400)
        }

    .cmd-search .esc {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        color: var(--ink-500);
        background: var(--ink-100);
        border: 1px solid var(--ink-200);
        padding: 2px 6px;
        border-radius: var(--radius-sm);
    }

.cmd-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
}

.cmd-group {
    padding: 6px 6px 2px
}

.cmd-group-label {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 10px 4px;
}

.cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-700);
    transition: background .1s;
    letter-spacing: -.005em;
}

    .cmd-item:hover, .cmd-item.cmd-sel {
        background: var(--ink-100);
        color: var(--ink-900);
    }

.cmd-item-ic {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--ink-100);
    display: grid;
    place-items: center;
    color: var(--ink-600);
    flex-shrink: 0;
}

.cmd-item:hover .cmd-item-ic, .cmd-item.cmd-sel .cmd-item-ic {
    background: #fff;
    color: var(--ink-900);
}

.cmd-item-ic svg {
    width: 13px;
    height: 13px;
    stroke-width: 2;
    fill: none;
    stroke: currentColor
}

.cmd-item-body {
    flex: 1;
    min-width: 0
}

.cmd-item-main {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-item-sub {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 1px;
}

.cmd-item-kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-500);
    background: var(--ink-100);
    border: 1px solid var(--ink-200);
    padding: 2px 5px;
    border-radius: var(--radius-xs);
}

.cmd-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    background: var(--ink-50);
    border-top: 1px solid var(--ink-100);
    font-size: 11px;
    color: var(--ink-500);
}

    .cmd-foot kbd {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        background: #fff;
        border: 1px solid var(--ink-200);
        padding: 1px 5px;
        border-radius: var(--radius-xs);
        margin-right: 3px;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
    .stat-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .plans-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .grid-3 {
        grid-template-columns: repeat(2,1fr)
    }

    .widget-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width:900px) {
    :root {
        --side-gap: 8px
    }

    .app.show {
        grid-template-columns: 1fr
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform .25s var(--ease-out);
    }

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

    .main {
        padding: 8px
    }

    .topbar {
        position: relative;
        top: auto;
        padding: 10px 12px;
        border-radius: var(--radius-xl)
    }

    .topbar-search {
        display: none
    }

    .login-shell {
        grid-template-columns: 1fr
    }

    .login-left {
        display: none
    }

    .stat-grid, .plans-grid, .grid-2, .grid-3 {
        grid-template-columns: 1fr
    }

    .fld-row, .fld-row-3 {
        grid-template-columns: 1fr
    }

    .topbar h1 {
        font-size: 14px
    }

    .section-head h2 {
        font-size: 20px
    }
}

/* Scrollbars */
.content::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

.content::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 4px;
}

    .content::-webkit-scrollbar-thumb:hover, .tbl-wrap::-webkit-scrollbar-thumb:hover {
        background: var(--ink-300);
    }

/* Tooltip — scoped to .icon-btn.tooltip (its only real usage) rather than a bare
   .tooltip selector, since Bootstrap's JS-rendered tooltip popup also carries class="tooltip"
   and a bare selector here would clobber its position/display. */
.icon-btn.tooltip {
    position: relative;
    display: inline-flex
}

    .icon-btn.tooltip:hover::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--ink-900);
        color: #fff;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        z-index: 5;
        letter-spacing: -.005em;
        box-shadow: var(--shadow-md);
    }

/* ============================================================
   ICONS — Lucide inline
   ============================================================ */
.ic {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ic svg {
        width: 100%;
        height: 100%;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

.btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-sm svg {
    width: 12px;
    height: 12px
}

.icon-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.contact-x svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none
}

.sm-actions svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none
}

/* SAFETY NET — raw SVGs inside place-items:center divs */
div[style*="place-items:center"] > svg {
    width: 55%;
    height: 55%;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

/* ULTIMATE SAFETY NET */
.content svg, .modal-body svg {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

.content .btn svg, .modal-body .btn svg, .modal-foot .btn svg {
    width: 13px;
    height: 13px
}

.content .btn-sm svg, .modal-body .btn-sm svg {
    width: 12px;
    height: 12px
}

.content .icon-btn svg, .modal-body .icon-btn svg {
    width: 15px;
    height: 15px
}

.content div[style*="place-items:center"] > svg, .modal-body div[style*="place-items:center"] > svg {
    width: 55%;
    height: 55%
}

.content .ic svg, .modal-body .ic svg {
    width: 100%;
    height: 100%
}

.content .nav-item svg, .nav-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.75
}

.content .si svg, .si svg {
    width: 18px;
    height: 18px
}

.content .tbl-av svg, .tbl-av svg, .modal-body .tbl-av svg {
    width: 50%;
    height: 50%
}

/* —— Refined dropdown menu base —— */
.dropdown-menu {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
    padding: 5px;
    min-width: 200px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-700);
    transition: background .1s;
    letter-spacing: -.005em;
}

    .dropdown-item:hover {
        background: var(--ink-50);
        color: var(--ink-900)
    }

.nt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 132px;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--brand-100,#E0E7FF);
    background: var(--brand-50,#EEF2FF);
    color: var(--brand-700,#4338CA);
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2
}

    .nt-chip:hover {
        filter: brightness(.97)
    }

    .nt-chip.unset {
        border-style: dashed;
        border-color: var(--ink-300);
        background: #fff;
        color: var(--ink-500);
        font-weight: 500
    }

.nt-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.nt-chip-ed {
    opacity: .6
}

.nt-ed-back {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 160;
    padding: 24px
}

    .nt-ed-back.show {
        display: flex
    }

.nt-ed-modal {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(15,23,42,.25);
    border: 1px solid var(--ink-200)
}

.nt-ed-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    gap: 12px
}

.nt-ed-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ink-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0
}

.nt-ed-head h3 {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
    color: var(--ink-900)
}

.nt-ed-sub {
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 1px
}

.nt-ed-x {
    margin-left: auto;
    cursor: pointer;
    color: var(--ink-400);
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 15px
}

    .nt-ed-x:hover {
        background: var(--ink-100);
        color: var(--ink-900)
    }

.nt-ed-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1
}

.nt-ed-foot {
    padding: 13px 22px;
    border-top: 1px solid var(--ink-100);
    background: var(--ink-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.nt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.nt-fld-lbl {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
    margin-bottom: 6px
}

.nt-menubar {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    border: 1px solid var(--ink-200);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    background: var(--ink-50);
    font-size: 12.5px;
    color: var(--ink-600)
}

.nt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid var(--ink-200);
    border-bottom: none;
    background: #fff
}

.nt-tb {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-600);
    font-size: 13px;
    font-family: inherit
}

    .nt-tb:hover {
        background: var(--ink-100)
    }

.nt-tb-sep {
    width: 1px;
    height: 18px;
    background: var(--ink-200);
    margin: 0 5px
}

.nt-editor {
    min-height: 160px;
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--ink-200);
    border-radius: 0 0 9px 9px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    outline: none
}

    .nt-editor:focus {
        border-color: var(--brand-600,#4F46E5)
    }

.nt-v {
    background: #FEF3C7;
    color: #B45309;
    border-radius: 3px;
    padding: 0 4px;
    font-weight: 600;
    font-style: italic
}

.nt-varchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center
}

.nt-varchip {
    font-family: var(--font-mono,monospace);
    font-size: 11px;
    background: var(--ink-100);
    color: var(--ink-700);
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    padding: 3px 9px;
    cursor: pointer
}

    .nt-varchip:hover {
        background: var(--brand-50,#EEF2FF);
        color: var(--brand-700,#4338CA)
    }

.nt-smsbox {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--ink-200);
    border-radius: 9px;
    padding: 12px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    outline: none
}

.nt-cc {
    font-size: 11px;
    color: var(--ink-400);
    text-align: right;
    margin-top: 4px
}

.nt-varbox {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: 9px;
    padding: 4px 12px
}

.nt-var {
    display: grid;
    grid-template-columns: 54px 1fr 16px 1fr;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--ink-200)
}

    .nt-var:last-child {
        border-bottom: none
    }

.nt-var-tag {
    background: var(--brand-50,#EEF2FF);
    color: var(--brand-700,#4338CA);
    font-family: var(--font-mono,monospace);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    text-align: center
}

.nt-var-lbl {
    font-size: 11px;
    color: var(--ink-500)
}

.nt-var-arrow {
    color: var(--ink-300);
    text-align: center
}

.nt-var .select {
    font-size: 12px;
    padding: 6px 8px
}


/*Modal CSS*/
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 740px;
    /* max-height: 90vh; */
    /* overflow-y: auto; */
    /* box-shadow: 0 20px 56px rgba(15,23,42,.18); */
    /* animation: modalIn .2s ease; */
}

@keyframes modalIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--ink-200);
}

    .modal-header h2 {
        font-size: 18px;
        font-weight: 600;
        color: var(--ink-900);
    }

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--ink-400);
    padding: 4px 8px;
    border-radius: 6px;
}

    .modal-close:hover {
        background: var(--ink-100);
        color: var(--ink-900);
    }

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 24px 28px;
}

.modal-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--ink-200);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ct-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.ct-modal-box {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.ct-modal-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 18px;
}

.ct-warning {
    display: flex;
    gap: 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 13px;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.ct-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

.ct-target-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink-50, #F8FAFC);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 22px;
}

.ct-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-600, #6D28D9);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.ct-target-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-900);
}

.ct-target-sub {
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 2px;
}

.ct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

    .ct-table th {
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 8px 4px;
        border-bottom: 1px solid var(--ink-200);
    }

    .ct-table td {
        padding: 12px 4px;
        border-bottom: 1px solid var(--ink-100);
        color: var(--ink-800);
    }

.ct-plan-pill {
    display: inline-block;
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.ct-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0F172A;
    color: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 22px;
}

.ct-totals-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94A3B8;
}

.ct-totals-value {
    font-size: 22px;
    font-weight: 800;
    margin-top: 2px;
}

.ct-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ct-btn-cancel {
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ct-btn-confirm {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    background: #0F172A;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-totals-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.15);
}

/* Non-Generic operation sub-tabs — .active marks the currently open panel,
   .configured marks a sub-tab whose Endpoint is filled in (independent of
   which one is currently open), so already-mapped operations stay visibly
   flagged even after switching away from them. */
.ngop-subtab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--ink-200);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-600);
    transition: all .12s;
}

.ngop-subtab-btn.active {
    background: var(--brand-50);
    color: var(--brand-700);
}

.ngop-subtab-btn.configured {
    border-color: var(--green-500);
}

.ngop-subtab-btn.configured.active {
    background: var(--green-50);
    color: var(--green-700);
}

.ngop-subtab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-300);
    flex-shrink: 0;
}

.ngop-subtab-btn.configured .ngop-subtab-dot {
    background: var(--green-500);
}