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

/* ==========================================================================
   ArbCore CRM — Refined Matte Slate & Pastel Palette (Comfortable Centered Layout)
   ========================================================================== */

:root {
    /* 🌌 Deep Dark Purple / Black Canvas & Glass Surfaces (Reference Style) */
    --bg-main: #0D0B1E;
    --bg-body: #0D0B1E;
    --bg-sidebar: rgba(255, 255, 255, 0.04);
    --bg-topbar: transparent;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-hover: rgba(255, 255, 255, 0.08);
    --bg-card-sub: rgba(255, 255, 255, 0.035);
    --card-dark: rgba(255, 255, 255, 0.05);
    --card-sub: rgba(255, 255, 255, 0.035);
    
    /* 🪟 Glassmorphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-hover: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(20px);
    
    /* 🍏 Apple Spring & Physics Variables */
    --spring-default: cubic-bezier(0.16, 1, 0.3, 1);
    --spring-snappy: cubic-bezier(0.2, 0, 0, 1);
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-press: cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: 100ms var(--spring-snappy);
    --transition-base: 220ms var(--spring-default);
    --transition-smooth: 320ms var(--spring-default);
    
    /* 💜 Violet / Purple Accent System (#8B5CF6 → #A855F7) */
    --accent-primary: #8B5CF6;
    --accent-secondary: #A855F7;
    --accent: #8B5CF6;
    --accent-cyan: #A855F7;
    --accent-blue: #8B5CF6;
    --accent-sky: #C084FC;
    --accent-hover: #C084FC;
    --accent-subtle: rgba(139, 92, 246, 0.14);
    --border-accent: rgba(139, 92, 246, 0.35);
    --accent-border: rgba(139, 92, 246, 0.35);
    
    /* Gradients & Glows */
    --grad-primary: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
    --accent-grad: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
    --grad-subtle: rgba(139, 92, 246, 0.10);
    --grad-hover: rgba(139, 92, 246, 0.20);
    --grad-glow: 0 6px 20px rgba(139, 92, 246, 0.35);
    --accent-glow: 0 6px 20px rgba(139, 92, 246, 0.35);
    
    /* Legacy aliases */
    --accent-lime: #8B5CF6;
    --accent-lime-hover: #A855F7;
    --accent-lime-subtle: rgba(139, 92, 246, 0.14);
    --border-lime: rgba(139, 92, 246, 0.35);
    
    /* Semantic Status Accents */
    --success: #34D399;           /* Mint */
    --success-light: #6EE7B7;
    --success-subtle: rgba(52, 211, 153, 0.14);
    
    --warning: #FBBF24;           /* Amber */
    --warning-light: #FCD34D;
    --warning-subtle: rgba(251, 191, 36, 0.14);
    
    --danger: #F87171;            /* Rose / Coral */
    --danger-light: #FDA4AF;
    --danger-subtle: rgba(248, 113, 113, 0.14);
    
    --indigo: #8B5CF6;            /* Purple */
    
    /* Typography & Neutrals */
    --text-primary: #FFFFFF;
    --text-white: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.40);
    
    /* Clean Neutral Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-dark: rgba(255, 255, 255, 0.05);
    --border-teal-subtle: rgba(255, 255, 255, 0.08);
    
    /* 📐 Standard Design Tokens (Heights, Radiuses, Typography) */
    --h-btn-sm: 26px;
    --h-btn-md: 38px;
    --h-btn-lg: 44px;
    --h-input: 38px;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-card: 14px;
    --radius-panel: 20px;
    --radius-capsule: 9999px;
    --radius-pill: 9999px;
    --radius-sub: 14px;
    --radius-btn: 10px;
    --radius-input: 10px;

    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-lg: 15px;
    --font-xl: 18px;
    --font-2xl: 22px;
    --font-3xl: 30px;

    /* 👑 Shoulder A & 🎯 Shoulder B Consistent Colors */
    --arm-a-color: #C4B5FD;
    --arm-a-bg: rgba(139, 92, 246, 0.14);
    --arm-a-border: rgba(139, 92, 246, 0.30);

    --arm-b-color: #38BDF8;
    --arm-b-bg: rgba(56, 189, 248, 0.14);
    --arm-b-border: rgba(56, 189, 248, 0.30);

    --shadow-subtle: 0 8px 32px rgba(0, 0, 0, 0.30);
    --space-block: 26px;
    --space-subblock: 18px;
    --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

.mono, code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* ==========================================================================
   BROWSER SURFACES, SELECTION, SCROLLBARS & TABULAR NUMBERS
   ========================================================================== */

::selection {
    background: rgba(139, 92, 246, 0.35);
    color: #FFFFFF;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-capsule);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.50);
}

/* Tabular numbers across tables, counters and metrics to prevent jitter */
table, .mono, code, .stat-value, .kpi-value, .lock-timer-countdown, .pct-badge, .range-badge, .count-badge {
    font-variant-numeric: tabular-nums lining-nums;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.45);
}

button:active, 
.btn-primary:active, 
.btn-secondary:active, 
.btn-lime:active, 
.btn-confirm-task:active, 
.btn-red:active, 
.btn-sky:active,
.seg-btn:active,
.farm-pill:active,
.farm-pill-btn:active,
.modal-close-btn:active,
.modal-copy-btn:active,
.clickable-copy-row:active {
    transform: scale(0.98);
}

/* ==========================================================================
   DEEP DARK PURPLE/BLACK GRADIENT CANVAS (EXACT REFERENCE SPECIFICATION)
   ========================================================================== */

body { 
    background-color: #0D0B1E; 
    background-image: 
        radial-gradient(ellipse 70% 55% at 85% 20%, rgba(139, 92, 246, 0.20) 0%, rgba(168, 85, 247, 0.08) 45%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 15% 80%, rgba(124, 58, 237, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(26, 16, 48, 0.6) 0%, transparent 100%),
        linear-gradient(180deg, #0D0B1E 0%, #1A1030 100%);
    background-attachment: fixed;
    color: var(--text-primary); 
    margin: 0; 
    padding: 0;
    -webkit-font-smoothing: antialiased; 
    min-height: 100vh;
}

/* ==========================================================================
   LOGIN SCREEN (ELEGANT FROSTED GLASS CARD)
   ========================================================================== */

.login-body {
    background-color: #0D0B1E;
    background-image: 
        radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.22) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%),
        linear-gradient(180deg, #0D0B1E 0%, #1A1030 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.login-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: 38px 34px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-subtle);
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.login-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand-name {
    font-size: 22px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.login-brand-name span {
    color: var(--accent-primary);
}

.login-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: -4px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-field-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.login-input {
    width: 100%;
    height: 42px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-input);
    color: #FFFFFF;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.login-submit-btn {
    width: 100%;
    height: 44px;
    background: var(--grad-primary);
    border: none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    box-shadow: var(--grad-glow);
}

.login-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ==========================================================================
   APP LAYOUT (LEFT SIDEBAR & CENTERED ULTRA-WIDE FRIENDLY CONTAINER)
   ========================================================================== */

.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: transparent;
    align-items: flex-start;
}

/* --- FLOATING FROSTED GLASS SIDEBAR (REFERENCE ARCHITECTURE) --- */
.app-sidebar {
    width: 250px;
    min-width: 250px;
    margin: 16px 0 16px 16px;
    height: calc(100vh - 32px);
    background: var(--bg-sidebar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 14px;
    position: sticky;
    top: 16px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 100;
    box-shadow: var(--shadow-subtle);
    box-sizing: border-box;
}

.app-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    text-decoration: none;
}

.brand-logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.brand-name span {
    color: var(--accent);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-link .nav-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.sidebar-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-link:hover .nav-icon {
    color: #FFFFFF;
}

/* ⚡ ACTIVE SIDEBAR LINK (GLOWING PURPLE GRADIENT AS ON REFERENCE) */
.sidebar-link.active {
    background: var(--accent-grad);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: var(--accent-glow);
}

.sidebar-link.active .nav-icon {
    color: #FFFFFF;
    filter: brightness(1.2);
}

.sidebar-divider {
    height: 1px;
    background: var(--border-color, rgba(255, 255, 255, 0.08));
    margin: 8px 6px;
    border: none;
    flex-shrink: 0;
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sidebar-user-card,
.sidebar-user-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    position: relative;
    transition: var(--transition-base);
}

.sidebar-user-card:hover {
    border-color: rgba(139, 92, 246, 0.25);
}

.sidebar-user-card.active {
    border-color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.08);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.user-settings-btn:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.4);
    color: #fff;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
}

.user-settings-btn:hover svg {
    transform: rotate(45deg);
}

.user-settings-btn svg {
    transition: transform 0.35s ease;
}

.user-settings-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
}

.user-role-tag,
.user-role-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.sidebar-tz-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tz-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 2px;
}

.tz-select,
.sidebar-tz-select {
    width: 100%;
}

.sidebar-tz-wrap .custom-select-trigger {
    height: 38px;
    font-size: 12px;
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-tz-wrap .custom-select-trigger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(139, 92, 246, 0.35);
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--danger);
    background: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.20);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.sidebar-logout-btn:hover {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.35);
    color: #FFFFFF;
}

/* --- MAIN WORKSPACE (CENTERED ON ULTRAWIDE) --- */
.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    width: 100%;
}

.app-topbar {
    width: 100%;
    max-width: 1640px;
    padding: 24px 32px 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

.page-title {
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--font-mono);
}

.app-content {
    width: 100%;
    max-width: 1640px;
    padding: 24px 32px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
    box-sizing: border-box;
}

/* Mobile Menu Controls (Hidden on Desktop > 1024px) */
.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.mobile-menu-btn,
.mobile-sidebar-close-btn {
    display: none;
}

.mobile-sidebar-backdrop {
    display: none;
}

@media (max-width: 1024px) {
    .app-layout {
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .mobile-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6, 4, 16, 0.75);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 99990;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mobile-sidebar-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        width: 286px !important;
        min-width: 286px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)) 16px !important;
        background: rgba(16, 13, 34, 0.97) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border-radius: 0 20px 20px 0 !important;
        border-left: none !important;
        z-index: 99995 !important;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
        box-shadow: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .app-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.85) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(139, 92, 246, 0.14);
        border: 1px solid rgba(139, 92, 246, 0.35);
        color: #FFFFFF;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        transition: all 0.2s ease;
    }

    .mobile-menu-btn:active {
        transform: scale(0.94);
        background: rgba(139, 92, 246, 0.25);
    }

    .mobile-sidebar-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-secondary);
        font-size: 14px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .app-topbar, .app-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==========================================================================
   CARDS, PANELS & SURFACES (BEHANCE SAAS ARCHITECTURE)
   ========================================================================== */

.grid { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-block); 
    width: 100%;
}

.card { 
    background: var(--glass-bg); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); 
    border-radius: var(--radius-card); 
    padding: 26px 28px; 
    box-shadow: var(--shadow-subtle);
    position: relative;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.card.full-width { 
    width: 100%; 
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px 0;
}

/* --- KPI CARDS (FROSTED GLASS METRIC TILES) --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    width: 100%;
}

.kpi-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.kpi-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.kpi-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: #FFFFFF;
    font-family: var(--font-mono);
    letter-spacing: -0.5px;
}

.kpi-trend {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-sky);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- STAT CARDS --- */
.stat-card {
    background: var(--bg-card-sub);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sub);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

.stat-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF;
    font-family: var(--font-mono);
}

/* ==========================================================================
   SEGMENTED CONTROLS & FILTER PILLS (REFERENCE GLASS CAPSULES)
   ========================================================================== */

.status-segmented-control,
.farm-filter-container .farm-pills-bar,
.segmented-control {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-capsule);
    padding: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.farm-filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: var(--space-block);
}

/* Inactive button in segmented control */
.seg-btn, 
.farm-pill,
.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    outline: none;
}

.seg-btn:hover, 
.farm-pill:hover,
.tab-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

/* Active button in segmented control — Glowing Purple Gradient Pill (Reference Style) */
.seg-btn.active, 
.farm-pill.active,
.tab-btn.active,
.farm-pill-btn.active {
    background: var(--accent-grad) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: var(--accent-glow) !important;
}

.farm-pill.has-pending {
    position: relative;
}
.farm-pill.has-pending::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-secondary);
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
}

.farm-pill-btn {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 7px 16px;
    border-radius: var(--radius-capsule);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.farm-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

/* ==========================================================================
   CLEAN 3-COLUMN MATH & DEVICE GRID
   ========================================================================== */

.math-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.math-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sub, 14px);
    padding: 20px 22px;
    box-shadow: none;
}

.math-col-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 20px;
    line-height: 1.2;
}

.math-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.math-group label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    min-height: 14px;
}

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

.math-range-separator {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
}

.math-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.math-table thead th,
.math-table th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 0 2px 10px 2px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 14px;
}

.math-table tbody td,
.math-table td {
    padding: 6px 2px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}

.math-table tbody tr:first-child td,
.math-table tr:first-child td {
    padding-top: 14px !important;
}

.math-table tbody tr:last-child td,
.math-table tr:last-child td {
    border-bottom: none !important;
    padding-bottom: 4px !important;
}

.math-table input {
    font-size: 12px !important;
    height: 32px !important;
    text-align: center !important;
}

/* ==========================================================================
   METADATA BADGES, DEVICE PAIR GRIDS & SEARCH ENGINE ROWS
   ========================================================================== */

.card-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

/* 2-Column Paired Inputs (e.g. Mobile % / PC %, Windows % / Mac %) */
.device-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

/* Search Engine Compact 3-Column Grid */
.se-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.se-mini-col {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: 0;
    box-sizing: border-box;
}

.se-mini-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

.se-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #FFFFFF;
    flex-shrink: 0;
}

.se-icon-ya {
    background: #EF4444;
}

.se-icon-gg {
    background: #3B82F6;
}

.se-icon-ml {
    background: #005FF9;
}

.se-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.se-subtext {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.se-mini-col .input-unit-wrap {
    width: 100%;
    max-width: 140px;
}

.se-presets-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
}

/* ==========================================================================
   CLEAN PAYMENT & FARM METHODS GRID (SUBTLE 1-LEVEL CONTAINER)
   ========================================================================== */

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

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

.payment-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sub, 14px);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: none;
}

.payment-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: none;
    margin: 0;
    min-height: 20px;
    line-height: 1.2;
}

.payment-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.payment-table th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 0 8px 10px 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 14px;
}

.payment-table tbody tr:first-child td {
    padding-top: 14px;
}

.payment-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: var(--font-md);
}

.payment-table tr:last-child td {
    border-bottom: none;
}

.payment-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   FARM MANAGEMENT LIST (CLEAN TABULAR GRID - STRUCTURED & LIGHTWEIGHT)
   ========================================================================== */

.farm-entry-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.farm-entry-card:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.09);
}

.farm-entry-card.active {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.farm-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-wrap: wrap;
}

.farm-entry-header > div:last-child {
    flex-shrink: 0;
    margin-left: auto;
}

.farm-entry-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}

.farm-name {
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
}

.btn-activate-farm {
    min-height: 28px;
    height: auto;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}

.btn-activate-farm:hover {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.btn-delete-farm {
    min-height: 30px;
    height: auto;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #F87171;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}

.btn-delete-farm:hover {
    background: rgba(248, 113, 113, 0.20);
    border-color: #F87171;
}

.btn-delete-farm-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.22);
    color: #F87171;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-delete-farm-icon:hover {
    background: rgba(248, 113, 113, 0.22);
    border-color: #F87171;
    color: #FFFFFF;
    transform: scale(1.05);
}

.btn-delete-farm-icon:active {
    transform: scale(0.92);
}

.farm-data-table {
    display: grid;
    grid-template-columns: 85px 1fr;
    row-gap: 5px;
    column-gap: 8px;
    align-items: baseline;
    font-size: 12px;
}

.farm-data-row {
    display: contents;
}

.farm-data-label {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.farm-data-label.arm-a-label {
    color: #A78BFA;
}

.farm-data-label.arm-b-label {
    color: #38BDF8;
}

.farm-data-label.source-label {
    color: var(--text-muted);
}

.farm-data-value {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.arm-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 12px;
}

.platform-tag {
    font-size: 10px;
    color: var(--text-muted);
}

.source-link-pill {
    text-decoration: none;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.20);
    border-radius: 9999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.source-link-pill:hover {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.15);
}

/* --- REUSABLE DIVIDER LIST ITEMS (NO NESTED BOXES) --- */
.list-item-row {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
}

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

.list-item-row.active {
    background: rgba(139, 92, 246, 0.08);
    border-left: 2px solid var(--accent-primary);
}

/* ==========================================================================
   INPUTS, FORMS & MUTED MONOCHROME LOCK BUTTONS
   ========================================================================== */

label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Ensure interactive toggle labels, checkbox cards, and helper labels stay in regular sentence case */
.arb-check-card,
.flat-toggle-row,
.tg-event-item,
.crm-toggle-row,
.custom-check-pill {
    text-transform: none !important;
}

.arb-check-card label,
.flat-toggle-row label,
.tg-event-item label,
.crm-toggle-row label,
.arb-check-label,
.flat-toggle-text {
    text-transform: none !important;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 0;
    letter-spacing: normal;
}


input[type="text"], 
input[type="number"], 
input[type="date"], 
input[type="password"], 
select, 
textarea { 
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    color: #FFFFFF; 
    border-radius: var(--radius-input); 
    padding: 10px 14px; 
    font-size: 13px; 
    outline: none; 
    transition: all 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

select option {
    background-color: #17122A;
    color: #FFFFFF;
}

input:not(.input-unit-wrap input):focus, select:focus, textarea:focus { 
    border-color: var(--accent-primary); 
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25); 
    background: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   GLOBAL CUSTOM CHECKBOX DESIGN (ARBITRAGE CRM DESIGN SYSTEM)
   ========================================================================== */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.22);
    outline: none;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    margin: 0;
}

input[type="checkbox"]:hover {
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(255, 255, 255, 0.08);
}

input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
    border-color: #8B5CF6;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.45);
}

input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-0.5px, -0.5px);
}

input[type="checkbox"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   INPUTS WITH UNITS & LOCK BUTTONS — COHESIVE MODERN PILL ARCHITECTURE
   ========================================================================== */
.input-unit-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 10px !important;
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 4px 0 8px !important;
    transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, background 0.18s ease !important;
    width: 100%;
}

.input-unit-wrap.input-unit-wrap-compact {
    width: 140px !important;
    max-width: 140px !important;
}

.input-unit-wrap:focus-within,
.input-unit-wrap:has(input:not([readonly]):focus) {
    border-color: var(--accent-primary, #8B5CF6) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22) !important;
    background: rgba(255, 255, 255, 0.065) !important;
}

.input-unit-wrap:has(input[readonly]) {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.065) !important;
}

.input-unit-wrap input,
.input-unit-wrap input:focus,
.input-unit-wrap input:focus-visible,
.input-unit-wrap input.unlocked-field,
.input-unit-wrap input.unlocked-field:focus,
.input-unit-wrap input.unlocked-field:focus-visible {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    min-width: 24px !important;
    max-width: calc(100% - 46px) !important;
    width: auto !important;
    field-sizing: content !important;
    flex: 0 1 auto !important;
    padding: 0 1px 0 2px !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.input-unit-wrap input::-webkit-outer-spin-button,
.input-unit-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.input-unit-wrap input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Fallback for browsers not supporting field-sizing */
@supports not (field-sizing: content) {
    .input-unit-wrap:has(.unit) input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Number text alignment: left-aligned with unit directly adjacent */
.input-unit-wrap:has(.unit) input {
    text-align: left !important;
}

.input-unit-wrap:not(:has(.unit)) input {
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
}

/* Unit badge (%, $, шт., сек, etc.) — always grouped right next to input digits */
.input-unit-wrap .unit {
    position: static !important;
    flex: 0 0 auto !important;
    margin-left: 2px !important;
    margin-right: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* 🔒 MUTED MONOCHROME LOCK BUTTONS — cleanly separated with dedicated button boundary */
.input-lock-overlay-btn, .btn-lock-icon {
    position: static !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin-left: auto !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    padding: 0 !important;
    border-radius: 7px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.18s ease !important;
    z-index: 2 !important;
}

.input-lock-overlay-btn:hover, .btn-lock-icon:hover {
    color: #C084FC !important;
    background: rgba(139, 92, 246, 0.16) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    transform: scale(1.05) !important;
}

.input-lock-overlay-btn.unlocked, .btn-lock-icon.unlocked {
    color: #DDD6FE !important;
    background: rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.35) !important;
}

.input-lock-overlay-btn svg, .btn-lock-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.input-unit-wrap:has(.input-lock-overlay-btn) input[readonly],
.input-unit-wrap:has(.btn-lock-icon) input[readonly],
.locked-field {
    color: #FFFFFF !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

.input-unit-wrap:has(.input-lock-overlay-btn) input:not([readonly]),
.input-unit-wrap:has(.btn-lock-icon) input:not([readonly]),
.unlocked-field {
    color: #FFFFFF !important;
    cursor: text !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   BUTTONS — BEHANCE SAAS ACCENT & SECONDARY
   ========================================================================== */

.btn-primary, 
.btn-lime, 
.btn-teal, 
.btn-cyan,
button[type="submit"].btn-primary, 
button[type="submit"].btn-lime, 
button[type="submit"].btn-teal { 
    background: var(--grad-primary); 
    border: none; 
    color: #FFFFFF; 
    height: var(--h-btn-md);
    padding: 0 16px; 
    border-radius: var(--radius-btn); 
    cursor: pointer; 
    font-weight: 700; 
    transition: all 0.15s ease; 
    font-size: var(--font-md); 
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--grad-glow);
    text-decoration: none !important;
}

.btn-primary:hover, 
.btn-lime:hover, 
.btn-teal:hover, 
.btn-cyan:hover { 
    filter: brightness(1.1);
    transform: translateY(-1px); 
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    height: var(--h-btn-md);
    padding: 0 16px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: var(--font-md);
    transition: all 0.2s ease;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.btn-sky,
.btn-neutral,
.btn-info {
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38BDF8;
    height: var(--h-btn-md);
    padding: 0 14px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-sky:hover,
.btn-neutral:hover,
.btn-info:hover {
    background: rgba(56, 189, 248, 0.20);
    color: #7DD3FC;
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateY(-1px);
}

.btn-red,
.btn-danger { 
    background: rgba(248, 113, 113, 0.12); 
    border: 1px solid rgba(248, 113, 113, 0.25); 
    color: #F87171; 
    height: var(--h-btn-md);
    padding: 0 12px; 
    border-radius: var(--radius-btn); 
    font-weight: 600; 
    font-size: var(--font-sm); 
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-red:hover,
.btn-danger:hover { 
    background: rgba(248, 113, 113, 0.22); 
    border-color: rgba(248, 113, 113, 0.45); 
    color: #FDA4AF; 
    transform: translateY(-1px);
}

.btn-warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #FBBF24;
    height: var(--h-btn-md);
    padding: 0 14px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-warning:hover {
    background: rgba(251, 191, 36, 0.22);
    border-color: rgba(251, 191, 36, 0.45);
    color: #FCD34D;
    transform: translateY(-1px);
}

/* ==========================================================================
   TOUCH TARGETS & ACCESSIBILITY FOCUS RINGS
   ========================================================================== */
td .btn-red,
td .btn-secondary,
.table-action-btn {
    min-height: 28px;
    min-width: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-lime:focus-visible,
.btn-red:focus-visible,
.btn-warning:focus-visible,
.custom-select-trigger:focus-visible,
input:not(.input-unit-wrap input):focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-primary, #8B5CF6) !important;
    outline-offset: 2px !important;
}

.input-lock-overlay-btn:focus-visible,
.password-toggle-btn:focus-visible,
.modal-close-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #8B5CF6) !important;
    outline-offset: 1px !important;
    border-radius: 6px;
}

.btn-sm {
    height: var(--h-btn-sm) !important;
    padding: 0 10px !important;
    font-size: var(--font-xs) !important;
    border-radius: var(--radius-pill) !important;
}

.btn-confirm-task,
.btn-success {
    width: 100%;
    height: 42px;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: #34D399;
    font-weight: 800;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-confirm-task:hover,
.btn-success:hover {
    background: rgba(52, 211, 153, 0.22);
    color: #6EE7B7;
    border-color: rgba(52, 211, 153, 0.45);
    transform: translateY(-1px);
}

.btn-copy {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.btn-copy:hover {
    opacity: 1;
}

.btn-lock-icon {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
}
.btn-lock-icon:hover {
    opacity: 1;
}

/* ==========================================================================
   AIRY & CLEAN TABLES (EXACT AESTHETICS FROM SCREENSHOT 1)
   ========================================================================== */

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

th { 
    color: var(--text-muted); 
    text-transform: uppercase; 
    font-size: 11px; 
    font-weight: 700; 
    letter-spacing: 0.5px; 
    text-align: left; 
    padding: 14px 14px; 
    border-bottom: 1px solid var(--border-color); 
    white-space: nowrap; 
    background: transparent;
}

td { 
    padding: 14px 14px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.025); 
    vertical-align: middle; 
    color: var(--text-primary); 
    font-weight: 500; 
}

tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ==========================================================================
   BADGES, DOMAIN PILLS & HIGHLIGHTS
   ========================================================================== */

.domain-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.domain-pills .pill, .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: var(--accent-sky);
}

.domain-pills .pill.ok, .pill.ok {
    background: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.30);
    color: var(--success-light);
}

.domain-pills .pill.low, .pill.low {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.30);
    color: var(--danger-light);
}

.icon-box, .stat-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #C084FC;
    flex-shrink: 0;
}

.badge-completed,
.badge-pending,
.badge-waiting,
.badge-error,
.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-capsule) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.badge-completed,
.badge-success {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #34D399 !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
}

.badge-pending,
.badge-warning {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
}

.badge-waiting,
.badge-neutral,
.badge-info {
    background: rgba(96, 165, 250, 0.10) !important;
    color: #60A5FA !important;
    border: 1px solid rgba(96, 165, 250, 0.20) !important;
}

.badge-error,
.badge-danger {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #F87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.25) !important;
}

.role-badge {
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.20);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #C4B5FD;
}

.tg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-capsule);
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: #C4B5FD;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tg-link:hover {
    background: rgba(139, 92, 246, 0.20);
    border-color: var(--accent-primary);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

/* 🏷️ UNIFIED BADGES (REQUIREMENT 4: TONE DOWN CONTRAST & PURPLE ACCENT) */
.range-badge, .tag-badge, .pct-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.20);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
}

.status-badge-active {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.msg, .msg-err {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--space-subblock);
}
.msg {
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.30);
    color: var(--success);
}
.msg-err {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.30);
    color: var(--danger);
}

.template-pill {
    display: inline-flex; 
    align-items: center; 
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.30); 
    border-radius: 20px; 
    padding: 4px 6px 4px 12px; 
    gap: 6px; 
    transition: all 0.2s ease;
}
.template-pill:hover { border-color: var(--accent-primary); background: rgba(139, 92, 246, 0.18); }
.template-pill-btn { background: none; border: none; color: var(--accent-sky); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.template-del-btn {
    background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--danger);
    border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    font-size: 10px; cursor: pointer; padding: 0; line-height: 1;
}

/* ==========================================================================
   TASK CARDS, LOCKING, BLUR OVERLAY & TOASTS (MY_TASKS.PHP)
   ========================================================================== */

.task-bundle-card {
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Внутренние независимые карточки платформ/плеч (Master / Slave) в стиле ArbCore */
.platform-task-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sub, 14px);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.platform-task-card:hover {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
}

.platform-task-card.task-card-completed {
    border-color: rgba(34, 197, 94, 0.30) !important;
    background: rgba(34, 197, 94, 0.02) !important;
}

.platform-task-card--bot {
    border-color: rgba(56, 189, 248, 0.20);
    background: rgba(56, 189, 248, 0.015);
}

.card-inner-wrapper {
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    width: 100%;
}

.task-bundle-card.time-locked .card-inner-wrapper {
    filter: blur(10px) !important;
    -webkit-filter: blur(10px) !important;
    opacity: 0.20 !important;
    pointer-events: none !important;
    user-select: none !important;
    transform: scale(0.99) !important;
}

.lock-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 25 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(13, 11, 30, 0.60) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: var(--radius-card, 20px) !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

.lock-card-box {
    background: rgba(26, 22, 39, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    border-radius: 16px !important;
    padding: 24px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    max-width: 480px !important;
    width: 90% !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(139, 92, 246, 0.18) !important;
    animation: lockCardPulse 3.5s ease-in-out infinite !important;
}

@keyframes lockCardPulse {
    0%, 100% {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.15);
        border-color: rgba(139, 92, 246, 0.35);
    }
    50% {
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 32px rgba(139, 92, 246, 0.30);
        border-color: rgba(167, 139, 250, 0.55);
    }
}

.lock-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 2px !important;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.25) !important;
}

.lock-timer-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55)) !important;
}

.lock-timer-countdown {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.5px !important;
}

.lock-timer-countdown.pending-chain {
    color: #FCD34D !important;
}

.lock-chain-status {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--accent-sky, #C084FC) !important;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    margin-top: 4px !important;
    max-width: 100% !important;
    word-break: break-word !important;
}

#arb_toast_container {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 400px !important;
    pointer-events: none !important;
}

.arb-toast-item {
    pointer-events: auto !important;
    background: rgba(26, 22, 39, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(139, 92, 246, 0.45) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(139, 92, 246, 0.25) !important;
    color: #FFFFFF !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.arb-toast-item:hover {
    transform: translateY(-2px) !important;
    border-color: var(--accent-primary, #8B5CF6) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 28px rgba(139, 92, 246, 0.4) !important;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.arb-toast-header {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.arb-toast-body {
    font-size: 12px !important;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55)) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

.arb-toast-time {
    font-size: 10px !important;
    color: var(--text-muted, rgba(255, 255, 255, 0.40)) !important;
    margin-top: 6px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
}

.arb-toast-close {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, rgba(255, 255, 255, 0.40)) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    transition: color 0.2s ease !important;
}

.arb-toast-close:hover {
    color: #FFFFFF !important;
}

/* ==========================================================================
   CUSTOM ARBCORE DROPDOWN SELECTS (.custom-select-*)
   ========================================================================== */

.card:has(.custom-select-wrapper.open),
.payment-panel:has(.custom-select-wrapper.open),
.has-open-dropdown:not(.modal-backdrop):not(.modal-overlay):not(.bundle-modal-overlay):not(.modal-box) {
    z-index: 99999 !important;
    position: relative !important;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    user-select: none;
    z-index: 10;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.custom-select-wrapper.open {
    z-index: 999999 !important;
}

.custom-select-native-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    clip: rect(0, 0, 0, 0) !important;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-input, 12px);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
}

.custom-select-trigger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(139, 92, 246, 0.35);
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--accent-primary, #8B5CF6);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25), 0 4px 16px rgba(139, 92, 246, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

.custom-select-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFFFFF;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.custom-select-placeholder {
    color: var(--text-muted, rgba(255, 255, 255, 0.40)) !important;
}

.custom-select-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    flex-shrink: 0;
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
    color: var(--accent-primary, #8B5CF6);
}

.custom-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 999999 !important;
    background: rgba(22, 18, 35, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.70), 0 0 24px rgba(139, 92, 246, 0.20);
    max-height: 260px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.16s ease;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    box-sizing: border-box;
}

.custom-select-menu::-webkit-scrollbar {
    width: 4px;
}
.custom-select-menu::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.35);
    border-radius: 9999px;
}
.custom-select-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.60);
}

.custom-select-wrapper.open .custom-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.custom-select-wrapper.open-upwards .custom-select-menu {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(6px) scale(0.98);
}

.custom-select-wrapper.open.open-upwards .custom-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.custom-select-wrapper.open-right-aligned .custom-select-menu {
    left: auto;
    right: 0;
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.custom-select-option:hover,
.custom-select-option.focused {
    background: rgba(139, 92, 246, 0.18);
    color: #FFFFFF;
    transform: translateX(2px);
}

.custom-select-option.selected {
    background: rgba(139, 92, 246, 0.25);
    color: #C4B5FD;
    font-weight: 600;
}

.custom-select-option.selected::after {
    content: "✓";
    font-size: 11px;
    color: var(--accent-primary, #8B5CF6);
    font-weight: 800;
    margin-left: 8px;
}

.custom-select-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   DATE INPUTS (DARK THEMED CALENDARS & PURPLE ACCENT)
   ========================================================================== */

input[type="date"] {
    color-scheme: dark !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B5CF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-input, 12px) !important;
    color: #FFFFFF !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 38px 8px 14px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    min-width: 145px !important;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 100%;
    opacity: 0 !important;
    cursor: pointer !important;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
    display: none !important;
}

input[type="date"]:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
}

input[type="date"]:focus {
    border-color: var(--accent-primary, #8B5CF6) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25), 0 4px 16px rgba(139, 92, 246, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   CUSTOM ARBCORE DATEPICKER (.arb-datepicker-*)
   ========================================================================== */

.arb-datepicker-popup {
    position: fixed;
    z-index: 9999999 !important;
    background: rgba(22, 18, 35, 0.98);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(139, 92, 246, 0.40);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 28px rgba(139, 92, 246, 0.22);
    width: 290px;
    user-select: none;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    display: none;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.arb-datepicker-popup.open {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.arb-dp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.arb-dp-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.arb-dp-nav-btns {
    display: flex;
    gap: 6px;
}

.arb-dp-btn {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: #C4B5FD;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.15s ease;
    padding: 0;
}

.arb-dp-btn:hover {
    background: rgba(139, 92, 246, 0.28);
    color: #FFFFFF;
    border-color: var(--accent-primary, #8B5CF6);
    transform: scale(1.08);
}

.arb-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 2px;
    margin-bottom: 8px;
}

.arb-dp-weekday {
    font-size: 11px;
    font-weight: 700;
    color: #A5B4FC;
    padding: 4px 0;
    text-transform: uppercase;
}

.arb-dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.arb-dp-day {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.arb-dp-day:hover {
    background: rgba(139, 92, 246, 0.22);
    color: #FFFFFF;
    transform: scale(1.06);
}

.arb-dp-day.today {
    border: 1px solid rgba(139, 92, 246, 0.60);
    color: #C4B5FD;
}

.arb-dp-day.selected {
    background: var(--grad-primary, linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%)) !important;
    color: #FFFFFF !important;
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.5);
}

.arb-dp-day.other-month {
    color: rgba(255, 255, 255, 0.25);
}

.arb-dp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
}

.arb-dp-action {
    background: none;
    border: none;
    color: var(--accent-sky, #C084FC);
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.arb-dp-action:hover {
    background: rgba(139, 92, 246, 0.15);
    color: #FFFFFF;
}

/* ==========================================================================
   INTERACTIVE DATA TABLE & DETAIL MODAL (BEHANCE SAAS GLASS SPEC)
   ========================================================================== */

.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.clickable-row:hover {
    background: rgba(139, 92, 246, 0.08) !important;
}

.clickable-row:active {
    background: rgba(139, 92, 246, 0.14) !important;
}

.badge-role-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-capsule, 20px) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
}

.badge-role-pill.deposits {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
}

.badge-role-pill.whale {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.badge-role-pill.warmup_whale,
.badge-role-pill.whale_warmup {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #FB923C !important;
    border: 1px solid rgba(249, 115, 22, 0.38) !important;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.18);
}

.badge-role-pill.redep {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.30) !important;
}

.badge-role-pill.revisit {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #4ADE80 !important;
    border: 1px solid rgba(34, 197, 94, 0.32) !important;
}

.badge-role-pill.drop {
    background: rgba(99, 102, 241, 0.14) !important;
    color: #818CF8 !important;
    border: 1px solid rgba(99, 102, 241, 0.30) !important;
}

.badge-role-pill.fake {
    background: rgba(192, 132, 252, 0.12) !important;
    color: #C084FC !important;
    border: 1px solid rgba(192, 132, 252, 0.28) !important;
}

.badge-role-pill.big_fork {
    background: rgba(236, 72, 153, 0.16) !important;
    color: #F472B6 !important;
    border: 1px solid rgba(236, 72, 153, 0.40) !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.20);
}

/* OS / Device Icon in Monitoring Table — Minimal & Stylish Colors from Project Palette */
.os-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

.os-icon:hover {
    transform: scale(1.2) !important;
    filter: brightness(1.25) !important;
}

.os-icon.windows {
    color: #38BDF8 !important; /* Sky Blue (Deposit / Asocks accent) */
}

.os-icon.android {
    color: #34D399 !important; /* Mint Emerald (Success / Completed accent) */
}

.os-icon.macos {
    color: #DDD6FE !important; /* Sleek Silver-Lavender (Apple metallic accent) */
}

.os-icon svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

.badge-whale-dossier-ready {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ADE80;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-whale-dossier-wait {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.30);
    color: #38BDF8;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   MODAL OPEN - PREVENT BACKGROUND PAGE SCROLL
   ========================================================================== */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    touch-action: none !important;
}

.modal-backdrop,
.modal-overlay,
.bundle-modal-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 8, 18, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: modalBackdropFade 0.2s ease;
}

@keyframes modalBackdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-box {
    background: rgba(20, 15, 40, 0.92);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-panel, 20px);
    width: 100%;
    max-width: 740px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.80), 0 0 32px rgba(139, 92, 246, 0.15);
    overflow: hidden;
    animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.modal-close-btn:hover {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.45);
    color: #F87171;
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 16px rgba(248, 113, 113, 0.35);
}

.modal-close-btn:active {
    transform: rotate(90deg) scale(0.95);
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-body::-webkit-scrollbar {
    width: 5px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.35);
    border-radius: 9999px;
}

.modal-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

@media (max-width: 600px) {
    .modal-grid-2 {
        grid-template-columns: 1fr;
    }
}

.modal-copy-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    gap: 10px;
}

.modal-copy-btn {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.30);
    color: #C4B5FD;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.modal-copy-btn:hover {
    background: rgba(139, 92, 246, 0.35);
    color: #FFFFFF;
    border-color: rgba(139, 92, 246, 0.55);
}

/* ==========================================================================
   ARBITRAGE CRM — REFINED BUNDLE DETAILS MODAL (NATIVE GLASS & ARBCORE PALETTE)
   ========================================================================== */

.modal-box.bundle-modal-box {
    max-width: 1040px;
    width: 94%;
    max-height: 90vh;
    background: rgba(20, 15, 40, 0.88);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(139, 92, 246, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bundle-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

.bundle-modal-body {
    padding: 24px 28px 28px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bundle-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
}

.bundle-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.bundle-meta-item b {
    color: #FFFFFF;
}

.bundle-arms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
    width: 100%;
}

@media (max-width: 920px) {
    .bundle-arms-grid {
        grid-template-columns: 1fr;
    }
}

.bundle-arm-card {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s var(--spring-default), box-shadow 0.2s var(--spring-default), border-color 0.2s var(--spring-default), background 0.2s ease;
}

.bundle-arm-card.arm-a:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.40);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 28px rgba(139, 92, 246, 0.12);
}

.bundle-arm-card.arm-b:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(56, 189, 248, 0.40);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 28px rgba(56, 189, 248, 0.12);
}

.arm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.arm-role-badge-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
    padding: 3px 12px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
}

.arm-role-badge-b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.28);
    padding: 3px 12px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
}

/* Credentials Container (Native Glass Panel with Dividers) */
.arm-credentials-panel {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
}

.arm-cred-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
}

.arm-cred-row:last-child {
    border-bottom: none;
}

.arm-cred-row:hover {
    background: rgba(255, 255, 255, 0.045);
    padding-left: 8px;
    padding-right: 8px;
}

.arm-cred-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    width: 125px;
    flex-shrink: 0;
}

.arm-cred-val {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding-right: 8px;
}

.arm-cred-copy-icon {
    font-size: 11px;
    opacity: 0.45;
    transition: all 0.15s ease;
    color: var(--text-muted);
    flex-shrink: 0;
}

.arm-cred-row:hover .arm-cred-copy-icon {
    opacity: 1;
    color: var(--accent-primary);
    transform: scale(1.18);
}

/* Environment & Network Panel */
.arm-env-panel {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.arm-env-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
}

.arm-proxy-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.arm-proxy-strip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(56, 189, 248, 0.35);
}

.arm-deposit-pill {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.015);
}

/* ==========================================================================
   TASK CARDS - DATA SECTIONS & ONE-CLICK COPY
   ========================================================================== */

.task-data-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.task-data-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.clickable-copy-row {
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 6px;
    margin: 0 -6px;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.clickable-copy-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.clickable-copy-row:active {
    transform: scale(0.99);
}

.clickable-copy-row.copied {
    background: rgba(198, 255, 59, 0.12) !important;
}

.clickable-copy-row.copied .row-value {
    color: var(--accent-lime) !important;
}

/* ==========================================================================
   GLOBAL NOTIFICATION & TOAST SYSTEM (ARBCORE CRM OBSIDIAN GLASS)
   ========================================================================== */

/* 1. TOPBAR BELL BUTTON & BADGE */
.topbar-notification-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.topbar-bell-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    padding: 0;
}

.topbar-bell-btn:hover, .topbar-bell-btn.active {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.45);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}

.bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--grad-primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0D0B1E;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
    font-family: var(--font-mono);
    animation: bellPulse 2.5s infinite ease-in-out;
}

@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); box-shadow: 0 0 14px rgba(139, 92, 246, 0.85); }
}

/* 2. NOTIFICATION HISTORY DROPDOWN */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: rgba(15, 12, 30, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(139, 92, 246, 0.15);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifDropdownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notifDropdownFade {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

.notif-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-header-title {
    font-size: 14px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.2px;
}

.notif-total-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.20);
    color: #C084FC;
    border: 1px solid rgba(139, 92, 246, 0.35);
    font-family: var(--font-mono);
}

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

.notif-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.notif-clear-btn:hover {
    color: var(--danger-light);
    background: rgba(248, 113, 113, 0.10);
}

.notif-close-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.15s ease;
}

.notif-close-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.notif-list-container {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.25);
}

.notif-item-icon-box {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.notif-item-icon-box.success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: #34D399;
}

.notif-item-icon-box.error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #F87171;
}

.notif-item-icon-box.warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #FBBF24;
}

.notif-item-icon-box.info {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: #C084FC;
}

.notif-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notif-item-title {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
}

.notif-item-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.45;
    word-break: break-word;
}

.notif-item-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 3px;
}

.notif-item-del-btn {
    opacity: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.notif-item:hover .notif-item-del-btn {
    opacity: 1;
}

.notif-item-del-btn:hover {
    color: var(--danger-light);
    background: rgba(248, 113, 113, 0.15);
}

.notif-empty {
    padding: 36px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.notif-empty-icon {
    font-size: 32px;
    opacity: 0.8;
}

.notif-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.notif-empty-desc {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 240px;
    line-height: 1.4;
}

/* 3. FLOATING TOASTS (TOP-RIGHT NOTIFICATIONS — ARBCORE GLASS) */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100vw - 48px);
}

.toast-item {
    pointer-events: auto;
    background: rgba(18, 14, 38, 0.90);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.70), 0 0 25px rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: all 0.25s ease;
}

.toast-item.toast-leaving {
    opacity: 0;
    transform: translateX(100px) scale(0.9);
    margin-bottom: -60px;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(50px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.toast-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Color variations */
.toast-item.success {
    border-color: rgba(52, 211, 153, 0.30);
}
.toast-item.success .toast-icon-box {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: #34D399;
}
.toast-item.success .toast-progress {
    background: linear-gradient(90deg, #34D399, #10B981);
}

.toast-item.error {
    border-color: rgba(248, 113, 113, 0.30);
}
.toast-item.error .toast-icon-box {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #F87171;
}
.toast-item.error .toast-progress {
    background: linear-gradient(90deg, #F87171, #EF4444);
}

.toast-item.warning {
    border-color: rgba(251, 191, 36, 0.30);
}
.toast-item.warning .toast-icon-box {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #FBBF24;
}
.toast-item.warning .toast-progress {
    background: linear-gradient(90deg, #FBBF24, #F59E0B);
}

.toast-item.info {
    border-color: rgba(139, 92, 246, 0.30);
}
.toast-item.info .toast-icon-box {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: #C084FC;
}
.toast-item.info .toast-progress {
    background: linear-gradient(90deg, #8B5CF6, #A855F7);
}

.toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.toast-title {
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.toast-message {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    word-break: break-word;
}

.toast-close-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-top: -2px;
    margin-right: -4px;
}

.toast-close-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

@keyframes toastProgressBarCountdown {
    from { width: 100%; }
    to { width: 0%; }
}

.toast-progress-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
}

.toast-progress {
    height: 100%;
    width: 100%;
    transform-origin: left;
    animation: toastProgressBarCountdown 5s linear forwards;
}

.toast-item:hover .toast-progress {
    animation-play-state: paused !important;
}

/* ==========================================================================
   ⚙️ SETTINGS PAGE STYLES (ArbCore Obsidian Theme)
   ========================================================================== */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.settings-card {
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.settings-card:hover {
    border-color: rgba(139, 92, 246, 0.2);
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 14px;
}

.settings-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.settings-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: -8px;
}

/* CRM Custom Toggle Switch */
.crm-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
}

.crm-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-toggle-label-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

.crm-toggle-label-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.crm-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

.crm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.crm-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
}

.crm-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #FFFFFF;
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.crm-switch input:checked + .crm-switch-slider {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
}

.crm-switch input:checked + .crm-switch-slider:before {
    transform: translateX(20px);
}

/* Sound Presets Grid */
.sound-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.sound-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
}

.sound-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.sound-card.active {
    background: rgba(139, 92, 246, 0.09);
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.15);
}

.sound-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sound-radio {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0 !important;
}

.sound-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-transform: none !important;
}

.sound-name {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.sound-tag-default {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.35);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.sound-desc {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.35;
}

.sound-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.sound-play-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.sound-play-btn.playing {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #FFFFFF;
}

/* Volume Slider */
.volume-slider-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 14px;
    border-radius: 12px;
}

.volume-slider-input {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.volume-slider-val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 42px;
    text-align: right;
}

/* Telegram Widgets */
.tg-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.tg-status-pill.linked {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #4ADE80;
}

.tg-status-pill.unlinked {
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #FF6B6B;
}

.tg-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(139, 92, 246, 0.35);
    border-radius: 10px;
}

.tg-code-text {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 800;
    color: #A5B4FC;
    letter-spacing: 1px;
}

.tg-event-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
}

.tg-event-item:hover {
    background: rgba(255, 255, 255, 0.035);
    color: #FFFFFF;
}

.tg-event-item input {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Password Toggle Eye Button */
.password-toggle-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 0.15s ease;
    z-index: 2;
}

.password-toggle-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn.active {
    color: var(--accent-primary);
}

/* ==========================================================================
   🍏 APPLE DESIGN: ACCESSIBILITY (PREFERS-REDUCED-MOTION)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    
    .modal-box, 
    .arb-datepicker-popup, 
    .notification-dropdown, 
    .toast-card,
    .bell-badge {
        animation: none !important;
        transform: none !important;
        transition: opacity 0.15s ease !important;
    }

    .clickable-row:hover,
    .kpi-card:hover,
    .btn-primary:hover,
    .user-settings-btn:hover svg {
        transform: none !important;
    }
}

/* ==========================================================================
   🧩 SEMANTIC UI REFACTORING COMPONENTS (UI REFACTORING)
   ========================================================================== */

/* 1. RPA Banner Component */
.rpa-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.rpa-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rpa-banner-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rpa-banner-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.rpa-banner-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rpa-banner-stats {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rpa-banner-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* 2. Asocks Badge Component */
.asocks-badge {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.asocks-badge--ok {
    border-color: rgba(52, 211, 153, 0.35);
}

.asocks-badge--danger {
    border-color: rgba(248, 113, 113, 0.40);
}

/* 3. Shoulder Badges & Pills */
.shoulder-badge {
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.3px;
}

.shoulder-badge--arm-a {
    color: var(--arm-a-color);
    background: var(--arm-a-bg);
    border: 1px solid var(--arm-a-border);
}

.shoulder-badge--arm-b {
    color: var(--arm-b-color);
    background: var(--arm-b-bg);
    border: 1px solid var(--arm-b-border);
}

/* 4. Filter Bar Component */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.filter-bar-group {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-bar-label,
label.filter-bar-label,
span.filter-bar-label {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-muted, #94A3B8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.filter-bar .custom-select-trigger,
.filter-bar select {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.filter-bar input[type="date"] {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 38px 0 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    width: 145px !important;
    min-width: 145px !important;
    box-sizing: border-box !important;
}



/* 5. Farm Bundles & Cards */
.farm-bundle-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-card);
    padding: 16px;
    transition: all 0.2s ease;
}

.farm-bundle-card:hover {
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(255, 255, 255, 0.035);
}

.farm-bundle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.farm-bundle-row:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   CUSTOM CHECKBOX & TILE SELECTORS (ARBITRAGE CRM DESIGN SYSTEM)
   ========================================================================== */
.arb-check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.arb-check-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    margin: 0;
}

.arb-check-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
}

.arb-check-card.checked {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.15);
}

.arb-check-label {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   UI COMPONENTS & STANDARDIZED SURFACES (UI-REFACTORING)
   ========================================================================== */

/* 1. Generator Flat Column & Toggles */
.generator-column-flat {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sub, 14px);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.generator-col-title {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
    min-height: 20px;
    line-height: 1.2;
}

.step-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(139, 92, 246, 0.22);
    border: 1px solid rgba(139, 92, 246, 0.45);
    color: #DDD6FE;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.flat-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 10px 14px;
    min-height: 52px;
    border-radius: 14px;
    margin: 0;
    box-sizing: border-box;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    user-select: none;
    -webkit-user-select: none;
}

.flat-toggle-row:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.12);
}

.flat-toggle-row:active {
    transform: scale(0.985);
}

.flat-toggle-row .row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.flat-toggle-row .row-icon-badge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    flex-shrink: 0;
}

.flat-toggle-row .row-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-word;
}

.flat-toggle-row input[type="checkbox"] {
    margin: 0 0 0 auto !important;
    flex-shrink: 0;
}

.payment-table th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 0 8px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 14px;
}

.payment-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Bot Card & Infrastructure Containers (Inventory, Settings, Infrastructure)
   ========================================================================== */
.bot-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: var(--space-block, 24px);
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.bot-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bot-card-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.bot-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.2px;
    margin: 0;
}

.bot-flat-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bot-section-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 20px 0;
    border: none;
}

.bot-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

/* 2. Bot Settings: Spacious User Journey Flow & Live Passport */
.bot-journey-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
    width: 100%;
    margin-bottom: 50px;
}

@media (max-width: 1120px) {
    .bot-journey-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.bot-journey-stream {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

/* Journey Card (Spacious & Clean) */
.journey-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.2s ease;
}

@media (max-width: 768px) {
    .journey-card {
        padding: 22px 20px;
        gap: 22px;
    }
}

.journey-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.journey-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.journey-card-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.journey-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    font-size: 13px;
    font-weight: 800;
    color: #DDD6FE;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    flex-shrink: 0;
}

.journey-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.2px;
    margin: 0;
}

.journey-subgroup {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.journey-subgroup-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

/* Grids with generous breathing room */
.journey-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

.journey-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .journey-grid-3, .journey-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .journey-grid-2, .journey-grid-3, .journey-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Clean, Spacious Range Control */
.bot-range-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bot-range-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bot-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bot-range-sep {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
    user-select: none;
}

/* Archetype Mini Cards (Spacious) */
.archetype-mini-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s ease;
}

.archetype-mini-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(255, 255, 255, 0.035);
}

.archetype-mini-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.archetype-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archetype-mini-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Feature Toggle Row (Airy & Flat) */
.journey-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.journey-toggle-row:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.1);
}

.journey-toggle-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Asset Checkboxes (Clean & Spacious) */
.journey-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.journey-asset-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.journey-asset-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(139, 92, 246, 0.3);
}

.journey-asset-btn.checked {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.15);
}

.journey-asset-text {
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.journey-asset-check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: transparent;
    transition: all 0.15s ease;
}

.journey-asset-btn.checked .journey-asset-check {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #FFFFFF;
}

/* Warmup Box & Textarea */
.warmup-suboptions-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: opacity 0.25s ease;
}

.warmup-suboptions-wrap.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.6);
}

.bot-sites-textarea {
    width: 100%;
    height: 120px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    color: #FFFFFF;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.bot-sites-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Right Sticky Sidebar: Passport */
.journey-passport-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.journey-passport-card {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%);
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 22px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.passport-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.passport-title {
    font-size: 14px;
    font-weight: 800;
    color: #DDD6FE;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.passport-metric-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.passport-metric-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.passport-metric-val {
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    font-family: var(--font-mono, monospace);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.passport-metric-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: var(--font-sans, sans-serif);
}

.passport-breakdown {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin-top: 6px;
}

.breakdown-seg { height: 100%; }
.breakdown-warmup  { background: #8B5CF6; }
.breakdown-reg     { background: #3B82F6; }
.breakdown-cashier { background: #F59E0B; }
.breakdown-trade   { background: #10B981; }

.passport-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 4px 0;
}


/* 9. Semantic Farm Type Pills */
.farm-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-capsule, 9999px);
    line-height: 1.2;
    transition: all 0.2s ease;
}

.farm-type-pill--split {
    background: rgba(245, 158, 11, 0.12);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.farm-type-pill--mono {
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.28);
}

.farm-type-pill--classic {
    background: rgba(139, 92, 246, 0.12);
    color: #C4B5FD;
    border: 1px solid rgba(139, 92, 246, 0.28);
}

/* 10. General Standard Surfaces & Avatars */
.panel-surface {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sub, 14px);
    padding: 20px 22px;
}

.user-avatar-lg {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--accent-primary);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.user-role-pill {
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.35);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ==========================================================================
   11. Interactive Email Template Constructor & Warehouse Badges
   ========================================================================== */

.template-constructor-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    transition: border-color var(--transition-base);
}

.template-presets-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.template-preset-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-capsule, 9999px);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-smooth);
    user-select: none;
}

.template-preset-btn:hover {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.35);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.template-preset-btn.active {
    background: rgba(139, 92, 246, 0.22);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.delimiter-segmented-picker {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-capsule, 9999px);
    padding: 3px;
    gap: 2px;
}

.delimiter-pill {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    min-width: 32px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-capsule, 9999px);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delimiter-pill:hover {
    color: #FFFFFF;
}

.delimiter-pill.active {
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.template-dropzone {
    min-height: 52px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(139, 92, 246, 0.35);
    border-radius: var(--radius-md, 10px);
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-smooth);
    margin-bottom: 12px;
}

/* ========================================================================= */
/* UNIFIED ZERO-NESTING IMPORT EDITOR                                        */
/* ========================================================================= */
.unified-import-editor {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-card, 14px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

/* 1. Верхний тулбар */
.editor-toolbar-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.015);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    scrollbar-width: none;
}
.editor-toolbar-top::-webkit-scrollbar {
    display: none;
}

.editor-preset-dropdown-wrap {
    display: flex;
    align-items: center;
}

.editor-preset-select {
    height: 28px;
    min-width: 140px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 0 8px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}
.editor-preset-select:hover, .editor-preset-select:focus {
    border-color: var(--accent, #8B5CF6);
    background: rgba(139, 92, 246, 0.15);
}
.editor-preset-select option {
    background: #18132A;
    color: #FFFFFF;
}

.editor-toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
}

.editor-toolbar-spacer {
    flex: 1;
}

/* Дропзона активного шаблона (пунктирный слот для плашек) */
.editor-dropzone-tray, .editor-dropzone, #template_dropzone {
    margin: 8px 12px 10px 12px;
    min-height: 48px;
    border: 1.5px dashed rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}
.editor-dropzone-tray.drag-active, .editor-dropzone.drag-active, #template_dropzone.drag-active {
    border-color: var(--accent, #8B5CF6);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.2);
}

.dropzone-empty-hint {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

/* Активные плашки шаблона */
.template-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 7px 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.template-chip:active {
    cursor: grabbing;
    transform: scale(0.97);
}
.template-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.template-chip.is-dragging {
    opacity: 0.35;
    transform: scale(0.95);
}
.template-chip.drag-over {
    border-left: 2px solid #38BDF8 !important;
    transform: translateX(3px);
}

/* Цвета плашек */
.template-chip.chip-email {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.45);
    color: #93C5FD;
}
.template-chip.chip-password {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.45);
    color: #DDD6FE;
}
.template-chip.chip-imap {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
    color: #FCD34D;
}
.template-chip.chip-recovery {
    background: rgba(52, 211, 153, 0.2);
    border-color: rgba(52, 211, 153, 0.45);
    color: #6EE7B7;
}
.template-chip.chip-2fa {
    background: rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.45);
    color: #F472B6;
}
.template-chip.chip-skip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: var(--text-muted);
}

.chip-remove-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    cursor: pointer;
    padding: 0 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color 0.15s ease;
}
.chip-remove-btn:hover {
    color: #F87171;
    background: rgba(239, 68, 68, 0.2);
}

.slot-delimiter-sep {
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    padding: 0 1px;
    user-select: none;
}

/* Банк доступных плашек (в той же строке) */
.editor-bank-inline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.template-chip.bank-chip {
    cursor: pointer;
}
.template-chip.bank-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.editor-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    transition: all 0.15s ease;
}
.editor-clear-btn:hover {
    color: #F87171;
    background: rgba(239, 68, 68, 0.12);
}

/* Разделители справа */
.editor-delimiter-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.editor-delim-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

/* 2. Компактная полоса Live-превью (шапка таблицы над текстом) */
.editor-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
}

.preview-bar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}
.preview-bar-title {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.preview-bar-cells {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.preview-bar-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 11px;
}
.preview-bar-cell-tag {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}
.preview-bar-cell-val {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-bar-cell-val.val-filled {
    color: #FFFFFF;
}
.preview-bar-cell-val.val-empty {
    color: var(--text-muted);
    font-style: italic;
}

.preview-empty-text {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}

.preview-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.preview-bar-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
}
.preview-bar-badge.badge-success { background: rgba(52, 211, 153, 0.15); color: #6EE7B7; }
.preview-bar-badge.badge-warning { background: rgba(245, 158, 11, 0.15); color: #FCD34D; }
.preview-bar-badge.badge-error { background: rgba(239, 68, 68, 0.15); color: #FCA5A5; }
.preview-bar-badge.badge-muted { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }

.preview-bar-count {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* 3. Текстовое поле ввода (в 2 раза выше по дефолту) */
.editor-textarea, #emails_input_textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 180px !important;
    height: 180px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    color: #FFFFFF !important;
    padding: 12px 14px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
    outline: none !important;
    transition: opacity 0.25s ease, background-color 0.25s ease !important;
}
.editor-textarea:focus, #emails_input_textarea:focus {
    background: rgba(255, 255, 255, 0.025) !important;
}
.editor-textarea:disabled, #emails_input_textarea:disabled {
    opacity: 0.35 !important;
    background: rgba(0, 0, 0, 0.25) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
    filter: brightness(0.65) !important;
}

/* 4. Нижняя панель */
.editor-footer {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    justify-content: flex-end;
}
.editor-submit-btn {
    width: 100%;
    height: 42px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-input, 10px);
    transition: all 0.2s ease;
}

/* Бейджи типов авторизации для таблицы склада */
.badge-auth {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-capsule, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.badge-auth-imap {
    background: rgba(139, 92, 246, 0.14);
    color: #C4B5FD;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-auth-web {
    background: rgba(59, 130, 246, 0.14);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-auth-recovery {
    background: rgba(52, 211, 153, 0.14);
    color: #6EE7B7;
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.badge-auth-2fa {
    background: rgba(236, 72, 153, 0.14);
    color: #F472B6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.badge-auth-cookies {
    background: rgba(245, 158, 11, 0.14);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   💜 ГЛОБАЛЬНАЯ СИСТЕМА ПРЕМИАЛЬНЫХ ПОДСКАЗОК (CUSTOM TOOLTIPS)
   ========================================================================== */
.crm-custom-tooltip {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px) scale(0.97);
    transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
                visibility 140ms;
    max-width: 380px;
    background: #231D3C;
    background: rgba(35, 29, 60, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    padding: 8px 13px;
    box-shadow: 0 10px 24px -2px rgba(0, 0, 0, 0.75), 0 3px 8px -1px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-align: left;
    white-space: pre-line;
    word-break: normal;
    overflow-wrap: break-word;
    will-change: transform, opacity;
}

.crm-custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.crm-custom-tooltip.placement-bottom {
    transform: translateY(-4px) scale(0.97);
}

.crm-custom-tooltip.placement-bottom.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Стрелочка тултипа (Caret arrow) */
.crm-custom-tooltip .crm-tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #231D3C;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transform: rotate(45deg);
    pointer-events: none;
}

.crm-custom-tooltip.placement-top .crm-tooltip-arrow {
    bottom: -5px;
    border-top: none;
    border-left: none;
}

.crm-custom-tooltip.placement-bottom .crm-tooltip-arrow {
    top: -5px;
    border-bottom: none;
    border-right: none;
}

/* ℹ️ Интерактивные иконки подсказок для настроек */
.math-hint-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94A3B8);
    cursor: help;
    transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    opacity: 0.7;
    vertical-align: middle;
}
.math-hint-trigger:hover {
    color: var(--accent, #C6FF3B);
    opacity: 1;
    transform: scale(1.15);
}

/* ℹ️ Кнопка пояснения к полям настроек (из дизайн-системы) */
.journey-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    padding: 0;
    margin: 0;
    margin-left: 5px;
    vertical-align: middle;
    transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
    outline: none;
    flex-shrink: 0;
    line-height: 1;
}

.journey-info-btn svg {
    display: block;
    width: 13px;
    height: 13px;
    pointer-events: none;
}

.journey-info-btn:hover,
.journey-info-btn.active {
    color: #C4B5FD;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.7));
    transform: scale(1.2);
}

.journey-info-btn:active {
    transform: scale(0.92);
}

/* Лейбл с прижатой иконкой подсказки */
.bot-label-with-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Полупрозрачная подложка для всплывающих окон и Apple Bottom Sheet */
.field-expl-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.field-expl-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Всплывающее окно объяснения поля (Popover) */
.field-expl-popover {
    position: absolute;
    z-index: 999999;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: #1B162E;
    background: rgba(27, 22, 46, 0.98);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-top: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(139, 92, 246, 0.15);
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: none;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-sizing: border-box;
}

.field-expl-popover.visible {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.field-expl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.field-expl-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-expl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.2);
    color: #DDD6FE;
    font-size: 13px;
    flex-shrink: 0;
}

.field-expl-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin: 0;
}

.field-expl-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
    padding: 0;
}

.field-expl-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.field-expl-body {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field-expl-desc {
    white-space: pre-line;
    margin: 0;
}

.field-expl-tip {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #DDD6FE;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.field-expl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.field-expl-esc-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
}

.field-expl-ok-btn {
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 8px;
    background: var(--accent-primary, #8B5CF6);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.field-expl-ok-btn:hover {
    background: var(--accent-hover, #7C3AED);
    transform: translateY(-1px);
}

/* Caret стрелочка */
.field-expl-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #1B162E;
    border: 1px solid rgba(139, 92, 246, 0.35);
    transform: rotate(45deg);
    pointer-events: none;
}

.field-expl-popover.placement-bottom .field-expl-arrow {
    top: -6px;
    border-bottom: none;
    border-right: none;
}

.field-expl-popover.placement-top .field-expl-arrow {
    bottom: -6px;
    border-top: none;
    border-left: none;
}

/* ==========================================================================
   📱 MOBILE & IPHONE 14 PRO MAX (430x932) FULL RESPONSIVE ADAPTATION
   Zero loss of context or settings — 100% feature parity with Desktop
   ========================================================================== */

body.mobile-sidebar-open {
    overflow: hidden !important;
}

.mob-add-form-toggle-btn,
.mob-row-summary-pill {
    display: none;
}

@media (max-width: 1024px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    /* 1. Fixed Glass Topbar & Mobile Menu Trigger */
    .app-main {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .app-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 99990 !important;
        background: rgba(14, 11, 28, 0.76) !important;
        backdrop-filter: blur(28px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px 14px !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .topbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    .page-title {
        font-size: 15px !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-right {
        gap: 8px !important;
        flex-shrink: 0;
    }

    .topbar-badge {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    /* 2. CONTAINER INVERSION (iOS / Revolut Architecture — Zero Nested Boxes):
       Giant parent wrapper cards (.card:has(.math-grid), .card:has(.payment-grid), .bot-card:has(.payment-panel))
       become transparent layout groups on the dark canvas, while each logical sub-section
       (.math-col, .payment-panel) becomes its own standalone top-level glass card! */
    .app-content {
        padding: calc(64px + env(safe-area-inset-top, 0px)) 0 calc(36px + env(safe-area-inset-bottom, 0px)) 0 !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .grid {
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .card,
    .bot-card,
    .journey-card {
        background: var(--glass-bg) !important;
        backdrop-filter: var(--glass-blur) !important;
        -webkit-backdrop-filter: var(--glass-blur) !important;
        border-top: 1px solid var(--glass-border) !important;
        border-bottom: 1px solid var(--glass-border) !important;
        border-left: none !important;
        border-right: none !important;
        padding: 16px 14px !important;
        border-radius: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Mobile Farm Cards (Apple Inset Row Design) */
    .farm-entry-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        gap: 10px !important;
    }

    .farm-entry-card.active {
        background: rgba(139, 92, 246, 0.06) !important;
        border-color: rgba(139, 92, 246, 0.4) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    }

    .farm-entry-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .farm-entry-title-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .farm-data-table {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .farm-data-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(255, 255, 255, 0.028) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 10px !important;
        padding: 7px 10px !important;
        min-height: 34px !important;
        gap: 10px !important;
    }

    .farm-data-label {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .farm-data-value {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: right !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    #tab_btn_farms,
    #tab_btn_affiliates {
        flex: 1 1 auto !important;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Sub-cards (.math-col, .payment-panel, .generator-column-flat) on mobile:
       Apple Inset Grouped card architecture — each logical block is an isolated, elegant surface */
    .generator-column-flat,
    .payment-panel,
    .math-col {
        background: rgba(255, 255, 255, 0.032) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 16px !important;
        padding: 16px 14px !important;
        margin: 0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Exception: when payment-panel contains a collapsed add form (e.g. create_farm), keep wrapper invisible */
    .payment-panel:has(form.mob-collapsible-add-form:not(.mob-form-open)) {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .generator-col-title,
    .payment-panel-title,
    .math-col-title {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .payment-grid > div,
    .math-grid > div {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 14px !important;
    }

    .table-wrap,
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 3. KPI Cards (2-per-row on 430px iPhone 14 Pro Max) */
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .kpi-card,
    .stat-card,
    .overview-card {
        padding: 13px 12px !important;
        min-width: 0 !important;
    }

    .kpi-value,
    .stat-value {
        font-size: 18px !important;
        word-break: break-word;
    }

    /* 4. Multi-Column Grids -> Clean Single Column Stack with 14px card gap */
    .math-grid,
    .payment-grid,
    .bundle-arms-grid,
    .settings-grid,
    .sound-presets-grid,
    .arb-check-grid,
    .journey-grid-2,
    .journey-grid-3,
    .journey-grid-4,
    .modal-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Bot Settings: Borderless tonal tiles for behavioral archetypes (2x2 grid) & passport metrics */
    .archetype-grid,
    .journey-card .journey-grid-4 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .archetype-mini-card {
        background: rgba(255, 255, 255, 0.042) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 10px 11px !important;
        box-shadow: none !important;
    }

    .passport-metric-card {
        background: rgba(255, 255, 255, 0.038) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        box-shadow: none !important;
    }

    .journey-card input[type="number"],
    .journey-card input[type="text"],
    .bot-range-row input[type="number"] {
        text-align: left !important;
        padding-left: 12px !important;
    }

    /* Inline Grid & Flex Overrides across all PHP templates */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"],
    [style*="minmax(360px"],
    [style*="minmax(320px"],
    [style*="minmax(300px"],
    [style*="minmax(280px"],
    [style*="minmax(260px"],
    [style*="180px"],
    [style*="140px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    div[style*="width: 140px"]:not(.input-unit-wrap),
    div[style*="width:140px"]:not(.input-unit-wrap),
    div[style*="width: 180px"]:not(.input-unit-wrap),
    div[style*="width:180px"]:not(.input-unit-wrap),
    div[style*="min-width: 260px"]:not(.input-unit-wrap),
    div[style*="min-width:260px"]:not(.input-unit-wrap),
    div[style*="min-width: 240px"]:not(.input-unit-wrap),
    div[style*="min-width:240px"]:not(.input-unit-wrap),
    div[style*="min-width: 200px"]:not(.input-unit-wrap),
    div[style*="min-width:200px"]:not(.input-unit-wrap),
    div[style*="min-width: 180px"]:not(.input-unit-wrap),
    div[style*="min-width:180px"]:not(.input-unit-wrap),
    input[style*="min-width:240px"],
    input[style*="min-width: 240px"],
    input[style*="min-width:180px"],
    .wh-search-wrap,
    .custom-select-wrapper {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .custom-select-trigger {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Stack Create Farm Arms (Плечо А / Плечо Б) vertically */
    div:has(select[name="affiliate_a_id"]),
    div:has(> div > select[name="fiat_id"]) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Compact Card Titles & Section Headings */
    .card-title,
    h3.card-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    /* Fix .card-title with inline spans (e.g. Device Distribution 73% Mobile / 27% PC) */
    h3.card-title:has(span#title_mobile_pct),
    .card-title:has(span[id*="pct"]) {
        display: block !important;
        line-height: 1.4 !important;
    }

    /* Hide verbose subtitle descriptions across the app on mobile */
    .rpa-banner-subtitle,
    .rpa-banner-sub,
    .payment-panel-desc,
    .journey-card-desc,
    .card-subtitle,
    .section-subtitle,
    .desc-text {
        display: none !important;
    }

    /* Compact RPA Banner on mobile */
    .card:has(.rpa-banner) {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }

    .rpa-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .rpa-banner-content {
        gap: 10px !important;
        align-items: center !important;
    }

    .rpa-banner-icon {
        font-size: 22px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 9px !important;
    }

    .rpa-banner-title {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .rpa-banner-title span {
        font-size: 13.5px !important;
    }

    .rpa-banner-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .rpa-banner-stats {
        font-size: 11px !important;
    }

    .asocks-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* Fiat vs Crypto Ratio Top Bar in admin_dashboard.php */
    div:has(> div > input#ratio_fiat_input) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    div:has(> div > input#ratio_fiat_input) > div {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Section Header Badge inside each standalone card (.math-col-title, .payment-panel-title) */
    .math-col-title,
    .payment-panel-title {
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* 5. BORDERLESS TONAL TILES FOR ALL TABLE ITEMS (Zero borders, soft elevation islands) */
    table,
    .math-table,
    .payment-table,
    table[style*="min-width"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    table thead {
        display: none !important;
    }

    table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Clean rows inside each frosted sub-card: separated by airy vertical spacing + subtle hairline divider (zero dark tint, zero nested boxes) */
    table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px 10px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
        border-radius: 0 !important;
        padding: 12px 2px !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: end !important;
    }

    table tbody tr:first-child {
        padding-top: 6px !important;
    }

    table tbody tr:last-child {
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }

    /* 2-column grid for wide 6+ column data tables (staff, monitoring, inventory emails) */
    table[data-col-count="6"] tbody tr,
    table[data-col-count="7"] tbody tr,
    table[data-col-count="8"] tbody tr,
    table[data-col-count="9"] tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        padding: 14px 2px !important;
    }

    /* 3-column grid for 5-column payment tables (Method Name on top + МИН. ЛИМИТ | МИН % | МАКС % on one symmetric 3-column row!) */
    table.payment-table[data-col-count="5"] tbody tr {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: end !important;
    }

    /* 2-column grid for 3-column or 4-column tables with corner delete (Exchanges, Domain rules: МИН % | МАКС %) */
    table[data-col-count="3"] tbody tr,
    table[data-col-count="4"]:has(tr.has-corner-delete) tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    table tbody tr.mobile-empty-row {
        display: block !important;
        text-align: center !important;
    }

    table tbody tr td {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Override inline style="width:96px; margin:0 auto;" and style="width:125px;" on .input-unit-wrap
       so the input box starts at the exact same left pixel (x:0) as its label above! */
    table tbody tr td .input-unit-wrap,
    .math-group .input-unit-wrap:not([style*="max-width"]) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .math-group .input-unit-wrap[style*="max-width"],
    .math-group .math-range-row > .input-unit-wrap:only-child {
        width: 140px !important;
        max-width: 140px !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .custom-select-wrapper:not(.open) .custom-select-menu {
        display: none !important;
    }

    /* Row header (first column: Category / Method / Exchange / Domain / Employee) */
    table tbody tr td:first-child {
        grid-column: 1 / -1 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        padding-bottom: 2px !important;
        margin-bottom: 1px !important;
        border-bottom: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    table tbody tr.has-corner-delete:not(.mob-expandable-row) td:first-child {
        padding-right: 34px !important;
    }

    /* iOS / Revolut Single-Line Summary Rows (.mob-expandable-row):
       Collapsed by default showing only Name + Summary Pill (e.g. "5000 ₽ · 35–45% ▾").
       Inputs and Delete button expand smoothly ONLY when the user taps the row! */
    table tbody tr.mob-expandable-row > td:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 10px !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    table tbody tr.mob-expandable-row:not(.mob-row-expanded) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 2px !important;
        min-height: 44px !important;
        cursor: pointer !important;
    }

    table tbody tr.mob-expandable-row:not(.mob-row-expanded) > td:not(:first-child) {
        display: none !important;
    }

    .mob-row-summary-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: #E2E8F0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        transition: all 0.18s ease !important;
    }

    .mob-row-chevron {
        font-size: 10px !important;
        color: rgba(255, 255, 255, 0.45) !important;
        transition: transform 0.2s ease !important;
    }

    /* Expanded state when tapped */
    table tbody tr.mob-expandable-row.mob-row-expanded {
        background: rgba(255, 255, 255, 0.035) !important;
        border-radius: 12px !important;
        padding: 12px 10px !important;
        margin: 4px 0 !important;
        border-bottom: 1px solid rgba(139, 92, 246, 0.22) !important;
    }

    table tbody tr.mob-expandable-row.mob-row-expanded > td:first-child {
        padding-bottom: 8px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
    }

    table tbody tr.mob-expandable-row.mob-row-expanded .mob-row-summary-pill {
        background: rgba(139, 92, 246, 0.16) !important;
        border-color: rgba(139, 92, 246, 0.40) !important;
        color: #DDD6FE !important;
    }

    table tbody tr.mob-expandable-row.mob-row-expanded .mob-row-chevron {
        transform: rotate(180deg) !important;
        color: #C084FC !important;
    }

    /* Column header label above each input/metric — strictly left-aligned with the input below */
    table tbody tr td[data-label]:not(:first-child):not(.mobile-corner-delete)::before {
        content: attr(data-label);
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding-left: 2px !important;
        font-size: 9.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.50);
        text-transform: uppercase;
        letter-spacing: 0.35px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Corner delete button (✕ / 🗑️) for non-expandable rows */
    table tbody tr:not(.mob-expandable-row) td.mobile-corner-delete {
        position: absolute !important;
        top: 10px !important;
        right: 2px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        z-index: 2 !important;
    }

    table tbody tr:not(.mob-expandable-row) td.mobile-corner-delete button,
    table tbody tr:not(.mob-expandable-row) td.mobile-corner-delete .btn-red {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    /* Delete button inside an expanded .mob-expandable-row sits cleanly as a bottom action button */
    table tbody tr.mob-expandable-row.mob-row-expanded > td.mobile-corner-delete {
        position: static !important;
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        padding-top: 4px !important;
        width: 100% !important;
    }

    table tbody tr.mob-expandable-row.mob-row-expanded > td.mobile-corner-delete form {
        width: 100% !important;
        margin: 0 !important;
    }

    table tbody tr.mob-expandable-row.mob-row-expanded > td.mobile-corner-delete button,
    table tbody tr.mob-expandable-row.mob-row-expanded > td.mobile-corner-delete .btn-red {
        width: 100% !important;
        height: 32px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
    }

    table tbody tr.mob-expandable-row.mob-row-expanded > td.mobile-corner-delete button::after,
    table tbody tr.mob-expandable-row.mob-row-expanded > td.mobile-corner-delete .btn-red::after {
        content: 'Удалить';
        font-size: 11.5px;
        font-weight: 600;
    }

    /* 100% Native Light Frosted Glass Inputs (matching Generator block: rgba(255, 255, 255, 0.04)) */
    table tbody tr td input[type="number"]:not(.input-unit-wrap input),
    table tbody tr td input[type="text"]:not(.input-unit-wrap input),
    table tbody tr td select,
    .math-table input:not(.input-unit-wrap input),
    .math-group > input[type="number"],
    .math-group > input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 38px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        text-align: left !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* Full-width bottom action row for multi-column data tables (staff.php, monitoring.php) */
    table[data-col-count="7"] tbody tr td:last-child:not(.mobile-corner-delete),
    table[data-col-count="8"] tbody tr td:last-child:not(.mobile-corner-delete),
    table[data-col-count="9"] tbody tr td:last-child:not(.mobile-corner-delete) {
        grid-column: 1 / -1 !important;
        padding-top: 6px !important;
    }

    /* 5b. STAFF FINANCIAL CARDS (staff.php 10-column table) */
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 10px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-radius: 14px !important;
        padding: 12px 12px 10px 12px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
    }

    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr:active {
        background: rgba(139, 92, 246, 0.08) !important;
        border-color: rgba(139, 92, 246, 0.25) !important;
    }

    /* Col 1 (Employee) & Col 2 (Role Badge) form the header row */
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(1) {
        grid-column: 1 / 2 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        border: none !important;
        padding: 0 !important;
    }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(1)::before,
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td[data-label]:nth-child(1)::before {
        display: none !important;
        content: none !important;
    }

    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(2) {
        grid-column: 2 / 3 !important;
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        border: none !important;
        padding: 0 !important;
    }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(2)::before,
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td[data-label]:nth-child(2)::before {
        display: none !important;
        content: none !important;
    }

    /* Col 9 (Balance $) & Col 10 (Balance ₽) as prominent balance chips */
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(9),
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(10) {
        order: 2 !important;
        background: rgba(139, 92, 246, 0.09) !important;
        border: 1px solid rgba(139, 92, 246, 0.22) !important;
        border-radius: 10px !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(9) {
        grid-column: 1 / 2 !important;
    }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(10) {
        grid-column: 2 / 3 !important;
    }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(9)::before,
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(10)::before {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #DDD6FE !important;
    }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(9) b,
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(10) b {
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }

    /* Cols 3-8: 6 metrics in a clean 2-column grid */
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(3) { grid-column: 1 / 2 !important; order: 3 !important; }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(4) { grid-column: 2 / 3 !important; order: 3 !important; }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(5) { grid-column: 1 / 2 !important; order: 4 !important; }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(6) { grid-column: 2 / 3 !important; order: 4 !important; }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(7) { grid-column: 1 / 2 !important; order: 5 !important; }
    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(8) { grid-column: 2 / 3 !important; order: 5 !important; }

    :is(table[data-col-count="10"], table.staff-financial-table) tbody tr td:nth-child(n+3):nth-child(-n+8) {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 8px !important;
        padding: 6px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    /* 5c. STAFF MEMBERS LIST CARDS (staff.php 4-column current staff table) */
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 8px 10px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(1) {
        grid-column: 1 / 2 !important;
        order: 1 !important;
        border: none !important;
        padding: 0 !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(1)::before {
        display: none !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(3) {
        grid-column: 2 / 3 !important;
        order: 1 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        border: none !important;
        padding: 0 !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(3)::before {
        display: none !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(2) {
        grid-column: 1 / -1 !important;
        order: 2 !important;
        border: none !important;
        padding: 0 !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(2)::before {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.45) !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4) {
        grid-column: 1 / -1 !important;
        order: 3 !important;
        padding-top: 4px !important;
        border: none !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4)::before {
        display: none !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4) > div {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4) button,
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4) form {
        flex: 1 1 50% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4) .btn-secondary,
    :is(table:has(form input[name="action"][value="delete_farmer"]), table.staff-members-table) tbody tr td:nth-child(4) .btn-red {
        width: 100% !important;
        height: 36px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    /* 5d. STAFF FORMS OVERHAUL (staff.php) */
    form:has(input[name="action"][value="issue_employee_funding"]) {
        display: grid !important;
        grid-template-columns: 110px 1fr !important;
        gap: 10px !important;
        align-items: end !important;
        width: 100% !important;
    }
    form:has(input[name="action"][value="issue_employee_funding"]) > div:has(select[name="target_user_id"]) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
    form:has(input[name="action"][value="issue_employee_funding"]) > div:has(select[name="currency"]) {
        grid-column: 1 / 2 !important;
        width: 100% !important;
        max-width: none !important;
    }
    form:has(input[name="action"][value="issue_employee_funding"]) > div:has(input[name="amount"]) {
        grid-column: 2 / 3 !important;
        width: 100% !important;
    }
    form:has(input[name="action"][value="issue_employee_funding"]) > div:has(input[name="note"]) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
    form:has(input[name="action"][value="issue_employee_funding"]) > div:has(button[type="submit"]) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
    form:has(input[name="action"][value="issue_employee_funding"]) button[type="submit"] {
        width: 100% !important;
        height: 42px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    form:has(input[name="action"][value="create_farmer"]) {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    form:has(input[name="action"][value="create_farmer"]) > div {
        width: 100% !important;
        min-width: 0 !important;
    }
    form:has(input[name="action"][value="create_farmer"]) button[type="submit"] {
        width: 100% !important;
        height: 42px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* 6. COLLAPSIBLE "+ ДОБАВИТЬ" DRAWERS (Hidden by default on mobile until tapped) */
    .mob-add-form-toggle-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 40px !important;
        padding: 0 14px !important;
        margin-top: 6px !important;
        border-radius: 11px !important;
        background: rgba(139, 92, 246, 0.12) !important;
        border: 1px dashed rgba(139, 92, 246, 0.38) !important;
        color: #DDD6FE !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.18s ease !important;
        box-sizing: border-box !important;
    }

    .mob-add-form-toggle-btn.active {
        background: rgba(239, 68, 68, 0.10) !important;
        border-color: rgba(239, 68, 68, 0.35) !important;
        color: #FCA5A5 !important;
    }

    .mob-collapsible-add-form:not(.mob-form-open) {
        display: none !important;
    }

    .payment-panel:has(form input[name="action"][value="create_farm"]) > .payment-panel-title,
    .payment-panel:has(form input[name="action"][value="create_affiliate"]) > .payment-panel-title {
        display: none !important;
    }

    form.mob-collapsible-add-form.mob-form-open:has(input[name="action"][value="create_farm"]),
    form.mob-collapsible-add-form.mob-form-open:has(input[name="action"][value="create_affiliate"]) {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 10px !important;
        padding: 14px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-sizing: border-box !important;
    }

    /* When opened: 3-number forms (add_fiat, add_crypto_net) use a 3-column grid;
       2-number forms (add_exchange, add_domain) use a 2-column grid in native light glass */
    form.mob-collapsible-add-form.mob-form-open:has(input[name="action"][value="add_fiat"]),
    form.mob-collapsible-add-form.mob-form-open:has(input[name="action"][value="add_crypto_net"]) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-sizing: border-box !important;
    }

    form.mob-collapsible-add-form.mob-form-open:has(input[name="action"][value="add_exchange"]),
    form:has(input[name="action"][value="add_geo"]),
    form:has(input[name="action"][value="add_device"]) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-sizing: border-box !important;
    }

    form:has(input[name="action"][value^="add_"]) input[type="text"],
    form:has(input[name="action"][value^="add_"]) select,
    form:has(input[name="action"][value^="add_"]) .custom-select-wrapper {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 40px !important;
    }

    form:has(input[name="action"][value^="add_"]) input[type="number"] {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        text-align: left !important;
    }

    form:has(input[name="action"][value^="add_"]) button[type="submit"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 42px !important;
        justify-content: center !important;
        font-size: 13px !important;
    }

    /* Save as New Template bars (both <div> and <form> containers in admin_dashboard.php) */
    :is(div, form):has(> input[name="template_name"]),
    :is(div, form):has(> button[value="save_template"]),
    form#save_payment_template_form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    :is(div, form):has(> input[name="template_name"]) > input[name="template_name"],
    form#save_payment_template_form > input[name="template_name"] {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        height: 40px !important;
    }

    :is(div, form):has(> input[name="template_name"]) > button,
    form#save_payment_template_form > button {
        width: 100% !important;
        height: 42px !important;
        justify-content: center !important;
    }

    /* Monitoring.php Filter Bar (Zero overflow on 430px) */
    .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .filter-bar-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filter-bar-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .filter-bar > .filter-bar-item {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .filter-bar > .filter-bar-item > .filter-bar-label {
        grid-column: 1 / -1 !important;
    }

    .filter-bar-item .arb-datepicker-wrapper,
    .filter-bar-item input[type="date"],
    .filter-bar-item select,
    .filter-bar-item .custom-select-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Primary Save Buttons at bottom of settings cards */
    button[value="save_math"],
    button[value="save_payment_settings"],
    button[value="save_devices"],
    button[value="save_search_engines"] {
        width: 100% !important;
        height: 44px !important;
        justify-content: center !important;
    }

    /* 7. INVENTORY.PHP UNIFIED IMPORT EDITOR TOOLBAR & FILTER BARS */
    .editor-toolbar-top {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        height: auto !important;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .editor-toolbar-divider,
    .editor-toolbar-spacer {
        display: none !important;
    }

    .editor-preset-dropdown-wrap {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .editor-preset-select {
        width: 100% !important;
        height: 38px !important;
    }

    .editor-bank-inline {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .editor-clear-btn {
        height: 34px !important;
        padding: 0 12px !important;
    }

    .editor-delimiter-wrap {
        margin-left: auto !important;
    }

    .wh-top-bar,
    .wh-filter-bar,
    .wh-select-group,
    .wh-top-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .wh-select-group > select,
    .wh-select-group > .custom-select-wrapper {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 140px !important;
    }

    .wh-btn-imap {
        flex: 1 1 auto !important;
        justify-content: center !important;
        height: 38px !important;
    }

    /* 8. SEGMENTED CONTROLS & PERIOD FILTERS (my_tasks.php, staff.php, monitoring.php) */
    .segmented-control,
    .status-segmented-control {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 4px !important;
    }

    .segmented-control .seg-btn,
    .status-segmented-control .seg-btn {
        padding: 8px 4px !important;
        font-size: 11.5px !important;
        justify-content: center !important;
        text-align: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .wh-segmented-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 4px !important;
    }

    .wh-segmented-tabs .wh-tab {
        flex: 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Mobile Date Inputs (Reset iOS WebKit native appearance & dimension inflation) */
    input[type="date"],
    input[type="datetime-local"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 32px 0 12px !important;
        font-size: 12px !important;
        line-height: 38px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    input[type="date"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value {
        text-align: left !important;
        min-height: 0 !important;
        line-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 30px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        cursor: pointer !important;
    }

    /* All Period Filter Bars (analytics, monitoring, staff) -> 2-Column Compact Grid */
    .filter-bar-item:has(input[name="date_from"]),
    .filter-bar-item:has(input[name="monitor_start"]),
    .filter-bar-item:has(input[type="date"] ~ input[type="date"]) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 6px 0 12px 0 !important;
        box-sizing: border-box !important;
    }

    .filter-bar-item:has(input[name="date_from"]) .filter-bar-label,
    .filter-bar-item:has(input[name="monitor_start"]) .filter-bar-label,
    .filter-bar-item:has(input[type="date"] ~ input[type="date"]) .filter-bar-label {
        grid-column: 1 / -1 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin: 0 !important;
    }

    .filter-bar-item:has(input[name="date_from"]) input[type="date"],
    .filter-bar-item:has(input[name="monitor_start"]) input[type="date"],
    .filter-bar-item:has(input[type="date"] ~ input[type="date"]) input[type="date"] {
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        font-size: 11.5px !important;
        box-sizing: border-box !important;
    }

    /* Hide the lonely hyphen in period filters on mobile */
    .filter-bar-item:has(input[name="date_from"]) span:not(.filter-bar-label),
    .filter-bar-item:has(input[name="monitor_start"]) span:not(.filter-bar-label),
    .filter-bar-item:has(input[type="date"] ~ input[type="date"]) span:not(.filter-bar-label) {
        display: none !important;
    }

    /* Action buttons inside date filter bars */
    .filter-bar-item:has(input[type="date"]) button,
    .filter-bar-item:has(input[type="date"]) a.btn-red {
        height: 36px !important;
        width: 100% !important;
        font-size: 11.5px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* If only submit button exists, make it span full width */
    .filter-bar-item:has(input[type="date"]):not(:has(a.btn-red)) button[type="submit"] {
        grid-column: 1 / -1 !important;
    }

    /* Single date forms (my_tasks.php header) */
    form:has(> input[name="date"]) {
        width: 100% !important;
        margin: 6px 0 !important;
    }
    form:has(> input[name="date"]) input[type="date"] {
        width: 100% !important;
    }

    /* 9. Toolbars, Filter Bars, Geo-Region Cards, Bot Range Rows & Task Cards */
    .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .filter-bar-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .filter-bar-group > * {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .filter-bar-item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .filter-bar-item .filter-bar-label {
        width: 100% !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: #94a3b8 !important;
        margin: 0 !important;
    }

    .filter-bar-item select,
    .filter-bar-item .c-select-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    .c-select-menu {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .c-select-option {
        white-space: normal !important;
        word-break: break-word !important;
    }

    .filter-bar-item .arb-date-input-wrap {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Geo-Mixer Region Accordion -> Borderless Tonal Tile */
    .geo-region-card {
        background: rgba(255, 255, 255, 0.042) !important;
        border: none !important;
        border-radius: 13px !important;
        position: relative !important;
    }

    .geo-region-card > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 42px 12px 14px !important;
    }

    .geo-region-card form:has(input[value="delete_geo_rule"]) {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        margin: 0 !important;
    }

    .geo-region-card form:has(input[value="delete_geo_rule"]) button.btn-red {
        width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    .wh-toolbar,
    .wh-tabs-row,
    .wh-batch-bar,
    .farm-selector-bar,
    .journey-card-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .bot-range-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .bot-range-row .input-unit-wrap {
        min-width: 92px !important;
    }

    .platform-task-card {
        padding: 14px 12px !important;
        min-width: 0 !important;
    }

    .clickable-copy-row {
        flex-wrap: wrap;
        gap: 6px;
        word-break: break-all;
    }

    /* 10. SYSTEMIC iOS / ANDROID BOTTOM SHEET ARCHITECTURE FOR ALL MODALS */
    .modal-backdrop,
    .modal-overlay,
    .bundle-modal-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .modal-box,
    .modal-box.bundle-modal-box,
    div[id$="_modal"] > .modal-box {
        width: 100% !important;
        max-width: 100vw !important;
        height: 90vh !important;
        height: 90dvh !important;
        max-height: 90dvh !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
        border-bottom: none !important;
        background: rgba(18, 14, 36, 0.88) !important;
        backdrop-filter: blur(36px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
        box-shadow: 0 -16px 54px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
        animation: sheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    @keyframes sheetSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0.6;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Swipe handle-bar at top of sheet */
    .modal-box::before {
        content: '';
        display: block;
        width: 40px;
        height: 4.5px;
        background: rgba(255, 255, 255, 0.28);
        border-radius: 3px;
        margin: 8px auto 4px auto;
        flex-shrink: 0;
    }

    /* Unified Responsive Modal Header */
    .modal-header,
    .bundle-modal-header {
        position: relative !important;
        padding: 8px 14px 12px 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Close button always pinned to top-right of sheet */
    .modal-close-btn {
        position: absolute !important;
        top: 8px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #FFFFFF !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    /* Left header content (Icon + Title) */
    .modal-header > div:first-child,
    .bundle-modal-header > div:first-child {
        padding-right: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Right header content (Refresh buttons, etc.) moves below title in a neat toolbar row */
    .modal-header > div:last-child:not(:first-child),
    .bundle-modal-header > div:last-child:not(:first-child) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .modal-header h3,
    .bundle-modal-header h3 {
        font-size: 15px !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    .bundle-modal-header [style*="width: 44px"],
    .bundle-modal-header [style*="width:44px"] {
        width: 34px !important;
        height: 34px !important;
        font-size: 17px !important;
        border-radius: 9px !important;
        flex-shrink: 0 !important;
    }

    .bundle-modal-header [style*="font-size: 12px"] {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    #accounts_registry_modal [style*="background: rgba(0,0,0,0.25)"],
    #accounts_registry_modal [style*="background:rgba(0,0,0,0.25)"] {
        padding: 10px 14px !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Horizontal scroll tabs inside sheets (KYC tabs, Bundle tabs, etc.) */
    .kyc-tabs,
    .wh-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .kyc-tabs::-webkit-scrollbar,
    .wh-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .kyc-tab,
    .wh-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 11.5px !important;
        padding: 6px 12px !important;
    }

    /* Modal Body scroll */
    .modal-body,
    .modal-box > div:not(.modal-header):not(.bundle-modal-header):not(::before) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .notification-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        max-height: 75dvh !important;
        z-index: 99999 !important;
    }

    .toast-container,
    #arb_toast_container {
        left: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .custom-select-menu {
        max-width: calc(100vw - 28px) !important;
    }

    .login-body {
        padding: 16px !important;
    }

    .login-card {
        padding: 28px 20px !important;
    }

    /* 11. 🍏 APPLE BOTTOM SHEET (iOS Native Sheet for Field Info & Explanations) */
    #field_info_popover.field-expl-popover,
    .field-expl-popover.bottom-sheet {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 26px 26px 0 0 !important;
        background: rgba(20, 15, 42, 0.84) !important;
        backdrop-filter: blur(32px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 -16px 54px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.28), inset 0 -1px 2px rgba(0, 0, 0, 0.5) !important;
        padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 16px)) 20px !important;
        z-index: 99999 !important;
        transform: translateY(calc(100% + var(--sheet-swipe-y, 0px))) !important;
        transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        touch-action: pan-y !important;
        user-select: none !important;
    }

    #field_info_popover.visible,
    .field-expl-popover.bottom-sheet.visible {
        transform: translateY(var(--sheet-swipe-y, 0px)) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #field_info_popover.swiping,
    .field-expl-popover.bottom-sheet.swiping {
        transition: none !important;
    }

    /* Apple Drag Handle Pill */
    #field_info_popover::before,
    .field-expl-popover.bottom-sheet::before {
        content: '' !important;
        display: block !important;
        width: 40px !important;
        height: 5px !important;
        border-radius: 9999px !important;
        background: rgba(255, 255, 255, 0.32) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
        margin: 0 auto 14px auto !important;
        cursor: grab !important;
    }

    #field_info_popover .field-expl-arrow,
    .field-expl-popover.bottom-sheet .field-expl-arrow {
        display: none !important;
    }

    #field_info_popover .field-expl-header {
        padding-bottom: 12px !important;
    }

    #field_info_popover .field-expl-title {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #field_info_popover .field-expl-close {
        display: none !important;
    }

    #field_info_popover .field-expl-body {
        font-size: 13px !important;
        line-height: 1.55 !important;
        max-height: 50dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #field_info_popover .field-expl-tip {
        font-size: 12.5px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
    }

    #field_info_popover .field-expl-footer {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        padding-top: 14px !important;
    }

    #field_info_popover .field-expl-esc-hint {
        display: none !important;
    }

    #field_info_popover .field-expl-ok-btn {
        width: 100% !important;
        height: 44px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(180deg, rgba(168, 85, 247, 0.92) 0%, rgba(139, 92, 246, 0.88) 100%) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.40) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 4px 18px rgba(139, 92, 246, 0.40) !important;
        transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #field_info_popover .field-expl-ok-btn:active {
        transform: scale(0.97) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(139, 92, 246, 0.25) !important;
    }

    /* 12. 👆 ERGONOMIC TOUCH TARGETS & LOCK BUTTON */
    .input-lock-overlay-btn,
    .btn-lock-icon {
        position: static !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin-left: auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255, 255, 255, 0.45) !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
    }

    .input-lock-overlay-btn:active,
    .btn-lock-icon:active {
        transform: scale(0.92) !important;
        background: rgba(139, 92, 246, 0.28) !important;
    }

    .input-lock-overlay-btn.unlocked,
    .btn-lock-icon.unlocked {
        background: rgba(139, 92, 246, 0.22) !important;
        border-color: rgba(139, 92, 246, 0.5) !important;
        color: #DDD6FE !important;
    }

    .input-lock-overlay-btn svg,
    .btn-lock-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Mobile responsive input unit wrap & lock button */
    .input-unit-wrap:has(.input-lock-overlay-btn) .unit,
    .input-unit-wrap:has(.btn-lock-icon) .unit {
        position: static !important;
        margin-left: 2px !important;
        margin-right: 6px !important;
    }

    .input-unit-wrap:has(.input-lock-overlay-btn):has(.unit) input,
    .input-unit-wrap:has(.btn-lock-icon):has(.unit) input {
        padding: 0 1px 0 2px !important;
        text-align: left !important;
    }

    .input-unit-wrap:has(.input-lock-overlay-btn):not(:has(.unit)) input,
    .input-unit-wrap:has(.btn-lock-icon):not(:has(.unit)) input {
        padding: 0 2px !important;
        text-align: left !important;
    }

    /* Refined 20px Circular Info Icon Button with 38px expanded hit area */
    .journey-info-btn {
        position: relative !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        border-radius: 9999px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: rgba(255, 255, 255, 0.42) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 5px !important;
        vertical-align: middle !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
    }

    /* Hit target expander: makes tapping effortless without visual bloat (38x38px touch zone) */
    .journey-info-btn::before {
        content: '' !important;
        position: absolute !important;
        top: -9px !important;
        bottom: -9px !important;
        left: -9px !important;
        right: -9px !important;
        background: transparent !important;
    }

    .journey-info-btn:active,
    .journey-info-btn.active {
        transform: scale(0.90) !important;
        background: rgba(139, 92, 246, 0.22) !important;
        border-color: rgba(139, 92, 246, 0.45) !important;
        color: #DDD6FE !important;
    }

    .journey-info-btn svg {
        width: 11px !important;
        height: 11px !important;
    }

    /* iOS Native Dimensions for Toggle Switch (50x30px with 24px thumb) */
    .crm-switch {
        width: 50px !important;
        height: 30px !important;
        min-width: 50px !important;
    }

    .crm-switch-slider {
        border-radius: 30px !important;
    }

    .crm-switch-slider:before {
        height: 24px !important;
        width: 24px !important;
        left: 3px !important;
        bottom: 2px !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
    }

    .crm-switch input:checked + .crm-switch-slider:before {
        transform: translateX(20px) !important;
    }

    /* iOS Checkboxes (22px with larger checkmark) */
    input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        border-radius: 7px !important;
    }

    input[type="checkbox"]:checked::after {
        width: 5px !important;
        height: 9px !important;
        border-width: 0 2.2px 2.2px 0 !important;
        transform: rotate(45deg) translate(-1px, -1px) !important;
    }

    /* 13. 🌊 APPLE SPRING PRESS INTERACTIONS & SPECULAR GLASS REFLECTIONS */
    button:not(.input-lock-overlay-btn):not(.journey-info-btn):active,
    .btn-lime:active,
    .btn-primary:active,
    .btn-secondary:active,
    .btn-red:active,
    .seg-btn:active,
    .wh-tab:active,
    .journey-asset-btn:active,
    .mob-add-form-toggle-btn:active,
    .topbar-badge:active {
        transform: scale(0.96) !important;
        transition: transform 120ms cubic-bezier(0.2, 0.9, 0.4, 1) !important;
    }

    /* Apple Specular Highlight on Card Tops */
    .card,
    .bot-card,
    .journey-card {
        background: rgba(22, 18, 44, 0.76) !important;
        backdrop-filter: blur(28px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.24) !important;
        box-shadow: none !important;
    }

    /* Mobile Compact Device & Search Engine Controls */
    .card-header-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
        gap: 6px !important;
    }

    .device-pair-grid {
        gap: 8px !important;
    }

    .device-pair-grid .input-unit-wrap {
        height: 38px !important;
        padding: 0 4px 0 8px !important;
    }

    .device-pair-grid .input-unit-wrap input {
        padding: 0 2px !important;
        font-size: 14px !important;
        text-align: right !important;
    }

    .device-pair-grid .input-unit-wrap .unit {
        position: static !important;
        font-size: 11.5px !important;
        margin-left: 3px !important;
        margin-right: 6px !important;
    }

    .device-pair-grid .input-lock-overlay-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 7px !important;
    }

    .device-pair-grid .input-lock-overlay-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .se-grid-row {
        gap: 6px !important;
    }

    .se-mini-col {
        padding: 10px 4px !important;
        gap: 6px !important;
        border-radius: 10px !important;
    }

    .se-mini-header {
        font-size: 11.5px !important;
        gap: 4px !important;
    }

    .se-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        border-radius: 5px !important;
    }

    .se-mini-col .input-unit-wrap {
        max-width: 100% !important;
        height: 36px !important;
        padding: 0 3px 0 6px !important;
    }

    .se-mini-col .input-unit-wrap input {
        padding: 0 2px !important;
        font-size: 13px !important;
        text-align: right !important;
    }

    .se-mini-col .input-unit-wrap .unit {
        position: static !important;
        font-size: 11px !important;
        margin-left: 2px !important;
        margin-right: 4px !important;
    }

    .se-mini-col .input-lock-overlay-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        border-radius: 6px !important;
    }

    .se-mini-col .input-lock-overlay-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .se-subtext {
        font-size: 9.5px !important;
    }

    .se-presets-bar {
        gap: 6px !important;
        padding: 8px 10px !important;
        margin-bottom: 14px !important;
    }

    .se-presets-bar button {
        flex: 1 1 calc(50% - 6px) !important;
        font-size: 10.5px !important;
        height: 28px !important;
        padding: 0 6px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 370px) {
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   🚀 SYSTEM VERSION BADGE & CHANGELOG MODAL (SEMVER ARCHITECTURE)
   ========================================================================== */
.sidebar-version-wrap {
    margin-top: 10px;
    padding-top: 8px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-version-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: var(--text-muted, #94A3B8);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    line-height: 1;
}

.sidebar-version-btn:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    color: #DDD6FE;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
}

.sidebar-version-btn:active {
    transform: scale(0.97);
}

.version-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
    flex-shrink: 0;
}

.version-tag {
    letter-spacing: 0.02em;
}

.version-env-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

/* Changelog Backdrop */
.changelog-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 15, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100050 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.changelog-modal-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Changelog Modal Dialog */
.changelog-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 92%;
    max-width: 580px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: #121422;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 100051 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.changelog-modal.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.changelog-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.changelog-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.changelog-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.changelog-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.changelog-subtitle {
    font-size: 11.5px;
    color: var(--text-muted, #94A3B8);
    margin-top: 2px;
}

.changelog-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-muted, #94A3B8);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.changelog-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #F87171;
}

.changelog-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.changelog-release-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px;
}

.changelog-release-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.changelog-ver-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.changelog-ver-badge {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 800;
    color: #C084FC;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 6px;
    padding: 2px 7px;
}

.changelog-type-pill {
    font-size: 10.5px;
    font-weight: 700;
    color: #34D399;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 5px;
    padding: 2px 6px;
}

.changelog-date {
    font-size: 11.5px;
    color: var(--text-muted, #94A3B8);
    margin-left: auto;
}

.changelog-release-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #E2E8F0;
}

.changelog-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.changelog-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #CBD5E1;
}

.changelog-tag {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-top: 1px;
}

.changelog-tag.tag-feature {
    background: rgba(139, 92, 246, 0.18);
    color: #C084FC;
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.changelog-tag.tag-improvement {
    background: rgba(59, 130, 246, 0.18);
    color: #60A5FA;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.changelog-tag.tag-fix {
    background: rgba(16, 185, 129, 0.18);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.changelog-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.changelog-footer-info {
    font-size: 12px;
    color: var(--text-muted, #94A3B8);
    display: flex;
    align-items: center;
}

.changelog-ok-btn {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 9px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transition: all 0.18s ease;
}

.changelog-ok-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45);
}

.changelog-ok-btn:active {
    transform: scale(0.97);
}

/* Mobile Apple Bottom Sheet adaptation */
@media (max-width: 1024px) {
    .changelog-modal {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        border-bottom: none;
    }

    .changelog-modal.visible {
        transform: translateY(0);
    }
}

/* Guarantee clean styling for locked and unlocked inputs in all states */
.input-unit-wrap input,
.input-unit-wrap input:focus,
.input-unit-wrap input:focus-visible,
.input-unit-wrap input.unlocked-field,
.input-unit-wrap input.unlocked-field:focus,
.input-unit-wrap input.unlocked-field:focus-visible,
.input-unit-wrap input.locked-field {
    outline: none !important;
    outline-offset: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}