/* Final dark workspace skin. Loaded after legacy CSS to neutralize the failed light redesign. */

body.visual-workspace-v4 {
    --workspace-bg: #070b12;
    --workspace-bg-soft: #0b111c;
    --workspace-panel: rgba(11, 18, 30, 0.88);
    --workspace-panel-solid: #101827;
    --workspace-panel-strong: rgba(15, 24, 39, 0.96);
    --workspace-ink: #f6fbff;
    --workspace-muted: #9aa8b7;
    --workspace-dim: #718094;
    --workspace-line: rgba(148, 163, 184, 0.18);
    --workspace-line-strong: rgba(148, 163, 184, 0.32);
    --workspace-accent: var(--neon-cyan, #00d9ff);
    --workspace-accent-soft: color-mix(in srgb, var(--workspace-accent) 18%, transparent);
    --workspace-radius: 8px;
    --topnav-height: 108px;
    --bg-darkest: var(--workspace-bg);
    --bg-dark: var(--workspace-bg-soft);
    --bg-card: var(--workspace-panel);
    --bg-elevated: var(--workspace-panel-solid);
    --glass-bg: var(--workspace-panel);
    --glass-border: var(--workspace-line);
    --card-bg: var(--workspace-panel);
    --hover-bg: rgba(255, 255, 255, 0.055);
    --border: var(--workspace-line);
    --text-primary: var(--workspace-ink);
    --text-secondary: #d6e0ea;
    --text-muted: var(--workspace-muted);
    --text-dim: var(--workspace-dim);
    min-height: 100vh !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--workspace-accent) 13%, transparent) 0, transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(168, 85, 247, 0.12) 0, transparent 30%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        var(--workspace-bg) !important;
    background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
    color: var(--workspace-ink) !important;
}

body.visual-workspace-v4::before,
body.visual-workspace-v4::after {
    content: none !important;
    display: none !important;
}

body.visual-workspace-v4.visual-topnav-v3 .app-layout {
    display: block !important;
    min-height: 100vh !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    display: grid !important;
    grid-template-columns: minmax(176px, auto) minmax(0, 1fr) !important;
    grid-template-rows: 62px 46px !important;
    width: 100% !important;
    height: var(--topnav-height) !important;
    min-height: var(--topnav-height) !important;
    max-height: var(--topnav-height) !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background:
        linear-gradient(180deg, rgba(9, 15, 25, 0.98), rgba(6, 11, 19, 0.96)) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--workspace-line-strong) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 9999 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar.collapsed,
body.visual-workspace-v4.visual-topnav-v3 .sidebar.mobile-open {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .mobile-menu-btn,
body.visual-workspace-v4.visual-topnav-v3 .mobile-overlay {
    display: none !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar::before {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--workspace-accent), var(--brand-secondary, #a855f7), transparent) !important;
    opacity: 0.92 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 62px !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 20px 10px 16px !important;
    border-right: 1px solid var(--workspace-line) !important;
    border-bottom: 1px solid var(--workspace-line) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar-header h1 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    color: color-mix(in srgb, var(--workspace-accent) 66%, #ffffff) !important;
    font-size: 1.24rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--workspace-accent) 22%, transparent) !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar-header h1::before {
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 11px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: var(--gradient-cyber, linear-gradient(135deg, var(--workspace-accent), #a855f7)) !important;
    box-shadow: var(--glow-cyan, 0 0 18px rgba(0, 217, 255, 0.32)) !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 62px !important;
    padding: 10px 14px 10px 18px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--workspace-line) !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar-nav::-webkit-scrollbar {
    display: none !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item,
body.visual-workspace-v4.visual-topnav-v3 .nav-item-parent,
body.visual-workspace-v4.visual-topnav-v3 .nav-subitem {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E");
    position: relative !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #b8c5d4 !important;
    font-size: 0.75rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item::before,
body.visual-workspace-v4.visual-topnav-v3 .nav-item-parent::before,
body.visual-workspace-v4.visual-topnav-v3 .nav-subitem::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    background: currentColor !important;
    opacity: 0.74 !important;
    -webkit-mask: var(--nav-icon) center / contain no-repeat !important;
    mask: var(--nav-icon) center / contain no-repeat !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="users"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="merchants"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="traders"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="providers"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="teams"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="payment-details"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="wallet"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="stats"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="statistics"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="finances"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="accounting"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9M13 17v-5M8 17v-3'/%3E%3C/svg%3E");
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="appeal"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="notifications"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="logs"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="exchange"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="currency"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="swap"],
body.visual-workspace-v4.visual-topnav-v3 .nav-item[href*="settlement"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h12'/%3E%3Cpath d='M13 3l4 4-4 4'/%3E%3Cpath d='M20 17H8'/%3E%3Cpath d='M11 13l-4 4 4 4'/%3E%3C/svg%3E");
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item:hover,
body.visual-workspace-v4.visual-topnav-v3 .nav-item-parent:hover,
body.visual-workspace-v4.visual-topnav-v3 .nav-subitem:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.052) !important;
    border-color: rgba(255, 255, 255, 0.095) !important;
    transform: none !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item.active,
body.visual-workspace-v4.visual-topnav-v3 .nav-item-dropdown.active .nav-item-parent,
body.visual-workspace-v4.visual-topnav-v3 .nav-subitem.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--workspace-accent) 15%, rgba(255, 255, 255, 0.055)), rgba(255, 255, 255, 0.035)) !important;
    border-color: color-mix(in srgb, var(--workspace-accent) 28%, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: inset 0 -2px 0 var(--workspace-accent), 0 0 14px color-mix(in srgb, var(--workspace-accent) 12%, transparent) !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-item.active::before,
body.visual-workspace-v4.visual-topnav-v3 .nav-item-dropdown.active .nav-item-parent::before,
body.visual-workspace-v4.visual-topnav-v3 .nav-subitem.active::before {
    color: var(--workspace-accent) !important;
    opacity: 1 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .dropdown-arrow {
    margin-left: 2px !important;
    opacity: 0.74 !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-submenu {
    top: 56px !important;
    min-width: 230px !important;
    padding: 7px !important;
    border-radius: 10px !important;
    background: rgba(10, 16, 27, 0.98) !important;
    border: 1px solid var(--workspace-line-strong) !important;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(18px) !important;
}

body.visual-workspace-v4.visual-topnav-v3 .nav-subitem {
    width: 100% !important;
    justify-content: flex-start !important;
    color: #cad6e4 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .sidebar-footer {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 6px 18px !important;
    background: rgba(4, 8, 15, 0.64) !important;
    color: #dce7f3 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.045) !important;
    overflow: hidden !important;
}

body.visual-workspace-v4.visual-topnav-v3 .exchange-rates,
body.visual-workspace-v4.visual-topnav-v3 .trader-panel {
    min-width: 0 !important;
}

body.visual-workspace-v4.visual-topnav-v3 .rate-item,
body.visual-workspace-v4.visual-topnav-v3 .trader-balance,
body.visual-workspace-v4.visual-topnav-v3 .switch-row {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #f3f8ff !important;
    text-decoration: none !important;
}

body.visual-workspace-v4.visual-topnav-v3 .main-content,
body.visual-workspace-v4.visual-topnav-v3 .sidebar.collapsed ~ .main-content {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-top: var(--topnav-height) !important;
    background: transparent !important;
}

body.visual-workspace-v4.visual-topnav-v3 .top-bar {
    min-height: 50px !important;
    width: min(1500px, calc(100% - 28px)) !important;
    margin: 12px auto 0 !important;
    padding: 0 12px !important;
    border-radius: var(--workspace-radius) !important;
    background: rgba(10, 17, 28, 0.72) !important;
    border: 1px solid var(--workspace-line) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(14px) !important;
}

body.visual-workspace-v4 .user-info {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.visual-workspace-v4 .user-menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
}

body.visual-workspace-v4 .user-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: min(54vw, 620px) !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--workspace-line) !important;
}

body.visual-workspace-v4 .user-email {
    max-width: 34vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #f4f9ff !important;
    font-weight: 750 !important;
}

body.visual-workspace-v4 .user-role,
body.visual-workspace-v4 .role-badge {
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--workspace-accent) 18%, rgba(255, 255, 255, 0.06)) !important;
    color: #ffffff !important;
    border: 1px solid color-mix(in srgb, var(--workspace-accent) 34%, transparent) !important;
}

body.visual-workspace-v4 .content {
    width: min(1500px, calc(100% - 28px)) !important;
    margin: 0 auto !important;
    padding: 14px 0 30px !important;
}

body.visual-workspace-v4 .page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 14px !important;
    padding: 18px 20px !important;
    border-radius: var(--workspace-radius) !important;
    background: linear-gradient(135deg, rgba(17, 26, 43, 0.9), rgba(8, 13, 22, 0.84)) !important;
    color: #ffffff !important;
    border: 1px solid var(--workspace-line) !important;
    box-shadow: inset 4px 0 0 var(--workspace-accent), 0 16px 34px rgba(0, 0, 0, 0.22) !important;
}

body.visual-workspace-v4 .page-header h1,
body.visual-workspace-v4 .page-header h2,
body.visual-workspace-v4 .page-header h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.24rem, 1.6vw, 1.72rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.visual-workspace-v4 .page-header h1::after {
    content: none !important;
}

body.visual-workspace-v4 .page-header p,
body.visual-workspace-v4 .page-header small,
body.visual-workspace-v4 .page-subtitle {
    color: #aebccc !important;
}

body.visual-workspace-v4 .content-area,
body.visual-workspace-v4 .users-table-page,
body.visual-workspace-v4 .orders-table-page,
body.visual-workspace-v4 .merchant-page-shell,
body.visual-workspace-v4 .form-card,
body.visual-workspace-v4 .settings-card,
body.visual-workspace-v4 .api-card,
body.visual-workspace-v4 .endpoints-card,
body.visual-workspace-v4 .code-card,
body.visual-workspace-v4 .webhook-card,
body.visual-workspace-v4 .token-card,
body.visual-workspace-v4 .info-card,
body.visual-workspace-v4 .merchant-profile-card,
body.visual-workspace-v4 .apk-card,
body.visual-workspace-v4 .currency-card,
body.visual-workspace-v4 .modal-content,
body.visual-workspace-v4 .modal-body,
body.visual-workspace-v4 .custom-modal-content,
body.visual-workspace-v4 .card {
    border-radius: var(--workspace-radius) !important;
    background: var(--workspace-panel) !important;
    border: 1px solid var(--workspace-line) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    color: var(--workspace-ink) !important;
}

body.visual-workspace-v4 .content-area,
body.visual-workspace-v4 .merchant-page-shell {
    padding: 16px !important;
}

body.visual-workspace-v4 .stat-card,
body.visual-workspace-v4 .stats-grid > div,
body.visual-workspace-v4 .balance-card,
body.visual-workspace-v4 .action-card,
body.visual-workspace-v4 .mobile-card {
    position: relative !important;
    min-height: 96px !important;
    padding: 15px !important;
    border-radius: var(--workspace-radius) !important;
    background: rgba(13, 21, 34, 0.86) !important;
    border: 1px solid var(--workspace-line) !important;
    border-top: 2px solid color-mix(in srgb, var(--workspace-accent) 48%, transparent) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden !important;
}

body.visual-workspace-v4 .stat-card:hover,
body.visual-workspace-v4 .balance-card:hover,
body.visual-workspace-v4 .action-card:hover {
    transform: none !important;
    border-color: var(--workspace-line-strong) !important;
}

body.visual-workspace-v4 .stat-card::before,
body.visual-workspace-v4 .stat-card::after,
body.visual-workspace-v4 .content-area::before,
body.visual-workspace-v4 .content-area::after,
body.visual-workspace-v4 .card::before,
body.visual-workspace-v4 .card::after {
    content: none !important;
    display: none !important;
}

body.visual-workspace-v4 .stat-card .stat-value,
body.visual-workspace-v4 .balance-card .balance-value,
body.visual-workspace-v4 .stat-number {
    color: #ffffff !important;
    font-size: clamp(1.35rem, 2vw, 2rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.visual-workspace-v4 .stat-card .stat-label,
body.visual-workspace-v4 .balance-card .balance-label,
body.visual-workspace-v4 .stat-label {
    color: var(--workspace-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body.visual-workspace-v4 .stat-icon {
    width: auto !important;
    min-width: 38px !important;
    height: 30px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 9px !important;
    background: color-mix(in srgb, var(--workspace-accent) 17%, rgba(255, 255, 255, 0.055)) !important;
    color: #ffffff !important;
    border: 1px solid color-mix(in srgb, var(--workspace-accent) 26%, transparent) !important;
    box-shadow: none !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

body.visual-workspace-v4 .filters-bar,
body.visual-workspace-v4 .filters-bar-top,
body.visual-workspace-v4 .users-table-page .filters-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: var(--workspace-radius) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--workspace-line) !important;
    box-shadow: none !important;
}

body.visual-workspace-v4 input,
body.visual-workspace-v4 select,
body.visual-workspace-v4 textarea,
body.visual-workspace-v4 .search-input,
body.visual-workspace-v4 .filter-input,
body.visual-workspace-v4 .filter-select,
body.visual-workspace-v4 .date-input,
body.visual-workspace-v4 .setting-input,
body.visual-workspace-v4 .form-group input,
body.visual-workspace-v4 .form-group select,
body.visual-workspace-v4 .form-group textarea {
    min-height: 36px !important;
    border-radius: 7px !important;
    border: 1px solid var(--workspace-line-strong) !important;
    background: rgba(3, 8, 15, 0.72) !important;
    color: #f5f9ff !important;
    box-shadow: none !important;
}

body.visual-workspace-v4 input::placeholder,
body.visual-workspace-v4 textarea::placeholder {
    color: rgba(203, 213, 225, 0.48) !important;
}

body.visual-workspace-v4 input:focus,
body.visual-workspace-v4 select:focus,
body.visual-workspace-v4 textarea:focus,
body.visual-workspace-v4 .search-input:focus,
body.visual-workspace-v4 .filter-select:focus,
body.visual-workspace-v4 .date-input:focus {
    border-color: color-mix(in srgb, var(--workspace-accent) 62%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 15%, transparent) !important;
    outline: none !important;
}

body.visual-workspace-v4 .input-with-button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: center !important;
}

body.visual-workspace-v4 .table-container,
body.visual-workspace-v4 .data-table-container,
body.visual-workspace-v4 .users-table-page .table-container {
    border-radius: var(--workspace-radius) !important;
    background: rgba(9, 15, 25, 0.86) !important;
    border: 1px solid var(--workspace-line) !important;
    border-top: 2px solid color-mix(in srgb, var(--workspace-accent) 42%, transparent) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18) !important;
    overflow: auto !important;
}

body.visual-workspace-v4 .data-table,
body.visual-workspace-v4 table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    color: #eaf1f8 !important;
}

body.visual-workspace-v4 .data-table thead th,
body.visual-workspace-v4 table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 11px 12px !important;
    background: rgba(14, 23, 37, 0.98) !important;
    color: #b8c6d6 !important;
    border-bottom: 1px solid var(--workspace-line-strong) !important;
    font-size: 0.69rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body.visual-workspace-v4 .data-table tbody tr,
body.visual-workspace-v4 table tbody tr {
    background: rgba(255, 255, 255, 0.018) !important;
}

body.visual-workspace-v4 .data-table tbody tr:nth-child(even),
body.visual-workspace-v4 table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.032) !important;
}

body.visual-workspace-v4 .data-table tbody tr:hover,
body.visual-workspace-v4 table tbody tr:hover {
    background: rgba(255, 255, 255, 0.065) !important;
}

body.visual-workspace-v4 .data-table tbody td,
body.visual-workspace-v4 table tbody td {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13) !important;
    color: #dde7f2 !important;
}

body.visual-workspace-v4 .create-btn,
body.visual-workspace-v4 .btn-primary,
body.visual-workspace-v4 .filter-btn,
body.visual-workspace-v4 .sync-btn,
body.visual-workspace-v4 .settings-btn,
body.visual-workspace-v4 .docs-btn,
body.visual-workspace-v4 .export-btn,
body.visual-workspace-v4 .filter-toggle-btn,
body.visual-workspace-v4 .columns-toggle-btn,
body.visual-workspace-v4 .page-btn,
body.visual-workspace-v4 .lang-btn,
body.visual-workspace-v4 .logout-btn,
body.visual-workspace-v4 .action-btn,
body.visual-workspace-v4 .callback-btn,
body.visual-workspace-v4 .bulk-btn,
body.visual-workspace-v4 .copy-btn,
body.visual-workspace-v4 .toggle-pass {
    min-height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid var(--workspace-line-strong) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #f4f9ff !important;
    box-shadow: none !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.visual-workspace-v4 .create-btn,
body.visual-workspace-v4 .btn-primary,
body.visual-workspace-v4 button[type="submit"]:not(.logout-btn) {
    background: var(--gradient-cyber, linear-gradient(135deg, var(--workspace-accent), #a855f7)) !important;
    color: #041016 !important;
    border-color: color-mix(in srgb, var(--workspace-accent) 55%, transparent) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--workspace-accent) 17%, transparent) !important;
}

body.visual-workspace-v4 .create-btn:hover,
body.visual-workspace-v4 .action-btn:hover,
body.visual-workspace-v4 .filter-btn:hover,
body.visual-workspace-v4 .logout-btn:hover,
body.visual-workspace-v4 .lang-btn:hover {
    transform: none !important;
    border-color: color-mix(in srgb, var(--workspace-accent) 38%, transparent) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

body.visual-workspace-v4 .logout-btn,
body.visual-workspace-v4 .action-btn.danger,
body.visual-workspace-v4 .action-btn.delete,
body.visual-workspace-v4 .action-btn.block,
body.visual-workspace-v4 button.danger,
body.visual-workspace-v4 button.delete,
body.visual-workspace-v4 button.block {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.34) !important;
}

body.visual-workspace-v4 .action-btn.success,
body.visual-workspace-v4 .action-btn.confirm,
body.visual-workspace-v4 button.success,
body.visual-workspace-v4 button.confirm {
    background: rgba(34, 197, 94, 0.13) !important;
    color: #bbf7d0 !important;
    border-color: rgba(74, 222, 128, 0.32) !important;
}

body.visual-workspace-v4 .action-btn.appeal,
body.visual-workspace-v4 button.appeal {
    background: rgba(168, 85, 247, 0.13) !important;
    color: #e9d5ff !important;
    border-color: rgba(196, 181, 253, 0.3) !important;
}

body.visual-workspace-v4 .status-badge,
body.visual-workspace-v4 .badge,
body.visual-workspace-v4 .lang-chip {
    border-radius: 999px !important;
    border: 1px solid var(--workspace-line) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #dce7f3 !important;
    box-shadow: none !important;
}

body.visual-workspace-v4 .status-badge.active,
body.visual-workspace-v4 .status-badge.approved,
body.visual-workspace-v4 .status-badge.status-success,
body.visual-workspace-v4 .status-badge.status-paid,
body.visual-workspace-v4 .status-badge.status-approved {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #bbf7d0 !important;
    border-color: rgba(74, 222, 128, 0.34) !important;
}

body.visual-workspace-v4 .status-badge.pending,
body.visual-workspace-v4 .status-badge.warning,
body.visual-workspace-v4 .status-badge.status-pending,
body.visual-workspace-v4 .status-badge.status-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.34) !important;
}

body.visual-workspace-v4 .status-badge.blocked,
body.visual-workspace-v4 .status-badge.cancelled,
body.visual-workspace-v4 .status-badge.inactive,
body.visual-workspace-v4 .status-badge.rejected,
body.visual-workspace-v4 .status-badge.deleted,
body.visual-workspace-v4 .status-badge.status-error,
body.visual-workspace-v4 .status-badge.status-danger,
body.visual-workspace-v4 .status-badge.status-cancelled,
body.visual-workspace-v4 .status-badge.status-rejected {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.34) !important;
}

body.visual-workspace-v4 .modal,
body.visual-workspace-v4 .modal-overlay,
body.visual-workspace-v4 .custom-modal {
    background: rgba(2, 6, 12, 0.78) !important;
}

body.visual-workspace-v4 .modal-header,
body.visual-workspace-v4 .custom-modal-header {
    background: rgba(8, 13, 22, 0.96) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--workspace-line) !important;
}

body.visual-workspace-v4 .custom-modal-title,
body.visual-workspace-v4 .custom-modal-body,
body.visual-workspace-v4 .custom-modal-footer {
    color: #e7eef7 !important;
    border-color: var(--workspace-line) !important;
}

body.visual-workspace-v4 .custom-modal-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--workspace-accent) 20%, rgba(255, 255, 255, 0.06)) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
}

body.visual-workspace-v4 .fullscreen-header {
    background: rgba(10, 17, 28, 0.92) !important;
    border-bottom: 1px solid var(--workspace-line-strong) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

body.visual-workspace-v4 .fullscreen-header .header-title,
body.visual-workspace-v4 .fullscreen-header .user-info strong {
    color: #ffffff !important;
}

body.visual-workspace-v4 .fullscreen-header .user-info {
    color: var(--workspace-muted) !important;
}

body.visual-workspace-v4 .fullscreen-header .back-button {
    border-radius: 8px !important;
    background: var(--gradient-cyber, linear-gradient(135deg, var(--workspace-accent), #a855f7)) !important;
    border-color: color-mix(in srgb, var(--workspace-accent) 42%, transparent) !important;
    color: #041016 !important;
}

html.performance-lite body.visual-workspace-v4,
html.performance-lite body.visual-workspace-v4.visual-topnav-v3 .sidebar,
html.performance-lite body.visual-workspace-v4.visual-topnav-v3 .top-bar {
    backdrop-filter: none !important;
}

@media (max-width: 980px) {
    body.visual-workspace-v4 {
        --topnav-height: 134px;
    }

    body.visual-workspace-v4.visual-topnav-v3 .sidebar {
        grid-template-columns: 1fr !important;
        grid-template-rows: 50px 42px 42px !important;
    }

    body.visual-workspace-v4.visual-topnav-v3 .sidebar-header {
        grid-column: 1 !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 8px 14px !important;
        border-right: 0 !important;
    }

    body.visual-workspace-v4.visual-topnav-v3 .sidebar-nav {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: 42px !important;
        padding: 5px 9px !important;
    }

    body.visual-workspace-v4.visual-topnav-v3 .sidebar-footer {
        grid-column: 1 !important;
        grid-row: 3 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 5px 10px !important;
    }

    body.visual-workspace-v4.visual-topnav-v3 .nav-item,
    body.visual-workspace-v4.visual-topnav-v3 .nav-item-parent,
    body.visual-workspace-v4.visual-topnav-v3 .nav-subitem {
        height: 31px !important;
        min-height: 31px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }

    body.visual-workspace-v4 .content,
    body.visual-workspace-v4.visual-topnav-v3 .top-bar {
        width: calc(100% - 16px) !important;
    }

    body.visual-workspace-v4 .top-bar,
    body.visual-workspace-v4 .user-info,
    body.visual-workspace-v4 .user-menu {
        flex-wrap: wrap !important;
    }

    body.visual-workspace-v4 .page-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

@media (max-width: 560px) {
    body.visual-workspace-v4 {
        --topnav-height: 138px;
    }

    body.visual-workspace-v4 .user-email {
        display: none !important;
    }

    body.visual-workspace-v4.visual-topnav-v3 .sidebar-header h1 {
        font-size: 1rem !important;
    }

    body.visual-workspace-v4 .content-area,
    body.visual-workspace-v4 .merchant-page-shell {
        padding: 12px !important;
    }
}