/* SaltTab Base Design System — Dark Monospace Theme */
/* This file layers on top of existing styles.css without replacing it */

/* ============================================================
   CSS Custom Properties — Dark Theme Override
   ============================================================ */
:root {
    --stb-bg: #0d0f14;
    --stb-bg-surface: #13161d;
    --stb-bg-elevated: #1a1e28;
    --stb-bg-card: #181c25;
    --stb-text: #e0e0e0;
    --stb-text-muted: #8a8f9a;
    --stb-text-bright: #ffffff;
    --stb-accent-green: #00e676;
    --stb-accent-red: #ff5252;
    --stb-accent-orange: #ffab40;
    --stb-accent-yellow: #ffd740;
    --stb-accent-blue: #40c4ff;
    --stb-accent-violet: #6c3fc4;
    --stb-border: #2a2e38;
    --stb-border-light: #333842;
    --stb-font-mono: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    --stb-font-sans: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    --stb-radius: 4px;
    --stb-radius-lg: 8px;
    --stb-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --stb-transition: 0.2s ease;
}

/* ============================================================
   Shared Nav Bar (injected into all pages)
   ============================================================ */
.salttab-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0d0f14;
    border-bottom: 1px solid #2a2e38;
    padding: 0 20px;
    height: 42px;
    font-family: var(--stb-font-sans);
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 10000;
    width: 100%;
    max-width: none;
    margin: 0 -10px;
    box-sizing: content-box;
    padding-left: 10px;
    padding-right: 10px;
}

.salttab-topnav a {
    color: #8a8f9a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 12px;
    line-height: 42px;
    transition: color 0.2s ease;
    font-size: 11px;
    font-weight: 500;
}

.salttab-topnav a:hover {
    color: #00e676;
}

.salttab-topnav a.active {
    color: #ffffff;
    border-bottom: 2px solid #00e676;
}

.salttab-topnav .topnav-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.salttab-topnav .topnav-links {
    display: flex;
    align-items: center;
    gap: 0;
}

.salttab-topnav .topnav-brand {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    padding-right: 16px;
    border-right: 1px solid #2a2e38;
    margin-right: 8px;
}

.salttab-topnav .topnav-brand:hover {
    color: #00e676;
}

.salttab-topnav .topnav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.salttab-topnav .topnav-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff5252;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 0 12px;
}

.salttab-topnav .topnav-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5252;
    animation: stb-pulse 1.5s ease-in-out infinite;
}

@keyframes stb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.salttab-topnav .topnav-black {
    color: #6c3fc4;
    font-weight: 600;
}

.salttab-topnav .topnav-black:hover {
    color: #9b6fe8;
}

/* Theme Toggle Button */
.topnav-theme-btn {
    background: none;
    border: 1px solid #2a2e38;
    color: #8a8f9a;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topnav-theme-btn:hover {
    color: #ffffff;
    border-color: #00e676;
}

/* Sun icon shown in dark mode, moon icon shown in light mode */
.topnav-theme-btn .icon-sun { display: none; }
.topnav-theme-btn .icon-moon { display: inline; }
html[data-theme="dark"] .topnav-theme-btn .icon-sun { display: inline; }
html[data-theme="dark"] .topnav-theme-btn .icon-moon { display: none; }

/* Topnav Hamburger (mobile only) */
.topnav-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #8a8f9a;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.topnav-menu-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.topnav-menu-btn:hover {
    color: #ffffff;
}

/* Push existing sticky header below topnav */
body > header {
    top: 42px;
}

/* Mobile topnav */
@media (max-width: 768px) {
    .salttab-topnav {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 10px;
        gap: 4px;
    }
    .salttab-topnav .topnav-left {
        width: 100%;
        flex-wrap: wrap;
    }
    .salttab-topnav .topnav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        border-top: 1px solid #2a2e38;
        padding-top: 4px;
        margin-top: 4px;
    }
    .salttab-topnav .topnav-links.open {
        display: flex;
    }
    .salttab-topnav .topnav-links a {
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.4;
        border-bottom: 1px solid #1a1e28;
    }
    .salttab-topnav .topnav-links a:last-child {
        border-bottom: none;
    }
    .salttab-topnav a {
        font-size: 10px;
        padding: 4px 8px;
        line-height: 1.4;
    }
    .salttab-topnav .topnav-brand {
        border-right: none;
        margin-right: auto;
    }
    .topnav-menu-btn {
        display: inline-flex;
        align-items: center;
    }
    .salttab-topnav .topnav-right {
        gap: 8px;
    }
    /* Hide LIVE badge on mobile */
    .salttab-topnav .topnav-live {
        display: none;
    }
}

/* ============================================================
   Dashboard Page Styles
   ============================================================ */

/* --- Full-page dark layout --- */
.stb-dashboard {
    background: var(--stb-bg);
    color: var(--stb-text);
    font-family: var(--stb-font-sans);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.stb-dashboard * {
    box-sizing: border-box;
}

/* --- Dashboard Header --- */
.stb-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--stb-bg-surface);
    border-bottom: 1px solid var(--stb-border);
}

.stb-dash-header h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--stb-text-bright);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.stb-dash-header .stb-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 82, 82, 0.15);
    color: var(--stb-accent-red);
    padding: 4px 12px;
    border-radius: var(--stb-radius);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

.stb-dash-header .stb-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stb-accent-red);
    animation: stb-pulse 1.5s ease-in-out infinite;
}

.stb-dash-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stb-region-select {
    background: var(--stb-bg-elevated);
    color: var(--stb-text);
    border: 1px solid var(--stb-border);
    padding: 6px 12px;
    font-family: var(--stb-font-sans);
    font-size: 12px;
    border-radius: var(--stb-radius);
    cursor: pointer;
}

.stb-search-input {
    background: var(--stb-bg-elevated);
    color: var(--stb-text);
    border: 1px solid var(--stb-border);
    padding: 6px 12px;
    font-family: var(--stb-font-sans);
    font-size: 12px;
    border-radius: var(--stb-radius);
    width: 200px;
}

.stb-search-input::placeholder {
    color: var(--stb-text-muted);
}

/* --- Timeline + Region Status Row --- */
.stb-timeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: var(--stb-bg-surface);
    border-bottom: 1px solid var(--stb-border);
    gap: 16px;
}

.stb-timeline {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.stb-timeline button {
    background: var(--stb-bg-elevated);
    color: var(--stb-text-muted);
    border: 1px solid var(--stb-border);
    padding: 4px 12px;
    font-family: var(--stb-font-sans);
    font-size: 11px;
    cursor: pointer;
    border-radius: var(--stb-radius);
    transition: all var(--stb-transition);
}

.stb-timeline button:hover,
.stb-timeline button.active {
    background: var(--stb-accent-green);
    color: var(--stb-bg);
    border-color: var(--stb-accent-green);
}

.stb-timeline-label {
    color: var(--stb-text-muted);
    font-size: 10px;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stb-region-cards-inline {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stb-region-card[data-region] {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.stb-region-card[data-region]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.stb-region-card.region-active {
    outline: 2px solid var(--stb-accent-green);
    outline-offset: -1px;
}

/* --- Map Panel --- */
.stb-map-container {
    width: 100%;
    height: 65vh;
    position: relative;
    border-bottom: 1px solid var(--stb-border);
}

.stb-map-container #map {
    width: 100%;
    height: 100%;
}

/* Scroll zoom toggle */
.stb-zoom-toggle {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1000;
}

.stb-zoom-toggle button {
    background: rgba(13, 15, 20, 0.88);
    color: var(--stb-text-muted);
    border: 1px solid var(--stb-border);
    padding: 6px 12px;
    font-family: var(--stb-font-sans);
    font-size: 11px;
    cursor: pointer;
    border-radius: var(--stb-radius);
    transition: all var(--stb-transition);
}

.stb-zoom-toggle button:hover {
    color: var(--stb-text);
    border-color: var(--stb-text-muted);
}

.stb-zoom-toggle button.active {
    background: var(--stb-accent-green);
    color: var(--stb-bg);
    border-color: var(--stb-accent-green);
}

/* Layer toggle overlay */
.stb-layer-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    background: rgba(13, 15, 20, 0.92);
    border: 1px solid var(--stb-border);
    border-radius: var(--stb-radius-lg);
    padding: 12px;
    min-width: 200px;
}

.stb-layer-toggle h3 {
    font-size: 11px;
    color: var(--stb-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--stb-border);
}

.stb-layer-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--stb-text);
    cursor: pointer;
}

.stb-layer-toggle label:hover {
    color: var(--stb-text-bright);
}

.stb-layer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- AI Insights Bar (above map) --- */
.stb-insights-bar {
    background: var(--stb-bg-elevated);
    border-bottom: 1px solid var(--stb-border);
    padding: 16px 20px;
}

.stb-insight-brief-block {
    max-width: 100%;
}

.stb-insight-brief-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.stb-insight-brief-header h3 {
    font-size: 12px;
    color: var(--stb-accent-green);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.stb-insight-brief-block #ai-summary p {
    font-size: 12px;
    color: var(--stb-text);
    line-height: 1.65;
    margin-bottom: 10px;
}

.stb-insight-brief-block #ai-summary p:last-child {
    margin-bottom: 0;
}

.stb-insight-brief-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--stb-border);
}

.stb-insight-brief-footer .stb-insight-tags {
    padding: 0;
}

.stb-insight-brief-footer .insight-timestamp {
    font-size: 10px;
    color: var(--stb-text-muted);
    flex-shrink: 0;
}

.stb-insights-meta-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stb-insights-meta-links .stb-insight-link {
    display: inline;
    padding: 0;
    border-top: none;
    font-size: 10px;
}

/* --- Bottom Panels Grid --- */
.stb-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    height: calc(35vh - 90px);
    min-height: 300px;
}

.stb-panel {
    background: var(--stb-bg-surface);
    border-right: 1px solid var(--stb-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stb-panel:last-child {
    border-right: none;
}

.stb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--stb-border);
    flex-shrink: 0;
}

.stb-panel-header h2 {
    font-size: 12px;
    font-weight: 600;
    color: var(--stb-text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stb-panel-tabs {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--stb-border);
    background: var(--stb-bg-surface);
}

.stb-panel-tab {
    background: none;
    border: none;
    color: var(--stb-text-muted);
    font-family: var(--stb-font-sans);
    font-size: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--stb-transition);
}

.stb-panel-tab:hover {
    color: var(--stb-text);
}

.stb-panel-tab.active {
    color: var(--stb-accent-green);
    border-bottom-color: var(--stb-accent-green);
}

.stb-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Scrollbar styling */
.stb-panel-body::-webkit-scrollbar {
    width: 4px;
}
.stb-panel-body::-webkit-scrollbar-track {
    background: var(--stb-bg);
}
.stb-panel-body::-webkit-scrollbar-thumb {
    background: var(--stb-border);
    border-radius: 2px;
}

/* --- News Feed Items --- */
.stb-news-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--stb-border);
    text-decoration: none;
    transition: background var(--stb-transition);
}

.stb-news-item:hover {
    background: var(--stb-bg-elevated);
}

.stb-news-item .news-source {
    font-size: 10px;
    color: var(--stb-accent-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.stb-news-item .news-title {
    font-size: 12px;
    color: var(--stb-text);
    line-height: 1.4;
    margin-bottom: 2px;
}

.stb-news-item .news-time {
    font-size: 10px;
    color: var(--stb-text-muted);
}

/* --- Webcam Grid --- */
.stb-webcam-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    height: 100%;
}

.stb-webcam-cell {
    position: relative;
    background: #000;
    overflow: hidden;
}

.stb-webcam-cell iframe,
.stb-webcam-cell > div {
    width: 100%;
    height: 100%;
    border: none;
}

/* Error overlay when embed is blocked/private/unavailable */
.stb-stream-error-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #111318 0%, #1a1e28 100%);
    text-align: center;
    gap: 8px;
    padding: 16px;
}

.stb-stream-error-icon {
    font-size: 28px;
    color: #ff5252;
    line-height: 1;
}

.stb-stream-error-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--stb-text);
}

.stb-stream-error-msg {
    font-size: 10px;
    color: var(--stb-text-muted);
}

.stb-stream-error-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 16px;
    background: #ff0000;
    color: #fff;
    font-family: var(--stb-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--stb-radius);
    transition: background 0.2s;
}

.stb-stream-error-btn:hover {
    background: #cc0000;
}

.stb-webcam-label {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0,0,0,0.7);
    color: var(--stb-text);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 2;
}

.stb-stream-live-tag {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    animation: stb-live-pulse 2s ease-in-out infinite;
}

@keyframes stb-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stb-stream-fallback {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(255,0,0,0.75);
    color: #fff;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 2px;
    text-decoration: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.stb-webcam-cell:hover .stb-stream-fallback {
    opacity: 1;
}

.news-cat {
    display: inline-block;
    font-size: 8px;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}
.news-cat-disasters { background: #ffd740; color: #000; }
.news-cat-war { background: #ff5252; color: #fff; }
.news-cat-politics { background: #40c4ff; color: #000; }
.news-cat-progress { background: #69f0ae; color: #000; }
.news-cat-data { background: #e040fb; color: #fff; }

/* --- AI Insights Panel --- */
.stb-insight-brief {
    padding: 16px;
}

.stb-insight-brief h3 {
    font-size: 11px;
    color: var(--stb-accent-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stb-insight-brief p {
    font-size: 12px;
    color: var(--stb-text);
    line-height: 1.6;
    margin-bottom: 12px;
}

.stb-insight-brief .insight-timestamp {
    font-size: 10px;
    color: var(--stb-text-muted);
}

.stb-region-cards {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stb-region-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--stb-bg-elevated);
    border-radius: var(--stb-radius);
    border-left: 3px solid var(--stb-border);
}

.stb-region-card.stable { border-left-color: var(--stb-accent-green); }
.stb-region-card.elevated { border-left-color: var(--stb-accent-orange); }
.stb-region-card.critical { border-left-color: var(--stb-accent-red); }

.stb-region-card .region-name {
    font-size: 12px;
    color: var(--stb-text);
}

.stb-status-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
}

.stb-status-badge.stable {
    background: rgba(0, 230, 118, 0.15);
    color: var(--stb-accent-green);
}

.stb-status-badge.elevated {
    background: rgba(255, 171, 64, 0.15);
    color: var(--stb-accent-orange);
}

.stb-status-badge.critical {
    background: rgba(255, 82, 82, 0.15);
    color: var(--stb-accent-red);
}

.stb-insight-tags {
    padding: 0 16px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stb-insight-tag {
    font-size: 10px;
    color: var(--stb-accent-blue);
    background: rgba(64, 196, 255, 0.1);
    padding: 2px 8px;
    border-radius: 2px;
}

.stb-insight-link {
    display: block;
    padding: 10px 16px;
    border-top: 1px solid var(--stb-border);
    font-size: 11px;
    color: var(--stb-accent-violet);
    text-decoration: none;
    text-align: center;
}

.stb-insight-link:hover {
    color: #9b6fe8;
    background: var(--stb-bg-elevated);
}

/* --- Mobile Responsive --- */
@media (max-width: 1024px) {
    .stb-panels {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }
    .stb-timeline-row {
        flex-wrap: wrap;
    }
    .stb-region-cards-inline {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .stb-timeline-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .stb-region-cards-inline {
        width: 100%;
    }
    .stb-insight-brief-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .stb-insight-brief-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .stb-map-container {
        height: 50vh;
    }
    .stb-panels {
        grid-template-columns: 1fr;
        height: auto;
    }
    .stb-panel {
        border-right: none;
        border-bottom: 1px solid var(--stb-border);
        min-height: 300px;
    }
    .stb-dash-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .stb-dash-controls {
        width: 100%;
    }
    .stb-search-input {
        flex: 1;
    }
    .stb-layer-toggle {
        min-width: 160px;
        font-size: 11px;
    }
}

/* ============================================================
   Black Subdomain Styles
   ============================================================ */

.stb-black {
    background: var(--stb-bg);
    color: var(--stb-text);
    font-family: var(--stb-font-sans);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.stb-black a {
    color: var(--stb-accent-violet);
    text-decoration: none;
}

.stb-black a:hover {
    color: #9b6fe8;
    text-decoration: underline;
}

/* Black pages header banner */
.stb-black-banner {
    background: linear-gradient(135deg, #1a0e2e 0%, #0d0f14 100%);
    border-bottom: 2px solid var(--stb-accent-violet);
    padding: 32px 24px;
    text-align: center;
}

.stb-black-banner h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--stb-text-bright);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stb-black-banner p {
    font-size: 13px;
    color: var(--stb-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Black page content container */
.stb-black-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* Section blocks */
.stb-section {
    margin-bottom: 32px;
}

.stb-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--stb-border);
}

.stb-section-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--stb-text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stb-section-header .section-icon {
    font-size: 18px;
}

/* Stat cards */
.stb-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stb-stat-card {
    background: var(--stb-bg-card);
    border: 1px solid var(--stb-border);
    border-radius: var(--stb-radius-lg);
    padding: 20px;
    text-align: center;
}

.stb-stat-card .stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--stb-accent-violet);
    margin-bottom: 4px;
}

.stb-stat-card .stat-label {
    display: block;
    font-size: 12px;
    color: var(--stb-text);
    margin-bottom: 4px;
}

.stb-stat-card .stat-detail {
    display: block;
    font-size: 10px;
    color: var(--stb-text-muted);
}

/* Comparison cards (side-by-side equity stats) */
.stb-compare-card {
    background: var(--stb-bg-card);
    border: 1px solid var(--stb-border);
    border-radius: var(--stb-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.stb-compare-card .compare-vs {
    font-size: 14px;
    color: var(--stb-text-muted);
    font-weight: 700;
}

.stb-compare-side {
    flex: 1;
    text-align: center;
}

.stb-compare-side .compare-pct {
    display: block;
    font-size: 28px;
    font-weight: 700;
}

.stb-compare-side .compare-label {
    display: block;
    font-size: 11px;
    color: var(--stb-text-muted);
    margin-top: 2px;
}

.stb-compare-side.highlight .compare-pct {
    color: var(--stb-accent-red);
}

.stb-compare-side.normal .compare-pct {
    color: var(--stb-accent-green);
}

/* Data table styling */
.stb-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.stb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.stb-table th {
    background: var(--stb-bg-elevated);
    color: var(--stb-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--stb-border);
}

.stb-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--stb-border);
    color: var(--stb-text);
}

.stb-table tbody tr:hover {
    background: var(--stb-bg-elevated);
}

/* Chart containers */
.stb-chart-container {
    background: var(--stb-bg-card);
    border: 1px solid var(--stb-border);
    border-radius: var(--stb-radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.stb-chart-container h3 {
    font-size: 13px;
    color: var(--stb-text-bright);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stb-chart-container canvas {
    width: 100% !important;
    max-height: 400px;
}

/* Entry cards for hub page */
.stb-entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
}

.stb-entry-card {
    background: var(--stb-bg-card);
    border: 1px solid var(--stb-border);
    border-radius: var(--stb-radius-lg);
    padding: 32px;
    text-align: center;
    transition: all var(--stb-transition);
    text-decoration: none;
    display: block;
}

.stb-entry-card:hover {
    border-color: var(--stb-accent-violet);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(108, 63, 196, 0.2);
    text-decoration: none;
}

.stb-entry-card h3 {
    font-size: 18px;
    color: var(--stb-text-bright);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stb-entry-card p {
    font-size: 12px;
    color: var(--stb-text-muted);
    line-height: 1.6;
}

.stb-entry-card .entry-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

/* Source list */
.stb-source-list {
    list-style: none;
    padding: 0;
}

.stb-source-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--stb-border);
    font-size: 12px;
}

.stb-source-list .source-name {
    color: var(--stb-accent-violet);
    font-weight: 600;
}

.stb-source-list .source-desc {
    color: var(--stb-text-muted);
    margin-top: 2px;
}

.stb-source-list .source-auth {
    display: inline-block;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 2px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stb-source-list .auth-free {
    background: rgba(0, 230, 118, 0.15);
    color: var(--stb-accent-green);
}

.stb-source-list .auth-key {
    background: rgba(255, 171, 64, 0.15);
    color: var(--stb-accent-orange);
}

/* Feed/RSS style items */
.stb-feed-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--stb-border);
}

.stb-feed-item .feed-title {
    font-size: 13px;
    color: var(--stb-text);
    margin-bottom: 4px;
}

.stb-feed-item .feed-meta {
    font-size: 10px;
    color: var(--stb-text-muted);
}

/* Explainer blocks */
.stb-explainer {
    background: var(--stb-bg-elevated);
    border-left: 3px solid var(--stb-accent-violet);
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 0 var(--stb-radius) var(--stb-radius) 0;
}

.stb-explainer p {
    font-size: 13px;
    color: var(--stb-text);
    line-height: 1.7;
}

/* Hidden counter */
.stb-hidden-counter {
    background: var(--stb-bg-card);
    border: 1px dashed var(--stb-accent-red);
    border-radius: var(--stb-radius-lg);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.stb-hidden-counter .counter-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--stb-accent-red);
    display: block;
}

.stb-hidden-counter .counter-label {
    font-size: 12px;
    color: var(--stb-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer */
.stb-footer {
    text-align: center;
    padding: 24px;
    border-top: 1px solid var(--stb-border);
    font-size: 10px;
    color: var(--stb-text-muted);
}

.stb-footer a {
    color: var(--stb-text-muted);
}

.stb-footer a:hover {
    color: var(--stb-text);
}

/* Mobile for black pages */
@media (max-width: 768px) {
    .stb-black-banner {
        padding: 20px 16px;
    }
    .stb-black-banner h1 {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .stb-entry-grid {
        grid-template-columns: 1fr;
    }
    .stb-stat-grid {
        grid-template-columns: 1fr;
    }
    .stb-compare-card {
        flex-direction: column;
    }
    .stb-black-content {
        padding: 16px;
    }
}