/* =========================================================
   JARVIS AI DIRECTORY — MASTER LUXURY GLASS STYLESHEET
   Orange / Amber High-Converting Brand Identity
   Dual Theme Architecture: Obsidian Slate (Dark) + Pearl (Light)
========================================================= */

/* Reset & Foundation */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: hidden;
}

[x-cloak] {
    display: none !important;
}

/* =========================================================
   THEME VARIABLES: ORANGE / AMBER SOVEREIGN PALETTE
========================================================= */
:root, :root[data-theme="dark"] {
    /* Primary Warm Orange Brand Core */
    --primary: #ff6b35;
    --primary-hover: color-mix(in srgb, var(--orange) 88%, #fbbf24);
    --primary-glow: rgba(var(--orange-rgb), 0.28);
    --orange: #ff6b35;
    --orange-rgb: 255, 107, 53;
    --orange-hover: color-mix(in srgb, var(--orange) 88%, #fbbf24);
    --orange-glow: rgba(var(--orange-rgb), 0.28);
    --amber: #fbbf24;
    --amber-glow: rgba(251, 191, 36, 0.20);

    /* Backward-compatibility alias for previous teal rules */
    --teal: #ff6b35;
    --teal2: color-mix(in srgb, var(--orange) 78%, #000000);
    --teal-glow: rgba(var(--orange-rgb), 0.22);

    /* Obsidian Slate Dark Background */
    --bg: #06090d;
    --bg-body-radial:
        radial-gradient(ellipse 1000px 600px at 50% -50px, rgba(var(--orange-rgb), 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 900px 650px at 92% 35%, rgba(249, 115, 22, 0.12) 0%, transparent 52%),
        radial-gradient(ellipse 800px 550px at 8% 65%, rgba(251, 191, 36, 0.09) 0%, transparent 48%),
        radial-gradient(ellipse 1000px 600px at 50% 92%, rgba(var(--orange-rgb), 0.14) 0%, transparent 55%),
        #06090d;

    /* Liquid Glass Obsidian Surfaces */
    --liquid-bg: linear-gradient(165deg, rgba(22, 28, 38, 0.85) 0%, rgba(12, 16, 22, 0.94) 100%);
    --liquid-bg-subtle: rgba(18, 24, 34, 0.88);
    --liquid-border: 1px solid rgba(255, 255, 255, 0.10);
    --liquid-border-soft: 1px solid rgba(255, 255, 255, 0.06);
    --liquid-rim: inset 0 1px 0 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    --liquid-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), 0 2px 6px 0 rgba(0, 0, 0, 0.4);

    --border: rgba(255, 255, 255, 0.10);
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-highlight: rgba(var(--orange-rgb), 0.55);

    --text: #ffffff;
    --text-soft: #d1d5db;
    --muted: #9ca3af;
    --muted2: #6b7280;

    --header-bg: rgba(6, 9, 13, 0.88);
    --input-bg: rgba(255, 255, 255, 0.045);
    --grid-line: rgba(var(--orange-rgb), 0.035);
    --pill-active-bg: rgba(var(--orange-rgb), 0.16);
    --spotlight-color: rgba(var(--orange-rgb), 0.08);

    --surface-card: #0c1017;
    --surface-2: rgba(255, 255, 255, 0.035);
    --surface-3: rgba(255, 255, 255, 0.07);
    --input-border: rgba(255, 255, 255, 0.10);

    --gold: #fbbf24;
    --silver: #e2e8f0;
    --bronze: #f59e0b;
}

:root[data-theme="light"] {
    /* Primary Warm Orange Core in Light Mode */
    --primary: #ea580c;
    --primary-hover: #c2410c;
    --primary-glow: rgba(234, 88, 12, 0.18);
    --orange: #ea580c;
    --orange-rgb: 234, 88, 12;
    --orange-hover: #c2410c;
    --orange-glow: rgba(234, 88, 12, 0.18);
    --amber: #d97706;
    --amber-glow: rgba(217, 119, 6, 0.15);

    --teal: #ea580c;
    --teal2: #c2410c;
    --teal-glow: rgba(234, 88, 12, 0.14);

    /* Clean Pearl Slate Light Background */
    --bg: #f8fafc;
    --bg-body-radial:
        radial-gradient(ellipse 1000px 600px at 50% -50px, rgba(var(--orange-rgb), 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 900px 650px at 92% 35%, rgba(251, 191, 36, 0.08) 0%, transparent 52%),
        radial-gradient(ellipse 800px 550px at 8% 65%, rgba(234, 88, 12, 0.06) 0%, transparent 48%),
        radial-gradient(ellipse 1000px 600px at 50% 92%, rgba(var(--orange-rgb), 0.09) 0%, transparent 55%),
        #f8fafc;

    /* Light Liquid Glass Surfaces */
    --liquid-bg: #ffffff;
    --liquid-bg-subtle: #f8fafc;
    --liquid-border: 1px solid rgba(226, 232, 240, 0.9);
    --liquid-border-soft: 1px solid rgba(241, 245, 249, 1);
    --liquid-rim: inset 0 1px 0 0 #ffffff;
    --liquid-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.03);

    --border: rgba(203, 213, 225, 0.85);
    --border-soft: rgba(226, 232, 240, 0.7);
    --border-highlight: rgba(234, 88, 12, 0.55);

    --text: #0f172a;
    --text-soft: #334155;
    --muted: #64748b;
    --muted2: #94a3b8;

    --header-bg: rgba(255, 255, 255, 0.94);
    --input-bg: #ffffff;
    --grid-line: rgba(0, 0, 0, 0.025);
    --pill-active-bg: rgba(234, 88, 12, 0.12);
    --spotlight-color: rgba(234, 88, 12, 0.05);

    --surface-card: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --input-border: #cbd5e1;

    --gold: #d97706;
    --silver: #475569;
    --bronze: #b45309;
}

body {
    min-height: 100vh;
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.012em;
    background: var(--bg-body-radial);
    overflow-x: hidden;
    transition: background .35s ease, color .3s ease;
}

/* Precision grid background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
    z-index: 0;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
}

.container {
    width: min(1240px, calc(100% - 40px));
    margin: auto;
    position: relative;
    z-index: 1;
}

/* =========================================================
   SURFACE SURFACES & CARDS
========================================================= */
.glass-panel {
    background: var(--liquid-bg);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim), var(--liquid-shadow);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}

.interactive-card {
    background: var(--liquid-bg);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim), var(--liquid-shadow);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.2s ease;
}

.interactive-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-highlight);
    box-shadow: var(--liquid-rim), 0 20px 42px -10px rgba(0, 0, 0, 0.65), 0 0 18px var(--orange-glow);
}

/* Pulse & Radar Indicators */
.radar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    display: inline-block;
    position: relative;
}

.radar-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--orange);
    opacity: 0.6;
    animation: radarPulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes radarPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* =========================================================
   SLEEK MINIMAL ANNOUNCEMENT STRIP & FLOATING HEADER
========================================================= */
.top-announcement-bar {
    background: rgba(8, 12, 18, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 7px 0;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    z-index: 50;
}

[data-theme="light"] .top-announcement-bar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.announcement-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.announcement-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.announcement-badge {
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: 0.04em;
}

.announcement-sep {
    color: var(--border-soft);
    font-size: 12px;
}

.announcement-text {
    color: var(--muted);
    font-size: 11px;
}

.announcement-right {
    display: flex;
    align-items: center;
}

.announcement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.announcement-link:hover {
    color: var(--orange);
}

/* FLOATING HEADER */
.header-wrapper {
    position: sticky;
    top: 12px;
    z-index: 100;
    padding: 0 16px;
}

.floating-header {
    max-width: 1240px;
    margin: 0 auto;
    border-radius: 16px;
    background: var(--header-bg);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim), 0 14px 32px -8px rgba(0,0,0,.5);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    padding: 9px 16px;
    transition: all .25s ease;
}

[data-theme="light"] .floating-header {
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.02em;
    color: var(--text);
    flex-shrink: 0;
}

.logo-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 78%, #ffffff) 0%, var(--orange) 100%);
    box-shadow: 0 2px 10px var(--orange-glow);
    transition: transform .2s ease;
}

.logo:hover .logo-icon {
    transform: scale(1.05);
}

.logo img {
    height: 32px;
    max-width: 180px;
    object-fit: contain;
}
[data-theme="light"] .logo-img-dark { display: none !important; }
[data-theme="light"] .logo-img-light { display: block !important; }
[data-theme="dark"] .logo-img-dark { display: block !important; }
[data-theme="dark"] .logo-img-light { display: none !important; }

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav a {
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 550;
    padding: 6px 12px;
    border-radius: 9px;
    transition: all .18s ease;
    letter-spacing: -.01em;
}

.nav a:hover, .nav a.active {
    color: var(--text);
    background: var(--pill-active-bg);
}

.quick-search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}

.quick-search-trigger:hover {
    border-color: var(--border-highlight);
    color: var(--text);
}

.kbd-badge {
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

[data-theme="light"] .kbd-badge {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}

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

.theme-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    border-color: var(--border-highlight);
    color: var(--orange);
}

/* Explicit Sun / Moon display toggle */
.theme-toggle-btn .theme-icon-sun {
    display: block;
}
.theme-toggle-btn .theme-icon-moon {
    display: none;
}
[data-theme="light"] .theme-toggle-btn .theme-icon-sun {
    display: none !important;
}
[data-theme="light"] .theme-toggle-btn .theme-icon-moon {
    display: block !important;
}
[data-theme="dark"] .theme-toggle-btn .theme-icon-sun {
    display: block !important;
}
[data-theme="dark"] .theme-toggle-btn .theme-icon-moon {
    display: none !important;
}

/* =========================================================
   LIQUID GLASS LANGUAGE SWITCHER (DESKTOP & MOBILE)
   ========================================================= */
.lang-dropdown-wrapper {
    position: relative;
    flex-shrink: 0;
}
.lang-toggle-btn {
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 12px;
    font-weight: 700;
}
.lang-toggle-btn:hover {
    border-color: var(--border-highlight);
    color: var(--text);
}
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    padding: 6px;
}
[data-theme="light"] .lang-dropdown-menu {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}
.lang-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}
.lang-dropdown-list {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.lang-dropdown-list::-webkit-scrollbar {
    width: 4px;
}
.lang-dropdown-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: all .15s ease;
}
.lang-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
[data-theme="light"] .lang-dropdown-item:hover {
    background: rgba(0,0,0,0.05);
}
.lang-dropdown-item.active {
    background: rgba(var(--orange-rgb), 0.12);
    color: var(--orange) !important;
    font-weight: 600;
}
.lang-flag {
    font-size: 15px;
    line-height: 1;
}
.lang-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.lang-name {
    font-size: 12.5px;
    font-weight: 600;
}
.lang-sub {
    font-size: 10.5px;
    color: var(--muted);
}

/* Mobile Language Selector Pills */
.mobile-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.mobile-lang-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: var(--input-bg);
    color: var(--text-soft);
    font-size: 12px;
    text-decoration: none;
    transition: all .15s ease;
}
.mobile-lang-pill:hover, .mobile-lang-pill.active {
    border-color: rgba(var(--orange-rgb), 0.4);
    background: rgba(var(--orange-rgb), 0.1);
    color: var(--orange);
    font-weight: 600;
}

/* Clean Header Sign In Link - 100% Theme Adaptive */
.header-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text) !important;
    background: var(--input-bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}

.header-signin-btn:hover {
    border-color: var(--border-highlight);
    color: var(--orange) !important;
    background: var(--pill-active-bg);
}

[data-theme="light"] .header-signin-btn {
    color: #0f172a !important;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

[data-theme="light"] .header-signin-btn:hover {
    color: color-mix(in srgb, var(--orange) 78%, #000000) !important;
    background: #fff7ed;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
}

/* Compact Header Spotlight Trigger */
.header-spotlight-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 9px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.header-spotlight-pill:hover {
    border-color: var(--border-highlight);
    color: var(--text);
}

[data-theme="light"] .header-spotlight-pill {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

[data-theme="light"] .header-spotlight-pill:hover {
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    color: #0f172a;
    background: #ffffff;
}

/* Mobile Toggle Button */
.header-mobile-toggle {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    place-items: center;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

.header-mobile-toggle:hover {
    border-color: var(--border-highlight);
    color: var(--orange);
}

/* =========================================================
   DROPDOWN MENUS (DARK & LIGHT THEME CRAFT)
========================================================= */
.nav-dropdown-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 9px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.nav-dropdown-btn:hover, .nav-dropdown-btn.active {
    color: var(--text);
    background: var(--pill-active-bg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 270px;
    background: rgba(14, 20, 27, 0.97);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(var(--orange-rgb), 0.25);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), var(--liquid-rim);
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 1000;
}

[data-theme="light"] .nav-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.16s ease;
}

.nav-dropdown-menu a:hover {
    background: rgba(var(--orange-rgb), 0.12);
}

[data-theme="light"] .nav-dropdown-menu a:hover {
    background: #fff7ed !important;
}

.nav-dropdown-menu .dd-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
}

.nav-dropdown-menu a:hover .dd-title {
    color: var(--orange);
}

.nav-dropdown-menu .dd-desc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
}

/* =========================================================
   BUTTON PRIMITIVES
========================================================= */
.btn-primary {
    border: 0;
    border-radius: 10px;
    padding: 8px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 78%, #ffffff) 0%, var(--orange) 100%);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 14px var(--orange-glow);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 68%, #ffffff) 0%, color-mix(in srgb, var(--orange) 78%, #000000) 100%);
    box-shadow: 0 6px 20px rgba(var(--orange-rgb), 0.45);
    color: #ffffff;
}

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

.btn-secondary,
.btn-ghost {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 16px;
    color: var(--text) !important;
    background: var(--input-bg);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary:hover,
.btn-ghost:hover {
    border-color: var(--border-highlight);
    background: var(--pill-active-bg);
    color: var(--text) !important;
    transform: translateY(-1px);
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: color-mix(in srgb, var(--orange) 78%, #000000) !important;
}

.btn-danger-soft {
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-danger-soft:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

[data-theme="light"] .btn-danger-soft {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="light"] .btn-danger-soft:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.btn-danger {
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
}

[data-theme="light"] .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff !important;
}

.btn-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    transform: translateY(-1px);
}

[data-theme="light"] .btn-icon-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

[data-theme="light"] .btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

/* Talk to Sales Button */
.talk-to-sales-btn {
    background: linear-gradient(135deg, var(--orange), color-mix(in srgb, var(--orange) 78%, #000000)) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(var(--orange-rgb), 0.35) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.talk-to-sales-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(var(--orange-rgb), 0.5) !important;
}

/* =========================================================
   SECTION 2: BALANCED HERO SECTION & COCKPIT
========================================================= */
.hero, .hero-section {
    position: relative;
    padding: 60px 0 40px;
    text-align: center;
    overflow: hidden;
}

/* =========================================================
   HERO 2-COLUMN BALANCED ARCHITECTURE
========================================================= */
.hero-2col-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    text-align: left;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .hero-2col-layout {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }
}

.hero-col-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .hero-col-content {
        align-items: center;
    }
}

.hero-title-left {
    font-size: clamp(28px, 3.8vw, 52px);
    line-height: 1.14;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .hero-title-left {
        font-size: 26px;
        line-height: 1.22;
    }
    .hero-title-left br {
        display: none;
    }
}

.hero-subtitle-left {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 22px;
}

@media (max-width: 640px) {
    .hero-subtitle-left {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 18px;
    }
}

.hero-search-wrapper-left {
    width: 100%;
    max-width: 580px;
    margin-bottom: 18px;
}

/* Quick Category Tags */
.hero-quick-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

@media (max-width: 1024px) {
    .hero-quick-tags {
        justify-content: center;
    }
}

.quick-tags-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: 2px;
}

.hero-quick-pill {
    padding: 5px 11px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-quick-pill:hover {
    border-color: var(--border-highlight);
    color: var(--orange);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--orange-glow);
}

[data-theme="light"] .hero-quick-pill {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .hero-quick-pill:hover {
    background: #fff7ed;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    color: color-mix(in srgb, var(--orange) 78%, #000000);
}

/* Trust Micro-Strip */
.hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

@media (max-width: 1024px) {
    .hero-trust-strip {
        justify-content: center;
    }
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================
   RIGHT COLUMN: HERO VISUAL SHOWCASE WITH AUTO EFFECTS
========================================================= */
.hero-col-visual {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    perspective: 1000px;
}

.hero-visual-frame-wrap {
    position: relative;
    width: 100%;
}

/* Auto Effect 1: Ambient Core Glow Pulse */
.hero-visual-glow {
    position: absolute;
    inset: -15px -12px;
    border-radius: 28px;
    background: radial-gradient(ellipse at center, rgba(var(--orange-rgb), 0.28) 0%, rgba(var(--orange-rgb), 0.08) 50%, transparent 75%);
    filter: blur(32px);
    z-index: 0;
    pointer-events: none;
    animation: heroGlowPulse 4s ease-in-out infinite alternate;
}

/* Auto Effect 2: 3D Floating & Breathe Animation */
.hero-visual-card {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    background: var(--liquid-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--orange-rgb), 0.18), var(--liquid-rim);
    overflow: hidden;
    backdrop-filter: blur(24px) saturate(180%);
    animation: heroBreatheFloat 6s ease-in-out infinite;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .hero-visual-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(234, 88, 12, 0.15);
}

.hero-visual-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 32px 64px -14px rgba(0, 0, 0, 0.8), 0 0 30px rgba(var(--orange-rgb), 0.32), var(--liquid-rim);
}

[data-theme="light"] .hero-visual-card:hover {
    box-shadow: 0 30px 60px -14px rgba(15, 23, 42, 0.18), 0 0 25px rgba(234, 88, 12, 0.22);
}

/* Luxury Hero Showcase Topbar (Anti-Slop Clean Aesthetic) */
.hero-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .hero-card-topbar {
    background: rgba(248, 250, 252, 0.95);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.hero-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-heading);
}

.hero-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 10px rgba(var(--orange-rgb), 0.8);
    flex-shrink: 0;
}

.hero-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #22c55e;
    font-size: 9px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}

.status-ping {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: radarPulse 1.8s infinite;
}

/* Image Display Wrapper & Auto Effect 3: Shimmer Sweep */
.hero-image-display-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10.5;
    background: #080c12;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-card:hover .hero-custom-img {
    transform: scale(1.02);
}

[data-theme="light"] .hero-image-display-wrap {
    background: #f8fafc;
}

.hero-image-box {
    border-radius: 20px;
    overflow: hidden;
}

/* =========================================================
   LIVE SPOTLIGHT COCKPIT CARD (ANTI-SLOP REAL TOOLS SHOWCASE)
========================================================= */
.hero-live-spotlight {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 10px;
    background: rgba(10, 15, 24, 0.65);
}

[data-theme="light"] .hero-live-spotlight {
    background: #f8fafc;
}

.hero-spotlight-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hero-spotlight-chip {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.hero-spotlight-chip.active,
.hero-spotlight-chip:hover {
    background: rgba(var(--orange-rgb), 0.15);
    border-color: rgba(var(--orange-rgb), 0.4);
    color: var(--orange);
}

[data-theme="light"] .hero-spotlight-chip {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

[data-theme="light"] .hero-spotlight-chip.active,
[data-theme="light"] .hero-spotlight-chip:hover {
    background: #fff7ed;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    color: color-mix(in srgb, var(--orange) 78%, #000000);
}

.hero-spotlight-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-spotlight-item:hover {
    background: rgba(var(--orange-rgb), 0.08);
    border-color: rgba(var(--orange-rgb), 0.35);
    transform: translateX(3px);
}

[data-theme="light"] .hero-spotlight-item {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .hero-spotlight-item:hover {
    background: #fff7ed;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12);
}

.hero-spotlight-item-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.hero-spotlight-logo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

[data-theme="light"] .hero-spotlight-logo {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.hero-spotlight-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.hero-spotlight-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}

.hero-spotlight-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.hero-spotlight-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hero-latency-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #22c55e;
}

.hero-shimmer-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), rgba(var(--orange-rgb), 0.12), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: heroShimmer 6s infinite;
}

/* Auto Effect 4 & 5: Micro Floating Badges */
.hero-floating-badge {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    border-radius: 12px;
    background: rgba(14, 19, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.65), 0 0 12px rgba(var(--orange-rgb), 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
}

[data-theme="light"] .hero-floating-badge {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 24px -5px rgba(15, 23, 42, 0.12);
}

.badge-top-right {
    top: 56px;
    right: -12px;
    animation: floatBadgeTop 5s ease-in-out infinite alternate;
}

.badge-bottom-left {
    bottom: 42px;
    left: -12px;
    animation: floatBadgeBottom 5.5s ease-in-out infinite alternate;
}

@media (max-width: 640px) {
    .badge-top-right { right: 8px; }
    .badge-bottom-left { left: 8px; }
}

.badge-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--orange-rgb), 0.14);
    border: 1px solid rgba(var(--orange-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icon-box.pulse {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.3);
}

.badge-text-box {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.badge-label {
    font-size: 9px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-value {
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
}

/* Card Mockup Footer */
.hero-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    background: rgba(0, 0, 0, 0.40);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .hero-card-footer {
    background: rgba(241, 245, 249, 0.85);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

/* Keyframes for Hero Animations */
@keyframes heroBreatheFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0.4deg);
    }
}

@keyframes heroGlowPulse {
    0% {
        opacity: 0.6;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes heroShimmer {
    0% {
        left: -100%;
    }
    30%, 100% {
        left: 200%;
    }
}

@keyframes floatBadgeTop {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-6px);
    }
}

@keyframes floatBadgeBottom {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(6px);
    }
}

.hero-glow {
    position: absolute;
    width: 860px;
    height: 520px;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(var(--orange-rgb), 0.16), transparent 66%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    max-width: 1240px;
    margin: 0 auto;
}

/* Trust Pill */
.hero-pill, .hero-kicker-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--liquid-bg-subtle);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim);
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.hero-pill-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
}

.hero-pill-ping {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    opacity: 0.75;
    animation: radarPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hero-pill-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.hero-pill-text {
    font-family: 'JetBrains Mono', monospace;
}

/* Hero Title */
.hero-title, .hero h1 {
    max-width: 940px;
    margin: 0 auto;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 800;
    position: relative;
    z-index: 1;
    color: var(--text);
}

.gradient-text, .shimmer-text {
    background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 78%, #ffffff) 0%, var(--orange) 30%, var(--accent-2, #fbbf24) 60%, color-mix(in srgb, var(--orange) 78%, #000000) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: orangeShimmer 7s ease-in-out infinite;
}

@keyframes orangeShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-subtitle, .hero-description {
    max-width: 660px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* HERO SEARCH BAR */
.hero-search-wrapper, .search-console-container {
    max-width: 740px;
    margin: 32px auto 0;
    position: relative;
    z-index: 10;
}

.hero-search-wrapper-left {
    position: relative;
    z-index: 120;
    overflow: visible;
}

.hero-search-bar, .search-console {
    border-radius: 16px;
    padding: 6px 8px 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--liquid-bg);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim), 0 16px 36px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(24px) saturate(160%);
    transition: all 0.2s ease;
    overflow: visible !important;
    position: relative;
    z-index: 121;
}

.hero-search-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.hero-search-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    overflow: visible !important;
    position: relative;
    z-index: 122;
}

.hero-search-bar:focus-within, .search-console:focus-within {
    border-color: var(--border-highlight);
    box-shadow: var(--liquid-rim), 0 18px 42px -10px rgba(0, 0, 0, 0.6), 0 0 20px var(--orange-glow);
}

@media (max-width: 640px) {
    .hero-search-bar, .search-console {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 14px !important;
    }
    .hero-search-input-group {
        width: 100% !important;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border-soft);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .hero-search-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 4px 0 !important;
    }
    .hero-search-actions-group {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .hero-search-actions-group .custom-select-wrap {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .hero-search-actions-group .custom-select-trigger {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    .hero-search-actions-group .hero-search-btn {
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
    }
}

.hero-search-input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    font-family: inherit;
}

.hero-search-input::placeholder {
    color: var(--muted2);
}

.search-category-dropdown-wrap {
    flex-shrink: 0;
}

.category-select-pill {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ff6b35' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center,
        var(--input-bg);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 30px 8px 12px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: all .2s ease;
}

.category-select-pill:hover, .category-select-pill:focus {
    border-color: var(--border-highlight);
    color: var(--text);
}

.category-select-pill option {
    background: #0f172a;
    color: #ffffff;
    padding: 6px 10px;
}

[data-theme="light"] .category-select-pill option {
    background: #ffffff;
    color: #0f172a;
}

.hero-search-btn, .search-btn-liquid {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
}

/* Category Pills Row */
.category-pills-row, .search-filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.category-pill, .filter-pill {
    padding: 7px 14px;
    border-radius: 12px;
    background: var(--liquid-bg);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    color: var(--text-soft);
    text-decoration: none;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.category-pill:hover, .filter-pill:hover {
    color: var(--orange);
    border-color: var(--border-highlight);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--orange-glow);
}

.category-pill.active, .filter-pill.active {
    background: linear-gradient(135deg, var(--orange) 0%, color-mix(in srgb, var(--orange) 78%, #000000) 100%) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--orange) 78%, #ffffff) !important;
    box-shadow: 0 4px 18px rgba(var(--orange-rgb), 0.35) !important;
    transform: translateY(-1px);
}

.category-pill.active span, .category-pill.active i {
    color: #ffffff !important;
}

[data-theme="light"] .category-pill, [data-theme="light"] .filter-pill {
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.9);
    color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .category-pill:hover, [data-theme="light"] .filter-pill:hover {
    color: color-mix(in srgb, var(--orange) 78%, #000000);
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    background: #fff7ed;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.15);
}

[data-theme="light"] .category-pill.active, [data-theme="light"] .filter-pill.active {
    background: linear-gradient(135deg, var(--orange) 0%, color-mix(in srgb, var(--orange) 78%, #000000) 100%) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000) !important;
}



/* UNIFIED COCKPIT TELEMETRY INSTRUMENT */
.cockpit-instrument, .telemetry-cockpit-panel {
    max-width: 1040px;
    margin: 32px auto 0;
    border-radius: 20px;
    background: var(--liquid-bg);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim), 0 24px 55px -15px rgba(0,0,0,.75);
    overflow: hidden;
    backdrop-filter: blur(28px) saturate(180%);
    text-align: left;
    position: relative;
}

.cockpit-instrument::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--orange-rgb), 0.5), transparent);
}

.cockpit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .cockpit-top {
    background: rgba(248, 250, 252, 0.9);
}

.cockpit-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 750;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    letter-spacing: .04em;
}

.cockpit-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.cockpit-metric-col {
    padding: 20px 24px;
    border-right: 1px solid var(--border-soft);
    transition: background 0.2s ease;
}

.cockpit-metric-col:hover {
    background: rgba(var(--orange-rgb), 0.04);
}

.cockpit-metric-col:last-child {
    border-right: none;
}

.cockpit-metric-num {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.cockpit-metric-lbl {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cockpit-radar-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 22px;
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid var(--border-soft);
    font-size: 11px;
    flex-wrap: wrap;
    gap: 12px;
}

[data-theme="light"] .cockpit-radar-strip {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.radar-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radar-scroller {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.radar-scroller-item {
    font-size: 11px;
    color: var(--text-soft);
}

/* =========================================================
   SECTION HEADERS
========================================================= */
.section {
    padding: 60px 0;
    position: relative;
    z-index: 1;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 20px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 750;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}

.section-desc {
    max-width: 440px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

/* =========================================================
   SECTION 3: TODAY'S COMMUNITY PODIUM
========================================================= */
.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.podium-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.podium-gold {
    border-color: rgba(251, 191, 36, 0.45) !important;
    box-shadow: inset 0 1px 0 0 rgba(251, 191, 36, 0.4), 0 20px 48px -12px rgba(251, 191, 36, 0.18) !important;
}

.podium-silver {
    border-color: rgba(203, 213, 225, 0.35) !important;
    box-shadow: inset 0 1px 0 0 rgba(203, 213, 225, 0.3), 0 20px 48px -12px rgba(0, 0, 0, 0.5) !important;
}

.podium-bronze {
    border-color: rgba(245, 158, 11, 0.35) !important;
    box-shadow: inset 0 1px 0 0 rgba(245, 158, 11, 0.3), 0 20px 48px -12px rgba(245, 158, 11, 0.15) !important;
}

.podium-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 16px;
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 10px;
    border-radius: 6px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-soft);
}

[data-theme="light"] .podium-rank-badge {
    background: #f8fafc;
}

/* Upvote Pill */
.upvote-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'JetBrains Mono', monospace;
}

.upvote-btn-pill:hover, 
.upvote-btn-pill.active,
.upvote-btn-pill.has-voted {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    background: rgba(var(--orange-rgb), 0.14) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--orange-glow);
}

[data-theme="light"] .upvote-btn-pill {
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.8);
    color: #334155;
}

[data-theme="light"] .upvote-btn-pill.active,
[data-theme="light"] .upvote-btn-pill.has-voted {
    background: rgba(var(--orange-rgb), 0.12) !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

.spec-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.spec-pill {
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    color: var(--text-soft);
    font-weight: 550;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.01em;
    transition: all 0.15s ease;
}

[data-theme="light"] .spec-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}

/* =========================================================
   SECTION 4: CURATED STARTER WORKFLOW STACKS
========================================================= */
.stacks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stack-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.stack-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--orange-rgb), 0.35), transparent);
}

.stack-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 12px;
    color: var(--orange);
    background: rgba(var(--orange-rgb), 0.12);
    border: 1px solid rgba(var(--orange-rgb), 0.28);
    width: fit-content;
    letter-spacing: .04em;
}

.stack-tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-soft);
    margin-bottom: 7px;
    font-size: 12px;
    transition: all 0.18s ease;
}

[data-theme="light"] .stack-tool-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.stack-tool-row:hover {
    border-color: rgba(var(--orange-rgb), 0.35);
    background: rgba(var(--orange-rgb), 0.05);
    transform: translateX(2px);
}

.stack-tool-name {
    font-weight: 600;
    color: var(--text);
}

/* =========================================================
   SECTION 5: UNIFIED DIRECTORY GRID & CARDS
========================================================= */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 18px;
}

.directory-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.filter-tab-btn {
    padding: 7px 16px;
    border-radius: 10px;
    background: var(--liquid-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.filter-tab-btn:hover {
    color: var(--text);
    border-color: var(--border-highlight);
}

.filter-tab-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--orange), color-mix(in srgb, var(--orange) 78%, #000000)) !important;
    border-color: color-mix(in srgb, var(--orange) 78%, #ffffff) !important;
    box-shadow: 0 4px 14px rgba(var(--orange-rgb), 0.35);
}

[data-theme="light"] .filter-tab-btn {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.8);
    color: #64748b;
}

[data-theme="light"] .filter-tab-btn:hover {
    color: #0f172a;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
}

[data-theme="light"] .filter-tab-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--orange), color-mix(in srgb, var(--orange) 78%, #000000)) !important;
    border-color: color-mix(in srgb, var(--orange) 78%, #000000) !important;
}

.pricing-pill {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(var(--orange-rgb), 0.12);
    color: var(--orange);
    border: 1px solid rgba(var(--orange-rgb), 0.28);
}

.pricing-pill-opensource {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.28);
}

.pricing-pill-free {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.28);
}

.pricing-pill-paid {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.28);
}

/* =========================================================
   SECTION 6: SIDE-BY-SIDE COMPARISON ARENA
========================================================= */
.comparison-panel {
    border-radius: 18px;
    overflow: hidden;
}

.comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.comparison-table th {
    padding: 15px 20px;
    font-size: 11px;
    font-weight: 750;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-soft);
}

[data-theme="light"] .comparison-table th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.comparison-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-soft);
}

[data-theme="light"] .comparison-table td {
    border-bottom: 1px solid #f1f5f9;
}

.comparison-table tr:hover td {
    background: rgba(var(--orange-rgb), 0.035);
}

/* =========================================================
   REVIEWS & FAQ ACCORDIONS
========================================================= */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.review-card {
    padding: 20px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    border-radius: 12px;
    background: var(--liquid-bg);
    border: var(--liquid-border);
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-question {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
    cursor: pointer;
}

.faq-answer {
    padding: 0 20px 16px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

/* =========================================================
   FOOTER
========================================================= */
.footer {
    border-top: 1px solid var(--border-soft);
    background: rgba(8, 12, 16, 0.95);
    padding: 60px 0 30px;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .footer {
    background: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 32px;
}

.footer-brand h4 {
    font-size: 16px;
    font-weight: 750;
    margin-bottom: 10px;
    color: var(--text);
}

.footer-brand p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 300px;
}

.footer-col h5 {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: .06em;
}

.footer-col a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    margin-bottom: 9px;
    transition: color .18s ease;
}

.footer-col a:hover {
    color: var(--orange);
}

.footer-bottom {
    margin-top: 45px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
}

/* =========================================================
   COMMAND PALETTE (SPOTLIGHT SEARCH)
========================================================= */
.palette-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 99999 !important;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.palette-backdrop.active, 
.palette-backdrop[style*="display: flex"],
.palette-backdrop[style*="display:flex"] {
    display: flex !important;
    opacity: 1 !important;
}

.palette-card {
    width: min(640px, 100%);
    background: var(--liquid-bg);
    border: var(--liquid-border);
    border-radius: 16px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), var(--liquid-rim);
    overflow: hidden;
}

[data-theme="light"] .palette-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15);
}

.palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
}

.palette-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
}

.palette-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.palette-result-item:hover {
    background: var(--pill-active-bg);
}

.palette-result-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.palette-item-icon {
    font-size: 18px;
}

.palette-item-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
}

.palette-item-desc {
    font-size: 11px;
    color: var(--muted);
}

.palette-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--orange-rgb), 0.15);
    color: var(--orange);
}

.palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .palette-footer {
    background: #f8fafc;
}

/* =========================================================
   TOOL QUICK-VIEW MODAL
========================================================= */
.modal-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 99999 !important;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .22s ease;
}

.modal-backdrop.active,
.modal-backdrop[style*="display: flex"],
.modal-backdrop[style*="display:flex"],
.modal-backdrop[style*="display: grid"],
.modal-backdrop[style*="display:grid"] {
    display: grid !important;
    opacity: 1 !important;
}

.modal-card {
    width: min(680px, 100%);
    border-radius: 20px;
    padding: 28px;
    background: var(--liquid-bg);
    border: var(--liquid-border);
    box-shadow: var(--liquid-rim), 0 30px 70px -15px rgba(0, 0, 0, 0.85);
    position: relative;
}

[data-theme="light"] .modal-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.modal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--orange-rgb), 0.15);
    border: 1px solid rgba(var(--orange-rgb), 0.3);
    display: grid;
    place-items: center;
    font-size: 20px;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .2s ease;
}

.modal-close-btn:hover {
    color: var(--text);
    border-color: var(--border-highlight);
}

.modal-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.modal-metric-box {
    padding: 12px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    text-align: center;
}

.modal-metric-num {
    font-size: 16px;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 2px;
}

.modal-metric-lbl {
    font-size: 10px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}

/* =========================================================
   TOAST NOTIFICATION CONTAINER
========================================================= */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--liquid-bg);
    border: 1px solid var(--border-highlight);
    box-shadow: 0 16px 36px rgba(0,0,0,.5);
    backdrop-filter: blur(20px);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toastSlideIn .22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
}

[data-theme="light"] .toast {
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(0,0,0,.15);
}

@keyframes toastSlideIn {
    0% { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Universal 2-Column Admin & Dashboard Grid */
.admin-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Tool Detail & Interactive Grids */
.tool-detail-layout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.progress-bars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--input-bg);
    border-radius: 12px;
    border: 1px solid var(--border-soft);
}

.review-name-score-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.review-criteria-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.badge-modal-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

/* =========================================================
   RESPONSIVE DESIGN (ZERO OVERFLOW & CLEAN MOBILE-TABLET NAV)
========================================================= */
@media (max-width: 1024px) {
    .admin-grid-2 { grid-template-columns: 1fr !important; }
    .tool-detail-layout-grid { grid-template-columns: 1fr !important; }
    .cockpit-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .cockpit-metric-col:nth-child(2) { border-right: none; }
    .podium-grid, .stacks-grid, .reviews-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav { display: none !important; }
    .header-mobile-toggle { display: grid !important; }
    
    /* Clean up tablet header: hide submit tool so header remains clean and un-crammed */
    .header-submit-btn { display: none !important; }
}

@media (max-width: 768px) {
    .cockpit-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cockpit-metric-col { border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
    .cockpit-metric-col:nth-child(2n) { border-right: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .telemetry-bar { display: none; }
    .quick-search-trigger, .header-spotlight-pill { display: none !important; }
    
    /* Zero clutter on mobile: keep ONLY Logo + Theme Toggle + Mobile Hamburger in header bar */
    .header-signin-btn { display: none !important; }
    .floating-header { padding: 7px 12px; }
    .header-inner { gap: 10px; }
    
    /* Announcement strip mobile cleanliness */
    .announcement-sep, .announcement-text { display: none !important; }
    .top-announcement-bar { padding: 5px 0; font-size: 11px; }

    /* Admin & User Dashboard Topbars */
    .admin-topbar, .user-topbar { padding: 0 14px; height: 56px; }
    .admin-topbar-telemetry { display: none !important; }
    .dashboard-topbar-submit-btn { display: none !important; }
}

@media (max-width: 640px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    .top-announcement-bar .announcement-right { display: none !important; }
    .top-announcement-bar .announcement-inner { justify-content: center !important; text-align: center !important; }
    .hero-section { padding: 24px 0 16px !important; overflow-x: clip !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; }
    .hero-glow { display: none !important; }
    .hero-2col-layout {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }
    .hero-col-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .hero-col-visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        perspective: none !important;
        box-sizing: border-box !important;
    }
    .hero-visual-frame-wrap { width: 100% !important; max-width: 100% !important; }
    .hero-visual-card {
        width: 100% !important;
        max-width: 100% !important;
        animation: none !important;
        transform: none !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }
    .hero-visual-glow { display: none !important; }
    .hero-pill { font-size: 10px !important; padding: 5px 10px !important; margin-bottom: 14px !important; max-width: 100% !important; line-height: 1.3 !important; }
    .pill-hide-mobile { display: none !important; }
    .hero-title-left {
        font-size: clamp(20px, 5.8vw, 25px) !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
    .hero-subtitle-left { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 16px !important; max-width: 100% !important; }
    .hero-search-wrapper-left {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 14px !important;
        position: relative !important;
        z-index: 80 !important;
    }
    .hero-search-bar {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        position: relative !important;
        z-index: 81 !important;
        box-sizing: border-box !important;
    }
    .hero-search-input-group {
        width: 100% !important;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border-soft);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .hero-search-input { width: 100% !important; font-size: 16px !important; padding: 4px 0 !important; }
    .hero-search-actions-group {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
        z-index: 82 !important;
    }
    .hero-search-actions-group .custom-select-wrap {
        flex: 1 !important;
        min-width: 0 !important;
        position: relative !important;
        z-index: 83 !important;
    }
    .hero-search-actions-group .custom-select-trigger {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }
    .hero-search-actions-group .hero-search-btn {
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
    }
    .custom-select-dropdown {
        width: max-content !important;
        min-width: 230px !important;
        max-width: calc(100vw - 36px) !important;
        z-index: 999999 !important;
    }
    .hero-quick-tags { gap: 6px !important; margin-bottom: 16px !important; max-width: 100% !important; }
    .hero-quick-pill { padding: 4px 8px !important; font-size: 10px !important; }
    .hero-trust-strip { gap: 8px 12px !important; font-size: 11px !important; max-width: 100% !important; }
    .hero-card-topbar { padding: 8px 12px !important; width: 100% !important; box-sizing: border-box !important; }
    .hero-topbar-brand { font-size: 10px !important; }
    .hero-topbar-status { font-size: 8px !important; padding: 2px 6px !important; }
    .hero-live-spotlight { padding: 10px !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; }
    .hero-spotlight-chips { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .hero-spotlight-item { padding: 8px 10px !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; }
    .hero-spotlight-logo { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; }
    .hero-spotlight-logo img { width: 20px !important; height: 20px !important; }
    .hero-spotlight-name { font-size: 12px !important; }
    .hero-spotlight-meta { font-size: 10px !important; max-width: 110px !important; }
    .hero-latency-badge { padding: 2px 6px !important; font-size: 9px !important; }
    .cockpit-instrument { margin: 20px auto 0 !important; border-radius: 14px !important; width: 100% !important; box-sizing: border-box !important; }
    .cockpit-top { padding: 10px 14px !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .cockpit-metric-col { padding: 12px 14px !important; }
    .cockpit-metric-num { font-size: 18px !important; }
    .cockpit-metric-lbl { font-size: 10px !important; }
    .cockpit-radar-strip { padding: 10px 14px !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
    .radar-scroller { display: flex !important; flex-wrap: wrap !important; gap: 6px 12px !important; font-size: 10px !important; }
    
    /* Mobile Directory Grid & Cards */
    .directory-grid { grid-template-columns: 1fr !important; }
    .modal-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    
    /* Mobile Form Controls & Anti-Zoom */
    input, select, textarea { font-size: 16px !important; }
    .glass-panel form .custom-select-wrap,
    .custom-select-wrap.filter-select { width: 100% !important; min-width: 100% !important; }
    
    /* Tool Detail Mobile Grids */
    .progress-bars-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .review-name-score-grid { grid-template-columns: 1fr !important; }
    .review-criteria-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .badge-modal-controls-grid { grid-template-columns: 1fr !important; }
    
    /* Search Page Bar on Mobile */
    .search-page-bar { padding: 8px 10px !important; gap: 8px !important; }
    .search-page-bar button.btn-primary { padding: 8px 14px !important; font-size: 12px !important; }
    
    /* Filter Bar Action Buttons on Mobile */
    .glass-panel form button[type="submit"],
    .glass-panel form a.btn-ghost {
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .modal-metrics-grid { grid-template-columns: 1fr !important; }
    .review-criteria-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   MOBILE DRAWER NAVIGATION SHEET (LEFT & RIGHT ARCHITECTURE)
========================================================= */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 999999 !important;
    display: flex;
    justify-content: flex-end; /* Default right drawer (for frontend header button on the right) */
    animation: drawerBackdropFadeIn 0.22s ease forwards;
}

/* Left-Side Drawer (for Admin & Dashboard where sidebar and hamburger button are on the LEFT) */
.mobile-drawer-backdrop.drawer-left {
    justify-content: flex-start !important;
}

.mobile-drawer-sheet {
    position: relative;
    z-index: 1000000 !important;
    width: min(320px, 86vw);
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--border-soft);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
    animation: drawerSlideInRight 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Left-Side Sheet Styles & Smooth Slide from Left */
.mobile-drawer-backdrop.drawer-left .mobile-drawer-sheet,
.mobile-drawer-sheet.drawer-left-sheet {
    border-left: none !important;
    border-right: 1px solid var(--border-soft) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.6) !important;
    animation: drawerSlideInLeft 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="light"] .mobile-drawer-sheet {
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mobile-drawer-backdrop.drawer-left .mobile-drawer-sheet,
[data-theme="light"] .mobile-drawer-sheet.drawer-left-sheet {
    border-left: none !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1) !important;
}

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

@keyframes drawerSlideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes drawerSlideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 550;
    transition: all .16s ease;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
    color: var(--orange);
    background: var(--pill-active-bg);
}

[data-theme="light"] .mobile-nav-link:hover, [data-theme="light"] .mobile-nav-link.active {
    color: color-mix(in srgb, var(--orange) 78%, #000000);
    background: #fff7ed;
}

/* =========================================================
   CUSTOM DROPDOWN MENUS (IN SITE DESIGN)
========================================================= */
.custom-select-wrap {
    position: relative;
    display: inline-block;
}

.custom-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.custom-select-trigger:hover, .custom-select-trigger.active {
    border-color: var(--border-highlight);
    color: var(--orange);
}

[data-theme="light"] .custom-select-trigger {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .custom-select-trigger:hover, [data-theme="light"] .custom-select-trigger.active {
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    color: color-mix(in srgb, var(--orange) 78%, #000000);
    background: #fff7ed;
}

/* Filter & Search Console Overflow Fix */
.filter-console-panel,
.glass-panel:has(.custom-select-wrap),
.glass-panel:has(form .custom-select-wrap) {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}

.custom-select-wrap {
    position: relative !important;
    display: inline-block;
    overflow: visible !important;
    z-index: 125 !important;
}

.custom-select-wrap.active,
.custom-select-wrap:focus-within,
.custom-select-wrap:has(.custom-select-dropdown[style*="display: flex"]),
.custom-select-wrap:has(.custom-select-dropdown[style*="display:flex"]) {
    z-index: 99999 !important;
}

.custom-select-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 220px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #0d131c !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(var(--orange-rgb), 0.45) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(var(--orange-rgb), 0.2) !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 9999999 !important;
}

[data-theme="light"] .custom-select-dropdown {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.15) !important;
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 550;
    color: var(--text-soft);
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.custom-select-option:hover, .custom-select-option.selected {
    background: rgba(var(--orange-rgb), 0.12);
    color: var(--orange);
}

[data-theme="light"] .custom-select-option {
    color: #334155;
}

[data-theme="light"] .custom-select-option:hover, [data-theme="light"] .custom-select-option.selected {
    background: #fff7ed !important;
    color: color-mix(in srgb, var(--orange) 78%, #000000) !important;
}

/* =========================================================
   TOOL AVATAR BOX (REPLACES HARDBOUND #102522)
========================================================= */
.tool-avatar-box {
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    object-fit: contain;
    border-radius: 8px;
    transition: all .2s ease;
}

[data-theme="light"] .tool-avatar-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* =========================================================
   MASTER UNIFIED DASHBOARD THEME ARCHITECTURE
   (100% Theme Adaptive in Dark & Light Modes)
   App-Shell Architecture: Frozen Sticky Sidebar + Smooth Content Scroll
========================================================= */
.admin-layout-root, .user-layout-root {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden; /* Viewport frame stays fixed; internal main-wrap handles vertical scroll */
    background: var(--bg);
    color: var(--text);
    transition: background .3s ease, color .3s ease;
}

[data-theme="light"] .admin-layout-root,
[data-theme="light"] .user-layout-root {
    background: #f8fafc;
    color: #0f172a;
}

.admin-sidebar, .user-sidebar {
    width: 260px;
    height: 100%;
    max-height: 100dvh;
    flex-shrink: 0;
    position: relative;
    top: 0;
    background: #0d1218;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 20px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: all .25s ease;
}

[data-theme="light"] .admin-sidebar,
[data-theme="light"] .user-sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
}

.admin-main-wrap, .user-main-wrap {
    flex: 1;
    min-width: 0;
    height: 100%;
    max-height: 100dvh;
    overflow-y: auto; /* All page content, cards, tables, forms scroll smoothly HERE! */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.admin-topbar, .user-topbar {
    height: 64px;
    position: sticky;
    top: 0;
    background: rgba(8, 12, 16, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
    transition: all .25s ease;
}

[data-theme="light"] .admin-topbar,
[data-theme="light"] .user-topbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e2e8f0;
}

.admin-nav-item, .user-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    transition: all 0.16s ease;
    margin-bottom: 3px;
    border: 1px solid transparent;
}

[data-theme="light"] .admin-nav-item,
[data-theme="light"] .user-nav-item {
    color: #475569;
}

.admin-nav-item:hover, .user-nav-item:hover {
    color: var(--text);
    background: rgba(var(--orange-rgb), 0.08);
    border-color: rgba(var(--orange-rgb), 0.2);
}

[data-theme="light"] .admin-nav-item:hover,
[data-theme="light"] .user-nav-item:hover {
    color: color-mix(in srgb, var(--orange) 78%, #000000);
    background: #fff7ed;
    border-color: rgba(234, 88, 12, 0.2);
}

.admin-nav-item.active, .user-nav-item.active {
    color: var(--orange);
    background: rgba(var(--orange-rgb), 0.14);
    border-color: var(--border-highlight);
    font-weight: 650;
}

[data-theme="light"] .admin-nav-item.active,
[data-theme="light"] .user-nav-item.active {
    color: color-mix(in srgb, var(--orange) 78%, #000000);
    background: #fff7ed;
    border-color: rgba(234, 88, 12, 0.4);
    font-weight: 650;
}

.admin-nav-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 12px;
    background: rgba(var(--orange-rgb), 0.18);
    color: var(--orange);
    border: 1px solid rgba(var(--orange-rgb), 0.35);
    font-family: 'JetBrains Mono', monospace;
}

[data-theme="light"] .admin-nav-badge {
    background: #ffedd5;
    color: #c2410c;
    border-color: #fdba74;
}

.stat-card {
    background: var(--liquid-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--liquid-rim);
    backdrop-filter: blur(24px);
    transition: all .2s ease;
}

[data-theme="light"] .stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.05);
}

/* Dual-Theme Admin Sub-Strip & Partner Banners */
.stat-sub-strip {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-soft);
    transition: all .2s ease;
}

[data-theme="light"] .stat-sub-strip {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

.partner-banner-bar {
    background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.12) 0%, rgba(22, 27, 34, 0.95) 100%);
    border: 1px solid rgba(var(--orange-rgb), 0.35);
}

[data-theme="light"] .partner-banner-bar {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%) !important;
    border: 1px solid #fed7aa !important;
    box-shadow: 0 4px 16px -2px rgba(234, 88, 12, 0.06);
}

/* Master Form Input Controls */
.input,
input.admin-input,
select.admin-input,
textarea.admin-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text);
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[data-theme="light"] .input,
[data-theme="light"] input.admin-input,
[data-theme="light"] select.admin-input,
[data-theme="light"] textarea.admin-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.input:focus,
input.admin-input:focus,
select.admin-input:focus,
textarea.admin-input:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.15) !important;
}

.admin-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    background: var(--liquid-bg);
    backdrop-filter: blur(20px);
}

[data-theme="light"] .admin-table-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.04);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.admin-table th {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', monospace;
}

[data-theme="light"] .admin-table th {
    background: #f8fafc;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
}

[data-theme="light"] .admin-table td {
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.admin-table tr:hover td {
    background: rgba(var(--orange-rgb), 0.04);
    color: var(--text);
}

[data-theme="light"] .admin-table tr:hover td {
    background: #fffbf7;
    color: #0f172a;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge-published {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .status-badge-published {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-badge-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="light"] .status-badge-pending {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.status-badge-rejected {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .status-badge-rejected {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* =========================================================
   BENCHMARKS SECTION & CARDS
========================================================= */
.benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

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

.benchmark-card {
    padding: 22px;
    border-radius: 14px;
    background: var(--liquid-bg);
    border: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.benchmark-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-highlight);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 14px var(--orange-glow);
}

[data-theme="light"] .benchmark-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .benchmark-card:hover {
    box-shadow: 0 10px 25px -5px rgba(var(--orange-rgb), 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: color-mix(in srgb, var(--orange) 78%, #ffffff);
}

.benchmark-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.latency-bar-track {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

[data-theme="light"] .latency-bar-track {
    background: #e2e8f0;
}

.latency-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 78%, #ffffff), color-mix(in srgb, var(--orange) 78%, #000000));
    border-radius: 999px;
}

/* =========================================================
   SLEEK SLIM SCROLLBARS (ZERO WINDOWS DEFAULT SCROLLBAR)
========================================================= */
.sidebar-scroll,
.custom-scroll,
.admin-sidebar,
.user-sidebar,
aside {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--orange-rgb), 0.3) transparent;
}

.sidebar-scroll::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.user-sidebar::-webkit-scrollbar,
aside::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.sidebar-scroll::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.user-sidebar::-webkit-scrollbar-track,
aside::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.user-sidebar::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
    background: rgba(var(--orange-rgb), 0.25);
    border-radius: 999px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.custom-scroll::-webkit-scrollbar-thumb:hover,
.admin-sidebar::-webkit-scrollbar-thumb:hover,
.user-sidebar::-webkit-scrollbar-thumb:hover,
aside::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--orange-rgb), 0.6);
}

[data-theme="light"] .sidebar-scroll,
[data-theme="light"] .custom-scroll,
[data-theme="light"] .admin-sidebar,
[data-theme="light"] .user-sidebar,
[data-theme="light"] aside {
    scrollbar-color: #cbd5e1 transparent;
}

[data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb,
[data-theme="light"] .custom-scroll::-webkit-scrollbar-thumb,
[data-theme="light"] .admin-sidebar::-webkit-scrollbar-thumb,
[data-theme="light"] .user-sidebar::-webkit-scrollbar-thumb,
[data-theme="light"] aside::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

[data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .custom-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .admin-sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .user-sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="light"] aside::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================================================
   CUSTOM STYLED SELECT AND FORM CONTROLS
========================================================= */
select.form-control,
select.admin-input,
.form-select-styled,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px !important;
    background-color: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

select.form-control:focus,
select.admin-input:focus,
.form-select-styled:focus,
select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.18);
}

select option {
    background-color: #0b1118;
    color: #e2e8f0;
    padding: 8px 12px;
}

[data-theme="light"] select option {
    background-color: #ffffff;
    color: #0f172a;
}

[data-theme="light"] select.form-control,
[data-theme="light"] select.admin-input,
[data-theme="light"] .form-select-styled,
[data-theme="light"] select {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

.admin-input,
.form-input-styled {
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    font-family: inherit;
}

.admin-input:focus,
.form-input-styled:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.18);
}

[data-theme="light"] .admin-input,
[data-theme="light"] .form-input-styled {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .admin-input:focus,
[data-theme="light"] .form-input-styled:focus {
    border-color: color-mix(in srgb, var(--orange) 78%, #000000);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
}

/* =========================================================
   LUXURY PAGINATION ARCHITECTURE (FIX HUGE SVGS PERMANENTLY)
========================================================= */
nav[role="navigation"] svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.luxury-pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.luxury-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.luxury-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.luxury-pagination .page-link:hover:not(.disabled):not(.active) {
    background: rgba(var(--orange-rgb), 0.12);
    color: var(--orange);
    border-color: rgba(var(--orange-rgb), 0.25);
}

.luxury-pagination .page-link.active {
    background: var(--orange);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--orange-glow);
}

.luxury-pagination .page-link.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.luxury-pagination .page-icon {
    width: 14px !important;
    height: 14px !important;
}

.luxury-pagination .page-ellipsis {
    padding: 0 6px;
    font-size: 12px;
    color: var(--muted);
}

/* =========================================================
   LUXURY TAB BAR & ADMIN PILL NAVIGATION (IMAGE 3 FIX)
========================================================= */
.admin-tab-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 24px;
}

.admin-tab-nav::-webkit-scrollbar {
    display: none;
}

.admin-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: inherit;
}

.admin-tab-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.admin-tab-btn.active {
    background: var(--orange);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--orange-glow);
    border-color: transparent;
}

[data-theme="light"] .admin-tab-btn.active {
    background: color-mix(in srgb, var(--orange) 78%, #000000);
    color: #ffffff !important;
}

/* =========================================================
   UNIVERSAL FORM CONTROL STYLING & WHITE-FLASH SUPPRESSION
========================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-family: inherit;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.16);
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 36px !important;
    cursor: pointer;
}

[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select option {
    background-color: #0b0f17;
    color: #f1f5f9;
    padding: 8px 12px;
}

[data-theme="light"] select option {
    background-color: #ffffff;
    color: #0f172a;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="search"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* =========================================================
   QUILL RICH TEXT EDITOR (100% THEME ADAPTIVE & ANTI-SLOP)
========================================================= */
.quill-editor-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid var(--border-soft) !important;
    background: var(--card-bg-elevated) !important;
    padding: 10px 14px !important;
}

.ql-container.ql-snow {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid var(--border-soft) !important;
    border-top: none !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    min-height: 240px;
}

.ql-editor {
    min-height: 240px;
    color: var(--text) !important;
    line-height: 1.7 !important;
    font-size: 14px;
}

.ql-editor.ql-blank::before {
    color: var(--muted) !important;
    font-style: normal !important;
    font-size: 14px;
}

.ql-snow .ql-stroke {
    stroke: var(--text-soft) !important;
}

.ql-snow .ql-fill {
    fill: var(--text-soft) !important;
}

.ql-snow .ql-picker {
    color: var(--text-soft) !important;
}

.ql-snow .ql-picker-options {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
    padding: 6px !important;
}

.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
    color: var(--orange) !important;
}

[data-theme="light"] .ql-toolbar.ql-snow {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .ql-container.ql-snow {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .ql-editor {
    color: #0f172a !important;
}

[data-theme="light"] .ql-editor.ql-blank::before {
    color: #94a3b8 !important;
}

[data-theme="light"] .ql-snow .ql-stroke {
    stroke: #475569 !important;
}

[data-theme="light"] .ql-snow .ql-fill {
    fill: #475569 !important;
}

[data-theme="light"] .ql-snow .ql-picker {
    color: #475569 !important;
}

/* =========================================================
   DE-CLUTTERED NAV AI PILL & ACTIONS
========================================================= */
.nav-ai-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: rgba(var(--orange-rgb), 0.12) !important;
    border: 1px solid rgba(var(--orange-rgb), 0.28) !important;
    color: var(--orange) !important;
    transition: all 0.2s ease !important;
}

.nav-ai-pill:hover,
.nav-ai-pill.active {
    background: rgba(var(--orange-rgb), 0.22) !important;
    border-color: rgba(var(--orange-rgb), 0.5) !important;
    box-shadow: 0 0 12px rgba(var(--orange-rgb), 0.3) !important;
    color: var(--orange) !important;
    transform: translateY(-1px);
}

[data-theme="light"] .nav-ai-pill {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
    color: color-mix(in srgb, var(--orange) 78%, #000000) !important;
}

/* =========================================================
   LUXURY ENTERPRISE FOOTER (ANTI-SLOP PROPER DESIGN)
========================================================= */
.footer {
    background: #05080e;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    padding-top: 56px;
    padding-bottom: 32px;
    margin-top: 72px;
    overflow: hidden;
}

[data-theme="light"] .footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 180px;
    background: radial-gradient(ellipse at center, rgba(var(--orange-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Footer Newsletter Section */
.footer-newsletter-wrap {
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
    padding: 30px 36px;
    border-radius: 18px;
    background: rgba(13, 19, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    backdrop-filter: blur(16px);
}

[data-theme="light"] .footer-newsletter-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
}

.footer-newsletter-info h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}

.footer-newsletter-info p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 520px;
    margin: 0;
}

.footer-newsletter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.footer-newsletter-input {
    width: 270px;
    padding: 10px 15px;
    border-radius: 9px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

.footer-newsletter-input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.15);
}

.footer-newsletter-btn {
    padding: 10px 20px;
    border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 78%, #ffffff) 0%, var(--orange) 100%);
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--orange-rgb), 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.footer-newsletter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--orange-rgb), 0.45);
}

/* Footer Main Columns Grid */
.footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 1.1fr 1.1fr 1.1fr 1.1fr;
    gap: 40px;
    margin-bottom: 48px;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .footer-newsletter-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-newsletter-form {
        width: 100%;
    }
    .footer-newsletter-input {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .footer-newsletter-form {
        flex-direction: column;
        width: 100%;
    }
    .footer-newsletter-input,
    .footer-newsletter-btn {
        width: 100%;
    }
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-brand-p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 320px;
    margin: 0;
}

.status-indicator-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #22c55e;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    width: fit-content;
}

.footer-social-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.footer-social-link {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

[data-theme="light"] .footer-social-link {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

.footer-social-link:hover {
    color: var(--orange);
    border-color: var(--orange);
    background: rgba(var(--orange-rgb), 0.1);
    transform: translateY(-2px);
}

.footer-col h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-col a {
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.footer-col a:hover {
    color: var(--orange);
    transform: translateX(3px);
}

/* Footer Bottom Bar */
.footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border-soft);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: var(--orange);
}

/* =========================================================
   RESPONSIVE FORM GRID & MOBILE ANTI-OVERFLOW RULES
========================================================= */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* =========================================================
   ZERO-CLS RESPONSIVE AD SLOTS (GOOGLE ADSENSE READY)
========================================================= */
.ad-slot-wrapper {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-soft);
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

[data-theme="light"] .ad-slot-wrapper {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.ad-slot-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.75;
}

.ad-slot-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ad-slot-content ins.adsbygoogle {
    display: block !important;
    margin: 0 auto;
}

/* Header Leaderboard (728x90 desktop / 320x100 mobile min-height) */
.ad-slot-header {
    margin-top: 20px;
    margin-bottom: 24px;
    min-height: 110px;
}

/* Footer Leaderboard (728x90 desktop / 320x100 mobile min-height) */
.ad-slot-footer {
    margin-top: 36px;
    margin-bottom: 24px;
    min-height: 110px;
}

/* In-Feed Native Ad Card (Inside Directory / Home Tool Grid) */
.ad-slot-infeed {
    min-height: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(var(--orange-rgb), 0.03);
    border: 1px dashed rgba(var(--orange-rgb), 0.25);
    border-radius: 14px;
    padding: 18px;
}

[data-theme="light"] .ad-slot-infeed {
    background: #fff8f5;
    border-color: #ffd8cc;
}

/* Tool Detail Sidebar Banner (300x250 or 336x280) */
.ad-slot-sidebar {
    min-height: 270px;
    margin-bottom: 24px;
}

/* Blog In-Article Banners */
.ad-slot-blog {
    margin: 28px 0;
    min-height: 120px;
    border-radius: 10px;
}

/* =========================================================
   TOOL DETAIL ACTION TOOLBAR & PILLS (HIGH-POLISH UX)
========================================================= */
.tool-actions-toolbar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tool-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.16s ease-in-out;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}

.tool-action-pill i,
.tool-action-pill svg {
    width: 15px;
    height: 15px;
    color: var(--text-soft);
    transition: color 0.16s ease, transform 0.16s ease;
    flex-shrink: 0;
}

.tool-action-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
}

.tool-action-pill:hover i,
.tool-action-pill:hover svg {
    color: #ffffff;
}

.tool-action-pill:active {
    transform: translateY(0);
}

/* Active / Voted / Saved state */
.tool-action-pill.active {
    background: rgba(var(--orange-rgb), 0.12);
    border-color: rgba(var(--orange-rgb), 0.45);
    color: var(--orange);
}

.tool-action-pill.active i,
.tool-action-pill.active svg {
    color: var(--orange);
    fill: currentColor;
}

.tool-action-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-left: 2px;
}

.tool-action-pill.active .tool-action-count {
    background: rgba(var(--orange-rgb), 0.22);
    color: var(--orange);
}

/* Primary CTA: Visit Website */
.tool-action-pill-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 78%, #ffffff) 0%, var(--orange) 100%);
    border: 1px solid rgba(var(--orange-rgb), 0.4);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--orange-rgb), 0.35);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}

.tool-action-pill-primary i,
.tool-action-pill-primary svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
    transition: transform 0.18s ease;
}

.tool-action-pill-primary:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 68%, #ffffff) 0%, color-mix(in srgb, var(--orange) 78%, #000000) 100%);
    box-shadow: 0 6px 20px rgba(var(--orange-rgb), 0.5);
    transform: translateY(-1px);
    color: #ffffff !important;
}

.tool-action-pill-primary:hover i,
.tool-action-pill-primary:hover svg {
    transform: translate(1px, -1px);
}

/* Light Theme Support */
[data-theme="light"] .tool-action-pill {
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.9);
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .tool-action-pill i,
[data-theme="light"] .tool-action-pill svg {
    color: #64748b;
}

[data-theme="light"] .tool-action-pill:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

[data-theme="light"] .tool-action-pill:hover i,
[data-theme="light"] .tool-action-pill:hover svg {
    color: #0f172a;
}

[data-theme="light"] .tool-action-pill.active {
    background: #fff7ed;
    border-color: #fdba74;
    color: color-mix(in srgb, var(--orange) 78%, #000000);
}

[data-theme="light"] .tool-action-pill.active i,
[data-theme="light"] .tool-action-pill.active svg {
    color: color-mix(in srgb, var(--orange) 78%, #000000);
}

[data-theme="light"] .tool-action-count {
    background: #f1f5f9;
    color: #334155;
}

[data-theme="light"] .tool-action-pill.active .tool-action-count {
    background: #ffedd5;
    color: color-mix(in srgb, var(--orange) 78%, #000000);
}

/* =========================================================
   v1.4.3 — PHONE LAYOUT FIXES (admin index/create/settings)
   Collapse inline multi-column grids to one column on phones so
   forms and settings panels never squeeze or overflow horizontally.
   Grids using auto-fit/auto-fill are already responsive — untouched.
========================================================= */
@media (max-width: 640px) {
    .admin-content { padding: 14px 12px !important; }
    .glass-panel { padding: 16px !important; border-radius: 14px; }
    div[style*="grid-template-columns:"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
        grid-template-columns: 1fr !important;
    }
    .admin-tab-btn { padding: 8px 12px; font-size: 11px; }
    .admin-topbar { gap: 8px; }
}

/* =========================================================
   v1.4.3 — TAB BAR SCROLL: wheel + drag + prev/next buttons
   The settings tab bar hides its scrollbar; these make every tab
   reachable by mouse wheel, drag, touch, or arrow buttons.
========================================================= */
.admin-tab-scroll-wrap {
    position: relative;
    margin-bottom: 24px;
}
.admin-tab-scroll-wrap .admin-tab-nav {
    margin-bottom: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.admin-tab-scroll-wrap .admin-tab-nav.dragging {
    cursor: grabbing;
}
.admin-tab-scroll-wrap .admin-tab-nav.dragging .admin-tab-btn {
    pointer-events: none;
}
.admin-tab-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--surface-card);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.admin-tab-scroll-wrap.has-scroll .admin-tab-scroll-btn {
    display: inline-flex;
}
.admin-tab-scroll-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.admin-tab-scroll-prev { left: -8px; }
.admin-tab-scroll-next { right: -8px; }

/* ============================================================
   v1.4.5 — Admin pane-motion system (formalised tokens).
   Previously an inline <style> duplicated in both admin shells;
   now defined once here (both shells load jarvis.css).
   ============================================================ */
:root {
    --ease: cubic-bezier(.22,.8,.24,1);
    --spring: cubic-bezier(.34,1.45,.55,1);
    --dur-enter: .5s;
    --dur-micro: .18s;
    --dur-indicator: .38s;
    --stagger: .04s;
}
@keyframes adm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.admin-content > * { animation: adm-rise var(--dur-enter) var(--ease) both; }
.admin-content > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.admin-content > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.admin-content > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.admin-content > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.admin-content > *:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.admin-content > *:nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.admin-content > *:nth-child(8) { animation-delay: calc(var(--stagger) * 7); }
/* Re-trigger the entrance after an AJAX swap (router toggles .spa-enter). */
.admin-content.spa-enter > * { animation: adm-rise var(--dur-enter) var(--ease) both; }
.admin-nav-item { position: relative; transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro), transform var(--dur-micro); }
.admin-nav-item::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 3px; background: var(--orange, #FF6B35);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--dur-indicator) var(--spring);
}
.admin-nav-item.active::before, .admin-nav-item:hover::before { transform: scaleY(1); }
.admin-nav-item:active { transform: scale(.985); }
/* Sliding indicator — one bar that glides between items on AJAX nav.
   The router adds .spa-on to the sidebar and positions this bar; the
   per-item ::before bars remain the full-load / no-JS fallback. */
.admin-nav-indicator {
    position: absolute; left: 0; top: 0; width: 3px; height: 30px; border-radius: 3px;
    background: var(--orange, #FF6B35); opacity: 0; pointer-events: none; z-index: 3;
    transition: transform var(--dur-indicator) var(--spring), opacity .2s var(--ease);
}
.admin-sidebar.spa-on .admin-nav-item::before { display: none; }
.btn-primary, .btn-secondary, button[type="submit"] { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.admin-table-wrap { animation: adm-rise var(--dur-enter) var(--ease) both; }
/* AJAX router progress bar (feedback only — never blocks). */
#admin-spa-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999;
    background: var(--orange, #FF6B35); opacity: 0; pointer-events: none;
    transition: width .3s var(--ease), opacity .25s var(--ease);
}
#admin-spa-progress.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .admin-content > *, .admin-table-wrap { animation: none; }
    .admin-nav-item::before, .admin-nav-indicator { transition: none; }
    #admin-spa-progress { display: none; }
}


/* ============================================================
   B82 — CLIENT AUDIT FIXES (10-agent sweep, 2026-10-21)
   ============================================================ */
/* ============================================================
   AGENT 10 — confident CSS fixes (append-only overrides)
   Each block names the stylesheet it belongs in:
   [jarvis]  -> public/css/jarvis-v4.css
   [pastel]  -> public/css/pastel-v15.css
   Findings reference agent-10-global.md.
   ============================================================ */


/* ------------------------------------------------------------
   [jarvis] JARVIS-1 — Finding A1 (+ C5, A4): define the phantom
   tokens. --card-bg, --card-bg-elevated, --bg-card,
   --text-heading, --font-sans and --shadow-lg are USED in
   jarvis-v4.css / blades but DEFINED nowhere, so every
   `background: var(--card-bg) !important` computed to
   transparent (Quill toolbar + picker dropdown ghost panels,
   language dropdown ghost panel, Razorpay advertise card).
   Aliasing them to the real tokens repairs all of them at
   once. In the pastel admin these resolve through
   pastel-admin's own --surface-card (#FFFFFF) — correct there.
   ------------------------------------------------------------ */
:root, :root[data-theme="dark"] {
    --card-bg: var(--surface-card);
    --card-bg-elevated: var(--surface-card);
    --bg-card: var(--surface-card);
    --text-heading: var(--text);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] {
    --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
}


/* ------------------------------------------------------------
   [jarvis] JARVIS-2 — Finding A2: jarvis-v4.css never declares
   color-scheme, so the dark admin/original UI gets light
   native chrome (main scrollbar, select popups, date/file
   inputs). Declare it per theme.
   ------------------------------------------------------------ */
:root, :root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }


/* ------------------------------------------------------------
   [jarvis] JARVIS-3 — Finding A3/B3: no :-webkit-autofill rule
   exists anywhere, so Chrome paints autofilled fields pale
   yellow/white with dark text inside the dark glass inputs
   (login, register, admin forms). Inset-shadow in a surface
   tone + theme text-fill keeps filled fields on-theme.
   ------------------------------------------------------------ */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 100px #12161d inset;
    transition: background-color 99999s ease-in-out 0s;
}
:root[data-theme="light"] input:-webkit-autofill,
:root[data-theme="light"] input:-webkit-autofill:hover,
:root[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 100px #ffffff inset;
    transition: background-color 99999s ease-in-out 0s;
}


/* ------------------------------------------------------------
   [jarvis] JARVIS-4 — Finding A5: no ::selection style in
   jarvis (both other stylesheets define one). Brand-tinted
   selection for dark + light.
   ------------------------------------------------------------ */
:root[data-theme="dark"] ::selection { background: rgba(255, 107, 53, .38); color: #ffffff; }
:root[data-theme="light"] ::selection { background: rgba(234, 88, 12, .25); color: #0f172a; }



/* ------------------------------------------------------------
   §B — Admin blog editor (Quill snow): the header-format dropdown.
   Root cause (agent-7-blog.md §B2): jarvis-v4.css:4130 styles
   .ql-picker-options with background: var(--card-bg) !important,
   but --card-bg is defined NOWHERE in the app, so the declaration
   is invalid at computed-value time and the panel renders
   TRANSPARENT over the editor text. The toolbar has the same
   defect via the also-undefined --card-bg-elevated (line 4088).
   Stock quill.snow.css additionally renders header picker items
   at true heading sizes (2em / 1.5em / 1.17em ::before), which is
   why the open menu looks like giant headings stacked on the text.
   Fix: solid theme-correct surfaces + uniform menu-sized items.
   (Admin shell defaults to data-theme="dark"; light covered too.)
   ------------------------------------------------------------ */
.ql-toolbar.ql-snow {
    background: #12161e !important;
}
.ql-snow .ql-picker-options {
    background: #161b24 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    padding: 6px !important;
    z-index: 30;
}
[data-theme="light"] .ql-toolbar.ql-snow {
    background: #f8fafc !important;
}
[data-theme="light"] .ql-snow .ql-picker-options {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
}

/* Uniform menu items: kill the stock heading-size previews
   (quill.snow.css .ql-picker.ql-header .ql-picker-item[data-value="1..3"]::before). */
.ql-snow .ql-picker.ql-header .ql-picker-item::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    font-size: 13px !important;
    line-height: 1.35;
}
.ql-snow .ql-picker-options .ql-picker-item {
    display: block;
    padding: 6px 8px;
    border-radius: 5px;
    line-height: 1.35;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before {
    font-size: 13px;
    line-height: 22px;
}

/* ================= ROUND-2 SWEEP (B84) ================= */
/* ============================================================
   AGENT 3 (round 2) — ORIGINAL theme, public pages, light + dark
   Append AFTER jarvis-v5.css content (rides the next jarvis-v*.css
   build). Every rule is contrast-verified; ratios in the report
   agent-3-original-public.md.
   ============================================================ */

/* ---------- O-1: white text on the orange CTA gradient fails in
   BOTH modes (dark 2.3–2.8:1, light 2.7–3.6:1 for 12–13px bold).
   Move the CTA/active surfaces to the deep-orange range, where
   white passes (5.2:1 at #C2410C, 7.3:1 at #9A3412), keeping the
   orange identity. Covers .btn-primary, the Visit-Website pill,
   homepage filter tabs and the pagination active number. */
.btn-primary,
.tool-action-pill-primary,
.filter-tab-btn.active {
    background: linear-gradient(135deg, #C2410C 0%, #9A3412 100%) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.tool-action-pill-primary:hover {
    background: linear-gradient(135deg, #9A3412 0%, #7C2D12 100%) !important;
    color: #ffffff !important;
}
.luxury-pagination .page-link.active {
    background: #C2410C;
    color: #ffffff !important;
}
/* Same white-on-orange signature in the shared tab rule (dashboard
   tabs consume it too — one fix, both shells). */
.admin-tab-btn.active {
    background: #C2410C;
    color: #ffffff !important;
}
/* White-text chips painted inline with background:var(--orange)
   (e.g. the homepage spec table's POPULAR badge, 9px). */
[style*="background:var(--orange)"][style*="color:#fff"],
[style*="background: var(--orange)"][style*="color:#fff"] {
    background: #C2410C !important;
}

/* ---------- O-3: muted tokens sit a hair under 4.5:1 where they
   carry real text (section descriptions, nav, placeholders). */
:root[data-theme="light"] {
    --muted: #57687E;   /* 5.2:1 on the light page bg (was 4.3) */
    --muted2: #64748B;  /* 4.7:1 on white inputs (was 2.6) */
}
:root, :root[data-theme="dark"] {
    --muted2: #7D8590;  /* 5.4:1 on the dark bg (was 4.1) */
}

/* ---------- O-2/O-6: LIGHT mode only — the hard-coded Tailwind
   400/500 hexes used as small inline TEXT across tool-detail,
   advertise, checkout, compare, guides, upcoming and the layout
   flash are tuned for dark surfaces and fall to 1.7–3.7:1 on
   white. Darken each signature to its 600/700 counterpart
   (4.8–6.7:1). Static elements only; the dark screenshot lightbox
   uses #e2e8f0 text and is untouched. */
:root[data-theme="light"] [style*="color:#22c55e"],
:root[data-theme="light"] [style*="color:#4ade80"] { color: #15803D !important; }
:root[data-theme="light"] [style*="color:#3b82f6"],
:root[data-theme="light"] [style*="color:#60a5fa"] { color: #1D4ED8 !important; }
:root[data-theme="light"] [style*="color:#f87171"],
:root[data-theme="light"] [style*="color: #f87171"],
:root[data-theme="light"] [style*="color:#ef4444"] { color: #DC2626 !important; }
:root[data-theme="light"] [style*="color:#eab308"],
:root[data-theme="light"] [style*="color:#fbbf24"] { color: #A16207 !important; }
:root[data-theme="light"] [style*="color:#a78bfa"] { color: #7C3AED !important; }
:root[data-theme="light"] [style*="color:#38bdf8"] { color: #0369A1 !important; }
:root[data-theme="light"] [style*="color:#ec4899"] { color: #DB2777 !important; }
/* Small orange labels set inline via the token (category labels,
   "Read Deep-Dive", spec-table headers) — #ea580c is 3.6:1. */
:root[data-theme="light"] [style*="color:var(--orange)"],
:root[data-theme="light"] [style*="color: var(--orange)"] { color: #C2410C !important; }
/* Class-based members of the same families. */
:root[data-theme="light"] .section-tag { color: #C2410C; }
:root[data-theme="light"] .status-indicator-footer { color: #15803D; }

/* ---------- O-4: article + CMS prose links had NO rule anywhere
   (browser-default blue: 2.1:1 on the dark bg, off-brand on
   light). Brand them and keep the underline as a non-color cue. */
.blog-article-content a,
.dynamic-page-content a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}
:root[data-theme="light"] .blog-article-content a,
:root[data-theme="light"] .dynamic-page-content a { color: #C2410C; }
/* Inline code in articles: orange on the light code plate was
   3.1:1; deepen in light (plate override already exists). */
:root[data-theme="light"] .blog-article-content code { color: #9A3412; }


/* ============================================================
   AGENT 7 (round 2) — ORIGINAL admin + member dashboard fixes.
   Append-only: paste at the END of public/css/jarvis-v5.css.
   Findings reference agent-7-original-admin-dash.md.
   All light-mode text fixes are scoped to the two shell roots
   (.admin-layout-root / .user-layout-root) so the dark-only
   admin auth pages (login / 2FA), which reuse some of the same
   hexes on dark surfaces, are NOT affected.
   ============================================================ */

/* ------------------------------------------------------------
   §1 — A7-1 + A7-3: bright dark-theme hexes used as TEXT fail
   in light mode (flash banners 1.67–3.76:1, claims 1.74:1,
   languages banners, tools/edit labels, coupon stats,
   sales-inquiry filters). The hex lives in the `color:`
   declaration of static inline styles (server-rendered, never
   rewritten by Alpine), so match it in the style attribute and
   swap in a ≥4.55:1 light-mode equivalent. `background:` uses
   of the same hexes (status dots) are deliberately untouched.
   ------------------------------------------------------------ */
[data-theme="light"] .admin-layout-root [style*="color:#22c55e"],
[data-theme="light"] .admin-layout-root [style*="color: #22c55e"],
[data-theme="light"] .admin-layout-root [style*="color:#4ade80"],
[data-theme="light"] .admin-layout-root [style*="color: #4ade80"],
[data-theme="light"] .user-layout-root [style*="color:#22c55e"],
[data-theme="light"] .user-layout-root [style*="color: #22c55e"],
[data-theme="light"] .user-layout-root [style*="color:#4ade80"],
[data-theme="light"] .user-layout-root [style*="color: #4ade80"] {
    color: #15803d !important;
}

[data-theme="light"] .admin-layout-root [style*="color:#fbbf24"],
[data-theme="light"] .admin-layout-root [style*="color: #fbbf24"],
[data-theme="light"] .user-layout-root [style*="color:#fbbf24"],
[data-theme="light"] .user-layout-root [style*="color: #fbbf24"] {
    color: #b45309 !important;
}

[data-theme="light"] .admin-layout-root [style*="color:#f87171"],
[data-theme="light"] .admin-layout-root [style*="color: #f87171"],
[data-theme="light"] .admin-layout-root [style*="color:#ef4444"],
[data-theme="light"] .admin-layout-root [style*="color: #ef4444"],
[data-theme="light"] .user-layout-root [style*="color:#f87171"],
[data-theme="light"] .user-layout-root [style*="color: #f87171"],
[data-theme="light"] .user-layout-root [style*="color:#ef4444"],
[data-theme="light"] .user-layout-root [style*="color: #ef4444"] {
    color: #dc2626 !important;
}

[data-theme="light"] .admin-layout-root [style*="color:#3b82f6"],
[data-theme="light"] .admin-layout-root [style*="color: #3b82f6"],
[data-theme="light"] .admin-layout-root [style*="color:#60a5fa"],
[data-theme="light"] .admin-layout-root [style*="color: #60a5fa"],
[data-theme="light"] .user-layout-root [style*="color:#3b82f6"],
[data-theme="light"] .user-layout-root [style*="color: #3b82f6"],
[data-theme="light"] .user-layout-root [style*="color:#60a5fa"],
[data-theme="light"] .user-layout-root [style*="color: #60a5fa"] {
    color: #2563eb !important;
}

[data-theme="light"] .admin-layout-root [style*="color:#ff6b35"],
[data-theme="light"] .admin-layout-root [style*="color: #ff6b35"],
[data-theme="light"] .user-layout-root [style*="color:#ff6b35"],
[data-theme="light"] .user-layout-root [style*="color: #ff6b35"] {
    color: #c2410c !important;
}

[data-theme="light"] .admin-layout-root [style*="color:#9ca3af"],
[data-theme="light"] .admin-layout-root [style*="color: #9ca3af"],
[data-theme="light"] .user-layout-root [style*="color:#9ca3af"],
[data-theme="light"] .user-layout-root [style*="color: #9ca3af"] {
    color: #64748b !important;
}

/* ------------------------------------------------------------
   §2 — A7-2: black-translucent "code wells" with orange text
   are invisible in light mode (api-keys curl <pre> ≈1.0:1,
   affiliate referral input 1.9:1, scraper URL chip ≈2.4:1).
   Chained attribute selectors match ONLY elements that pair
   the black well with color:var(--orange); in light mode give
   them the solid dark well the design intends in both themes.
   ------------------------------------------------------------ */
[data-theme="light"] .admin-layout-root [style*="background:rgba(0,0,0,0.25)"][style*="color:var(--orange)"],
[data-theme="light"] .admin-layout-root [style*="background:rgba(0,0,0,0.3)"][style*="color:var(--orange)"],
[data-theme="light"] .admin-layout-root [style*="background:rgba(0,0,0,0.5)"][style*="color:var(--orange)"],
[data-theme="light"] .user-layout-root [style*="background:rgba(0,0,0,0.25)"][style*="color:var(--orange)"],
[data-theme="light"] .user-layout-root [style*="background:rgba(0,0,0,0.3)"][style*="color:var(--orange)"],
[data-theme="light"] .user-layout-root [style*="background:rgba(0,0,0,0.5)"][style*="color:var(--orange)"] {
    background-color: #111827 !important;
}

/* ------------------------------------------------------------
   §3 — A7-4: notifications dropdown is transparent in dark
   mode (inline background:var(--input-bg) = 4.5% white, no
   backdrop-filter). Force a real surface. The x-show panel is
   the only div[x-show] inside either topbar (the mobile
   drawer lives outside the header). Also give the bell
   button a visible fill in light mode (its inline
   rgba(255,255,255,0.05) is white-on-white there).
   ------------------------------------------------------------ */
:root[data-theme="dark"] .admin-topbar div[x-show],
:root[data-theme="dark"] .user-topbar div[x-show] {
    background: var(--surface-card) !important;
}

:root:not(.pastel-admin)[data-theme="light"] .admin-topbar div[x-data] > button,
:root:not(.pastel-admin)[data-theme="light"] .user-topbar div[x-data] > button {
    background: #f1f5f9 !important;
}

/* ------------------------------------------------------------
   §4 — A7-5: define the two remaining phantom tokens, next to
   the JARVIS-1 alias family. --font-mono is used (no fallback)
   by 9 admin/dashboard blades; --bg-glass by the menus
   "Parent:" chip (background currently computes to
   transparent).
   ------------------------------------------------------------ */
:root, :root[data-theme="dark"] {
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --bg-glass: var(--surface-2);
}
:root[data-theme="light"] {
    --bg-glass: var(--surface-2);
}

/* ------------------------------------------------------------
   §5 — A7-6: keyboard focus. jarvis-v5.css has zero
   :focus-visible rules; inputs are covered by :focus styles,
   but buttons, nav items, the theme toggle and drawer links
   rely on the UA default outline. One designed brand ring
   for both shells (the drawer sits outside the layout root,
   so it is listed explicitly).
   ------------------------------------------------------------ */
.admin-layout-root :focus-visible,
.user-layout-root :focus-visible,
.mobile-drawer-backdrop :focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   §6 — A7-7: light-mode contrast for two topbar fixtures.
   Telemetry pill: #ea580c on its own 10% orange tint over the
   white topbar = 3.21:1 at 12px -> #c2410c = 4.66:1.
   Exit (.btn-danger-soft): #f87171 on the red tint = ~2.8:1
   in light -> #dc2626 / hover #b91c1c (dark mode unchanged).
   ------------------------------------------------------------ */
[data-theme="light"] .admin-topbar-telemetry {
    color: #c2410c !important;
    border-color: rgba(234, 88, 12, 0.45) !important;
}

[data-theme="light"] .btn-danger-soft {
    color: #dc2626;
}
[data-theme="light"] .btn-danger-soft:hover {
    color: #b91c1c;
}

/* ------------------------------------------------------------
   TARGET: public/css/jarvis-v5.css  (append at end)

   F1 — Autofill on the standalone dark shells (admin login,
   admin 2FA, installer). The JARVIS-3 rules are scoped to
   [data-theme="dark"] / [data-theme="light"], but those three
   shells never set data-theme on <html>, so neither rule
   matches and Chrome paints pale-yellow autofill inside the
   dark glass inputs. All three shells are dark-only and bare
   :root already resolves the dark tokens, so mirror the dark
   treatment for the no-light-attribute case.
   ------------------------------------------------------------ */
:root:not([data-theme="light"]) input:-webkit-autofill,
:root:not([data-theme="light"]) input:-webkit-autofill:hover,
:root:not([data-theme="light"]) input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 100px #12161d inset;
    transition: background-color 99999s ease-in-out 0s;
}


/* ------------------------------------------------------------
   TARGET: public/css/jarvis-v5.css  (append at end)

   F2 — Original homepage LIVE DEMO banner (pages/home.blade.php)
   is inline-styled for a dark page: #e8e8e8 text, #ff8c42 label,
   #ffb35c link on a translucent orange tint. In light mode the
   page behind is near-white and the banner text is ~1.2:1.
   The banner markup is static server-rendered HTML that no JS
   ever restyles, so attribute-substring matching is reliable
   here. (Durable alternative: class the banner in the blade,
   like the pastel .pv-demo-banner.)
   ------------------------------------------------------------ */
:root[data-theme="light"] div[style*="rgba(255,107,53,0.12)"] {
    color: #5b3013 !important;
}
:root[data-theme="light"] div[style*="rgba(255,107,53,0.12)"] span[style*="color: #ff8c42"] {
    color: #c2410c !important;
}
:root[data-theme="light"] div[style*="rgba(255,107,53,0.12)"] a[style*="color: #ffb35c"] {
    color: #c2410c !important;
}



/* ============================================================
   AGENT 9 (Round 2) — Admin editors & forms, pure-CSS fixes.
   Append to: public/css/jarvis-v5.css (loads in BOTH admin shells,
   before pastel-admin-v4.css; pastel-specific rules below win on
   specificity where they need to).
   Findings: agent-9-editors-forms.md (F4, F6, F3-CSS-half).
   F1/F2/F5 are blade/controller one-liners — not CSS-able.
   ============================================================ */


/* ------------------------------------------------------------
   §1 — F4: Quill surfaces never themed in jarvis-v5.
   (1) The link/image tooltip (.ql-tooltip) is stock white in
   every theme — in dark shells it opens as a bright white card.
   Give it the same surface family as the §B picker panel.
   ------------------------------------------------------------ */
:root[data-theme="dark"] .ql-snow .ql-tooltip {
    background: #161b24;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color: var(--text-soft);
}
:root[data-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
    background: #0d1117;
    border-color: #2a2f3a;
    color: var(--text);
}
:root[data-theme="dark"] .ql-snow .ql-tooltip a { color: #6CB2F5; }
:root[data-theme="dark"] .ql-snow .ql-tooltip a.ql-action::after {
    border-right-color: rgba(255, 255, 255, 0.18);
}

/* (2) Editor-internal content in dark: stock inline-code chip is
   #f0f0f0 with inherited (light) text — light on light. Mirror
   the pastel article's dark code chip. Editor links #06c is
   ~3.5:1 on the dark input surface — brighten. */
:root[data-theme="dark"] .ql-snow .ql-editor code {
    background: #26272C;
    color: #FFB08A;
}
:root[data-theme="dark"] .ql-snow .ql-editor a { color: #6CB2F5; }

/* (3) Expanded picker label: stock quill.snow.css sets the OPEN
   header picker's label (and its icons) to #ccc directly on the
   element, beating the inherited picker color — in light shells
   the label washes to ~1.6:1 on the white panel while the menu
   is open. Pin it to the theme's soft text color in both themes. */
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--text-soft) !important;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: var(--text-soft);
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: var(--text-soft);
}


/* ------------------------------------------------------------
   §3 — F3 (CSS half): admin flash banner text in LIGHT shells.
   admin/partials/flash.blade.php uses dark-theme text colors
   inline (#f87171 error / #22c55e success / #fbbf24 warning on
   an 8% tint) — ≈2.2–2.9:1 on light glass. Darken under
   [data-theme="light"] only; dark shells keep their values.
   The inline styles are server-rendered and never JS-mutated,
   so the attribute-signature match is stable (both shells).
   ------------------------------------------------------------ */
:root[data-theme="light"] #admin-flash [style*="color: #f87171"] {
    color: #B91C1C !important;
}
:root[data-theme="light"] #admin-flash [style*="color: #22c55e"] {
    color: #15803D !important;
}
:root[data-theme="light"] #admin-flash [style*="color: #fbbf24"] {
    color: #B45309 !important;
}

/* ------------------------------------------------------------
   [jarvis] J-1 — F1: reduced-motion for the PUBLIC Original
   theme. The existing block (jarvis-v5.css:4900) covers admin
   surfaces only; these are the infinite decorative loops and
   the toast/drawer entrances it misses. Targeted selectors on
   purpose: a global transition-duration override would break
   the B82 autofill paint-suppression transition
   (jarvis-v5.css:4963, not !important).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .radar-dot::after,
    .status-ping,
    .hero-pill-ping,
    .hero-visual-glow,
    .hero-visual-card,
    .hero-shimmer-sweep,
    .badge-top-right,
    .badge-bottom-left,
    .gradient-text,
    .shimmer-text { animation: none; }
    .toast,
    .mobile-drawer-backdrop,
    .mobile-drawer-sheet { animation: none; }
}

/* ------------------------------------------------------------
   [jarvis] J-2 — F3 + F5: pagination links are 32px everywhere
   this file serves (Original listings, admin, pastel admin).
   44px on coarse pointers; also lifts the pastel-admin shell,
   which loads this file first.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    .luxury-pagination .page-link { min-width: 44px; height: 44px; }
    .footer-social-link { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------
   [jarvis] J-3 — F10 (jarvis half): the file has ZERO
   :focus-visible rules. Inputs keep their existing :focus
   shadows; this designs the ring for links/buttons only.
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--orange, #FF6B35);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   [jarvis] J-4 — F11 (CSS half): toast severity variant.
   Pairs with a type argument on showToast() in jarvis-v3.js.
   ------------------------------------------------------------ */
.toast.toast-error {
    border-color: rgba(220, 38, 38, .55);
    background: rgba(80, 22, 16, .92);
    color: #FFD9C7;
}
[data-theme="light"] .toast.toast-error {
    background: #FEF2F2;
    color: #991B1B;
}

/* ------------------------------------------------------------
   [jarvis] J-5 — F9 (CSS half): skip link for the original
   shells. Pairs with one <a class="skip-link" href="#main">
   per layout and id="main" on the content wrapper.
   ------------------------------------------------------------ */
.skip-link {
    position: fixed; top: -60px; left: 16px; z-index: 1000000;
    background: var(--orange, #FF6B35); color: #fff; padding: 12px 18px;
    border-radius: 999px; font: 700 13px var(--font-sans, "Inter", sans-serif);
    text-decoration: none; transition: top .2s ease;
}
.skip-link:focus-visible { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ------------------------------------------------------------
   [jarvis] J-6 — F12 (CSS half, shared with P-8).
   ------------------------------------------------------------ */
form.is-submitting [type="submit"] { opacity: .65; pointer-events: none; }