:root {
    --c-obsidian: #050505;
    --c-obsidian-rgb: 5, 5, 5;
    --c-paper: #fcfcfc;
    --c-paper-rgb: 252, 252, 252;
    --c-kinetic: #ff3c00;
    /* High-VIS Orange */
    --c-void: #121212;
    --c-electric: #00f2ff;
    --c-subtle: #f4f4f4;
    --c-data-standard: #555555;
    /* Mid-Gray for better pop in Light Mode */

    --f-main: 'Outfit', sans-serif;
    --t-smooth: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-mobile-nav {
    display: none;
}

html {
    font-size: 85%;
    /* Global reduction */
}

.sidebar-close-btn {
    display: none;
}

[data-theme="dark"] {
    --c-obsidian: #fcfcfc;
    --c-obsidian-rgb: 252, 252, 252;
    --c-paper: #0f1011;
    --c-paper-rgb: 15, 16, 17;
    --c-void: #18191a;
    --c-subtle: #222426;
    --c-data-standard: #aaaaaa;
    /* Solid Light Gray for Dark Mode */
}

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

body {
    background-color: var(--c-paper);
    color: var(--c-obsidian);
    font-family: var(--f-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Hide scrollbar for Chrome, Safari and Opera */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for all elements */
* {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none;
}

input::placeholder,
textarea::placeholder {
    color: inherit;
    opacity: 0.6;
}

/* Layout - Asymmetric */
.section-speed-ex {
    padding: 6vh 5vw;
    position: relative;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Typography - Editorial */
.big-text {
    font-size: clamp(2rem, 9vw, 12rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    left: 1.5vw;
    top: 2rem;
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    opacity: 0.3;
    z-index: 1001;
}

[dir="rtl"] .vertical-text {
    left: auto;
    right: 1.5vw;
}

/* Modular Industrial Navigation */
/* Modular Industrial Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 7vw;
    z-index: 10000;
    pointer-events: none;
    background: transparent;
}

.nav-module {
    background: var(--c-paper);
    color: var(--c-obsidian);
    padding: 0.8rem 1.5rem;
    pointer-events: auto;
    box-shadow: 8px 8px 0 var(--c-obsidian);
    border: 2px solid var(--c-obsidian);
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: var(--t-fast);
}

[data-theme="dark"] .nav-module {
    background: var(--c-paper);
    color: var(--c-obsidian);
    box-shadow: 8px 8px 0 var(--c-kinetic);
    border-color: var(--c-obsidian);
}

.nav-logo {
    display: flex;
    align-items: center;
    font-weight: 1000;
    font-size: 1.4rem;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: inherit;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-links a,
.nav-select {
    color: inherit !important;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--t-fast);
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-links a:hover {
    color: var(--c-kinetic) !important;
}

.nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.hamburger {
    display: none;
}

.icon-btn,
.nav-btn {
    background: var(--c-paper);
    border: 2px solid var(--c-obsidian);
    color: var(--c-obsidian);
    padding: 0.5rem 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: var(--t-fast);
}

[data-theme="dark"] .icon-btn,
[data-theme="dark"] .nav-btn {
    background: var(--c-obsidian);
    color: var(--c-paper);
    border-color: var(--c-paper);
}

.nav-btn {
    background: var(--c-kinetic) !important;
    color: white !important;
    border-color: var(--c-obsidian) !important;
}

.icon-btn:hover {
    background: #ffffff;
    color: #000000;
}


/* Original Nav branding for Common Pages */


.nav-select {
    background: transparent;
    color: inherit;
    border: none;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 0.5rem 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Default Arrow (Black) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1rem;
    padding-right: 1.5rem;
}

[data-theme="dark"] .nav-select {
    /* White Arrow for Dark Mode */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.nav-select option {
    background: var(--c-kinetic);
    color: white;
    font-family: var(--f-main);
    padding: 1rem;
}

[data-theme="dark"] .nav-select option {
    background: var(--c-obsidian);
    color: var(--c-paper);
}

.mobile-menu-overlay .nav-select {
    width: 80% !important;
    margin: 1rem 0 !important;
    border: 2px solid var(--c-obsidian) !important;
    padding: 1.2rem !important;
    text-align: center !important;
    background-position: calc(100% - 1rem) center !important;
    font-size: 1.2rem !important;
    color: var(--c-obsidian) !important;
    /* Explicit Color */
}

[data-theme="dark"] .mobile-menu-overlay .nav-select {
    border-color: var(--c-paper) !important;
    color: var(--c-obsidian) !important;
    /* Ensure visibility in dark mode */
}

/* Dropdown Logic */
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--c-kinetic);
    min-width: 15rem;
    box-shadow: 10px 10px 0 var(--c-obsidian);
    border: 2px solid var(--c-obsidian);
    z-index: 1000;
    padding: 1rem 0;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    display: block;
    transition: var(--t-fast);
}

.dropdown-content a:hover {
    background: var(--c-obsidian);
    color: var(--c-kinetic);
    padding-left: 3rem;
}

.nav-links a::after {
    content: attr(data-id);
    position: absolute;
    top: -1rem;
    left: 0;
    font-size: 0.5rem;
    opacity: 0.5;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-module:hover {
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0 var(--c-obsidian);
}

[data-theme="dark"] .nav-module:hover {
    box-shadow: 15px 15px 0 var(--c-kinetic);
}

.nav-btn {
    padding: 0.5rem 1.5rem;
    background: var(--c-obsidian);
    color: var(--c-paper);
    border: none;
    font-weight: 900;
    font-size: 0.8rem;
    cursor: pointer;
}

[data-theme="dark"] .nav-btn {
    background: var(--c-paper);
    color: var(--c-obsidian);
}

.icon-btn {
    background: none;
    border: 2px solid currentColor;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 900;
    min-width: 45px;
    width: auto;
    padding: 0 10px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-toggle {
    width: 30px;
    height: 2px;
    background: var(--c-paper);
    position: relative;
}

.nav-toggle::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 100%;
    height: 2px;
    background: var(--c-paper);
}

/* Kinetic Image Stack */
.image-stack {
    position: relative;
    width: 100%;
    height: 80vh;
}

.image-layer {
    position: absolute;
    overflow: hidden;
    transition: var(--t-smooth);
}

.layer-1 {
    width: 40%;
    height: 60%;
    top: 10%;
    right: 5%;
    z-index: 3;
}

.layer-2 {
    width: 30%;
    height: 40%;
    bottom: 10%;
    left: 10%;
    z-index: 2;
    border: 1px solid var(--c-kinetic);
}

.layer-3 {
    width: 20%;
    height: 30%;
    top: 40%;
    left: 40%;
    z-index: 4;
}

.image-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: var(--t-smooth);
}

.image-layer:hover img {
    filter: grayscale(0);
    transform: scale(1.1);
}

/* Dynamic Cards - Brutalist */
.speed-ex-card {
    border-top: 5px solid currentColor;
    padding: 3rem 0;
    transition: var(--t-fast);
}

.speed-ex-card:hover {
    padding-left: 2rem;
    background: var(--c-kinetic);
    color: white;
}

/* RTL Hacks */
[dir="rtl"] .nav-logo {
    order: 2;
}

[dir="rtl"] .nav-links {
    order: 1;
}

[dir="rtl"] .vertical-text {
    left: auto;
    right: 2rem;
}

/* Footer */
main {
    min-height: 50vh;
    padding-bottom: 0;
}

footer {
    padding: 5vh 5vw;
    background: var(--c-obsidian);
    color: var(--c-paper);
    position: relative;
    overflow: hidden;
    border-top: 30px solid var(--c-kinetic);
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 5vw;
}

.footer-logo {
    font-size: 2.2rem;
    font-weight: 1000;
    margin-bottom: 2rem;
}

.footer-links h4 {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
    color: var(--c-kinetic);
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 1rem;
}

.footer-links ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.5;
    transition: var(--t-fast);
}

.footer-links ul li a:hover {
    opacity: 1;
    padding-left: 0.5rem;
}

.footer-bottom {
    margin-top: 10vh;
    padding-top: 5vh;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    opacity: 0.4;
}

/* Scroll Hide/Show */
.scroll-reveal {
    opacity: 0;
    transform: translateY(100px) skewY(5deg);
    transition: var(--t-smooth);
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0) skewY(0);
}

/* Mobile & Tablet Optimizations - Perfected Single Bar */
@media (max-width: 1024px) {

    html,
    body {
        padding-top: 6px !important;
        /* Clears the fixed top nav */
        overflow-x: hidden !important;
        width: 100vw !important;
        position: relative !important;
    }

    nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: var(--c-paper) !important;
        border: none !important;
        padding: 0 5vw !important;
        margin: 0 !important;
        z-index: 10000 !important;
        pointer-events: none !important;
    }

    .nav-module {
        background: var(--c-paper) !important;
        color: var(--c-obsidian) !important;
        padding: 4px 8px !important;
        pointer-events: auto !important;
        box-shadow: 4px 4px 0 var(--c-obsidian) !important;
        border: 2px solid var(--c-obsidian) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [data-theme="dark"] .nav-module {
        background: var(--c-obsidian) !important;
        color: var(--c-paper) !important;
        box-shadow: 6px 6px 0 var(--c-kinetic) !important;
        border-color: var(--c-paper) !important;
    }


    .nav-links a {
        display: flex !important;
        gap: 1.5rem !important;
        font-size: 0.75rem !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 900 !important;
    }

    .nav-links {
        display: none !important;
    }

    .nav-actions {
        display: flex !important;
        gap: 0.8rem !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: auto !important;
        color: var(--c-obsidian) !important;
    }

    [data-theme="dark"] .nav-actions {
        color: var(--c-paper) !important;
    }

    .nav-logo {
        font-size: 1rem !important;
        font-weight: 900 !important;
        color: inherit !important;
        line-height: 1 !important;
    }

    /* Hide toggles and login on small phones to make room for hamburger if needed */
    @media (max-width: 480px) {

        #theme-toggle,
        #rtl-toggle,
        .nav-btn {
            display: none !important;
        }
    }

    .icon-btn {
        color: inherit !important;
        border-color: inherit !important;
    }

    /* Hamburger Toggle Styles */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        padding: 5px;
        z-index: 12000;
        transition: var(--t-fast);
        width: 30px;
        height: 30px;
        flex-shrink: 0;
    }

    .hamburger span {
        display: block !important;
        width: 100%;
        height: 2px;
        background: var(--c-obsidian) !important;
        transition: var(--t-fast);
    }

    [data-theme="dark"] .hamburger span {
        background: var(--c-paper) !important;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .section-speed-ex {
        padding: 5vh 5vw !important;
    }

    .section-speed-ex:first-of-type,
    main>section:first-of-type {
        padding-top: 2rem !important;
        /* body padding handles the overlap */
    }

    .big-text {
        font-size: 11vw !important;
        line-height: 1 !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .footer-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    /* Force stack for layout containers - STRICT 100% */
    .section-speed-ex,
    .container,
    header,
    footer,
    main div[style*="grid"],
    main div[style*="flex"],
    .kinetic-card,
    .speed-ex-card,
    .team-grid,
    .specs-grid,
    .footer-grid,
    .core-layout,
    .terminal-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Recover grid/flex for data-heavy components & Charts */
    .terminal-grid *[style*="flex"],
    .core-layout *[style*="flex"],
    *[style*="grid-template-columns: repeat"],
    div[style*="display: grid; grid-template-columns: repeat"],
    div[style*="display: flex; align-items: flex-end"],
    /* Chart Bar Containers */
    .admin-stats,
    .admin-metrics,
    .chart-container,
    .node-traffic-analysis,
    div[style*="height: 350px"],
    /* Specifically protect bar containers */
    div[style*="height: 400px"] {
        display: flex !important;
        /* Most charts are flex */
    }

    /* HEATMAP PROTECTION - Restore 8-column grid with ULTRA specificity */
    /* Must beat .core-layout div[style*="padding: 3rem"] which forces 1fr */
    /* HEATMAP PROTECTION - Restore 8-column grid with ULTRA specificity */
    body .core-layout div[style*="repeat(8, 1fr)"],
    div[style*="repeat(8, 1fr)"] {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        overflow-x: auto !important;
        width: 100% !important;
        /* Confine to parent */
        max-width: 100vw !important;
        /* Strict limit */
        min-width: 0 !important;
        /* Allow shrink */
        padding: 1rem 0 !important;
        /* Remove horizontal padding */
        gap: 0.25rem !important;
        box-sizing: border-box !important;
    }

    /* Sticky First Column (City Names) */
    body .core-layout div[style*="repeat(8, 1fr)"]>div:nth-child(8n+1),
    div[style*="repeat(8, 1fr)"]>div:nth-child(8n+1) {
        position: sticky !important;
        left: 0 !important;
        background: var(--c-obsidian) !important;
        z-index: 10 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding-right: 0.5rem !important;
    }

    /* Wrap the heatmap parent to allow scroll */
    div[style*="repeat(8, 1fr)"]::after {
        content: '' !important;
        display: block !important;
        padding-right: 1rem !important;
    }

    /* Grid protection for metrics - catch all industrial grids */
    div[style*="grid-template-columns: repeat"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="display: grid"][style*="1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Force 1 column on mobile */
        width: 100% !important;
        max-width: 100% !important;
        gap: 1.5rem !important;
    }

    /* Metric Card Internal Padding Optimization */
    .terminal-grid div[style*="background: rgba(255,255,255,0.02)"] {
        padding: 1rem !important;
    }

    /* Dashboard Chart Mobile Scaling and Lockdown */
    .terminal-main div[style*="padding: 3rem 2rem"],
    .core-layout div[style*="padding: 3rem 2rem"],
    .terminal-main div[style*="padding: 3rem"],
    .core-layout div[style*="padding: 3rem"] {
        padding: 1rem 0.5rem !important;
        /* Tighter padding */
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Fix Y-Axis Label spacing - Prevent unwanted horizontal padding & VERTICAL ALIGNMENT */
    /* Robust selector: Target height 250px container that is NOT the chart box (no border) */
    .terminal-main div[style*="height: 250px"]:not([style*="border"]),
    .core-layout div[style*="height: 250px"]:not([style*="border"]) {
        padding: 0.5rem 0 !important;
        /* Match grid line inset (0.5rem) */
        width: auto !important;
        height: 250px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    /* Tighten gap between labels and chart */
    .terminal-main div[style*="display: flex; gap: 1rem;"],
    .core-layout div[style*="display: flex; gap: 1rem;"] {
        gap: 0.5rem !important;
    }

    /* Remove conflicting label padding rule */

    /* Heatmap Legend Wrap */
    .core-layout div[style*="justify-content: space-between"][style*="opacity: 0.5"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
    }

    /* Bar Chart Core Reset - Atomic Gravity Fix */
    .terminal-main div[style*="height: 350px"],
    .core-layout div[style*="height: 350px"] {
        height: 300px !important;
        gap: 0.2rem !important;
        padding-left: 2rem !important;
        display: flex !important;
        align-items: flex-end !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Individual Column (Bar + Name) */
    .terminal-main div[onmouseover],
    .core-layout div[onmouseover] {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        height: 100% !important;
        gap: 0.5rem !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Visible Bar Element - Insulate Geometry */
    .terminal-main div[onmouseover]>div[style*="height"],
    .core-layout div[onmouseover]>div[style*="height"] {
        width: 100% !important;
        position: relative !important;
        /* Anchor for the number */
        margin-top: auto !important;
        border-top: 2px solid var(--c-kinetic) !important;
    }

    /* Data Number (Floating Fix) */
    .terminal-main div[onmouseover] div[style*="position: absolute"],
    .core-layout div[onmouseover] div[style*="position: absolute"] {
        position: absolute !important;
        top: -1.4rem !important;
        /* Snug to the bar top */
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.7rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Force absolute labels back - Dashboard Only */
    .terminal-grid [style*="position: absolute"],
    .core-layout [style*="position: absolute"] {
        position: absolute !important;
    }

    /* Force legends to stack on mobile */
    .terminal-main div[style*="gap: 2rem"],
    .core-layout div[style*="gap: 2rem"] {
        gap: 1rem !important;
        flex-wrap: wrap !important;
        display: flex !important;
        justify-content: center !important;
    }

    .terminal-main span,
    .core-layout span {
        white-space: nowrap !important;
        font-size: 0.65rem !important;
    }

    /* Fix Revenue Chart Box - Specifically target the one with a border */
    .terminal-main div[style*="height: 250px"][style*="border"],
    .core-layout div[style*="height: 250px"][style*="border"] {
        height: 350px !important;
        min-height: 350px !important;
        width: auto !important;
        flex: 1 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.05) !important;
    }

    /* Fix internal grid lines - Specifically target the background grid */
    .terminal-main div[style*="justify-content: space-between"][style*="top"][style*="absolute"],
    .core-layout div[style*="justify-content: space-between"][style*="top"][style*="absolute"] {
        top: 1rem !important;
        bottom: 1rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        /* STACK GRID LINES VERTICALLY */
    }

    /* Fix chart label containers (X-Axis) - MUST be horizontal rows */
    .terminal-main div[style*="justify-content: space-between"][style*="bottom"][style*="absolute"]:not([style*="top"]),
    .core-layout div[style*="justify-content: space-between"][style*="bottom"][style*="absolute"]:not([style*="top"]) {
        flex-direction: row !important;
        /* SPREAD LABELS HORIZONTALLY */
        display: flex !important;
        top: auto !important;
        bottom: 0.2rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        padding: 0 !important;
    }

    /* SVG MAPPING FIX - Unified Mobile Padding */
    svg[preserveAspectRatio="none"] {
        height: 100% !important;
        width: 100% !important;
        padding: 0.5rem !important;
        /* Minimal padding */
        margin: 0 !important;
        overflow: visible !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
        display: block !important;
        /* Ensure it's not hidden */
    }

    /* Grid lines must match the SVG padding EXACTLY */
    .terminal-main div[style*="column; justify-content: space-between"][style*="bottom: 3rem"],
    .core-layout div[style*="column; justify-content: space-between"][style*="bottom: 3rem"] {
        padding: 0 !important;
        top: 0.5rem !important;
        bottom: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
    }

    /* FORCE VISIBILITY of Graph Lines */
    svg polyline,
    svg circle {
        vector-effect: non-scaling-stroke !important;
        opacity: 1 !important;
        display: block !important;
    }

    svg polyline:first-of-type {
        stroke: #ff3c00 !important;
        /* Force Kinetic Orange */
        stroke-width: 3px !important;
    }

    svg polyline:nth-of-type(2) {
        stroke: #999999 !important;
        /* Force Dark Grey */
        stroke-width: 2px !important;
        stroke-dasharray: 4, 4 !important;
    }

    html,
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .core-layout *[style*="font-size: 1.2rem"],
    .terminal-main *[style*="font-size: 1.5rem"],
    .core-layout *[style*="font-size: 1.5rem"],
    .terminal-main *[style*="font-size: 3rem"],
    .core-layout *[style*="font-size: 3rem"],
    .terminal-main *[style*="font-size: 0.8rem"]:not(h1):not(h2):not(h3),
    .core-layout *[style*="font-size: 0.8rem"]:not(h1):not(h2):not(h3) {
        font-size: 0.6rem !important;
    }

    /* Target the large central count specifically */
    .terminal-main div[style*="font-size: 3rem"],
    .core-layout div[style*="font-size: 3rem"] {
        font-size: 1.5rem !important;
        /* Reduced from 1.8rem */
        line-height: 1 !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Fix chart label containers (X-Axis) - MUST be horizontal */
    .terminal-main div[style*="bottom: 0.5rem"],
    .core-layout div[style*="bottom: 0.5rem"],
    .terminal-main div[style*="bottom: 0px"],
    .core-layout div[style*="bottom: 0px"] {
        flex-direction: row !important;
        /* Keep labels side-by-side */
        display: flex !important;
        justify-content: space-between !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        bottom: 0.2rem !important;
    }

    /* Fix diagnostic metrics box widths */
    .terminal-main div[style*="minmax(250px"],
    .core-layout div[style*="minmax(250px"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        display: grid !important;
    }

    .terminal-main div[style*="background: rgba(255,255,255,0.05)"],
    .core-layout div[style*="background: rgba(255,255,255,0.05)"] {
        width: 100% !important;
        min-width: 0 !important;
        /* Allow shrinking */
    }

    /* Special geometric reset for the [PEAK] label and bars */
    .terminal-grid *[style*="PEAK"],
    .core-layout *[style*="PEAK"] {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.3rem 0.8rem !important;
        /* Increased horizontal padding for perfect fit */
        line-height: 1 !important;
        white-space: nowrap !important;
        font-size: 0.6rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    div[style*="grid-template-columns: 2fr 1fr"],
    .terminal-grid>main>div[style*="grid-template-columns"] {
        display: block !important;
        /* Stack larger analytics blocks */
    }

    /* Target specific giant metrics/image containers BUT strictly spare dashboards, bars, SVGs, and relative heights */
    div[style*="height"]:not([style*="%"]):not([style*="flex"]):not([style*="PROGRESS"]):not([style*="chart"]):not([style*="svg"]):not([style*="viewBox"]):not(.terminal-grid *):not(.core-layout *),
    section[style*="height"]:not([style*="%"]):not([style*="flex"]):not([style*="PROGRESS"]):not([style*="chart"]):not([style*="svg"]):not([style*="viewBox"]):not(.terminal-grid *):not(.core-layout *) {
        height: auto !important;
        min-height: 300px !important;
        width: 100% !important;
    }

    /* Force all SVGs to be visible and properly scaled */
    .terminal-main svg,
    .core-layout svg,
    .core-content svg {
        width: 100% !important;
        height: auto !important;
        max-height: 350px !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Fix flex container for charts with Y-Axis */
    .terminal-main div[style*="display: flex; gap: 1rem;"],
    .core-layout div[style*="display: flex; gap: 1rem;"] {
        display: flex !important;
        flex-direction: row !important;
        /* Keep labels and chart on same line */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 0.5rem !important;
        /* Tighter gap */
        overflow: hidden !important;
        align-items: flex-start !important;
    }

    /* Fix Y-Axis Labels container - Match chart box height and internal grid padding */
    .terminal-main div[style*="height: 250px"]:not([style*="border"]):not([style*="absolute"]),
    .core-layout div[style*="height: 250px"]:not([style*="border"]):not([style*="absolute"]) {
        height: 350px !important;
        width: 50px !important;
        min-width: 50px !important;
        padding: 1rem 0 !important;
        /* Match the top/bottom 1rem of grid lines */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    /* Fix: Force visibility ONLY for 'STANDARD' bars, not the container */
    .terminal-main div[style*="height:"][style*="%"][style*="255,255,255"],
    .core-layout div[style*="height:"][style*="%"][style*="255,255,255"] {
        background: var(--c-data-standard) !important;
        background-image: none !important;
        opacity: 1 !important;
    }

    /* Target the specific top border of standard bars */
    div[style*="border-top: 3px solid rgba(255,255,255,0.6)"] {
        border-top: 3px solid var(--c-obsidian) !important;
        opacity: 0.9 !important;
    }

    svg {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Small data bars/progress bars reset - Snug fit */
    div[style*="height: 150px"],
    div[style*="height: 100px"],
    div[style*="height:150px"],
    div[style*="height:100px"] {
        height: 200px !important;
        min-height: 200px !important;
        width: 100% !important;
        display: flex !important;
        overflow: visible !important;
    }

    div[style*="monospace"] {
        padding: 1rem !important;
        font-size: 0.65rem !important;
        line-height: 1.6 !important;
        /* Increased line-height for readability */
        word-break: break-all !important;
        white-space: pre-wrap !important;
        /* Preserve line breaks but allow wrapping */
        text-align: left !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }

    /* Diagnostic Table Overlap Fix */
    .node-table {
        width: 100% !important;
        display: table !important;
        /* Ensure it stays a table */
        table-layout: auto !important;
    }

    .node-table th,
    .node-table td {
        font-size: 0.55rem !important;
        /* Extra small for high-density mobile */
        padding: 0.8rem 0.3rem !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    /* Wrap the parent of node-table if possible, but for CSS-only: */
    h2+.node-table {
        overflow-x: auto !important;
        display: block !important;
    }

    /* Target the metric numbers that are too big for 2-columns */
    div[style*="font-size: 2.5rem"],
    [style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }

    .stat-giant {
        font-size: 10vw !important;
        /* Reduced from 12vw */
        line-height: 1 !important;
        margin: 1rem 0 !important;
    }

    /* Bar specific scaling */
    div[style*="flex-direction: column; justify-content: flex-end"] {
        width: auto !important;
        height: 100% !important;
        flex: 1 !important;
    }

    nav,
    .nav-actions,
    .nav-links,
    .mobile-menu-extra {
        display: flex !important;
    }

    /* Fix absolute labels overlapping with centered titles - EXCEPT in data-heavy dashboard components AND mobile menu close button */
    *[style*="position: absolute"]:not(.terminal-grid *):not(.core-layout *):not(.mobile-menu-close),
    *[style*="position:absolute"]:not(.terminal-grid *):not(.core-layout *):not(.mobile-menu-close) {
        position: static !important;
        display: block !important;
        margin: 1rem auto !important;
        text-align: center !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

    /* Specific fix for image stack on mobile */
    .image-stack {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        margin: 5vh 0 !important;
    }

    .image-layer {
        position: static !important;
        width: 100% !important;
        height: 300px !important;
    }

    /* Typography - The Final Scale & Wrapping for ALL pages */
    .big-text,
    h1,
    h2,
    h3,
    h4 {
        white-space: normal !important;
        /* Force wrap for 'nowrap' titles on index2.html */
        word-break: break-word !important;
        /* Allow breaking for long words like SYSTEM_DIAGNOSTICS */
        overflow-wrap: break-word !important;
        margin-top: 2rem !important;
        /* Neutralize negative margin-tops */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .big-text,
    h1,
    h2 {
        font-size: 8vw !important;
        /* Reduced further from 10vw */
        line-height: 1.1 !important;
        text-align: center !important;
        letter-spacing: -0.05em !important;
        word-break: break-all !important;
        /* Force break for long strings */
    }

    h3,
    h4 {
        font-size: 6vw !important;
        /* Reduced from 8vw */
        line-height: 1.2 !important;
        text-align: center !important;
        word-break: break-all !important;
    }

    th {
        font-size: 4.2vw !important;
        line-height: 1 !important;
        text-align: center !important;
        word-break: keep-all !important;
        white-space: nowrap !important;
        /* Keep ALPHA, BETA etc whole */
    }

    /* Table Fixes for Comparison Matrix */
    table {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

    th {
        word-break: keep-all !important;
        white-space: nowrap !important;
    }

    td {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    th,
    td {
        padding: 0.8rem 0.2rem !important;
        text-align: center !important;
        overflow: visible !important;
    }

    th:first-child,
    td:first-child {
        width: 38% !important;
        text-align: left !important;
        padding-left: 0.5rem !important;
        white-space: normal !important;
        /* Allow wrapping for the feature names but keep them whole */
    }

    /* Remove horizontal offsets, disrupted positioning, and disruptive borders */
    *[style*="margin-left"],
    *[style*="margin-right"],
    *[style*="margin-top: -"],
    /* Target negative margins specifically */
    *[style*="border-left"],
    *[style*="border-right"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Force reset for disruptive editorial overlaps (only if negative) */
    div[style*="margin-top: -"],
    header[style*="margin-top: -"],
    section[style*="margin-top: -"] {
        margin-top: 2rem !important;
    }

    /* NEUTRALIZE AGGRESSIVE INLINE PADDING (Fixes the whitespace issue) - Protected for Dashboards */
    *[style*="padding"]:not(.terminal-grid *):not(.core-layout *) {
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Force full width for elements that had restrictions - EXCEPT dashboard data elements AND mobile menu close button */
    *[style*="width: 50%"]:not(.terminal-grid *):not(.core-layout *),
    *[style*="width:50%"]:not(.terminal-grid *):not(.core-layout *),
    *[style*="width: 40%"]:not(.terminal-grid *):not(.core-layout *),
    *[style*="width:40%"]:not(.terminal-grid *):not(.core-layout *),
    *[style*="width: 60%"]:not(.terminal-grid *):not(.core-layout *),
    *[style*="width:60%"]:not(.terminal-grid *):not(.core-layout *),
    *[style*="position: absolute"]:not(.terminal-grid *):not(.core-layout *):not(.mobile-menu-close),
    .image-layer,
    .big-text,
    p {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* NEUTRALIZE AGGRESSIVE INLINE PADDING & FORCE CONTAINMENT - Refined to prevent breakages */
    section[style*="padding"]:not(.terminal-grid *):not(.core-layout *),
    .section-speed-ex[style*="padding"] {
        padding: 5vh 5vw !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
    }

    .kinetic-card>div,
    .speed-ex-card>div {
        margin-bottom: 2rem !important;
    }

    /* Standardize container padding */
    .container,
    .section-speed-ex {
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        padding-top: 10vh !important;
        padding-bottom: 10vh !important;
    }

    /* Specific fixes for items seen in screenshots */
    .vertical-text {
        display: none !important;
    }

    p {
        max-width: 100% !important;
        text-align: left !important;
        /* Changed to left for clarity, specifically for logs */
        margin-bottom: 2rem !important;
    }

    /* Center alignment for dashboard section headers on mobile */
    .core-content h2,
    .core-content h3,
    .terminal-main h1,
    .terminal-main h2 {
        text-align: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Keep left alignment for non-dashboard paragraphs if needed */
    body:not(.terminal-grid):not(.core-layout) p {
        text-align: center !important;
    }

    /* Image stack responsiveness */
    .image-stack {
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .image-layer {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 300px !important;
        transform: none !important;
        z-index: 1 !important;
    }

    /* Tracking bar mobile fix */
    div[style*="background: var(--c-obsidian)"][style*="border-radius: 100px"] {
        border-radius: 15px !important;
        flex-direction: column !important;
        padding: 1.5rem !important;
    }

    div[style*="background: var(--c-obsidian)"] input {
        width: 100% !important;
        padding: 1rem !important;
        text-align: center !important;
    }

    div[style*="background: var(--c-obsidian)"] button {
        width: 100% !important;
        border-radius: 10px !important;
    }

    /* Quick Actions Visibility Fix */
    .terminal-main .nav-btn {
        background: var(--c-obsidian) !important;
        color: var(--c-paper) !important;
        border: 2px solid var(--c-paper) !important;
        height: auto !important;
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
        display: block !important;
        text-align: center !important;
    }

    [data-theme="dark"] .terminal-main .nav-btn {
        background: var(--c-paper) !important;
        color: var(--c-obsidian) !important;
        border: 2px solid var(--c-obsidian) !important;
    }

    /* Dashboard Content Stacking & Alignment */
    .terminal-grid,
    .core-layout {
        display: block !important;
        margin-top: 80px !important;
        /* Clear fixed nav */
        padding: 2rem 5vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .terminal-main,
    .core-content,
    .core-metrics {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Section Spacing */
    .terminal-main>div,
    .core-content>div,
    .core-content>section,
    .terminal-main>section {
        margin-bottom: 4rem !important;
        width: 100% !important;
        clear: both;
    }

    /* Horizontal flex containers protection (Charts, Legends, Navs) */
    .terminal-main div[style*="display: flex"]:not([style*="flex-direction: column"]),
    .core-content div[style*="display: flex"]:not([style*="flex-direction: column"]),
    .terminal-main div[style*="align-items: flex-end"],
    .core-layout div[style*="align-items: flex-end"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
    }

    /* Titles Scaling - Prevents Overlaps */
    .terminal-main h1,
    .core-content h1 {
        font-size: 10vw !important;
        word-wrap: break-word;
    }

    .terminal-main h2,
    .core-content h2 {
        font-size: 8vw !important;
        margin-bottom: 2rem !important;
    }

    .terminal-main h3,
    .core-content h3 {
        font-size: 7vw !important;
        margin-bottom: 1.5rem !important;
    }

    .terminal-main h4,
    .core-content h4 {
        font-size: 6vw !important;
    }

    /* Fix LOGO/Nav overlap in Dashboard Header */
    .core-header,
    .terminal-main>div:first-of-type {
        padding-top: 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .core-header h1,
    .terminal-main h1 {
        margin-top: 0 !important;
        text-align: left !important;
        position: relative !important;
        line-height: 1 !important;
    }

    /* SPECIFIC FIX: Log boxes wrapping */
    [style*="monospace"],
    .data-stream {
        width: 100% !important;
        padding: 1.5rem !important;
        font-size: 0.8rem !important;
        white-space: pre-wrap !important;
        overflow-wrap: break-word !important;
        display: block !important;
        margin: 1.5rem 0 !important;
    }

    /* --- Standard Dashboard Layout --- */
    .terminal-grid,
    .core-layout {
        display: block !important;
        margin-top: 100px !important;
        /* Slightly tighter clearance */
        padding: 0 5vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .terminal-main,
    .core-content,
    .core-metrics {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Core Section Stacking */
    .terminal-main>*,
    .core-content>* {
        margin-bottom: 3rem !important;
        width: 100% !important;
        display: block !important;
        clear: both;
    }

    /* Titles Scaling (Prevents Clipping/Overlap) */
    .terminal-main h1,
    .core-content h1 {
        font-size: 11vw !important;
        line-height: 1.1 !important;
        margin-bottom: 2rem !important;
        white-space: normal !important;
    }

    .terminal-main h2,
    .core-content h2 {
        font-size: 9vw !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .terminal-main h3,
    .core-content h3 {
        font-size: 7.5vw !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    /* BAR CHART FIX: Preserve horizontal flow for bar containers */
    div[style*="align-items: flex-end"] {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 350px !important;
        /* Increased for better visibility */
        gap: 0.3rem !important;
        /* Tighter gap for small screens */
        padding-left: 2rem !important;
        /* Room for Y labels */
        box-sizing: border-box !important;
        align-items: flex-end !important;
    }

    div[style*="align-items: flex-end"]>div {
        flex: 1 !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Dashboard Grid Columns Neutralization */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        display: block !important;
        width: 100% !important;
    }

    /* Heatmap/Grid Capacity Fix - Don't stack vertically, just reduce columns */
    div[style*="grid-template-columns: repeat(8"] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        padding: 1.5rem !important;
    }

    /* Image Scaling for Dashboards */
    .terminal-main img,
    .core-content img,
    .core-layout img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 1rem auto !important;
    }

    /* Dashboard Mobile Nav Standardization */
    .dash-mobile-nav {
        display: flex !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        height: 50px !important;
        background: var(--c-paper) !important;
        border-bottom: 2px solid var(--c-kinetic) !important;
        z-index: 900 !important;
        overflow-x: auto !important;
    }

    .dash-nav-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: space-around !important;
    }

    .dash-nav-container .sidebar-link {
        color: var(--c-obsidian) !important;
        opacity: 0.6 !important;
        border-bottom: 3px solid transparent !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 2px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    .dash-nav-container .sidebar-link.active {
        opacity: 1 !important;
        color: var(--c-kinetic) !important;
        border-bottom-color: var(--c-kinetic) !important;
    }

    /* SPECIFIC FIX: Pie Chart Legends & Percentages */
    .terminal-main div[style*="justify-content: space-between"][style*="align-items: center"],
    .core-content div[style*="justify-content: space-between"][style*="align-items: center"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .terminal-main div[style*="font-size: 2rem"],
    .core-content div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
        /* Scale down giant percentages */
        min-width: fit-content !important;
    }

    /* Prevent text collision in legend */
    .terminal-main div[style*="padding-left: 1.5rem"],
    .core-content div[style*="padding-left: 1.5rem"] {
        padding-left: 1rem !important;
    }

    /* Force Legend Items to Column on very small screens to avoid overlaps */
    @media (max-width: 480px) {

        .terminal-main div[style*="justify-content: space-between"][style*="align-items: center"],
        .core-content div[style*="justify-content: space-between"][style*="align-items: center"] {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.2rem !important;
        }

        .terminal-main div[style*="font-size: 2rem"],
        .core-content div[style*="font-size: 2rem"] {
            font-size: 1.2rem !important;
            margin-bottom: 0.5rem !important;
        }
    }

    .dash-nav-container {
        display: flex !important;
        padding: 0 1rem !important;
        gap: 1.5rem !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Hidden/Removed Elements */
    .terminal-sidebar,
    .core-sidebar,
    .sidebar-toggle,
    .vertical-text {
        display: none !important;
    }

    /* Tables Optimization */
    .node-table-wrapper,
    .table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 2rem !important;
    }

    .node-table,
    table {
        font-size: 0.65rem !important;
        width: 100% !important;
        min-width: 600px;
        /* Force scroll on very small screens instead of squishing */
    }

    .node-table td,
    table td {
        padding: 1rem 0.5rem !important;
    }

    /* --- Standard Global Nav Mobile --- */
    nav {
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }

    .nav-module.nav-links {
        display: none !important;
    }

    /* LOGO POSITIVE CONTROL */
    .nav-logo,
    .brand {
        font-size: 1.2rem !important;
        padding: 0.5rem 0.8rem !important;
        background: white !important;
        color: black !important;
        font-weight: 1000 !important;
    }
}

@media (max-width: 600px) {

    /* Redundant overrides removed to prevent mid-word breaking conflict */

    .stat-giant {
        font-size: 16vw !important;
    }

    .vertical-text {
        display: none !important;
    }

    /* Extra padding for content to clear fixed nav */
    main>section:first-of-type,
    .section-speed-ex:first-of-type,
    section[style*="padding-top"]:first-of-type {
        padding-top: 0 !important;
        margin-top: -1rem !important;
    }

    /* MONOSPACE LOG FIX - Ensure readable wrapping */
    div[style*="monospace"]:empty,
    .data-stream:empty,
    [style*="font-family: monospace"]:empty {
        display: none !important;
    }

    div[style*="monospace"],
    .data-stream,
    [style*="font-family: monospace"],
    .core-content div[style*="font-family: monospace"],
    .terminal-main div[style*="font-family: monospace"] {
        padding: 1.5rem !important;
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        text-align: left !important;
        background: rgba(0, 0, 0, 0.6) !important;
        width: 100% !important;
        min-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        margin: 1.5rem 0 !important;
        min-height: 150px !important;
    }

    /* Map visibility boost */
    .core-content img[style*="opacity: 0.3"],
    .terminal-main img[style*="opacity: 0.3"] {
        opacity: 0.6 !important;
        filter: grayscale(0.5) !important;
    }
}

@media (max-width: 1024px) {
    .nav-links {
        display: none !important;
        /* Hide original links on mobile */
    }
}

/* Mobile Menu Layout */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--c-paper) !important;
    z-index: 11000 !important;
    /* Above nav */
    display: none;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    overflow-y: auto;
}

.mobile-menu-close {
    transition: var(--t-fast);
}

.mobile-menu-close:hover {
    transform: rotate(90deg) scale(1.1);
    background: var(--c-obsidian) !important;
    color: var(--c-paper) !important;
}

.mobile-menu-overlay.active {
    display: flex !important;
}

.mobile-menu-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    /* Reduced gap for better rhythm */
    text-align: center !important;
    padding: 120px 0 80px 0 !important;
    /* Space for top and bottom */
}

/* NUCLEAR RESET for boxes/borders in mobile menu */
.mobile-menu-overlay .dropdown,
.mobile-menu-overlay .dropdown-content,
.mobile-menu-overlay .mobile-menu-links {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    gap: 0 !important;
}

.mobile-menu-overlay a {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1.5rem 1rem !important;
    /* increased padding for clickability and spacing */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-align: center !important;
    top: auto !important;
    left: auto !important;
}

.mobile-menu-links a {
    font-size: 2rem !important;
    /* Larger for impact */
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    color: var(--c-obsidian) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: -0.05em !important;
    padding: 0.5rem 0 !important;
}

.mobile-menu-links a::after {
    position: static !important;
    display: block !important;
    font-size: 0.6rem !important;
    opacity: 0.4 !important;
    margin-top: 0.2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
}

.mobile-menu-links .dropdown-content {
    padding: 0.5rem 0 !important;
    margin-bottom: 2rem !important;
    gap: 1rem !important;
}

.mobile-menu-links .dropdown-content a {
    font-size: 0.9rem !important;
    opacity: 0.7 !important;
    /* Better contrast */
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--c-kinetic) !important;
    /* Make sub-links pop in branding color */
}

/* Mobile Extra Section (Theme/RTL Toggles) */
.mobile-menu-extra {
    border-top: 2px solid var(--c-obsidian) !important;
    padding-top: 4rem !important;
    margin-top: 2rem !important;
    width: 100% !important;
    gap: 2rem !important;
}

.mobile-menu-extra a {
    font-size: 2.5rem !important;
    /* Make Login/SHIP mega bold */
    color: var(--c-kinetic) !important;
    letter-spacing: -0.08em !important;
}

.mobile-menu-extra .icon-btn {
    font-size: 1.5rem !important;
    width: auto !important;
    min-width: 60px !important;
    height: 60px !important;
    padding: 0 1.5rem !important;
    border: 2px solid var(--c-obsidian) !important;
    background: var(--c-obsidian) !important;
    color: var(--c-paper) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide the arrows on mobile if they are hardcoded as text */
.mobile-menu-links a[href*="index"],
.mobile-menu-links a[href*="dashboard"] {
    position: relative;
}

.hamburger {
    display: none;
    cursor: pointer;
    z-index: 12100;
    /* ABOVE OVERLAY (11000) and CLOSE BUTTON (12000) */
}

@media (max-width: 1024px) {
    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 5px;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--c-obsidian);
        transition: var(--t-fast);
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Authentication Systems */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-paper);
    padding: 120px 2rem 4rem 2rem;
    position: relative;
    width: 100%;
}

.auth-card {
    width: 100%;
    max-width: 500px;
    background: var(--c-paper);
    border: 2px solid var(--c-obsidian);
    box-shadow: 15px 15px 0 var(--c-obsidian);
    padding: 3rem;
    position: relative;
    z-index: 10;
}

[data-theme="dark"] .auth-card {
    box-shadow: 15px 15px 0 var(--c-kinetic);
}

.auth-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-label {
    display: block;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.form-input {
    width: 100%;
    padding: 1.2rem;
    background: var(--c-subtle);
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--c-obsidian);
    transition: var(--t-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--c-kinetic);
    background: var(--c-paper);
}

.auth-btn {
    width: 100%;
    padding: 1.5rem;
    background: var(--c-obsidian);
    color: var(--c-paper);
    border: none;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: var(--t-fast);
}

[data-theme="dark"] .auth-btn {
    background: var(--c-paper);
    color: var(--c-obsidian);
}

.auth-btn:hover {
    background: var(--c-kinetic);
    color: white;
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 0 var(--c-obsidian);
}

.auth-footer {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    padding-top: 2rem;
}

.auth-footer a {
    color: var(--c-kinetic);
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
}

.bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
    background-image: radial-gradient(var(--c-obsidian) 1px, transparent 1px);
    background-size: 30px 30px;
}

@media (max-width: 1024px) {

    /* Compact Auth Layout for Mobile */
    .auth-wrapper {
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 60px 5vw 4rem 5vw !important;
        /* Even tighter top */
    }

    .auth-card {
        padding: 1.5rem !important;
        box-shadow: none !important;
        border-width: 2px !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        /* Force items to touch */
    }

    .auth-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .auth-card form {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        /* No gaps allowed */
    }

    /* Reset all children to remove inherited or default spacing */
    .auth-card form>* {
        margin-top: 0 !important;
        margin-bottom: 0.8rem !important;
        /* Standard small gap */
        display: block !important;
    }

    .form-row {
        display: block !important;
        /* Ensure vertical stack */
        margin-bottom: 0 !important;
    }

    .form-group {
        margin-bottom: 0.8rem !important;
    }

    .form-input {
        padding: 0.8rem !important;
    }

    /* Targeted fix: Push the button and legal text up */
    .auth-card form>div[style*="font-size: 0.75rem"] {
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
        order: 5;
        /* Ensure predicted order */
    }

    .auth-btn {
        padding: 1rem !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
        order: 6;
    }

    .auth-footer {
        margin-top: 1rem !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding-top: 1rem !important;
        text-align: center !important;
    }
}

/* Analytics Grid Responsive Styles */
.analytics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .analytics-row {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .analytics-row h4 {
        font-size: 0.65rem !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-width: 100%;
        line-height: 1.2;
    }

    .analytics-row>div {
        min-width: 0;
        max-width: 100%;
    }
}


/* Responsive Grid Utilities for Admin Dashboard */
.grid-split-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.grid-split-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-split-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.grid-split-arch {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
}

@media (max-width: 1024px) {

    .grid-split-2,
    .grid-split-3,
    .grid-split-2-1,
    .grid-split-arch {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .grid-split-2-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important;
    }
}

/* FINAL MOBILE CLEANUP */
@media (max-width: 1024px) {

    /* Ensure absolute elements in charts behave */
    .terminal-main [style*="position: absolute"],
    .core-layout [style*="position: absolute"],
    .core-content [style*="position: absolute"] {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Metric cards 2-column on small screens */
    .core-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    .metric-item {
        padding: 1.5rem !important;
    }

    .admin-big {
        font-size: 1.5rem !important;
    }
}