/* ==========================================================================
   EGXHUB - Responsive / Cross-Device Layer
   --------------------------------------------------------------------------
   Loaded AFTER egxhub-terminal.css. This layer never changes the desktop
   design; it only re-flows the terminal for tablets, laptops, foldables and
   phones. Breakpoints:
       1240px  -> navigation collapses into the off-canvas drawer
       1200px  -> 3-column terminal becomes 2-column + full-width side rail
       900px   -> terminal becomes a single reading column
       768px   -> phone typography, touch targets, scrollable tables
       560px   -> small phones
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Responsive design tokens
   -------------------------------------------------------------------------- */
:root {
    --ticker-h: 38px;
    --topbar-h: 38px;
    --navbar-h: 68px;
    --drawer-w: min(84vw, 330px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    /* Dynamic fluid typography tokens (scales seamlessly from 320px screen up to 2560px+) */
    --font-xs: clamp(0.6875rem, 0.64rem + 0.22vw, 0.8125rem);      /* 11px - 13px */
    --font-sm: clamp(0.75rem, 0.7rem + 0.26vw, 0.875rem);          /* 12px - 14px */
    --font-base: clamp(0.875rem, 0.82rem + 0.35vw, 1.025rem);      /* 14px - 16.4px */
    --font-md: clamp(1rem, 0.94rem + 0.45vw, 1.25rem);             /* 16px - 20px */
    --font-lg: clamp(1.15rem, 1.05rem + 0.65vw, 1.55rem);          /* 18.4px - 24.8px */
    --font-xl: clamp(1.35rem, 1.2rem + 1vw, 2.1rem);              /* 21.6px - 33.6px */
    --font-2xl: clamp(1.65rem, 1.4rem + 1.5vw, 2.75rem);           /* 26.4px - 44px */
    --font-3xl: clamp(2rem, 1.6rem + 2.2vw, 3.6rem);               /* 32px - 57.6px */

    /* Dynamic fluid prices / ticker numbers */
    --font-price-sm: clamp(0.95rem, 0.88rem + 0.5vw, 1.3rem);
    --font-price-md: clamp(1.2rem, 1.05rem + 0.9vw, 1.85rem);
    --font-price-lg: clamp(1.5rem, 1.25rem + 1.4vw, 2.5rem);
    --font-price-hero: clamp(1.85rem, 1.5rem + 2vw, 3.25rem);

    /* Dynamic spacing tokens */
    --fluid-pad-card: clamp(12px, 1.5vw + 8px, 24px);
    --fluid-gap: clamp(8px, 1.2vw + 4px, 20px);
}

@media (max-width: 768px) {
    :root {
        --ticker-h: 34px;
        --topbar-h: 36px;
        --navbar-h: 58px;
    }
}

/* --------------------------------------------------------------------------
   2. Global mobile hygiene
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    /* iOS: keep momentum scrolling inside horizontally scrollable regions */
    -webkit-overflow-scrolling: touch;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

/* Kill the 300ms tap delay + grey flash on interactive elements */
a,
button,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

button,
.nav-item-link,
.action-btn,
.feed-tab-btn,
.index-tab-btn,
.sentiment-pill,
.follow-btn-chip {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS Safari from zooming when a form field gains focus */
@media (max-width: 900px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* When the drawer is open the page behind it must not scroll */
body.nav-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Shared page wrapper (used by every non-home view)
   -------------------------------------------------------------------------- */
.page-wrap {
    width: 100%;
}

@media (max-width: 768px) {
    .page-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* /* --------------------------------------------------------------------------
   4. Off-canvas navigation drawer & responsive navigation
   -------------------------------------------------------------------------- */
.nav-hamburger,
.nav-drawer-close,
.nav-scrim,
.wtb-mobile-quick-btn {
    display: none;
}

/* Wide Desktop & Laptops (>= 1024px) */
@media (min-width: 1024px) {
    .nav-hamburger,
    .nav-drawer,
    .nav-scrim,
    .wtb-mobile-quick-btn {
        display: none !important;
    }

    .desktop-only-nav {
        display: flex !important;
    }
}

/* Laptops & Compact Desktops (1024px to 1240px): keep horizontal nav fully visible and nicely proportioned */
@media (min-width: 1024px) and (max-width: 1240px) {
    .main-navbar {
        padding: 0 14px !important;
        gap: 6px !important;
    }

    .desktop-only-nav {
        gap: 4px !important;
    }

    .desktop-only-nav .nav-item-link {
        padding: 6px 8px !important;
        font-size: 0.81rem !important;
        gap: 5px !important;
    }

    .wtb-navbar-flagship-btn {
        padding: 5px 9px !important;
        font-size: 0.81rem !important;
    }

    .nav-actions {
        gap: 6px !important;
    }

    .user-menu-trigger .user-menu-name {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Tablets in Portrait & Mobile (< 1024px) */
@media (max-width: 1023px) {
    .main-navbar {
        padding: 0 16px;
        padding-left: calc(16px + var(--safe-r));
        padding-right: calc(16px + var(--safe-l));
    }

    .desktop-only-nav {
        display: none !important;
    }

    .nav-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: var(--radius-md, 8px);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--cyan-accent);
        font-size: 1.05rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .nav-hamburger:hover,
    .nav-hamburger:active {
        border-color: var(--cyan-accent);
        box-shadow: 0 0 12px rgba(0, 210, 255, 0.25);
    }

    .wtb-mobile-quick-btn {
        display: inline-flex !important;
    }

    /* Top Action Buttons stay in top navbar bar */
    .nav-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* Hide username text on mobile/tablet to prevent navbar collision */
    .user-menu-trigger .user-menu-name,
    .user-menu-trigger .user-menu-arrow {
        display: none !important;
    }

    .user-menu-trigger {
        padding: 2px !important;
        border-radius: 50% !important;
    }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
    .main-navbar {
        padding: 0 10px !important;
        padding-left: calc(10px + var(--safe-r)) !important;
        padding-right: calc(10px + var(--safe-l)) !important;
        gap: 6px !important;
    }

    .navbar-start {
        gap: 8px !important;
    }

    .nav-hamburger {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
    }

    /* Long register button hidden on mobile - drawer has prominent CTA */
    .nav-actions .nav-register-btn {
        display: none !important;
    }

    .nav-actions {
        gap: 5px !important;
    }

    .nav-actions .nav-login-btn {
        padding: 5px 9px !important;
        font-size: 0.78rem !important;
        gap: 4px !important;
    }

    .wtb-mobile-quick-btn {
        padding: 5px 8px !important;
        font-size: 0.74rem !important;
        gap: 4px !important;
    }

    .theme-toggle-btn,
    .notif-bell-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
    }

    .brand-title .brand-name {
        font-size: 1.05rem !important;
    }

    .page-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Compact Mobile (<= 440px) */
@media (max-width: 440px) {
    .main-navbar {
        padding: 0 6px !important;
        padding-left: calc(6px + var(--safe-r)) !important;
        padding-right: calc(6px + var(--safe-l)) !important;
        gap: 4px !important;
    }

    .navbar-start {
        gap: 5px !important;
    }

    .nav-hamburger {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }

    .brand-logo-glow {
        width: 28px !important;
        height: 28px !important;
    }

    .brand-logo-glow img {
        width: 26px !important;
        height: 26px !important;
    }

    .brand-title .brand-name {
        font-size: 0.96rem !important;
    }

    .nav-actions {
        gap: 3.5px !important;
    }

    .theme-toggle-btn,
    .notif-bell-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }

    .wtb-mobile-quick-btn {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
        gap: 3px !important;
    }

    .nav-actions .nav-login-btn {
        padding: 4px 7px !important;
        font-size: 0.72rem !important;
    }

    .user-nav-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .page-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Off-canvas slide-out drawer */
    .nav-drawer {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: var(--topbar-h, 36px);
        height: calc(100% - var(--topbar-h, 36px));
        right: 0;
        bottom: 0;
        width: clamp(290px, 86vw, 380px);
        max-width: 100%;
        background: var(--bg-surface);
        border-left: 1px solid var(--border-color);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.65);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1200;
        padding-bottom: calc(76px + var(--safe-b));
    }

    body.nav-open .nav-drawer {
        transform: translateX(0) !important;
    }

    .nav-scrim {
        display: block !important;
        position: fixed;
        top: var(--topbar-h, 36px);
        height: calc(100% - var(--topbar-h, 36px));
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(3, 5, 10, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1100;
    }

    body.nav-open .nav-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-drawer-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-md, 8px);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .nav-drawer-close:hover {
        color: var(--bearish-red);
        border-color: var(--bearish-border);
    }

    /* Mobile Notification Dropdown & Bell: clean icon button without overflowing text */
    .notif-dropdown-wrapper {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .notif-bell-btn {
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--radius-sm, 6px) !important;
        font-size: 0.82rem !important;
    }

    .notif-bell-btn::after {
        display: none !important;
        content: none !important;
    }

    .notif-badge-pill {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 3px !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        border-radius: 8px !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
    }

    .notif-dropdown-menu {
        position: fixed !important;
        top: calc(52px + env(safe-area-inset-top, 0px)) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(85vh - 52px) !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--border-color) !important;
        z-index: 99999 !important;
    }
}

/* --------------------------------------------------------------------------
   5. Topbar and Navbar density
   -------------------------------------------------------------------------- */
.topbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.topbar-widgets {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 900px) {
    .topbar-links {
        display: none !important;
    }

    .topbar-inner {
        min-height: 36px;
        padding: 0 12px;
        width: 100%;
        max-width: 100%;
        justify-content: space-between !important;
        overflow: hidden;
    }

    .topbar-widgets {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .topbar-widgets::-webkit-scrollbar {
        display: none;
    }

    .topbar-status {
        padding: 4px 8px;
        font-size: 0.74rem;
        flex-shrink: 0;
    }

    .topbar-clock {
        font-size: 0.74rem;
        gap: 5px;
        flex-shrink: 0;
    }

    .topbar-social-group {
        flex-shrink: 0;
        gap: 3px;
    }
}

@media (max-width: 600px) {
    .topbar-clock-sep,
    .topbar-date-val,
    .topbar-date-icon {
        display: none !important;
    }
    
    .tb-social-btn {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .topbar-inner {
        padding: 0 8px;
    }

    .topbar-status {
        padding: 3px 6px;
        font-size: 0.70rem;
        gap: 4px;
    }

    .topbar-clock {
        font-size: 0.70rem;
        gap: 4px;
    }

    .topbar-clock .topbar-clock-lbl {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .topbar-status-lbl {
        display: none !important;
    }
}

.ticker-bar-wrapper {
    height: var(--ticker-h);
    padding-left: var(--safe-r);
    padding-right: var(--safe-l);
}

.main-navbar {
    height: var(--navbar-h);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 28px;
    padding-left: calc(28px + var(--safe-r));
    padding-right: calc(28px + var(--safe-l));
    gap: 10px;
}

.ticker-pulse-label {
    /* Exact px from Site Settings (like Word font size) */
    font-size: var(--ticker-px, 10px);
    padding: 0 clamp(7px, 0.6vw, 13px);
    gap: clamp(4px, 0.3vw, 7px);
    flex: 0 0 auto;
}

.ticker-marquee-track {
    gap: clamp(7px, 0.7vw, 20px);
    padding-left: clamp(8px, 0.7vw, 16px);
    min-width: max-content;
}

.ticker-item {
    font-size: var(--ticker-px, 10px);
    padding: 2px clamp(5px, 0.45vw, 10px);
    gap: clamp(4px, 0.3vw, 8px);
    flex: 0 0 auto;
}

/* Instrument names are the widest part of a chip. Let them breathe on large
   screens but clip gracefully so at least one whole chip is always visible on
   a phone instead of a half-cut price.
   min-width:0 is required: a flex item defaults to min-width:auto and would
   refuse to shrink below its text, so max-width alone would do nothing. */
.ticker-item .name {
    min-width: 0;
    max-width: clamp(56px, 16vw, 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The track is now rendered twice, so it travels 50% of a double-width track.
   60s keeps roughly the same reading speed as the original single pass. */
.ticker-marquee-track {
    animation-duration: 60s;
}

@media (max-width: 768px) {
    .ticker-item .name {
        max-width: clamp(52px, 15vw, 96px);
    }
}

/* Narrow-large gap (431-700px): keep the name visible but clip it hard so the
   chip count stays continuous instead of jumping at the 430px boundary. */
@media (min-width: 431px) and (max-width: 700px) {
    .ticker-item .name {
        max-width: 62px;
    }
}

/* On a narrow phone a clipped Arabic company name ("المص…") carries no
   information, so drop it and let the code + price read cleanly instead. */
@media (max-width: 430px) {
    .ticker-item .name {
        display: none;
    }
}

/* The navbar is a single non-wrapping flex row. Brand and nav-actions are fixed
   and must NEVER shrink or be covered. Links stay centered in the remaining space. */
.main-navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
}

.main-navbar > * {
    min-width: 0;
}

.brand-container {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    overflow: visible;
    z-index: 5;
}

.brand-title .brand-name {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* overflow stays visible: the index and tools dropdowns hang out of this strip. */
.nav-links {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    flex-wrap: nowrap !important;
}

.nav-links > * {
    flex: 0 0 auto;
}

.nav-actions {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    z-index: 5;
}

/* Laptops & Standard Displays (1241px - 1600px): prevents cramped navigation on
   13"/14" laptops and small desktop windows. */
@media (min-width: 1241px) and (max-width: 1600px) {
    .main-navbar {
        padding: 0 16px;
        gap: 6px;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-item-link {
        padding: 6px 9px;
        font-size: 0.79rem;
        gap: 4px;
    }

    .nav-item-link i {
        font-size: 0.8rem;
    }

    .nav-actions {
        gap: 6px;
    }

    .nav-actions .btn-primary-glow,
    .nav-actions .btn-outline {
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    .brand-title .brand-name {
        font-size: 1.1rem;
    }
}

/* Narrow laptops (1241px - 1320px): every pixel counts, so the icon glyphs and
   the horizontal padding shrink once more before anything is allowed to clip. */
@media (min-width: 1241px) and (max-width: 1320px) {
    .main-navbar {
        padding: 0 12px;
        padding-left: calc(12px + var(--safe-r));
        padding-right: calc(12px + var(--safe-l));
        gap: 6px;
    }

    .nav-item-link {
        padding: 6px 7px;
        font-size: 0.76rem;
        gap: 4px;
    }

    .nav-item-link i {
        font-size: 0.78rem;
    }

    .nav-links {
        gap: 0;
    }

    .nav-actions {
        gap: 5px;
    }

    .brand-container {
        gap: 8px;
    }

    .brand-logo-glow {
        width: 32px;
        height: 32px;
    }

    .brand-title .brand-name {
        font-size: 1rem;
    }
}

/* Tightest band (1241px - 1340px): the account trigger drops to avatar + arrow
   so the nav links keep their full labels. Everything stays reachable. */
@media (min-width: 1241px) and (max-width: 1340px) {
    .user-menu-trigger {
        max-width: 62px;
        padding: 4px 8px !important;
    }

    .user-menu-trigger .user-menu-name {
        display: none;
    }
}

/* Mid band (1341px - 1560px): the username comes back, truncated, because a
   full 200px trigger would push the first nav link out of the bar. */
@media (min-width: 1341px) and (max-width: 1560px) {
    .user-menu-trigger {
        padding: 5px 10px !important;
    }

    .user-menu-trigger .user-menu-name {
        max-width: 96px;
        font-size: 0.8rem;
    }
}

/* 1341px - 1460px is the last stretch where a truncated name still crowds the
   link strip; shrink the links one more notch instead of hiding the name. */
@media (min-width: 1341px) and (max-width: 1460px) {
    .nav-item-link {
        padding: 6px 8px;
        font-size: 0.75rem;
        gap: 4px;
    }

    .nav-item-link i {
        font-size: 0.76rem;
    }

    .main-navbar {
        padding-left: calc(10px + var(--safe-r));
        padding-right: calc(10px + var(--safe-l));
    }

    .brand-container {
        gap: 7px;
    }

    .brand-title .brand-name {
        font-size: 0.98rem;
    }
}

@media (max-width: 768px) {
    /* Ticker uses fluid clamp() sizing (section 5) - no fixed overrides here. */

    .main-navbar {
        padding: 0 12px;
        padding-left: calc(12px + var(--safe-l));
        padding-right: calc(12px + var(--safe-r));
        gap: 8px;
    }

    .brand-container {
        gap: 8px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand-logo-glow {
        width: 32px;
        height: 32px;
    }

    .brand-title {
        font-size: 1.05rem;
        gap: 6px;
        letter-spacing: -0.2px;
    }

    .brand-badge {
        font-size: 0.55rem;
        padding: 1px 4px;
    }

    /* Long text labels no longer fit next to the icon */
    .nav-actions .btn-primary-glow span,
    .nav-actions .btn-outline span {
        display: none;
    }

    .nav-actions {
        gap: 8px;
        flex: 0 0 auto;
    }

    .theme-toggle-btn,
    .notif-bell-btn {
        width: 36px;
        height: 36px;
    }

    .user-nav-avatar {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 400px) {
    .brand-title {
        font-size: 0.95rem;
    }

    .brand-badge {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   6. Terminal grid: never hide content, re-flow it
   -------------------------------------------------------------------------- */
.terminal-layout {
    grid-template-columns: 260px minmax(0, 1fr) 340px;
    grid-template-areas:
        "left  main  right";
    margin: 24px auto;
    padding: 0 20px;
    padding-left: calc(20px + var(--safe-l));
    padding-right: calc(20px + var(--safe-r));
}

.left-sidebar {
    grid-area: left;
    min-width: 0;
}

.main-feed-column {
    grid-area: main;
    min-width: 0;
}

.right-sidebar {
    grid-area: right;
    min-width: 0;
}

/* --- Tablet: 2 columns, trending/predictions become a full-width rail --- */
@media (max-width: 1200px) {
    .terminal-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-areas:
            "left  main"
            "right right";
    }

    .right-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }

    .right-sidebar > .terminal-card {
        margin-bottom: 0 !important;
    }
}

/* --- Phone / small tablet: single reading column, feed first --- */
@media (max-width: 900px) {
    .terminal-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "right"
            "left";
        gap: 16px;
        margin: 16px auto;
        padding: 0 14px;
        padding-left: calc(14px + var(--safe-l));
        padding-right: calc(14px + var(--safe-r));
    }

    .right-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .left-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .left-sidebar > .terminal-card {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 700px) and (min-width: 561px) {
    .right-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   7. Cards, feeds and composers
   -------------------------------------------------------------------------- */
.terminal-card {
    padding: 16px;
}

.post-creation-card {
    padding: 16px;
    margin-bottom: 16px;
}

.post-item-card {
    padding: 16px;
    margin-bottom: 14px;
}

.post-content-body {
    font-size: 0.98rem;
    line-height: 1.75;
}

.post-input-textarea {
    font-size: 1rem;
    min-height: 80px;
}

.post-header {
    flex-wrap: wrap;
    gap: 10px;
}

.author-meta {
    gap: 10px;
    min-width: 0;
}

.author-avatar {
    width: 40px;
    height: 40px;
}

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

.author-names {
    min-width: 0;
}

.post-footer-actions {
    flex-wrap: wrap;
    gap: 14px;
}

.post-tools-bar {
    gap: 10px;
}

.post-actions-group {
    flex-wrap: wrap;
    gap: 8px;
}

.terminal-card-header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.card-title {
    font-size: 0.98rem;
}

.prediction-box {
    padding: 12px;
}

.pred-stock-title {
    font-size: 0.98rem;
    flex-wrap: wrap;
    gap: 6px;
}

.pred-header {
    flex-wrap: wrap;
    gap: 8px;
}

.pred-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.prediction-form-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    gap: 10px;
}

@media (max-width: 480px) {
    .prediction-form-panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Feed tabs scroll instead of wrapping into a tall block */
.feed-tabs-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.feed-tabs-container::-webkit-scrollbar {
    display: none;
}

.feed-tab-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   8. Stats, tables and data grids
   -------------------------------------------------------------------------- */
.stats-banner-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-metric-card {
    padding: 14px;
}

.stat-metric-card .stat-value {
    font-size: 1.3rem;
}

.index-nav-tabs {
    gap: 10px;
    display: flex;
    flex-wrap: wrap !important;
    max-width: 100%;
    padding-bottom: 4px;
}

.index-tab-btn {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 0.88rem;
}

/* Every financial table lives inside an overflow-x:auto wrapper, so giving
   the table a min-width turns "squished unreadable columns" into a clean
   horizontal scroll. */
@media (max-width: 900px) {
    .terminal-table {
        min-width: 680px;
    }
}

@media (max-width: 768px) {
    .terminal-table {
        font-size: 0.84rem;
    }

    .terminal-table th,
    .terminal-table td {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .terminal-table {
        min-width: 600px;
    }
}

/* --------------------------------------------------------------------------
   9. Modals
   -------------------------------------------------------------------------- */
.terminal-modal-backdrop {
    padding: 16px;
    align-items: center;
}

.terminal-modal-content {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
}

@media (max-width: 480px) {
    .terminal-modal-backdrop {
        padding: 10px;
    }

    .terminal-modal-content {
        padding: 16px;
    }
}

/* --------------------------------------------------------------------------
   10. Floating toast + notifications
   -------------------------------------------------------------------------- */
.live-notif-toast {
    max-width: 380px;
}

@media (max-width: 600px) {
    .live-notif-toast {
        top: calc(8px + var(--safe-t));
        left: calc(10px + var(--safe-l));
        right: calc(10px + var(--safe-r));
        max-width: none;
        width: auto;
        padding: 12px 14px;
    }
}

.notif-dropdown-list {
    max-height: min(380px, 50vh);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    footer {
        padding: 24px 14px !important;
        margin-top: 40px !important;
        padding-bottom: calc(24px + var(--safe-b)) !important;
    }
}

/* --------------------------------------------------------------------------
   12. Charts
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    #chartContainer {
        height: 300px !important;
    }
}

@media (max-width: 480px) {
    #chartContainer {
        height: 240px !important;
    }
}

/* --------------------------------------------------------------------------
   13. Inline-style guards
   Many views declare their own grid/min-width inline, which outranks any
   stylesheet rule. These targeted !important overrides are what actually
   stops horizontal overflow on phones while keeping cards readable on tablets.
   -------------------------------------------------------------------------- */

/* Fluid grid minimums by component type */
@media (max-width: 900px) {
    [style*="grid-template-columns"][style*="minmax("] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    }

    /* Cards that need more breathing room (funds, predictions, leaderboards) */
    #fundsGrid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    }

    [style*="minmax(480px"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [style*="minmax(360px"] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    }

    [style*="minmax(330px"] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    }
}

@media (max-width: 600px) {
    /* Hard-coded multi-column rows (1fr 1fr, 1fr 2fr, 2fr 1fr, 1fr 1fr 1fr) */
    [style*="grid-template-columns"][style*="1fr 1fr 1fr"],
    [style*="grid-template-columns"][style*="1fr 2fr"],
    [style*="grid-template-columns"][style*="2fr 1fr"],
    [style*="grid-template-columns"][style*="1fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #fundsGrid,
    [style*="minmax(360px"],
    [style*="minmax(330px"],
    [style*="minmax(280px"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Leaderboard items on small screens */
    .terminal-card div[style*="justify-content:space-between"][style*="padding:12px 16px"] {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Post composer tools on mobile */
    .post-tools-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .post-actions-group {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .post-tools-bar .btn-primary-glow {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Notification items on mobile */
    .notif-card-item > div {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Trade Modal on small screens */
    .terminal-modal-content {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        padding: 16px !important;
    }
}

/* Filter inputs with min-width:220-260px inside a flex row */
@media (max-width: 768px) {
    input[style*="min-width"],
    select[style*="min-width"],
    textarea[style*="min-width"] {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    [style*="flex-wrap:wrap"][style*="min-width"] {
        width: 100% !important;
    }
}

/* Generous inline paddings on page-level wrappers */
@media (max-width: 480px) {
    .terminal-card,
    .post-item-card,
    .post-creation-card {
        padding: 14px;
    }
}

/* --------------------------------------------------------------------------
   14. Reduced motion (accessibility)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ticker-marquee-track,
    .live-dot,
    .live-pulse-dot,
    .notif-badge-pill {
        animation: none;
    }

    .ticker-marquee-track {
        transform: none;
    }

    * {
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   15. Fluid Typography & Dynamic Scaling System
   Smooth continuous scaling across all device sizes (320px to 4K)
   -------------------------------------------------------------------------- */
h1, .page-title {
    font-size: var(--font-2xl) !important;
    line-height: 1.25 !important;
}

h2, .section-title {
    font-size: var(--font-xl) !important;
    line-height: 1.3 !important;
}

h3, .card-title {
    font-size: var(--font-lg) !important;
    line-height: 1.35 !important;
}

h4 {
    font-size: var(--font-md) !important;
    line-height: 1.4 !important;
}

/* Fluid Price Displays */
.stock-price-hero,
.fund-nav-hero,
.hero-val {
    font-size: var(--font-price-hero) !important;
    line-height: 1.15 !important;
}

.price-lg {
    font-size: var(--font-price-lg) !important;
}

.price-val {
    font-size: var(--font-price-md);
}

.kpi-stat-number,
.stat-val {
    font-size: var(--font-price-md) !important;
}

/* Fluid Card and Grid Paddings
   The !important on border-radius used to flatten every theme's own radius.
   Themes set it through a variable, so clamp() is applied to the variable
   instead and each identity keeps its own shape. */
.terminal-card {
    padding: var(--fluid-pad-card) !important;
    border-radius: var(--card-radius, clamp(10px, 1.2vw, 16px)) !important;
}

/* Hero Section Fluid Scaling */
.hero-search-box {
    padding: clamp(16px, 3vw, 36px) clamp(14px, 2.5vw, 30px) !important;
}

.hero-search-box h1 {
    font-size: var(--font-3xl) !important;
}

.hero-search-box p {
    font-size: var(--font-base) !important;
}

/* Stock / Fund Header Fluid Layout */
@media (max-width: 768px) {
    .stock-ticker-chip {
        font-size: 0.85rem !important;
        padding: 3px 10px !important;
    }

    /* Ticker sizing is handled by the fluid clamp() rules in section 5 so it
       scales continuously instead of jumping between breakpoints. */

    .unified-search-input {
        font-size: 0.92rem !important;
        padding: 12px 14px 12px 42px !important;
    }
}

/* --------------------------------------------------------------------------
   16. Mobile App Bottom Navigation Dock
   Native mobile app feeling with touch targets & safe area insets
   -------------------------------------------------------------------------- */
.mobile-bottom-dock {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-bottom-dock {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: rgba(10, 15, 26, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -4px 22px rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        align-items: stretch !important;
        justify-content: space-around !important;
        direction: rtl !important;
        margin: 0 !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    .mobile-bottom-dock .dock-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 100% !important;
        color: var(--text-secondary) !important;
        text-decoration: none !important;
        padding: 4px 2px !important;
        gap: 3px !important;
        transition: color 0.15s ease, transform 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        font-family: inherit !important;
        cursor: pointer !important;
    }

    .mobile-bottom-dock .dock-item i {
        font-size: 1.12rem !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s !important;
    }

    .mobile-bottom-dock .dock-item span {
        font-size: 0.67rem !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    .mobile-bottom-dock .dock-item:hover,
    .mobile-bottom-dock .dock-item.active {
        color: var(--cyan-accent) !important;
    }

    .mobile-bottom-dock .dock-item.active i {
        transform: translateY(-2px) !important;
        color: var(--cyan-accent) !important;
        filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.6)) !important;
    }

    .mobile-bottom-dock .dock-item.active::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 22px !important;
        height: 3px !important;
        background: var(--cyan-accent) !important;
        border-radius: 0 0 3px 3px !important;
        box-shadow: 0 2px 8px rgba(0, 210, 255, 0.8) !important;
    }

    /* Featured Center Tab (What to buy VIP) */
    .mobile-bottom-dock .dock-item.dock-featured {
        color: var(--gold-accent) !important;
    }

    .mobile-bottom-dock .dock-item.dock-featured i {
        color: #f59e0b !important;
        font-size: 1.25rem !important;
        filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.5)) !important;
    }

    .mobile-bottom-dock .dock-item.dock-featured span {
        color: #f59e0b !important;
        font-weight: 800 !important;
    }

    .mobile-bottom-dock .dock-item.dock-featured.active i {
        transform: translateY(-2px) scale(1.1) !important;
    }

    .mobile-bottom-dock .dock-item.dock-featured.active::after {
        background: #f59e0b !important;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.9) !important;
    }

    .mobile-bottom-dock .dock-item:active {
        transform: scale(0.92) !important;
    }
}

/* ==========================================================================
   17. Cross-Theme Responsive System (Mobile, Tablet & Laptop)
   Unified, pixel-perfect compatibility for:
     - Quantum Neo-Fintech (Dark & Light)
     - EGX Terminal (Dark & Light)
     - Onyx Dark & Pearl Light
     - Aurora Cyber Dark & Light
     - Royal Gold Light
   ========================================================================== */

/* --------------------------------------------------------------------------
   17.1. Backdrop-Filter Fix on Tablet & Mobile (<= 1240px)
   Prevents .nav-drawer and fixed popups from becoming trapped in .main-navbar
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .main-navbar,
    html[data-theme="quantum"] .main-navbar,
    html[data-theme="aurora"] .main-navbar,
    [data-theme="onyx"] .main-navbar,
    [data-theme="gold"] .main-navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Opaque solid fallback backgrounds to prevent scroll-under bleed */
    html[data-theme="quantum"][data-theme-mode="dark"] .main-navbar {
        background: #090e1c !important;
    }
    html[data-theme="quantum"][data-theme-mode="light"] .main-navbar {
        background: #ffffff !important;
    }
    html[data-theme="aurora"][data-theme-mode="dark"] .main-navbar {
        background: #120e24 !important;
    }
    html[data-theme="aurora"][data-theme-mode="light"] .main-navbar {
        background: #fbfaff !important;
    }
    [data-theme="onyx"][data-theme-mode="dark"] .main-navbar {
        background: #151312 !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .main-navbar {
        background: #ffffff !important;
    }
    [data-theme="gold"] .main-navbar {
        background: #fffdf6 !important;
    }
}

/* --------------------------------------------------------------------------
   17.2. Off-canvas Navigation Drawer for All Themes
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    /* --- QUANTUM --- */
    html[data-theme="quantum"][data-theme-mode="dark"] .nav-drawer {
        background: rgba(11, 19, 38, 0.98) !important;
        border-inline-end: 1px solid rgba(0, 242, 254, 0.25) !important;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 242, 254, 0.12) !important;
    }
    html[data-theme="quantum"][data-theme-mode="light"] .nav-drawer {
        background: #ffffff !important;
        border-inline-end: 1px solid rgba(79, 172, 254, 0.25) !important;
        box-shadow: -20px 0 50px rgba(15, 23, 42, 0.12) !important;
    }
    html[data-theme="quantum"] .nav-item-link.active {
        background: rgba(0, 242, 254, 0.12) !important;
        color: var(--cyan-accent) !important;
        border-inline-start: 3px solid var(--cyan-accent) !important;
        box-shadow: 0 0 15px rgba(0, 242, 254, 0.15) !important;
    }

    /* --- ONYX --- */
    [data-theme="onyx"][data-theme-mode="dark"] .nav-drawer {
        background: #151312 !important;
        border-inline-end: 1px solid #302b25 !important;
        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.7) !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .nav-drawer {
        background: #fdfbf7 !important;
        border-inline-end: 1px solid #e3ded4 !important;
        box-shadow: -20px 0 40px rgba(84, 70, 35, 0.12) !important;
    }
    [data-theme="onyx"][data-theme-mode="dark"] .nav-item-link.active {
        background: rgba(212, 175, 55, 0.12) !important;
        color: #d4af37 !important;
        border-inline-start: 3px solid #d4af37 !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .nav-item-link.active {
        background: rgba(154, 114, 46, 0.1) !important;
        color: #9a722e !important;
        border-inline-start: 3px solid #9a722e !important;
    }

    /* --- AURORA --- */
    [data-theme="aurora"][data-theme-mode="dark"] .nav-drawer {
        background: #120e24 !important;
        border-inline-end: 1px solid #2f2559 !important;
        box-shadow: -20px 0 55px rgba(3, 0, 20, 0.8), 0 0 35px rgba(139, 92, 246, 0.15) !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .nav-drawer {
        background: #faf9ff !important;
        border-inline-end: 1px solid #e0dcf8 !important;
        box-shadow: -20px 0 40px rgba(100, 80, 180, 0.12) !important;
    }
    [data-theme="aurora"][data-theme-mode="dark"] .nav-item-link.active {
        background: rgba(139, 92, 246, 0.15) !important;
        color: #a78bfa !important;
        border-inline-start: 3px solid #8b5cf6 !important;
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.2) !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .nav-item-link.active {
        background: rgba(139, 92, 246, 0.12) !important;
        color: #7c3aed !important;
        border-inline-start: 3px solid #7c3aed !important;
    }

    /* --- GOLD --- */
    [data-theme="gold"] .nav-drawer {
        background: #fffdf6 !important;
        border-inline-end: 1px solid #e4d9bd !important;
        box-shadow: -20px 0 50px rgba(84, 70, 35, 0.2) !important;
    }
    [data-theme="gold"] .nav-item-link.active {
        background: rgba(125, 97, 22, 0.08) !important;
        color: #7d6116 !important;
        border-inline-start: 3px solid #7d6116 !important;
    }

    /* --- Drawer Hamburger & Close Buttons across Themes --- */
    [data-theme="onyx"][data-theme-mode="dark"] .nav-hamburger,
    [data-theme="onyx"][data-theme-mode="dark"] .nav-drawer-close {
        background: #1c1a17 !important;
        border-color: #302b25 !important;
        color: #d4af37 !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .nav-hamburger,
    [data-theme="onyx"][data-theme-mode="light"] .nav-drawer-close {
        background: #ffffff !important;
        border-color: #e3ded4 !important;
        color: #9a722e !important;
    }
    [data-theme="aurora"][data-theme-mode="dark"] .nav-hamburger,
    [data-theme="aurora"][data-theme-mode="dark"] .nav-drawer-close {
        background: #1a1435 !important;
        border-color: #2f2559 !important;
        color: #a78bfa !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .nav-hamburger,
    [data-theme="aurora"][data-theme-mode="light"] .nav-drawer-close {
        background: #ffffff !important;
        border-color: #e0dcf8 !important;
        color: #7c3aed !important;
    }
    [data-theme="gold"] .nav-hamburger,
    [data-theme="gold"] .nav-drawer-close {
        background: #fffdf6 !important;
        border-color: #e4d9bd !important;
        color: #7d6116 !important;
    }
}

/* --------------------------------------------------------------------------
   17.3. Mobile Bottom Navigation Dock for All Themes (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* --- QUANTUM DARK --- */
    html[data-theme="quantum"][data-theme-mode="dark"] .mobile-bottom-dock {
        background: rgba(7, 12, 24, 0.94) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid rgba(0, 242, 254, 0.3) !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 242, 254, 0.15) !important;
    }
    html[data-theme="quantum"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item {
        color: #94a3b8 !important;
    }
    html[data-theme="quantum"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active,
    html[data-theme="quantum"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item:hover {
        color: #00f2fe !important;
    }
    html[data-theme="quantum"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active i {
        color: #00f2fe !important;
        text-shadow: 0 0 14px rgba(0, 242, 254, 0.8) !important;
    }
    html[data-theme="quantum"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active::after {
        background: linear-gradient(90deg, #00f2fe, #4facfe) !important;
        box-shadow: 0 2px 10px rgba(0, 242, 254, 0.9) !important;
    }

    /* --- QUANTUM LIGHT --- */
    html[data-theme="quantum"][data-theme-mode="light"] .mobile-bottom-dock {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid rgba(2, 132, 199, 0.25) !important;
        box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08), 0 0 14px rgba(2, 132, 199, 0.1) !important;
    }
    html[data-theme="quantum"][data-theme-mode="light"] .mobile-bottom-dock .dock-item {
        color: #64748b !important;
    }
    html[data-theme="quantum"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active,
    html[data-theme="quantum"][data-theme-mode="light"] .mobile-bottom-dock .dock-item:hover {
        color: #0284c7 !important;
    }
    html[data-theme="quantum"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active i {
        color: #0284c7 !important;
        text-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
    }
    html[data-theme="quantum"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active::after {
        background: linear-gradient(90deg, #0284c7, #2563eb) !important;
        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.6) !important;
    }

    /* --- TERMINAL LIGHT --- */
    html[data-theme="terminal"][data-theme-mode="light"] .mobile-bottom-dock {
        background: rgba(248, 250, 252, 0.96) !important;
        border-top: 1px solid #cbd5e1 !important;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08) !important;
    }
    html[data-theme="terminal"][data-theme-mode="light"] .mobile-bottom-dock .dock-item {
        color: #64748b !important;
    }
    html[data-theme="terminal"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active {
        color: #0284c7 !important;
    }
    html[data-theme="terminal"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active i {
        color: #0284c7 !important;
        text-shadow: none !important;
    }
    html[data-theme="terminal"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active::after {
        background: #0284c7 !important;
    }

    /* --- ONYX DARK --- */
    [data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock {
        background: rgba(21, 19, 18, 0.96) !important;
        border-top: 1px solid rgba(212, 175, 55, 0.28) !important;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.65) !important;
    }
    [data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item {
        color: #a89f92 !important;
    }
    [data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active,
    [data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item:hover {
        color: #d4af37 !important;
    }
    [data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active i {
        color: #d4af37 !important;
        text-shadow: 0 0 14px rgba(212, 175, 55, 0.6) !important;
    }
    [data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active::after {
        background: #d4af37 !important;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.8) !important;
    }

    /* --- ONYX LIGHT --- */
    [data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock {
        background: rgba(250, 248, 245, 0.96) !important;
        border-top: 1px solid rgba(154, 114, 46, 0.25) !important;
        box-shadow: 0 -6px 20px rgba(84, 70, 35, 0.1) !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock .dock-item {
        color: #7a7166 !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active,
    [data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock .dock-item:hover {
        color: #9a722e !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active i {
        color: #9a722e !important;
        text-shadow: 0 0 10px rgba(154, 114, 46, 0.35) !important;
    }
    [data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active::after {
        background: #9a722e !important;
        box-shadow: 0 2px 8px rgba(154, 114, 46, 0.6) !important;
    }

    /* --- AURORA DARK --- */
    [data-theme="aurora"][data-theme-mode="dark"] .mobile-bottom-dock {
        background: rgba(18, 14, 36, 0.95) !important;
        border-top: 1px solid rgba(139, 92, 246, 0.35) !important;
        box-shadow: 0 -8px 30px rgba(3, 0, 20, 0.7), 0 0 20px rgba(139, 92, 246, 0.18) !important;
    }
    [data-theme="aurora"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item {
        color: #aaa2d5 !important;
    }
    [data-theme="aurora"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active,
    [data-theme="aurora"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item:hover {
        color: #a78bfa !important;
    }
    [data-theme="aurora"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active i {
        color: #a78bfa !important;
        text-shadow: 0 0 14px rgba(139, 92, 246, 0.75) !important;
    }
    [data-theme="aurora"][data-theme-mode="dark"] .mobile-bottom-dock .dock-item.active::after {
        background: #8b5cf6 !important;
        box-shadow: 0 2px 10px rgba(139, 92, 246, 0.9) !important;
    }

    /* --- AURORA LIGHT --- */
    [data-theme="aurora"][data-theme-mode="light"] .mobile-bottom-dock {
        background: rgba(245, 243, 255, 0.96) !important;
        border-top: 1px solid rgba(139, 92, 246, 0.22) !important;
        box-shadow: 0 -6px 20px rgba(100, 80, 180, 0.1) !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .mobile-bottom-dock .dock-item {
        color: #7b73aa !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active,
    [data-theme="aurora"][data-theme-mode="light"] .mobile-bottom-dock .dock-item:hover {
        color: #7c3aed !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active i {
        color: #7c3aed !important;
        text-shadow: 0 0 10px rgba(124, 58, 237, 0.35) !important;
    }
    [data-theme="aurora"][data-theme-mode="light"] .mobile-bottom-dock .dock-item.active::after {
        background: #7c3aed !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.6) !important;
    }

    /* --- GOLD LIGHT --- */
    [data-theme="gold"] .mobile-bottom-dock {
        background: rgba(255, 253, 246, 0.97) !important;
        border-top: 2px solid #7d6116 !important;
        box-shadow: 0 -8px 26px rgba(84, 70, 35, 0.18) !important;
    }
    [data-theme="gold"] .mobile-bottom-dock .dock-item {
        color: #6f6350 !important;
    }
    [data-theme="gold"] .mobile-bottom-dock .dock-item.active,
    [data-theme="gold"] .mobile-bottom-dock .dock-item:hover {
        color: #7d6116 !important;
    }
    [data-theme="gold"] .mobile-bottom-dock .dock-item.active i {
        color: #7d6116 !important;
        text-shadow: 0 0 12px rgba(125, 97, 22, 0.5) !important;
    }
    [data-theme="gold"] .mobile-bottom-dock .dock-item.active::after {
        background: #7d6116 !important;
        box-shadow: 0 2px 8px rgba(125, 97, 22, 0.7) !important;
    }
}

/* --------------------------------------------------------------------------
   17.4. Hero Slider & Market Summary Across Devices (Mobile, Tablet, Laptop)
   -------------------------------------------------------------------------- */
/* Laptop & Desktop (>= 1201px) */
@media (min-width: 1201px) {
    .summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
}

/* Tablet (769px to 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
    .summary-wrap {
        margin-top: -36px;
        padding: 0 16px;
    }
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .hero {
        min-height: 340px;
    }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
    .summary-wrap {
        margin-top: -24px !important;
        padding: 0 12px !important;
    }
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1px !important;
    }
    .summary-card {
        padding: 12px 10px !important;
    }
    .summary-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.82rem !important;
    }
    .summary-value {
        font-size: 1.25rem !important;
    }
    .summary-label {
        font-size: 0.76rem !important;
    }
    .hero {
        min-height: clamp(230px, 36vh, 290px) !important;
    }
}

/* Very narrow phones (<= 380px) */
@media (max-width: 380px) {
    .summary-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --------------------------------------------------------------------------
   17.5. Universal Table Responsiveness for All Views
   -------------------------------------------------------------------------- */
.terminal-table,
.market-table,
.atable {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 900px) {
    .terminal-table,
    .market-table,
    .atable {
        min-width: 580px;
    }
}

@media (max-width: 768px) {
    .terminal-table,
    .market-table,
    .atable {
        min-width: 520px;
    }
    .terminal-table th,
    .terminal-table td,
    .market-table th,
    .market-table td,
    .atable th,
    .atable td {
        padding: 9px 8px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .terminal-table,
    .market-table,
    .atable {
        min-width: 480px;
    }
    .terminal-table th,
    .terminal-table td,
    .market-table th,
    .market-table td,
    .atable th,
    .atable td {
        padding: 8px 6px !important;
        font-size: 0.76rem !important;
    }
}

/* --------------------------------------------------------------------------
   17.6. Stock Details & TradingView Chart Responsiveness
   -------------------------------------------------------------------------- */
.chart-container,
#tvChartContainer,
#tradingviewChart {
    width: 100% !important;
    min-height: clamp(280px, 46vh, 460px) !important;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .chart-container,
    #tvChartContainer,
    #tradingviewChart {
        min-height: 290px !important;
    }
    .stock-detail-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .stock-price-hero {
        font-size: 1.85rem !important;
    }
    .timeframe-pill-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .timeframe-pill-strip::-webkit-scrollbar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   17.7. Modals & Action Dialogs on Mobile (Touch Ergonomics)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal-dialog,
    .trade-modal,
    .search-modal {
        max-width: 95vw !important;
        margin: 12px auto !important;
    }
    .terminal-card,
    .stock-card,
    .pred-card,
    .acard {
        margin-bottom: 14px !important;
    }
}

/* ==========================================================================
   18. Complete Cross-Device Responsiveness (Mobile, Tablet, Laptop & Desktop)
   ========================================================================== */

/* 18.1. Global Mobile/Tablet Scroll & Bottom Dock Spacing */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(68px + var(--safe-b)) !important;
    }

    .site-footer {
        padding-bottom: calc(88px + var(--safe-b)) !important;
    }
}

/* 18.2. Calculator Responsive Engine (.calc-main-grid) */
.calc-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 992px) {
    .calc-main-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 520px) {
    .calc-main-grid .quantum-card {
        padding: 20px 16px !important;
    }
}

/* 18.3. Sentiment Fear & Greed Responsive Engine (.sentiment-main-grid) */
.sentiment-main-grid {
    display: grid;
    grid-template-columns: minmax(360px, 420px) 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 992px) {
    .sentiment-main-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

@media (max-width: 480px) {
    .sentiment-main-grid .quantum-card {
        padding: 20px 14px !important;
    }
}

/* 18.4. Funds Grid Responsive (.funds-grid, #fundsGrid) */
.funds-grid,
#fundsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 560px) {
    .funds-grid,
    #fundsGrid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* 18.5. Leaderboard Dual Grid (.leaderboard-dual-grid) */
.leaderboard-dual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 24px;
}

@media (max-width: 992px) {
    .leaderboard-dual-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

@media (max-width: 480px) {
    .leaderboard-dual-grid .terminal-card {
        padding: 16px 12px !important;
    }
}

/* 18.6. Predictions Radar Grid (.predictions-grid) */
.predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
}

@media (max-width: 540px) {
    .predictions-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* 18.7. Stock Details Page KPIs & Interactive Charts */
.stock-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 105px), 1fr));
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 640px) {
    .stock-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 90px), 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 380px) {
    .stock-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.chart-wrapper-fluid {
    position: relative;
    width: 100% !important;
    min-height: 280px !important;
    height: clamp(280px, 46vh, 440px) !important;
    overflow: hidden;
}

.archive-chart-wrapper-fluid {
    position: relative;
    width: 100% !important;
    min-height: 240px !important;
    height: clamp(240px, 40vh, 340px) !important;
    overflow: hidden;
}

.timeframe-pill-group,
.timeframe-pill-strip {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    padding-bottom: 2px !important;
}

.timeframe-pill-group::-webkit-scrollbar,
.timeframe-pill-strip::-webkit-scrollbar {
    display: none !important;
}

/* 18.8. Contact Form Grid (.contact-inputs-grid) */
.contact-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 540px) {
    .contact-inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 18.9. Academy Pillars Grid (.academy-pillars-grid) */
.academy-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 560px) {
    .academy-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* 18.10. Terminal Tables with Sticky Ticker Column & Smooth Mobile Scroll */
.terminal-table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    scrollbar-width: thin;
}

@media (max-width: 900px) {
    .terminal-table.sticky-first-col th:first-child,
    .terminal-table.sticky-first-col td:first-child,
    .market-table.sticky-first-col th:first-child,
    .market-table.sticky-first-col td:first-child,
    table.sticky-first-col th:first-child,
    table.sticky-first-col td:first-child {
        position: sticky !important;
        right: 0 !important;
        z-index: 4 !important;
        background: var(--bg-surface, #0b1120) !important;
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.45) !important;
    }

    [data-theme-mode="light"] .terminal-table.sticky-first-col th:first-child,
    [data-theme-mode="light"] .market-table.sticky-first-col th:first-child,
    [data-theme-mode="light"] table.sticky-first-col th:first-child {
        background: #f1f5f9 !important;
        color: #1e293b !important;
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme-mode="light"] .terminal-table.sticky-first-col td:first-child,
    [data-theme-mode="light"] .market-table.sticky-first-col td:first-child,
    [data-theme-mode="light"] table.sticky-first-col td:first-child {
        background: #ffffff !important;
        color: #0f172a !important;
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme-mode="light"] .terminal-table.sticky-first-col tr:hover td:first-child,
    [data-theme-mode="light"] .market-table.sticky-first-col tr:hover td:first-child,
    [data-theme-mode="light"] table.sticky-first-col tr:hover td:first-child {
        background: #f8fafc !important;
    }
}

/* 18.11. Quantum Cards & Terminal Cards Responsive Padding */
@media (max-width: 600px) {
    .quantum-card {
        padding: 18px 14px !important;
        border-radius: var(--radius-md) !important;
    }

    .terminal-card {
        padding: 16px 12px !important;
    }
}

/* 18.12. Modals & Action Dialogs Centering & Touch */
.terminal-modal-backdrop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

.terminal-modal-content {
    max-width: min(94vw, 460px) !important;
    width: 100% !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

/* 18.13. News Hub Responsiveness */
.news-category-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
}
.news-category-tabs::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 580px) {
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .featured-lead-card {
        min-height: 290px !important;
    }
    .featured-lead-title {
        font-size: 1.15rem !important;
    }
    .featured-mini-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .featured-mini-img {
        width: 100% !important;
        height: 140px !important;
    }
}
details.footer-seo-directory summary::-webkit-details-marker {
    display: none;
}
details.footer-seo-directory summary {
    list-style: none;
}
details.footer-seo-directory[open] summary i.fa-chevron-down {
    transform: rotate(180deg);
}
details.footer-seo-directory summary:hover {
    color: var(--text-highlight) !important;
}

/* ==========================================================================
   19. COMPREHENSIVE LIGHT THEME CONSISTENCY FRAMEWORK
   Ensures 100% harmonious, high-contrast, modern light styling across all
   views (Portfolio, Stock, MarketData, Fund, Predictions, Admin, etc.)
   ========================================================================== */

/* ---------- 19.1. Tables, Sticky Columns & Cells ---------- */
[data-theme-mode="light"] table thead th,
[data-theme-mode="light"] .terminal-table th,
[data-theme-mode="light"] .market-table th,
[data-theme-mode="light"] .atable th {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-weight: 800 !important;
    font-size: 0.83rem !important;
}

[data-theme-mode="light"] table tbody td,
[data-theme-mode="light"] .terminal-table td,
[data-theme-mode="light"] .market-table td,
[data-theme-mode="light"] .atable td {
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: transparent;
}

[data-theme-mode="light"] table tbody tr:hover,
[data-theme-mode="light"] .terminal-table tbody tr:hover,
[data-theme-mode="light"] .market-table tbody tr:hover,
[data-theme-mode="light"] .atable tbody tr:hover {
    background: #f8fafc !important;
}

[data-theme-mode="light"] .terminal-table tr:hover td,
[data-theme-mode="light"] .market-table tr:hover td,
[data-theme-mode="light"] .atable tr:hover td {
    background: #f8fafc !important;
}

/* ---------- 19.2. Cards, Containers & Stat Banners ---------- */
[data-theme-mode="light"] .terminal-card,
[data-theme-mode="light"] .quantum-card,
[data-theme-mode="light"] .stock-card,
[data-theme-mode="light"] .pred-card,
[data-theme-mode="light"] .acard {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme-mode="light"] .terminal-card-header,
[data-theme-mode="light"] .acard-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme-mode="light"] .card-title,
[data-theme-mode="light"] .acard-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme-mode="light"] .stat-metric-card,
[data-theme-mode="light"] .kpi-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

[data-theme-mode="light"] .stat-metric-card .stat-label {
    color: #64748b !important;
    font-weight: 700 !important;
}

[data-theme-mode="light"] .stat-metric-card .stat-value {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme-mode="light"] .stat-metric-card.profit .stat-value {
    color: #059669 !important;
}

[data-theme-mode="light"] .stat-metric-card.loss .stat-value {
    color: #e11d48 !important;
}

/* ---------- 19.3. Buttons & Interactive Controls ---------- */
[data-theme-mode="light"] .btn-primary-glow,
[data-theme-mode="light"] .abtn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}

[data-theme-mode="light"] .btn-outline {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme-mode="light"] .btn-outline:hover {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
    color: #0284c7 !important;
}

/* ---------- 19.4. Stock Chips, Tabs & Badges ---------- */
[data-theme-mode="light"] .stock-ticker-chip {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

[data-theme-mode="light"] .sector-tab-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme-mode="light"] .sector-tab-btn:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    background: #f8fafc !important;
}

[data-theme-mode="light"] .sector-tab-btn.active {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15) !important;
}

[data-theme-mode="light"] .feed-tabs-container {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme-mode="light"] .feed-tab-btn {
    color: #64748b !important;
}

[data-theme-mode="light"] .feed-tab-btn.active {
    background: #ffffff !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ---------- 19.5. Inputs, Selects & Forms ---------- */
[data-theme-mode="light"] .pred-input,
[data-theme-mode="light"] input.form-control,
[data-theme-mode="light"] select.form-control,
[data-theme-mode="light"] textarea.form-control,
[data-theme-mode="light"] .aform-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme-mode="light"] .pred-input:focus,
[data-theme-mode="light"] input.form-control:focus,
[data-theme-mode="light"] select.form-control:focus,
[data-theme-mode="light"] textarea.form-control:focus,
[data-theme-mode="light"] .aform-control:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* ---------- 19.6. Modals & Dialogs ---------- */
[data-theme-mode="light"] .terminal-modal-backdrop {
    background: rgba(15, 23, 42, 0.55) !important;
}

[data-theme-mode="light"] .terminal-modal-content {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2) !important;
}

/* ---------- 19.7. Prediction Cards & Showcase Boxes ---------- */
[data-theme-mode="light"] .prediction-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-right: 5px solid #0284c7 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
}

[data-theme-mode="light"] .prediction-box.bullish {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 1.5px solid #cbd5e1 !important;
    border-right: 5px solid #059669 !important;
    box-shadow: 0 4px 18px rgba(5, 150, 105, 0.08) !important;
}

[data-theme-mode="light"] .prediction-box.bearish {
    background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%) !important;
    border: 1.5px solid #cbd5e1 !important;
    border-right: 5px solid #e11d48 !important;
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.08) !important;
}

[data-theme-mode="light"] .pred-header {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

[data-theme-mode="light"] .pred-stock-title,
[data-theme-mode="light"] .pred-stock-title a {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme-mode="light"] .pred-stock-title a:hover {
    color: #0284c7 !important;
}

[data-theme-mode="light"] .pred-metrics-grid {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-sm) !important;
}

[data-theme-mode="light"] .pred-metrics-grid .metric-col .label {
    color: #64748b !important;
    font-weight: 700 !important;
}

[data-theme-mode="light"] .pred-metrics-grid .metric-col .val {
    color: #0f172a !important;
    font-weight: 800 !important;
}

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

[data-theme-mode="light"] .status-badge.failed {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}

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

[data-theme-mode="light"] .badge-analyst {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

/* ---------- 19.8. Stock Index Navigator & Sector Filter Buttons ---------- */
[data-theme-mode="light"] .index-tab-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

[data-theme-mode="light"] .index-tab-btn:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    transform: translateY(-1px);
}

[data-theme-mode="light"] .index-tab-btn.active {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    box-shadow: 0 0 16px rgba(2, 132, 199, 0.18) !important;
}

[data-theme-mode="light"] .index-tab-count {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

[data-theme-mode="light"] .index-tab-btn.active .index-tab-count {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
}

[data-theme-mode="light"] .index-tab-change {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    font-weight: 800 !important;
}

[data-theme-mode="light"] .sector-tab-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme-mode="light"] .sector-tab-btn:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    background: #f8fafc !important;
}

[data-theme-mode="light"] .sector-tab-btn.active {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.18) !important;
    font-weight: 800 !important;
}

[data-theme-mode="light"] .sector-count-pill {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

[data-theme-mode="light"] .sector-tab-btn.active .sector-count-pill {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   20. MASTER UNIVERSAL DEVICE COMPATIBILITY MATRIX
   Full seamless responsiveness across all viewports and hardware:
   - Ultra-compact phones (320px - 360px: iPhone SE, Galaxy Z Flip, Folded screens)
   - Standard modern smartphones (375px - 480px: iPhone 13/14/15/16, Galaxy S21-S24)
   - Large phablets & foldable devices (481px - 768px: Fold unfolded, Pixel Fold)
   - Portrait tablets (769px - 1024px: iPad Mini, iPad Air, iPad 10.2", Galaxy Tab)
   - Landscape tablets & Compact laptops (1025px - 1240px: iPad Pro, Surface Pro, 12"-13" Ultrabooks)
   - Standard Desktop / Laptop (1241px - 1920px: 14"-16" laptops, FHD monitors)
   - High-Res & Ultrawide displays (1921px - 3840px+: 2K, 4K, 34"-49" ultrawide)
   ========================================================================== */

/* 20.1. Universal Overflow & Canvas Constraint */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* 20.2. Large Displays & Ultrawide (>= 1600px & 4K) */
@media (min-width: 1600px) {
    .page-wrap,
    .topbar-inner,
    .footer-inner,
    .site-footer .container,
    .site-chrome-container {
        max-width: 1540px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 2200px) {
    .page-wrap,
    .topbar-inner,
    .footer-inner,
    .site-footer .container,
    .site-chrome-container {
        max-width: 1720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 20.3. Tablets in Landscape & Compact Laptops (992px to 1240px) */
@media (min-width: 992px) and (max-width: 1240px) {
    .page-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .main-navbar {
        padding: 0 20px !important;
    }

    .kpi-grid,
    .stats-banner-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
        gap: 14px !important;
    }

    .leaderboard-dual-grid,
    .calc-main-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }

    .terminal-card {
        padding: 20px !important;
    }
}

/* 20.4. Tablets in Portrait (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
    .page-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 18px !important;
        margin-bottom: 24px !important;
    }

    .main-navbar {
        padding: 0 16px !important;
    }

    .kpi-grid,
    .stats-banner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .calc-main-grid,
    .sentiment-main-grid,
    .leaderboard-dual-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .terminal-table,
    .market-table,
    .atable {
        min-width: 660px !important;
    }
}

/* 20.5. Mobile Phones (<= 768px) */
@media (max-width: 768px) {
    /* Prevent iOS auto-zoom on input tap */
    input, select, textarea {
        font-size: 16px !important;
    }

    .page-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }

    /* Bottom dock clearance */
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .site-footer {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Mobile KPI Grids: 2-column */
    .kpi-grid,
    .stats-banner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-metric-card,
    .kpi-card {
        padding: 12px 10px !important;
    }

    .stat-metric-card .stat-value,
    .kpi-value {
        font-size: 1.25rem !important;
    }

    .stat-label,
    .kpi-label {
        font-size: 0.74rem !important;
    }

    /* Table Wrappers: smooth touch scroll with indicators */
    .table-responsive,
    .terminal-table-responsive,
    .atable-wrapper,
    div[style*="overflow-x:auto"],
    div[style*="overflow-x: auto"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: thin !important;
    }

    .table-responsive::-webkit-scrollbar,
    .terminal-table-responsive::-webkit-scrollbar,
    .atable-wrapper::-webkit-scrollbar {
        height: 5px !important;
    }

    .table-responsive::-webkit-scrollbar-thumb,
    .terminal-table-responsive::-webkit-scrollbar-thumb,
    .atable-wrapper::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.4) !important;
        border-radius: 4px !important;
    }

    /* Table minimum scroll floors so content never wraps awkwardly */
    .terminal-table,
    .market-table,
    .atable {
        min-width: 620px !important;
    }

    .terminal-table th, .terminal-table td,
    .market-table th, .market-table td,
    .atable th, .atable td {
        padding: 9px 10px !important;
        font-size: 0.82rem !important;
    }

    /* Modals & Dialogs on mobile */
    .amodal-overlay,
    .terminal-modal-backdrop {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .amodal,
    .terminal-modal-content,
    .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
    }

    /* Action buttons on mobile */
    .btn-primary-glow,
    .btn-outline,
    .abtn {
        min-height: 40px !important;
    }

    /* Form stacks on mobile */
    form[style*="display:flex"],
    form[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    form[style*="display:flex"] input,
    form[style*="display:flex"] select,
    form[style*="display:flex"] button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* 20.6. Ultra-Compact Phones & Folded Screens (<= 400px, e.g. 320px - 380px) */
@media (max-width: 400px) {
    .page-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .kpi-grid,
    .stats-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .brand-title .brand-name {
        font-size: 0.92rem !important;
    }

    .brand-logo-glow {
        width: 26px !important;
        height: 26px !important;
    }

    .nav-hamburger {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    .nav-actions {
        gap: 3px !important;
    }

    .theme-toggle-btn,
    .notif-bell-btn {
        width: 28px !important;
        height: 28px !important;
    }

    .dock-item {
        font-size: 0.65rem !important;
        padding: 5px 2px !important;
    }

    .dock-item i {
        font-size: 1rem !important;
    }

    .terminal-card,
    .quantum-card,
    .acard {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }

    .stock-ticker-chip {
        font-size: 0.95rem !important;
        padding: 3px 8px !important;
    }

    .price-val {
        font-size: 1.45rem !important;
    }

    h1, .page-title {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 0.95rem !important;
    }
}

/* 20.7. Coarse Pointer / Touch Accessibility (Smartphones, Tablets, Touch Laptops) */
@media (hover: none) and (pointer: coarse) {
    .dock-item,
    .nav-item-link,
    .admin-nav-link,
    .feed-tab-btn,
    .index-tab-btn,
    .btn-primary-glow,
    .btn-outline,
    .abtn,
    button[type="button"],
    button[type="submit"] {
        min-height: 42px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    input, select {
        min-height: 42px !important;
    }
}

/* 20.8. Safe Area Support for Notched Devices (iPhone X to 16, Foldables) */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-dock {
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .main-navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    .nav-drawer {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* 20.9. Universal 100% Full-Width Navbar Extension Across All Screens */
.main-navbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}