/* Threadlinqs Intelligence - Black + Pastel Command Center */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Surfaces */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-surface: #111111;
    --bg-surface-alt: #0e0e0e;
    --bg-elevated: #1a1a1a;
    --bg-tertiary: #1a1a1a;
    --bg-card: #141414;
    --bg-hover: #1e1e1e;
    --bg-active: #222222;

    /* Typography */
    --text-primary: #f0f0f0;
    --text-secondary: #888888;
    --text-muted: #555555;

    /* Borders */
    --border-color: #222222;
    --border-light: #333333;
    --border-active: #444444;

    /* Accents */
    --accent-primary: #f0f0f0;
    --accent-blue: #7dd3fc;
    --accent-green: #a8e6cf;
    --accent-purple: #c4b5fd;
    --highlight-bg: rgba(253, 186, 116, 0.2);
    --highlight-text: #fdba74;

    /* Severity — pastel spectrum */
    --severity-critical: #fda4af;
    --severity-high: #fdba74;
    --severity-medium: #c4b5fd;
    --severity-low: #a8e6cf;

    /* Detection languages */
    --det-spl: #a8e6cf;
    --det-kql: #c4b5fd;
    --det-sigma: #7dd3fc;

    /* Status */
    --status-active: #fda4af;
    --status-monitoring: #fdba74;
    --status-resolved: #a8e6cf;

    /* Layout */
    --sidebar-width: 240px;
    --detail-width: 720px;
    --header-height: 56px;

    /* Zero radius — sharp edges throughout */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    /* Fonts */
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Shadows — subtle on near-black */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
}

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

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
}

/* App Container */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
}

/* Mobile Header */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #0a0a0a;
    border-bottom: 1px solid #1e1e1e;
    padding: 0 12px;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

.mobile-menu-btn,
.mobile-filter-btn {
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid #1e1e1e;
    border-radius: 0;
    color: #737373;
    font-family: var(--font-mono);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mobile-menu-btn:active,
.mobile-filter-btn:active {
    color: #e8e8e8;
    border-color: #c4b5fd;
}

.mobile-filter-btn {
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Sidebar */
/* Sidebar — terminal aesthetic per mockup */
.sidebar {
    width: var(--sidebar-width);
    background: #0a0a0a;
    border-right: 1px solid #1e1e1e;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
}

.sidebar-close {
    display: none;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: #525252;
    font-size: 20px;
    cursor: pointer;
}

.sidebar-header {
    padding: 24px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 4px;
}

.logo-prompt {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: #c4b5fd;
}

.logo-subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    color: #c4b5fd;
    width: 100%;
    padding-left: 20px;
    margin-top: -6px;
    letter-spacing: 1px;
}

.logo-icon { display: none; }

.logo-text {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 500;
    color: #e8e8e8;
}

.sidebar-nav {
    flex: 1;
    padding: 0 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-section {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #737373;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 8px;
    margin-bottom: 0;
    margin-top: 8px;
}

/* Collapsible nav section (// enterprise) — the title becomes a button that
   folds the items below it. Inherits .nav-section-title typography; we only
   reset the <button> chrome and add the disclosure chevron. The 11 items live
   in .nav-section-items, hidden until the section carries .expanded. */
.nav-section-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
/* Scoped under .sidebar so the hover color beats the more-specific
   `.sidebar .nav-section-title` resting rule (var(--ink-3)) in dark mode. */
.sidebar .nav-section-toggle:hover { color: #a0a0a0; }
.nav-section-toggle:focus-visible {
    outline: 1px solid var(--ent-gold, #fde68a);
    outline-offset: -1px;
}
.nav-section-chevron {
    font-size: 9px;
    line-height: 1;
    color: #525252;
    transition: transform 0.15s ease;
    transform: rotate(0deg);
}
.nav-section-collapsible.expanded .nav-section-toggle .nav-section-chevron {
    transform: rotate(90deg);
    color: var(--ent-gold, #fde68a);
}
.nav-section-items {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.nav-section-collapsible.expanded .nav-section-items { display: flex; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    height: 32px;
    border-radius: 0;
    color: #737373;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: normal;
    transition: all 0.15s ease;
    cursor: pointer;
}

/* Intelligence section items are taller */
.nav-section:first-child .nav-item {
    height: 36px;
    font-size: 13px;
}

.nav-item:hover {
    background: #161616;
    color: #e8e8e8;
}

.nav-item.active {
    background: #161616;
    color: #e8e8e8;
}

.nav-item.active .nav-count {
    color: #c4b5fd;
}

.nav-icon { display: none; }

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7c3aed;
    flex-shrink: 0;
}

/* Intelligence section dots are slightly larger */
.nav-section:first-child .nav-dot {
    width: 10px;
    height: 10px;
}

/* Sidebar menu icons (SVG glyphs, team-tinted) — replace the legacy nav-dot.
   Icons carry their own color; opacity mutes inactive rows to match the nav. */
.nav-ic {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    opacity: 0.78;
    transition: opacity 0.15s ease;
}
.nav-item:hover .nav-ic,
.nav-item.active .nav-ic { opacity: 1; }
/* Intelligence section rows are taller — nudge the glyph up to match. */
.nav-section:first-child .nav-ic { width: 17px; height: 17px; }

.nav-label {
    flex: 1;
    color: #a0a0a0;
}

.nav-item:hover .nav-label {
    color: #e8e8e8;
}

.nav-item.active .nav-label {
    color: #e8e8e8;
}

.nav-count {
    font-family: var(--font-mono);
    font-size: 11px;
    background: none;
    padding: 0;
    border-radius: 0;
    color: #737373;
}

.nav-badge { display: none; }

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid #1e1e1e;
}

.stats-mini {
    display: none;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
}

.stats-mini .dot {
    margin: 0 6px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 150;
}

/* Main Content — matches mockup: bg #0a0a0a, padding 24px 32px */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    background: #0a0a0a;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 0;
}

/* Hide old header — mockup has no "Threat Intelligence" heading */
.main-header {
    display: none;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-container {
    position: relative;
}

.search-input {
    width: 220px;
    padding: 10px 16px 10px 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.15s ease;
}

.search-input:focus {
    border-color: var(--border-light);
    background: var(--bg-card);
}

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

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted);
}

.advanced-search-btn {
    padding: 10px 16px;
    background: var(--accent-blue);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.advanced-search-btn:hover {
    background: #5ab8e6;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px 32px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.15s ease;
}

.stat-card:hover {
    border-color: var(--border-light);
}

.stat-card.critical {
    border-left: 3px solid var(--severity-critical);
}

.stat-card.high {
    border-left: 3px solid var(--severity-high);
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Filters Section */
.filters-section {
    display: none;
    padding: 0 32px;
    margin-bottom: 16px;
}

.filters-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filters-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.filters-toggle-icon {
    font-size: 16px;
}

.filters-toggle-text {
    flex: 1;
    text-align: left;
}

.filters-toggle-arrow {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.filters-toggle-arrow.open {
    transform: rotate(180deg);
}

.filters-panel {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0;
    padding: 20px;
}

.filters-panel.open {
    display: block;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.filter-select {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.filter-select:focus {
    border-color: var(--accent-blue);
}

.filters-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.filter-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn-clear {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.filter-btn-clear:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.filter-results {
    font-size: 13px;
    color: var(--text-muted);
}

/* Threats Section */
.threats-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 32px 24px;
}

.section-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
}

.sort-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

/* Threat feed — mockup: 1px gap between rows, padding 0 32px */
.threats-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 32px;
}

/* Threat Card */
.threat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.threat-card:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
}

.threat-card.active {
    border-color: var(--accent-blue);
}

.threat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.threat-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Threat ID — mockup: #737373, JetBrains Mono 12px, normal weight */
.threat-id {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: normal;
    color: #737373;
}

/* Severity badge — mockup: 10px 600 text, padding 2px 8px, colored text on 10% bg */
.severity-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

.severity-badge.critical {
    background: rgba(253, 164, 175, 0.1);
    color: #fda4af;
}

.severity-badge.high {
    background: rgba(253, 186, 116, 0.1);
    color: #fdba74;
}

.severity-badge.medium {
    background: rgba(253, 230, 138, 0.1);
    color: #fde68a;
}

.severity-badge.low {
    background: rgba(168, 230, 207, 0.1);
    color: #a8e6cf;
}

/* Status badge — mockup: ACTIVE in mint green on 10% bg */
.status-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: normal;
    padding: 2px 8px;
    border-radius: 0;
    text-transform: uppercase;
}

.status-badge.active-status {
    background: rgba(168, 230, 207, 0.1);
    color: #a8e6cf;
}

.status-badge.monitoring-status {
    background: rgba(253, 186, 116, 0.1);
    color: #fdba74;
}

.status-badge.resolved-status {
    background: rgba(125, 211, 252, 0.1);
    color: #7dd3fc;
}

.status-badge.active_exploitation-status {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.status-badge.research-status {
    background: rgba(196, 181, 253, 0.1);
    color: #c4b5fd;
}

.status-badge.patched-status {
    background: rgba(125, 211, 252, 0.15);
    color: #7dd3fc;
}

.status-badge.disrupted-status {
    background: rgba(253, 224, 71, 0.1);
    color: #fde047;
}

.threat-row-rl-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(196, 181, 253, 0.15);
    color: #c4b5fd;
    text-transform: none;
    letter-spacing: 0.5px;
}

[data-theme="light"] .threat-row-rl-badge {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.threat-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

.threat-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.threat-card-summary {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.threat-card-footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.threat-tag {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 0;
    color: var(--text-secondary);
}

.threat-tag.mitre {
    background: rgba(125, 211, 252, 0.15);
    color: var(--accent-blue);
}

.detection-count {
    font-size: 11px;
    padding: 4px 8px;
    background: rgba(168, 230, 207, 0.15);
    color: var(--accent-green);
    border-radius: 0;
    margin-left: auto;
}

.view-count {
    font-size: 11px;
    padding: 4px 8px;
    background: rgba(125, 211, 252, 0.15);
    color: var(--accent-blue);
    border-radius: 0;
}

.popularity-badge {
    font-size: 14px;
    margin-left: 4px;
}

/* Research Lab Tag - for threats created via Research Lab */
.research-lab-tag {
    background: linear-gradient(135deg, rgba(168, 230, 207, 0.3), rgba(168, 230, 207, 0.15));
    color: white;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
}

/* Advanced Search Modal */
.search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
}

.search-modal.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10vh;
}

.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
}

.search-modal-content {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.search-modal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.search-modal-input-wrap {
    position: relative;
    padding: 16px 24px;
}

.search-modal-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    transition: all 0.15s ease;
}

.search-modal-input:focus {
    border-color: var(--accent-blue);
}

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

.search-modal-icon {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
}

.search-modal-hint {
    padding: 0 24px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.search-modal-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
}

.search-result-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-result-item:hover {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.search-result-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.search-result-snippet {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.search-result-snippet mark {
    background: var(--highlight-bg);
    color: var(--highlight-text);
    padding: 1px 4px;
    border-radius: 0;
}

.search-result-count {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.search-no-results {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Detail Modal */
.detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
}

.detail-modal.open {
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

/* ===== DETAIL PANEL (dp-*) ===== */
.detail-panel {
    position: relative;
    width: 90%;
    max-width: 860px;
    max-height: 90vh;
    background: #0a0a0a;
    border: 1px solid #1e1e1e;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Detail Header — mockup: padding 24px 32px, bottom border */
.dp-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 32px;
    border-bottom: 1px solid #1e1e1e;
}
.detail-header { display: none; }

.dp-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-id {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: #fdba74;
}

.dp-sev-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    text-transform: uppercase;
}

.close-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: normal;
    color: #525252;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: static;
    width: auto;
    height: auto;
}

.close-btn:hover {
    color: #e8e8e8;
    background: none;
}

.share-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.share-btn:hover { color: #e8e8e8; }

.detail-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    color: #e8e8e8;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.dp-date-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.dp-date-row .dp-date { color: #525252; }
.dp-date-row .dp-actor { color: #c4b5fd; }

/* ===== 8-TAB BAR — scrollable overflow ===== */
.dp-tabs {
    display: flex;
    padding: 0 32px;
    border-bottom: 1px solid #1e1e1e;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.dp-tabs::-webkit-scrollbar {
    display: none;
}

.dp-tab {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: normal;
    color: #525252;
    padding: 12px 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.dp-tab:hover { color: #a0a0a0; }

.dp-tab.active {
    color: #e8e8e8;
    font-weight: 500;
    border-bottom-color: #c4b5fd;
}

.detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

/* ===== SECTION LABELS — comment style per mockup ===== */
.dp-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
    margin-bottom: 0;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
    letter-spacing: 0;
    margin-bottom: 8px;
    text-transform: none;
}

.detail-section-content {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #a0a0a0;
    line-height: 1.65;

}

.detail-section-content p {
    margin: 0 0 10px 0;
}

.detail-section-content p:last-child {
    margin-bottom: 0;
}

.desc-cve {
    color: #fda4af;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    background: rgba(253, 164, 175, 0.08);
    padding: 1px 5px;
}

.desc-cve-clickable { cursor: pointer; }
.desc-cve-clickable:hover { background: rgba(253, 164, 175, 0.18); text-decoration: underline; }

.desc-cwe {
    color: #fdba74;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    background: rgba(253, 186, 116, 0.08);
    padding: 1px 5px;
}

.desc-cwe-clickable { cursor: pointer; }
.desc-cwe-clickable:hover { background: rgba(253, 186, 116, 0.18); text-decoration: underline; }

.desc-technique {
    color: #c4b5fd;
    font-family: var(--font-mono);
    font-size: 13px;
    background: rgba(196, 181, 253, 0.08);
    padding: 1px 5px;
}

.desc-ip {
    color: #7dd3fc;
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(125, 211, 252, 0.08);
    padding: 1px 5px;
}

.desc-defang {
    color: #fdba74;
    font-weight: 600;
}

.desc-hr {
    border: none;
    border-top: 1px solid #333;
    margin: 20px 0;
}

.desc-heading {
    font-family: var(--font-mono);
    margin: 16px 0 8px;
}

.desc-h2 {
    font-size: 0.95rem;
    color: #c4b5fd;
}

.desc-h3 {
    font-size: 0.85rem;
    color: #a5b4fc;
    font-weight: 600;
}

.detail-section-content code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #a8e6cf;
    background: rgba(168, 230, 207, 0.08);
    padding: 1px 5px;
}

/* ===== METADATA GRID — 2-col asymmetric (left: CVSS/Coverage/IOC, right: Exploitability spanning) ===== */
.detail-meta-grid {
    display: flex;
    gap: 1px;
}

.detail-meta-item {
    flex: 1;
    background: #111111;
    padding: 10px 12px;
    border-radius: 0;
    min-width: 0;
}

.detail-meta-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: normal;
    color: #525252;
    margin-bottom: 3px;
    letter-spacing: 0.03em;
}

.detail-meta-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-meta-value.cvss-val {
    font-size: 15px;
    font-weight: 700;
    color: #fda4af;
}

.detail-meta-value.exploit-val { color: #fda4af; }
.detail-meta-value.coverage-val { color: #a8e6cf; }
.detail-meta-value.ioc-val { color: #fdba74; }

/* ===== ATTRIBUTION / AFFECTED GRIDS — 3-column ===== */
.dp-attr-grid {
    display: flex;
    gap: 1px;
}

.dp-attr-cell {
    flex: 1;
    background: #111111;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-attr-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: normal;
    color: #525252;
}

.dp-attr-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: #e8e8e8;
}

.dp-attr-value.actor { color: #c4b5fd; }

/* ===== MITRE KILL CHAIN (DETAIL) — full width, 12px height per mockup ===== */
.dp-killchain {
    display: flex;
    gap: 2px;
    width: 100%;
}

.dp-kc-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dp-kc-bar {
    width: 100%;
    height: 12px;
    background: #333333;
}

.dp-kc-bar.active { background: #c4b5fd; }

.dp-kc-label {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: normal;
    color: #525252;
}

.dp-kc-bar.active + .dp-kc-label,
.dp-kc-cell.active .dp-kc-label { color: #737373; }

/* ===== TECHNIQUE LIST ===== */
.dp-technique-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 12px;
}

.dp-technique-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.dp-technique-row:nth-child(odd) { background: #111111; }
.dp-technique-row:nth-child(even) { background: #0e0e0e; }

.dp-technique-id {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #7dd3fc;
}

.dp-technique-name {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: normal;
    color: #a0a0a0;
}

/* ===== TIMELINE ===== */
.dp-timeline-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #1a1a1a;
}

.dp-timeline-row:last-child { border-bottom: none; }

.dp-tl-date {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
    width: 100px;
    flex-shrink: 0;
    padding-top: 2px;
}

.dp-tl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.dp-tl-text {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: normal;
    color: #a0a0a0;
}

.dp-tl-content { flex: 1; }
.dp-tl-nested { margin-top: 8px; padding-left: 12px; border-left: 1px solid #333; }
.dp-tl-sub-section { margin-bottom: 6px; }
.dp-tl-sub-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted, #525252); margin-right: 8px; }
.dp-tl-sub-item { display: inline-block; font-size: 11px; padding: 2px 6px; margin: 2px 4px 2px 0; background: var(--bg-surface, #1a1a1a); text-decoration: none; }
.dp-tl-sub-item.technique { color: #c4b5fd; }
.dp-tl-sub-item.tag { color: #7dd3fc; }
.dp-tl-sub-item.actor { color: #fda4af; }
.dp-tl-sub-item.ref { color: #a8e6cf; }
.dp-tl-sub-item.ref:hover { text-decoration: underline; }
.dp-tl-source-row { margin-top: 4px; }
.dp-tl-source-link {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #7dd3fc;
    text-decoration: none;
    padding: 2px 8px;
    background: #7dd3fc0d;
    border-left: 2px solid #7dd3fc;
    transition: color 0.2s, background 0.2s;
}
.dp-tl-source-link:hover { color: #bae6fd; background: #7dd3fc1a; text-decoration: underline; }
.dp-tl-source {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #666;
    padding: 2px 8px;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid #444;
}
.dp-tl-sub-item.ioc { color: #fde68a; }

/* ===== TAGS — per mockup: #1e1e1e pills, #737373 text ===== */
.dp-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #737373;
    background: #1e1e1e;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
}

/* ===== REFERENCES ===== */
.dp-ref-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.dp-ref-row:nth-child(odd) { background: #111111; }
.dp-ref-row:nth-child(even) { background: #0e0e0e; }

/* ===== MUTED TEXT ===== */
.dp-muted-text { color: #525252; }

.dp-ref-type {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
}

.dp-ref-title {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #7dd3fc;
    text-decoration: none;
}

.dp-ref-title:hover { color: #e8e8e8; }

.dp-ref-agent {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.6;
    margin-left: auto;
    flex-shrink: 0;
}

/* ===== OVERVIEW TAB LAYOUT ===== */
.dp-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 32px;
}

.dp-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== AFFECTED PRODUCTS — rich vendor/product/version cards ===== */
.dp-affected-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: 12px;
}
.dp-affected-card {
    background: #111111;
    padding: 10px 12px;
}
.dp-affected-vendor {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}
.dp-affected-product {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: #e5e5e5;
    margin-bottom: 6px;
}
.dp-affected-ver {
    font-family: var(--font-sans);
    font-size: 11px;
    color: #a3a3a3;
    margin-top: 3px;
    line-height: 1.4;
}
.dp-affected-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-right: 6px;
}
.dp-affected-lbl.vuln { color: #fda4af; }
.dp-affected-lbl.fixed { color: #a8e6cf; }

/* Target sector/region badges */
.dp-target-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.dp-target-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.dp-target-lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    margin-right: 4px;
}
.dp-sector-badge, .dp-region-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    background: #1a1a1a;
    color: #a3a3a3;
    border: 1px solid #262626;
}
.dp-sector-badge { color: #c4b5fd; border-color: #c4b5fd33; }
.dp-region-badge { color: #7dd3fc; border-color: #7dd3fc33; }

/* ===== IDENTIFIERS — CVE/CWE/alias badges ===== */
.dp-ident-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dp-ident-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    font-weight: 600;
}
.dp-ident-badge.cve {
    background: #fda4af19;
    color: #fda4af;
    border: 1px solid #fda4af33;
    cursor: pointer;
}
.dp-ident-badge.cwe {
    background: #fdba7419;
    color: #fdba74;
    border: 1px solid #fdba7433;
    cursor: pointer;
}
.dp-ident-badge.alias {
    background: #c4b5fd19;
    color: #c4b5fd;
    border: 1px solid #c4b5fd33;
}

/* ===== CVSS VECTOR BREAKDOWN ===== */
.dp-cvss-vector-str {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
    margin-bottom: 8px;
    word-break: break-all;
}
.dp-cvss-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}
.dp-cvss-cell {
    background: #111111;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 12%;
}
.dp-cvss-key {
    font-family: var(--font-mono);
    font-size: 8px;
    color: #525252;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-cvss-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
}

/* ===== REMEDIATION ===== */
.dp-rem-section {
    margin-bottom: 12px;
}
.dp-rem-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.dp-rem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dp-rem-list li {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #a3a3a3;
    line-height: 1.5;
    padding: 4px 0 4px 16px;
    position: relative;
}
.dp-rem-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: #525252;
}

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

.dp-refs-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dp-timeline-list {
    display: flex;
    flex-direction: column;
}

.dp-attr-value.dp-inter {
    font-family: var(--font-sans);
    font-weight: normal;
}

/* Coverage bar per mockup */
.dp-coverage-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-cov-bar-bg {
    width: 60px;
    height: 6px;
    background: #1e1e1e;
}

.dp-cov-bar-fill {
    height: 100%;
    background: #a8e6cf;
}

/* ===== DETECTIONS TAB ===== */
.dp-det-content {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dp-det-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dp-det-header .dp-label { margin-bottom: 0; }

.dp-det-export {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-bracket-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
    cursor: pointer;
    user-select: none;
}

.dp-bracket-btn:hover { color: #a0a0a0; }

.dp-det-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Expanded detection per mockup */
.dp-det-expanded {
    border: 1px solid #1e1e1e;
    display: flex;
    flex-direction: column;
}

.dp-det-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #111111;
}

.dp-det-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-det-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: #c4b5fd;
}

.dp-det-title-expanded {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #e8e8e8;
}

.dp-det-sev {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
}

/* Language tabs per mockup */
.dp-det-lang-tabs {
    display: flex;
    background: #0e0e0e;
}

.dp-lang-tab {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.dp-lang-tab:hover { color: #a0a0a0; }

.dp-lang-tab.active[data-lang="spl"] {
    color: #a8e6cf;
    font-weight: 500;
    border-bottom-color: #a8e6cf;
    background: #a8e6cf12;
}

.dp-lang-tab.active[data-lang="kql"] {
    color: #c4b5fd;
    font-weight: 500;
    border-bottom-color: #c4b5fd;
    background: #c4b5fd12;
}

.dp-lang-tab.active[data-lang="sigma"] {
    color: #7dd3fc;
    font-weight: 500;
    border-bottom-color: #7dd3fc;
    background: #7dd3fc12;
}

.dp-det-lang-tabs .dp-bracket-btn {
    margin-left: auto;
    padding: 10px 16px;
}

/* Code block per mockup */
.dp-det-code-wrap {
    background: #0a0a0a;
    min-height: 280px;
    max-height: 340px;
    overflow-y: auto;
}

.dp-det-code {
    display: flex;
    padding: 16px 0;
}

.dp-code-lines {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    border-right: 1px solid #1e1e1e;
    user-select: none;
}

.dp-code-lines span {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #2a2a2a;
}

.dp-code-content {
    padding: 0 20px;
    flex: 1;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #e8e8e8;
    white-space: pre;
}

/* MITRE footer per detection */
.dp-det-mitre-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #111111;
    border-top: 1px solid #1e1e1e;
}

.dp-det-mitre-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
}

.dp-det-mitre-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #7dd3fc;
}

.dp-det-mitre-name {
    font-family: var(--font-sans);
    font-size: 11px;
    color: #737373;
}

/* Detection description */
.dp-det-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: #a3a3a3;
    padding: 0 16px 10px;
}

/* Detection metadata badges row */
.dp-det-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 16px 10px;
}
.dp-det-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 8px;
    border: 1px solid #1e1e1e;
}
.dp-det-ds {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #7dd3fc;
    padding: 2px 8px;
    background: #7dd3fc0d;
    border: 1px solid #7dd3fc1a;
}

/* False positives section */
.dp-det-fp, .dp-det-tuning {
    padding: 10px 16px;
    border-top: 1px solid #1e1e1e;
}
.dp-det-section-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    display: block;
    margin-bottom: 6px;
}
.dp-det-fp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dp-det-fp-list li {
    font-family: var(--font-sans);
    font-size: 11px;
    color: #fde68a;
    padding: 3px 0;
    padding-left: 12px;
    position: relative;
}
.dp-det-fp-list li::before {
    content: "!";
    position: absolute;
    left: 0;
    color: #fde68a80;
    font-family: var(--font-mono);
    font-size: 10px;
}
.dp-det-tuning-text {
    font-family: var(--font-sans);
    font-size: 11px;
    color: #a3a3a3;
    margin: 0;
    line-height: 1.5;
}

/* Light mode overrides */
[data-theme="light"] .dp-det-desc { color: #525252; }
[data-theme="light"] .dp-det-badge { border-color: #e5e5e5; }
[data-theme="light"] .dp-det-ds { color: #0369a1; background: #0369a10d; border-color: #0369a11a; }
[data-theme="light"] .dp-det-fp, [data-theme="light"] .dp-det-tuning { border-top-color: #e5e5e5; }
[data-theme="light"] .dp-det-section-label { color: #a3a3a3; }
[data-theme="light"] .dp-det-fp-list li { color: #92400e; }
[data-theme="light"] .dp-det-fp-list li::before { color: #92400e80; }
[data-theme="light"] .dp-det-tuning-text { color: #525252; }

/* Collapsed detection per mockup */
.dp-det-collapsed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #1e1e1e;
    cursor: pointer;
}

.dp-det-collapsed:nth-child(odd) { background: #111111; }
.dp-det-collapsed:nth-child(even) { background: #0e0e0e; }

.dp-det-collapsed:hover { background: #1a1a1a; }

.dp-det-title-collapsed {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: #e8e8e8;
}

.dp-det-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-det-lang-spl {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #a8e6cf;
}

.dp-det-lang-kql {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #c4b5fd;
}

.dp-det-lang-sigma {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #7dd3fc;
}

.mitre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mitre-tag {
    font-size: 12px;
    padding: 8px 12px;
    background: rgba(125, 211, 252, 0.1);
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-blue);
}

.detection-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 14px;
}

.detection-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.detection-item-name {
    font-size: 15px;
    font-weight: 600;
}

.detection-item-severity {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 0;
}

.detection-item-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.6;
}

.detection-query-wrap {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.detection-query {
    background: var(--bg-primary);
    padding: 14px;
    padding-right: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-green);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

/* Detection query type-specific backgrounds (threat detail panel) */
.detection-query.spl {
    background: linear-gradient(135deg, rgba(168, 230, 207, 0.05) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--det-spl);
    color: var(--det-spl);
}

.detection-query.kql {
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.05) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--det-kql);
    color: var(--det-kql);
}

.detection-query.sigma {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.05) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--det-sigma);
    color: var(--det-sigma);
}

/* Detection copy actions row */
.detection-copy-actions {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0;
}

.copy-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.copy-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.copy-btn.copied {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

.copy-fmt-btn, .export-sigma-btn {
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.copy-fmt-btn:hover {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.export-sigma-btn {
    color: var(--severity-medium);
    border-color: var(--severity-medium);
}

.export-sigma-btn:hover {
    background: var(--severity-medium);
    color: var(--bg-primary);
}

.copy-fmt-btn.copied, .export-sigma-btn.copied {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 500;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* Loading State */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
}

.loading-state .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 14px;
}

/* ===== RESPONSIVE / MOBILE ===== */

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }
    
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sidebar-overlay.open {
        display: block;
    }
    
    .main-content {
        margin-left: 0;
        padding-top: 56px;
        overflow-x: hidden;
    }
    
    .main-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
    }
    
    .search-input {
        width: 100%;
    }
    
    .advanced-search-btn {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .filters-section {
        padding: 0 16px;
    }
    
    .filters-grid {
        grid-template-columns: 1fr;
    }

    .detail-meta-grid {
        flex-wrap: wrap;
    }
    .detail-meta-item {
        flex: 1 1 30%;
    }

    .threats-section {
        padding: 0 16px 24px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .sort-select {
        width: 100%;
    }
    
    .threat-card {
        padding: 16px;
    }
    
    .threat-card-title {
        font-size: 15px;
    }
    
    .detail-panel {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
    
    .detail-header {
        padding: 20px 16px;
    }
    
    .detail-title {
        font-size: 18px;
        padding-right: 40px;
    }
    
    .detail-content {
        padding: 16px;
    }

    .detection-item {
        padding: 14px;
    }
    
    .detection-query {
        font-size: 11px;
        padding: 12px;
    }
    
    .search-modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
    
    .search-modal.open {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    .threat-card-footer {
        gap: 6px;
    }
    
    .threat-tag {
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* Query Language Tabs */
.query-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

.query-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.query-tab:hover {
    color: var(--text-secondary);
}

.query-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* Query tab type-specific active colors */
.query-tab[data-tab="spl"].active {
    color: var(--det-spl);
    border-bottom-color: var(--det-spl);
}

.query-tab[data-tab="kql"].active {
    color: var(--det-kql);
    border-bottom-color: var(--det-kql);
}

.query-tab[data-tab="sigma"].active {
    color: var(--det-sigma);
    border-bottom-color: var(--det-sigma);
}

/* Triple Query Tabs - SPL, KQL, Sigma with colors */
.query-tabs.triple-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 0;
}

.query-tabs.triple-tabs .query-tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

/* SPL Tab - Green */
.query-tab.spl-tab {
    color: var(--text-muted);
}

.query-tab.spl-tab:hover {
    color: var(--det-spl);
    background: rgba(168, 230, 207, 0.1);
}

.query-tab.spl-tab.active {
    color: var(--det-spl) !important;
    border-bottom-color: var(--det-spl) !important;
    background: rgba(168, 230, 207, 0.15);
}

/* KQL Tab - Purple */
.query-tab.kql-tab {
    color: var(--text-muted);
}

.query-tab.kql-tab:hover {
    color: var(--det-kql);
    background: rgba(196, 181, 253, 0.1);
}

.query-tab.kql-tab.active {
    color: var(--det-kql) !important;
    border-bottom-color: var(--det-kql) !important;
    background: rgba(196, 181, 253, 0.15);
}

/* Sigma Tab - Blue */
.query-tab.sigma-tab {
    color: var(--text-muted);
}

.query-tab.sigma-tab:hover {
    color: var(--det-sigma);
    background: rgba(125, 211, 252, 0.1);
}

.query-tab.sigma-tab.active {
    color: var(--det-sigma) !important;
    border-bottom-color: var(--det-sigma) !important;
    background: rgba(125, 211, 252, 0.15);
}

/* Detection Query Code Colors */
.detection-query.spl {
    border-left: 3px solid var(--det-spl);
}

.detection-query.kql {
    border-left: 3px solid var(--det-kql);
}

.detection-query.sigma {
    border-left: 3px solid var(--det-sigma);
}

/* Detection Library dl-* classes are defined in the main detection library section below */

/* ===== TRENDING SECTION ===== */
.trending-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 20px;
}

.trending-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.trending-icon {
    font-size: 16px;
}

.trending-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.trending-item {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trending-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.trending-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.trending-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 0;
    text-transform: uppercase;
}

.trending-badge.new {
    background: var(--accent-green);
    color: white;
}

.trending-badge.urgent {
    background: var(--severity-critical);
    color: white;
    animation: pulse 1.5s infinite;
}

.trending-badge.active {
    background: var(--severity-high);
    color: white;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.trending-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trending-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ===== TIMELINE ===== */
.timeline-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 16px;
}

.timeline-event {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-bottom: 24px;
}

.timeline-event:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
    flex-shrink: 0;
}

.timeline-event.past .timeline-dot {
    border-color: var(--accent-blue);
    background: var(--bg-primary);
}

.timeline-event.future .timeline-dot {
    border-color: var(--border-color);
    opacity: 0.6;
}

.timeline-line {
    position: absolute;
    left: 15px;
    top: 32px;
    width: 2px;
    height: calc(100% - 8px);
    background: var(--border-color);
}

.timeline-event.past .timeline-line {
    background: var(--accent-blue);
}

.timeline-content {
    margin-left: 16px;
    padding-top: 4px;
}

.timeline-date {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.timeline-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ===== RELATED THREATS ===== */
.related-threats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.related-threat-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.related-threat-item:hover {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
}

.related-threat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.related-threat-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-threat-actor {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ===== MOBILE RESPONSIVE FOR NEW SECTIONS ===== */
@media (max-width: 768px) {
    .trending-section {
        padding: 12px;
    }
    
    .trending-list {
        flex-direction: column;
    }
    
    .trending-item {
        max-width: 100%;
    }
    
    .timeline-container {
        padding-left: 8px;
    }
    
    .related-threats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== HEADER STATS (COMPACT) ===== */
.header-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.header-stat {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-stat strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-stat.critical strong {
    color: var(--severity-critical);
}

.header-stat.high strong {
    color: var(--severity-high);
}

/* Remove old stats grid since we moved to header */
.stats-grid {
    display: none;
}

@media (max-width: 768px) {
    .header-stats {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .header-stat {
        font-size: 12px;
    }
    
    .header-stat strong {
        font-size: 14px;
    }
}

/* ===== CHANGELOG PAGE ===== */

/* ===== ABOUT PAGE (abt-*) ===== */

/* ===== API DOCUMENTATION PAGE ===== */
.api-docs-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
/* SecOS window: fill the pane instead of an 800px centered docs column. */
html[data-secos] .tl-win-body .api-docs-container {
    max-width: 100%;
    margin: 0;
    padding: 20px 24px;
}

.api-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 16px;
}

.api-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.api-code {
    display: block;
    background: var(--bg-primary);
    padding: 12px 16px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent-blue);
    word-break: break-all;
}

.api-endpoint {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 12px;
}

.api-method {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}

.api-method.get {
    background: var(--accent-green);
    color: white;
}

.api-method.post {
    background: var(--accent-blue);
    color: white;
}

.api-endpoint code {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
}

.api-endpoint p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
}

.api-params {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.api-params strong {
    font-size: 12px;
    color: var(--text-muted);
}

.api-params ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.api-params li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
}

.api-params code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 12px;
}

.api-example {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.api-notice {
    border-left: 4px solid var(--severity-high);
    background: rgba(253, 186, 116, 0.1);
}

.api-notice h3 {
    color: var(--severity-high);
}

/* ===== IOC CORRELATION PAGE ===== */
.correlation-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.correlation-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 20px;
}

.correlation-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.section-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.correlation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.correlation-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 16px;
}

.correlation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.actor-name, .ioc-value {
    font-weight: 600;
    color: var(--text-primary);
}

.threat-count {
    font-size: 12px;
    background: var(--accent-blue);
    color: white;
    padding: 2px 8px;
    border-radius: 0;
    margin-left: auto;
}

.correlated-threats {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.correlated-threats li {
    padding: 4px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.correlated-threats li:last-child {
    border-bottom: none;
}

.correlated-threats a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.correlated-threats a:hover {
    text-decoration: underline;
}

.technique-card .correlation-header {
    flex-direction: column;
    align-items: flex-start;
}

.technique-id {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(125, 211, 252, 0.1);
    padding: 2px 8px;
    border-radius: 0;
}

.technique-name {
    font-size: 13px;
    color: var(--text-secondary);
}

.technique-threats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.threat-chip {
    font-size: 11px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.threat-chip:hover {
    background: var(--accent-blue);
    color: white;
}

.more-threats {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tag-item {
    color: var(--accent-blue);
    cursor: pointer;
    transition: color 0.2s;
}

.tag-item:hover {
    color: var(--text-primary);
}

.no-data {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

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

/* ===== ROADMAP PANEL ===== */

.roadmap-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 16px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.roadmap-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.roadmap-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.roadmap-header p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.roadmap-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.roadmap-idea {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 0;
    border: 1px solid var(--border-color);
}

.roadmap-priority {
    font-size: 12px;
    flex-shrink: 0;
}

.roadmap-content {
    flex: 1;
    min-width: 0;
}

.roadmap-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.roadmap-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.roadmap-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.roadmap-footer p {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

.roadmap-empty {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
    padding: 20px;
}

@media (max-width: 900px) {
    
    
    .roadmap-panel {
        position: static;
        order: -1;
    }
}

/* ===== ANALYTICS & POPULARITY ===== */
.popularity-badge {
    display: inline-block;
    font-size: 11px;
    background: linear-gradient(135deg, rgba(253, 186, 116, 0.3), rgba(253, 164, 175, 0.3));
    color: white;
    padding: 2px 8px;
    border-radius: 0;
    margin-left: 8px;
    font-weight: 600;
}

.copy-btn.copied,
.detection-copy-btn.copied {
    background: var(--accent-green) !important;
    color: white !important;
}

.stats-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.stat-item {
    text-align: center;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 0;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-blue);
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.engagement-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.engagement-indicator span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== KEYBOARD SHORTCUTS MODAL ===== */
.shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcuts-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.shortcuts-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 24px;
    max-width: 400px;
    width: 90%;
}

.shortcuts-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    text-align: center;
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 0;
}

.shortcut kbd {
    display: inline-block;
    min-width: 32px;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    text-align: center;
}

.shortcut span {
    font-size: 13px;
    color: var(--text-secondary);
}

.shortcuts-footer {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin: 16px 0 0 0;
}

/* ===== DAILY DEBRIEFS (db-*) ===== */
.debrief-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.debrief-loading,
.debrief-empty,
.debrief-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.debrief-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.debrief-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.debrief-date {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.debrief-stats {
    display: flex;
    gap: 16px;
}

.debrief-stat {
    background: var(--bg-tertiary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
}

.debrief-themes {
    margin-bottom: 24px;
}

.debrief-themes h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.debrief-themes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.debrief-themes li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    color: var(--text-secondary);
}

.debrief-themes li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

.debrief-threats {
    margin-bottom: 20px;
}

.debrief-severity {
    margin-bottom: 20px;
}

.debrief-severity h4 {
    margin-bottom: 12px;
    font-size: 1rem;
}

.debrief-severity.critical h4 { color: var(--severity-critical); }
.debrief-severity.high h4 { color: var(--severity-high); }
.debrief-severity.medium h4 { color: var(--severity-medium); }
.debrief-severity.low h4 { color: var(--severity-low); }

.debrief-severity ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.debrief-severity li {
    padding: 6px 0;
    font-size: 14px;
}

.debrief-severity a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.debrief-severity a:hover {
    text-decoration: underline;
}

.debrief-footer {
    text-align: right;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-style: italic;
}

/* ===== RESEARCH LAB ===== */

.nav-badge.new {
    background: var(--accent-green);
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 0;
    margin-left: auto;
    font-weight: 600;
}

.adhoc-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.adhoc-intro {
    text-align: center;
    margin-bottom: 32px;
}

.adhoc-intro h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.adhoc-intro p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.adhoc-input-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 24px;
}

.adhoc-input-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.adhoc-textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}

.adhoc-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.adhoc-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.btn-large {
    padding: 14px 28px;
    font-size: 1rem;
}

.adhoc-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Login */
.adhoc-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 24px;
}

.login-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 48px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.login-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.login-card h2 {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.login-card p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 16px;
    text-align: center;
}

.login-error {
    color: var(--severity-critical);
    margin-top: 12px;
    font-size: 0.9rem;
}

/* Progress */
.adhoc-progress {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 24px;
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.progress-icon {
    font-size: 1.5rem;
    animation: pulse 1s infinite;
}

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

.progress-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.progress-steps {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
}

.progress-step {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: 0;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.progress-step.active {
    background: var(--accent-blue);
    color: white;
}

.progress-step.complete {
    opacity: 0.7;
}

.progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    width: 0%;
    transition: width 0.5s ease;
}

/* Results */
.adhoc-results {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 24px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.results-header h3 {
    font-size: 1.2rem;
}

.results-actions {
    display: flex;
    gap: 8px;
}

.threat-preview-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 20px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.preview-id {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.confidence-badge {
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 0;
    font-size: 0.8rem;
}

.preview-title {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.preview-summary {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.preview-section {
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.preview-section h4 {
    margin-bottom: 12px;
    font-size: 1rem;
}

.mitre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mitre-tag {
    background: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 0.85rem;
}

.ioc-list code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.85rem;
}

.ioc-group {
    margin-bottom: 8px;
}

.detection-list {
    display: grid;
    gap: 12px;
}

.detection-item {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 0;
}

.detection-item strong {
    display: block;
    margin-bottom: 6px;
}

.det-severity {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 0;
    text-transform: uppercase;
}

.det-severity.high {
    background: rgba(253, 186, 116, 0.15);
    color: var(--severity-high);
}

.det-severity.critical {
    background: rgba(253, 164, 175, 0.15);
    color: var(--severity-critical);
}

.det-severity.medium {
    background: rgba(196, 181, 253, 0.15);
    color: var(--severity-medium);
}

.detection-item details {
    margin-top: 8px;
}

.detection-item summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--accent-blue);
}

.detection-item pre {
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 0;
    overflow-x: auto;
    font-size: 0.8rem;
}

.json-preview {
    max-height: 400px;
    overflow: auto;
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 0;
    font-size: 0.8rem;
}

/* Mobile */
@media (max-width: 600px) {
    .adhoc-container {
        padding: 16px;
    }
    
    .adhoc-input-section,
    .login-card,
    .adhoc-progress,
    .adhoc-results {
        padding: 16px;
    }
    
    .adhoc-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .results-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .results-actions {
        justify-content: stretch;
    }
    
    .results-actions button {
        flex: 1;
    }
}
/* Build trigger 20260203205102 */

/* Enrichment styles */
.enrichment-list {
    display: grid;
    gap: 12px;
}

.enrichment-item {
    background: var(--bg-tertiary);
    border-radius: 0;
    padding: 12px;
}

.enrichment-item strong {
    display: block;
    margin-bottom: 8px;
}

.enrichment-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9rem;
}

.enrichment-details span {
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 0;
}

.threatfox-match {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
}

.threatfox-match:last-child {
    border-bottom: none;
}

/* ===== RESEARCH LAB (REDESIGNED) ===== */
.adhoc-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .adhoc-layout {
        grid-template-columns: 1fr;
    }
}

.adhoc-panel {
    background: var(--bg-secondary);
    border-radius: 0;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.panel-content {
    padding: 20px;
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.adhoc-textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 180px;
}

.adhoc-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-full {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-icon {
    font-size: 1.2rem;
}

.research-hint {
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Progress */
.research-progress {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 0;
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 500;
}

.progress-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.progress-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.progress-steps .step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.progress-steps .step.active {
    color: var(--accent-blue);
}

.progress-steps .step.done .step-icon {
    color: var(--accent-green);
}

.progress-bar {
    height: 4px;
    background: var(--bg-primary);
    border-radius: 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    width: 0%;
    transition: width 0.3s ease;
}

/* Panel Tabs */
.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.panel-tab {
    flex: 1;
    padding: 14px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.panel-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

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

.tab-count {
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.8rem;
    margin-left: 6px;
}

.panel-tab-content {
    padding: 20px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

/* Result Card */
.result-card {
    background: var(--bg-tertiary);
    border-radius: 0;
    overflow: hidden;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
    flex-wrap: wrap;
}

.result-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.result-title-section h3 {
    margin: 0;
    font-size: 1.1rem;
}

.result-actions {
    display: flex;
    gap: 8px;
}

.btn-icon-only {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    font-size: 1.1rem;
}

.btn-icon-only:hover {
    background: var(--bg-primary);
}

.result-body {
    padding: 20px;
}

.result-section {
    margin-bottom: 24px;
}

.result-section:last-child {
    margin-bottom: 0;
}

.result-section h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.mitre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mitre-tag {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 0;
    font-size: 0.85rem;
}

.mitre-tag .tactic {
    color: var(--accent-blue);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.iocs-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ioc-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ioc-label {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

.ioc-value {
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.detections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detection-item {
    background: var(--bg-secondary);
    border-radius: 0;
    overflow: hidden;
}

.detection-item summary {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detection-item summary:hover {
    background: var(--bg-primary);
}

.det-name {
    font-weight: 500;
}

.det-type {
    font-size: 0.8rem;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 0;
    color: var(--text-secondary);
}

.det-query {
    margin: 0;
    padding: 16px;
    background: var(--bg-primary);
    overflow-x: auto;
    font-size: 0.85rem;
}

.json-section summary {
    cursor: pointer;
    padding: 8px 0;
}

.json-preview {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: 0;
    overflow-x: auto;
    font-size: 0.8rem;
    max-height: 400px;
}

.no-data {
    color: var(--text-secondary);
    font-style: italic;
}

/* Lab Threats */
.lab-threats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lab-threat-card {
    background: var(--bg-tertiary);
    border-radius: 0;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.lab-threat-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.threat-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.threat-category {
    background: var(--accent-purple);
    color: white;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 500;
}

.threat-title {
    margin: 0 0 8px;
    font-size: 1rem;
}

.threat-summary {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.threat-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Research count badge */
.research-count {
    background: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Attribution info */
.attribution-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.actor-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent-blue);
}

.nation-state, .motivation {
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: 0;
    font-size: 0.85rem;
}

/* ===== ENHANCED RESEARCH RESULTS ===== */
.result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.meta-item {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.meta-item strong {
    color: var(--text-primary);
}

.description-text {
    line-height: 1.7;
    white-space: pre-wrap;
}

.analysis-summary {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0;
}

/* Attribution Card */
.attribution-card {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 0;
}

.actor-main {
    margin-bottom: 12px;
}

.actor-aliases {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.actor-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-badge {
    padding: 4px 10px;
    border-radius: 0;
    font-size: 0.85rem;
    background: var(--bg-secondary);
}

.detail-badge.nation { background: rgba(125, 211, 252, 0.12); }
.detail-badge.motivation { background: rgba(196, 181, 253, 0.12); }

/* Targets */
.targets-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.target-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.target-label {
    min-width: 80px;
    font-weight: 500;
    color: var(--text-secondary);
}

.target-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.target-tag {
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 0;
    font-size: 0.85rem;
}

/* MITRE Grid */
.mitre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

.mitre-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 0;
    border-left: 3px solid var(--accent-blue);
}

.mitre-tactic {
    font-size: 0.75rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    font-weight: 500;
}

.mitre-technique {
    font-size: 0.9rem;
    margin: 4px 0;
}

.mitre-id {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* IOCs Container */
.iocs-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ioc-category h5 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ioc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ioc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: 0;
}

.ioc-type {
    font-size: 0.75rem;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: 0;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ioc-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    word-break: break-all;
}

.ioc-hash {
    font-size: 0.75rem;
}

.ioc-context {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.behavioral-list {
    margin: 0;
    padding-left: 20px;
}

.behavioral-list li {
    margin-bottom: 6px;
}

/* Detections Section - THE STAR */
.detections-section {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 0;
    margin: 16px 0;
}

.detection-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.det-stat {
    padding: 6px 12px;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.det-stat.splunk { background: rgba(168, 230, 207, 0.12); color: var(--det-spl); }
.det-stat.kql { background: rgba(125, 211, 252, 0.12); color: var(--det-sigma); }

.detection-card {
    background: var(--bg-secondary);
    border-radius: 0;
    margin-bottom: 12px;
    overflow: hidden;
    border-left: 4px solid var(--accent-green);
}

.detection-card.kql {
    border-left-color: var(--accent-blue);
}

.detection-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-primary);
}

.det-number {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.det-name {
    flex: 1;
    font-weight: 500;
}

.det-type-badge {
    padding: 3px 8px;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.det-type-badge.spl { background: rgba(168, 230, 207, 0.15); color: var(--det-spl); }
.det-type-badge.kql { background: rgba(196, 181, 253, 0.15); color: var(--det-sigma); }

.det-description {
    padding: 8px 16px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.det-query-container {
    position: relative;
    margin: 0 16px 12px;
}

.copy-query-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    z-index: 1;
}

.copy-query-btn:hover {
    background: var(--accent-blue);
}

.det-query {
    margin: 0;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 0;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

.det-query code {
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.det-meta {
    display: flex;
    gap: 12px;
    padding: 8px 16px;
}

.det-severity {
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.8rem;
    text-transform: capitalize;
}

.det-severity.critical { background: rgba(253, 164, 175, 0.15); color: var(--severity-critical); }
.det-severity.high { background: rgba(253, 186, 116, 0.15); color: var(--severity-high); }
.det-severity.medium { background: rgba(196, 181, 253, 0.15); color: var(--severity-medium); }
.det-severity.low { background: rgba(168, 230, 207, 0.15); color: var(--severity-low); }

.det-confidence {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Remediation */
.remediation-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.remediation-group h5 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.remediation-group ul {
    margin: 0;
    padding-left: 20px;
}

.remediation-group li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* References */
.references-list {
    margin: 0;
    padding-left: 20px;
}

.references-list a {
    color: var(--accent-blue);
    text-decoration: none;
}

.references-list a:hover {
    text-decoration: underline;
}

.references-list li {
    margin-bottom: 6px;
}

/* ===== RESEARCH RESULT COMPACT CARD ===== */
.research-result-card {
    background: var(--bg-secondary);
    border-radius: 0;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 12px;
}

.result-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-id {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.result-card-actions {
    display: flex;
    gap: 8px;
}

.result-card-name {
    margin: 0;
    padding: 16px 20px 8px;
    font-size: 1.3rem;
}

.result-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 20px 16px;
    font-size: 0.9rem;
}

.stat-item {
    color: var(--text-secondary);
}

.stat-item strong {
    color: var(--text-primary);
}

.result-card-summary {
    padding: 0 20px 16px;
    line-height: 1.6;
}

.result-card-summary p {
    margin: 0;
    color: var(--text-secondary);
}

.result-card-attribution {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px 16px;
}

.attr-actor {
    font-weight: 600;
    color: var(--accent-blue);
}

.attr-nation, .attr-motivation {
    padding: 3px 10px;
    background: var(--bg-tertiary);
    border-radius: 0;
    font-size: 0.85rem;
}

.result-card-mitre {
    padding: 0 20px 16px;
    font-size: 0.9rem;
}

.mitre-chip {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    background: var(--bg-tertiary);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.mitre-more {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.result-card-detections-preview {
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.detection-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.det-badge {
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.det-badge.spl { background: rgba(168, 230, 207, 0.15); color: var(--det-spl); }
.det-badge.kql { background: rgba(196, 181, 253, 0.15); color: var(--det-sigma); }

.det-preview-name {
    color: var(--text-primary);
}

.det-more {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.result-card-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

/* Detection item type badge */
.detection-item-type {
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.detection-item-type.spl { background: rgba(168, 230, 207, 0.15); color: var(--det-spl); }
.detection-item-type.kql { background: rgba(196, 181, 253, 0.15); color: var(--det-sigma); }

/* ===== DETECTION LIBRARY ===== */

/* Main Container */
.detection-library-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* Header Stats */
.detection-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.detection-stats .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.detection-stats .stat-badge strong {
    color: var(--text-primary);
    font-weight: 600;
}

.detection-stats .stat-badge.total {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.detection-stats .stat-badge.total strong {
    color: var(--accent-blue);
}

.detection-stats .stat-badge.spl {
    background: rgba(22, 101, 52, 0.2);
    border-color: rgba(74, 222, 128, 0.3);
}

.detection-stats .stat-badge.spl strong {
    color: var(--det-spl);
}

.detection-stats .stat-badge.kql {
    background: rgba(29, 78, 216, 0.2);
    border-color: rgba(147, 197, 253, 0.3);
}

.detection-stats .stat-badge.kql strong {
    color: var(--det-sigma);
}

/* Filters Section */
.detection-filters {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    overflow: hidden;
}

.detection-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.detection-filters-header:hover {
    background: var(--bg-hover);
}

.detection-filters-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detection-filters-header .toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.detection-filters-header.open .toggle-icon {
    transform: rotate(180deg);
}

.detection-filters-body {
    display: none;
    padding: 20px;
}

.detection-filters-body.open {
    display: block;
}

.detection-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.detection-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detection-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detection-filter-select {
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.detection-filter-select:focus {
    border-color: var(--accent-blue);
}

.detection-filter-select:hover {
    border-color: var(--border-light);
}

/* Multi-select dropdown styling */
.detection-filter-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

/* Search within filters */
.detection-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.detection-search-input:focus {
    border-color: var(--accent-blue);
}

.detection-search-wrapper {
    position: relative;
}

.detection-search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Filter Actions */
.detection-filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.filter-results-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.filter-results-count strong {
    color: var(--text-primary);
}

.btn-clear-filters {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-clear-filters:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Active Filter Chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.filter-chip .chip-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.filter-chip .chip-value {
    font-weight: 500;
}

.filter-chip .chip-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip .chip-remove:hover {
    background: var(--severity-critical);
    color: white;
}

/* Detection Grid */
.detection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

/* Detection Card */
.detection-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.detection-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.detection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 18px 12px;
    gap: 12px;
}

.detection-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Type Badge - SPL/KQL */
.detection-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detection-type-badge.spl {
    background: rgba(22, 101, 52, 0.25);
    color: var(--det-spl);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.detection-type-badge.kql {
    background: rgba(88, 28, 135, 0.25);
    color: var(--det-kql);
    border: 1px solid rgba(192, 132, 252, 0.3);
}

/* Severity Badge - Reusing existing severity colors */
.detection-severity-badge {
    padding: 4px 10px;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detection-severity-badge.critical {
    background: rgba(253, 164, 175, 0.15);
    color: var(--severity-critical);
}

.detection-severity-badge.high {
    background: rgba(253, 186, 116, 0.15);
    color: var(--severity-high);
}

.detection-severity-badge.medium {
    background: rgba(196, 181, 253, 0.15);
    color: var(--severity-medium);
}

.detection-severity-badge.low {
    background: rgba(168, 230, 207, 0.15);
    color: var(--severity-low);
}

.detection-card-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.detection-card-title {
    padding: 0 18px 12px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.detection-card-description {
    padding: 0 18px 14px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* MITRE Chips in Card */
.detection-card-mitre {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 18px 14px;
}

.mitre-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(125, 211, 252, 0.1);
    border: 1px solid rgba(125, 211, 252, 0.25);
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-family: var(--font-mono);
}

.mitre-chip .tactic {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.mitre-chip-more {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Expandable Query Section */
.detection-card-query-section {
    border-top: 1px solid var(--border-color);
}

.detection-query-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detection-query-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.detection-query-toggle .toggle-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detection-query-toggle .toggle-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.detection-query-toggle.open .toggle-arrow {
    transform: rotate(180deg);
}

/* Detection Query Code Block */
.detection-query {
    display: none;
    position: relative;
    margin: 0;
    padding: 0;
}

.detection-query.open {
    display: block;
}

.detection-query-code {
    margin: 0;
    padding: 16px 18px;
    padding-right: 70px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--accent-green);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

/* SPL vs KQL vs Sigma different background tints */
.detection-query.spl .detection-query-code,
.detection-query.spl {
    background: linear-gradient(135deg, rgba(168, 230, 207, 0.05) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--det-spl);
}

.detection-query.kql .detection-query-code,
.detection-query.kql {
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.05) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--det-kql);
    color: var(--det-kql);
}

.detection-query.sigma .detection-query-code,
.detection-query.sigma {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.05) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--det-sigma);
    color: var(--det-sigma);
}

/* Copy Button in Query Block */
.detection-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

.detection-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.detection-copy-btn.copied {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

/* Card Footer */
.detection-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.detection-card-source {
    display: flex;
    align-items: center;
    gap: 4px;
}

.detection-card-date {
    font-family: var(--font-mono);
}

/* Loading State */
.detection-library-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.detection-library-loading .loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

/* Empty State */
.detection-library-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.detection-library-empty .empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.detection-library-empty h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
}

.detection-library-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Pagination */
.detection-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.detection-pagination .page-btn {
    padding: 10px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detection-pagination .page-btn:hover:not(:disabled) {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.detection-pagination .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.detection-pagination .page-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* View Toggle (Grid/List) */
.detection-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px;
}

.detection-view-btn {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.detection-view-btn:hover {
    color: var(--text-primary);
}

.detection-view-btn.active {
    background: var(--accent-blue);
    color: white;
}

/* List View Alternative */
.detection-grid.list-view {
    grid-template-columns: 1fr;
}

.detection-grid.list-view .detection-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 16px 20px;
    gap: 20px;
}

.detection-grid.list-view .detection-card-header,
.detection-grid.list-view .detection-card-title,
.detection-grid.list-view .detection-card-description,
.detection-grid.list-view .detection-card-mitre,
.detection-grid.list-view .detection-card-query-section,
.detection-grid.list-view .detection-card-footer {
    padding: 0;
    border: none;
    background: none;
}

/* ===== DETECTION LIBRARY RESPONSIVE ===== */

@media (max-width: 1200px) {
    .detection-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
    
    .detection-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .detection-library-container {
        padding: 16px;
    }
    
    .detection-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .detection-grid {
        grid-template-columns: 1fr;
    }
    
    .detection-stats {
        gap: 8px;
    }
    
    .detection-stats .stat-badge {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    .detection-filter-grid {
        grid-template-columns: 1fr;
    }
    
    .detection-filters-header {
        padding: 12px 16px;
    }
    
    .detection-filters-body {
        padding: 16px;
    }
    
    .detection-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px 10px;
    }
    
    .detection-card-title {
        padding: 0 16px 10px;
        font-size: 0.95rem;
    }
    
    .detection-card-description {
        padding: 0 16px 12px;
        font-size: 0.8rem;
    }
    
    .detection-card-mitre {
        padding: 0 16px 12px;
    }
    
    .detection-query-toggle {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    .detection-query-code {
        padding: 14px 16px;
        padding-right: 60px;
        font-size: 0.75rem;
    }
    
    .detection-card-footer {
        padding: 8px 16px;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    
    .filter-chip {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .detection-filter-actions {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .filter-results-count {
        text-align: center;
    }
    
    .btn-clear-filters {
        width: 100%;
    }
    
    .detection-pagination {
        flex-direction: column;
        gap: 12px;
    }
    
    .detection-pagination .page-btn {
        width: 100%;
    }
}

/* Mobile filter collapse */
@media (max-width: 768px) {
    .detection-filters-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ===== DETECTION LIBRARY (dl-*) ===== */
.dl-container { padding: 0; }
.dl-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 80px 20px; }
.dl-loading-spinner { width: 20px; height: 20px; border: 2px solid #333; border-top-color: #a8e6cf; border-radius: 50%; animation: dl-spin 0.8s linear infinite; }
@keyframes dl-spin { to { transform: rotate(360deg); } }
.dl-loading-text { font-family: var(--font-mono); font-size: 13px; color: #525252; }

/* Header */
.dl-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 12px 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 0; }
.dl-title { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: #e5e5e5; letter-spacing: 0.5px; }
.dl-header-stats { display: flex; gap: 16px; }
.dl-stat { font-family: var(--font-mono); font-size: 12px; color: #525252; }
.dl-stat-total { color: #737373; }
.dl-stat-spl { color: #a8e6cf; }
.dl-stat-kql { color: #c4b5fd; }
.dl-stat-sigma { color: #7dd3fc; }

/* Language Tabs */
.dl-lang-tabs { display: flex; gap: 0; border-bottom: 1px solid #1a1a1a; }
.dl-lang-tab { padding: 10px 20px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #525252; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; text-transform: lowercase; }
.dl-lang-tab:hover { color: #a3a3a3; }
.dl-lang-active { color: #e5e5e5; }
.dl-lang-spl.dl-lang-active { color: #a8e6cf; border-bottom-color: #a8e6cf; }
.dl-lang-kql.dl-lang-active { color: #c4b5fd; border-bottom-color: #c4b5fd; }
.dl-lang-sigma.dl-lang-active { color: #7dd3fc; border-bottom-color: #7dd3fc; }

/* Filter Bar */
.dl-filter-bar { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #1a1a1a; flex-wrap: wrap; }
.dl-search-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; background: #111111; border: 1px solid #222; padding: 0 10px; }
.dl-search-prompt { font-family: var(--font-mono); font-size: 13px; color: #a8e6cf; font-weight: 700; }
.dl-search-input { flex: 1; background: transparent; border: none; color: #e5e5e5; font-family: var(--font-mono); font-size: 12px; padding: 8px 0; outline: none; }
.dl-search-input::placeholder { color: #404040; }
.dl-filter-select { background: #111111; border: 1px solid #222; color: #a3a3a3; font-family: var(--font-mono); font-size: 11px; padding: 7px 8px; cursor: pointer; min-width: 80px; }
.dl-filter-input { background: #111111; border: 1px solid #222; color: #a3a3a3; font-family: var(--font-mono); font-size: 11px; padding: 7px 8px; width: 90px; outline: none; }
.dl-filter-input::placeholder { color: #404040; }
.dl-sort-btn { background: #111111; border: 1px solid #222; color: #737373; font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; cursor: pointer; }
.dl-sort-btn:hover { color: #e5e5e5; border-color: #333; }
.dl-correlate-btn { background: transparent; border: 1px solid #222; color: #525252; font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.dl-correlate-btn:hover { color: #c4b5fd; border-color: #c4b5fd; }
.dl-correlate-active { color: #c4b5fd; border-color: #c4b5fd; background: rgba(196, 181, 253, 0.08); }

/* Active Filter Pills */
.dl-active-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.dl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: rgba(168, 230, 207, 0.08); border: 1px solid rgba(168, 230, 207, 0.2); color: #a8e6cf; font-family: var(--font-mono); font-size: 11px; }
.dl-pill-x { cursor: pointer; color: #525252; font-weight: 700; }
.dl-pill-x:hover { color: #fda4af; }
.dl-pill-clear { background: transparent; border-color: #333; color: #525252; cursor: pointer; }
.dl-pill-clear:hover { color: #fda4af; border-color: #fda4af; }

/* Results Info */
.dl-results-info { padding: 8px 0; }
.dl-results-count { font-family: var(--font-mono); font-size: 11px; color: #404040; }

/* Correlation Panel */
.dl-correlation-panel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 8px; }
.dl-corr-section { }
.dl-corr-header { display: block; font-family: var(--font-mono); font-size: 11px; color: #525252; margin-bottom: 8px; }
.dl-corr-list { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-corr-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.dl-corr-technique { color: #c4b5fd; background: rgba(196, 181, 253, 0.06); border: 1px solid rgba(196, 181, 253, 0.15); }
.dl-corr-technique:hover { background: rgba(196, 181, 253, 0.15); border-color: #c4b5fd; }
.dl-corr-source { color: #a8e6cf; background: rgba(168, 230, 207, 0.06); border: 1px solid rgba(168, 230, 207, 0.15); }
.dl-corr-source:hover { background: rgba(168, 230, 207, 0.15); border-color: #a8e6cf; }
.dl-corr-actor { color: #fda4af; background: rgba(253, 164, 175, 0.06); border: 1px solid rgba(253, 164, 175, 0.15); }
.dl-corr-actor:hover { background: rgba(253, 164, 175, 0.15); border-color: #fda4af; }
.dl-corr-count { color: #404040; font-size: 10px; }
.dl-corr-empty { color: #333; font-family: var(--font-mono); font-size: 11px; }
.dl-corr-selected { background: rgba(196, 181, 253, 0.15) !important; border-color: #c4b5fd !important; color: #e8e8e8 !important; }

/* ===== CORRELATION PILLS + AND/OR ===== */
.dl-corr-pills { display: flex; align-items: center; gap: 6px; padding: 8px 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; }
.dl-corr-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(255,255,255,0.05); border-left: 2px solid #737373; color: #a0a0a0; cursor: default; }
.dl-corr-pill-x { color: #525252; cursor: pointer; margin-left: 2px; }
.dl-corr-pill-x:hover { color: #fda4af; }
.dl-corr-op { color: #525252; font-size: 10px; padding: 0 2px; }
.dl-corr-op-toggle { background: transparent; border: 1px solid #333333; color: #a0a0a0; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; cursor: pointer; }
.dl-corr-op-toggle:hover { border-color: #c4b5fd; color: #c4b5fd; }
.dl-corr-clear { background: transparent; border: 1px solid #333333; color: #525252; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; cursor: pointer; }
.dl-corr-clear:hover { border-color: #fda4af; color: #fda4af; }

/* Detection Rows */
.dl-rows { }
.dl-row { border-bottom: 1px solid #1a1a1a; }
.dl-row:nth-child(odd) { background: #111111; }
.dl-row:nth-child(even) { background: #0e0e0e; }
.dl-row-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.1s; }
.dl-row-header:hover { background: rgba(255, 255, 255, 0.02); }
.dl-row-num { font-family: var(--font-mono); font-size: 11px; color: #333; min-width: 32px; }
.dl-row-name { flex: 1; font-family: var(--font-mono); font-size: 12px; color: #d4d4d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-row-sev { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; min-width: 60px; text-align: center; }
.dl-sev-critical { color: #fda4af; background: rgba(253, 164, 175, 0.1); }
.dl-sev-high { color: #fdba74; background: rgba(253, 186, 116, 0.1); }
.dl-sev-medium { color: #fde68a; background: rgba(253, 230, 138, 0.1); }
.dl-sev-low { color: #a8e6cf; background: rgba(168, 230, 207, 0.1); }
.dl-row-mitre-chips { display: flex; gap: 4px; flex-shrink: 0; }
.dl-mitre-chip { font-family: var(--font-mono); font-size: 10px; color: #c4b5fd; padding: 1px 6px; background: rgba(196, 181, 253, 0.08); border: 1px solid rgba(196, 181, 253, 0.15); }
.dl-mitre-more { font-family: var(--font-mono); font-size: 10px; color: #404040; padding: 1px 4px; }
.dl-row-langs { display: flex; gap: 4px; flex-shrink: 0; }
.dl-lang-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; }
.dl-lang-badge-spl { color: #a8e6cf; background: rgba(168, 230, 207, 0.1); }
.dl-lang-badge-kql { color: #c4b5fd; background: rgba(196, 181, 253, 0.1); }
.dl-lang-badge-sigma { color: #7dd3fc; background: rgba(125, 211, 252, 0.1); }

/* Expanded Row */
.dl-row-open { background: #0a0a0a !important; }
.dl-row-open .dl-row-header { border-bottom: 1px solid #1a1a1a; }
.dl-row-open .dl-row-name { color: #e5e5e5; }
.dl-row-expanded { padding: 0 16px 16px; }
.dl-row-meta { padding: 10px 0; }
.dl-row-threat-link { font-family: var(--font-mono); font-size: 11px; color: #525252; text-decoration: none; transition: color 0.15s; }
.dl-row-threat-link:hover { color: #7dd3fc; }

/* Code Tabs in expanded row */
.dl-code-tabs { display: flex; gap: 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 0; }
.dl-code-tab { padding: 6px 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #404040; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s; }
.dl-code-tab:hover { color: #737373; }
.dl-code-tab-active { color: #a3a3a3; }
.dl-code-tab-spl.dl-code-tab-active { color: #a8e6cf; border-bottom-color: #a8e6cf; }
.dl-code-tab-kql.dl-code-tab-active { color: #c4b5fd; border-bottom-color: #c4b5fd; }
.dl-code-tab-sigma.dl-code-tab-active { color: #7dd3fc; border-bottom-color: #7dd3fc; }
.dl-copy-btn { margin-left: auto; padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; color: #404040; background: transparent; border: 1px solid #222; cursor: pointer; transition: all 0.15s; }
.dl-copy-btn:hover { color: #a3a3a3; border-color: #333; }
.dl-copied { color: #a8e6cf !important; border-color: #a8e6cf !important; }

/* Code Block */
.dl-code-block { margin: 0; padding: 14px 16px; background: #0a0a0a; border-left: 3px solid #222; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: #d4d4d4; white-space: pre-wrap; word-break: break-word; overflow-x: auto; min-height: 240px; max-height: 500px; overflow-y: auto; }
.dl-code-spl { border-left-color: #a8e6cf; }
.dl-code-kql { border-left-color: #c4b5fd; }
.dl-code-sigma { border-left-color: #7dd3fc; }
.dl-line-num { color: #333; margin-right: 16px; user-select: none; display: inline-block; min-width: 24px; text-align: right; }

/* Row Footer (MITRE + Sources below code) */
.dl-row-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0 0; }
.dl-row-mitre { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-mitre-tag { font-family: var(--font-mono); font-size: 10px; color: #c4b5fd; padding: 2px 8px; background: rgba(196, 181, 253, 0.06); border: 1px solid rgba(196, 181, 253, 0.15); }
.dl-row-sources { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-src-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; }
.dl-src-index { color: #a8e6cf; background: rgba(168, 230, 207, 0.06); border: 1px solid rgba(168, 230, 207, 0.15); }
.dl-src-st { color: #fdba74; background: rgba(253, 186, 116, 0.06); border: 1px solid rgba(253, 186, 116, 0.15); }
.dl-src-table { color: #c4b5fd; background: rgba(196, 181, 253, 0.06); border: 1px solid rgba(196, 181, 253, 0.15); }

/* Correlated Section in expanded row */
.dl-correlated { border-top: 1px solid #1a1a1a; padding-top: 10px; margin-top: 10px; }
.dl-correlated-header { font-family: var(--font-mono); font-size: 11px; color: #404040; display: block; margin-bottom: 6px; }
.dl-correlated-items { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-correlated-link { font-family: var(--font-mono); font-size: 11px; color: #737373; cursor: pointer; padding: 2px 8px; background: rgba(255, 255, 255, 0.02); border: 1px solid #1a1a1a; transition: all 0.15s; }
.dl-correlated-link:hover { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.3); background: rgba(196, 181, 253, 0.06); }

/* Empty State */
.dl-empty { text-align: center; padding: 60px 20px; }
.dl-empty-text { display: block; font-family: var(--font-mono); font-size: 13px; color: #404040; margin-bottom: 8px; }
.dl-empty-hint { display: block; font-family: var(--font-mono); font-size: 11px; color: #333; }

/* Pagination */
.dl-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #1a1a1a; margin-top: 8px; }
.dl-page-btn { padding: 6px 16px; background: #111111; border: 1px solid #222; color: #737373; font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.dl-page-btn:hover:not(:disabled) { color: #e5e5e5; border-color: #333; }
.dl-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dl-page-info { font-family: var(--font-mono); font-size: 11px; color: #404040; }

/* Syntax highlighting (shared — keep existing classes) */
.spl-keyword { color: var(--severity-high); font-weight: 600; }
.spl-pipe { color: var(--accent-green); font-weight: 700; }
.spl-string { color: var(--highlight-text); }
.spl-operator { color: #a8e6cf; }
.kql-keyword { color: var(--det-sigma); font-weight: 600; }
.kql-table { color: var(--det-kql); font-weight: 600; }
.kql-string { color: var(--highlight-text); }
.kql-operator { color: #c4b5fd; }
.sigma-keyword { color: var(--det-sigma); font-weight: 600; }
.sigma-key { color: var(--det-sigma); font-weight: 500; }
.sigma-status { color: var(--accent-green); font-style: italic; }
.sigma-level { color: var(--highlight-text); font-weight: 600; }
.sigma-string { color: var(--det-kql); }
.sigma-tag { color: #fda4af; }

/* Light mode overrides */
[data-theme="light"] .dl-header { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-title { color: #171717; }
[data-theme="light"] .dl-stat { color: #737373; }
[data-theme="light"] .dl-stat-spl { color: #059669; }
[data-theme="light"] .dl-stat-kql { color: #7c3aed; }
[data-theme="light"] .dl-stat-sigma { color: #0284c7; }
[data-theme="light"] .dl-lang-tabs { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-lang-tab { color: #a3a3a3; }
[data-theme="light"] .dl-lang-tab:hover { color: #525252; }
[data-theme="light"] .dl-lang-active { color: #171717; }
[data-theme="light"] .dl-lang-spl.dl-lang-active { color: #059669; border-bottom-color: #059669; }
[data-theme="light"] .dl-lang-kql.dl-lang-active { color: #7c3aed; border-bottom-color: #7c3aed; }
[data-theme="light"] .dl-lang-sigma.dl-lang-active { color: #0284c7; border-bottom-color: #0284c7; }
[data-theme="light"] .dl-filter-bar { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-search-wrap { background: #f5f5f5; border-color: #e5e5e5; }
[data-theme="light"] .dl-search-prompt { color: #059669; }
[data-theme="light"] .dl-search-input { color: #171717; }
[data-theme="light"] .dl-search-input::placeholder { color: #a3a3a3; }
[data-theme="light"] .dl-filter-select { background: #f5f5f5; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .dl-filter-input { background: #f5f5f5; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .dl-filter-input::placeholder { color: #a3a3a3; }
[data-theme="light"] .dl-sort-btn { background: #f5f5f5; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .dl-correlate-btn { border-color: #e5e5e5; color: #a3a3a3; }
[data-theme="light"] .dl-correlate-btn:hover { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .dl-correlate-active { color: #7c3aed; border-color: #7c3aed; background: rgba(124, 58, 237, 0.05); }
[data-theme="light"] .dl-pill { background: rgba(5, 150, 105, 0.06); border-color: rgba(5, 150, 105, 0.2); color: #059669; }
[data-theme="light"] .dl-pill-x { color: #a3a3a3; }
[data-theme="light"] .dl-pill-x:hover { color: #dc2626; }
[data-theme="light"] .dl-pill-clear { border-color: #e5e5e5; color: #a3a3a3; }
[data-theme="light"] .dl-results-count { color: #a3a3a3; }
[data-theme="light"] .dl-correlation-panel { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-corr-header { color: #a3a3a3; }
[data-theme="light"] .dl-corr-technique { color: #7c3aed; background: rgba(124, 58, 237, 0.04); border-color: rgba(124, 58, 237, 0.15); }
[data-theme="light"] .dl-corr-source { color: #059669; background: rgba(5, 150, 105, 0.04); border-color: rgba(5, 150, 105, 0.15); }
[data-theme="light"] .dl-corr-actor { color: #dc2626; background: rgba(220, 38, 38, 0.04); border-color: rgba(220, 38, 38, 0.15); }
[data-theme="light"] .dl-corr-count { color: #a3a3a3; }
[data-theme="light"] .dl-corr-selected { background: rgba(196, 181, 253, 0.2) !important; color: #333 !important; }
[data-theme="light"] .dl-corr-pill { background: rgba(0,0,0,0.05); color: #333; }
[data-theme="light"] .dl-corr-op-toggle { border-color: #ccc; color: #333; }
[data-theme="light"] .dl-corr-clear { border-color: #ccc; color: #888; }
[data-theme="light"] .dl-row { border-bottom-color: #f0f0f0; }
[data-theme="light"] .dl-row:nth-child(odd) { background: #ffffff; }
[data-theme="light"] .dl-row:nth-child(even) { background: #fafafa; }
[data-theme="light"] .dl-row-header:hover { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .dl-row-num { color: #d4d4d4; }
[data-theme="light"] .dl-row-name { color: #262626; }
[data-theme="light"] .dl-sev-critical { color: #dc2626; background: rgba(220, 38, 38, 0.06); }
[data-theme="light"] .dl-sev-high { color: #ea580c; background: rgba(234, 88, 12, 0.06); }
[data-theme="light"] .dl-sev-medium { color: #ca8a04; background: rgba(202, 138, 4, 0.06); }
[data-theme="light"] .dl-sev-low { color: #059669; background: rgba(5, 150, 105, 0.06); }
[data-theme="light"] .dl-mitre-chip { color: #7c3aed; background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.15); }
[data-theme="light"] .dl-mitre-more { color: #a3a3a3; }
[data-theme="light"] .dl-lang-badge-spl { color: #059669; background: rgba(5, 150, 105, 0.06); }
[data-theme="light"] .dl-lang-badge-kql { color: #7c3aed; background: rgba(124, 58, 237, 0.06); }
[data-theme="light"] .dl-lang-badge-sigma { color: #0284c7; background: rgba(2, 132, 199, 0.06); }
[data-theme="light"] .dl-row-open { background: #ffffff !important; }
[data-theme="light"] .dl-row-open .dl-row-header { border-bottom-color: #f0f0f0; }
[data-theme="light"] .dl-row-open .dl-row-name { color: #171717; }
[data-theme="light"] .dl-row-threat-link { color: #737373; }
[data-theme="light"] .dl-row-threat-link:hover { color: #0284c7; }
[data-theme="light"] .dl-code-tabs { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-code-tab { color: #a3a3a3; }
[data-theme="light"] .dl-code-tab:hover { color: #525252; }
[data-theme="light"] .dl-code-tab-spl.dl-code-tab-active { color: #059669; border-bottom-color: #059669; }
[data-theme="light"] .dl-code-tab-kql.dl-code-tab-active { color: #7c3aed; border-bottom-color: #7c3aed; }
[data-theme="light"] .dl-code-tab-sigma.dl-code-tab-active { color: #0284c7; border-bottom-color: #0284c7; }
[data-theme="light"] .dl-copy-btn { color: #a3a3a3; border-color: #e5e5e5; }
[data-theme="light"] .dl-copy-btn:hover { color: #525252; border-color: #d4d4d4; }
[data-theme="light"] .dl-copied { color: #059669 !important; border-color: #059669 !important; }
[data-theme="light"] .dl-code-block { background: #fafafa; color: #262626; border-left-color: #e5e5e5; }
[data-theme="light"] .dl-code-spl { border-left-color: #059669; }
[data-theme="light"] .dl-code-kql { border-left-color: #7c3aed; }
[data-theme="light"] .dl-code-sigma { border-left-color: #0284c7; }
[data-theme="light"] .dl-line-num { color: #d4d4d4; }
[data-theme="light"] .dl-mitre-tag { color: #7c3aed; background: rgba(124, 58, 237, 0.04); border-color: rgba(124, 58, 237, 0.12); }
[data-theme="light"] .dl-src-index { color: #059669; background: rgba(5, 150, 105, 0.04); border-color: rgba(5, 150, 105, 0.12); }
[data-theme="light"] .dl-src-st { color: #ea580c; background: rgba(234, 88, 12, 0.04); border-color: rgba(234, 88, 12, 0.12); }
[data-theme="light"] .dl-src-table { color: #7c3aed; background: rgba(124, 58, 237, 0.04); border-color: rgba(124, 58, 237, 0.12); }
[data-theme="light"] .dl-correlated { border-top-color: #f0f0f0; }
[data-theme="light"] .dl-correlated-header { color: #a3a3a3; }
[data-theme="light"] .dl-correlated-link { color: #525252; background: rgba(0, 0, 0, 0.02); border-color: #f0f0f0; }
[data-theme="light"] .dl-correlated-link:hover { color: #7c3aed; border-color: rgba(124, 58, 237, 0.3); }
[data-theme="light"] .dl-empty-text { color: #a3a3a3; }
[data-theme="light"] .dl-empty-hint { color: #d4d4d4; }
[data-theme="light"] .dl-pagination { border-top-color: #e5e5e5; }
[data-theme="light"] .dl-page-btn { background: #f5f5f5; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .dl-page-btn:hover:not(:disabled) { color: #171717; border-color: #d4d4d4; }
[data-theme="light"] .dl-page-info { color: #a3a3a3; }

/* Responsive */
@media (max-width: 768px) {
    .dl-filter-bar { flex-direction: column; align-items: stretch; }
    .dl-search-wrap { min-width: 100%; }
    .dl-header { flex-direction: column; gap: 8px; }
    .dl-header-stats { flex-wrap: wrap; }
    .dl-correlation-panel { grid-template-columns: 1fr; }
    .dl-row-header { flex-wrap: wrap; gap: 6px; }
    .dl-row-name { min-width: 100%; order: -1; white-space: normal; word-break: break-word; }
    .dl-code-tabs { flex-wrap: wrap; }
    .dl-row-mitre-chips { display: none; }
    .dl-row-langs { display: none; }
    .dl-filter-pill { max-width: 140px; }
    /* iOS auto-zoom prevention: inputs/selects must be >= 16px */
    .dl-search-input { font-size: 16px; }
    .dl-filter-select { font-size: 16px; }
    .dl-filter-input { font-size: 16px; }
}

/* ===== DETECTION LIBRARY FILTER SIDEBAR (dl-filter-*) ===== */

/* Layout */
.dl-panels { display: flex; gap: 0; min-height: 400px; }
.dl-filter-sidebar { width: 240px; flex-shrink: 0; border-right: 1px solid #1a1a1a; padding: 12px; overflow-y: auto; max-height: calc(100vh - 220px); background: #0a0a0a; }
.dl-content { flex: 1; min-width: 0; overflow: hidden; }

/* Filter Groups */
.dl-filter-group { margin-bottom: 8px; }
.dl-filter-group-header { font-family: var(--font-mono); font-size: 11px; color: #525252; padding: 6px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.dl-filter-group-header:hover { color: #737373; }
.dl-filter-chevron { font-size: 10px; transition: transform 0.15s; color: #404040; }
.dl-filter-group.collapsed .dl-filter-group-body { display: none; }
.dl-filter-group.collapsed .dl-filter-chevron { transform: rotate(-90deg); }
.dl-filter-group-body { padding: 2px 0 4px 4px; }
.dl-filter-item { display: flex; align-items: center; gap: 8px; padding: 3px 4px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: #737373; transition: background 0.1s; }
.dl-filter-item:hover { background: rgba(255, 255, 255, 0.02); }
.dl-filter-item.active { color: #e5e5e5; }
.dl-filter-check { width: 12px; height: 12px; border: 1px solid #333; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.dl-filter-item.active .dl-filter-check { border-color: #a8e6cf; color: #a8e6cf; }
.dl-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dl-filter-count { color: #333; margin-left: auto; font-size: 10px; flex-shrink: 0; }
.dl-filter-item.active .dl-filter-count { color: #525252; }

/* Filter search inputs */
.dl-filter-search { width: 100%; background: #111111; border: 1px solid #222; color: #a3a3a3; font-family: var(--font-mono); font-size: 10px; padding: 5px 8px; outline: none; margin-bottom: 4px; }
.dl-filter-search::placeholder { color: #333; }
.dl-filter-search:focus { border-color: #333; }

/* Active filter pills in sidebar */
.dl-filter-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #1a1a1a; }
.dl-filter-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(168, 230, 207, 0.08); border: 1px solid rgba(168, 230, 207, 0.15); color: #a8e6cf; font-family: var(--font-mono); font-size: 10px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-filter-pill-x { cursor: pointer; color: #525252; font-weight: 700; font-size: 11px; }
.dl-filter-pill-x:hover { color: #fda4af; }
.dl-filter-clear { font-family: var(--font-mono); font-size: 10px; color: #525252; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }
.dl-filter-clear:hover { color: #fda4af; }

/* Sidebar search bar */
.dl-sidebar-search { width: 100%; background: #111111; border: 1px solid #222; color: #e5e5e5; font-family: var(--font-mono); font-size: 11px; padding: 7px 8px; outline: none; margin-bottom: 10px; }
.dl-sidebar-search::placeholder { color: #404040; }
.dl-sidebar-search:focus { border-color: #333; }

/* Filter toggle for mobile */
.dl-filter-toggle { display: none; font-family: var(--font-mono); font-size: 11px; color: #737373; background: #111111; border: 1px solid #222; padding: 6px 12px; cursor: pointer; margin-bottom: 8px; }
.dl-filter-toggle:hover { color: #e5e5e5; border-color: #333; }
.dl-filter-toggle .dl-filter-toggle-count { color: #a8e6cf; }

/* Show all link */
.dl-filter-show-all { font-family: var(--font-mono); font-size: 10px; color: #c4b5fd; cursor: pointer; padding: 4px; }
.dl-filter-show-all:hover { color: #e5e5e5; }

/* Sort bar in content area */
.dl-sort-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #1a1a1a; }
.dl-sort-item { font-family: var(--font-mono); font-size: 11px; color: #525252; cursor: pointer; padding: 3px 8px; }
.dl-sort-item:hover { color: #a3a3a3; }
.dl-sort-item.active { color: #e5e5e5; }

/* Filter Sidebar Light Mode */
[data-theme="light"] .dl-filter-sidebar { background: #fafafa; border-right-color: #e5e5e5; }
[data-theme="light"] .dl-filter-group-header { color: #a3a3a3; }
[data-theme="light"] .dl-filter-group-header:hover { color: #525252; }
[data-theme="light"] .dl-filter-chevron { color: #a3a3a3; }
[data-theme="light"] .dl-filter-item { color: #737373; }
[data-theme="light"] .dl-filter-item:hover { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .dl-filter-item.active { color: #262626; }
[data-theme="light"] .dl-filter-check { border-color: #d4d4d4; }
[data-theme="light"] .dl-filter-item.active .dl-filter-check { border-color: #059669; color: #059669; }
[data-theme="light"] .dl-filter-count { color: #d4d4d4; }
[data-theme="light"] .dl-filter-item.active .dl-filter-count { color: #737373; }
[data-theme="light"] .dl-filter-search { background: #f5f5f5; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .dl-filter-search::placeholder { color: #a3a3a3; }
[data-theme="light"] .dl-filter-pills { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-filter-pill { background: rgba(5, 150, 105, 0.06); border-color: rgba(5, 150, 105, 0.15); color: #059669; }
[data-theme="light"] .dl-filter-pill-x { color: #a3a3a3; }
[data-theme="light"] .dl-filter-pill-x:hover { color: #dc2626; }
[data-theme="light"] .dl-filter-clear { color: #a3a3a3; }
[data-theme="light"] .dl-filter-clear:hover { color: #dc2626; }
[data-theme="light"] .dl-sidebar-search { background: #f5f5f5; border-color: #e5e5e5; color: #171717; }
[data-theme="light"] .dl-sidebar-search::placeholder { color: #a3a3a3; }
[data-theme="light"] .dl-filter-toggle { background: #f5f5f5; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .dl-filter-toggle:hover { color: #171717; border-color: #d4d4d4; }
[data-theme="light"] .dl-sort-bar { border-bottom-color: #e5e5e5; }
[data-theme="light"] .dl-sort-item { color: #a3a3a3; }
[data-theme="light"] .dl-sort-item:hover { color: #525252; }
[data-theme="light"] .dl-sort-item.active { color: #171717; }
[data-theme="light"] .dl-filter-show-all { color: #7c3aed; }
[data-theme="light"] .dl-filter-show-all:hover { color: #171717; }

/* Filter Sidebar Responsive */
@media (max-width: 768px) {
    .dl-filter-toggle { display: block; }
    .dl-panels { flex-direction: column; }
    .dl-filter-sidebar { width: 100%; max-height: none; border-right: none; border-bottom: 1px solid #1a1a1a; display: none; padding: 8px; }
    .dl-filter-sidebar.dl-sidebar-open { display: block; }
}
@media (max-width: 480px) {
    .dl-filter-sidebar { padding: 6px; }
    .dl-filter-group-header { font-size: 10px; }
    .dl-filter-item { font-size: 10px; }
}

/* ===== MCP SERVER PAGE STYLES ===== */
.mcp-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 15px;
}

.mcp-hero {
    text-align: center;
    padding: 30px 15px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    border-radius: 0;
    margin-bottom: 20px;
}

.mcp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mcp-icon {
    font-size: 36px;
}

.mcp-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.mcp-tagline {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.mcp-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mcp-badge {
    background: rgba(255,255,255,0.15);
    padding: 5px 12px;
    border-radius: 0;
    font-size: 12px;
    color: var(--text-primary);
}

.mcp-section {
    background: var(--bg-card);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}

.mcp-section h2 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcp-code-block {
    background: var(--bg-tertiary);
    border-radius: 0;
    overflow: hidden;
    margin: 12px 0;
}

.mcp-code-block .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.mcp-code-block .code-header span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.mcp-code-block pre {
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    font-size: 12px;
}

.mcp-code-block code {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

.mcp-note {
    color: var(--text-muted);
    font-size: 13px;
    margin: 8px 0;
}

/* Config Tabs */
.mcp-config-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.mcp-tab {
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.mcp-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.mcp-tab.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* Tools Grid */
.mcp-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.mcp-tool-card {
    background: var(--bg-tertiary);
    border-radius: 0;
    padding: 14px;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.mcp-tool-card:hover {
    border-color: var(--accent-blue);
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tool-icon {
    font-size: 18px;
}

.tool-name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-blue);
}

.tool-desc {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.tool-params {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tool-params .param {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-hover);
    border-radius: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.tool-params .param.required {
    background: rgba(168, 230, 207, 0.15);
    color: var(--accent-green);
}

/* Resources List */
.mcp-resources-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mcp-resource {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 0;
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.mcp-resource code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--det-kql);
    background: var(--bg-hover);
    padding: 3px 8px;
    border-radius: 0;
    white-space: nowrap;
}

.mcp-resource span {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Examples */
.mcp-examples {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mcp-example {
    background: var(--bg-tertiary);
    border-radius: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
}

.example-prompt {
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.4;
}

.example-prompt::before {
    content: '💬 ';
}

.example-tool {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-green);
    padding-left: 20px;
    word-break: break-all;
}

/* Links */
.mcp-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mcp-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-radius: 0;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 13px;
}

.mcp-link:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.link-icon {
    font-size: 16px;
}

/* Nav badge for NEW */
.nav-badge.new {
    background: var(--accent-green);
    color: #000;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 0;
    margin-left: auto;
    font-weight: 700;
}

/* Responsive MCP - Mobile First */
@media (max-width: 600px) {
    .mcp-container {
        padding: 10px;
    }
    
    .mcp-hero {
        padding: 20px 12px;
        border-radius: 0;
        margin-bottom: 15px;
    }
    
    .mcp-logo {
        flex-direction: column;
        gap: 8px;
    }
    
    .mcp-icon {
        font-size: 32px;
    }
    
    .mcp-title {
        font-size: 20px;
    }
    
    .mcp-tagline {
        font-size: 13px;
    }
    
    .mcp-badges {
        gap: 6px;
    }
    
    .mcp-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .mcp-section {
        padding: 15px 12px;
        border-radius: 0;
        margin-bottom: 12px;
    }
    
    .mcp-section h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .mcp-config-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .mcp-tab {
        padding: 8px 10px;
        font-size: 12px;
        text-align: center;
    }
    
    .mcp-code-block pre {
        padding: 10px;
        font-size: 11px;
    }
    
    .mcp-code-block code {
        font-size: 11px;
    }
    
    .mcp-tools-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .mcp-tool-card {
        padding: 12px;
    }
    
    .tool-name {
        font-size: 12px;
    }
    
    .tool-desc {
        font-size: 11px;
    }
    
    .mcp-resource {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px;
    }
    
    .mcp-resource code {
        font-size: 10px;
    }
    
    .mcp-resource span {
        font-size: 12px;
    }
    
    .mcp-example {
        padding: 10px;
    }
    
    .example-prompt {
        font-size: 12px;
    }
    
    .example-tool {
        font-size: 10px;
        padding-left: 0;
        margin-top: 6px;
    }
    
    .mcp-links {
        flex-direction: column;
        gap: 8px;
    }
    
    .mcp-link {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Tablet adjustments */
@media (min-width: 601px) and (max-width: 900px) {
    .mcp-container {
        padding: 15px;
    }
    
    .mcp-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mcp-config-tabs {
        flex-wrap: wrap;
    }
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-surface: #f5f5f5;
    --bg-surface-alt: #fafafa;
    --bg-elevated: #ffffff;
    --bg-tertiary: #e5e5e5;
    --bg-card: #fafafa;
    --bg-hover: #eeeeee;
    --bg-active: #e0e0e0;
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #888888;
    --border-color: #dddddd;
    --border-light: #cccccc;
    --accent-primary: #1a1a1a;
    --highlight-bg: rgba(253, 186, 116, 0.2);
    --highlight-text: #b45309;
    --severity-critical: #e11d48;
    --severity-high: #ea580c;
    --severity-medium: #7c3aed;
    --severity-low: #059669;
    --det-spl: #059669;
    --det-kql: #7c3aed;
    --det-sigma: #0284c7;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
}

/* Light theme overrides for hardcoded dark colors */
[data-theme="light"] .main-content {
    background: #f5f5f5;
}

[data-theme="light"] .nav-section-title {
    color: #888888;
}

[data-theme="light"] .nav-item {
    color: #555555;
}

[data-theme="light"] .nav-item:hover {
    background: #e8e8e8;
    color: #1a1a1a;
}

[data-theme="light"] .nav-item.active {
    background: #e8e8e8;
    color: #1a1a1a;
}

[data-theme="light"] .nav-label {
    color: #444444;
}

[data-theme="light"] .nav-item:hover .nav-label {
    color: #1a1a1a;
}

[data-theme="light"] .nav-item.active .nav-label {
    color: #1a1a1a;
}

[data-theme="light"] .nav-dot {
    background: #8b5cf6;
}

[data-theme="light"] .nav-count {
    color: #888888;
}

[data-theme="light"] .sidebar-footer {
    border-top-color: #dddddd;
}

[data-theme="light"] .stats-bar {
    background: #ffffff;
    border-bottom-color: #dddddd;
}

[data-theme="light"] .stat-tag-value { color: #1a1a1a; }
[data-theme="light"] .stat-tag-label { color: #999; }
[data-theme="light"] .stat-tag-bracket { color: #ccc; }
[data-theme="light"] .stat-tag-value.critical { color: #e11d48; }
[data-theme="light"] .stat-tag-value.high { color: #ea580c; }
[data-theme="light"] .stat-tag-critical .stat-tag-bracket { color: rgba(225,29,72,0.25); }
[data-theme="light"] .stat-tag-critical .stat-tag-label { color: #e11d48; }
[data-theme="light"] .stat-tag-high .stat-tag-bracket { color: rgba(234,88,12,0.25); }
[data-theme="light"] .stat-tag-high .stat-tag-label { color: #ea580c; }
[data-theme="light"] .stat-severity-bar { background: #eee; }

[data-theme="light"] .feed-header {
    border-bottom-color: #dddddd;
}

[data-theme="light"] .feed-title {
    color: #555555;
}

[data-theme="light"] .threat-row {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

[data-theme="light"] .threat-row:nth-child(even) {
    background: #fafafa;
}

[data-theme="light"] .threat-row:hover {
    background: #f0f0f0;
}

[data-theme="light"] .detection-query.spl {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, #fff 100%);
    color: #059669;
}

[data-theme="light"] .detection-query.kql {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, #fff 100%);
    color: #7c3aed;
}

[data-theme="light"] .detection-query.sigma {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, #fff 100%);
    color: #0284c7;
}

[data-theme="light"] .sidebar {
    box-shadow: 2px 0 8px rgba(0,0,0,0.05);
}

[data-theme="light"] .threat-row {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    padding: 4px 8px;
    margin-left: auto;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.theme-toggle-btn:hover {
    color: #e8e8e8;
}

.theme-bracket {
    color: #525252;
    font-weight: 600;
}

.theme-toggle-btn:hover .theme-bracket {
    color: #a8e6cf;
}

.theme-icon {
    font-size: 14px;
}

.theme-label {
    font-size: 11px;
    letter-spacing: 0.5px;
}

[data-theme="light"] .theme-toggle-btn {
    color: #888888;
}

[data-theme="light"] .theme-toggle-btn:hover {
    color: #1a1a1a;
}

[data-theme="light"] .theme-toggle-btn:hover .theme-bracket {
    color: #059669;
}

/* Topbar User Badge */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 16px;
    border-left: 1px solid #1a1a1a;
    margin-left: 0;
}
.topbar-user-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}
.topbar-user-email {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #737373;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.topbar-user-tier {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.topbar-user-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
}
.topbar-user-link:hover .topbar-user-email {
    color: #e8e8e8;
}
.topbar-signout-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    background: none;
    border: none;
    color: #525252;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    white-space: nowrap;
}
.topbar-signout-btn:hover {
    color: #fda4af;
}
a.logo {
    text-decoration: none;
    cursor: pointer;
}
[data-theme="light"] .topbar-user {
    border-left-color: #e0e0e0;
}
[data-theme="light"] .topbar-user-email {
    color: #737373;
}
[data-theme="light"] .topbar-user-link:hover .topbar-user-email {
    color: #1a1a1a;
}
[data-theme="light"] .topbar-signout-btn {
    color: #a3a3a3;
}
[data-theme="light"] .topbar-signout-btn:hover {
    color: #e11d48;
}

/* ===== CISA KEV WIDGET ===== */
.cisa-kev-widget {
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cisa-kev-widget.overdue {
    background: rgba(253, 164, 175, 0.15);
    border-color: var(--severity-critical);
}

.cisa-kev-widget.urgent {
    background: rgba(253, 164, 175, 0.1);
    border-color: var(--severity-critical);
}

.cisa-kev-widget.warning {
    background: rgba(196, 181, 253, 0.1);
    border-color: var(--severity-medium);
}

.cisa-kev-widget.ok {
    background: rgba(168, 230, 207, 0.1);
    border-color: var(--accent-green);
}

.cisa-kev-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.cisa-kev-date {
    font-size: 13px;
    color: var(--text-secondary);
}

.cisa-kev-countdown {
    font-size: 18px;
    font-weight: 700;
}

.cisa-kev-overdue {
    color: var(--severity-critical);
    animation: pulse 2s ease-in-out infinite;
}

.cisa-kev-timer {
    color: var(--text-primary);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.cisa-badge {
    background: rgba(253, 164, 175, 0.2);
    color: var(--severity-critical);
    padding: 2px 8px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
}

/* ===== DETECTION EXPORT BAR ===== */
.detection-export-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.export-all-sigma-btn {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.export-all-sigma-btn:hover {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* ===== SYNTAX HIGHLIGHTING ===== */
.detection-query {
    display: flex;
    gap: 0;
    padding: 0;
}

.line-numbers {
    display: flex;
    flex-direction: column;
    padding: 14px 8px 14px 12px;
    text-align: right;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
    border-right: 1px solid var(--border-color);
    user-select: none;
    opacity: 0.5;
    min-width: 30px;
}

.line-numbers span {
    display: block;
}

.code-content {
    flex: 1;
    padding: 14px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
    font-family: var(--font-mono);
    font-size: 12px;
}

.spl-keyword { color: var(--det-spl); font-weight: 600; }
.spl-operator { color: var(--highlight-text); }
.spl-string { color: var(--severity-high); }

.kql-keyword { color: var(--det-kql); font-weight: 600; }
.kql-operator { color: var(--highlight-text); }
.kql-string { color: var(--severity-high); }

.sigma-key { color: var(--det-sigma); font-weight: 600; }
.sigma-tag { color: var(--det-spl); }

[data-theme="light"] .spl-keyword { color: #16a34a; }
[data-theme="light"] .kql-keyword { color: #7c3aed; }
[data-theme="light"] .sigma-key { color: #5ab8e6; }

/* ===== SIMILAR THREATS GRID ===== */
.similar-threats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.similar-threat-card {
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.similar-threat-card:hover {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
}

.similar-threat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.similar-threat-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.similar-threat-shared {
    font-size: 10px;
    color: var(--accent-blue);
    margin-top: 6px;
}

/* ===== KEYBOARD SHORTCUTS MODAL ===== */
.shortcuts-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.shortcuts-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
}

.shortcuts-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 450px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.shortcuts-header h2 {
    font-size: 18px;
    font-weight: 700;
}

.shortcuts-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.shortcut-item kbd {
    display: inline-block;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 28px;
    text-align: center;
}

.shortcut-item span {
    flex: 1;
}

/* ===== COMPARISON PANEL ===== */
.compare-panel {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    max-height: 50vh;
    background: var(--bg-card);
    border-top: 2px solid var(--accent-blue);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 500;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
}

.compare-header h3 {
    font-size: 16px;
    font-weight: 700;
}

.compare-content {
    padding: 16px 20px;
    overflow-y: auto;
}

.compare-placeholder {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    font-size: 14px;
}

.compare-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.compare-row {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.compare-header-row {
    background: var(--bg-tertiary);
    font-weight: 700;
    position: sticky;
    top: 0;
}

.compare-diff {
    background: rgba(196, 181, 253, 0.08);
}

.compare-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.compare-val {
    color: var(--text-primary);
    word-break: break-word;
}

.threat-row.compare-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.threat-row.keyboard-focused {
    outline: 2px solid var(--accent-green);
    outline-offset: -2px;
}

/* ===== STATS PAGE ===== */
.stats-page {
    padding: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.stats-card-wide {
    grid-column: 1 / -1;
}

.stats-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.stats-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-bar-label {
    min-width: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}

.stats-bar-label.mitre-label {
    font-family: var(--font-mono);
    color: var(--accent-blue);
}

.stats-bar-track {
    flex: 1;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 0;
    overflow: hidden;
}

.stats-bar-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.5s ease;
}

.severity-fill-critical { background: var(--severity-critical); }
.severity-fill-high { background: var(--severity-high); }
.severity-fill-medium { background: var(--severity-medium); }
.severity-fill-low { background: var(--severity-low); }
.cat-fill { background: var(--accent-blue); }
.mitre-fill { background: linear-gradient(90deg, var(--accent-blue), var(--det-sigma)); }

.stats-bar-value {
    min-width: 30px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

.stats-donut {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.donut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
}

.spl-donut { background: rgba(168, 230, 207, 0.1); }
.kql-donut { background: rgba(196, 181, 253, 0.1); }
.sigma-donut { background: rgba(125, 211, 252, 0.1); }

.donut-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.donut-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tag-cloud-item {
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    transition: all 0.15s ease;
    cursor: default;
}

.tag-cloud-item:hover {
    background: var(--accent-blue);
    color: white;
}

.tag-cloud-item sup {
    font-size: 0.7em;
    color: var(--text-muted);
}

/* ===== COVERAGE PAGE ===== */
.coverage-page {
    padding: 20px;
}

.coverage-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

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

.coverage-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
}

.coverage-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.heatmap-section {
    margin: 24px 0;
}

.heatmap-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.heatmap-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.heatmap-tactic {
    min-width: 160px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-top: 4px;
}

.heatmap-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.heatmap-cell {
    padding: 4px 8px;
    border-radius: 0;
    font-size: 10px;
    font-family: var(--font-mono);
    color: white;
    cursor: default;
    font-weight: 600;
}

.heatmap-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0;
}

.gaps-section {
    margin: 24px 0;
    padding: 20px;
    background: rgba(253, 164, 175, 0.05);
    border: 1px solid rgba(253, 164, 175, 0.2);
    border-radius: var(--radius-lg);
}

.gaps-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.gaps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gap-badge {
    padding: 6px 12px;
    background: rgba(253, 164, 175, 0.15);
    border: 1px solid rgba(253, 164, 175, 0.3);
    border-radius: var(--radius-sm);
    color: var(--severity-critical);
    font-size: 12px;
    font-weight: 600;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .compare-panel {
        left: 0;
    }
    .compare-row {
        grid-template-columns: 100px 1fr 1fr;
        font-size: 11px;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .heatmap-row {
        flex-direction: column;
    }
    .heatmap-tactic {
        min-width: auto;
    }
    .shortcuts-content {
        max-width: 95%;
    }
    .similar-threats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== NEW COMPONENTS — Black + Pastel Command Center ===== */

/* ===== STATS BAR (Compact Horizontal) ===== */
/* ===== STATS BAR — compact bracket-tag format ===== */
.stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 32px;
    background: #0a0a0a;
}

.stats-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.stat-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 3px 0;
    white-space: nowrap;
}

.stat-tag-bracket {
    color: #333;
    font-weight: 600;
}

.stat-tag-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: #e8e8e8;
}

.stat-tag-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
}

.stat-tag-value.critical { color: #fda4af; }
.stat-tag-value.high { color: #fdba74; }
.stat-tag-value.medium { color: #c4b5fd; }
.stat-tag-value.low { color: #a8e6cf; }

.stat-tag-critical .stat-tag-bracket { color: rgba(253,164,175,0.3); }
.stat-tag-critical .stat-tag-label { color: #fda4af; font-weight: 600; }
.stat-tag-high .stat-tag-bracket { color: rgba(253,186,116,0.3); }
.stat-tag-high .stat-tag-label { color: #fdba74; font-weight: 600; }

.stat-severity-bar {
    display: flex;
    width: 80px;
    height: 6px;
    background: #1a1a1a;
    flex-shrink: 0;
    overflow: hidden;
}
.stat-severity-bar .sev-seg { height: 100%; transition: width 0.3s; }
.stat-severity-bar .sev-critical { background: #fda4af; }
.stat-severity-bar .sev-high { background: #fdba74; }
.stat-severity-bar .sev-medium { background: #c4b5fd; }
.stat-severity-bar .sev-low { background: #a8e6cf; }

/* ===== SPARKLINE — colored bars aligned bottom ===== */
.sparkline-container {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 40px;
    flex: 1;
    padding-bottom: 4px;
}

.sparkline-bar {
    width: 4px;
    background: #fde68a;
    transition: opacity 0.15s ease;
}

.sparkline-bar:hover {
    opacity: 0.8;
}

.sparkline-bar.critical { background: #fda4af; }
.sparkline-bar.high { background: #fdba74; }
.sparkline-bar.medium { background: #c4b5fd; }
.sparkline-bar.low { background: #a8e6cf; }

/* ===== THREAT ROW — vertical stack per mockup, NO left severity bar ===== */
.threat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #111111;
    border: 1px solid #1e1e1e;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.threat-row:nth-child(even) {
    background: #0e0e0e;
}

.threat-row:hover {
    background: #161616;
}

.threat-row.active {
    background: #161616;
    border-color: #c4b5fd;
}

/* Hidden — no left severity bar in mockup */
.threat-row-severity { display: none; }

.threat-row-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.threat-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.threat-row-top-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.threat-row-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.4;
}

.threat-row-subtitle {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: normal;
    color: #737373;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.threat-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4px;
}

.threat-row-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.threat-row-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: normal;
    color: #7dd3fc;
}

.threat-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.threat-row-meta-det {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #a8e6cf;
}

.threat-row-meta-ioc {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #fdba74;
}

.threat-row-meta-actor {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #c4b5fd;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date shown in top row, right side */
.threat-row-date {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
}

/* Hidden — the right column from old layout is gone */
.threat-row-right { display: none; }
.threat-row-badges { display: none; }

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

/* ===== MITRE KILL CHAIN STRIP — 14 cells, 8px height ===== */
.mitre-strip-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mitre-strip {
    display: flex;
    gap: 2px;
}

.mitre-strip-cell {
    width: 14px;
    height: 8px;
    background: #1e1e1e;
    transition: background 0.15s ease;
}

.mitre-strip-cell.active {
    background: #c4b5fd;
}

.mitre-strip-labels {
    display: flex;
    gap: 2px;
}

.mitre-strip-label {
    width: 14px;
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: normal;
    color: #525252;
    text-align: center;
}

/* ===== MITRE KILL CHAIN (DETAIL PANEL) ===== */
.mitre-chain {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.mitre-chain-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 42px;
}

.mitre-chain-box {
    width: 100%;
    height: 28px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mitre-chain-box.active {
    background: rgba(196, 181, 253, 0.3);
    border: 1px solid var(--accent-purple);
}

.mitre-chain-box .count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-purple);
}

.mitre-chain-label {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.3px;
}

/* ===== COVERAGE GAUGE ===== */
.coverage-gauge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coverage-ring {
    width: 48px;
    height: 48px;
    position: relative;
}

.coverage-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.coverage-ring .ring-bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 4;
}

.coverage-ring .ring-fill {
    fill: none;
    stroke: var(--accent-green);
    stroke-width: 4;
    stroke-linecap: square;
    transition: stroke-dashoffset 0.5s ease;
}

.coverage-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== IOC OVERLAP INDICATOR ===== */
.ioc-overlap {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ioc-overlap-bar {
    height: 8px;
    flex: 1;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.ioc-overlap-fill {
    height: 100%;
    background: var(--severity-critical);
    transition: width 0.3s ease;
}

.ioc-overlap-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 36px;
    text-align: right;
}

/* ===== CVSS HISTOGRAM ===== */
.cvss-histogram {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 40px;
}

.cvss-bar {
    flex: 1;
    background: var(--accent-blue);
    opacity: 0.5;
    min-width: 4px;
    transition: opacity 0.15s ease;
}

.cvss-bar:hover {
    opacity: 1;
}

/* ===== DETECTION CODE BLOCK (NEW) ===== */
.det-code-block {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.det-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.det-code-lang {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.det-code-lang.spl { color: var(--det-spl); }
.det-code-lang.kql { color: var(--det-kql); }
.det-code-lang.sigma { color: var(--det-sigma); }

.det-code-body {
    display: flex;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
}

.det-code-lines {
    padding: 12px 0;
    text-align: right;
    color: var(--text-muted);
    user-select: none;
    border-right: 1px solid var(--border-color);
    min-width: 36px;
}

.det-code-lines span {
    display: block;
    padding: 0 8px;
    font-size: 11px;
}

.det-code-content {
    padding: 12px 16px;
    overflow-x: auto;
    white-space: pre;
    color: var(--text-secondary);
    flex: 1;
}

/* Syntax highlight tokens */
.spl-keyword { color: var(--det-spl); font-weight: 600; }
.spl-pipe { color: var(--severity-high); }
.spl-field { color: var(--accent-blue); }
.spl-string { color: var(--severity-critical); }
.spl-func { color: var(--det-kql); }

.kql-keyword { color: var(--det-kql); font-weight: 600; }
.kql-pipe { color: var(--severity-high); }
.kql-field { color: var(--accent-blue); }
.kql-string { color: var(--severity-critical); }
.kql-func { color: var(--det-spl); }

.sigma-key { color: var(--det-sigma); font-weight: 600; }
.sigma-value { color: var(--text-primary); }
.sigma-string { color: var(--severity-critical); }

/* ===== DETAIL PANEL TABS (NEW STYLE) ===== */
.detail-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.detail-tab {
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-tab:hover {
    color: var(--text-secondary);
}

.detail-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* ===== METADATA GRID (DETAIL PANEL) ===== */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

.meta-cell {
    background: var(--bg-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-cell-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-cell-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== SECTOR RISK MINI BARS ===== */
.sector-risk-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sector-risk-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sector-risk-label {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 80px;
}

.sector-risk-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.sector-risk-fill {
    height: 100%;
    background: var(--severity-critical);
    transition: width 0.3s ease;
}

.sector-risk-value {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}

/* ===== FEED HEADER — terminal comment style ===== */
.feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
}

.feed-title {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: normal;
    color: #525252;
    flex-shrink: 0;
}

.feed-tlql-input {
    flex: 1 1 280px;
    min-width: 240px;
    box-sizing: border-box;
    height: 32px;
    line-height: 1.2;
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-surface, #111);
    border: 1px solid var(--border, #222);
    color: var(--accent-lavender, #c4b5fd);
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.15s;
}
.feed-tlql-input:focus { border-color: var(--accent-lavender, #c4b5fd); }
.feed-tlql-input.tlql-err { border-color: #fda4af; color: #fda4af; }

.feed-tlql-match {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #a8e6cf;
    flex-shrink: 0;
    white-space: nowrap;
}
.feed-tlql-match.tlql-err { color: #fda4af; }
.feed-tlql-match.tlql-muted { color: #525252; }

.feed-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

[data-theme="light"] .feed-tlql-input { background: #f5f5f5; border-color: #ddd; color: #7c3aed; }
[data-theme="light"] .feed-tlql-input:focus { border-color: #7c3aed; }

@media (max-width: 768px) {
    .feed-header { padding: 0 16px; gap: 8px; }
    .feed-tlql-input {
        flex: 1 1 100%;
        order: 2;
        font-size: 16px;          /* prevent iOS auto-zoom */
        height: 36px;
        padding: 6px 10px;
    }
    .feed-title { order: 1; flex: 0 0 auto; font-size: 12px; }
    .feed-tlql-match { order: 3; flex: 1 1 100%; font-size: 11px; }
    .feed-controls { order: 4; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .feed-controls .feed-tlql-ai,
    .feed-controls .advanced-search-btn,
    .feed-controls .feed-sort { font-size: 11px; padding: 4px 9px; }
}
@media (max-width: 480px) {
    .feed-header { padding: 0 12px; gap: 6px; }
    .feed-tlql-input { height: 38px; padding: 8px 10px; }
    .feed-controls { gap: 6px; }
    .feed-controls .feed-tlql-ai,
    .feed-controls .advanced-search-btn,
    .feed-controls .feed-sort { font-size: 10px; padding: 4px 7px; }
    /* '$ search' button duplicates the advanced search modal trigger already
       available from the toolbar; hide on the smallest phones to make room. */
    .feed-controls .advanced-search-btn { display: none; }
}

.feed-sort {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #c4b5fd;
    cursor: pointer;
}

.feed-sort:hover {
    color: #e8e8e8;
}

.advanced-search-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #c4b5fd;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.advanced-search-btn:hover {
    color: #e8e8e8;
}

/* ===== RESPONSIVE FOR NEW COMPONENTS ===== */
@media (max-width: 768px) {
    .threat-row {
        flex-direction: column;
    }

    .threat-row-severity {
        width: 100%;
        height: 3px;
    }

    .threat-row-right {
        flex-direction: row;
        justify-content: space-between;
        min-width: auto;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .mitre-strip {
        flex-wrap: wrap;
    }

    .meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .threat-pulse {
        margin-left: 0;
        width: 100%;
    }
}

/* ===== COMPREHENSIVE RESPONSIVE DESIGN ===== */

/* -------------------------------------------------------------------
   TABLET (768px - 1024px)
   Sidebar visible but narrower, content adapts
   ------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Sidebar: slightly narrower on tablet */
    .sidebar {
        width: 220px;
    }

    .main-content {
        margin-left: 220px;
    }

    .compare-panel {
        left: 220px;
    }

    /* Stats bar: reduce padding and gap */
    .stats-bar {
        padding: 0 20px;
        gap: 10px;
    }

    .stat-tag-value {
        font-size: 13px;
    }

    .stat-severity-bar {
        width: 60px;
    }

    /* Feed header: reduce padding */
    .feed-header {
        padding: 0 20px;
    }

    /* Threats list: reduce padding */
    .threats-list {
        padding: 0 20px;
    }

    .threats-section {
        padding: 0 20px 24px;
    }

    /* Detail panel: full width on tablet */
    .detail-panel {
        width: 95%;
        max-width: 700px;
    }

    .dp-overview {
        padding: 20px 24px;
    }

    .dp-det-content {
        padding: 20px 24px;
    }

    .detail-content {
        padding: 20px 24px;
    }

    .dp-header {
        padding: 20px 24px;
    }

    .dp-tabs {
        padding: 0 24px;
    }

    /* Attribution grid: stack on narrower tablets */
    .dp-attr-grid {
        flex-wrap: wrap;
    }

    .dp-attr-cell {
        min-width: 120px;
    }

    /* Affected grid: single column on tablets */
    .dp-affected-grid {
        grid-template-columns: 1fr;
    }

    /* CVSS breakdown: wrap tighter */
    .dp-cvss-cell {
        flex: 1 1 25%;
    }

    /* Kill chain: allow wrapping */
    .dp-killchain {
        flex-wrap: wrap;
    }

    .dp-kc-cell {
        min-width: 40px;
    }
}

/* -------------------------------------------------------------------
   MOBILE (max-width: 768px)
   Full-width layout, sidebar as overlay, compact spacing
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* --- Mobile Header --- */
    .mobile-header {
        display: flex;
        height: 56px;
        z-index: 100;
    }

    .mobile-menu-btn,
    .mobile-filter-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* --- Sidebar: Off-screen overlay --- */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 150;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-overlay.open {
        display: block;
    }

    /* Nav items: larger touch targets */
    .nav-item {
        height: 44px;
        padding: 0 12px;
    }

    .nav-section:first-child .nav-item {
        height: 48px;
    }

    /* The // enterprise section header is interactive (collapse toggle) — give it
       a full touch target on mobile, matching the nav-item standard above. */
    .sidebar .nav-section-toggle {
        min-height: 44px;
    }

    /* --- Main Content: Full width --- */
    .main-content {
        margin-left: 0;
        padding-top: 56px;
        min-height: 100vh;
    }

    /* --- Stats Bar: Horizontal scroll --- */
    .stats-bar {
        padding: 0 16px;
        gap: 10px;
        height: auto;
        min-height: 44px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .stats-bar::-webkit-scrollbar {
        display: none;
    }

    .stats-chips {
        flex-shrink: 0;
        gap: 6px;
    }

    .stat-tag-value {
        font-size: 12px;
    }

    .stat-tag-label {
        font-size: 10px;
    }

    .stat-severity-bar {
        width: 50px;
    }

    .sparkline-container {
        flex: 0 0 auto;
        min-width: 60px;
        max-width: 100px;
        height: 28px;
    }

    .theme-toggle-btn {
        flex-shrink: 0;
    }

    /* --- Feed Header: Stack on mobile ---
       Mobile layout is handled by the canonical rules near line 8516
       (flex-wrap row-based stack via order + flex: 1 1 100%). This block
       intentionally no longer sets flex-direction: column — that caused
       the search input to expand to row-height (~184px). */

    /* --- Threats Section: Reduce padding --- */
    .threats-section {
        padding: 0 16px 24px;
    }

    .threats-list {
        padding: 0 16px;
    }

    /* --- Threat Row: Compact mobile layout --- */
    .threat-row {
        padding: 12px 14px;
        gap: 6px;
    }

    .threat-row-top {
        flex-wrap: wrap;
        gap: 6px;
    }

    .threat-row-top-left {
        gap: 6px;
        flex-wrap: wrap;
    }

    .threat-row-title {
        font-size: 14px;
        line-height: 1.3;
    }

    .threat-row-subtitle {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    .threat-row-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .threat-row-tags {
        flex-wrap: wrap;
        gap: 6px;
    }

    .threat-row-meta {
        gap: 8px;
        flex-wrap: wrap;
    }

    .threat-row-date {
        font-size: 10px;
    }

    /* MITRE strip: still visible but smaller */
    .mitre-strip-cell {
        width: 10px;
        height: 6px;
    }

    .mitre-strip-label {
        width: 10px;
        font-size: 8px;
    }

    /* --- Detail Panel: Full-screen modal on mobile --- */
    .detail-modal.open {
        align-items: stretch;
        justify-content: stretch;
    }

    .detail-panel {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border: none;
        position: fixed;
        inset: 0;
    }

    .dp-header {
        padding: 16px;
        gap: 12px;
    }

    .dp-header-top {
        gap: 8px;
    }

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

    .detail-id {
        font-size: 12px;
    }

    .detail-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .dp-date-row {
        font-size: 11px;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Tabs: Horizontally scrollable */
    .dp-tabs {
        padding: 0 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .dp-tabs::-webkit-scrollbar {
        display: none;
    }

    .dp-tab {
        flex-shrink: 0;
        padding: 10px 6px;
        font-size: 11px;
    }

    /* Detail content */
    .detail-content {
        padding: 16px;
    }

    .dp-overview {
        padding: 16px;
        gap: 20px;
    }

    .dp-det-content {
        padding: 16px;
        gap: 16px;
    }

    /* Metadata strip: wrap on small screens */
    .detail-meta-grid {
        flex-wrap: wrap;
    }

    .detail-meta-item {
        flex: 1 1 45%;
        padding: 8px 10px;
    }

    .detail-meta-value.cvss-val {
        font-size: 14px;
    }

    /* Attribution grid: stack vertically */
    .dp-attr-grid {
        flex-direction: column;
        gap: 1px;
    }

    .dp-attr-cell {
        padding: 10px 14px;
    }

    /* Kill chain: compact */
    .dp-killchain {
        flex-wrap: wrap;
        gap: 1px;
    }

    .dp-kc-cell {
        min-width: 30px;
        flex: 1 0 auto;
    }

    .dp-kc-bar {
        height: 10px;
    }

    .dp-kc-label {
        font-size: 9px;
    }

    /* Technique rows */
    .dp-technique-row {
        padding: 8px 10px;
        gap: 8px;
    }

    .dp-technique-id {
        font-size: 10px;
    }

    .dp-technique-name {
        font-size: 11px;
    }

    /* Timeline */
    .dp-timeline-row {
        gap: 10px;
        padding: 8px 0;
    }

    .dp-tl-date {
        width: 70px;
        font-size: 10px;
    }

    .dp-tl-text {
        font-size: 12px;
    }

    .dp-tl-nested { padding-left: 8px; }
    .dp-tl-sub-item { font-size: 10px; padding: 1px 4px; }
    .dp-tl-sub-label { font-size: 10px; }

    /* References */
    .dp-ref-row {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .dp-ref-title {
        font-size: 11px;
        word-break: break-word;
    }

    /* Detection expanded */
    .dp-det-row-header {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .dp-det-row-left {
        gap: 6px;
    }

    .dp-det-title-expanded {
        font-size: 12px;
    }

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

    .dp-det-lang-tabs {
        flex-wrap: wrap;
        overflow-x: auto;
    }

    .dp-lang-tab {
        padding: 8px 14px;
        font-size: 10px;
    }

    .dp-det-code-wrap {
        min-height: 160px;
        max-height: 280px;
        overflow-x: auto;
    }

    .dp-det-code {
        min-width: 0;
    }

    /* Code block: allow horizontal scroll */
    .dp-code-content {
        padding: 0 12px;
        font-size: 11px;
        min-width: 0;
    }

    .dp-code-lines span {
        font-size: 10px;
    }

    .dp-det-mitre-footer {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .dp-det-desc { padding: 0 12px 8px; font-size: 11px; }
    .dp-det-meta { padding: 0 12px 8px; gap: 4px; }
    .dp-det-fp, .dp-det-tuning { padding: 8px 12px; }

    /* Collapsed detection */
    .dp-det-collapsed {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .dp-det-title-collapsed {
        font-size: 12px;
    }

    .dp-det-row-right {
        gap: 6px;
    }

    /* --- Search Modal: Full screen on mobile --- */
    .search-modal.open {
        padding-top: 0;
    }

    .search-modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .search-modal-header {
        padding: 16px;
    }

    .search-modal-input-wrap {
        padding: 12px 16px;
    }

    .search-modal-input {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 12px 14px 12px 42px;
    }

    .search-modal-results {
        padding: 0 16px 16px;
    }

    .search-result-item {
        padding: 12px;
    }

    .search-result-title {
        font-size: 14px;
    }

    .search-result-snippet {
        font-size: 12px;
    }

    /* --- Shortcuts Modal --- */
    .shortcuts-content {
        max-width: 95%;
        padding: 16px;
    }

    .shortcuts-header h2 {
        font-size: 16px;
    }

    .shortcut-item {
        font-size: 13px;
        gap: 8px;
    }

    .shortcut-item kbd {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* --- Compare Panel --- */
    .compare-panel {
        left: 0;
        max-height: 60vh;
    }

    .compare-row {
        grid-template-columns: 80px 1fr 1fr;
        gap: 8px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .compare-header {
        padding: 10px 16px;
    }

    .compare-content {
        padding: 12px 16px;
    }

    /* --- Trending Section --- */
    .trending-section {
        padding: 12px;
    }

    .trending-list {
        flex-direction: column;
    }

    .trending-item {
        max-width: 100%;
        min-width: 0;
    }

    /* --- Stats Grid (old style) --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }

    /* --- Filters --- */
    .filters-section {
        padding: 0 16px;
    }

    .filters-grid {
        grid-template-columns: 1fr;
    }

    /* --- Meta Grid --- */
    .meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Detection Items --- */
    .detection-item {
        padding: 12px;
    }

    .detection-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .detection-item-name {
        font-size: 14px;
    }

    .detection-query {
        font-size: 11px;
        padding: 10px;
    }

    /* --- Detection Library --- */
    .dl-code-block {
        min-height: 160px;
        max-height: 300px;
        font-size: 11px;
        width: 100%;
        overflow-x: auto;
    }
    .dl-line-num {
        display: none;
    }

    .dl-code-tab {
        padding: 5px 10px;
        font-size: 10px;
    }

    /* --- Related threats --- */
    .related-threats-grid {
        grid-template-columns: 1fr;
    }

    /* --- Loading/Empty States --- */
    .loading-state,
    .loading,
    .empty-state {
        padding: 40px 16px;
    }

    /* --- Toast --- */
    .toast {
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(100px);
        text-align: center;
        font-size: 13px;
    }

    .toast.show {
        transform: translateX(0) translateY(0);
    }

    /* --- CISA KEV Widget --- */
    .cisa-kev-widget {
        padding: 12px;
    }

    .cisa-kev-countdown {
        font-size: 16px;
    }

    /* --- Scrollbar: Hide on mobile (touch devices) --- */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    /* --- Simulation Tab --- */
    .sim-page-grid {
        grid-template-columns: 1fr;
    }
    .sim-tab-content {
        padding: 16px;
    }
    .sim-card-header {
        padding: 12px;
    }
    .sim-card-desc {
        padding: 0 12px 8px;
    }
    .sim-caution-note {
        margin: 0 12px 8px;
    }
    .sim-requirements {
        padding: 0 12px 8px;
    }

    /* --- Transcript Tab --- */
    .tx-participants-strip {
        flex-direction: column;
    }
    .tx-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tx-phase-timeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tx-phase-block {
        min-width: 80px;
    }
    .tx-signal-row {
        flex-wrap: wrap;
        gap: 4px;
    }
    .tx-message-header {
        flex-wrap: wrap;
    }
}

/* -------------------------------------------------------------------
   SMALL MOBILE (max-width: 480px)
   Ultra-compact for smallest phones (320px-480px)
   ------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Even more compact stats bar */
    .stats-bar {
        gap: 8px;
        padding: 0 12px;
        min-height: 40px;
    }

    .stat-tag-value {
        font-size: 11px;
    }

    .stat-tag-label {
        font-size: 9px;
    }

    .stat-severity-bar {
        display: none;
    }

    .sparkline-container {
        display: none;
    }

    /* Compact threat rows */
    .threat-row {
        padding: 10px 12px;
        gap: 4px;
    }

    .threat-row-title {
        font-size: 13px;
    }

    .threat-row-subtitle {
        font-size: 11px;
    }

    .threat-row-tag {
        font-size: 10px;
    }

    .threat-row-meta-det,
    .threat-row-meta-ioc,
    .threat-row-meta-actor {
        font-size: 10px;
    }

    /* MITRE strip: even smaller */
    .mitre-strip-cell {
        width: 8px;
        height: 5px;
    }

    .mitre-strip-labels {
        display: none; /* hide labels on very small screens */
    }

    /* Feed header */
    .feed-header {
        padding: 0 12px;
    }

    .feed-title {
        font-size: 11px;
    }

    /* Threats list */
    .threats-list {
        padding: 0 12px;
    }

    .threats-section {
        padding: 0 12px 20px;
    }

    /* Detail panel: extra compact */
    .dp-header {
        padding: 12px;
        gap: 8px;
    }

    .detail-title {
        font-size: 15px;
    }

    .dp-tabs {
        padding: 0 12px;
    }

    .dp-tab {
        padding: 8px 5px;
        font-size: 10px;
    }

    .detail-content {
        padding: 12px;
    }

    .dp-overview {
        padding: 12px;
        gap: 16px;
    }

    .dp-det-content {
        padding: 12px;
        gap: 12px;
    }

    /* Tags */
    .dp-tag {
        font-size: 10px;
        padding: 3px 8px;
    }

    .threat-tag {
        font-size: 10px;
        padding: 3px 6px;
    }

    /* Severity/status badges */
    .severity-badge,
    .dp-sev-badge,
    .status-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Compare panel: two column on tiny screens */
    .compare-row {
        grid-template-columns: 60px 1fr 1fr;
        gap: 6px;
        font-size: 10px;
    }

    /* Sidebar: slightly narrower on small phones */
    .sidebar {
        width: 260px;
    }

    /* Copy buttons */
    .copy-btn {
        padding: 5px 10px;
        font-size: 10px;
    }

    .copy-fmt-btn, .export-sigma-btn {
        padding: 4px 8px;
        font-size: 9px;
    }

    /* Detection code */
    .dp-code-content {
        font-size: 10px;
        padding: 0 10px;
    }

    .dp-code-lines {
        padding: 0 8px;
    }

    .dp-code-lines span {
        font-size: 9px;
    }

    /* Search modal */
    .search-modal-header h2 {
        font-size: 16px;
    }

    .search-modal-input {
        font-size: 16px; /* prevents iOS zoom */
    }

    /* --- Simulation Tab --- */
    .sim-platform-tabs {
        flex-wrap: wrap;
    }
    .sim-code-content {
        font-size: 10px;
        padding: 0 10px;
    }
    .sim-code-lines {
        padding: 0 8px;
    }
    .sim-code-lines span {
        font-size: 10px;
    }
}

/* -------------------------------------------------------------------
   LANDSCAPE MOBILE FIX
   ------------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
    .detail-panel {
        max-height: 100vh;
    }

    .stats-bar {
        min-height: 44px;
    }

    .mobile-header {
        height: 44px;
    }

    .main-content {
        padding-top: 44px;
    }
}

/* -------------------------------------------------------------------
   TOUCH DEVICE OPTIMIZATIONS
   ------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch — cleaner UX */
    .threat-row:hover {
        background: inherit;
    }

    .threat-row:nth-child(even):hover {
        background: #0e0e0e;
    }

    .threat-row:nth-child(odd):hover {
        background: #111111;
    }

    /* Active state instead of hover for touch */
    .threat-row:active {
        background: #1a1a1a;
    }

    .nav-item:hover {
        background: inherit;
        color: inherit;
    }

    .nav-item:active {
        background: #161616;
        color: #e8e8e8;
    }

    /* Larger touch targets for interactive elements */
    .dp-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .dp-lang-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .dp-det-collapsed {
        min-height: 48px;
    }

    .close-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .share-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feed-sort {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Prevent text selection during scroll on touch */
    .threats-list {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Allow text selection in detail content */
    .detail-content {
        -webkit-user-select: text;
        user-select: text;
    }

    .dp-code-content {
        -webkit-user-select: text;
        user-select: text;
    }

    /* Touch target fixes — 44px minimum for WCAG 2.5.5 */
    .library-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .advanced-search-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    .topbar-signout-btn {
        min-height: 44px;
        padding: 12px 8px;
    }

    .nav-logout-btn {
        min-height: 44px;
        padding: 12px 8px;
    }

    .nav-auth-btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    .nav-sub-item {
        min-height: 44px;
        padding: 10px 12px 10px 28px;
    }
}

/* -------------------------------------------------------------------
   SAFE AREA INSETS (iPhone notch/Dynamic Island)
   ------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
    .mobile-header {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
    }

    .sidebar {
        padding-top: env(safe-area-inset-top);
    }

    @media (max-width: 768px) {
        .main-content {
            padding-top: calc(56px + env(safe-area-inset-top));
        }

        /* full-screen search modal must clear the notch so its bar isn't cut off */
        .search-modal-content {
            padding-top: env(safe-area-inset-top);
        }

        .detail-panel {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .toast {
            bottom: calc(24px + env(safe-area-inset-bottom));
        }
    }
}

/* ===== COMPREHENSIVE LIGHT THEME OVERRIDES ===== */

/* ---- SIDEBAR ---- */
[data-theme="light"] .sidebar {
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.05);
}

[data-theme="light"] .sidebar-close {
    color: #999999;
}

[data-theme="light"] .logo-prompt {
    color: #7c3aed;
}

[data-theme="light"] .logo-text {
    color: #1a1a1a;
}

[data-theme="light"] .logo-subtitle {
    color: #7c3aed;
}

[data-theme="light"] .nav-section-title {
    color: #999999;
}

[data-theme="light"] .nav-item {
    color: #777777;
}

[data-theme="light"] .nav-item:hover {
    background: #f0f0f0;
    color: #1a1a1a;
}

[data-theme="light"] .nav-item.active {
    background: #f0f0f0;
    color: #1a1a1a;
}

[data-theme="light"] .nav-item.active .nav-count {
    color: #7c3aed;
}

[data-theme="light"] .nav-dot {
    background: #8b5cf6;
}

[data-theme="light"] .nav-label {
    color: #555555;
}

[data-theme="light"] .nav-item:hover .nav-label {
    color: #1a1a1a;
}

[data-theme="light"] .nav-item.active .nav-label {
    color: #1a1a1a;
}

[data-theme="light"] .nav-count {
    color: #999999;
}

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

[data-theme="light"] .stats-mini {
    color: #999999;
}

[data-theme="light"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.3);
}

/* ---- MAIN CONTENT ---- */
[data-theme="light"] .main-content {
    background: #f5f5f5;
}

/* ---- STATS BAR ---- */
[data-theme="light"] .stats-bar {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="light"] .stat-chip-value {
    color: #1a1a1a;
}

[data-theme="light"] .stat-chip-label {
    color: #999999;
}

[data-theme="light"] .stat-chip-value.critical { color: #e11d48; }
[data-theme="light"] .stat-chip-value.high { color: #ea580c; }
[data-theme="light"] .stat-chip-value.medium { color: #7c3aed; }
[data-theme="light"] .stat-chip-value.low { color: #059669; }

[data-theme="light"] .stat-divider {
    background: #e0e0e0;
}

/* ---- FEED HEADER ---- */
[data-theme="light"] .feed-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .feed-title {
    color: #999999;
}

[data-theme="light"] .feed-sort {
    color: #7c3aed;
}

[data-theme="light"] .feed-sort:hover {
    color: #1a1a1a;
}

[data-theme="light"] .advanced-search-btn {
    color: #7c3aed;
}

[data-theme="light"] .advanced-search-btn:hover {
    color: #1a1a1a;
}

/* ---- THREAT ROWS ---- */
[data-theme="light"] .threat-row {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="light"] .threat-row:nth-child(even) {
    background: #fafafa;
}

[data-theme="light"] .threat-row:hover {
    background: #f0f0f0;
}

[data-theme="light"] .threat-row.active {
    background: #f0f0f0;
    border-color: #7c3aed;
}

[data-theme="light"] .threat-row-title {
    color: #1a1a1a;
}

[data-theme="light"] .threat-row-subtitle {
    color: #888888;
}

[data-theme="light"] .threat-row-tag {
    color: #0284c7;
}

[data-theme="light"] .threat-row-meta-det {
    color: #059669;
}

[data-theme="light"] .threat-row-meta-ioc {
    color: #ea580c;
}

[data-theme="light"] .threat-row-meta-actor {
    color: #7c3aed;
}

[data-theme="light"] .threat-row-date {
    color: #999999;
}

[data-theme="light"] .threat-id {
    color: #999999;
}

/* ---- SEVERITY BADGES ---- */
[data-theme="light"] .severity-badge.critical {
    background: rgba(225, 29, 72, 0.1);
    color: #e11d48;
}

[data-theme="light"] .severity-badge.high {
    background: rgba(234, 88, 12, 0.1);
    color: #ea580c;
}

[data-theme="light"] .severity-badge.medium {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

[data-theme="light"] .severity-badge.low {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

/* ---- STATUS BADGES ---- */
[data-theme="light"] .status-badge.active-status {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

[data-theme="light"] .status-badge.monitoring-status {
    background: rgba(234, 88, 12, 0.1);
    color: #ea580c;
}

[data-theme="light"] .status-badge.resolved-status {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

[data-theme="light"] .status-badge.active_exploitation-status {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

[data-theme="light"] .status-badge.research-status {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

[data-theme="light"] .status-badge.patched-status {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

[data-theme="light"] .status-badge.disrupted-status {
    background: rgba(202, 138, 4, 0.1);
    color: #ca8a04;
}

/* ---- MITRE STRIP (THREAT ROW) ---- */
[data-theme="light"] .mitre-strip-cell {
    background: #e0e0e0;
}

[data-theme="light"] .mitre-strip-cell.active {
    background: #7c3aed;
}

[data-theme="light"] .mitre-strip-label {
    color: #999999;
}

/* ---- DETAIL PANEL ---- */
[data-theme="light"] .detail-modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .detail-panel {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

[data-theme="light"] .dp-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .detail-id {
    color: #ea580c;
}

[data-theme="light"] .close-btn {
    color: #999999;
}

[data-theme="light"] .close-btn:hover {
    color: #1a1a1a;
    background: none;
}

[data-theme="light"] .share-btn {
    color: #999999;
}

[data-theme="light"] .share-btn:hover {
    color: #1a1a1a;
}

[data-theme="light"] .detail-title {
    color: #1a1a1a;
}

[data-theme="light"] .dp-date-row .dp-date {
    color: #999999;
}

[data-theme="light"] .dp-date-row .dp-actor {
    color: #7c3aed;
}

/* ---- DETAIL PANEL TABS ---- */
[data-theme="light"] .dp-tabs {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .dp-tab {
    color: #999999;
}

[data-theme="light"] .dp-tab:hover {
    color: #555555;
}

[data-theme="light"] .dp-tab.active {
    color: #1a1a1a;
    border-bottom-color: #7c3aed;
}

/* ---- DETAIL PANEL SECTIONS ---- */
[data-theme="light"] .dp-label {
    color: #999999;
}

[data-theme="light"] .detail-section-title {
    color: #999999;
}

[data-theme="light"] .detail-section-content {
    color: #555555;
}

[data-theme="light"] .desc-cve {
    color: #be123c;
    background: rgba(190, 18, 60, 0.06);
}

[data-theme="light"] .desc-technique {
    color: #6d28d9;
    background: rgba(109, 40, 217, 0.06);
}

[data-theme="light"] .desc-ip {
    color: #0369a1;
    background: rgba(3, 105, 161, 0.06);
}

[data-theme="light"] .desc-defang {
    color: #c2410c;
}

[data-theme="light"] .desc-hr {
    border-top-color: #d1d5db;
}

[data-theme="light"] .desc-h2 {
    color: #6d28d9;
}

[data-theme="light"] .desc-h3 {
    color: #7c3aed;
}

[data-theme="light"] .detail-section-content code {
    color: #047857;
    background: rgba(4, 120, 87, 0.06);
}

/* ---- META GRID (DETAIL PANEL) ---- */
[data-theme="light"] .detail-meta-item {
    background: #f5f5f5;
}

[data-theme="light"] .detail-meta-label {
    color: #999999;
}

[data-theme="light"] .detail-meta-value.cvss-val {
    color: #e11d48;
}

[data-theme="light"] .detail-meta-value.exploit-val {
    color: #e11d48;
}

[data-theme="light"] .detail-meta-value.coverage-val {
    color: #059669;
}

[data-theme="light"] .detail-meta-value.ioc-val {
    color: #ea580c;
}

/* ---- ATTRIBUTION / AFFECTED GRIDS ---- */
[data-theme="light"] .dp-affected-card { background: #f5f5f5; }
[data-theme="light"] .dp-affected-product { color: #1a1a1a; }
[data-theme="light"] .dp-affected-ver { color: #666; }
[data-theme="light"] .dp-sector-badge { background: #f0ecff; border-color: #c4b5fd66; }
[data-theme="light"] .dp-region-badge { background: #e8f7ff; border-color: #7dd3fc66; }
[data-theme="light"] .dp-ident-badge.cve { background: #fff0f0; color: #dc2626; border-color: #fda4af66; }
[data-theme="light"] .dp-ident-badge.cwe { background: #fff8f0; color: #d97706; border-color: #fdba7466; }
[data-theme="light"] .dp-ident-badge.alias { background: #f5f0ff; color: #7c3aed; border-color: #c4b5fd66; }
[data-theme="light"] .dp-cvss-cell { background: #f5f5f5; }
[data-theme="light"] .dp-cvss-vector-str { color: #999; }
[data-theme="light"] .dp-rem-list li { color: #555; }

[data-theme="light"] .dp-attr-cell {
    background: #f5f5f5;
}

[data-theme="light"] .dp-attr-label {
    color: #999999;
}

[data-theme="light"] .dp-attr-value {
    color: #1a1a1a;
}

[data-theme="light"] .dp-attr-value.actor {
    color: #7c3aed;
}

/* ---- KILL CHAIN (DETAIL PANEL) ---- */
[data-theme="light"] .dp-kc-bar {
    background: #e0e0e0;
}

[data-theme="light"] .dp-kc-bar.active {
    background: #7c3aed;
}

[data-theme="light"] .dp-kc-label {
    color: #999999;
}

[data-theme="light"] .dp-kc-bar.active + .dp-kc-label,
[data-theme="light"] .dp-kc-cell.active .dp-kc-label {
    color: #555555;
}

/* ---- MITRE CHAIN (ALTERNATE) ---- */
[data-theme="light"] .mitre-chain-box {
    background: #eeeeee;
}

[data-theme="light"] .mitre-chain-box.active {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid #7c3aed;
}

[data-theme="light"] .mitre-chain-box .count {
    color: #7c3aed;
}

/* ---- TECHNIQUE LIST ---- */
[data-theme="light"] .dp-technique-row:nth-child(odd) {
    background: #f5f5f5;
}

[data-theme="light"] .dp-technique-row:nth-child(even) {
    background: #fafafa;
}

[data-theme="light"] .dp-technique-id {
    color: #0284c7;
}

[data-theme="light"] .dp-technique-name {
    color: #555555;
}

/* ---- TIMELINE ---- */
[data-theme="light"] .dp-tl-date {
    color: #999999;
}

[data-theme="light"] .dp-tl-text {
    color: #555555;
}

[data-theme="light"] .dp-tl-nested { border-color: #d4d4d4; }
[data-theme="light"] .dp-tl-sub-item { background: #f0f0f0; }

/* ---- TAGS ---- */
[data-theme="light"] .dp-tag {
    color: #777777;
    background: #eeeeee;
}

/* ---- REFERENCES ---- */
[data-theme="light"] .dp-ref-row:nth-child(odd) {
    background: #f5f5f5;
}

[data-theme="light"] .dp-ref-row:nth-child(even) {
    background: #fafafa;
}

[data-theme="light"] .dp-ref-title {
    color: #0284c7;
}

[data-theme="light"] .dp-ref-title:hover {
    color: #1a1a1a;
}

/* ---- MUTED TEXT ---- */
[data-theme="light"] .dp-muted-text {
    color: #737373;
}

/* ---- COVERAGE BAR ---- */
[data-theme="light"] .dp-cov-bar-bg {
    background: #e0e0e0;
}

/* ---- DETECTIONS TAB ---- */
[data-theme="light"] .dp-bracket-btn {
    color: #999999;
}

[data-theme="light"] .dp-bracket-btn:hover {
    color: #555555;
}

[data-theme="light"] .dp-det-expanded {
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .dp-det-row-header {
    background: #f5f5f5;
}

[data-theme="light"] .dp-det-num {
    color: #7c3aed;
}

[data-theme="light"] .dp-det-title-expanded {
    color: #1a1a1a;
}

[data-theme="light"] .dp-det-lang-tabs {
    background: #fafafa;
}

[data-theme="light"] .dp-lang-tab {
    color: #999999;
}

[data-theme="light"] .dp-lang-tab:hover {
    color: #555555;
}

[data-theme="light"] .dp-lang-tab.active[data-lang="spl"] {
    color: #059669;
    border-bottom-color: #059669;
    background: rgba(5, 150, 105, 0.06);
}

[data-theme="light"] .dp-lang-tab.active[data-lang="kql"] {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
}

[data-theme="light"] .dp-lang-tab.active[data-lang="sigma"] {
    color: #0284c7;
    border-bottom-color: #0284c7;
    background: rgba(2, 132, 199, 0.06);
}

[data-theme="light"] .dp-det-code-wrap {
    background: #fafafa;
}

[data-theme="light"] .dp-code-lines {
    border-right: 1px solid #e0e0e0;
}

[data-theme="light"] .dp-code-lines span {
    color: #cccccc;
}

[data-theme="light"] .dp-code-content {
    color: #333333;
}

[data-theme="light"] .dp-det-mitre-footer {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

[data-theme="light"] .dp-det-mitre-label {
    color: #999999;
}

[data-theme="light"] .dp-det-mitre-id {
    color: #0284c7;
}

[data-theme="light"] .dp-det-mitre-name {
    color: #888888;
}

[data-theme="light"] .dp-det-collapsed {
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .dp-det-collapsed:nth-child(odd) {
    background: #ffffff;
}

[data-theme="light"] .dp-det-collapsed:nth-child(even) {
    background: #fafafa;
}

[data-theme="light"] .dp-det-collapsed:hover {
    background: #f0f0f0;
}

[data-theme="light"] .dp-det-title-collapsed {
    color: #1a1a1a;
}

[data-theme="light"] .dp-det-lang-spl {
    color: #059669;
}

[data-theme="light"] .dp-det-lang-kql {
    color: #7c3aed;
}

[data-theme="light"] .dp-det-lang-sigma {
    color: #0284c7;
}

/* ---- DETECTION QUERY BLOCKS ---- */
[data-theme="light"] .detection-query {
    background: #fafafa;
    color: #059669;
}

[data-theme="light"] .detection-query.spl {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, #ffffff 100%);
    color: #059669;
}

[data-theme="light"] .detection-query.kql {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, #ffffff 100%);
    color: #7c3aed;
}

[data-theme="light"] .detection-query.sigma {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, #ffffff 100%);
    color: #0284c7;
}

/* ---- DET CODE BLOCK (NEW) ---- */
[data-theme="light"] .det-code-block {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .det-code-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .det-code-lang.spl { color: #059669; }
[data-theme="light"] .det-code-lang.kql { color: #7c3aed; }
[data-theme="light"] .det-code-lang.sigma { color: #0284c7; }

[data-theme="light"] .det-code-content {
    color: #333333;
}

/* Syntax highlight tokens -- light theme */
[data-theme="light"] .spl-keyword { color: #059669; }
[data-theme="light"] .spl-pipe { color: #ea580c; }
[data-theme="light"] .spl-field { color: #0284c7; }
[data-theme="light"] .spl-string { color: #e11d48; }
[data-theme="light"] .spl-func { color: #7c3aed; }
[data-theme="light"] .spl-operator { color: #b45309; }

[data-theme="light"] .kql-keyword { color: #7c3aed; }
[data-theme="light"] .kql-pipe { color: #ea580c; }
[data-theme="light"] .kql-field { color: #0284c7; }
[data-theme="light"] .kql-string { color: #e11d48; }
[data-theme="light"] .kql-func { color: #059669; }
[data-theme="light"] .kql-operator { color: #b45309; }

[data-theme="light"] .sigma-key { color: #0284c7; }
[data-theme="light"] .sigma-value { color: #1a1a1a; }
[data-theme="light"] .sigma-string { color: #e11d48; }
[data-theme="light"] .sigma-tag { color: #059669; }

/* ---- SEARCH MODAL ---- */
[data-theme="light"] .search-modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .search-modal-content {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

[data-theme="light"] .search-modal-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .search-modal-input {
    background: #f5f5f5;
    border: 2px solid #d0d0d0;
    color: #1a1a1a;
}

[data-theme="light"] .search-modal-input:focus {
    border-color: #0284c7;
}

[data-theme="light"] .search-result-item {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .search-result-item:hover {
    border-color: #0284c7;
    background: #f0f0f0;
}

[data-theme="light"] .search-result-snippet mark {
    background: rgba(234, 88, 12, 0.15);
    color: #b45309;
}

[data-theme="light"] .search-result-count {
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

/* ---- SHORTCUTS MODAL ---- */
[data-theme="light"] .shortcuts-backdrop {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .shortcuts-content {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

[data-theme="light"] .shortcut-item kbd {
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
}

/* ---- COMPARISON PANEL ---- */
[data-theme="light"] .compare-panel {
    background: #ffffff;
    border-top: 2px solid #0284c7;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}

[data-theme="light"] .compare-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .compare-row {
    border-bottom: 1px solid #e8e8e8;
}

[data-theme="light"] .compare-header-row {
    background: #f5f5f5;
}

[data-theme="light"] .compare-diff {
    background: rgba(124, 58, 237, 0.06);
}

/* ---- TOAST ---- */
[data-theme="light"] .toast {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ---- SCROLLBAR ---- */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cccccc;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}

/* ---- MITRE TAGS ---- */
[data-theme="light"] .mitre-tag {
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.25);
    color: #0284c7;
}

/* ---- THREAT CARD ---- */
[data-theme="light"] .threat-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .threat-card:hover {
    border-color: #cccccc;
    background: #fafafa;
}

[data-theme="light"] .threat-card.active {
    border-color: #0284c7;
}

/* ---- THREAT TAG ---- */
[data-theme="light"] .threat-tag {
    background: #f0f0f0;
    color: #555555;
}

[data-theme="light"] .threat-tag.mitre {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

/* ---- DETECTION COUNT / VIEW COUNT ---- */
[data-theme="light"] .detection-count {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

[data-theme="light"] .view-count {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

/* ---- RESEARCH LAB TAG ---- */
[data-theme="light"] .research-lab-tag {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2), rgba(5, 150, 105, 0.1));
    color: #059669;
}

/* ---- CISA KEV WIDGET ---- */
[data-theme="light"] .cisa-kev-widget.overdue {
    background: rgba(225, 29, 72, 0.08);
}

[data-theme="light"] .cisa-kev-widget.urgent {
    background: rgba(225, 29, 72, 0.05);
}

[data-theme="light"] .cisa-kev-widget.warning {
    background: rgba(124, 58, 237, 0.06);
}

[data-theme="light"] .cisa-kev-widget.ok {
    background: rgba(5, 150, 105, 0.06);
}

[data-theme="light"] .cisa-badge {
    background: rgba(225, 29, 72, 0.1);
    color: #e11d48;
}

/* ---- SIMILAR THREATS ---- */
[data-theme="light"] .similar-threat-card {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .similar-threat-card:hover {
    border-color: #0284c7;
    background: #f0f0f0;
}

/* ---- SPARKLINE ---- */
[data-theme="light"] .sparkline-bar { background: #d4a017; }
[data-theme="light"] .sparkline-bar.critical { background: #e11d48; }
[data-theme="light"] .sparkline-bar.high { background: #ea580c; }
[data-theme="light"] .sparkline-bar.medium { background: #7c3aed; }
[data-theme="light"] .sparkline-bar.low { background: #059669; }

/* ---- GAPS SECTION ---- */
[data-theme="light"] .gaps-section {
    background: rgba(225, 29, 72, 0.04);
    border: 1px solid rgba(225, 29, 72, 0.15);
}

[data-theme="light"] .gap-badge {
    background: rgba(225, 29, 72, 0.08);
    border: 1px solid rgba(225, 29, 72, 0.2);
    color: #e11d48;
}

/* ---- HEATMAP ---- */
[data-theme="light"] .heatmap-empty {
    color: #aaaaaa;
}

/* ---- MOBILE HEADER ---- */
[data-theme="light"] .mobile-header {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mobile-menu-btn,
[data-theme="light"] .mobile-filter-btn {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #1a1a1a;
}

/* ---- SEARCH INPUT ---- */
[data-theme="light"] .search-input {
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    color: #1a1a1a;
}

[data-theme="light"] .search-input:focus {
    border-color: #cccccc;
    background: #ffffff;
}

/* ---- LINE NUMBERS / CODE BLOCKS ---- */
[data-theme="light"] .line-numbers {
    color: #cccccc;
    border-right: 1px solid #e0e0e0;
}

[data-theme="light"] .code-content {
    color: #333333;
}

/* ---- STAT CARD (ORIGINAL GRID) ---- */
[data-theme="light"] .stat-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .stat-card:hover {
    border-color: #cccccc;
}

/* ---- DETECTION ITEMS ---- */
[data-theme="light"] .detection-item {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .detection-copy-actions {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

[data-theme="light"] .copy-btn {
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    color: #555555;
}

[data-theme="light"] .copy-btn:hover {
    background: #e0e0e0;
    color: #1a1a1a;
}

[data-theme="light"] .copy-fmt-btn,
[data-theme="light"] .export-sigma-btn {
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
}

/* ---- DETAIL TABS (ALTERNATE) ---- */
[data-theme="light"] .detail-tabs {
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

[data-theme="light"] .detail-tab.active {
    color: #0284c7;
    border-bottom-color: #0284c7;
}

/* ---- META GRID (ALTERNATE) ---- */
[data-theme="light"] .meta-grid {
    background: #e0e0e0;
    border: 1px solid #e0e0e0;
}

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

/* ---- FILTER ELEMENTS ---- */
[data-theme="light"] .filter-select {
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    color: #1a1a1a;
}

[data-theme="light"] .sort-select {
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    color: #555555;
}

/* ---- VARIOUS BARS ---- */
[data-theme="light"] .sector-risk-bar {
    background: #f0f0f0;
}

[data-theme="light"] .ioc-overlap-bar {
    background: #f0f0f0;
}

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

/* ---- COVERAGE GAUGE RING ---- */
[data-theme="light"] .coverage-ring .ring-bg {
    stroke: #e0e0e0;
}

/* ---- STATS PAGE ---- */
[data-theme="light"] .stats-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .coverage-stat-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

/* ---- DONUT ITEMS ---- */
[data-theme="light"] .spl-donut {
    background: rgba(5, 150, 105, 0.06);
}

[data-theme="light"] .kql-donut {
    background: rgba(124, 58, 237, 0.06);
}

[data-theme="light"] .sigma-donut {
    background: rgba(2, 132, 199, 0.06);
}

/* ---- TAG CLOUD ---- */
[data-theme="light"] .tag-cloud-item {
    background: #f0f0f0;
    color: #555555;
}

[data-theme="light"] .tag-cloud-item:hover {
    background: #0284c7;
    color: white;
}

[data-theme="light"] .tag-cloud-item sup {
    color: #aaaaaa;
}

/* ---- COMPARE SELECTION OUTLINES ---- */
[data-theme="light"] .threat-row.compare-selected {
    outline: 2px solid #0284c7;
}

[data-theme="light"] .threat-row.keyboard-focused {
    outline: 2px solid #059669;
}

/* ---- TOUCH DEVICE LIGHT OVERRIDES ---- */
@media (hover: none) and (pointer: coarse) {
    [data-theme="light"] .threat-row:nth-child(even):hover {
        background: #fafafa;
    }

    [data-theme="light"] .threat-row:nth-child(odd):hover {
        background: #ffffff;
    }

    [data-theme="light"] .threat-row:active {
        background: #f0f0f0;
    }

    [data-theme="light"] .nav-item:active {
        background: #f0f0f0;
        color: #1a1a1a;
    }
}

/* ===== PAGE SCRIPT LIGHT THEME OVERRIDES ===== */

/* ===== STATISTICS PAGE LIGHT MODE (sp-*) ===== */
[data-theme="light"] .sp-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .sp-header-title {
    color: #1a1a1a;
}

[data-theme="light"] .sp-header-sub {
    color: #999999;
}

[data-theme="light"] .sp-header-ts {
    color: #999999;
}

[data-theme="light"] .sp-header-ver {
    color: #888888;
}

[data-theme="light"] .sp-hero-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .sp-hero-card:hover {
    border-color: #cccccc;
}

[data-theme="light"] .sp-hero-label {
    color: #999999;
}

[data-theme="light"] .sp-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .sp-card:hover {
    border-color: #cccccc;
}

[data-theme="light"] .sp-card-header {
    color: #999999;
}

[data-theme="light"] .sp-card-sub {
    color: #aaaaaa;
}

[data-theme="light"] .sp-empty {
    color: #aaaaaa;
}

[data-theme="light"] .sp-empty-state {
    color: #999999;
}

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

[data-theme="light"] .sp-bar-count {
    color: #1a1a1a;
}

[data-theme="light"] .sp-bar-pct {
    color: #999999;
}

[data-theme="light"] .sp-lang-bar {
    background: #f0f0f0;
}

[data-theme="light"] .sp-lang-name {
    color: #999999;
}

[data-theme="light"] .sp-lang-pct {
    color: #aaaaaa;
}

[data-theme="light"] .sp-mitre-row:nth-child(odd) {
    background: #f8f8f8;
}

[data-theme="light"] .sp-mitre-row:hover {
    background: #f0f0f0;
}

[data-theme="light"] .sp-mitre-rank {
    color: #aaaaaa;
}

[data-theme="light"] .sp-mitre-name {
    color: #555555;
}

[data-theme="light"] .sp-mitre-tactic {
    color: #999999;
}

[data-theme="light"] .sp-actor-row:nth-child(odd) {
    background: #f8f8f8;
}

[data-theme="light"] .sp-actor-row:hover {
    background: #f0f0f0;
}

[data-theme="light"] .sp-actor-rank {
    color: #aaaaaa;
}

[data-theme="light"] .sp-actor-name {
    color: #1a1a1a;
}

[data-theme="light"] .sp-actor-meta {
    color: #999999;
}

[data-theme="light"] .sp-actor-sep {
    color: #d0d0d0;
}

[data-theme="light"] .sp-chart-val {
    color: #999999;
}

[data-theme="light"] .sp-chart-label {
    color: #aaaaaa;
}

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

[data-theme="light"] .sp-ring-total {
    color: #1a1a1a;
}

[data-theme="light"] .sp-ring-label {
    color: #999999;
}

[data-theme="light"] .sp-ring-leg-item {
    color: #555555;
}

[data-theme="light"] .sp-ring-leg-val {
    color: #1a1a1a;
}

[data-theme="light"] .sp-tag-count {
    color: #aaaaaa;
}

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

[data-theme="light"] .sp-sparkline-text {
    color: #7c3aed;
}

/* ===== COVERAGE PAGE LIGHT MODE (cm-*) ===== */
[data-theme="light"] .cm-page-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-page-title {
    color: #1a1a1a;
}

[data-theme="light"] .cm-page-sub {
    color: #999999;
}

[data-theme="light"] .cm-hero-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-hero-label {
    color: #999999;
}

[data-theme="light"] .cm-hero-val {
    color: #1a1a1a;
}

[data-theme="light"] .cm-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-card-header {
    color: #999999;
}

[data-theme="light"] .cm-ring-bg {
    stroke: #e0e0e0;
}

[data-theme="light"] .cm-ring-inner text {
    fill: #1a1a1a;
}

[data-theme="light"] .cm-ring-label {
    fill: #999999;
}

[data-theme="light"] .cm-tactic-row {
    background: #f8f8f8;
}

[data-theme="light"] .cm-tactic-name {
    color: #1a1a1a;
}

[data-theme="light"] .cm-tactic-tech-count {
    color: #999999;
}

[data-theme="light"] .cm-tactic-sep {
    color: #d0d0d0;
}

[data-theme="light"] .cm-tech-pill {
    background: #f0f0f0;
}

[data-theme="light"] .cm-tech-id {
    color: #999999;
}

[data-theme="light"] .cm-tech-name {
    color: #aaaaaa;
}

[data-theme="light"] .cm-gap-card {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-gap-label {
    color: #999999;
}

[data-theme="light"] .cm-gap-title {
    color: #1a1a1a;
}

[data-theme="light"] .cm-gap-desc {
    color: #555555;
}

[data-theme="light"] .cm-gap-tag {
    color: #888888;
    background: #eeeeee;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-gap-tag.active {
    border-color: #999999;
    color: #555555;
}

[data-theme="light"] .cm-no-gaps {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
}

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

[data-theme="light"] .cm-footer-prompt {
    color: #999999;
}

[data-theme="light"] .cm-matrix-header {
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-matrix-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cm-tactic-header {
    border-bottom: 1px solid #e0e0e0;
}

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

[data-theme="light"] .cm-empty-state {
    color: #999999;
}

[data-theme="light"] .cm-section-title {
    color: #1a1a1a;
}

/* ===== ABOUT PAGE LIGHT MODE (abt-*) ===== */

/* ===== DAILY DEBRIEFS LIGHT MODE (db-*) ===== */
[data-theme="light"] .db-page-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .db-page-title {
    color: #1a1a1a;
}

[data-theme="light"] .db-page-sub {
    color: #999999;
}

[data-theme="light"] .db-tabs {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .db-tab {
    color: #999999;
}

[data-theme="light"] .db-tab:hover {
    color: #555555;
}

[data-theme="light"] .db-tab.active {
    color: #1a1a1a;
}

[data-theme="light"] .db-hero-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .db-hero-label {
    color: #999999;
}

[data-theme="light"] .db-hero-val {
    color: #1a1a1a;
}

[data-theme="light"] .db-filter-bar {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .db-filter-label {
    color: #999999;
}

[data-theme="light"] .db-filter-btn {
    color: #888888;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .db-filter-btn:hover {
    color: #555555;
    border-color: #cccccc;
}

[data-theme="light"] .db-filter-btn.active {
    color: #1a1a1a;
    background: #f0f0f0;
}

[data-theme="light"] .db-debrief-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .db-debrief-card:hover {
    border-color: #cccccc;
}

[data-theme="light"] .db-debrief-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .db-debrief-id {
    color: #999999;
}

[data-theme="light"] .db-debrief-title {
    color: #1a1a1a;
}

[data-theme="light"] .db-debrief-date {
    color: #999999;
}

[data-theme="light"] .db-debrief-desc {
    color: #555555;
}

[data-theme="light"] .db-debrief-meta-label {
    color: #999999;
}

[data-theme="light"] .db-debrief-meta-val {
    color: #555555;
}

[data-theme="light"] .db-val-total {
    color: #555555;
}

[data-theme="light"] .db-empty-state {
    color: #999999;
}

[data-theme="light"] .db-detail-overlay {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .db-detail-panel {
    background: #ffffff;
    border: 1px solid #d0d0d0;
}

[data-theme="light"] .db-detail-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .db-detail-id {
    color: #999999;
}

[data-theme="light"] .db-detail-title {
    color: #1a1a1a;
}

[data-theme="light"] .db-detail-date {
    color: #999999;
}

[data-theme="light"] .db-detail-desc {
    color: #555555;
}

[data-theme="light"] .db-detail-section-label {
    color: #999999;
}

[data-theme="light"] .db-detail-finding:nth-child(odd) {
    background: #f8f8f8;
}

[data-theme="light"] .db-detail-finding:nth-child(even) {
    background: #fafafa;
}

[data-theme="light"] .db-detail-finding:hover {
    background: #f0f0f0;
}

[data-theme="light"] .db-finding-title {
    color: #1a1a1a;
}

[data-theme="light"] .db-finding-desc {
    color: #555555;
}

[data-theme="light"] .db-finding-meta-label {
    color: #999999;
}

[data-theme="light"] .db-rec-item {
    border-bottom: 1px solid #eeeeee;
}

[data-theme="light"] .db-rec-title {
    color: #1a1a1a;
}

[data-theme="light"] .db-rec-desc {
    color: #555555;
}

[data-theme="light"] .db-close-btn {
    color: #999999;
}

[data-theme="light"] .db-close-btn:hover {
    color: #1a1a1a;
}

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

[data-theme="light"] .db-footer-prompt {
    color: #999999;
}

/* ===== CORRELATION PAGE LIGHT MODE (corr-*) ===== */
[data-theme="light"] .corr-page-header {
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

[data-theme="light"] .corr-page-title {
    color: #1a1a1a;
}

[data-theme="light"] .corr-page-sub {
    color: #999999;
}

[data-theme="light"] .corr-stats-row .corr-stat {
    color: #1a1a1a;
}

[data-theme="light"] .corr-stat-label {
    color: #999999;
}

[data-theme="light"] .corr-search-box {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-search-input {
    color: #1a1a1a;
    background: transparent;
}

[data-theme="light"] .corr-search-input::placeholder {
    color: #aaaaaa;
}

[data-theme="light"] .corr-filter-btn {
    border: 1px solid #e0e0e0;
    color: #888888;
}

[data-theme="light"] .corr-filter-btn:hover {
    border-color: #cccccc;
    color: #555555;
}

[data-theme="light"] .corr-filter-btn.active {
    background: #e8e8e8;
    color: #1a1a1a;
}

[data-theme="light"] .corr-search-results {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-search-results::-webkit-scrollbar-track {
    background: #fafafa;
}

[data-theme="light"] .corr-result-item {
    color: #999999;
}

[data-theme="light"] .corr-result-name {
    color: #1a1a1a;
}

[data-theme="light"] .corr-result-meta {
    color: #888888;
}

[data-theme="light"] .corr-result-item:hover {
    background: #f0f0f0;
}

[data-theme="light"] .corr-selected-threats {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-threat-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-threat-title {
    color: #1a1a1a;
}

[data-theme="light"] .corr-threat-meta {
    color: #999999;
}

[data-theme="light"] .corr-remove-btn {
    background: #e0e0e0;
}

[data-theme="light"] .corr-section-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-section-title {
    color: #555555;
}

[data-theme="light"] .corr-section-count {
    color: #999999;
}

[data-theme="light"] .corr-shared-label {
    color: #999999;
}

[data-theme="light"] .corr-matrix-container {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-matrix-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-matrix-title {
    color: #1a1a1a;
}

[data-theme="light"] .corr-col-header {
    border-right: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-col-header-inner {
    background: #f0f0f0;
}

[data-theme="light"] .corr-feature-row {
    border-bottom: 1px solid #eeeeee;
}

[data-theme="light"] .corr-feature-label {
    color: #555555;
}

[data-theme="light"] .corr-cell-label {
    color: #999999;
}

[data-theme="light"] .corr-cell-sub {
    color: #999999;
}

[data-theme="light"] .corr-empty-cell {
    color: #999999;
}

[data-theme="light"] .corr-ioc-tag {
    color: #555555;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-ioc-tag.shared {
    color: #1a1a1a;
}

[data-theme="light"] .corr-technique-tag {
    color: #555555;
    background: #f0f0f0;
}

[data-theme="light"] .corr-technique-tag.shared {
    color: #1a1a1a;
    background: #e0e0e0;
}

[data-theme="light"] .corr-timeline-container {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-timeline-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-insights-container {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-insights-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-insight {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-insight-title {
    color: #1a1a1a;
}

[data-theme="light"] .corr-insight-desc {
    color: #555555;
}

[data-theme="light"] .corr-insight-label {
    color: #999999;
}

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

[data-theme="light"] .corr-footer-prompt {
    color: #999999;
}

[data-theme="light"] .corr-empty-state {
    color: #999999;
}

[data-theme="light"] .corr-pair-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-pair-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .corr-pair-names {
    color: #1a1a1a;
}

[data-theme="light"] .corr-pair-sep {
    color: #cccccc;
}

[data-theme="light"] .corr-pair-vs {
    background: #e8e8e8;
    color: #555555;
}

[data-theme="light"] .corr-pair-stat-label {
    color: #999999;
}

[data-theme="light"] .corr-pair-detail-row {
    border-bottom: 1px solid #eeeeee;
}

[data-theme="light"] .corr-pair-detail-label {
    color: #888888;
}

[data-theme="light"] .corr-pair-detail-val {
    color: #555555;
}

[data-theme="light"] .corr-help-toggle {
    border: 1px solid #e0e0e0;
    color: #888888;
}

[data-theme="light"] .corr-help-toggle:hover {
    border-color: #cccccc;
    color: #555555;
}

[data-theme="light"] .corr-help-panel {
    background: #f0f0f0;
}

[data-theme="light"] .corr-help-text {
    color: #555555;
}

/* ===== CHANGELOG PAGE LIGHT MODE (cl-*) ===== */
[data-theme="light"] .cl-page-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-page-title {
    color: #1a1a1a;
}

[data-theme="light"] .cl-page-sub {
    color: #999999;
}

[data-theme="light"] .cl-filter-bar {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-filter-label {
    color: #999999;
}

[data-theme="light"] .cl-filter-btn {
    color: #888888;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-filter-btn:hover {
    color: #555555;
}

[data-theme="light"] .cl-filter-btn.active {
    color: #1a1a1a;
}

[data-theme="light"] .cl-entry {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-entry-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-entry-version {
    color: #1a1a1a;
}

[data-theme="light"] .cl-entry-date {
    color: #999999;
}

[data-theme="light"] .cl-change-item {
    color: #555555;
}

[data-theme="light"] .cl-change-item:nth-child(odd) {
    background: #fafafa;
}

[data-theme="light"] .cl-type-badge {
    background: #e8e8e8;
}

[data-theme="light"] .cl-change-desc {
    color: #555555;
}

[data-theme="light"] .cl-expand-btn {
    color: #999999;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-expand-btn:hover {
    color: #555555;
    border-color: #cccccc;
}

[data-theme="light"] .cl-details {
    background: #f8f8f8;
}

[data-theme="light"] .cl-details-label {
    color: #999999;
}

[data-theme="light"] .cl-details-text {
    color: #555555;
}

[data-theme="light"] .cl-stat-label {
    color: #999999;
}

[data-theme="light"] .cl-stat-val {
    color: #1a1a1a;
}

[data-theme="light"] .cl-timeline-line {
    border-right: 1.5px solid #cccccc;
    border-bottom: 1.5px solid #cccccc;
}

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

[data-theme="light"] .cl-footer-prompt {
    color: #999999;
}

[data-theme="light"] .cl-idea-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-idea-card-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .cl-idea-title {
    color: #1a1a1a;
}

[data-theme="light"] .cl-idea-desc {
    color: #555555;
}

[data-theme="light"] .cl-idea-meta {
    color: #999999;
}

[data-theme="light"] .cl-idea-empty {
    color: #999999;
}

/* ===== MCP PAGE LIGHT MODE (mcp-*) ===== */
[data-theme="light"] .mcp-page-header {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-page-title {
    color: #1a1a1a;
}

[data-theme="light"] .mcp-page-sub {
    color: #555555;
}

[data-theme="light"] .mcp-page-ts {
    color: #999999;
}

[data-theme="light"] .mcp-config-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-config-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-config-label {
    color: #999999;
}

[data-theme="light"] .mcp-config-tabs {
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-config-tab {
    color: #999999;
}

[data-theme="light"] .mcp-config-tab:hover {
    color: #555555;
}

[data-theme="light"] .mcp-config-tab.active {
    color: #1a1a1a;
}

[data-theme="light"] .mcp-config-body {
    background: #fafafa;
}

[data-theme="light"] .mcp-code-block {
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-code-content {
    color: #555555;
}

[data-theme="light"] .mcp-syn-brace,
[data-theme="light"] .mcp-syn-bracket,
[data-theme="light"] .mcp-syn-colon,
[data-theme="light"] .mcp-syn-comma {
    color: #999999;
}

[data-theme="light"] .mcp-syn-comment {
    color: #999999;
}

[data-theme="light"] .mcp-tools-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-tools-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-tools-label {
    color: #999999;
}

[data-theme="light"] .mcp-tool-item {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-tool-item:hover {
    border-color: #cccccc;
}

[data-theme="light"] .mcp-tool-name {
    color: #1a1a1a;
}

[data-theme="light"] .mcp-tool-desc {
    color: #555555;
}

[data-theme="light"] .mcp-tool-schema-label {
    color: #999999;
}

[data-theme="light"] .mcp-schema-viewer {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-schema-header {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-schema-title {
    color: #1a1a1a;
}

[data-theme="light"] .mcp-prop-row {
    border-bottom: 1px solid #f0f0f0;
}

[data-theme="light"] .mcp-prop-name {
    color: #1a1a1a;
}

[data-theme="light"] .mcp-prop-type {
    color: #888888;
    background: #e8e8e8;
}

[data-theme="light"] .mcp-prop-desc {
    color: #555555;
}

[data-theme="light"] .mcp-prop-req {
    color: #e11d48;
}

[data-theme="light"] .mcp-link {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .mcp-link:hover {
    border-color: #cccccc;
}

[data-theme="light"] .mcp-link-name {
    color: #1a1a1a;
}

[data-theme="light"] .mcp-link-url {
    color: #999999;
}

[data-theme="light"] .mcp-copy-btn {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    color: #555555;
}

[data-theme="light"] .mcp-copy-btn:hover {
    background: #e0e0e0;
}

[data-theme="light"] .mcp-empty-tool {
    color: #999999;
}

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

[data-theme="light"] .mcp-footer-prompt {
    color: #999999;
}

[data-theme="light"] .mcp-container {
    background: #f5f5f5;
}

/* ===== SIMULATIONS (sim-*) ===== */
.sim-platform-tabs {
    display: flex;
    background: #0e0e0e;
}

.sim-platform-tab {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: normal;
    color: #525252;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.sim-platform-tab:hover { color: #a0a0a0; }

.sim-platform-tab.active[data-platform="windows"] {
    color: #7dd3fc;
    font-weight: 500;
    border-bottom-color: #7dd3fc;
    background: #7dd3fc12;
}

.sim-platform-tab.active[data-platform="linux"] {
    color: #a8e6cf;
    font-weight: 500;
    border-bottom-color: #a8e6cf;
    background: #a8e6cf12;
}

.sim-platform-tab.active[data-platform="python"] {
    color: #fde68a;
    font-weight: 500;
    border-bottom-color: #fde68a;
    background: #fde68a12;
}

.sim-platform-tabs .dp-bracket-btn {
    margin-left: auto;
    padding: 10px 16px;
}

.sim-platform-content {
    display: none;
}

.sim-platform-content.active {
    display: block;
}

.sim-card {
    background: #111111;
    margin-bottom: 16px;
}

.sim-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

.sim-card-title {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
}

.sim-card-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
    margin-right: 8px;
}

.sim-card-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #888888;
    padding: 0 16px 12px;
    line-height: 1.5;
}

.sim-caution-note {
    background: #fda4af19;
    border-left: 3px solid #fda4af;
    color: #fda4af;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 12px 16px;
    margin: 0 16px 12px;
    line-height: 1.5;
}

.sim-requirements {
    padding: 0 16px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #888888;
}

.sim-requirements-title {
    color: #525252;
    margin-bottom: 6px;
    font-weight: 500;
}

.sim-requirements li {
    margin-bottom: 4px;
    margin-left: 16px;
    list-style-type: none;
}

.sim-requirements li::before {
    content: "- ";
    color: #525252;
}

.sim-code-block {
    background: #0a0a0a;
    max-height: 500px;
    overflow-y: auto;
}

.sim-code-block .dp-code-wrap {
    display: flex;
    padding: 16px 0;
}

.sim-code-block .dp-code-lines {
    display: flex;
    flex-direction: column;
    padding: 0 12px 0 16px;
    border-right: 1px solid #1e1e1e;
    user-select: none;
    flex-shrink: 0;
}

.sim-code-block .dp-code-lines span {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #3a3a3a;
    text-align: right;
    min-width: 24px;
}

.sim-code-block .dp-code-content {
    padding: 0 20px;
    flex: 1;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #e8e8e8;
    white-space: pre;
    word-break: break-word;
}

/* Step-based simulation blocks */
.sim-step-block {
    margin-bottom: 2px;
}

.sim-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #0f0f0f;
    border-top: 1px solid #1a1a1a;
}

.sim-step-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.sim-step-title {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #a0a0a0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim-step-desc {
    font-family: var(--font-sans);
    font-size: 11px;
    color: #666;
    padding: 6px 16px 8px;
    background: #0a0a0a;
    line-height: 1.5;
}

.sim-step-count {
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 2px;
}

.sim-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #0f0f0f;
    border-bottom: 1px solid #1a1a1a;
}

.sim-code-wrap {
    display: flex;
    padding: 16px 0;
}

.sim-code-lines {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    border-right: 1px solid #1e1e1e;
    user-select: none;
}

.sim-code-lines span {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #2a2a2a;
}

.sim-code-content {
    padding: 0 20px;
    flex: 1;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #e8e8e8;
    white-space: pre;
}

.sim-copy-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 8px;
}

.sim-mitre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
}

.sim-mitre-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    background: #c4b5fd19;
    color: #c4b5fd;
    padding: 2px 8px;
}

.sim-refs-section {
    padding: 16px;
    margin-top: 8px;
}

.sim-refs-section .dp-label {
    margin-bottom: 8px;
}

.sim-ref-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    font-size: 12px;
}

.sim-ref-type {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    white-space: nowrap;
}

.sim-ref-title {
    color: #888888;
    text-decoration: none;
    font-family: var(--font-sans);
}

.sim-ref-title:hover {
    color: #f0f0f0;
}

.sim-empty {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    padding: 32px;
    text-align: center;
}

.sim-tab-content {
    padding: 24px 32px;
}

/* ===== SIMULATIONS PAGE (sim-*) ===== */
.sim-page-container {
    padding: 24px 32px;
}

.sim-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.sim-page-stats {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #888888;
    margin-top: 4px;
}

/* Simulations page tabs */
.sim-page-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #222;
}

.sim-page-tab {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    padding: 10px 20px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 2px solid transparent;
    min-width: 44px;
    text-align: center;
}

.sim-page-tab:hover { color: #a0a0a0; }
.sim-page-tab.active { color: #c4b5fd; border-bottom-color: #c4b5fd; }

/* Correlation sections */
.sim-corr-section {
    margin-bottom: 32px;
}

.sim-corr-section .dp-label {
    margin-bottom: 16px;
}

.sim-corr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.sim-corr-card {
    background: #111;
    padding: 16px;
    border-left: 3px solid #c4b5fd;
    transition: background 0.15s;
}

.sim-corr-card:hover { background: #1a1a1a; }

.sim-corr-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sim-corr-tech-id {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}

.sim-corr-tech-name {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #a0a0a0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim-corr-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #c4b5fd;
    background: #c4b5fd19;
    padding: 2px 8px;
    flex-shrink: 0;
}

.sim-corr-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sim-corr-tactic {
    font-family: var(--font-mono);
    font-size: 11px;
}

.sim-corr-threat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sim-corr-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #7dd3fc;
    background: #7dd3fc0d;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.sim-corr-pill:hover { background: #7dd3fc1a; }

/* Attack chain similarity cards */
.sim-corr-chain-card {
    background: #111;
    padding: 16px;
    border-left: 3px solid #fda4af;
}

.sim-corr-chain-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sim-corr-chain-threat {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #e8e8e8;
    cursor: pointer;
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    transition: background 0.15s;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim-corr-chain-threat:hover { background: rgba(255,255,255,0.08); }

.sim-corr-chain-arrow {
    font-family: var(--font-mono);
    font-size: 14px;
    color: #525252;
    flex-shrink: 0;
}

.sim-corr-chain-techniques {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sim-corr-chain-count {
    font-family: var(--font-mono);
    font-size: 11px;
}

.sim-corr-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sim-corr-tech-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #c4b5fd;
    background: #c4b5fd0d;
    padding: 2px 8px;
}

/* Coverage section */
.sim-coverage-platforms {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 8px;
}

.sim-coverage-platform {
    padding: 16px;
    background: #111;
}

.sim-coverage-platform-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.sim-coverage-platform-name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.sim-coverage-platform-stats {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #666;
    margin-left: auto;
}

.sim-coverage-bar-track {
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
}

.sim-coverage-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Kill Chain Heatmap */
.sim-coverage-killchain {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.sim-coverage-kc-cell {
    padding: 14px;
    border: 1px solid #1a1a1a;
    transition: border-color 0.2s;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sim-coverage-kc-cell:hover { border-color: #333; }

.sim-coverage-kc-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #a0a0a0;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sim-coverage-kc-stats {
    font-family: var(--font-mono);
    font-size: 12px;
}

.sim-coverage-kc-tech {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    margin-top: 2px;
}

.sim-tactic-group {
    margin-bottom: 32px;
}

.sim-tactic-title {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222222;
}

.sim-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.sim-threat-card {
    background: #111111;
    padding: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.sim-threat-card:hover {
    background: #1a1a1a;
}

.sim-threat-card-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 8px;
    line-height: 1.4;
}

.sim-threat-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
}

.sim-threat-card-platforms {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sim-platform-icon {
    font-size: 14px;
}

/* ===== SIMULATIONS LIGHT MODE (sim-*) ===== */
[data-theme="light"] .sim-platform-tabs {
    background: #fafafa;
}

[data-theme="light"] .sim-platform-tab {
    color: #999999;
}

[data-theme="light"] .sim-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .sim-card-title {
    color: #1a1a1a;
}

[data-theme="light"] .sim-card-desc {
    color: #666666;
}

[data-theme="light"] .sim-caution-note {
    background: #fda4af12;
}

[data-theme="light"] .sim-requirements {
    color: #666666;
}

[data-theme="light"] .sim-code-block {
    background: #fafafa;
}

[data-theme="light"] .sim-code-lines {
    border-right: 1px solid #e0e0e0;
}

[data-theme="light"] .sim-code-lines span {
    color: #cccccc;
}

[data-theme="light"] .sim-code-content {
    color: #333333;
}

/* light-mode fix: the sim code BODY renders as .dp-code-content (not .sim-code-content),
   nested in .sim-code-block. The generic [data-theme=light] .dp-code-content rule loses the
   specificity tie to .sim-code-block .dp-code-content (#e8e8e8), leaving near-white text on
   the light-purple card. This (0,3,0) selector wins → readable green for un-highlighted code. */
[data-theme="light"] .sim-code-block .dp-code-content { color: var(--mint); }
[data-theme="light"] .sim-code-block .dp-code-lines span { color: #b9aecb; }

[data-theme="light"] .sim-mitre-tag {
    background: #c4b5fd22;
}

[data-theme="light"] .sim-ref-title {
    color: #666666;
}

[data-theme="light"] .sim-ref-title:hover {
    color: #1a1a1a;
}

[data-theme="light"] .sim-empty {
    color: #999999;
}

[data-theme="light"] .sim-threat-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .sim-threat-card:hover {
    background: #fafafa;
}

[data-theme="light"] .sim-threat-card-title {
    color: #1a1a1a;
}

[data-theme="light"] .sim-tactic-title {
    color: #999999;
    border-color: #e0e0e0;
}

[data-theme="light"] .sim-page-stats {
    color: #999999;
}


/* ====== SIMULATION LIBRARY (sl-*) ====== */

/* Layout */
.sl-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    overflow: hidden;
}
.sl-stats-bar {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.sl-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sl-stat-val {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.sl-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.sl-val-lavender { color: #c4b5fd; }
.sl-val-mint { color: #a8e6cf; }
.sl-val-peach { color: #fdba74; }
.sl-val-sky { color: #7dd3fc; }

.sl-page-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    gap: 0;
}
.sl-page-tab {
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.sl-page-tab:hover {
    color: var(--text-primary);
}
.sl-page-tab.active {
    color: #c4b5fd;
    border-bottom-color: #c4b5fd;
}

.sl-breadcrumb {
    padding: 8px 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
}
.sl-breadcrumb-item {
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
}
.sl-breadcrumb-item:hover {
    color: var(--text-primary);
}
.sl-breadcrumb-item.current {
    color: var(--text-primary);
    cursor: default;
}
.sl-breadcrumb-sep {
    color: var(--text-muted);
    margin: 0 2px;
}

.sl-body {
    flex: 1;
    overflow: hidden;
}
.sl-panels {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Filter Sidebar (Panel 1) */
.sl-filter-sidebar {
    width: 260px;
    min-width: 260px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background: var(--bg-surface);
    padding: 0;
}
.sl-filter-group {
    border-bottom: 1px solid var(--border-color);
}
.sl-filter-group-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    user-select: none;
    transition: background 0.2s;
}
.sl-filter-group-header:hover {
    background: var(--bg-hover);
}
.sl-filter-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.sl-filter-group.collapsed .sl-filter-chevron {
    transform: rotate(-90deg);
}
.sl-filter-group-body {
    padding: 4px 14px 10px;
    max-height: 200px;
    overflow-y: auto;
}
.sl-filter-group.collapsed .sl-filter-group-body {
    display: none;
}
.sl-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.sl-filter-item:hover {
    color: var(--text-primary);
}
.sl-filter-item.active {
    color: var(--text-primary);
}
.sl-filter-check {
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 9px;
}
.sl-filter-item.active .sl-filter-check {
    border-color: #c4b5fd;
    color: #c4b5fd;
}
.sl-filter-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
}
.sl-filter-count {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.sl-filter-search {
    width: 100%;
    padding: 5px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    margin-bottom: 6px;
    outline: none;
}
.sl-filter-search:focus {
    border-color: var(--border-active);
}
.sl-filter-search::placeholder {
    color: var(--text-muted);
}
.sl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 14px;
}
.sl-filter-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #c4b5fd19;
    color: #c4b5fd;
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: default;
}
.sl-filter-pill-x {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.sl-filter-pill-x:hover {
    opacity: 1;
}
.sl-filter-clear {
    padding: 4px 14px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}
.sl-filter-clear:hover {
    color: #fda4af;
}

/* Threat List (Panel 2) */
.sl-threat-panel {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
}
.sl-search-bar {
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}
.sl-search-input {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    outline: none;
}
.sl-search-input:focus {
    border-color: var(--border-active);
}
.sl-search-input::placeholder {
    color: var(--text-muted);
}
.sl-search-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.sl-sort-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--border-color);
}
.sl-sort-btn {
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.sl-sort-btn:hover {
    color: var(--text-secondary);
}
.sl-sort-btn.active {
    color: #c4b5fd;
    border-bottom-color: #c4b5fd;
}
.sl-threat-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.sl-threat-card {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    border-left: 3px solid transparent;
}
.sl-threat-card:hover {
    background: var(--bg-hover);
}
.sl-threat-card.selected {
    background: var(--bg-active);
    border-left-color: #c4b5fd;
}
.sl-threat-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
}
.sl-threat-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.sl-threat-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.sl-threat-sev {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    font-weight: 600;
}
.sl-threat-actor {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #fda4af;
}
.sl-threat-nation {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #7dd3fc;
}
.sl-threat-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 1px 6px;
}
.sl-threat-platforms {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.sl-platform-icon {
    font-size: 13px;
}
.sl-threat-sim-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #c4b5fd;
    background: #c4b5fd15;
    padding: 1px 6px;
}

/* Simulations List (Panel 3) */
.sl-sim-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.sl-sim-panel.visible {
    width: 360px;
    min-width: 360px;
}
.sl-sim-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
}
.sl-sim-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.sl-sim-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
}
.sl-sim-list {
    flex: 1;
    overflow-y: auto;
}
.sl-sim-platform-group {
    border-bottom: 1px solid var(--border-color);
}
.sl-sim-platform-label {
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.sl-sim-card {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}
.sl-sim-card:hover {
    background: var(--bg-hover);
}
.sl-sim-card.selected {
    background: var(--bg-active);
}
.sl-sim-title {
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}
.sl-sim-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sl-sim-caution {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 1px 5px;
    font-weight: 600;
    text-transform: uppercase;
}
.sl-sim-caution-critical {
    color: #fda4af;
    background: #fda4af19;
}
.sl-sim-caution-high {
    color: #fdba74;
    background: #fdba7419;
}
.sl-sim-caution-medium {
    color: #c4b5fd;
    background: #c4b5fd19;
}
.sl-sim-caution-low {
    color: #a8e6cf;
    background: #a8e6cf19;
}
.sl-sim-mitre-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.sl-sim-mitre-pill {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #c4b5fd;
    background: #c4b5fd12;
    padding: 1px 5px;
}
.sl-sim-author {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
}

/* Simulation Detail (Panel 4) */
.sl-detail-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.sl-detail-panel.visible {
    width: 500px;
    min-width: 500px;
}
.sl-detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.sl-detail-header {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
}
.sl-detail-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.sl-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
}
.sl-detail-section {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
}
.sl-detail-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Code Block */
.sl-code-block {
    background: #0a0a0a;
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.sl-code-header {
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.sl-code-copy {
    cursor: pointer;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    transition: color 0.2s;
}
.sl-code-copy:hover {
    color: #a8e6cf;
}
.sl-code-content {
    padding: 10px;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre;
}
.sl-code-line {
    display: flex;
}
.sl-code-line-num {
    width: 35px;
    text-align: right;
    padding-right: 10px;
    color: var(--text-muted);
    user-select: none;
    flex-shrink: 0;
}
.sl-code-line-text {
    flex: 1;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Requirements & References */
.sl-req-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sl-req-item {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    padding-left: 12px;
    position: relative;
}
.sl-req-item::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--text-muted);
}
.sl-ref-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sl-ref-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11px;
}
.sl-ref-type {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 1px 5px;
    flex-shrink: 0;
}
.sl-ref-link {
    color: #7dd3fc;
    text-decoration: none;
    font-family: var(--font-mono);
    word-break: break-all;
}
.sl-ref-link:hover {
    text-decoration: underline;
}
.sl-notes {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Correlation & Coverage (sl-corr-*, sl-cov-*) */
.sl-corr-section {
    padding: 16px 20px;
}
.sl-corr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}
.sl-corr-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 12px;
}
.sl-corr-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sl-corr-tech-id {
    font-family: var(--font-mono);
    font-size: 11px;
}
.sl-corr-tech-name {
    font-size: 12px;
    color: var(--text-primary);
}
.sl-corr-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
}
.sl-corr-tactic {
    font-family: var(--font-mono);
    font-size: 10px;
}
.sl-corr-threat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.sl-corr-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #fda4af;
    background: #fda4af12;
    padding: 1px 6px;
    cursor: pointer;
}
.sl-corr-pill:hover {
    background: #fda4af25;
}
.sl-corr-chain-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 12px;
}
.sl-corr-chain-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sl-corr-chain-threat {
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}
.sl-corr-chain-threat:hover {
    color: #c4b5fd;
}
.sl-corr-chain-arrow {
    color: var(--text-muted);
    font-size: 14px;
}
.sl-corr-chain-count {
    font-family: var(--font-mono);
    font-size: 11px;
}
.sl-corr-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.sl-corr-tech-pill {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #c4b5fd;
    background: #c4b5fd12;
    padding: 1px 5px;
}

/* Coverage */
.sl-cov-platforms {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sl-cov-platform {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sl-cov-platform-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.sl-cov-platform-name {
    font-family: var(--font-mono);
    font-weight: 600;
}
.sl-cov-platform-stats {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.sl-cov-bar-track {
    height: 6px;
    background: var(--bg-primary);
    width: 100%;
}
.sl-cov-bar-fill {
    height: 100%;
    transition: width 0.5s;
}
.sl-cov-killchain {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.sl-cov-kc-cell {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.2s;
}
.sl-cov-kc-name {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
}
.sl-cov-kc-stats {
    font-family: var(--font-mono);
    font-size: 11px;
}
.sl-cov-kc-tech {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
}

/* Utilities */
.sl-empty {
    padding: 40px 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
}
.sl-loading {
    padding: 40px 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    animation: sl-pulse 1.5s ease-in-out infinite;
}
@keyframes sl-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sl-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 12px 20px 0;
}

/* Syntax Highlighting */
.sl-hl-keyword { color: #c4b5fd; }
.sl-hl-string { color: #a8e6cf; }
.sl-hl-comment { color: #555555; font-style: italic; }
.sl-hl-variable { color: #fda4af; }
.sl-hl-operator { color: #fdba74; }
.sl-hl-builtin { color: #7dd3fc; }
.sl-hl-decorator { color: #fde68a; }

/* ====== SIMULATION LIBRARY LIGHT MODE (sl-*) ====== */
[data-theme="light"] .sl-filter-sidebar {
    background: #fafafa;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-filter-group {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-filter-group-header:hover {
    background: #f5f5f5;
}
[data-theme="light"] .sl-filter-check {
    border-color: #d4d4d4;
}
[data-theme="light"] .sl-filter-search {
    background: #ffffff;
    border-color: #e5e5e5;
    color: #1a1a1a;
}
[data-theme="light"] .sl-filter-pill {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}
[data-theme="light"] .sl-filter-item.active .sl-filter-check {
    border-color: #7c3aed;
    color: #7c3aed;
}
[data-theme="light"] .sl-stats-bar {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-page-tabs {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-page-tab.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}
[data-theme="light"] .sl-breadcrumb {
    background: #f5f5f5;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-threat-panel {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-search-bar {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-search-input {
    background: #ffffff;
    border-color: #e5e5e5;
    color: #1a1a1a;
}
[data-theme="light"] .sl-sort-bar {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-sort-btn.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}
[data-theme="light"] .sl-threat-card {
    border-bottom-color: #e5e5e5;
    border-left-color: transparent;
}
[data-theme="light"] .sl-threat-card:hover {
    background: #f5f5f5;
}
[data-theme="light"] .sl-threat-card.selected {
    background: #f0f0f0;
    border-left-color: #7c3aed;
}
[data-theme="light"] .sl-threat-title {
    color: #1a1a1a;
}
[data-theme="light"] .sl-threat-cat {
    background: #f0f0f0;
    color: #737373;
}
[data-theme="light"] .sl-threat-sim-count {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}
[data-theme="light"] .sl-sim-panel {
    background: #ffffff;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-sim-header {
    background: #f5f5f5;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-sim-platform-label {
    background: #fafafa;
    color: #737373;
}
[data-theme="light"] .sl-sim-platform-group {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-sim-card {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-sim-card:hover {
    background: #f5f5f5;
}
[data-theme="light"] .sl-sim-card.selected {
    background: #f0f0f0;
}
[data-theme="light"] .sl-sim-title {
    color: #1a1a1a;
}
[data-theme="light"] .sl-sim-mitre-pill {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}
[data-theme="light"] .sl-detail-panel {
    background: #ffffff;
}
[data-theme="light"] .sl-detail-header {
    background: #f5f5f5;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-detail-title {
    color: #1a1a1a;
}
[data-theme="light"] .sl-detail-section {
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-code-block {
    background: #f8f8f8;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-code-header {
    background: #f0f0f0;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-code-content {
    color: #1a1a1a;
}
[data-theme="light"] .sl-code-copy:hover {
    color: #059669;
}
[data-theme="light"] .sl-ref-link {
    color: #0284c7;
}
[data-theme="light"] .sl-notes {
    color: #525252;
}
[data-theme="light"] .sl-corr-card {
    background: #ffffff;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-corr-pill {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}
[data-theme="light"] .sl-corr-pill:hover {
    background: rgba(220, 38, 38, 0.12);
}
[data-theme="light"] .sl-corr-chain-card {
    background: #ffffff;
    border-color: #e5e5e5;
}
[data-theme="light"] .sl-corr-chain-threat:hover {
    color: #7c3aed;
}
[data-theme="light"] .sl-corr-tech-pill {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}
[data-theme="light"] .sl-cov-bar-track {
    background: #e5e5e5;
}
[data-theme="light"] .sl-empty {
    color: #999999;
}
[data-theme="light"] .sl-loading {
    color: #999999;
}

/* Syntax Highlighting — Light */
[data-theme="light"] .sl-hl-keyword { color: #7c3aed; }
[data-theme="light"] .sl-hl-string { color: #059669; }
[data-theme="light"] .sl-hl-comment { color: #9ca3af; }
[data-theme="light"] .sl-hl-variable { color: #dc2626; }
[data-theme="light"] .sl-hl-operator { color: #d97706; }
[data-theme="light"] .sl-hl-builtin { color: #0284c7; }
[data-theme="light"] .sl-hl-decorator { color: #b45309; }

/* ====== SIMULATION LIBRARY RESPONSIVE (sl-*) ====== */
@media (max-width: 768px) {
    .sl-container {
        height: auto;
        overflow: visible;
    }
    .sl-body {
        overflow: visible;
    }
    .sl-panels {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .sl-filter-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .sl-threat-panel {
        min-width: 0;
        border-right: none;
        overflow: visible;
    }
    .sl-threat-list {
        max-height: 60vh;
        overflow-y: auto;
    }
    .sl-sim-panel {
        border-right: none;
    }
    .sl-sim-panel.visible {
        width: 100%;
        min-width: 100%;
        max-height: 60vh;
        overflow-y: auto;
    }
    .sl-detail-panel.visible {
        width: 100%;
        min-width: 100%;
    }
    .sl-stats-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .sl-corr-grid {
        grid-template-columns: 1fr;
    }
    .sl-cov-killchain {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .sl-stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .sl-threat-meta {
        gap: 4px;
    }
    .sl-detail-panel.visible {
        width: 100%;
        min-width: 100%;
    }
    .sl-page-tab {
        padding: 8px 10px;
        font-size: 11px;
    }
    .sl-cov-killchain {
        grid-template-columns: 1fr;
    }
}


/* ===== TRANSCRIPT (tx-*) ===== */

.tx-header {
    padding: 16px 0;
    border-bottom: 1px solid #1e1e1e;
    margin-bottom: 16px;
}

.tx-header-title {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tx-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tx-meta-item {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
}

.tx-score-badge {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border: 1px solid;
}

.tx-status-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tx-header-timestamps {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    margin-top: 8px;
}

.tx-section {
    margin-bottom: 20px;
}

/* Participants strip */
.tx-participants-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tx-participant {
    background: #111111;
    border-left: 3px solid;
    padding: 10px 14px;
    min-width: 120px;
    flex: 1;
}

.tx-participant-name {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tx-participant-role {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    margin-bottom: 2px;
}

.tx-participant-msgs {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
}

/* Phase timeline */
.tx-phase-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    margin-top: 8px;
    padding-bottom: 4px;
}

.tx-phase-block {
    min-width: 100px;
    flex: 1;
    text-align: center;
}

.tx-phase-bar {
    height: 6px;
    width: 100%;
    margin-bottom: 8px;
}

.tx-phase-name {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tx-phase-agent {
    font-size: 10px;
}

.tx-phase-duration {
    font-size: 10px;
}

.tx-phase-status {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
}

.tx-phase-connector {
    width: 16px;
    min-width: 16px;
    border-top: 2px dashed #333333;
    margin-top: 3px;
    align-self: flex-start;
}

/* Signal log */
.tx-signal-log {
    background: #0e0e0e;
    padding: 12px;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.tx-signal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
}

.tx-signal-row:hover {
    background: #111111;
}

.tx-signal-seq {
    color: #525252;
    min-width: 20px;
}

.tx-signal-from,
.tx-signal-to {
    font-weight: 500;
    min-width: 70px;
}

.tx-signal-arrow {
    color: #525252;
}

.tx-signal-name {
    color: var(--text-primary);
    flex: 1;
}

.tx-signal-time {
    font-size: 10px;
    min-width: 50px;
    text-align: right;
}

/* Message feed */
.tx-message-feed {
    margin-top: 8px;
}

.tx-message-entry {
    border-left: 2px solid #1e1e1e;
    margin-bottom: 2px;
}

.tx-message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
}

.tx-message-header:hover {
    background: #111111;
}

.tx-msg-seq {
    color: #525252;
    min-width: 30px;
}

.tx-msg-agent {
    font-weight: 600;
    min-width: 80px;
}

.tx-msg-phase {
    font-size: 11px;
}

.tx-msg-signal {
    font-size: 11px;
    color: #fde68a;
    padding: 1px 6px;
    background: rgba(253, 230, 138, 0.1);
}

.tx-msg-toggle {
    margin-left: auto;
    color: #525252;
    font-size: 11px;
}

.tx-message-body {
    padding: 8px 12px 12px 42px;
}

.tx-msg-content {
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 6px;
}

.tx-msg-meta {
    display: flex;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Summary grid */
.tx-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 8px;
    background: #1a1a1a;
}

.tx-summary-cell {
    background: #111111;
    padding: 12px;
    text-align: center;
}

.tx-summary-value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.tx-summary-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ===== TRANSCRIPT LIGHT MODE (tx-*) ===== */

[data-theme="light"] .tx-header {
    border-bottom-color: #e0e0e0;
}

[data-theme="light"] .tx-participant {
    background: #fafafa;
    border-left-width: 3px;
}

[data-theme="light"] .tx-participant-msgs {
    color: #999999;
}

[data-theme="light"] .tx-phase-connector {
    border-top-color: #d0d0d0;
}

[data-theme="light"] .tx-signal-log {
    background: #fafafa;
}

[data-theme="light"] .tx-signal-row:hover {
    background: #f0f0f0;
}

[data-theme="light"] .tx-signal-seq {
    color: #999999;
}

[data-theme="light"] .tx-signal-arrow {
    color: #999999;
}

[data-theme="light"] .tx-message-entry {
    border-left-color: #e0e0e0;
}

[data-theme="light"] .tx-message-header:hover {
    background: #fafafa;
}

[data-theme="light"] .tx-msg-seq {
    color: #999999;
}

[data-theme="light"] .tx-msg-toggle {
    color: #999999;
}

[data-theme="light"] .tx-msg-signal {
    background: rgba(253, 230, 138, 0.2);
}

[data-theme="light"] .tx-summary-grid {
    background: #e0e0e0;
}

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

/* ===== 3-FLAVOR DETECTION STATES ===== */
.dp-code-unavailable {
    color: #333333;
    font-style: italic;
    padding: 24px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.8;
    white-space: pre;
}
.dp-lang-dim {
    opacity: 0.3;
}
[data-theme="light"] .dp-code-unavailable {
    color: #cccccc;
}

/* ===== TIER-AWARE LOCK STATE (Wave 0 UX follow-up) ===== */
.dp-tier-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 20px;
    background: rgba(196, 181, 253, 0.04);
    border: 1px dashed #2a2a2a;
    font-family: var(--font-mono);
    color: #a0a0a0;
    text-align: center;
}
.dp-lock-icon {
    font-size: 28px;
    opacity: 0.7;
    line-height: 1;
}
.dp-lock-msg {
    font-size: 13px;
    line-height: 1.6;
    max-width: 420px;
    color: #c0c0c0;
}
.dp-lock-actions {
    margin-top: 6px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.dp-lock-cta {
    color: #c4b5fd;
    text-decoration: none;
    font-size: 12px;
    border: 1px solid rgba(196, 181, 253, 0.4);
    padding: 6px 14px;
    transition: border-color 0.15s, background 0.15s;
}
.dp-lock-cta:hover {
    border-color: #c4b5fd;
    background: rgba(196, 181, 253, 0.08);
}
[data-theme="light"] .dp-tier-lock {
    background: #fafafa;
    border-color: #e5e5e5;
    color: #525252;
}
[data-theme="light"] .dp-lock-msg { color: #404040; }
[data-theme="light"] .dp-lock-cta {
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.4);
}
[data-theme="light"] .dp-lock-cta:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
}

.tl-lock-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #c4b5fd;
    background: rgba(196, 181, 253, 0.08);
    border: 1px solid rgba(196, 181, 253, 0.2);
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: help;
}
/* When the tier lock lives inside another framed card (e.g. .sp-card on the
   statistics page), drop its own frame so the page doesn't show a card-in-a-card. */
.sp-card .dp-tier-lock {
    border: none;
    background: transparent;
    padding: 20px 8px;
}
[data-theme="light"] .tl-lock-chip {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.2);
}

/* ===== AUTH: Locked Nav Items ===== */
.nav-locked {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}
.nav-tier-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    margin-left: 6px;
}
[data-theme="light"] .nav-locked {
    opacity: 0.45;
}

/* ===== AUTH: Detail Panel Tab Locked ===== */
.dp-tab-locked {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
}
.dp-tab-locked::after {
    content: '';
}

/* ===== AUTH: Sidebar User Info ===== */
.user-info {
    padding: 8px 16px;
    border-top: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
}
.user-email {
    color: #737373;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    text-decoration: none;
    cursor: pointer;
}
.user-email:hover {
    color: #c4b5fd;
}
.user-tier {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    font-family: var(--font-mono);
}
.tier-blue { color: #7dd3fc; }
.tier-red { color: #fda4af; }
.tier-purple { color: #c4b5fd; }
.tier-free { color: #525252; }
.nav-logout-btn {
    background: none;
    border: none;
    color: #525252;
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
.nav-logout-btn:hover {
    color: #fda4af;
}
[data-theme="light"] .user-info {
    border-top-color: #e5e5e5;
}
[data-theme="light"] .user-email {
    color: #737373;
}
[data-theme="light"] .user-email:hover {
    color: #7c3aed;
}
[data-theme="light"] .nav-logout-btn {
    color: #a3a3a3;
}
[data-theme="light"] .nav-logout-btn:hover {
    color: #e11d48;
}

/* Auth Buttons (sidebar) */
.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid #1a1a1a;
}
.nav-auth-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.nav-auth-login {
    background: transparent;
    border: 1px solid #333;
    color: #737373;
}
.nav-auth-login:hover {
    color: #a3a3a3;
    border-color: #525252;
}
.nav-auth-signup {
    background: #c4b5fd;
    border: 1px solid #c4b5fd;
    color: #0a0a0a;
}
.nav-auth-signup:hover {
    background: #d4c8fe;
    border-color: #d4c8fe;
}
[data-theme="light"] .auth-buttons {
    border-top-color: #e5e5e5;
}
[data-theme="light"] .nav-auth-login {
    border-color: #d4d4d4;
    color: #737373;
}
[data-theme="light"] .nav-auth-login:hover {
    color: #525252;
    border-color: #a3a3a3;
}
[data-theme="light"] .nav-auth-signup {
    background: #c4b5fd;
    border-color: #c4b5fd;
    color: #1a1a1a;
}
[data-theme="light"] .nav-auth-signup:hover {
    background: #b4a3fc;
    border-color: #b4a3fc;
}

/* ===== Unauth sidebar footer: blue "ads active" banner + theme + login/signup ===== */
.auth-buttons { align-items: stretch; }
.unauth-notice {
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #60a5fa;
    text-align: center;
    padding: 2px 0 6px;
}
[data-theme="light"] .unauth-notice { color: #2563eb; }
.unauth-row { display: flex; align-items: center; gap: 8px; }
.unauth-row .sb-foot-theme { flex: none; }
.unauth-row .nav-auth-login {
    flex: 1 1 auto;
    width: auto;
    border-radius: var(--rad-sm, 3px);
}

/* ===== Unauth-only ads (injected by adsense-gate.js) ===== */
.tl-ad {
    display: block;
    margin: 22px auto;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
}
.tl-ad ins { display: block; }
.tp-main .tl-ad { margin: 20px 0; }
.article-content .tl-ad { margin: 28px 0; }

/* ===== AUTH: Upgrade Gate Page ===== */
.upgrade-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 24px;
    text-align: center;
    font-family: var(--font-mono);
}
.upgrade-gate-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}
.upgrade-gate-title {
    font-size: 20px;
    color: #e5e5e5;
    margin-bottom: 8px;
    font-weight: 600;
}
.upgrade-gate-tier {
    font-size: 14px;
    margin-bottom: 24px;
}
.upgrade-gate-desc {
    color: #737373;
    font-size: 13px;
    max-width: 400px;
    line-height: 1.6;
    margin-bottom: 32px;
}
.upgrade-gate-cta {
    display: inline-block;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #c4b5fd;
    color: #c4b5fd;
    font-family: var(--font-mono);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}
.upgrade-gate-cta:hover {
    background: rgba(196, 181, 253, 0.1);
}
[data-theme="light"] .upgrade-gate-title {
    color: #171717;
}
[data-theme="light"] .upgrade-gate-desc {
    color: #737373;
}
[data-theme="light"] .upgrade-gate-cta {
    border-color: #7c3aed;
    color: #7c3aed;
}
[data-theme="light"] .upgrade-gate-cta:hover {
    background: rgba(124, 58, 237, 0.08);
}

/* ===== AUTH: Email Verification Banner ===== */
.verify-notice {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #fdba74;
    display: flex;
    align-items: center;
    gap: 8px;
}
.verify-notice-btn {
    background: none;
    border: 1px solid #fdba74;
    color: #fdba74;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    margin-left: auto;
}
.verify-notice-btn:hover {
    background: rgba(253, 186, 116, 0.1);
}
[data-theme="light"] .verify-notice {
    background: #fef3c7;
    border-bottom-color: #fcd34d;
    color: #92400e;
}
[data-theme="light"] .verify-notice-btn {
    border-color: #92400e;
    color: #92400e;
}

/* ===== ADMIN DASHBOARD (adm-*) ===== */

.adm-container {
    padding: 0 24px 40px;
    max-width: 1200px;
}

.adm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 16px;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 16px;
}

.adm-header-left { display: flex; align-items: baseline; gap: 12px; }

.adm-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: #fda4af;
}

.adm-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #525252;
}

.adm-user {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #737373;
}

/* Stats strip */
.adm-stats-strip {
    display: flex;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.adm-stat-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.adm-stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #e5e5e5;
}

.adm-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #525252;
    text-transform: uppercase;
}

/* Tabs */
.adm-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 16px;
    overflow-x: auto;
    flex-shrink: 0;
}

.adm-tab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #737373;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.adm-tab:hover { color: #a3a3a3; }

.adm-tab.active {
    color: #fda4af;
    border-bottom-color: #fda4af;
}

/* Content area */
.adm-content { min-height: 300px; }

.adm-loading, .adm-empty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #525252;
    padding: 40px 0;
    text-align: center;
}

/* Search input */
.adm-user-search { margin-bottom: 12px; }

.adm-search-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: #0e0e0e;
    border: 1px solid #1a1a1a;
    color: #e5e5e5;
    padding: 8px 12px;
    width: 100%;
    max-width: 400px;
    outline: none;
}

.adm-search-input:focus { border-color: #333333; }

/* Table layout */
.adm-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.adm-table-header {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #525252;
    text-transform: uppercase;
}

/* User table columns */
.adm-user-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #111111;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #d4d4d4;
    cursor: pointer;
    transition: background 0.1s;
}

.adm-user-row:nth-child(4n+1) { background: #0e0e0e; }
.adm-user-row:nth-child(4n+3) { background: #111111; }
.adm-user-row:hover { background: #171717; }
.adm-user-row.adm-row-expanded { background: #171717; border-left: 2px solid #fda4af; }

.adm-user-col { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user-email { flex: 3; min-width: 160px; }
.adm-user-tier { flex: 1; min-width: 70px; }
.adm-user-verified { flex: 0.5; min-width: 40px; text-align: center; }
.adm-user-status { flex: 0.8; min-width: 60px; }
.adm-user-views { flex: 0.5; min-width: 40px; text-align: right; }
.adm-user-lib { flex: 0.5; min-width: 40px; text-align: center; }
.adm-user-active { flex: 1; min-width: 70px; }
.adm-user-created { flex: 1; min-width: 70px; }
.adm-user-actions { flex: 1; min-width: 80px; text-align: right; }

.adm-verified { color: #a8e6cf; }
.adm-unverified { color: #fda4af; }
.adm-admin-badge { color: #fda4af; font-size: 10px; }
.adm-status-active { color: #a8e6cf; }
.adm-status-suspended { color: #fda4af; }
.adm-lib-badge { color: #c4b5fd; font-size: 10px; }

.adm-tier-select {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: transparent;
    border: 1px solid #333333;
    padding: 2px 4px;
    cursor: pointer;
    outline: none;
}

.adm-tier-select option {
    background: #0a0a0a;
    color: #e5e5e5;
}

/* Action buttons */
.adm-action-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: transparent;
    border: 1px solid #333333;
    color: #a3a3a3;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.adm-action-btn:hover {
    border-color: #737373;
    color: #e5e5e5;
}

.adm-suspend-btn:hover { border-color: #fda4af; color: #fda4af; }
.adm-activate-btn:hover { border-color: #a8e6cf; color: #a8e6cf; }
.adm-revoke-btn:hover { border-color: #fdba74; color: #fdba74; }

/* Expandable user detail panel */
.adm-user-detail {
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
    padding: 0;
}

.adm-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
}

.adm-detail-section {
    background: #111111;
    padding: 12px;
}

.adm-detail-wide { grid-column: 1 / -1; }

.adm-detail-timeline {
    max-height: 300px;
    overflow-y: auto;
}

.adm-timeline-event {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a3a3a3;
}

.adm-activity-icon { font-size: 8px; flex-shrink: 0; }
.adm-timeline-time { color: #525252; min-width: 60px; font-size: 10px; }
.adm-timeline-type { color: #737373; min-width: 100px; }
.adm-timeline-target { color: #a3a3a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adm-engagement-big {
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    color: #fda4af;
    margin-bottom: 8px;
}

.adm-engagement-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.adm-eng-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #525252;
    background: #1a1a1a;
    padding: 2px 6px;
}

.adm-detail-lib, .adm-detail-sessions {
    max-height: 200px;
    overflow-y: auto;
}

.adm-lib-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a3a3a3;
    padding: 2px 0;
}

.adm-lib-type { color: #c4b5fd; }

.adm-detail-session {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a3a3a3;
    padding: 3px 0;
}

/* Admin notes */
.adm-notes-list { margin-bottom: 8px; }

.adm-note-item {
    padding: 6px 0;
    border-bottom: 1px solid #1a1a1a;
}

.adm-note-admin {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #c4b5fd;
}

.adm-note-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #525252;
    margin-left: 8px;
}

.adm-note-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #d4d4d4;
    margin-top: 2px;
}

.adm-note-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.adm-note-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: #0a0a0a;
    border: 1px solid #333333;
    color: #e5e5e5;
    padding: 4px 8px;
    flex: 1;
    outline: none;
}

.adm-note-input:focus { border-color: #525252; }
.adm-note-btn:hover { border-color: #c4b5fd; color: #c4b5fd; }

/* Session table columns */
.adm-session-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #111111;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #d4d4d4;
}

.adm-session-row:nth-child(odd) { background: #0e0e0e; }
.adm-session-row:nth-child(even) { background: #111111; }

.adm-session-col { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-session-user { flex: 2.5; min-width: 150px; }
.adm-session-tier { flex: 0.7; min-width: 50px; }
.adm-session-ip { flex: 1.2; min-width: 100px; }
.adm-session-country { flex: 0.7; min-width: 50px; }
.adm-session-device { flex: 0.7; min-width: 60px; }
.adm-session-created { flex: 1.5; min-width: 100px; }
.adm-session-actions { flex: 0.8; min-width: 60px; text-align: right; }

/* Activity feed */
.adm-activity-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.adm-filter-select {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: #0e0e0e;
    border: 1px solid #333333;
    color: #e5e5e5;
    padding: 4px 8px;
    outline: none;
}

.adm-filter-select option { background: #0a0a0a; color: #e5e5e5; }

.adm-activity-feed {
    max-height: 600px;
    overflow-y: auto;
}

.adm-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #111111;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a3a3a3;
}

.adm-activity-row:nth-child(odd) { background: #0e0e0e; }
.adm-activity-row:nth-child(even) { background: #111111; }

.adm-activity-time { color: #525252; min-width: 60px; font-size: 10px; }
.adm-activity-user { color: #7dd3fc; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-activity-type { min-width: 120px; color: #737373; }
.adm-activity-target { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-activity-geo { color: #525252; min-width: 30px; text-align: right; }

.adm-activity-more { padding: 12px 0; text-align: center; }

/* Waitlist columns */
.adm-wl-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #111111;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #d4d4d4;
}

.adm-wl-row:nth-child(odd) { background: #0e0e0e; }
.adm-wl-row:nth-child(even) { background: #111111; }

.adm-wl-col { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-wl-email { flex: 3; min-width: 200px; }
.adm-wl-source { flex: 1; min-width: 80px; }
.adm-wl-status { flex: 1; min-width: 80px; }
.adm-wl-date { flex: 2; min-width: 140px; }

.adm-converted { color: #a8e6cf; }
.adm-pending { color: #fdba74; }

/* Pagination */
.adm-pagination {
    padding: 12px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #525252;
}

/* Analytics grid */
.adm-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.adm-analytics-wide { grid-column: 1 / -1; }

.adm-analytics-section {
    background: #111111;
    padding: 16px;
}

.adm-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #525252;
    margin-bottom: 12px;
}

.adm-muted { color: #525252; font-size: 11px; }

/* Bar charts */
.adm-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.adm-bar-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; min-width: 80px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bar-track { flex: 1; height: 14px; background: #1a1a1a; }
.adm-bar-fill { height: 100%; min-width: 2px; transition: width 0.3s; }
.adm-bar-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #a3a3a3; width: 40px; text-align: right; }

/* DAU sparkline */
.adm-sparkline {
    width: 100%;
    height: 60px;
}

/* Hourly heatstrip */
.adm-heatstrip {
    display: flex;
    gap: 2px;
}

.adm-heat-cell {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #525252;
}

/* Power users */
.adm-pwr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.adm-pwr-email {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #a3a3a3;
    min-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Conversion funnel */
.adm-funnel { display: flex; flex-direction: column; gap: 4px; }

.adm-funnel-step {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.adm-funnel-bar {
    height: 24px;
    background: #c4b5fd;
    opacity: 0.3;
    transition: width 0.3s;
}

.adm-funnel-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a3a3a3;
    min-width: 80px;
}

.adm-funnel-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #e5e5e5;
    font-weight: 600;
}

.adm-funnel-rate {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #a8e6cf;
}

/* Content leaderboard */
.adm-leaderboard { width: 100%; }

.adm-lb-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #525252;
    text-transform: uppercase;
    border-bottom: 1px solid #1a1a1a;
}

.adm-lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    border-bottom: 1px solid #111111;
}

.adm-lb-row:nth-child(odd) { background: #0e0e0e; }
.adm-lb-row:nth-child(even) { background: #111111; }

.adm-lb-rank { color: #525252; width: 24px; }
.adm-lb-id { width: 120px; flex-shrink: 0; }
.adm-lb-title { flex: 1; color: #a3a3a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-lb-views { color: #7dd3fc; width: 50px; text-align: right; }
.adm-lb-copies { color: #a8e6cf; width: 50px; text-align: right; }
.adm-lb-saves { color: #c4b5fd; width: 50px; text-align: right; }
.adm-lb-likes { color: #fda4af; width: 50px; text-align: right; }
.adm-cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.adm-cv-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3, #737373); margin: 0 0 6px; letter-spacing: .03em; }
@media (max-width: 720px) { .adm-cv-grid { grid-template-columns: 1fr; } }

.adm-sort-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: transparent;
    border: 1px solid #333333;
    color: #525252;
    padding: 2px 6px;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.15s;
}

.adm-sort-btn:hover { border-color: #737373; color: #a3a3a3; }

/* Daily views chart */
.adm-daily-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding-top: 8px;
}

.adm-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.adm-chart-bar {
    width: 100%;
    background: #c4b5fd;
    min-height: 2px;
    transition: height 0.3s;
}

.adm-chart-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #525252;
    margin-top: 4px;
    transform: rotate(-45deg);
    white-space: nowrap;
}

/* System tab */
.adm-platform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.adm-platform-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.adm-email-list { max-height: 300px; overflow-y: auto; }

.adm-email-row {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a3a3a3;
    border-bottom: 1px solid #111111;
}

.adm-email-time { color: #525252; min-width: 60px; font-size: 10px; }
.adm-email-user { color: #7dd3fc; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-email-type { color: #737373; }
.adm-email-geo { color: #525252; }

/* ===== ADMIN DASHBOARD LIGHT MODE (adm-*) ===== */
[data-theme="light"] .adm-header { border-bottom-color: #e5e5e5; }
[data-theme="light"] .adm-stats-strip { border-bottom-color: #e5e5e5; }
[data-theme="light"] .adm-stat-val { color: #171717; }
[data-theme="light"] .adm-tabs { border-bottom-color: #e5e5e5; }
[data-theme="light"] .adm-tab { color: #a3a3a3; }
[data-theme="light"] .adm-tab.active { color: #be123c; border-bottom-color: #be123c; }
[data-theme="light"] .adm-table-header { border-bottom-color: #e5e5e5; color: #a3a3a3; }
[data-theme="light"] .adm-user-row,
[data-theme="light"] .adm-session-row,
[data-theme="light"] .adm-wl-row,
[data-theme="light"] .adm-activity-row,
[data-theme="light"] .adm-lb-row { border-bottom-color: #e5e5e5; color: #374151; }
[data-theme="light"] .adm-user-row:nth-child(4n+1),
[data-theme="light"] .adm-session-row:nth-child(odd),
[data-theme="light"] .adm-wl-row:nth-child(odd),
[data-theme="light"] .adm-activity-row:nth-child(odd),
[data-theme="light"] .adm-lb-row:nth-child(odd) { background: #fafafa; }
[data-theme="light"] .adm-user-row:nth-child(4n+3),
[data-theme="light"] .adm-session-row:nth-child(even),
[data-theme="light"] .adm-wl-row:nth-child(even),
[data-theme="light"] .adm-activity-row:nth-child(even),
[data-theme="light"] .adm-lb-row:nth-child(even) { background: #f5f5f5; }
[data-theme="light"] .adm-user-row:hover { background: #eeeeee; }
[data-theme="light"] .adm-user-row.adm-row-expanded { background: #eeeeee; border-left-color: #be123c; }
[data-theme="light"] .adm-tier-select { border-color: #d4d4d4; }
[data-theme="light"] .adm-tier-select option { background: #ffffff; color: #171717; }
[data-theme="light"] .adm-action-btn { border-color: #d4d4d4; color: #737373; }
[data-theme="light"] .adm-sort-btn { border-color: #d4d4d4; color: #a3a3a3; }
[data-theme="light"] .adm-analytics-section { background: #f5f5f5; }
[data-theme="light"] .adm-bar-track { background: #e5e5e5; }
[data-theme="light"] .adm-lb-title { color: #6b7280; }
[data-theme="light"] .adm-search-input { background: #fafafa; border-color: #e5e5e5; color: #171717; }
[data-theme="light"] .adm-filter-select { background: #fafafa; border-color: #e5e5e5; color: #171717; }
[data-theme="light"] .adm-filter-select option { background: #ffffff; color: #171717; }
[data-theme="light"] .adm-user-detail { background: #fafafa; border-bottom-color: #e5e5e5; }
[data-theme="light"] .adm-detail-section { background: #f0f0f0; }
[data-theme="light"] .adm-engagement-big { color: #be123c; }
[data-theme="light"] .adm-eng-item { background: #e5e5e5; color: #6b7280; }
[data-theme="light"] .adm-note-input { background: #ffffff; border-color: #d4d4d4; color: #171717; }
[data-theme="light"] .adm-note-text { color: #374151; }
[data-theme="light"] .adm-heat-cell { color: #a3a3a3; }
[data-theme="light"] .adm-funnel-bar { background: #7c3aed; }
[data-theme="light"] .adm-lb-header { border-bottom-color: #e5e5e5; }

/* ===== ADMIN DASHBOARD RESPONSIVE (adm-*) ===== */
@media (max-width: 768px) {
    .adm-container { padding: 0 12px 24px; }
    .adm-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .adm-stats-strip { gap: 12px; }
    .adm-stat-val { font-size: 16px; }
    .adm-analytics-grid { grid-template-columns: 1fr; }
    .adm-detail-grid { grid-template-columns: 1fr; }
    .adm-user-row, .adm-session-row, .adm-wl-row, .adm-activity-row, .adm-table-header {
        font-size: 10px;
    }
    .adm-user-active, .adm-user-created, .adm-user-views, .adm-user-lib { display: none; }
    .adm-session-ip, .adm-session-device { display: none; }
    .adm-activity-geo { display: none; }
    .adm-platform-grid { grid-template-columns: 1fr 1fr; }
    .adm-activity-filters { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .adm-stats-strip { gap: 8px; }
    .adm-stat-chip { min-width: calc(50% - 8px); }
    .adm-tab { padding: 8px 8px; font-size: 10px; }
    .adm-pwr-email { min-width: 100px; }
    .adm-bar-label { min-width: 60px; font-size: 9px; }
    .adm-platform-grid { grid-template-columns: 1fr; }
}

/* ===== COPY COUNT BADGE ===== */
.threat-row-meta-copies {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #a8e6cf;
}

[data-theme="light"] .threat-row-meta-copies {
    color: #059669;
}

/* ===== ADMIN — SESSION DRILLDOWN ===== */
.adm-session-row {
    cursor: pointer;
    transition: background 0.15s;
}
.adm-session-row:hover {
    background: #1a1a1a;
}
.adm-session-row.adm-row-expanded {
    border-left: 2px solid #7dd3fc;
    background: #111;
}
.adm-session-detail {
    padding: 12px 16px;
    border-left: 2px solid #7dd3fc;
    background: #0d0d0d;
    margin-bottom: 2px;
}
.adm-session-detail .adm-timeline-event {
    padding: 4px 0;
}

/* ===== ADMIN — ACTIVITY CLICKABLE ===== */
.adm-activity-row {
    cursor: pointer;
    transition: background 0.15s;
}
.adm-activity-row:hover {
    background: #1a1a1a;
}
.adm-activity-row[data-userid] {
    cursor: pointer;
}

/* ===== ADMIN — FLASH ANIMATION ===== */
@keyframes adm-flash-anim {
    0% { background: rgba(253, 164, 175, 0.25); }
    100% { background: transparent; }
}
.adm-flash {
    animation: adm-flash-anim 2s ease-out;
}

/* ===== ADMIN — CONTENT DRILL-IN ===== */
.adm-content-detail {
    padding: 12px 16px;
    border-left: 2px solid #c4b5fd;
    background: #0d0d0d;
    margin: 4px 0;
}
.adm-content-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #525252;
    margin: 8px 0 4px;
}
.adm-content-viewer {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    color: #d4d4d4;
}
.adm-content-viewer-email {
    min-width: 160px;
    color: #a3a3a3;
}
.adm-content-viewer-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 1px 6px;
}
.adm-content-viewer-type.click {
    color: #7dd3fc;
    background: rgba(125, 211, 252, 0.1);
}
.adm-content-viewer-type.copy {
    color: #a8e6cf;
    background: rgba(168, 230, 207, 0.1);
}
.adm-content-viewer-time {
    color: #525252;
    font-size: 10px;
}

/* ===== ADMIN — COPY BADGE IN USERS ===== */
.adm-copy-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #a8e6cf;
    margin-left: 4px;
}

/* ===== ADMIN — UNVERIFIED TAB ===== */
.adm-unv-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #525252;
    margin: 16px 0 8px;
}
.adm-unv-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    font-size: 11px;
    color: #d4d4d4;
    border-bottom: 1px solid #1a1a1a;
}
.adm-unv-row:nth-child(even) {
    background: #0d0d0d;
}
.adm-unv-email { flex: 2; min-width: 160px; }
.adm-unv-date { flex: 1; color: #737373; font-size: 10px; }
.adm-unv-age { flex: 0 0 60px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-align: center; }
.adm-unv-age.urgent { color: #fda4af; }
.adm-unv-age.warning { color: #fdba74; }
.adm-unv-age.ok { color: #a8e6cf; }
.adm-unv-attempt { flex: 1; color: #525252; font-size: 10px; }
.adm-unv-status { flex: 0 0 70px; font-size: 10px; }

/* ===== ADMIN — GEO TAB ===== */
.adm-geo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.adm-geo-section {
    background: #111;
    border: 1px solid #1a1a1a;
    padding: 12px;
}
.adm-geo-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #525252;
    margin-bottom: 8px;
}
.adm-geo-city-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    color: #d4d4d4;
}
.adm-geo-city-name { flex: 1; }
.adm-geo-city-country { color: #525252; font-size: 10px; }
.adm-geo-city-cnt { font-family: 'JetBrains Mono', monospace; color: #7dd3fc; font-size: 10px; }
.adm-geo-devices {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.adm-geo-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
}
.adm-geo-device-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #d4d4d4;
}
.adm-geo-device-cnt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
}

/* ===== ADMIN — RETENTION HEATMAP ===== */
.adm-ret-table {
    width: 100%;
    border-collapse: collapse;
}
.adm-ret-table th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #525252;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
}
.adm-ret-table td {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid #0d0d0d;
}
.adm-ret-week {
    color: #a3a3a3;
    text-align: left !important;
    white-space: nowrap;
}
.adm-ret-size {
    color: #737373;
}
.adm-ret-cell {
    font-weight: 600;
}

/* ===== ADMIN — FEATURE ADOPTION ===== */
.adm-adopt-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.adm-adopt-label {
    font-size: 10px;
    color: #a3a3a3;
    min-width: 130px;
    font-family: 'JetBrains Mono', monospace;
}
.adm-adopt-track {
    flex: 1;
    height: 12px;
    background: #1a1a1a;
}
.adm-adopt-fill {
    height: 100%;
    transition: width 0.3s;
}
.adm-adopt-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #737373;
    min-width: 35px;
    text-align: right;
}

/* ===== ADMIN — ANOMALY DETECTION ===== */
.adm-anomaly-section {
    margin-bottom: 16px;
}
.adm-anomaly-header {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #525252;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.adm-anomaly-count {
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(253, 164, 175, 0.15);
    color: #fda4af;
}
.adm-anomaly-clear {
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(168, 230, 207, 0.15);
    color: #a8e6cf;
}
/* MCP observability — error badge inline in bar-chart labels */
.adm-mcp-err {
    font-size: 9px;
    padding: 0 4px;
    margin-left: 4px;
    background: rgba(253, 164, 175, 0.15);
    color: #fda4af;
    border-radius: 0;
    font-weight: 600;
}
[data-theme="light"] .adm-mcp-err { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.adm-anomaly-icon {
    font-size: 12px;
}
.adm-anomaly-icon.volume { color: #fdba74; }
.adm-anomaly-icon.geo { color: #fda4af; }
.adm-anomaly-icon.burst { color: #c4b5fd; }
.adm-anomaly-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.adm-anomaly-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 8px;
    font-size: 11px;
    color: #d4d4d4;
    background: #111;
    border-left: 2px solid transparent;
}
.adm-anomaly-row.volume { border-left-color: #fdba74; }
.adm-anomaly-row.geo { border-left-color: #fda4af; }
.adm-anomaly-row.burst { border-left-color: #c4b5fd; }
.adm-anomaly-email { min-width: 160px; color: #a3a3a3; }
.adm-anomaly-detail { color: #737373; font-size: 10px; }

/* ===== ADMIN — TRACKING COVERAGE ===== */
.adm-tracking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.adm-tracking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #111;
    border: 1px solid #1a1a1a;
    font-size: 11px;
}
.adm-tracking-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #a3a3a3;
}
.adm-tracking-cnt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #d4d4d4;
}
.adm-tracking-item.gap {
    border-color: #fda4af33;
    background: rgba(253, 164, 175, 0.05);
}
.adm-tracking-item.gap .adm-tracking-cnt {
    color: #fda4af;
}

/* ===== ADMIN — LEADERBOARD CLICKABLE ===== */
.adm-lb-row {
    cursor: pointer;
    transition: background 0.15s;
}
.adm-lb-row:hover {
    background: #1a1a1a;
}

/* ===== ADMIN DEEP OVERHAUL — LIGHT MODE ===== */
[data-theme="light"] .adm-session-row:hover,
[data-theme="light"] .adm-activity-row:hover,
[data-theme="light"] .adm-lb-row:hover {
    background: #f5f5f5;
}
[data-theme="light"] .adm-session-row.adm-row-expanded {
    background: #f8fafc;
}
[data-theme="light"] .adm-session-detail,
[data-theme="light"] .adm-content-detail {
    background: #f8fafc;
    border-left-color: #38bdf8;
}
[data-theme="light"] .adm-content-detail {
    border-left-color: #8b5cf6;
}
[data-theme="light"] .adm-content-viewer { color: #374151; }
[data-theme="light"] .adm-content-viewer-email { color: #6b7280; }
[data-theme="light"] .adm-content-viewer-time { color: #9ca3af; }
[data-theme="light"] .adm-copy-badge { color: #059669; }
[data-theme="light"] .adm-unv-row { color: #374151; border-bottom-color: #e5e7eb; }
[data-theme="light"] .adm-unv-row:nth-child(even) { background: #f9fafb; }
[data-theme="light"] .adm-unv-email { color: #374151; }
[data-theme="light"] .adm-unv-date { color: #9ca3af; }
[data-theme="light"] .adm-unv-age.urgent { color: #e11d48; }
[data-theme="light"] .adm-unv-age.warning { color: #d97706; }
[data-theme="light"] .adm-unv-age.ok { color: #059669; }
[data-theme="light"] .adm-geo-section { background: #fafafa; border-color: #e5e7eb; }
[data-theme="light"] .adm-geo-section-title { color: #9ca3af; }
[data-theme="light"] .adm-geo-city-row { color: #374151; }
[data-theme="light"] .adm-geo-city-country { color: #9ca3af; }
[data-theme="light"] .adm-geo-city-cnt { color: #0284c7; }
[data-theme="light"] .adm-geo-device { background: #f5f5f5; border-color: #e5e7eb; }
[data-theme="light"] .adm-geo-device-name { color: #374151; }
[data-theme="light"] .adm-ret-table th { color: #9ca3af; border-bottom-color: #e5e7eb; }
[data-theme="light"] .adm-ret-table td { color: #374151; border-bottom-color: #f3f4f6; }
[data-theme="light"] .adm-ret-week { color: #6b7280; }
[data-theme="light"] .adm-ret-size { color: #9ca3af; }
[data-theme="light"] .adm-adopt-label { color: #6b7280; }
[data-theme="light"] .adm-adopt-track { background: #e5e7eb; }
[data-theme="light"] .adm-adopt-val { color: #9ca3af; }
[data-theme="light"] .adm-anomaly-header { color: #9ca3af; }
[data-theme="light"] .adm-anomaly-count { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
[data-theme="light"] .adm-anomaly-clear { background: rgba(5, 150, 105, 0.1); color: #059669; }
[data-theme="light"] .adm-anomaly-row { background: #f9fafb; color: #374151; }
[data-theme="light"] .adm-anomaly-email { color: #6b7280; }
[data-theme="light"] .adm-anomaly-detail { color: #9ca3af; }
[data-theme="light"] .adm-tracking-item { background: #fafafa; border-color: #e5e7eb; }
[data-theme="light"] .adm-tracking-type { color: #6b7280; }
[data-theme="light"] .adm-tracking-cnt { color: #374151; }
[data-theme="light"] .adm-tracking-item.gap { border-color: rgba(225, 29, 72, 0.2); background: rgba(225, 29, 72, 0.03); }
[data-theme="light"] .adm-tracking-item.gap .adm-tracking-cnt { color: #e11d48; }
[data-theme="light"] .adm-unv-section-title { color: #9ca3af; }

/* ===== ADMIN DEEP OVERHAUL — RESPONSIVE ===== */
@media (max-width: 768px) {
    .adm-geo-grid { grid-template-columns: 1fr; }
    .adm-unv-attempt, .adm-unv-status { display: none; }
    .adm-ret-table { font-size: 9px; }
    .adm-ret-table th, .adm-ret-table td { padding: 4px 4px; }
    .adm-anomaly-email { min-width: 100px; }
    .adm-tracking-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 480px) {
    .adm-unv-date { display: none; }
    .adm-geo-devices { flex-direction: column; }
    .adm-adopt-label { min-width: 90px; font-size: 9px; }
    .adm-anomaly-detail { display: none; }
    .adm-content-viewer-email { min-width: 100px; }
}

/* ===== VIEW COUNT BADGE ===== */
.threat-row-meta-views {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
}

[data-theme="light"] .threat-row-meta-views {
    color: #a3a3a3;
}

/* ===== LIBRARY BUTTON ===== */
.library-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.library-btn:hover { color: #a8e6cf; }

.library-btn.saved {
    color: #a8e6cf;
}

.library-btn.saved:hover {
    color: #fda4af;
}

/* Detection library save button — ghost style matching [ copy ] */
.det-lib-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.det-lib-btn:hover { color: #a8e6cf; }

.det-lib-btn.saved {
    color: #a8e6cf;
}

.det-lib-btn.saved:hover {
    color: #fda4af;
}

[data-theme="light"] .library-btn { color: #999999; }
[data-theme="light"] .library-btn:hover { color: #059669; }
[data-theme="light"] .library-btn.saved { color: #059669; }
[data-theme="light"] .library-btn.saved:hover { color: #e11d48; }

[data-theme="light"] .det-lib-btn { color: #999999; }
[data-theme="light"] .det-lib-btn:hover { color: #059669; }
[data-theme="light"] .det-lib-btn.saved { color: #059669; }
[data-theme="light"] .det-lib-btn.saved:hover { color: #e11d48; }

/* ===== CVE/CWE VULNERABILITY ENRICHMENT (dp-vuln-*) ===== */

/* Clickable indicator rows */
.dp-vuln-clickable { cursor: pointer; transition: background 0.15s; }
.dp-technique-row.dp-vuln-clickable:hover { background: rgba(253, 164, 175, 0.06); }

/* CVE/CWE tag variants */
.dp-tag-cve {
    color: #fda4af;
    background: rgba(253, 164, 175, 0.1);
    cursor: pointer;
}
.dp-tag-cve:hover { background: rgba(253, 164, 175, 0.22); }

.dp-tag-cwe {
    color: #fdba74;
    background: rgba(253, 186, 116, 0.1);
    cursor: pointer;
}
.dp-tag-cwe:hover { background: rgba(253, 186, 116, 0.22); }

/* Accordion card container */
.dp-vuln-card {
    overflow: hidden;
    animation: dp-vuln-slide 0.2s ease-out;
    margin: 4px 0;
}

@keyframes dp-vuln-slide {
    from { max-height: 0; opacity: 0; }
    to { max-height: 600px; opacity: 1; }
}

.dp-vuln-card-inner {
    background: #111111;
    border-left: 2px solid #333333;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.dp-vuln-loading {
    color: #525252;
    font-style: italic;
}

/* Header row */
.dp-vuln-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dp-vuln-id {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #e5e5e5;
}

.dp-vuln-name {
    font-family: var(--font-body);
    font-size: 12px;
    color: #a0a0a0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-vuln-score {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
}

/* Severity/status badges */
.dp-vuln-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    text-transform: uppercase;
}

.dp-vuln-badge-critical { color: #fda4af; background: rgba(253, 164, 175, 0.15); }
.dp-vuln-badge-high     { color: #fdba74; background: rgba(253, 186, 116, 0.15); }
.dp-vuln-badge-medium   { color: #fde68a; background: rgba(253, 230, 138, 0.15); }
.dp-vuln-badge-low      { color: #a8e6cf; background: rgba(168, 230, 207, 0.15); }
.dp-vuln-badge-none     { color: #525252; background: rgba(82, 82, 82, 0.15); }
.dp-vuln-badge-kev      { color: #fda4af; background: rgba(253, 164, 175, 0.2); }
.dp-vuln-badge-ransomware { color: #f87171; background: rgba(248, 113, 113, 0.2); }
.dp-vuln-badge-patched  { color: #a8e6cf; background: rgba(168, 230, 207, 0.2); }

/* Description */
.dp-vuln-desc {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: #a0a0a0;
}

/* Stats grid */
.dp-vuln-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.dp-vuln-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dp-vuln-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: #525252;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dp-vuln-stat-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: #d4d4d4;
}

/* Sections */
.dp-vuln-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-vuln-section-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: #525252;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dp-vuln-product {
    font-family: var(--font-body);
    font-size: 12px;
    color: #a0a0a0;
    padding: 2px 0;
    line-height: 1.4;
}

/* External links */
.dp-vuln-link {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #7dd3fc;
    text-decoration: none;
    margin-right: 12px;
}
.dp-vuln-link:hover { text-decoration: underline; }

/* Threat ID links inside vuln cards */
.dp-vuln-threat-link {
    cursor: pointer;
    color: #c4b5fd;
    background: rgba(196, 181, 253, 0.1);
}
.dp-vuln-threat-link:hover { background: rgba(196, 181, 253, 0.22); }

/* ===== LIGHT MODE ===== */
[data-theme="light"] .dp-tag-cve { color: #e11d48; background: rgba(225, 29, 72, 0.08); }
[data-theme="light"] .dp-tag-cve:hover { background: rgba(225, 29, 72, 0.16); }
[data-theme="light"] .dp-tag-cwe { color: #d97706; background: rgba(217, 119, 6, 0.08); }
[data-theme="light"] .dp-tag-cwe:hover { background: rgba(217, 119, 6, 0.16); }

[data-theme="light"] .dp-vuln-card-inner {
    background: #f5f5f5;
    border-left-color: #d4d4d4;
}

[data-theme="light"] .dp-vuln-id { color: #1a1a1a; }
[data-theme="light"] .dp-vuln-name { color: #666666; }
[data-theme="light"] .dp-vuln-desc { color: #555555; }
[data-theme="light"] .dp-vuln-stat-label { color: #999999; }
[data-theme="light"] .dp-vuln-stat-value { color: #333333; }
[data-theme="light"] .dp-vuln-section-label { color: #999999; }
[data-theme="light"] .dp-vuln-product { color: #555555; }
[data-theme="light"] .dp-vuln-link { color: #2563eb; }
[data-theme="light"] .dp-vuln-loading { color: #999999; }

[data-theme="light"] .dp-vuln-badge-critical { color: #e11d48; background: rgba(225, 29, 72, 0.1); }
[data-theme="light"] .dp-vuln-badge-high     { color: #d97706; background: rgba(217, 119, 6, 0.1); }
[data-theme="light"] .dp-vuln-badge-medium   { color: #ca8a04; background: rgba(202, 138, 4, 0.1); }
[data-theme="light"] .dp-vuln-badge-low      { color: #059669; background: rgba(5, 150, 105, 0.1); }
[data-theme="light"] .dp-vuln-badge-none     { color: #999999; background: rgba(153, 153, 153, 0.1); }
[data-theme="light"] .dp-vuln-badge-kev      { color: #e11d48; background: rgba(225, 29, 72, 0.12); }
[data-theme="light"] .dp-vuln-badge-ransomware { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
[data-theme="light"] .dp-vuln-badge-patched  { color: #059669; background: rgba(5, 150, 105, 0.12); }

[data-theme="light"] .dp-vuln-threat-link { color: #7c3aed; background: rgba(124, 58, 237, 0.08); }
[data-theme="light"] .dp-vuln-threat-link:hover { background: rgba(124, 58, 237, 0.16); }

[data-theme="light"] .desc-cve-clickable:hover { background: rgba(225, 29, 72, 0.12); }
[data-theme="light"] .desc-cwe { color: #d97706; background: rgba(217, 119, 6, 0.06); }
[data-theme="light"] .desc-cwe-clickable:hover { background: rgba(217, 119, 6, 0.12); }

[data-theme="light"] .dp-technique-row.dp-vuln-clickable:hover { background: rgba(225, 29, 72, 0.04); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .dp-vuln-card-inner { padding: 10px 12px; }
    .dp-vuln-stats { gap: 10px; }
    .dp-vuln-header { gap: 6px; }
    .dp-vuln-name { display: none; }
}

/* ===== Part 3n: Admin tracking metadata + journey timeline ===== */
.adm-timeline-meta, .adm-activity-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    background: rgba(82, 82, 82, 0.1);
    padding: 1px 6px;
    margin-left: 4px;
}

.adm-journey-day { margin-bottom: 12px; }
.adm-journey-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    padding: 4px 0;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 6px;
}
.adm-journey-events { position: relative; padding-left: 12px; }
.adm-journey-event {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    position: relative;
}
.adm-journey-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.adm-journey-line {
    position: absolute;
    left: 15px;
    top: 11px;
    bottom: -3px;
    width: 1px;
    background: #1a1a1a;
}
.adm-journey-event:last-child .adm-journey-line { display: none; }
.adm-journey-content { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.adm-journey-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #a0a0a0;
}

.adm-flow-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    background: rgba(17, 17, 17, 0.5);
    border: 1px solid #1a1a1a;
    overflow-x: auto;
}
.adm-flow-step {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #a0a0a0;
    padding: 1px 4px;
    background: rgba(196, 181, 253, 0.06);
}
.adm-flow-arrow {
    font-size: 10px;
    color: #333;
}

.adm-session-toggle { margin-bottom: 8px; }
.adm-session-expired { opacity: 0.45; }

/* ===== Part 5c: Simulations filter bar ===== */
.sim-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid #1a1a1a;
    background: #111111;
}
.sim-filter-bar input,
.sim-filter-bar select {
    font-family: var(--font-mono);
    font-size: 11px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    color: #d4d4d4;
    padding: 4px 8px;
    outline: none;
}
.sim-filter-bar input:focus,
.sim-filter-bar select:focus { border-color: #c4b5fd; }
.sim-filter-bar input { flex: 1; min-width: 120px; }
.sim-filter-results {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
    margin-left: auto;
}
/* iOS auto-zoom prevention for sim filter bar */
@media (max-width: 768px) {
    .sim-filter-bar input,
    .sim-filter-bar select { font-size: 16px; }
}

/* ===== Part 6c: Nested category nav ===== */
.nav-cat-group { position: relative; }
.nav-item .nav-chevron {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
    margin-left: auto;
    padding: 0 4px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.nav-item .nav-chevron:hover { color: #a0a0a0; }
.nav-cat-group.expanded > .nav-item .nav-chevron { color: #c4b5fd; }

.nav-sub-group {
    display: none;
    flex-direction: column;
}
.nav-cat-group.expanded > .nav-sub-group { display: flex; }

.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 28px;
    font-size: 12px;
    color: #737373;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    position: relative;
}
.nav-sub-item::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #1a1a1a;
}
.nav-sub-item:hover { color: #a0a0a0; background: rgba(255, 255, 255, 0.02); }
.nav-sub-item.active { color: #c4b5fd; background: rgba(196, 181, 253, 0.06); }
.nav-sub-item .nav-label { font-size: 11px; }
.nav-sub-item .nav-count { font-size: 10px; color: #525252; }

.nav-sub-dot {
    width: 6px;
    height: 6px;
    background: #333;
    flex-shrink: 0;
}
.nav-sub-item.active .nav-sub-dot { background: #c4b5fd; }

/* ===== Light mode overrides ===== */
[data-theme="light"] .adm-timeline-meta,
[data-theme="light"] .adm-activity-meta {
    color: #737373;
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .adm-journey-date { color: #737373; border-color: #e5e5e5; }
[data-theme="light"] .adm-journey-line { background: #e5e5e5; }
[data-theme="light"] .adm-journey-desc { color: #525252; }
[data-theme="light"] .adm-flow-breadcrumb { background: rgba(0, 0, 0, 0.02); border-color: #e5e5e5; }
[data-theme="light"] .adm-flow-step { color: #525252; background: rgba(196, 181, 253, 0.1); }
[data-theme="light"] .adm-flow-arrow { color: #d4d4d4; }
[data-theme="light"] .sim-filter-bar { background: #fafafa; border-color: #e5e5e5; }
[data-theme="light"] .sim-filter-bar input,
[data-theme="light"] .sim-filter-bar select { background: #fff; border-color: #e5e5e5; color: #262626; }
[data-theme="light"] .nav-item .nav-chevron { color: #a0a0a0; }
[data-theme="light"] .nav-item .nav-chevron:hover { color: #525252; }
[data-theme="light"] .nav-cat-group.expanded > .nav-item .nav-chevron { color: #7c3aed; }
[data-theme="light"] .nav-section-chevron { color: #a0a0a0; }
[data-theme="light"] .sidebar .nav-section-toggle:hover { color: #525252; }
[data-theme="light"] .nav-section-collapsible.expanded .nav-section-toggle .nav-section-chevron { color: #b45309; }
[data-theme="light"] .nav-sub-item { color: #737373; }
[data-theme="light"] .nav-sub-item::before { background: #e5e5e5; }
[data-theme="light"] .nav-sub-item:hover { color: #525252; background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .nav-sub-item.active { color: #7c3aed; background: rgba(124, 58, 237, 0.06); }
[data-theme="light"] .nav-sub-dot { background: #d4d4d4; }
[data-theme="light"] .nav-sub-item.active .nav-sub-dot { background: #7c3aed; }

/* ================================================================
   FULL-PAGE THREAT VIEW (.tp-*)
   Replaces the modal-based threat detail with a full-page layout.
   ================================================================ */

/* ── TOPBAR ── */
.threat-page { overflow-y: auto; overflow-x: hidden; height: 100vh; position: fixed; top: 0; bottom: 0; left: var(--sidebar-width); right: 0; z-index: 100; background: var(--bg-primary, #0a0a0a); }
.tp-topbar { position: sticky; top: 0; z-index: 100; background: var(--bg-surface, #111111); border-bottom: 1px solid var(--border, #1e1e1e); padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; }
.tp-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-back { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted, #666); display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 10px; border: 1px solid var(--border, #1e1e1e); transition: all 0.15s; flex-shrink: 0; }
.tp-back:hover { border-color: var(--accent-lavender, #c4b5fd); color: var(--accent-lavender, #c4b5fd); }
.tp-crumb { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-crumb span { color: var(--accent-lavender, #c4b5fd); }
.tp-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tp-action { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); padding: 4px 10px; border: 1px solid var(--border, #1e1e1e); cursor: pointer; transition: all 0.15s; background: none; }
.tp-action:hover { border-color: var(--accent-lavender, #c4b5fd); color: var(--accent-lavender, #c4b5fd); }

/* ── HERO ── */
.tp-hero { padding: 28px 24px 20px; border-bottom: 1px solid var(--border, #1e1e1e); }
.tp-hero-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; flex-wrap: wrap; }
.tp-hero-id { color: var(--accent-lavender, #c4b5fd); font-weight: 600; }
.tp-sev-badge { padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tp-sev-badge.critical { background: #ef4444; color: #fff; }
.tp-sev-badge.high { background: #f97316; color: #000; }
.tp-sev-badge.medium { background: #eab308; color: #000; }
.tp-sev-badge.low { background: #22c55e; color: #000; }
.tp-exploit { color: var(--severity-critical, #fda4af); font-weight: 600; }
.tp-meta-sep { color: var(--text-muted); }
.tp-meta-text { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.tp-title { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text-primary, #e5e5e5); }
.tp-summary { font-size: 13px; color: var(--text-secondary, #a3a3a3); line-height: 1.7; }
.tp-stats { display: flex; gap: 1px; margin-top: 16px; }
.tp-stat { flex: 1; background: var(--bg-surface, #111111); padding: 10px 12px; }
.tp-stat-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted, #666); letter-spacing: 0.06em; }
.tp-stat-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }

/* ── TAB BAR ── */
.tp-tabs { display: flex; border-bottom: 1px solid var(--border, #1e1e1e); padding: 0 24px; background: var(--bg-primary, #0a0a0a); position: sticky; top: 42px; z-index: 50; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tp-tab { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding: 11px 16px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; }
.tp-tab:hover { color: var(--text-secondary, #a3a3a3); }
.tp-tab.active { color: var(--accent-lavender, #c4b5fd); border-bottom-color: var(--accent-lavender, #c4b5fd); }
.tp-tab-cnt { font-size: 10px; margin-left: 3px; opacity: 0.6; }

/* ── LAYOUT ── */
.tp-layout { display: flex; min-width: 0; }
.tp-main { flex: 1; min-width: 0; padding: 0 20px; }
.tp-side { width: 260px; flex-shrink: 0; border-left: 1px solid var(--line); }
.tp-pane { display: none; }
.tp-pane.active { display: block; }

/* ── SIDEBAR ── */
.tp-ss { padding: 16px 20px; border-bottom: 1px solid var(--border, #1e1e1e); }
.tp-ss-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 8px; }
.tp-attr-row { display: flex; justify-content: space-between; padding: 3px 0; }
.tp-attr-k { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.tp-attr-v { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; color: var(--text-primary, #e5e5e5); }
.tp-tgt-group { margin-top: 8px; }
.tp-tgt-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 4px; }
.tp-tgt-pills { display: flex; flex-wrap: wrap; gap: 3px; }
.tp-pill { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--border, #1e1e1e); }
.tp-pill.sec { color: var(--accent-lavender, #c4b5fd); border-color: rgba(196,181,253,0.15); }
.tp-pill.reg { color: var(--accent-sky, #7dd3fc); border-color: rgba(125,211,252,0.15); }
.tp-tag-cloud { display: flex; flex-wrap: wrap; gap: 3px; }
.tp-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 5px; background: var(--bg-elevated, #1a1a1a); color: var(--text-muted); border: 1px solid var(--border, #1e1e1e); }
.tp-tag.cve { color: var(--severity-critical, #fda4af); border-color: rgba(253,164,175,0.15); }
.tp-tag.cwe { color: var(--accent-peach, #fdba74); border-color: rgba(253,186,116,0.15); }
.tp-tag.hot { color: var(--severity-critical, #fda4af); border-color: rgba(253,164,175,0.2); background: rgba(253,164,175,0.05); }

/* ── Engagement (Like + Feedback) in sidebar ────────────────────── */
.tp-engage-like-wrap { display: inline-flex; align-items: center; gap: 6px; }
.tp-engage-like-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent;
    border: 1px solid var(--border, #2a2a2a);
    color: var(--text-primary, #d0d0d0);
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.tp-engage-like-btn:hover { border-color: var(--severity-critical, #fda4af); color: var(--severity-critical, #fda4af); }
.tp-engage-like-btn.active { color: var(--severity-critical, #fda4af); border-color: var(--severity-critical, #fda4af); }
.tp-engage-like-icon { font-size: 12px; line-height: 1; }
.tp-engage-like-count { font-weight: 600; }

.tp-engage-feedback-slot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border, #1e1e1e); }
.tp-engage-loading, .tp-engage-err, .tp-engage-empty {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); padding: 4px 0;
}
.tp-engage-sub-lbl {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    letter-spacing: 0.05em; margin-bottom: 6px;
}
.tp-engage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-height: 320px; overflow-y: auto; }
.tp-engage-item {
    background: var(--bg-elevated, #111111);
    border-left: 2px solid var(--border, #2a2a2a);
    padding: 6px 8px;
}
.tp-engage-item-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-muted); margin-bottom: 3px;
}
.tp-engage-name { color: var(--accent-lavender, #c4b5fd); font-weight: 600; }
.tp-engage-date { font-size: 9px; }
.tp-engage-content {
    font-family: var(--font-prose, 'Inter', sans-serif);
    font-size: 11px;
    color: var(--text-primary, #d0d0d0);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.tp-engage-form { display: flex; flex-direction: column; gap: 6px; }
.tp-engage-textarea {
    width: 100%;
    min-height: 60px;
    background: var(--bg-primary, #0a0a0a);
    border: 1px solid var(--border, #2a2a2a);
    color: var(--text-primary, #d0d0d0);
    font-family: var(--font-prose, 'Inter', sans-serif);
    font-size: 11px;
    padding: 6px 8px;
    resize: vertical;
    box-sizing: border-box;
}
.tp-engage-textarea:focus { outline: none; border-color: var(--accent-lavender, #c4b5fd); }
.tp-engage-form-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tp-engage-counter { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.tp-engage-msg { font-family: var(--font-mono); font-size: 10px; color: var(--accent-mint, #a8e6cf); min-height: 12px; }
.tp-engage-gate {
    display: flex; flex-direction: column; gap: 4px;
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}
.tp-bracket-btn {
    background: transparent; border: none; padding: 0;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-muted); cursor: pointer; user-select: none;
    align-self: flex-start;
}
.tp-bracket-btn:hover { color: var(--text-primary, #d0d0d0); }

[data-theme="light"] .tp-engage-like-btn { border-color: #d0d0d0; color: #525252; }
[data-theme="light"] .tp-engage-like-btn:hover,
[data-theme="light"] .tp-engage-like-btn.active { border-color: #e11d48; color: #e11d48; }
[data-theme="light"] .tp-engage-item { background: #f5f5f5; border-left-color: #d0d0d0; }
[data-theme="light"] .tp-engage-name { color: #7c3aed; }
[data-theme="light"] .tp-engage-content { color: #1a1a1a; }
[data-theme="light"] .tp-engage-textarea { background: #ffffff; border-color: #d0d0d0; color: #1a1a1a; }
[data-theme="light"] .tp-engage-textarea:focus { border-color: #7c3aed; }
[data-theme="light"] .tp-engage-msg { color: #059669; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .tp-layout { flex-direction: column; }
    .tp-side { width: 100%; border-left: none; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .threat-page { left: 0; }
    .tp-side { grid-template-columns: 1fr; }
    .tp-hero { padding: 20px 16px; }
    .tp-title { font-size: 18px; }
    .tp-stats { flex-wrap: wrap; }
    .tp-stat { flex: 1 1 30%; }
    .tp-tabs { padding: 0 12px; }
    .tp-tab { padding: 10px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
    .tp-topbar { padding: 8px 12px; }
    .tp-topbar-right { display: none; }
    .tp-hero { padding: 16px 12px; }
    .tp-title { font-size: 16px; }
    .tp-summary { font-size: 12px; }
    .tp-stat { flex: 1 1 45%; padding: 8px 10px; }
    .tp-stat-val { font-size: 14px; }
}

/* ── LIGHT MODE ── */
[data-theme="light"] .threat-page { background: #fff; }
[data-theme="light"] .tp-topbar { background: #f9fafb; border-color: #e5e5e5; }
[data-theme="light"] .tp-back { color: #666; border-color: #e5e5e5; }
[data-theme="light"] .tp-back:hover { border-color: #7c3aed; color: #7c3aed; }
[data-theme="light"] .tp-crumb { color: #999; }
[data-theme="light"] .tp-crumb span { color: #7c3aed; }
[data-theme="light"] .tp-action { color: #666; border-color: #e5e5e5; background: transparent; }
[data-theme="light"] .tp-action:hover { border-color: #7c3aed; color: #7c3aed; }
[data-theme="light"] .tp-hero { border-color: #e5e5e5; }
[data-theme="light"] .tp-hero-id { color: #7c3aed; }
[data-theme="light"] .tp-exploit { color: #dc2626; }
[data-theme="light"] .tp-meta-sep { color: #ccc; }
[data-theme="light"] .tp-meta-text { color: #999; }
[data-theme="light"] .tp-title { color: #1a1a1a; }
[data-theme="light"] .tp-summary { color: #555; }
[data-theme="light"] .tp-stat { background: #f5f5f5; }
[data-theme="light"] .tp-stat-lbl { color: #999; }
[data-theme="light"] .tp-tabs { background: #fff; border-color: #e5e5e5; }
[data-theme="light"] .tp-tab { color: #999; }
[data-theme="light"] .tp-tab:hover { color: #555; }
[data-theme="light"] .tp-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; }
[data-theme="light"] .tp-side { border-color: #e5e5e5; }
[data-theme="light"] .tp-ss { border-color: #e5e5e5; }
[data-theme="light"] .tp-ss-lbl { color: #999; }
[data-theme="light"] .tp-attr-k { color: #999; }
[data-theme="light"] .tp-attr-v { color: #1a1a1a; }
[data-theme="light"] .tp-pill { border-color: #e5e5e5; }
[data-theme="light"] .tp-pill.sec { color: #7c3aed; }
[data-theme="light"] .tp-pill.reg { color: #0284c7; }
[data-theme="light"] .tp-tag { background: #f5f5f5; color: #999; border-color: #e5e5e5; }
[data-theme="light"] .tp-tag.cve { color: #dc2626; }
[data-theme="light"] .tp-tag.cwe { color: #d97706; }
[data-theme="light"] .tp-tag.hot { color: #dc2626; background: rgba(220,38,38,0.05); }

/* ==========================================================
 * SHARED VIEW STYLES (sv-*)  — Used by renderSharedView()
 * Dedicated light-mode share link page for Purple+ share tokens
 * ========================================================== */
.sv-wrap { min-height: 100vh; display: flex; flex-direction: column; }

/* Nav */
.sv-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 100;
}
.sv-nav-brand { display: flex; align-items: center; gap: 6px; }
.sv-logo { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent-purple); }
.sv-logo-sub { font-family: var(--font-mono); font-size: 11px; color: var(--accent-purple); }
.sv-badge { font-family: var(--font-mono); font-size: 10px; color: #737373; border: 1px solid #333; padding: 2px 8px; margin-left: 8px; }
.sv-nav-right { display: flex; align-items: center; gap: 16px; }
.sv-expiry { font-family: var(--font-mono); font-size: 10px; color: #525252; }
.sv-nav-link { font-family: var(--font-mono); font-size: 11px; color: #737373; text-decoration: none; }
.sv-nav-link:hover { color: var(--accent-purple); }
.sv-theme-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #737373;
    background: none;
    border: 1px solid #333;
    padding: 4px 12px;
    cursor: pointer;
}
.sv-theme-btn:hover { color: var(--accent-purple); border-color: var(--accent-purple); }

/* Shared detail panel overrides */
.shared-detail-panel {
    position: static !important;
    max-width: 900px;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    margin: 0 auto;
    width: 100%;
    border: none;
    background: var(--bg-primary);
    flex: 1;
}
.shared-detail-panel .dp-header { padding: 24px 32px; }
.shared-detail-panel .dp-tabs { position: static; }
.shared-detail-panel .detail-content { padding: 0 32px 32px; overflow: visible !important; height: auto !important; max-height: none !important; flex: none; }
.sv-tab-content { display: none; }
.sv-tab-content.sv-tab-active { display: block; }

/* Footer CTA — bottom-left stacked per user request */
.sv-footer {
    text-align: left;
    padding: 40px 24px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}
.sv-footer-text {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #525252;
    margin-bottom: 20px;
    line-height: 1.6;
}
.sv-footer-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sv-cta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-purple);
    border: 1px solid var(--accent-purple);
    padding: 10px 24px;
    text-decoration: none;
    transition: all 0.15s;
    display: inline-block;
    text-align: center;
    min-width: 160px;
}
.sv-cta:hover { background: rgba(196, 181, 253, 0.1); }
.sv-cta-sec {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #737373;
    border: 1px solid #333;
    padding: 10px 24px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 160px;
}
.sv-cta-sec:hover { color: var(--text-primary); border-color: #555; }

/* IOC row styles for shared view */
.sv-ioc-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.sv-ioc-row:nth-child(odd) { background: var(--bg-secondary); }
.sv-ioc-row:nth-child(even) { background: var(--bg-surface-alt); }
.sv-ioc-type-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    flex-shrink: 0;
}
.sv-ioc-value { color: #a0a0a0; word-break: break-all; flex: 1; min-width: 0; }
.sv-ioc-ctx { color: #525252; font-size: 10px; max-width: 200px; flex-shrink: 0; }

/* Desc list item arrow */
.desc-list-item { padding-left: 16px; position: relative; }
.desc-list-item::before { content: none; }

/* Responsive */
@media (max-width: 640px) {
    .sv-nav { padding: 10px 16px; }
    .sv-nav-right { gap: 8px; }
    .sv-expiry { display: none; }
    .shared-detail-panel .dp-header { padding: 16px; }
    .shared-detail-panel .dp-tabs { padding: 0 16px; }
    .shared-detail-panel .dp-overview { padding: 16px; }
    .shared-detail-panel .dp-det-content { padding: 16px; }
    .sv-footer { padding: 24px 16px; }
    .sv-ioc-ctx { display: none; }
}

/* Light mode variants for shared view (default) */
[data-theme="light"] .sv-nav { background: #ffffff; border-color: #e5e5e5; }
[data-theme="light"] .sv-badge { color: #888; border-color: #d4d4d4; }
[data-theme="light"] .sv-expiry { color: #999; }
[data-theme="light"] .sv-nav-link { color: #666; }
[data-theme="light"] .sv-theme-btn { color: #666; border-color: #d4d4d4; }
[data-theme="light"] .shared-detail-panel { background: #ffffff; }
[data-theme="light"] .sv-footer { background: #f9fafb; border-color: #e5e5e5; }
[data-theme="light"] .sv-footer-text { color: #666; }
[data-theme="light"] .sv-cta-sec { color: #666; border-color: #d4d4d4; }
[data-theme="light"] .sv-ioc-value { color: #333; }
[data-theme="light"] .sv-ioc-ctx { color: #888; }

/* ==========================================================
 * SHARED VIEW MODE — Full app layout with disabled nav
 * Nav items greyed out; threat page renders as normal
 * Defaults to light mode
 * ========================================================== */
body.shared-view-mode .sidebar-nav .nav-item {
    pointer-events: none;
    opacity: 0.35;
    cursor: not-allowed;
}
body.shared-view-mode .sidebar-nav .nav-item:hover {
    background: transparent !important;
    color: inherit !important;
}
body.shared-view-mode .nav-tier-badge { display: none; }
body.shared-view-mode .nav-count { opacity: 0.5; }
body.shared-view-mode #userInfo { display: none !important; }
body.shared-view-mode #authButtons { display: flex !important; flex-direction: column; gap: 6px; }
body.shared-view-mode #authButtons .nav-auth-btn { width: 100%; text-align: center; }
body.shared-view-mode .stats-mini { display: none; }
body.shared-view-mode .sidebar-header .sidebar-close { display: none; }
body.shared-view-mode #topbarUser { display: none !important; }
body.shared-view-mode .sidebar-logo-badge { display: none; }

/* Hide any banner/stats elements that might leak */
body.shared-view-mode .stats-bar,
body.shared-view-mode .feed-header,
body.shared-view-mode .search-bar { display: none !important; }

/* Shared-mode topbar styling */
.tp-shared-expiry {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: #525252;
    margin-right: 8px;
}
.tp-cta-primary {
    color: var(--accent-purple, #c4b5fd) !important;
    border: 1px solid var(--accent-purple, #c4b5fd) !important;
    text-decoration: none;
}
.tp-cta-primary:hover { background: rgba(196, 181, 253, 0.1); }

/* Light mode tweaks for shared mode */
[data-theme="light"] .tp-shared-expiry { color: #888; }
[data-theme="light"] body.shared-view-mode .sidebar-nav .nav-item { color: #999; }

/* ===== My Feeds — sidebar items ===== */
.nav-myfeeds-title { display:flex; align-items:center; justify-content:space-between; }
.nav-myfeeds-manage {
  color: #525252; text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 0 8px; border-radius: 0; transition: color 0.15s;
}
.nav-myfeeds-manage:hover { color: #c4b5fd; }
/* "[new]" badge on the my_feeds nav heading — italic red, low-contrast on dark, soft pulse */
.nav-myfeeds-new-badge {
  font-style: italic;
  color: #fda4af;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}
[data-theme="light"] .nav-myfeeds-new-badge { color: #e11d48; }
.nav-myfeed-item { position: relative; }
.nav-myfeed-item .nav-dot.color-rose { background: #fda4af; }
.nav-myfeed-item .nav-dot.color-peach { background: #fdba74; }
.nav-myfeed-item .nav-dot.color-lavender { background: #c4b5fd; }
.nav-myfeed-item .nav-dot.color-mint { background: #a8e6cf; }
.nav-myfeed-item .nav-dot.color-sky { background: #7dd3fc; }
.nav-myfeed-item .nav-dot.color-yellow { background: #fde68a; }
.nav-myfeed-unread {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #fda4af; margin-left: 6px; vertical-align: middle;
  box-shadow: 0 0 6px rgba(253,164,175,0.5);
}

/* ===== My Feeds — management page (/my-feeds) — mf-* prefix ===== */
.mf-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.mf-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.mf-title-block .mf-title { font-size: 18px; font-weight: 700; color: #e8e8e8; }
.mf-title-block .mf-sub { font-size: 12px; color: #525252; margin-top: 4px; }
.mf-btn {
  font-family: var(--font-mono); font-size: 12px;
  background: #c4b5fd; color: #0a0a0a; border: none;
  padding: 10px 16px; cursor: pointer; font-weight: 700; white-space: nowrap;
}
.mf-btn:hover { opacity: 0.85; }
.mf-btn:disabled { opacity: 0.4; cursor: default; }
.mf-btn-secondary {
  background: none; border: 1px solid #333; color: #e0e0e0; padding: 10px 16px;
  font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.mf-btn-secondary:hover { border-color: #c4b5fd; color: #fff; }
.mf-btn-danger {
  background: none; border: 1px solid #ef4444; color: #ef4444;
  font-family: var(--font-mono); font-size: 12px; padding: 10px 16px; cursor: pointer;
}
.mf-btn-danger:hover { background: rgba(239,68,68,0.1); }
.mf-empty { text-align: center; padding: 60px 20px; color: #525252; font-size: 13px; }
.mf-limit-bar { font-size: 11px; color: #737373; margin-bottom: 16px; }
.mf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mf-card { background: #111; border: 1px solid #222; padding: 16px; border-left: 3px solid #c4b5fd; transition: border-color 0.15s; }
.mf-card:hover { border-color: #c4b5fd; }
.mf-card.color-rose { border-left-color: #fda4af; }
.mf-card.color-peach { border-left-color: #fdba74; }
.mf-card.color-lavender { border-left-color: #c4b5fd; }
.mf-card.color-mint { border-left-color: #a8e6cf; }
.mf-card.color-sky { border-left-color: #7dd3fc; }
.mf-card.color-yellow { border-left-color: #fde68a; }
.mf-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.mf-card-name { font-size: 14px; font-weight: 700; color: #e8e8e8; }
.mf-card-counts { font-size: 11px; color: #a8e6cf; }
.mf-card-counts .mf-new { color: #fda4af; font-weight: 700; margin-left: 6px; }
.mf-card-desc { font-size: 11px; color: #a0a0a0; min-height: 20px; margin-bottom: 8px; line-height: 1.5; }
.mf-card-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; min-height: 20px; }
.mf-pill { font-size: 9px; padding: 2px 6px; background: rgba(196,181,253,0.1); color: #c4b5fd; }
.mf-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mf-card-actions button, .mf-card-actions a {
  font-family: var(--font-mono); font-size: 11px; padding: 6px 10px;
  background: none; border: 1px solid #333; color: #e0e0e0;
  cursor: pointer; text-decoration: none; text-align: center;
  white-space: nowrap;        /* keep "[ open ]" / "[ ✨ explain ]" on one line */
  flex: 0 0 auto;             /* don't shrink mid-text */
}
.mf-card-actions button:hover, .mf-card-actions a:hover { border-color: #c4b5fd; color: #fff; }
.mf-card-actions .mf-card-del { color: #ef4444; border-color: #2a1a1a; }
.mf-card-actions .mf-card-del:hover { border-color: #ef4444; background: rgba(239,68,68,0.05); }

/* Modal */
.mf-modal-bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.mf-modal {
  background: #0a0a0a; border: 1px solid #222; max-width: 640px; width: 100%;
  padding: 24px; font-family: var(--font-mono);
}
.mf-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.mf-modal-title { font-size: 15px; font-weight: 700; color: #e8e8e8; }
.mf-modal-close { background:none; border:none; color:#737373; font-size:18px; cursor:pointer; }
.mf-modal-close:hover { color: #fff; }
.mf-field { margin-bottom: 14px; }
.mf-field-label { font-size: 11px; color: #737373; margin-bottom: 6px; display: block; }
.mf-input, .mf-textarea {
  width: 100%; background: #111; border: 1px solid #222; color: #e8e8e8;
  font-family: var(--font-mono); font-size: 12px; padding: 8px 10px;
  outline: none; box-sizing: border-box;
}
.mf-input:focus, .mf-textarea:focus { border-color: #c4b5fd; }
.mf-textarea { resize: vertical; min-height: 60px; }
.mf-color-row { display:flex; gap: 8px; }
.mf-color-swatch {
  width: 24px; height: 24px; cursor: pointer; border: 2px solid transparent;
  transition: border-color 0.15s;
}
.mf-color-swatch.selected { border-color: #fff; }
.mf-color-swatch.color-rose { background: #fda4af; }
.mf-color-swatch.color-peach { background: #fdba74; }
.mf-color-swatch.color-lavender { background: #c4b5fd; }
.mf-color-swatch.color-mint { background: #a8e6cf; }
.mf-color-swatch.color-sky { background: #7dd3fc; }
.mf-color-swatch.color-yellow { background: #fde68a; }
.mf-chip-row { display:flex; flex-wrap: wrap; gap: 4px; }
.mf-chip {
  font-family: var(--font-mono); font-size: 10px; padding: 4px 8px;
  background: none; border: 1px solid #222; color: #a0a0a0; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mf-chip:hover { border-color: #c4b5fd; color: #e8e8e8; }
.mf-chip.selected { background: rgba(196,181,253,0.1); border-color: #c4b5fd; color: #c4b5fd; }
.mf-chip.color-rose.selected { background: rgba(253,164,175,0.1); border-color: #fda4af; color: #fda4af; }
.mf-chip.color-peach.selected { background: rgba(253,186,116,0.1); border-color: #fdba74; color: #fdba74; }
.mf-preview { padding: 10px; background: #111; border: 1px solid #222; font-size: 11px; color: #a8e6cf; text-align: center; }
.mf-modal-actions { display:flex; gap: 8px; justify-content:flex-end; margin-top: 16px; flex-wrap: wrap; }

/* View-filtered main feed badge */
.feed-view-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 2px 8px; margin-left: 8px;
  background: rgba(196,181,253,0.1); color: #c4b5fd;
}
.feed-view-badge .fv-dot { width: 6px; height: 6px; border-radius: 50%; background: #c4b5fd; }
.feed-view-badge.color-rose { background: rgba(253,164,175,0.1); color: #fda4af; }
.feed-view-badge.color-rose .fv-dot { background: #fda4af; }
.feed-view-badge.color-peach { background: rgba(253,186,116,0.1); color: #fdba74; }
.feed-view-badge.color-peach .fv-dot { background: #fdba74; }
.feed-view-badge.color-mint { background: rgba(168,230,207,0.1); color: #a8e6cf; }
.feed-view-badge.color-mint .fv-dot { background: #a8e6cf; }
.feed-view-badge.color-sky { background: rgba(125,211,252,0.1); color: #7dd3fc; }
.feed-view-badge.color-sky .fv-dot { background: #7dd3fc; }
.feed-view-badge.color-yellow { background: rgba(253,230,138,0.1); color: #fde68a; }
.feed-view-badge.color-yellow .fv-dot { background: #fde68a; }
.feed-view-clear {
  margin-left: 8px; color: #525252; cursor: pointer; font-size: 11px;
  text-decoration: none;
}
.feed-view-clear:hover { color: #c4b5fd; }

@media (max-width: 768px) {
  .mf-grid { grid-template-columns: 1fr; }
  .mf-page { padding: 16px 12px; }
}
@media (max-width: 480px) {
  .mf-card { padding: 12px; }
  .mf-card-actions button, .mf-card-actions a { font-size: 10px; padding: 5px 8px; white-space: nowrap; }
}

/* ============================================================
   Feed-view CANVAS — adaptive dendrogram (shared with /dns-enrichment).
   CSS prefix `.fc-tree-*` lives here for global use.
   ============================================================ */

/* .fv-canvas-toggle-bar and .fv-canvas-toggle were the old list/canvas chrome
   removed by the tab-bar refactor. Their CSS is dropped to keep the file tight;
   .fv-canvas-wrap is still used as the inner container for the canvas tab pane. */
.fv-canvas-wrap { padding: 4px 0; }

.fc-tree-summary {
  font-family: var(--font-mono); font-size: 12px; color: #e0e0e0;
  padding: 12px 0; border-bottom: 1px solid #222;
}
.fc-tree-controls {
  display: flex; gap: 8px; align-items: center; padding: 8px 0;
}
.fc-tree-ctrl {
  font-family: var(--font-mono); font-size: 11px; padding: 4px 9px;
  background: #141414; color: #888; border: 1px solid #222;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.1s, color 0.1s;
}
.fc-tree-ctrl:hover { border-color: #c4b5fd; color: #c4b5fd; }
.fc-tree-zoomlabel {
  font-family: var(--font-mono); font-size: 11px; color: #525252;
  margin-left: 4px;
}
.fc-tree-vp::-webkit-scrollbar { width: 8px; height: 8px; }
.fc-tree-vp::-webkit-scrollbar-thumb { background: #2a2a2a; }
.fc-tree-vp::-webkit-scrollbar-track { background: #0d0d0d; }
.fc-tree-node:hover rect { stroke-width: 2 !important; }
.fc-tree-legend {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 0;
  font-family: var(--font-mono); font-size: 10px; color: #525252;
}
.fc-tree-legend-item { display: flex; align-items: center; gap: 4px; }
.fc-tree-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Light mode */
[data-theme="light"] .fc-tree-summary { color: #1a1a1a; border-bottom-color: #eee; }
[data-theme="light"] .fc-tree-ctrl { background: #fafafa; color: #555; border-color: #ddd; }
[data-theme="light"] .fc-tree-ctrl:hover { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .fc-tree-vp { background: #fafafa !important; border-color: #eee !important; }
[data-theme="light"] .fc-tree-vp svg rect[fill="#1a1a1a"] { fill: #fff; }
[data-theme="light"] .fc-tree-vp svg text { fill: #1a1a1a !important; }
[data-theme="light"] .fc-tree-zoomlabel { color: #999; }

/* Mobile */
@media (max-width: 480px) {
  .fc-tree-controls { flex-wrap: wrap; }
  .fc-tree-vp { max-height: 480px !important; }
}

[data-theme="light"] .nav-myfeeds-manage { color: #888; }
[data-theme="light"] .nav-myfeeds-manage:hover { color: #7c3aed; }
[data-theme="light"] .mf-page { color: #1a1a1a; }
[data-theme="light"] .mf-title-block .mf-title { color: #1a1a1a; }
[data-theme="light"] .mf-card { background: #fff; border-color: #ddd; }
[data-theme="light"] .mf-card-name { color: #1a1a1a; }
[data-theme="light"] .mf-modal { background: #fff; border-color: #ddd; }
[data-theme="light"] .mf-modal-title { color: #1a1a1a; }
[data-theme="light"] .mf-input, [data-theme="light"] .mf-textarea { background: #f5f5f5; border-color: #ddd; color: #1a1a1a; }
[data-theme="light"] .mf-preview { background: #f5f5f5; border-color: #ddd; }
[data-theme="light"] .mf-chip { border-color: #ddd; color: #555; }
[data-theme="light"] .mf-btn-secondary { color: #1a1a1a; border-color: #ddd; }

/* ===== Feed notifications (topbar bell + dropdown) ===== */
.notif-wrap { position: relative; }
.notif-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 12px;
  background: none; border: none; color: #a0a0a0; cursor: pointer;
  padding: 4px 8px; line-height: 1;
}
.notif-btn:hover { color: #e8e8e8; }
.notif-btn.has-unread { color: #fda4af; }
.notif-bracket { color: #525252; }
.notif-icon { font-size: 14px; }
.notif-label { font-size: 11px; }
.notif-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: #fda4af; color: #0a0a0a; padding: 0 5px;
  margin-left: 2px;
}
.notif-panel {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: #0a0a0a; border: 1px solid #222; z-index: 200;
  min-width: 320px; max-width: 380px; max-height: 480px;
  overflow-y: auto; font-family: var(--font-mono);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid #222;
  font-size: 11px; color: #737373; text-transform: uppercase; letter-spacing: 0.05em;
}
.notif-panel-head a {
  color: #c4b5fd; text-decoration: none; font-size: 10px;
}
.notif-panel-head a:hover { color: #e8e8e8; }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 11px; color: #525252; }
.notif-mark-read {
  font-family: var(--font-mono); font-size: 10px;
  background: none; border: 1px solid #333; color: #c4b5fd;
  padding: 3px 8px; cursor: pointer;
}
.notif-mark-read:hover { border-color: #c4b5fd; background: rgba(196,181,253,0.06); }
.notif-mark-read:disabled { opacity: 0.4; cursor: default; }
.notif-list { display: flex; flex-direction: column; }
.notif-threat-row-flat {
  display: block; padding: 10px 12px;
  text-decoration: none; color: #a0a0a0;
  border-top: 1px solid #161616; transition: background 0.1s;
}
.notif-threat-row-flat:hover { background: rgba(196,181,253,0.04); }
.notif-row-top { display:flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.notif-when { margin-left: auto; font-size: 9px; color: #525252; }
.notif-sev-pill {
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.notif-sev-critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.notif-sev-high { background: rgba(249,115,22,0.15); color: #f97316; }
.notif-sev-medium { background: rgba(234,179,8,0.15); color: #eab308; }
.notif-sev-low { background: rgba(34,197,94,0.15); color: #22c55e; }
.notif-feed-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.notif-feed-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 6px; text-decoration: none;
  background: rgba(196,181,253,0.08); color: #c4b5fd;
  border: 1px solid rgba(196,181,253,0.18);
}
.notif-feed-chip:hover { background: rgba(196,181,253,0.16); }
.notif-feed-chip.color-rose { background: rgba(253,164,175,0.08); color: #fda4af; border-color: rgba(253,164,175,0.18); }
.notif-feed-chip.color-peach { background: rgba(253,186,116,0.08); color: #fdba74; border-color: rgba(253,186,116,0.18); }
.notif-feed-chip.color-mint { background: rgba(168,230,207,0.08); color: #a8e6cf; border-color: rgba(168,230,207,0.18); }
.notif-feed-chip.color-sky { background: rgba(125,211,252,0.08); color: #7dd3fc; border-color: rgba(125,211,252,0.18); }
.notif-feed-chip.color-yellow { background: rgba(253,230,138,0.08); color: #fde68a; border-color: rgba(253,230,138,0.18); }
[data-theme="light"] .notif-mark-read { color: #7c3aed; border-color: #ddd; }
[data-theme="light"] .notif-mark-read:hover { background: rgba(124,58,237,0.06); }
[data-theme="light"] .notif-threat-row-flat { color: #555; border-top-color: #f0f0f0; }
[data-theme="light"] .notif-threat-row-flat:hover { background: rgba(124,58,237,0.04); }
[data-theme="light"] .notif-when { color: #999; }

/* ===== My Feeds: tabs + Library tab ===== */
.mf-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid #222; }
.mf-tab {
  font-family: var(--font-mono); font-size: 12px;
  padding: 10px 18px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: #525252; cursor: pointer; transition: all 0.15s;
}
.mf-tab:hover { color: #e8e8e8; }
.mf-tab.mf-tab-active { color: #c4b5fd; border-bottom-color: #c4b5fd; }

.mf-lib-section { margin-bottom: 24px; }
.mf-lib-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid #1e1e1e; margin-bottom: 8px;
}
.mf-lib-section-title { font-size: 12px; font-weight: 700; color: #c4b5fd; }
.mf-lib-section-count { font-size: 11px; color: #525252; }
.mf-lib-empty { padding: 16px; font-size: 11px; color: #525252; font-style: italic; }
.mf-lib-items { display: flex; flex-direction: column; gap: 4px; }
.mf-lib-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #111; border: 1px solid #1e1e1e;
  transition: border-color 0.15s;
}
.mf-lib-item:hover { border-color: #2a2a2a; }
.mf-lib-item-main {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
a.mf-lib-item-main:hover .mf-lib-id, a.mf-lib-item-main:hover .mf-lib-title { color: #c4b5fd; }
.mf-lib-id {
  font-size: 12px; font-weight: 700; color: #e8e8e8;
  font-family: var(--font-mono); overflow-wrap: anywhere;
}
.mf-lib-title { font-size: 11px; color: #a0a0a0; }
.mf-lib-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 10px; color: #737373; }
.mf-lib-link { color: #c4b5fd; text-decoration: none; font-size: 10px; }
.mf-lib-link:hover { text-decoration: underline; }
.mf-lib-when { color: #525252; }
.mf-lib-remove {
  font-family: var(--font-mono); font-size: 16px;
  background: none; border: 1px solid #2a1a1a; color: #525252;
  width: 28px; height: 28px; cursor: pointer; flex-shrink: 0;
  line-height: 1; transition: all 0.15s;
}
.mf-lib-remove:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.05); }

.mf-badge {
  font-size: 9px; padding: 1px 5px; font-weight: 600; text-transform: uppercase;
  font-family: var(--font-mono);
}
.mf-badge-critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.mf-badge-high { background: rgba(249,115,22,0.15); color: #f97316; }
.mf-badge-medium { background: rgba(234,179,8,0.15); color: #eab308; }
.mf-badge-low { background: rgba(34,197,94,0.15); color: #22c55e; }
.mf-badge-cat { background: rgba(196,181,253,0.1); color: #c4b5fd; }

@media (max-width: 768px) {
  .mf-lib-item { flex-direction: row; }
}

[data-theme="light"] .mf-tab { color: #888; }
[data-theme="light"] .mf-tab:hover { color: #1a1a1a; }
[data-theme="light"] .mf-tab.mf-tab-active { color: #7c3aed; border-bottom-color: #7c3aed; }
[data-theme="light"] .mf-tabs { border-bottom-color: #ddd; }
[data-theme="light"] .mf-lib-section-head { border-bottom-color: #eee; }
[data-theme="light"] .mf-lib-section-title { color: #7c3aed; }
[data-theme="light"] .mf-lib-item { background: #fff; border-color: #eee; }
[data-theme="light"] .mf-lib-item:hover { border-color: #ddd; }
[data-theme="light"] .mf-lib-id { color: #1a1a1a; }

/* ===== Library drill-down (Deploy 2) ===== */
.mf-lib-item-main { cursor: pointer; }
.mf-lib-caret {
  display: inline-block; margin-left: 6px; font-size: 9px;
  color: #525252; transition: transform 0.15s; vertical-align: middle;
}
.mf-lib-item.expanded .mf-lib-caret { transform: rotate(90deg); color: #c4b5fd; }
.mf-lib-item.expanded { border-color: #c4b5fd; }
.mf-lib-drilldown {
  padding: 14px 16px; background: var(--bg-elevated, #1a1a1a);
  border-top: 1px solid var(--border, #222);
  font-family: var(--font-mono); font-size: 11px;
}
.mf-lib-dd-rose { border-left: 3px solid #fda4af; }
.mf-lib-dd-peach { border-left: 3px solid #fdba74; }
.mf-lib-dd-lavender { border-left: 3px solid #c4b5fd; }
.mf-lib-dd-mint { border-left: 3px solid #a8e6cf; }
.mf-lib-dd-sky { border-left: 3px solid #7dd3fc; }
.mf-lib-dd-yellow { border-left: 3px solid #fde68a; }
.mf-lib-dd-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  padding: 6px 0; border-bottom: 1px dotted #1f1f1f;
}
.mf-lib-dd-row:last-child { border-bottom: none; }
.mf-lib-dd-label {
  flex: 0 0 90px; color: #737373; font-size: 10px;
  text-transform: lowercase; letter-spacing: 0.04em;
}
.mf-lib-dd-row > span:not(.mf-lib-dd-label):not(.mf-badge):not(.mf-pill) { flex: 1; min-width: 0; color: #e8e8e8; word-wrap: break-word; }
.mf-lib-dd-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid #222; }
.mf-lib-dd-open {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  color: #c4b5fd; text-decoration: none; padding: 4px 10px;
  border: 1px solid #2a2a2a; margin-right: 6px;
}
.mf-lib-dd-open:hover { border-color: #c4b5fd; background: rgba(196,181,253,0.06); }

/* Code blocks inside drill-down (detection rule bodies) */
.mf-lib-code-wrap {
  margin-top: 10px; border: 1px solid #1f1f1f; background: #0d0d0d;
  position: relative;
}
.mf-lib-code-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: #161616;
  font-family: var(--font-mono); font-size: 10px; color: #737373;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid #1f1f1f;
}
.mf-lib-copy {
  font-family: var(--font-mono); font-size: 10px;
  background: none; border: 1px solid #2a2a2a; color: #c4b5fd;
  padding: 3px 8px; cursor: pointer;
}
.mf-lib-copy:hover { border-color: #c4b5fd; background: rgba(196,181,253,0.06); }
.mf-lib-code-body {
  max-height: 400px; overflow-y: auto; overflow-x: auto;
  padding: 12px 14px; margin: 0;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: #d4d4d4; white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.mf-lib-code-mini {
  padding: 8px 10px; margin: 0;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
  color: #d4d4d4; background: #0d0d0d; border: 1px solid #1f1f1f;
  white-space: pre-wrap; word-break: break-all;
  max-height: 100px; overflow-y: auto;
}

@media (max-width: 768px) {
  .mf-lib-dd-label { flex: 0 0 100%; }
  .mf-lib-code-body { font-size: 10px; padding: 10px; }
}

[data-theme="light"] .mf-lib-drilldown { background: #f5f5f5; border-top-color: #ddd; }
[data-theme="light"] .mf-lib-dd-row { border-bottom-color: #eee; }
[data-theme="light"] .mf-lib-dd-row > span:not(.mf-lib-dd-label):not(.mf-badge):not(.mf-pill) { color: #1a1a1a; }
[data-theme="light"] .mf-lib-dd-label { color: #888; }
[data-theme="light"] .mf-lib-dd-foot { border-top-color: #ddd; }
[data-theme="light"] .mf-lib-dd-open { color: #7c3aed; border-color: #ddd; }
[data-theme="light"] .mf-lib-code-wrap { background: #fafafa; border-color: #ddd; }
[data-theme="light"] .mf-lib-code-head { background: #eee; color: #555; }
[data-theme="light"] .mf-lib-code-body { color: #1a1a1a; }
[data-theme="light"] .mf-lib-copy { color: #7c3aed; border-color: #ddd; }
[data-theme="light"] .mf-lib-code-mini { background: #fafafa; border-color: #ddd; color: #1a1a1a; }

/* ===== Save Items modal (bulk save IOCs/refs/affected from threat detail) ===== */
.si-modal-bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.si-modal {
  background: #0a0a0a; border: 1px solid #222; max-width: 720px; width: 100%;
  padding: 24px; font-family: var(--font-mono);
}
.si-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.si-modal-title { font-size: 15px; font-weight: 700; color: #e8e8e8; }
.si-modal-close { background:none; border:none; color:#737373; font-size:18px; cursor:pointer; }
.si-modal-close:hover { color: #fff; }
.si-modal-sub { font-size: 11px; color: #525252; margin-bottom: 16px; }
.si-modal-sub a { color: #c4b5fd; }
.si-actions-bar { display:flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.si-mini {
  font-family: var(--font-mono); font-size: 10px;
  background: none; border: 1px solid #2a2a2a; color: #a0a0a0;
  padding: 4px 10px; cursor: pointer;
}
.si-mini:hover { border-color: #c4b5fd; color: #fff; }
.si-sections { max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.si-section { margin-bottom: 14px; }
.si-section-head {
  font-size: 11px; color: #c4b5fd; padding: 6px 0;
  border-bottom: 1px solid #1e1e1e; margin-bottom: 4px;
  text-transform: lowercase;
}
.si-empty { font-size: 11px; color: #525252; padding: 8px 4px; font-style: italic; }
.si-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 4px; cursor: pointer;
  border-bottom: 1px solid #161616;
}
.si-item:hover { background: rgba(196,181,253,0.03); }
.si-item input[type=checkbox] { margin-top: 3px; cursor: pointer; accent-color: #c4b5fd; }
.si-item-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.si-item-val { font-size: 11px; color: #e8e8e8; overflow-wrap: anywhere; }
.si-item-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 9px; color: #737373; }
.si-pill {
  font-size: 9px; padding: 1px 5px;
  background: rgba(196,181,253,0.08); color: #c4b5fd;
}
.si-modal-actions { display:flex; gap: 8px; justify-content:flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid #222; }
.si-status { font-size: 11px; color: #fda4af; margin-left: 12px; }

/* TLQL parse error display under filter results */
.tlql-error {
  font-family: var(--font-mono); font-size: 11px;
  color: #fda4af; margin-top: 8px; padding: 6px 10px;
  background: rgba(253,164,175,0.06); border-left: 2px solid #fda4af;
}
[data-theme="light"] .tlql-error { color: #e11d48; background: rgba(225,29,72,0.06); }

.mf-tlql-input { font-family: var(--font-mono); font-size: 11px; color: #c4b5fd; }
.mf-tlql-status { font-size: 10px; margin-top: 4px; min-height: 14px; }
.mf-tlql-ok { color: #a8e6cf; }
.mf-tlql-err { color: #fda4af; }

/* ===== Modal v3: TLQL-on-top + filter group tabs (Deploy 3) ===== */
.mf-modal { max-height: 90vh; overflow-y: auto; }
.mf-tlql-top {
  background: #0a0a0a;
  border: 1px solid #1f1f1f;
  padding: 14px 16px;
  margin-bottom: 16px;
  position: sticky; top: 0; z-index: 10;
}
.mf-tlql-top .mf-field-label { display: flex; justify-content: space-between; align-items: baseline; }
.mf-tlql-top .mf-preview { margin-top: 8px; padding: 8px 10px; background: #111; border: 1px solid #1f1f1f; }
.mf-divider {
  border-top: 1px solid #222; margin: 18px 0;
}
.mf-group-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.mf-group-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  background: none; border: 1px solid #2a2a2a; color: #a0a0a0;
  padding: 6px 10px; cursor: pointer;
  min-height: 32px;
}
.mf-group-tab:hover { color: #e8e8e8; border-color: #444; }
.mf-group-tab.mf-group-active { border-color: #c4b5fd; color: #e8e8e8; background: rgba(196,181,253,0.06); }
.mf-group-dot { width: 8px; height: 8px; background: #c4b5fd; flex-shrink: 0; }
.mf-group-lavender .mf-group-dot { background: #c4b5fd; }
.mf-group-peach .mf-group-dot { background: #fdba74; }
.mf-group-rose .mf-group-dot { background: #fda4af; }
.mf-group-peach.mf-group-active { border-color: #fdba74; background: rgba(253,186,116,0.08); }
.mf-group-rose.mf-group-active { border-color: #fda4af; background: rgba(253,164,175,0.08); }
.mf-group-x {
  display: inline-block; padding: 0 4px; margin-left: 2px;
  color: #737373; font-weight: bold; line-height: 1; cursor: pointer;
}
.mf-group-x:hover { color: #fda4af; }
.mf-group-add {
  font-family: var(--font-mono); font-size: 11px;
  background: none; border: 1px dashed #2a2a2a; color: #737373;
  padding: 6px 10px; cursor: pointer; min-height: 32px;
}
.mf-group-add:hover { border-color: #c4b5fd; color: #c4b5fd; }
.mf-group-body {
  padding-top: 4px;
}

@media (max-width: 768px) {
  .mf-tlql-top { position: static; padding: 10px 12px; }
  .mf-group-tabs { gap: 4px; }
  .mf-group-tab, .mf-group-add { padding: 8px 10px; font-size: 10px; }
}

[data-theme="light"] .mf-tlql-top { background: #fafafa; border-color: #eee; }
[data-theme="light"] .mf-tlql-top .mf-preview { background: #fff; border-color: #ddd; }
[data-theme="light"] .mf-divider { border-top-color: #eee; }
[data-theme="light"] .mf-group-tab { color: #888; border-color: #ddd; }
[data-theme="light"] .mf-group-tab.mf-group-active { color: #1a1a1a; }
[data-theme="light"] .mf-group-add { color: #888; border-color: #ddd; }

/* ===== Deploy 4: customizable view modules ===== */
.mf-modules {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 8px;
}
.mf-module {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.mf-module:hover { background: rgba(196,181,253,0.04); }
.mf-module input[type=checkbox] { margin-top: 3px; cursor: pointer; accent-color: #c4b5fd; }
.mf-module-label { font-family: var(--font-mono); font-size: 11px; color: #e8e8e8; font-weight: 700; flex-shrink: 0; }
.mf-module-desc { font-family: var(--font-mono); font-size: 10px; color: #525252; }
.mf-module input[type=checkbox]:checked ~ .mf-module-label { color: #c4b5fd; }
.mf-module-locked { opacity: 0.55; cursor: not-allowed; }
.mf-module-locked input[type=checkbox] { cursor: not-allowed; }
.mf-module-lock {
  font-family: var(--font-mono); font-size: 9px;
  color: #fda4af; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Feed-view modules — rendered into #threatsList */
.fv-mod-section {
  margin-bottom: 18px; padding: 0;
}
.fv-mod-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; cursor: pointer;
  background: #0d0d0d; border: 1px solid #1f1f1f;
  font-family: var(--font-mono); font-size: 12px;
  transition: border-color 0.15s;
}
.fv-mod-head:hover { border-color: #2a2a2a; }
.fv-mod-title { color: #c4b5fd; font-weight: 700; }
.fv-mod-caret { color: #525252; transition: transform 0.15s; }
.fv-mod-section.fv-mod-collapsed .fv-mod-caret { transform: rotate(-90deg); }
.fv-mod-section.fv-mod-collapsed .fv-mod-body { display: none; }
.fv-mod-body {
  background: #0a0a0a; border: 1px solid #1f1f1f; border-top: none;
  padding: 4px 0;
}
.fv-mod-empty { padding: 16px; font-size: 11px; color: #525252; font-style: italic; text-align: center; }
.fv-mod-subhead {
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: 10px; color: #737373;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: #111;
}
.fv-mod-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #161616;
  text-decoration: none; color: inherit;
  font-family: var(--font-mono); font-size: 11px;
  transition: background 0.1s;
}
.fv-mod-row:hover { background: rgba(196,181,253,0.04); }
.fv-mod-row:last-child { border-bottom: none; }
.fv-mod-row-flex { flex-wrap: wrap; }
.fv-mod-row-id { color: #c4b5fd; font-weight: 700; flex-shrink: 0; }
.fv-mod-row-title { color: #a0a0a0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-mod-row-meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.fv-mod-row-threat { color: #c4b5fd; font-size: 10px; }
a.fv-mod-row-title { color: #c4b5fd; text-decoration: none; }
a.fv-mod-row-title:hover { text-decoration: underline; }
a.fv-mod-row-threat { text-decoration: none; }
a.fv-mod-row-threat:hover { text-decoration: underline; }
.threats-list-inner { display: flex; flex-direction: column; gap: 8px; padding: 8px; }

.fv-mod-mitre-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px; padding: 10px;
}
.fv-mod-mitre-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; background: #111; border: 1px solid #1f1f1f;
}
.fv-mod-mitre-id { font-family: var(--font-mono); font-size: 11px; color: #fdba74; font-weight: 700; }
.fv-mod-mitre-name { font-family: var(--font-mono); font-size: 10px; color: #a0a0a0; }
.fv-mod-mitre-count { font-family: var(--font-mono); font-size: 9px; color: #a8e6cf; align-self: flex-end; }
.fv-mod-mitre-tactic { font-family: var(--font-mono); font-size: 9px; color: #c4b5fd; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }

/* ----- Feed-view module toolbar (filter pills + search + sort) ----- */
.fv-mod-toolbar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px;
  background: #0d0d0d; border: 1px solid #1f1f1f; border-top: none;
}
.fv-mod-pillrow {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fv-mod-pillrow-secondary { opacity: 0.85; }
.fv-mod-pill {
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  background: transparent; color: #a0a0a0;
  border: 1px solid #1f1f1f;
  padding: 5px 9px;
  cursor: pointer; transition: border-color 0.1s, color 0.1s, background 0.1s;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.fv-mod-pill:hover { border-color: #c4b5fd; color: #e5e5e5; }
.fv-mod-pill.active { background: #c4b5fd; color: #0a0a0a; border-color: #c4b5fd; }
.fv-mod-pill-count { margin-left: 5px; opacity: 0.65; font-weight: 700; }
.fv-mod-pill.active .fv-mod-pill-count { opacity: 0.8; }
.fv-mod-toolbar-bottom {
  display: flex; gap: 8px; align-items: center; margin-top: 2px;
}
.fv-mod-search {
  flex: 1; min-width: 0;
  background: transparent; border: none; border-bottom: 1px solid #1f1f1f;
  color: #e5e5e5; font-family: var(--font-mono); font-size: 11px;
  padding: 5px 4px; outline: none;
}
.fv-mod-search:focus { border-bottom-color: #c4b5fd; }
.fv-mod-search::placeholder { color: #525252; }
.fv-mod-sort {
  background: #0a0a0a; border: 1px solid #1f1f1f; color: #a0a0a0;
  font-family: var(--font-mono); font-size: 10px; padding: 4px 6px;
  cursor: pointer; text-transform: uppercase;
}

/* ----- Per-row hide/cap classes (filter mechanics) ----- */
.fv-mod-rowhidden { display: none !important; }
.fv-mod-rowcapped { display: none; }
.fv-mod-grouphidden { display: none; }
.fv-mod-sub-count { color: #525252; margin-left: 4px; font-weight: 700; }

/* ----- Load-more button ----- */
.fv-mod-loadmore {
  display: block; width: 100%;
  background: transparent; border: none; border-top: 1px dashed #1f1f1f;
  color: #c4b5fd; font-family: var(--font-mono); font-size: 10px;
  padding: 10px 12px; cursor: pointer; text-align: left;
  transition: background 0.1s, color 0.1s;
}
.fv-mod-loadmore:hover { background: rgba(196,181,253,0.05); color: #ddd6fe; }

/* ----- IOC sub-type badges + color-coded values ----- */
.fv-mod-iocbadge {
  display: inline-block; padding: 2px 6px; font-size: 9px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid #1f1f1f; color: #737373;
  background: rgba(255,255,255,0.02);
  min-width: 38px; text-align: center;
}
.fv-mod-iocbadge-ip       { color: #bae6fd; border-color: rgba(186,230,253,0.25); }
.fv-mod-iocbadge-domain   { color: #ddd6fe; border-color: rgba(221,214,254,0.25); }
.fv-mod-iocbadge-url      { color: #fed7aa; border-color: rgba(254,215,170,0.25); }
.fv-mod-iocbadge-email    { color: #fbcfe8; border-color: rgba(251,207,232,0.25); }
.fv-mod-iocbadge-md5,
.fv-mod-iocbadge-sha1,
.fv-mod-iocbadge-sha256,
.fv-mod-iocbadge-sha512,
.fv-mod-iocbadge-hash     { color: #a7f3d0; border-color: rgba(167,243,208,0.25); }
.fv-mod-iocbadge-filename,
.fv-mod-iocbadge-path     { color: #fef3c7; border-color: rgba(254,243,199,0.25); }
.fv-mod-iocbadge-registry,
.fv-mod-iocbadge-mutex,
.fv-mod-iocbadge-process,
.fv-mod-iocbadge-pipe,
.fv-mod-iocbadge-generic  { color: #fca5a5; border-color: rgba(252,165,165,0.25); }

.fv-mod-ioc-ip       { color: #bae6fd !important; }
.fv-mod-ioc-domain   { color: #ddd6fe !important; }
.fv-mod-ioc-url      { color: #fed7aa !important; }
.fv-mod-ioc-email    { color: #fbcfe8 !important; }
.fv-mod-ioc-md5,
.fv-mod-ioc-sha1,
.fv-mod-ioc-sha256,
.fv-mod-ioc-sha512,
.fv-mod-ioc-hash     { color: #a7f3d0 !important; }
.fv-mod-ioc-filename,
.fv-mod-ioc-path     { color: #fef3c7 !important; }
.fv-mod-ioc-registry,
.fv-mod-ioc-mutex,
.fv-mod-ioc-process,
.fv-mod-ioc-pipe,
.fv-mod-ioc-generic  { color: #fca5a5 !important; }

.fv-mod-row-ioc { gap: 8px; }
.fv-mod-row-ioc .fv-mod-ioc-value { flex: 1; min-width: 0; word-break: break-all; }

/* ----- Date column ----- */
.fv-mod-date {
  font-size: 9px; color: #525252; min-width: 36px; text-align: right;
  font-family: var(--font-mono); flex-shrink: 0;
}

/* ----- Inline expandable detail ----- */
.fv-mod-row[data-expandable] { cursor: pointer; }
.fv-mod-row.fv-mod-row-expanded {
  background: rgba(196,181,253,0.06);
  border-left: 2px solid #c4b5fd;
}
.fv-mod-row-threat[data-threat] {
  background: transparent; color: #c4b5fd;
  border: none; padding: 0; font: inherit; cursor: pointer;
  font-size: 10px;
}
.fv-mod-row-threat[data-threat]:hover { text-decoration: underline; }
.fv-mod-row-detail {
  max-height: 0; overflow: hidden;
  transition: max-height 0.2s ease;
  border-bottom: 1px solid #161616;
  background: #060606;
}
.fv-mod-row-detail-open {
  max-height: 600px;
  overflow-y: auto;
}
.fv-mod-row-detail-inner {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px;
}
.fv-mod-detail-section-head {
  font-size: 9px; color: #525252; text-transform: uppercase;
  letter-spacing: 0.04em; font-family: var(--font-mono);
  margin-bottom: 2px;
}
.fv-mod-detail-codeblock {
  font-family: var(--font-mono); font-size: 11px; color: #ddd;
  padding: 10px; background: #0a0a0a; border: 1px solid #1f1f1f;
  white-space: pre-wrap; word-break: break-all;
  max-height: 280px; overflow-y: auto;
  line-height: 1.5;
}
.fv-mod-detail-copy {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  background: transparent; border: 1px solid #1f1f1f;
  color: #c4b5fd; padding: 4px 10px; cursor: pointer;
  align-self: flex-start; text-decoration: none;
  transition: border-color 0.1s;
}
.fv-mod-detail-copy:hover { border-color: #c4b5fd; }
.fv-mod-detail-chip {
  display: inline-block; padding: 2px 7px; margin: 2px 3px 2px 0;
  font-family: var(--font-mono); font-size: 10px; color: #c4b5fd;
  background: transparent; border: 1px solid rgba(196,181,253,0.25);
  cursor: pointer;
}
.fv-mod-detail-chip:hover { background: rgba(196,181,253,0.08); }

/* ----- CVE severity chips ----- */
.fv-mod-cvss {
  display: inline-block; padding: 2px 6px; font-size: 9px; font-weight: 700;
  font-family: var(--font-mono); margin-right: 4px;
  border: 1px solid currentColor;
}
.fv-mod-cvss-critical { color: #fda4af; }
.fv-mod-cvss-high     { color: #fed7aa; }
.fv-mod-cvss-medium   { color: #fde68a; }
.fv-mod-cvss-low      { color: #a7f3d0; }
.fv-mod-cvss-none     { color: #525252; }
.fv-mod-kev-badge {
  display: inline-block;
  color: #fda4af; border: 1px solid rgba(253,164,175,0.35);
  background: rgba(253,164,175,0.08);
  font-family: var(--font-mono); font-size: 9px;
  padding: 2px 6px; font-weight: 700;
}

/* ----- Occurrence chip ----- */
.fv-mod-occ {
  display: inline-block; padding: 1px 5px; font-size: 9px;
  font-family: var(--font-mono); font-weight: 700;
  background: rgba(196,181,253,0.1); color: #c4b5fd;
  border: 1px solid rgba(196,181,253,0.25);
}

/* ----- Detection type stripes ----- */
.fv-mod-typestripe { border-left: 3px solid transparent; }
.fv-mod-typestripe-spl   { border-left-color: #c4b5fd; }
.fv-mod-typestripe-kql   { border-left-color: #7dd3fc; }
.fv-mod-typestripe-sigma { border-left-color: #fed7aa; }
.fv-mod-typestripe-yara  { border-left-color: #a7f3d0; }
.fv-mod-typestripe-other { border-left-color: #525252; }
.fv-mod-typebadge {
  display: inline-block; padding: 2px 6px; font-size: 9px;
  font-family: var(--font-mono); text-transform: uppercase; font-weight: 700;
  border: 1px solid #1f1f1f;
}
.fv-mod-typebadge-spl   { color: #c4b5fd; border-color: rgba(196,181,253,0.25); }
.fv-mod-typebadge-kql   { color: #7dd3fc; border-color: rgba(125,211,252,0.25); }
.fv-mod-typebadge-sigma { color: #fed7aa; border-color: rgba(254,215,170,0.25); }
.fv-mod-typebadge-yara  { color: #a7f3d0; border-color: rgba(167,243,208,0.25); }
.fv-mod-typebadge-other { color: #737373; }

/* ----- Feed-view threats module wrapper ----- */
.fv-mod-threat-wrap { padding: 0; border-bottom: 1px solid #161616; }
.fv-mod-threat-wrap:last-child { border-bottom: none; }
.fv-mod-threat-wrap:hover { background: transparent; }

/* ----- Admin user-detail: Saved Feeds + TLQL Searches ----- */
.adm-user-feeds, .adm-user-tlql {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
  padding-right: 4px;
}

.adm-feed-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  background: #0d0d0d; border: 1px solid #1f1f1f;
  font-family: var(--font-mono); font-size: 11px;
}
.adm-feed-head { display: flex; align-items: center; gap: 8px; }
.adm-feed-color {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c4b5fd; flex-shrink: 0;
}
.adm-feed-color-rose     { background: #fda4af; }
.adm-feed-color-lavender { background: #c4b5fd; }
.adm-feed-color-mint     { background: #a7f3d0; }
.adm-feed-color-peach    { background: #fed7aa; }
.adm-feed-color-sky      { background: #bae6fd; }
.adm-feed-color-cream    { background: #fef3c7; }
.adm-feed-name { color: #e5e5e5; font-weight: 700; flex: 1; }
.adm-feed-time { color: #525252; font-size: 10px; }
.adm-feed-summary {
  color: #a0a0a0; font-size: 10px;
  padding: 2px 0;
}
.adm-feed-actions { display: flex; gap: 6px; margin-top: 2px; }
.adm-feed-actions a, .adm-feed-actions button {
  font-size: 10px; padding: 3px 8px;
}
.adm-feed-raw {
  margin-top: 6px; padding: 8px;
  background: #050505; border: 1px solid #1f1f1f;
  color: #a8e6cf; font-size: 10px; line-height: 1.4;
  max-height: 200px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-all;
}

.adm-tlql-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 10px;
  background: #0d0d0d; border: 1px solid #1f1f1f;
  cursor: pointer; transition: border-color 0.1s, background 0.1s;
  font-family: var(--font-mono);
}
.adm-tlql-row:hover { border-color: #c4b5fd; background: #111; }
.adm-tlql-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: #737373;
}
.adm-tlql-ok, .adm-tlql-fail {
  display: inline-block; width: 6px; height: 6px;
}
.adm-tlql-ok   { background: #a7f3d0; }
.adm-tlql-fail { background: #fda4af; }
.adm-tlql-time { color: #a0a0a0; }
.adm-tlql-results {
  color: #c4b5fd; padding: 1px 5px; font-size: 9px;
  border: 1px solid rgba(196,181,253,0.25);
}
.adm-tlql-query {
  color: #fde68a; font-size: 11px; line-height: 1.5;
  word-break: break-all;
}
.adm-tlql-query.adm-tlql-copied { color: #a7f3d0; }

@media (max-width: 768px) {
  .mf-modules { grid-template-columns: 1fr; }
  .fv-mod-row { flex-wrap: wrap; }
  .fv-mod-row-title { width: 100%; white-space: normal; }
  .fv-mod-mitre-grid { grid-template-columns: 1fr; }
  .fv-mod-toolbar-bottom { flex-direction: column; align-items: stretch; gap: 6px; }
  .fv-mod-sort { width: 100%; }
  .fv-mod-pillrow-secondary { display: none; }
  .adm-user-feeds, .adm-user-tlql { max-height: 240px; }
}

[data-theme="light"] .mf-module:hover { background: rgba(124,58,237,0.04); }
[data-theme="light"] .mf-module-label { color: #1a1a1a; }
[data-theme="light"] .mf-module-desc { color: #888; }
[data-theme="light"] .fv-mod-head { background: #fafafa; border-color: #eee; }
[data-theme="light"] .fv-mod-body { background: #fff; border-color: #eee; }
[data-theme="light"] .fv-mod-title { color: #7c3aed; }
[data-theme="light"] .fv-mod-row { border-bottom-color: #f0f0f0; }
[data-theme="light"] .fv-mod-row-title { color: #555; }
[data-theme="light"] .fv-mod-subhead { background: #f5f5f5; color: #888; }
[data-theme="light"] .fv-mod-mitre-cell { background: #fafafa; border-color: #eee; }
[data-theme="light"] .fv-mod-toolbar { background: #fafafa; border-color: #eee; }
[data-theme="light"] .fv-mod-pill { color: #555; border-color: #ddd; }
[data-theme="light"] .fv-mod-pill:hover { color: #1a1a1a; border-color: #7c3aed; }
[data-theme="light"] .fv-mod-pill.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
[data-theme="light"] .fv-mod-search { color: #1a1a1a; border-bottom-color: #ddd; }
[data-theme="light"] .fv-mod-search:focus { border-bottom-color: #7c3aed; }
[data-theme="light"] .fv-mod-search::placeholder { color: #aaa; }
[data-theme="light"] .fv-mod-sort { background: #fff; color: #555; border-color: #ddd; }
[data-theme="light"] .fv-mod-loadmore { color: #7c3aed; border-top-color: #eee; }
[data-theme="light"] .fv-mod-loadmore:hover { background: rgba(124,58,237,0.04); }
[data-theme="light"] .fv-mod-iocbadge { background: #fafafa; border-color: #eee; color: #888; }
[data-theme="light"] .fv-mod-iocbadge-ip       { color: #0369a1; }
[data-theme="light"] .fv-mod-iocbadge-domain   { color: #6d28d9; }
[data-theme="light"] .fv-mod-iocbadge-url      { color: #c2410c; }
[data-theme="light"] .fv-mod-iocbadge-email    { color: #be185d; }
[data-theme="light"] .fv-mod-iocbadge-md5,
[data-theme="light"] .fv-mod-iocbadge-sha1,
[data-theme="light"] .fv-mod-iocbadge-sha256,
[data-theme="light"] .fv-mod-iocbadge-sha512,
[data-theme="light"] .fv-mod-iocbadge-hash     { color: #047857; }
[data-theme="light"] .fv-mod-iocbadge-filename,
[data-theme="light"] .fv-mod-iocbadge-path     { color: #92400e; }
[data-theme="light"] .fv-mod-iocbadge-registry,
[data-theme="light"] .fv-mod-iocbadge-mutex,
[data-theme="light"] .fv-mod-iocbadge-process,
[data-theme="light"] .fv-mod-iocbadge-pipe,
[data-theme="light"] .fv-mod-iocbadge-generic  { color: #b91c1c; }
[data-theme="light"] .fv-mod-ioc-ip       { color: #0369a1 !important; }
[data-theme="light"] .fv-mod-ioc-domain   { color: #6d28d9 !important; }
[data-theme="light"] .fv-mod-ioc-url      { color: #c2410c !important; }
[data-theme="light"] .fv-mod-ioc-email    { color: #be185d !important; }
[data-theme="light"] .fv-mod-ioc-md5,
[data-theme="light"] .fv-mod-ioc-sha1,
[data-theme="light"] .fv-mod-ioc-sha256,
[data-theme="light"] .fv-mod-ioc-sha512,
[data-theme="light"] .fv-mod-ioc-hash     { color: #047857 !important; }
[data-theme="light"] .fv-mod-ioc-filename,
[data-theme="light"] .fv-mod-ioc-path     { color: #92400e !important; }
[data-theme="light"] .fv-mod-ioc-registry,
[data-theme="light"] .fv-mod-ioc-mutex,
[data-theme="light"] .fv-mod-ioc-process,
[data-theme="light"] .fv-mod-ioc-pipe,
[data-theme="light"] .fv-mod-ioc-generic  { color: #b91c1c !important; }
[data-theme="light"] .fv-mod-occ { background: rgba(124,58,237,0.08); color: #7c3aed; border-color: rgba(124,58,237,0.2); }
[data-theme="light"] .fv-mod-typebadge { border-color: #ddd; }
[data-theme="light"] .fv-mod-threat-wrap { border-bottom-color: #f0f0f0; }
[data-theme="light"] .adm-feed-row, [data-theme="light"] .adm-tlql-row { background: #fff; border-color: #eee; }
[data-theme="light"] .adm-feed-name { color: #1a1a1a; }
[data-theme="light"] .adm-feed-summary { color: #555; }
[data-theme="light"] .adm-feed-raw { background: #fafafa; color: #047857; border-color: #eee; }
[data-theme="light"] .adm-tlql-row:hover { background: #fafafa; border-color: #7c3aed; }
[data-theme="light"] .adm-tlql-time { color: #555; }
[data-theme="light"] .adm-tlql-results { color: #7c3aed; border-color: rgba(124,58,237,0.25); }
[data-theme="light"] .adm-tlql-query { color: #b45309; }
[data-theme="light"] .fv-mod-date { color: #999; }
[data-theme="light"] .fv-mod-row.fv-mod-row-expanded {
  background: rgba(124,58,237,0.05);
  border-left-color: #7c3aed;
}
[data-theme="light"] .fv-mod-row-threat[data-threat] { color: #7c3aed; }
[data-theme="light"] .fv-mod-row-detail { background: #fafafa; border-bottom-color: #eee; }
[data-theme="light"] .fv-mod-detail-section-head { color: #999; }
[data-theme="light"] .fv-mod-detail-codeblock { background: #f5f5f5; color: #333; border-color: #ddd; }
[data-theme="light"] .fv-mod-detail-copy { color: #7c3aed; border-color: #ddd; }
[data-theme="light"] .fv-mod-detail-copy:hover { border-color: #7c3aed; }
[data-theme="light"] .fv-mod-detail-chip { color: #7c3aed; border-color: rgba(124,58,237,0.25); }
[data-theme="light"] .fv-mod-detail-chip:hover { background: rgba(124,58,237,0.05); }
[data-theme="light"] .fv-mod-cvss-critical { color: #dc2626; }
[data-theme="light"] .fv-mod-cvss-high     { color: #ea580c; }
[data-theme="light"] .fv-mod-cvss-medium   { color: #ca8a04; }
[data-theme="light"] .fv-mod-cvss-low      { color: #16a34a; }
[data-theme="light"] .fv-mod-kev-badge { color: #dc2626; border-color: #fda4af; background: #fef2f2; }

@media (max-width: 480px) {
  .fv-mod-date { display: none; }
}

/* ============================================================
   NL → TLQL translator (Cloudflare Workers AI)
   ============================================================ */
.feed-tlql-ai {
  font-family: var(--font-mono); font-size: 11px;
  background: transparent; color: #c4b5fd;
  border: 1px solid rgba(196,181,253,0.3);
  padding: 4px 10px; cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.feed-tlql-ai:hover { background: rgba(196,181,253,0.08); border-color: #c4b5fd; }

.tlql-ai-overlay[hidden] { display: none; }
.tlql-ai-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: tlql-ai-fade 0.15s ease;
}
@keyframes tlql-ai-fade { from { opacity: 0; } to { opacity: 1; } }
.tlql-ai-box {
  width: 100%; max-width: 640px;
  background: #0a0a0a; border: 1px solid #1f1f1f;
  padding: 16px 18px;
  font-family: var(--font-mono);
  box-shadow: 0 10px 50px rgba(0,0,0,0.6);
}
.tlql-ai-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #c4b5fd; font-weight: 700;
  margin-bottom: 12px;
}
.tlql-ai-close {
  background: transparent; border: none; color: #737373;
  font-family: inherit; font-size: 11px; cursor: pointer;
  padding: 2px 6px;
}
.tlql-ai-close:hover { color: #fda4af; }
.tlql-ai-input {
  width: 100%; box-sizing: border-box;
  background: #050505; color: #e5e5e5;
  border: 1px solid #1f1f1f;
  padding: 10px 12px;
  font-family: var(--font-mono); font-size: 13px;
  resize: vertical; outline: none;
  min-height: 70px;
}
.tlql-ai-input:focus { border-color: #c4b5fd; }
.tlql-ai-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
}
.tlql-ai-submit {
  font-family: var(--font-mono); font-size: 11px;
  background: transparent; color: #c4b5fd;
  border: 1px solid #c4b5fd;
  padding: 6px 14px; cursor: pointer;
  transition: background 0.1s;
}
.tlql-ai-submit:hover:not(:disabled) { background: rgba(196,181,253,0.1); }
.tlql-ai-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.tlql-ai-secondary { color: #a0a0a0; border-color: #1f1f1f; }
.tlql-ai-secondary:hover { color: #e5e5e5; border-color: #525252; }
.tlql-ai-status {
  font-size: 11px; color: #737373;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tlql-ai-warn {
  margin-top: 14px; padding: 10px 12px;
  background: #100808; border: 1px solid rgba(253,164,175,0.3);
}
.tlql-ai-warn-head {
  font-size: 10px; color: #fda4af; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
.tlql-ai-output {
  font-family: var(--font-mono); font-size: 11px;
  background: #0a0a0a; color: #fde68a;
  padding: 8px 10px; border: 1px solid #1f1f1f;
  white-space: pre-wrap; word-break: break-all;
  margin: 6px 0;
}
.tlql-ai-explanation {
  font-size: 11px; color: #a0a0a0;
  margin-top: 4px; line-height: 1.5;
}

/* Floating toast notification.
   Must be position:fixed — when left as a static flex child of .app-container
   (display:flex; row; align-items:normal/stretch), it stretches vertically to
   match .main-content's threat-list height (~100,000px), painting the screen
   with a faint lavender bg. */
.tlql-ai-toast[hidden] { display: none; }
.tlql-ai-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 560px;
  z-index: 8500;        /* under .tlql-ai-overlay (9000), above sidebar (200) */

  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  margin: 0;
  background: rgba(196,181,253,0.06);
  border: 1px solid rgba(196,181,253,0.3);
  font-family: var(--font-mono); font-size: 11px;
  animation: tlql-ai-slide 0.2s ease;
}
@keyframes tlql-ai-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.tlql-ai-toast-text { color: #ddd6fe; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlql-ai-toast-undo {
  background: transparent; border: 1px solid rgba(196,181,253,0.3);
  color: #c4b5fd; font-family: inherit; font-size: 10px;
  padding: 3px 9px; cursor: pointer;
}
.tlql-ai-toast-undo:hover { background: rgba(196,181,253,0.12); }

/* My-feeds modal button */
.mf-tlql-ai-btn {
  background: transparent; color: #c4b5fd;
  border: 1px solid rgba(196,181,253,0.3);
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 9px; cursor: pointer;
  white-space: nowrap;        /* keep "[ ✨ ask ]" on a single line */
}
.mf-tlql-ai-btn:hover { background: rgba(196,181,253,0.08); border-color: #c4b5fd; }
.mf-tlql-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Feed-card explain button + inline explanation block */
.mf-feed-explain-btn {
  background: transparent; color: #c4b5fd;
  border: 1px solid rgba(196,181,253,0.3);
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 8px; cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.mf-feed-explain-btn:hover:not(:disabled) { background: rgba(196,181,253,0.08); border-color: #c4b5fd; }
.mf-feed-explain-btn:disabled { opacity: 0.7; cursor: default; }
.mf-feed-explanation {
  font-family: var(--font-mono); font-size: 11px;
  color: #ddd6fe; line-height: 1.55;
  padding: 8px 10px; margin: 8px 0;
  background: rgba(196,181,253,0.05);
  border-left: 2px solid #c4b5fd;
}

/* "Why is this empty?" diagnosis panel (home feed) */
.tlql-ai-empty-diag {
  margin: 12px 24px;
  padding: 12px 14px;
  background: rgba(196,181,253,0.06);
  border: 1px solid rgba(196,181,253,0.25);
  font-family: var(--font-mono); font-size: 11px;
  line-height: 1.5;
}
.tlql-ai-empty-diag-head {
  color: #c4b5fd; font-weight: 700;
  font-size: 11px; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tlql-ai-empty-diag-reason { color: #e5e5e5; margin-bottom: 8px; }
.tlql-ai-empty-diag-suggest { color: #a0a0a0; margin-bottom: 8px; }
.tlql-ai-empty-diag-suggest code {
  font-family: inherit; color: #fde68a;
  background: #0a0a0a; padding: 2px 6px;
}
.tlql-ai-empty-diag-label { color: #525252; }
.tlql-ai-empty-diag-btn {
  background: transparent; color: #c4b5fd;
  border: 1px solid #c4b5fd;
  font-family: var(--font-mono); font-size: 11px;
  padding: 5px 12px; cursor: pointer;
}
.tlql-ai-empty-diag-btn:hover { background: rgba(196,181,253,0.1); }

[data-theme="light"] .mf-feed-explain-btn { color: #7c3aed; border-color: rgba(124,58,237,0.3); }
[data-theme="light"] .mf-feed-explain-btn:hover:not(:disabled) { background: rgba(124,58,237,0.06); }
[data-theme="light"] .mf-feed-explanation { background: rgba(124,58,237,0.05); border-left-color: #7c3aed; color: #4c1d95; }
[data-theme="light"] .tlql-ai-empty-diag { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.25); }
[data-theme="light"] .tlql-ai-empty-diag-head { color: #7c3aed; }
[data-theme="light"] .tlql-ai-empty-diag-reason { color: #1a1a1a; }
[data-theme="light"] .tlql-ai-empty-diag-suggest { color: #666; }
[data-theme="light"] .tlql-ai-empty-diag-suggest code { background: #fafafa; color: #92400e; }
[data-theme="light"] .tlql-ai-empty-diag-btn { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .tlql-ai-empty-diag-btn:hover { background: rgba(124,58,237,0.06); }

/* Light mode */
[data-theme="light"] .feed-tlql-ai { color: #7c3aed; border-color: rgba(124,58,237,0.3); }
[data-theme="light"] .feed-tlql-ai:hover { background: rgba(124,58,237,0.06); border-color: #7c3aed; }
[data-theme="light"] .tlql-ai-overlay { background: color-mix(in srgb, var(--violet) 15%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-theme="light"] .tlql-ai-box { background: color-mix(in srgb, var(--violet) 20%, rgba(255,255,255,0.5)); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); box-shadow: 0 18px 52px -14px var(--violet-glow); }
[data-theme="light"] .tlql-ai-head { color: #7c3aed; }
[data-theme="light"] .tlql-ai-input { background: #fafafa; color: #1a1a1a; border-color: #ddd; }
[data-theme="light"] .tlql-ai-input:focus { border-color: #7c3aed; }
[data-theme="light"] .tlql-ai-submit { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .tlql-ai-submit:hover:not(:disabled) { background: rgba(124,58,237,0.06); }
[data-theme="light"] .tlql-ai-secondary { color: #666; border-color: #ddd; }
[data-theme="light"] .tlql-ai-status { color: #888; }
[data-theme="light"] .tlql-ai-warn { background: #fff5f5; border-color: #fda4af; }
[data-theme="light"] .tlql-ai-warn-head { color: #dc2626; }
[data-theme="light"] .tlql-ai-output { background: #fffaf0; color: #92400e; border-color: #eee; }
[data-theme="light"] .tlql-ai-explanation { color: #555; }
[data-theme="light"] .tlql-ai-toast { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.3); }
[data-theme="light"] .tlql-ai-toast-text { color: #6d28d9; }
[data-theme="light"] .tlql-ai-toast-undo { color: #7c3aed; border-color: rgba(124,58,237,0.3); }
[data-theme="light"] .mf-tlql-ai-btn { color: #7c3aed; border-color: rgba(124,58,237,0.3); }

/* 768px responsive */
@media (max-width: 768px) {
  .tlql-ai-overlay { padding-top: 4vh; padding-left: 12px; padding-right: 12px; }
  .tlql-ai-box { max-width: 100%; padding: 12px; }
  .tlql-ai-actions { flex-wrap: wrap; }
  .tlql-ai-toast { flex-wrap: wrap; }
}
[data-theme="light"] .mf-tlql-input { color: #7c3aed; }
[data-theme="light"] .mf-tlql-ok { color: #16a34a; }
[data-theme="light"] .mf-tlql-err { color: #e11d48; }

[data-theme="light"] .si-modal { background: #fff; border-color: #ddd; }
[data-theme="light"] .si-modal-title { color: #1a1a1a; }
[data-theme="light"] .si-modal-sub { color: #888; }
[data-theme="light"] .si-mini { color: #555; border-color: #ddd; }
[data-theme="light"] .si-section-head { color: #7c3aed; border-bottom-color: #eee; }
[data-theme="light"] .si-item { border-bottom-color: #f0f0f0; }
[data-theme="light"] .si-item-val { color: #1a1a1a; }
[data-theme="light"] .si-modal-actions { border-top-color: #eee; }
.notif-feed-block { border-bottom: 1px solid #161616; }
.notif-feed-block:last-child { border-bottom: none; }
.notif-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; cursor: pointer; transition: background 0.1s;
  text-decoration: none;
}
.notif-feed-head:hover { background: rgba(196,181,253,0.04); }
.notif-feed-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notif-feed-name { font-size: 12px; color: #e8e8e8; font-weight: 600; }
.notif-feed-count {
  font-size: 10px; font-weight: 700; background: #fda4af; color: #0a0a0a;
  padding: 1px 6px; flex-shrink: 0;
}
.notif-feed-dot { width: 8px; height: 8px; flex-shrink: 0; }
.notif-feed-dot.color-rose { background: #fda4af; }
.notif-feed-dot.color-peach { background: #fdba74; }
.notif-feed-dot.color-lavender { background: #c4b5fd; }
.notif-feed-dot.color-mint { background: #a8e6cf; }
.notif-feed-dot.color-sky { background: #7dd3fc; }
.notif-feed-dot.color-yellow { background: #fde68a; }
.notif-threat-row {
  display: block; padding: 8px 12px 8px 28px;
  font-size: 11px; color: #a0a0a0; text-decoration: none;
  border-top: 1px solid #161616; transition: background 0.1s;
}
.notif-threat-row:hover { background: rgba(196,181,253,0.04); color: #e8e8e8; }
.notif-threat-id { color: #c4b5fd; font-weight: 600; margin-right: 8px; }
.notif-threat-title { color: #a0a0a0; }
.notif-threat-meta { font-size: 9px; color: #525252; margin-top: 2px; padding-left: 0; }
.notif-foot {
  padding: 8px 12px; border-top: 1px solid #222;
  font-size: 10px; color: #525252; text-align: center;
}
.notif-foot a { color: #c4b5fd; text-decoration: none; }
.notif-foot a:hover { color: #e8e8e8; }

@media (max-width: 768px) {
  /* Promote to fixed: at narrow widths the bell collapses to ~40px wide,
     and position:absolute would inherit that tiny parent width. Fixed anchors
     to the viewport so the panel can span edge-to-edge. */
  .notif-panel {
    position: fixed;
    top: 60px;                       /* just below the 56-px mobile-header */
    right: 8px;
    left: 8px;
    margin-top: 0;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - 72px);
  }
  .notif-label { display: none; }
}

[data-theme="light"] .notif-btn { color: #555; }
[data-theme="light"] .notif-btn:hover { color: #1a1a1a; }
[data-theme="light"] .notif-btn.has-unread { color: #e11d48; }
[data-theme="light"] .notif-count { background: #e11d48; color: #fff; }
[data-theme="light"] .notif-panel { background: #fff; border-color: #ddd; }
[data-theme="light"] .notif-panel-head { border-bottom-color: #eee; color: #888; }
[data-theme="light"] .notif-feed-block { border-bottom-color: #f0f0f0; }
[data-theme="light"] .notif-feed-name { color: #1a1a1a; }
[data-theme="light"] .notif-feed-count { background: #e11d48; color: #fff; }
[data-theme="light"] .notif-threat-row { color: #555; border-top-color: #f0f0f0; }
[data-theme="light"] .notif-threat-row:hover { background: rgba(124,58,237,0.04); color: #1a1a1a; }
[data-theme="light"] .notif-threat-id { color: #7c3aed; }
[data-theme="light"] .notif-foot { border-top-color: #eee; color: #888; }

/* ===================================================================
   MOBILE RESPONSIVE PASS — consolidated 480px overrides
   Covers: top stats-bar user chip, translator UI, feed-view modules,
   threat detail, my-feeds modal, admin page. CSS-only, no JS changes.
   =================================================================== */
@media (max-width: 480px) {
  /* Prevent horizontal scroll from any rogue overflow at narrow widths */
  html, body { overflow-x: hidden; }

  /* --- Top stats-bar user chip & theme cluster ------------------- */
  .stats-bar { flex-wrap: wrap; }
  .topbar-user-email { display: none; }          /* keep tier + sign-out */
  .topbar-signout-btn { font-size: 10px; padding: 3px 6px; }
  .theme-toggle-btn .theme-label { display: none; }
  .notif-label { display: none; }

  /* --- Feed-view module toolbar (filter pills + search) ---------- */
  .fv-mod-pill { font-size: 9px; padding: 4px 7px; }
  .fv-mod-sub-count { display: none; }
  .fv-mod-search { font-size: 16px; padding: 4px 6px; }   /* iOS anti-zoom */
  .fv-mod-row { gap: 6px; padding: 8px 10px; }
  .fv-mod-row-meta { gap: 4px; }
  .fv-mod-row-id { font-size: 11px; }
  .fv-mod-row-title { font-size: 11px; }

  /* --- Translator overlay + toast (NL→TLQL) ---------------------- */
  .tlql-ai-overlay { padding-top: 6vh; padding-left: 8px; padding-right: 8px; }
  .tlql-ai-box { max-width: 100%; padding: 12px; }
  .tlql-ai-head { font-size: 11px; }
  .tlql-ai-input { font-size: 16px; min-height: 90px; padding: 8px 10px; }
  .tlql-ai-submit { font-size: 10px; padding: 6px 10px; }
  .tlql-ai-actions { flex-wrap: wrap; gap: 8px; }
  .tlql-ai-toast {
    top: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: none;
    padding: 6px 10px;
    flex-wrap: wrap;
  }
  .tlql-ai-toast-text { width: 100%; white-space: normal; line-height: 1.4; }
  .tlql-ai-toast-undo { align-self: flex-end; }

  /* --- Threat detail page (#threatPage / .tp-*) ------------------ */
  .tp-topbar { padding: 8px 12px; gap: 6px; }
  .tp-back { font-size: 11px; padding: 4px 8px; }
  .tp-crumb { font-size: 11px; }
  .tp-topbar-right { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .tp-action { font-size: 10px; padding: 4px 8px; }
  .tp-hero { padding: 16px 12px 14px; }
  .tp-hero-meta { gap: 6px; }
  .tp-meta-text { font-size: 10px; }
  /* Multi-column sections → single column on phone */
  .tp-grid, .tp-grid-2, .tp-section-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  /* Code-style blocks should scroll horizontally not break layout */
  .tp-section pre, .tp-section code, .det-rule, .det-rule pre { overflow-x: auto; max-width: 100%; }

  /* --- My-feeds page + edit modal -------------------------------- */
  .mf-modal-bg { padding: 16px 8px; }
  .mf-modal { max-width: 100%; padding: 14px; }
  .mf-modal-title { font-size: 13px; }
  .mf-tabs { flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
  .mf-tab { font-size: 11px; padding: 6px 10px; }
  .mf-modules { grid-template-columns: 1fr; }
  .mf-tlql-input, .mf-input { font-size: 16px; }       /* iOS anti-zoom */
  .mf-tlql-top label { flex-wrap: wrap; gap: 6px; }
  .mf-tlql-ai-btn { font-size: 10px; padding: 3px 7px; }
  .mf-modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .mf-modal-actions .mf-btn { width: 100%; text-align: center; }

  /* --- Admin page ------------------------------------------------- */
  .adm-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: thin;
  }
  .adm-tabs::-webkit-scrollbar { height: 3px; }
  .adm-tabs::-webkit-scrollbar-thumb { background: #2a2a2a; }
  .adm-tab { flex-shrink: 0; font-size: 11px; padding: 8px 12px; }
  .adm-detail-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; }
  /* User-list rows render as stacked cards (grid → column) */
  .adm-user-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; }
  .adm-user-row > * { flex-shrink: 1; }
  .adm-user-email { font-size: 12px; word-break: break-all; }
  .adm-feed-row, .adm-tlql-row { padding: 8px; }
  .adm-feed-summary, .adm-tlql-query { font-size: 10px; word-break: break-word; }
  .adm-feed-actions { flex-wrap: wrap; }
  .adm-note-form { flex-direction: column; align-items: stretch; gap: 6px; }
  .adm-note-input { width: 100%; font-size: 16px; }

  /* --- Catch-all: 2-col grids collapse, generic card padding ----- */
  .grid-2-col, .two-col, .stats-grid { grid-template-columns: 1fr !important; }
  .threat-card, .mf-card, .adm-card { padding: 12px; }

  /* --- Engagement (Like + Feedback) ------------------------------- */
  .dp-engage-head { flex-wrap: wrap; gap: 8px; }
  .dp-engage-item-head { flex-wrap: wrap; gap: 4px; }
  .dp-engage-textarea { font-size: 16px; }

  /* --- Admin feedback moderation --------------------------------- */
  .adm-fb-bar { flex-wrap: wrap; gap: 6px; }
  .adm-fb-meta { flex-wrap: wrap; gap: 6px; font-size: 10px; }
  .adm-fb-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .adm-fb-note-input { width: 100%; font-size: 16px; }
}

/* ===============================================================
   Engagement: Like + Feedback (per-threat detail panel)
   =============================================================== */
.dp-engage {
    margin-top: 12px;
}
.dp-engage-loading,
.dp-engage-err,
.dp-engage-empty,
.dp-engage-gate {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #525252;
    padding: 6px 0;
}
.dp-engage-gate {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dp-engage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dp-engage-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #a0a0a0;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.dp-engage-like:hover { border-color: #fda4af; color: #fda4af; }
.dp-engage-like.active { color: #fda4af; border-color: #fda4af; }
.dp-engage-like-icon { font-size: 13px; line-height: 1; }
.dp-engage-like-count { font-weight: bold; }
.dp-engage-like-label { color: inherit; opacity: 0.7; }
.dp-engage-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.dp-engage-item {
    background: #111111;
    border-left: 2px solid #2a2a2a;
    padding: 8px 10px;
}
.dp-engage-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: #737373;
    margin-bottom: 4px;
}
.dp-engage-name {
    color: #c4b5fd;
    font-weight: bold;
}
.dp-engage-date {
    color: #525252;
}
.dp-engage-content {
    font-family: var(--font-prose, 'Inter', sans-serif);
    font-size: 12px;
    color: #d0d0d0;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.dp-engage-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dp-engage-textarea {
    width: 100%;
    min-height: 70px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    color: #d0d0d0;
    font-family: var(--font-prose, 'Inter', sans-serif);
    font-size: 12px;
    padding: 8px 10px;
    resize: vertical;
    box-sizing: border-box;
}
.dp-engage-textarea:focus { outline: none; border-color: #c4b5fd; }
.dp-engage-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dp-engage-counter {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #525252;
}
.dp-engage-msg {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #a8e6cf;
    min-height: 14px;
}

[data-theme="light"] .dp-engage-loading,
[data-theme="light"] .dp-engage-err,
[data-theme="light"] .dp-engage-empty,
[data-theme="light"] .dp-engage-gate,
[data-theme="light"] .dp-engage-counter,
[data-theme="light"] .dp-engage-date { color: #737373; }
[data-theme="light"] .dp-engage-item { background: #f5f5f5; border-left-color: #d0d0d0; }
[data-theme="light"] .dp-engage-item-head { color: #525252; }
[data-theme="light"] .dp-engage-content { color: #1a1a1a; }
[data-theme="light"] .dp-engage-like { border-color: #d0d0d0; color: #525252; }
[data-theme="light"] .dp-engage-like:hover,
[data-theme="light"] .dp-engage-like.active { border-color: #e11d48; color: #e11d48; }
[data-theme="light"] .dp-engage-textarea { background: #ffffff; border-color: #d0d0d0; color: #1a1a1a; }
[data-theme="light"] .dp-engage-textarea:focus { border-color: #7c3aed; }
[data-theme="light"] .dp-engage-name { color: #7c3aed; }
[data-theme="light"] .dp-engage-msg { color: #059669; }

/* ===============================================================
   Admin: Feedback Moderation tab
   =============================================================== */
.adm-fb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.adm-fb-pill {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #a0a0a0;
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.adm-fb-pill:hover { color: #d0d0d0; border-color: #525252; }
.adm-fb-pill.active { color: #c4b5fd; border-color: #c4b5fd; }
.adm-fb-pill-count {
    background: #1a1a1a;
    color: #c4b5fd;
    font-size: 10px;
    padding: 1px 6px;
    min-width: 16px;
    text-align: center;
}
.adm-fb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.adm-fb-row {
    background: #111111;
    border-left: 2px solid #2a2a2a;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adm-fb-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #737373;
    flex-wrap: wrap;
}
.adm-fb-date { color: #525252; }
.adm-fb-name { color: #c4b5fd; font-weight: bold; }
.adm-fb-threat {
    color: #7dd3fc;
    text-decoration: none;
}
.adm-fb-threat:hover { text-decoration: underline; }
.adm-fb-threat-title {
    color: #a0a0a0;
    font-family: var(--font-prose, 'Inter', sans-serif);
    font-size: 11px;
}
.adm-fb-status {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 8px;
    border: 1px solid;
    text-transform: lowercase;
}
.adm-fb-status-pending  { color: #fde68a; border-color: #fde68a; }
.adm-fb-status-approved { color: #a8e6cf; border-color: #a8e6cf; }
.adm-fb-status-rejected { color: #fda4af; border-color: #fda4af; }
.adm-fb-content {
    font-family: var(--font-prose, 'Inter', sans-serif);
    font-size: 12px;
    color: #d0d0d0;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.adm-fb-notes {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #fdba74;
}
.adm-fb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-fb-note-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    color: #d0d0d0;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 5px 8px;
    box-sizing: border-box;
}
.adm-fb-note-input:focus { outline: none; border-color: #c4b5fd; }
.adm-fb-approve { color: #a8e6cf; }
.adm-fb-reject  { color: #fda4af; }

[data-theme="light"] .adm-fb-pill { border-color: #d0d0d0; color: #525252; }
[data-theme="light"] .adm-fb-pill:hover { color: #1a1a1a; border-color: #737373; }
[data-theme="light"] .adm-fb-pill.active { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .adm-fb-pill-count { background: #f5f5f5; color: #7c3aed; }
[data-theme="light"] .adm-fb-row { background: #f5f5f5; border-left-color: #d0d0d0; }
[data-theme="light"] .adm-fb-meta { color: #525252; }
[data-theme="light"] .adm-fb-date { color: #737373; }
[data-theme="light"] .adm-fb-name { color: #7c3aed; }
[data-theme="light"] .adm-fb-threat { color: #0284c7; }
[data-theme="light"] .adm-fb-threat-title { color: #525252; }
[data-theme="light"] .adm-fb-content { color: #1a1a1a; }
[data-theme="light"] .adm-fb-status-pending  { color: #b45309; border-color: #b45309; }
[data-theme="light"] .adm-fb-status-approved { color: #059669; border-color: #059669; }
[data-theme="light"] .adm-fb-status-rejected { color: #e11d48; border-color: #e11d48; }
[data-theme="light"] .adm-fb-note-input { background: #ffffff; border-color: #d0d0d0; color: #1a1a1a; }
[data-theme="light"] .adm-fb-notes { color: #b45309; }
[data-theme="light"] .adm-fb-approve { color: #059669; }
[data-theme="light"] .adm-fb-reject  { color: #e11d48; }

/* ============================================================
   FvMcp — module tab bar
   - Intel Brief is pinned at the top via .fv-mcp-section-pinned
   - All other modules render as tab panes selected from .fv-tab-bar
   - Active tab persisted per feed: localStorage feedActiveTab:<viewId>
   ============================================================ */
.fv-mcp-section-pinned {
  /* No extra styling required today — class is reserved so future themes can
     distinguish the always-visible Intel Brief from tab-pane modules without
     selector churn. */
}
.fv-tab-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 2px 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: thin;
}
.fv-tab-bar::-webkit-scrollbar { height: 4px; }
.fv-tab-bar::-webkit-scrollbar-thumb { background: var(--border-color); }
.fv-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.fv-tab:hover { color: var(--text-primary); border-color: var(--text-muted); background: var(--bg-elevated); }
.fv-tab.fv-tab-active {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  background: rgba(196, 181, 253, 0.06);
}
.fv-tab.fv-tab-active:hover { background: rgba(196, 181, 253, 0.1); }
.fv-tab-content { display: block; }
.fv-tab-pane { display: block; }
.fv-tab-pane[hidden] { display: none !important; }
/* Inside a tab pane, the existing .fv-mod-section header chrome is redundant
   (the tab label already names the module) — collapse the heading row visually
   without removing its functionality (the FvMcp modules still use the section
   wrapper for sortable / search controls). */
.fv-tab-pane > .fv-mod-section > .fv-mod-head .fv-mod-title { display: none; }
.fv-tab-pane > .fv-mod-section > .fv-mod-head .fv-mod-caret { display: none; }
.fv-tab-pane > .fv-mod-section > .fv-mod-head { padding-top: 0; padding-bottom: 0; min-height: 0; }
.fv-tab-pane > .fv-mod-section {
  border: 0;
  background: transparent;
  padding: 0;
}
.fv-tab-pane > .fv-mod-section > .fv-mod-body {
  border-top: 0;
}

/* Light theme tab states */
[data-theme="light"] .fv-tab { background: #fafafa; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .fv-tab:hover { background: #f1f1f1; color: #1a1a1a; border-color: #d0d0d0; }
[data-theme="light"] .fv-tab.fv-tab-active { color: #6d28d9; border-color: #6d28d9; background: rgba(109, 40, 217, 0.06); }
[data-theme="light"] .fv-tab.fv-tab-active:hover { background: rgba(109, 40, 217, 0.1); }
[data-theme="light"] .fv-tab-bar { border-bottom-color: #e5e5e5; }

/* Mobile tab bar: touch-friendly + scrollable */
@media (max-width: 768px) {
  .fv-tab-bar { padding: 8px 0; gap: 3px; }
  .fv-tab { min-height: 36px; padding: 6px 10px; font-size: 10px; }
}

/* ============================================================
   FEED-VIEW SWITCHER + STREAM / DIGEST perspectives (app.js)
   - .fv-viewbar = 3-way whole-feed switcher (reuses .hub-seg / .hub-seg-b / .on)
   - STREAM = threat river + per-module facet rail
   - DIGEST = brief + pulse horizon + module mini-cards
   Uses only existing Signal tokens; light mode resolves automatically.
   ============================================================ */
.fv-viewbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 4px 0 18px;
  position: sticky; top: 0; z-index: 6;
  background: var(--bg); padding: 6px 0 8px;
}
.fv-viewbar-scope { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

/* ---------- STREAM ---------- */
.fv-stream-wrap { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; min-width: 0; }
.fv-stream-wrap.fv-stream-norail { grid-template-columns: minmax(0,1fr); }
.fv-stream-river { min-width: 0; }
.fv-stream-river .fv-mod-section { min-width: 0; }
/* full-width intel brief banner above the river+rail row (was squished in the 300px rail) */
.fv-stream-brief { margin-bottom: 20px; min-width: 0; }
.fv-stream-brief-mount { min-width: 0; }
.fv-stream-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 64px; }

.fv-facet-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.fv-facet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.fv-facet-head .sig-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: .04em; }
.fv-facet-total { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.fv-facet-rows { display: flex; flex-direction: column; }
.fv-facet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 0; background: transparent; width: 100%; text-align: left; font-family: var(--font-sans); }
.fv-facet-row + .fv-facet-row { border-top: 1px solid var(--line); }
.fv-facet-label { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fv-facet-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); flex-shrink: 0; }
.fv-facet-chip { cursor: pointer; transition: background .13s, color .13s; }
.fv-facet-chip:hover { background: var(--violet-tint); }
.fv-facet-chip:hover .fv-facet-label { color: var(--violet-ink); }
.fv-facet-brief-mount { padding: 4px; }

/* ---------- DIGEST ---------- */
.fv-digest { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.fv-digest-brief { min-width: 0; }
.fv-digest-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fv-digest-metric { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); padding: 16px 16px 13px; display: flex; flex-direction: column; gap: 6px; }
.fv-digest-metric-val { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--ink); }
.fv-digest-metric-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }

.fv-digest-pulse { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 16px; align-items: start; }
.fv-digest-pulse-horizon, .fv-digest-tactics { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.fv-hz-legend { display: flex; gap: 12px; }
.fv-hz-legend span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.fv-hz-legend i { width: 8px; height: 8px; border-radius: 2px; }
.fv-digest-horizon { display: flex; align-items: flex-end; gap: 4px; height: 100px; padding: 14px 14px 12px; min-width: 0; }
.fv-hz-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.fv-hz-stack { width: 100%; max-width: 20px; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; transition: opacity .15s; }
.fv-hz-col:hover .fv-hz-stack { opacity: .75; }
.fv-hz-stack span { display: block; min-height: 2px; }
.fv-digest-rankbars { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.fv-rb-row { display: flex; align-items: center; gap: 10px; }
.fv-rb-label { flex: 0 0 38%; font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-rb-track { flex: 1; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; min-width: 0; }
.fv-rb-fill { display: block; height: 100%; background: var(--violet); border-radius: 3px; }
.fv-rb-val { font-size: 10.5px; color: var(--ink-3); flex-shrink: 0; }

.fv-digest-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fv-digest-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }

/* ---------- responsive (375px first-class) ---------- */
#mainContent .fv-viewbar { flex-wrap: wrap; gap: 12px; }
@media (max-width: 768px) {
  #mainContent .fv-viewbar { flex-wrap: wrap; gap: 12px; row-gap: 10px; }
  #mainContent .fv-viewbar .hub-seg { flex-wrap: wrap; }
  #mainContent .fv-viewbar .hub-meta { flex-wrap: wrap; }
  .fv-stream-wrap { grid-template-columns: minmax(0, 1fr); }
  .fv-stream-rail { position: static; top: auto; order: 2; }
  .fv-stream-river { order: 1; }
  .fv-digest { max-width: 100%; }
  .fv-digest-metrics { grid-template-columns: repeat(2, 1fr); }
  .fv-digest-pulse { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .fv-digest-metrics { grid-template-columns: repeat(2, 1fr); }
  .fv-digest-modules { grid-template-columns: 1fr; }
  .fv-digest-horizon { height: 80px; }
}

/* ============================================================
   FvMcp — feed-mcp-modules.js styles
   - 4 new feed-view modules (intel_brief, cluster_view, heatmap_view, timeline_view)
   - Universal side panel (stackable, fixed-position)
   - Drillable [data-fv-mcp] elements across legacy modules
   ============================================================ */

/* ---------- shared inside an .fv-mcp-mount ---------- */
.fv-mcp-mount {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
}
.fv-mcp-loading {
  padding: 16px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}
.fv-mcp-err {
  padding: 10px;
  color: var(--severity-critical);
  font-family: var(--font-mono);
  font-size: 11px;
}
.fv-mcp-accent { color: var(--accent-purple); }
.fv-mcp-meta { color: var(--text-muted); }

/* ---------- buttons / chips that drill into the side panel ---------- */
.fv-mcp-btn-link {
  background: transparent;
  border: none;
  color: var(--accent-purple);
  font-family: var(--font-mono);
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}
.fv-mcp-btn-link:hover { text-decoration: underline; }
.fv-mcp-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  margin: 2px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
}
.fv-mcp-tag:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.fv-mcp-tag-cve   { color: var(--severity-critical); border-color: rgba(253, 164, 175, 0.3); }
.fv-mcp-tag-mitre { color: var(--accent-blue);       border-color: rgba(125, 211, 252, 0.3); }
.fv-mcp-tag-actor { color: var(--accent-orange, #fdba74); border-color: rgba(253, 186, 116, 0.3); }
.fv-mcp-tag-cwe   { color: var(--severity-medium);   border-color: rgba(196, 181, 253, 0.3); }
.fv-mcp-tool { color: var(--text-muted); font-size: 9px; font-weight: 400; margin-left: 6px; }

/* ---------- intel_brief ---------- */
.fv-mcp-brief { display: flex; flex-direction: column; gap: 14px; }
.fv-mcp-brief-hero-inner {
  cursor: pointer;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.06), transparent);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-purple);
}
.fv-mcp-brief-hero-inner:hover { background: linear-gradient(90deg, rgba(196, 181, 253, 0.12), transparent); }
.fv-mcp-brief-hero-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.fv-mcp-brief-hero-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fv-mcp-brief-hero-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fv-mcp-brief-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.fv-mcp-stat {
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fv-mcp-stat .v { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent-purple); }
.fv-mcp-stat .l { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.fv-mcp-brief-grid {
  display: grid;
  gap: 12px;
  /* minmax(0, ...) prevents long children from forcing the grid wider than the viewport,
     which would cascade into horizontal page overflow on mobile. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px)  { .fv-mcp-brief-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.fv-mcp-brief-spark {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.fv-mcp-brief-spark-h {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.fv-mcp-brief-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 42px;
}
.fv-mcp-brief-spark-bar {
  flex: 1;
  background: var(--bg-elevated);
  min-height: 3px;
}
.fv-mcp-brief-spark-bar.has { background: var(--accent-purple); opacity: 0.75; }
.fv-mcp-brief-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 14px 16px;
}
.fv-mcp-brief-card.pinned { border-color: var(--accent-purple); box-shadow: 0 0 0 1px rgba(196,181,253,0.2); }
.fv-mcp-brief-card h3 { font-family: var(--font-mono); font-size: 11px; color: var(--accent-purple); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; font-weight: 600; }
.fv-mcp-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.fv-mcp-engine { padding: 8px 10px; background: var(--bg-primary); border: 1px solid var(--border-color); display: block; text-decoration: none; }
.fv-mcp-engine:hover { border-color: var(--accent-purple); }
.fv-mcp-engine .n { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); font-weight: 700; }
.fv-mcp-engine .e-l { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.fv-mcp-mitre-mini { display: grid; grid-template-columns: repeat(14, 1fr); gap: 1px; margin-top: 6px; }
.fv-mcp-mitre-mini .c {
  height: 18px;
  background: var(--bg-elevated);
  border: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  cursor: pointer;
}
.fv-mcp-mitre-mini .c:hover { background: rgba(196,181,253,0.3); }
.fv-mcp-mitre-mini .c.emph { outline: 1px solid var(--accent-purple); }
.fv-mcp-mitre-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); margin-top: 6px; }
.fv-mcp-enrich-bar { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
.fv-mcp-enrich-cell { padding: 8px 10px; background: var(--bg-primary); border: 1px solid var(--border-color); }
.fv-mcp-enrich-cell .v { font-family: var(--font-mono); font-size: 14px; color: var(--accent-green); font-weight: 700; }
.fv-mcp-enrich-cell .l { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.fv-mcp-cve-list { display: flex; flex-direction: column; gap: 5px; }
.fv-mcp-cve-row {
  display: grid; grid-template-columns: 130px 50px 1fr; gap: 8px; align-items: center;
  padding: 6px 8px; background: var(--bg-primary); border: 1px solid var(--border-color); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; text-align: left;
}
.fv-mcp-cve-row:hover { border-color: var(--accent-purple); }
.fv-mcp-cve-row .id { color: var(--severity-critical); }
.fv-mcp-cve-row .cvss { padding: 1px 5px; background: var(--bg-elevated); text-align: center; font-size: 10px; font-weight: 700; color: var(--text-primary); }
.fv-mcp-cve-row .cvss.critical { color: var(--severity-critical); }
.fv-mcp-cve-row .cvss.high { color: var(--severity-high); }
.fv-mcp-cve-row .nm { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-mcp-actor-list, .fv-mcp-cat-list { display: flex; flex-direction: column; gap: 5px; }
.fv-mcp-actor-row, .fv-mcp-cat-row {
  padding: 6px 10px; background: var(--bg-primary); border: 1px solid var(--border-color);
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; width: 100%; text-align: left;
}
.fv-mcp-actor-row:hover, .fv-mcp-cat-row:hover { border-color: var(--severity-high); }
.fv-mcp-actor-row .n { color: var(--severity-high); }
.fv-mcp-actor-row.emph { border-color: var(--accent-purple); }
.fv-mcp-cat-row { cursor: default; }
.fv-mcp-cat-row.emph { border-color: var(--accent-purple); }
.fv-mcp-cat-row .n { color: var(--accent-blue); }
.fv-mcp-actor-row .c, .fv-mcp-cat-row .c { color: var(--text-muted); font-size: 10px; }
.fv-mcp-c2-list { display: flex; flex-direction: column; gap: 4px; }
.fv-mcp-c2-row {
  padding: 6px 10px; background: var(--bg-primary); border: 1px solid var(--border-color);
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  cursor: pointer; font-family: var(--font-mono); font-size: 10px; text-align: left;
}
.fv-mcp-c2-row:hover { border-color: var(--accent-green); }
.fv-mcp-c2-row .ip { color: var(--accent-green); }
.fv-mcp-c2-row .meta { color: var(--text-muted); }

/* ---------- cluster_view ---------- */
.fv-mcp-cluster-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.fv-mcp-cluster-controls { display: flex; align-items: center; gap: 10px; }
.fv-mcp-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.fv-mcp-select {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-primary);
  background: var(--bg-elevated); border: 1px solid var(--border-color); padding: 5px 10px;
}
.fv-mcp-cluster-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.fv-mcp-cluster-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px)  { .fv-mcp-cluster-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1280px) { .fv-mcp-cluster-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.fv-mcp-cluster-group { background: var(--bg-surface); border: 1px solid var(--border-color); }
.fv-mcp-cluster-ghead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); }
.fv-mcp-bar { display: inline-block; width: 4px; height: 18px; }
.fv-mcp-bar-rose     { background: var(--severity-critical); }
.fv-mcp-bar-peach    { background: var(--severity-high); }
.fv-mcp-bar-yellow   { background: var(--severity-medium); }
.fv-mcp-bar-mint     { background: var(--severity-low); }
.fv-mcp-bar-lavender { background: var(--accent-purple); }
.fv-mcp-gname { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-mcp-gcount { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-color); }
.fv-mcp-cluster-gbody { display: flex; flex-direction: column; max-height: 480px; overflow-y: auto; }
.fv-mcp-cluster-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border-color); }
.fv-mcp-cluster-row:first-child { border-top: 0; }
.fv-mcp-rsev { width: 3px; align-self: stretch; min-height: 30px; }
.fv-mcp-sev-CRITICAL { background: var(--severity-critical); }
.fv-mcp-sev-HIGH     { background: var(--severity-high); }
.fv-mcp-sev-MEDIUM   { background: var(--severity-medium); }
.fv-mcp-sev-LOW      { background: var(--severity-low); }
.fv-mcp-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fv-mcp-rtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fv-mcp-rid { font-family: var(--font-mono); font-size: 10px; color: var(--accent-purple); text-decoration: none; }
.fv-mcp-rid:hover { text-decoration: underline; }
.fv-mcp-rtitle { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fv-mcp-rdate { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.fv-mcp-rchips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fv-mcp-rcat { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; }

/* ---------- heatmap_view ---------- */
.fv-mcp-hm-head { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.fv-mcp-hm-grid {
  display: grid; grid-template-columns: 120px repeat(14, 1fr); gap: 2px;
  background: var(--bg-surface); border: 1px solid var(--border-color); padding: 12px;
  min-width: 780px; overflow-x: auto;
}
.fv-mcp-hm-col-h, .fv-mcp-hm-row-h {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 4px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 0;
}
.fv-mcp-hm-col-h:hover { color: var(--accent-blue); }
.fv-mcp-hm-row-h { justify-content: flex-end; padding-right: 10px; cursor: default; }
.fv-mcp-hm-row-h.fv-mcp-sev-CRITICAL { color: var(--severity-critical); background: transparent; }
.fv-mcp-hm-row-h.fv-mcp-sev-HIGH     { color: var(--severity-high);     background: transparent; }
.fv-mcp-hm-row-h.fv-mcp-sev-MEDIUM   { color: var(--severity-medium);   background: transparent; }
.fv-mcp-hm-row-h.fv-mcp-sev-LOW      { color: var(--severity-low);      background: transparent; }
.fv-mcp-hm-cell {
  background: var(--bg-elevated); border: 1px solid transparent; height: 50px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-primary);
  padding: 0;
}
.fv-mcp-hm-cell:hover { border-color: var(--accent-purple); }
.fv-mcp-hm-cell.active { border-color: var(--accent-purple); box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.4); }
.fv-mcp-hm-empty .n { color: var(--text-muted); opacity: 0.4; font-weight: 400; }
.fv-mcp-hm-drill { margin-top: 14px; background: var(--bg-surface); border: 1px solid var(--border-color); padding: 12px 14px; }
.fv-mcp-hm-drill-head { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.fv-mcp-hm-drill-row { display: grid; grid-template-columns: 100px 60px 1fr 100px; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--border-color); }
.fv-mcp-hm-drill-row:first-child { border-top: 0; }
.fv-mcp-sev-pill {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 7px; text-align: center;
  border: 1px solid; text-transform: uppercase;
}
.fv-mcp-sev-pill.fv-mcp-sev-CRITICAL { color: var(--severity-critical); border-color: var(--severity-critical); background: transparent; }
.fv-mcp-sev-pill.fv-mcp-sev-HIGH     { color: var(--severity-high);     border-color: var(--severity-high);     background: transparent; }
.fv-mcp-sev-pill.fv-mcp-sev-MEDIUM   { color: var(--severity-medium);   border-color: var(--severity-medium);   background: transparent; }
.fv-mcp-sev-pill.fv-mcp-sev-LOW      { color: var(--severity-low);      border-color: var(--severity-low);      background: transparent; }

/* ---------- timeline_view ---------- */
.fv-mcp-tl-spark { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 12px 14px; margin-bottom: 14px; }
.fv-mcp-tl-spark-h { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.fv-mcp-tl-bars { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
.fv-mcp-tl-bar { flex: 1; background: var(--bg-elevated); position: relative; min-height: 3px; }
.fv-mcp-tl-bar.has { background: var(--accent-purple); opacity: 0.78; }
.fv-mcp-tl-bar.has:hover { opacity: 1; }
.fv-mcp-tl-dot {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; background: var(--severity-high); border: 1px solid var(--bg-primary);
  border-radius: 50%; cursor: pointer; padding: 0;
}
.fv-mcp-tl-dot:hover { transform: translateX(-50%) scale(1.4); }
.fv-mcp-tl-days { display: flex; flex-direction: column; gap: 10px; }
.fv-mcp-tl-day { background: var(--bg-surface); border: 1px solid var(--border-color); }
.fv-mcp-tl-dhead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.fv-mcp-tl-ddate { font-family: var(--font-mono); font-size: 12px; color: var(--accent-purple); font-weight: 700; min-width: 130px; }
.fv-mcp-tl-dbar { flex: 1; display: flex; height: 14px; border: 1px solid var(--border-color); min-width: 120px; }
.fv-mcp-tl-seg.fv-mcp-sev-CRITICAL { background: var(--severity-critical); }
.fv-mcp-tl-seg.fv-mcp-sev-HIGH     { background: var(--severity-high); }
.fv-mcp-tl-seg.fv-mcp-sev-MEDIUM   { background: var(--severity-medium); }
.fv-mcp-tl-seg.fv-mcp-sev-LOW      { background: var(--severity-low); }
.fv-mcp-tl-dcnt { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); min-width: 80px; text-align: right; }
.fv-mcp-tl-dbody { display: flex; flex-direction: column; border-top: 1px solid var(--border-color); }
.fv-mcp-tl-row { display: grid; grid-template-columns: 100px 60px 1fr 100px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border-color); }
.fv-mcp-tl-row:first-child { border-top: 0; }

/* ---------- Universal side panel ---------- */
.fv-mcp-panels-back {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.fv-mcp-panels-back.open { opacity: 1; pointer-events: auto; }
.fv-mcp-panels {
  position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%;
  z-index: 301; background: var(--bg-surface); border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.fv-mcp-panels.open { transform: translateX(0); }
.fv-mcp-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border-color); background: var(--bg-elevated);
}
.fv-mcp-stack { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); padding: 2px 6px; border: 1px solid var(--border-color); background: var(--bg-surface); }
.fv-mcp-back, .fv-mcp-close {
  background: transparent; border: none; color: var(--text-secondary); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; padding: 4px 8px;
}
.fv-mcp-close { font-size: 18px; line-height: 1; }
.fv-mcp-back:hover { color: var(--text-primary); }
.fv-mcp-close:hover { color: var(--severity-critical); }
.fv-mcp-panel-title {
  flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--accent-purple);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fv-mcp-panel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); overflow-x: auto; background: var(--bg-elevated); flex-shrink: 0; }
.fv-mcp-tab {
  font-family: var(--font-mono); font-size: 10px; background: transparent;
  color: var(--text-muted); border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; cursor: pointer; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fv-mcp-tab:hover { color: var(--text-primary); }
.fv-mcp-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); }
.fv-mcp-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; font-family: var(--font-sans, Inter, sans-serif); font-size: 13px; color: var(--text-primary); }
.fv-mcp-section { margin-bottom: 18px; }
.fv-mcp-section h3 { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; font-weight: 400; }
.fv-mcp-row { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; display: flex; gap: 10px; }
.fv-mcp-row b { color: var(--text-primary); min-width: 90px; flex-shrink: 0; font-weight: 600; }
.fv-mcp-row code { background: var(--bg-elevated); padding: 1px 6px; color: var(--accent-green); font-family: var(--font-mono); }
.fv-mcp-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.fv-mcp-code {
  background: var(--bg-primary); border: 1px solid var(--border-color); padding: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; line-height: 1.5;
}
.fv-mcp-item { padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.fv-mcp-item:last-child { border-bottom: none; }
.fv-mcp-item-t { font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.fv-mcp-item-m { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.fv-mcp-link { color: var(--accent-purple); cursor: pointer; text-decoration: underline; }
.fv-mcp-link:hover { color: var(--text-primary); }

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .fv-mcp-panels { width: 100%; }
  .fv-mcp-brief-grid { grid-template-columns: minmax(0, 1fr); }
  .fv-mcp-hm-grid { min-width: 700px; }
  .fv-mcp-tl-dhead { gap: 6px; }
  .fv-mcp-tl-ddate { min-width: 0; }
  .fv-mcp-cluster-grid { grid-template-columns: minmax(0, 1fr); }
  /* Touch targets: WCAG suggests 44x44; 32px is the practical minimum for dense chip lists. */
  /* Touch-target floor: 32px (project standard, not WCAG 44x44 — the chip-dense rows
     in legacy modules would break visual density at 44px). */
  .fv-mcp-tag,
  .fv-mcp-btn-link,
  .fv-mcp-cve-row,
  .fv-mcp-actor-row,
  .fv-mcp-cat-row,
  .fv-mcp-c2-row,
  .fv-mcp-engine,
  .fv-mcp-tl-dot,
  .fv-mod-row-id[data-fv-mcp],
  .fv-mod-mitre-id[data-fv-mcp],
  .fv-mod-ioc-value[data-fv-mcp] {
    min-height: 32px;
  }
  .fv-mcp-tag { padding: 6px 10px; font-size: 10px; line-height: 1.4; }
  /* Mini-map cells are a special case — the 14×1 grid only has ~24px per cell at mobile widths,
     so we use min-height:32px (not the fixed 24px from base) to be tappable. */
  .fv-mcp-mitre-mini .c { min-height: 32px; height: auto; font-size: 9px; }
  .fv-mcp-tl-dot { width: 12px; height: 12px; top: -14px; }
  /* Ellipsize anything that might force the layout wider than viewport */
  .fv-mcp-rtitle, .fv-mcp-cluster-row .fv-mcp-rtitle { min-width: 0; }
  .fv-mcp-rchips { row-gap: 6px; }
  .fv-mcp-cluster-row { flex-wrap: wrap; }
  .fv-mcp-cluster-gbody { max-height: none; }
  .fv-mcp-hm-drill-row { grid-template-columns: 80px 50px 1fr; }
  .fv-mcp-hm-drill-row .fv-mcp-rdate { display: none; }
  .fv-mcp-tl-row { grid-template-columns: 80px 50px 1fr; }
  .fv-mcp-tl-row .fv-mcp-rcat { display: none; }
}

/* ---------- light theme overrides ---------- */
[data-theme="light"] .fv-mcp-tag { background: #ffffff; border-color: #e5e5e5; color: #525252; }
[data-theme="light"] .fv-mcp-cve-row .id { color: #be123c; }
[data-theme="light"] .fv-mcp-engine .n { color: #1a1a1a; }
[data-theme="light"] .fv-mcp-stat .v { color: #6d28d9; }
[data-theme="light"] .fv-mcp-panel-title,
[data-theme="light"] .fv-mcp-brief-card h3,
[data-theme="light"] .fv-mcp-tab.active { color: #6d28d9; }
[data-theme="light"] .fv-mcp-rid { color: #6d28d9; }
[data-theme="light"] .fv-mcp-actor-row .n { color: #c2410c; }
[data-theme="light"] .fv-mcp-cat-row .n { color: #0369a1; }
[data-theme="light"] .fv-mcp-c2-row .ip { color: #047857; }
[data-theme="light"] .fv-mcp-engine, [data-theme="light"] .fv-mcp-cve-row,
[data-theme="light"] .fv-mcp-actor-row, [data-theme="light"] .fv-mcp-cat-row,
[data-theme="light"] .fv-mcp-c2-row { background: #ffffff; border-color: #e5e5e5; }
[data-theme="light"] .fv-mcp-enrich-cell .v { color: #047857; }
[data-theme="light"] .fv-mcp-hm-grid { background: #fafafa; }
[data-theme="light"] .fv-mcp-hm-cell { background: #f5f5f5; }
[data-theme="light"] .fv-mcp-tl-bar.has { background: #6d28d9; }
[data-theme="light"] .fv-mcp-tl-dot { background: #c2410c; border-color: #ffffff; }
[data-theme="light"] .fv-mcp-panels { background: #ffffff; border-left-color: #e5e5e5; }
[data-theme="light"] .fv-mcp-panel-head { background: #fafafa; }

/* ============================================================
   Admin unauth_metrics tab — adm-uam-* prefix
   12th tab in /admin. Powered by 8 /api/v1/admin/unauth-metrics/* endpoints.
   ============================================================ */
.adm-tab-new { font-style: italic; color: var(--severity-critical); font-size: 9px; margin-left: 4px; font-weight: 600; }
[data-theme="light"] .adm-tab-new { color: #e11d48; }

.adm-uam-filters {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  padding: 10px 14px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 11px;
}
.adm-uam-filters label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.adm-uam-filters select { font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color); }

.adm-uam-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.adm-uam-chip { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 10px 12px; }
.adm-uam-chip-v { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent-purple); }
.adm-uam-chip-l { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.adm-uam-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 880px) { .adm-uam-grid { grid-template-columns: 1fr 1fr; } }

.adm-uam-card { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 14px 16px; margin-bottom: 14px; }
.adm-uam-card-wide { grid-column: 1 / -1; }
.adm-uam-card h3 { font-family: var(--font-mono); font-size: 11px; color: var(--accent-purple); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; font-weight: 600; }

.adm-uam-list { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.adm-uam-list td { padding: 5px 8px; border-bottom: 1px solid var(--border-color); }
.adm-uam-list tr:last-child td { border-bottom: 0; }
.adm-uam-rank { color: var(--text-muted); width: 24px; text-align: right; }
.adm-uam-host { color: var(--text-primary); }
.adm-uam-cnt { font-family: var(--font-mono); text-align: right; color: var(--text-secondary); }
.adm-uam-flag { font-size: 16px; width: 28px; text-align: center; }

.adm-uam-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.adm-uam-cat { display: flex; flex-direction: column; padding: 6px 10px; background: var(--bg-elevated); font-family: var(--font-mono); font-size: 10px; }
.adm-uam-cat-l { color: var(--text-muted); }
.adm-uam-cat-v { color: var(--accent-purple); font-size: 13px; font-weight: 700; }

.adm-uam-pages { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.adm-uam-pages th, .adm-uam-pages td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border-color); }
.adm-uam-pages th { color: var(--text-muted); font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
.adm-uam-path { color: var(--accent-purple); word-break: break-all; max-width: 380px; }
.adm-uam-tag { display: inline-block; padding: 1px 6px; background: var(--bg-elevated); color: var(--text-secondary); font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; }
.adm-uam-tag-threat { color: var(--severity-critical); }
.adm-uam-tag-blog { color: var(--accent-purple); }
.adm-uam-tag-glossary { color: var(--accent-blue); }
.adm-uam-tag-platform { color: var(--accent-green); }
.adm-uam-tag-marketing { color: var(--severity-high); }

.adm-uam-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-uam-subhead { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.04em; }
.adm-uam-pct-row { display: flex; justify-content: space-between; padding: 3px 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.adm-uam-pct-row:last-child { border-bottom: 0; }

.adm-uam-spark { display: flex; align-items: flex-end; gap: 2px; height: 60px; padding: 4px 0; }
.adm-uam-spark-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 4px; }
.adm-uam-spark-bots { background: var(--severity-high); width: 100%; }
.adm-uam-spark-humans { background: var(--accent-purple); width: 100%; }
.adm-uam-spark-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 6px; }
.adm-uam-legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: middle; }
.adm-uam-legend-humans { background: var(--accent-purple); }
.adm-uam-legend-bots { background: var(--severity-high); }

.adm-uam-heat-wrap { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.adm-uam-heat-row { display: flex; align-items: center; gap: 2px; }
.adm-uam-heat-day { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); width: 32px; text-align: right; padding-right: 6px; }
.adm-uam-heat-cell { flex: 1; height: 14px; background: var(--bg-elevated); border: 1px solid transparent; min-width: 8px; }

.adm-uam-aibots .adm-uam-bot-name { color: var(--accent-blue); font-weight: 700; }
.adm-uam-trending-head { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); font-family: var(--font-mono); font-size: 11px; color: var(--accent-purple); margin-bottom: 8px; font-weight: 600; }
.adm-uam-muted { color: var(--text-muted); font-weight: 400; }
.adm-uam-velocity { color: var(--severity-low); font-weight: 700; }

.adm-uam-funnel-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-bottom: 8px; font-style: italic; }
.adm-uam-funnel-signups { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); margin-bottom: 8px; }

.adm-uam-empty { padding: 14px; text-align: center; color: var(--text-muted); font-style: italic; }
.adm-uam-err { padding: 10px; color: var(--severity-critical); font-family: var(--font-mono); font-size: 11px; }

@media (max-width: 768px) {
  .adm-uam-filters { padding: 8px; gap: 8px; }
  .adm-uam-twocol { grid-template-columns: 1fr; }
  .adm-uam-pages, .adm-uam-list { display: block; overflow-x: auto; }
  .adm-uam-heat-cell { min-width: 6px; height: 18px; }
}

[data-theme="light"] .adm-uam-filters select { background: #ffffff; color: #1a1a1a; border-color: #d0d0d0; }
[data-theme="light"] .adm-uam-chip-v { color: #6d28d9; }
[data-theme="light"] .adm-uam-card h3 { color: #6d28d9; }
[data-theme="light"] .adm-uam-path { color: #6d28d9; }
[data-theme="light"] .adm-uam-cat-v { color: #6d28d9; }
[data-theme="light"] .adm-uam-tag-threat { color: #be123c; }
[data-theme="light"] .adm-uam-tag-blog { color: #6d28d9; }
[data-theme="light"] .adm-uam-tag-glossary { color: #0369a1; }
[data-theme="light"] .adm-uam-tag-platform { color: #047857; }
[data-theme="light"] .adm-uam-tag-marketing { color: #c2410c; }
[data-theme="light"] .adm-uam-trending-head { color: #6d28d9; }

/* ============================================================================
   ███  SIGNAL DESIGN SYSTEM  ███   (appended — overrides legacy by source order)
   Bold editorial / data-viz reinvention · violet-anchored · dark + light
   Bricolage Grotesque (display) · Inter (UI) · IBM Plex Mono (data/code)
   Fonts loaded via <link> in index.html <head>.
   ============================================================================ */

/* ---------- TOKENS: dark (default) + legacy aliases ---------- */
:root,
[data-theme="dark"] {
  --bg:#0c0a12; --bg-1:#110e1a; --bg-2:#16121f; --bg-3:#1c1727; --bg-inset:#0a0810;
  --line:#251f33; --line-2:#342c47; --line-3:#463b5e;
  --ink:#f5f3fa; --ink-2:#b6afc8; --ink-3:#837b96; --ink-4:#5b5470;
  --violet:#8b5cf6; --violet-deep:#7c3aed; --violet-bright:#a78bfa; --violet-ink:#c4b5fd;
  --violet-tint:rgba(124,58,237,0.16); --violet-tint-2:rgba(124,58,237,0.28); --violet-glow:rgba(139,92,246,0.45);
  --sev-critical:#fb6f84; --sev-high:#fdba74; --sev-medium:#c4b5fd; --sev-low:#6ee7b7;
  --sev-critical-tint:rgba(251,111,132,0.15); --sev-high-tint:rgba(253,186,116,0.15); --sev-medium-tint:rgba(196,181,253,0.15); --sev-low-tint:rgba(110,231,183,0.15);
  --spl:#6ee7b7; --kql:#c4b5fd; --sigma:#7dd3fc;
  --amber:#fdba74; --rose:#fb6f84; --mint:#6ee7b7; --sky:#7dd3fc;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.5); --shadow:0 8px 30px -8px rgba(0,0,0,0.7); --shadow-lg:0 24px 60px -12px rgba(0,0,0,0.8); --shadow-violet:0 12px 40px -10px var(--violet-glow);
  --grid-line:rgba(255,255,255,0.022);
  /* signal geometry + type */
  --rad:6px; --rad-sm:3px; --rad-lg:12px;
  --sidebar-w:244px; --topbar-h:64px; --maxw:1320px;
  --font-display:'Bricolage Grotesque','Inter',sans-serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'IBM Plex Mono','JetBrains Mono','SF Mono','Monaco',monospace;
  /* legacy aliases → signal (var() resolves per-mode) */
  --bg-primary:var(--bg); --bg-secondary:var(--bg-1); --bg-surface:var(--bg-1); --bg-surface-alt:var(--bg-inset);
  --bg-elevated:var(--bg-3); --bg-tertiary:var(--bg-2); --bg-card:var(--bg-1); --bg-hover:var(--bg-2); --bg-active:var(--bg-3);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --border-color:var(--line); --border-light:var(--line-2); --border-active:var(--line-3);
  --accent-primary:var(--ink); --accent-blue:var(--sky); --accent-green:var(--mint); --accent-purple:var(--violet-ink);
  --highlight-bg:var(--sev-high-tint); --highlight-text:var(--amber);
  --severity-critical:var(--sev-critical); --severity-high:var(--sev-high); --severity-medium:var(--sev-medium); --severity-low:var(--sev-low);
  --det-spl:var(--spl); --det-kql:var(--kql); --det-sigma:var(--sigma);
  --status-active:var(--rose); --status-monitoring:var(--amber); --status-resolved:var(--mint);
  --radius-sm:var(--rad-sm); --radius-md:var(--rad); --radius-lg:var(--rad-lg);
  color-scheme:dark;
}

/* ---------- TOKENS: light ---------- */
[data-theme="light"] {
  --bg:#f4f1fa; --bg-1:#ffffff; --bg-2:#fbf9ff; --bg-3:#f0ebfa; --bg-inset:#efeaf7;
  --line:#e7e1f3; --line-2:#d9d1ec; --line-3:#c8bce0;
  --ink:#18121f; --ink-2:#463d57; --ink-3:#6e6680; --ink-4:#968da8;
  --violet:#7c3aed; --violet-deep:#6d28d9; --violet-bright:#6d28d9; --violet-ink:#6d28d9;
  --violet-tint:rgba(124,58,237,0.10); --violet-tint-2:rgba(124,58,237,0.18); --violet-glow:rgba(124,58,237,0.25);
  --sev-critical:#e11d48; --sev-high:#d97706; --sev-medium:#7c3aed; --sev-low:#059669;
  --sev-critical-tint:rgba(225,29,72,0.10); --sev-high-tint:rgba(217,119,6,0.12); --sev-medium-tint:rgba(124,58,237,0.10); --sev-low-tint:rgba(5,150,105,0.10);
  --spl:#059669; --kql:#7c3aed; --sigma:#0284c7;
  --amber:#d97706; --rose:#e11d48; --mint:#059669; --sky:#0284c7;
  --shadow-sm:0 1px 2px rgba(24,18,31,0.06); --shadow:0 10px 34px -12px rgba(80,50,140,0.18); --shadow-lg:0 26px 60px -16px rgba(80,50,140,0.22); --shadow-violet:0 14px 40px -12px rgba(124,58,237,0.30);
  --grid-line:rgba(40,20,80,0.035);
  /* legacy aliases repeated (source-order win over original light block) */
  --bg-primary:var(--bg); --bg-secondary:var(--bg-1); --bg-surface:var(--bg-1); --bg-surface-alt:var(--bg-inset);
  --bg-elevated:var(--bg-3); --bg-tertiary:var(--bg-2); --bg-card:var(--bg-1); --bg-hover:var(--bg-2); --bg-active:var(--bg-3);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --border-color:var(--line); --border-light:var(--line-2); --border-active:var(--line-3);
  --accent-primary:var(--ink); --accent-blue:var(--sky); --accent-green:var(--mint); --accent-purple:var(--violet-ink);
  --highlight-bg:var(--sev-high-tint); --highlight-text:var(--amber);
  --severity-critical:var(--sev-critical); --severity-high:var(--sev-high); --severity-medium:var(--sev-medium); --severity-low:var(--sev-low);
  --det-spl:var(--spl); --det-kql:var(--kql); --det-sigma:var(--sigma);
  --status-active:var(--rose); --status-monitoring:var(--amber); --status-resolved:var(--mint);
  --radius-sm:var(--rad-sm); --radius-md:var(--rad); --radius-lg:var(--rad-lg);
  color-scheme:light;
}

/* ---------- BASE ---------- */
body { font-family:var(--font-sans); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
::selection { background:var(--violet-tint-2); color:var(--ink); }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--line-3); background-clip:padding-box; }

/* ---------- SIGNAL TYPE PRIMITIVES (new utility classes) ---------- */
.sig-font-display { font-family:var(--font-display); }
.sig-mono { font-family:var(--font-mono); }
.sig-micro { font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.sig-micro-vi { color:var(--violet-ink); }
.sig-numeral { font-family:var(--font-display); font-weight:700; line-height:0.92; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.sig-idx-rule { display:flex; align-items:center; gap:14px; }
.sig-idx-rule .ln { flex:1; height:1px; background:var(--line); }
@keyframes sigBlink { 0%,60%{opacity:1} 61%,100%{opacity:.35} }
@keyframes sigPulse { 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,currentColor 40%,transparent);} 50%{ box-shadow:0 0 0 4px color-mix(in srgb,currentColor 0%,transparent);} }
@keyframes sigFadeUp { from{ transform:translateY(9px);} to{ transform:none;} }

/* ============================================================================
   SIDEBAR  (restyle production .sidebar/.nav-* to Signal)
   ============================================================================ */
.sidebar { background:var(--bg-1); border-right:1px solid var(--line); }
.sidebar-header { padding:18px 18px 14px; border-bottom:none; }
.sidebar .logo { display:flex; align-items:center; gap:10px; }
.logo-words { display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; gap:0; }
.sidebar .logo-prompt { font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--violet); line-height:1; animation:sigBlink 1.4s steps(1) infinite; }
.sidebar .logo-text { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.02em; color:var(--ink); }
/* "intel" — purple italic, stacked directly under the "threadlinqs" wordmark */
.sidebar .logo-subtitle, .mobile-header .logo-subtitle { font-family:var(--font-mono); font-size:10px; font-style:italic; font-weight:600; letter-spacing:0.04em; text-transform:lowercase; color:var(--violet); margin:0; padding:0; width:auto; align-self:flex-start; }
.sidebar-nav { padding:4px 10px 16px; }
.sidebar .nav-section { margin-bottom:14px; }
.sidebar .nav-section-title { font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); padding:4px 8px 6px; }
.sidebar .nav-item { display:flex; align-items:center; gap:9px; height:31px; padding:0 9px; border-radius:var(--rad-sm); color:var(--ink-3); position:relative; transition:background .13s,color .13s; border:none; }
.sidebar .nav-item:hover { background:var(--bg-3); color:var(--ink); }
.sidebar .nav-item.active { background:var(--violet-tint); color:var(--ink); }
.sidebar .nav-item.active::before { content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; border-radius:0 2px 2px 0; background:var(--violet); }
.sidebar .nav-item .nav-dot { width:7px; height:7px; border-radius:2px; flex:none; background:var(--ink-4); }
.sidebar .nav-item:hover .nav-dot, .sidebar .nav-item.active .nav-dot { background:var(--violet); }
.sidebar .nav-label { flex:1; font-family:var(--font-mono); font-size:12.5px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; }
.sidebar .nav-count { font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.sidebar .nav-item.active .nav-count { color:var(--violet-ink); }
.sidebar .nav-chevron { font-family:var(--font-mono); color:var(--ink-4); font-size:13px; }
.sidebar .nav-sub-group { margin-left:8px; border-left:1px solid var(--line); padding-left:6px; }
.sidebar .nav-sub-item { display:flex; align-items:center; gap:8px; height:27px; padding:0 9px; border-radius:var(--rad-sm); color:var(--ink-4); transition:background .13s,color .13s; }
.sidebar .nav-sub-item:hover { background:var(--bg-3); color:var(--ink-2); }
.sidebar .nav-sub-item.active { color:var(--violet-ink); }
.sidebar .nav-sub-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; opacity:.6; }
/* tier badges — style the JS-added .nav-tier-badge (color set inline by JS) */
.sidebar .nav-tier-badge { font-family:var(--font-mono); font-size:8px; font-weight:600; letter-spacing:.05em; padding:1px 5px; border-radius:99px; border:1px solid currentColor; opacity:.9; flex:none; margin-left:4px; }
/* my-feeds section */
.sidebar .nav-myfeeds-title { display:flex; align-items:center; justify-content:space-between; }
.sidebar .nav-myfeeds-new-badge { color:var(--violet-ink); font-style:normal; font-size:9px; }
.sidebar .nav-myfeeds-manage { width:18px; height:18px; display:grid; place-items:center; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink-3); border-radius:4px; font-size:13px; line-height:1; }
.sidebar .nav-myfeeds-manage:hover { border-color:var(--violet); color:var(--violet-ink); }
/* footer */
.sidebar-footer { border-top:1px solid var(--line); padding:12px 14px; }
.sidebar .user-info { display:flex; flex-direction:column; gap:3px; }
.sidebar .user-email { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); }
.sidebar .user-email:hover { color:var(--violet-ink); }
.sidebar .user-tier { font-family:var(--font-mono); font-size:9.5px; color:var(--violet-ink); letter-spacing:.04em; }
.sidebar .nav-logout-btn { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); background:none; border:none; cursor:pointer; padding:4px 0; text-align:left; }
.sidebar .nav-logout-btn:hover { color:var(--rose); }
.sidebar .auth-buttons { display:flex; flex-direction:column; gap:7px; }
.sidebar .nav-auth-btn { font-family:var(--font-mono); font-size:12px; padding:8px 12px; border-radius:var(--rad-sm); border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink-2); text-align:center; transition:all .14s; }
.sidebar .nav-auth-btn:hover { border-color:var(--line-3); color:var(--ink); background:var(--bg-3); }
.sidebar .nav-auth-signup { background:var(--violet-deep); border-color:var(--violet-deep); color:#fff; }
.sidebar .nav-auth-signup:hover { background:var(--violet); border-color:var(--violet); color:#fff; box-shadow:var(--shadow-violet); }
.sidebar .stats-mini { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); margin-top:10px; }
.sidebar-close { color:var(--ink-3); background:none; border:none; }

/* ---------- MOBILE HEADER ---------- */
.mobile-header { background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.mobile-header .logo-prompt { color:var(--violet); font-family:var(--font-mono); font-weight:700; }
.mobile-header .logo-text { font-family:var(--font-display); font-weight:700; color:var(--ink); }
.mobile-menu-btn, .mobile-filter-btn { color:var(--ink-2); background:transparent; border:1px solid transparent; border-radius:var(--rad-sm); }
.mobile-menu-btn:hover, .mobile-filter-btn:hover { background:var(--bg-3); color:var(--ink); }

/* ============================================================================
   TOPBAR / STATS BAR  (restyle to Signal topbar chrome)
   ============================================================================ */
.stats-bar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 26px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(14px); }
.stats-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stat-tag { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--ink-2); padding:4px 9px; border-radius:99px; border:1px solid var(--line-2); background:var(--bg-1); }
.stat-tag-bracket { color:var(--ink-4); }
.stat-tag-label { color:var(--ink-3); text-transform:lowercase; letter-spacing:.02em; }
.stat-tag-value { color:var(--ink); font-weight:600; }
.stat-tag-value.critical { color:var(--sev-critical); }
.stat-tag-value.high { color:var(--sev-high); }
.stat-tag-critical { border-color:color-mix(in srgb,var(--sev-critical) 30%,transparent); }
.stat-tag-high { border-color:color-mix(in srgb,var(--sev-high) 30%,transparent); }
.stat-severity-bar { height:6px; border-radius:99px; overflow:hidden; background:var(--bg-3); }
/* icon-style chrome buttons */
.notif-btn, .theme-toggle-btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); background:transparent; border:1px solid var(--line-2); border-radius:var(--rad-sm); padding:6px 11px; cursor:pointer; transition:all .14s; }
.notif-btn:hover, .theme-toggle-btn:hover { background:var(--bg-3); color:var(--ink); border-color:var(--line-3); }
.notif-bracket, .theme-bracket { color:var(--ink-4); }
.notif-count { font-family:var(--font-mono); font-size:9px; font-weight:600; color:#fff; background:var(--violet); border-radius:99px; min-width:15px; height:15px; padding:0 3px; display:grid; place-items:center; }
.topbar-user { display:flex; align-items:center; gap:10px; margin-left:auto; }
.topbar-user-link { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.topbar-user-link:hover { color:var(--violet-ink); }
.topbar-user-dot { width:8px; height:8px; border-radius:50%; background:var(--violet); }
.topbar-user-tier { font-size:10px; color:var(--violet-ink); }
.topbar-signout-btn { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); background:none; border:none; cursor:pointer; }
.topbar-signout-btn:hover { color:var(--rose); }

/* ============================================================================
   FEED HEADER / TLQL bar
   ============================================================================ */
.feed-header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 26px 6px; }
.feed-title { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); flex:none; }
.feed-tlql-input { flex:1; min-width:240px; max-width:640px; height:38px; padding:0 14px; border:1px solid var(--line-2); border-radius:var(--rad); background:var(--bg-1); color:var(--ink); font-family:var(--font-mono); font-size:12.5px; transition:border-color .15s,box-shadow .15s; }
.feed-tlql-input:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); }
.feed-tlql-match { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); flex:none; }
.feed-controls { display:flex; align-items:center; gap:8px; margin-left:auto; }
.feed-tlql-ai { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--violet-ink); background:var(--violet-tint); border:1px solid color-mix(in srgb,var(--violet) 30%,transparent); border-radius:var(--rad-sm); padding:6px 11px; cursor:pointer; transition:all .14s; }
.feed-tlql-ai:hover { background:var(--violet-tint-2); }
.advanced-search-btn, .feed-sort { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); background:transparent; border:1px solid transparent; border-radius:var(--rad-sm); padding:6px 10px; cursor:pointer; transition:all .14s; }
.advanced-search-btn:hover, .feed-sort:hover { background:var(--bg-3); color:var(--ink); }
.section-title { font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
.sort-select, .filter-select { background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--rad-sm); color:var(--ink); font-family:var(--font-mono); font-size:12px; }
.sort-select:focus, .filter-select:focus { border-color:var(--violet); outline:none; }
.filters-toggle { color:var(--ink-2); background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--rad-sm); }
.filters-toggle:hover { border-color:var(--violet); color:var(--ink); }

/* ============================================================================
   THREAT CARDS / ROWS (feed items) — light Signal polish
   ============================================================================ */
.threat-card, .threat-row { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); transition:border-color .14s, background .14s, transform .14s, box-shadow .14s; }
.threat-card:hover, .threat-row:hover { border-color:var(--violet); background:var(--bg-2); }
.threat-card.active, .threat-row.active { border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }

/* ============================================================================
   BUTTONS / CHIPS / BADGES / STATUS
   ============================================================================ */
.btn, .filter-btn { font-family:var(--font-mono); border-radius:var(--rad-sm); transition:all .15s ease; }
.severity-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:var(--rad-sm); }
.severity-badge.critical { color:var(--sev-critical); background:var(--sev-critical-tint); }
.severity-badge.high { color:var(--sev-high); background:var(--sev-high-tint); }
.severity-badge.medium { color:var(--sev-medium); background:var(--sev-medium-tint); }
.severity-badge.low { color:var(--sev-low); background:var(--sev-low-tint); }
.trending-badge { font-family:var(--font-mono); font-size:10px; font-weight:600; padding:2px 7px; border-radius:99px; letter-spacing:.03em; }

/* ============================================================================
   MODALS / OVERLAYS / TOAST — Signal panels
   ============================================================================ */
.search-modal-content, .shortcuts-content, .compare-panel, .tlql-ai-box, .notif-panel { background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--rad-lg); box-shadow:var(--shadow-lg); }
.search-modal-backdrop, .shortcuts-backdrop { background:color-mix(in srgb,var(--bg-inset) 78%,transparent); backdrop-filter:blur(6px); }
.search-modal-input, .tlql-ai-input { background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--rad); color:var(--ink); }
.search-modal-input:focus, .tlql-ai-input:focus { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); outline:none; }
.toast { background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--rad); box-shadow:var(--shadow-lg); color:var(--ink); }
.tlql-ai-toast { background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--rad); box-shadow:var(--shadow-lg); }
.shortcut-item kbd { background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--rad-sm); color:var(--ink); font-family:var(--font-mono); }
.upgrade-gate { color:var(--ink); }
.upgrade-gate-title { font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
.verify-notice { background:var(--sev-high-tint); border-bottom:1px solid color-mix(in srgb,var(--amber) 30%,transparent); color:var(--ink); }

/* ============================================================================
   PAGE HEADINGS (shared, used by page modules)
   ============================================================================ */
.page-title, .main-header .page-title { font-family:var(--font-display); font-weight:800; letter-spacing:-0.025em; color:var(--ink); }
.page-subtitle { color:var(--ink-3); }

/* ============================================================================
   SIGNAL HOME HUB — command / briefing / explorer
   ============================================================================ */
/* shared primitives used by hub builders */
.panel { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); }
.panel-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.numeral { font-family:var(--font-display); font-weight:700; line-height:.92; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.fade-up { animation:sigFadeUp .4s cubic-bezier(.2,.7,.3,1); }
.threat-id { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em; }
.mono { font-family:var(--font-mono); }
.spot, .tcard, .brief-feat, .brief-debrief, .stream-it, .actrow { text-decoration:none; }
.spot *, .tcard *, .brief-feat *, .brief-debrief *, .stream-it * { text-decoration:none; }
.bg-critical{ background:var(--sev-critical);} .bg-high{ background:var(--sev-high);} .bg-medium{ background:var(--sev-medium);} .bg-low{ background:var(--sev-low);}
.sev-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:var(--rad-sm); white-space:nowrap; }
.sev-tag::before { content:""; width:6px; height:6px; border-radius:1px; background:currentColor; flex:none; }
.sev-tag.critical { color:var(--sev-critical); background:var(--sev-critical-tint);} .sev-tag.high{ color:var(--sev-high); background:var(--sev-high-tint);} .sev-tag.medium{ color:var(--sev-medium); background:var(--sev-medium-tint);} .sev-tag.low{ color:var(--sev-low); background:var(--sev-low-tint);}
.status-pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:99px; color:var(--ink-2); border:1px solid var(--line-2); }
.status-pill .dot { width:6px; height:6px; border-radius:50%; background:var(--ink-3); }

/* render container reset for hub views (explorer keeps default list layout) */
.threats-section[data-home-view="briefing"] #threatsList,
.threats-section[data-home-view="command"] #threatsList { display:block; gap:0; }
.threats-section[data-home-view="briefing"] .section-header,
.threats-section[data-home-view="command"] .section-header { display:none; }

/* hub switcher bar */
.hubbar { display:flex; align-items:center; gap:18px; margin:4px 0 20px; }
.hub-seg { display:flex; gap:3px; padding:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:9px; }
.hub-seg-b { font-family:var(--font-sans); padding:7px 16px; border-radius:6px; border:none; background:transparent; cursor:pointer; font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--ink-3); transition:all .15s; }
.hub-seg-b:hover { color:var(--ink); }
.hub-seg-b.on { background:var(--violet-deep); color:#fff; box-shadow:var(--shadow-violet); }
.hub-meta { display:flex; align-items:center; gap:12px; }
.hub-live { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; color:var(--mint); letter-spacing:.12em; text-transform:uppercase; }
.hub-live-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); animation:sigPulse 2s infinite; }

/* metrics */
.metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.metric { padding:15px 16px 12px; position:relative; overflow:hidden; }
.metric-top { display:flex; align-items:center; justify-content:space-between; }
.metric-mid { margin:8px 0 6px; }
.metric-val { font-size:38px; color:var(--ink); }
.metric-suf { font-size:20px; color:var(--ink-3); margin-left:2px; }
.spark { display:block; width:100%; }

/* command grid */
.cmd-grid { display:grid; grid-template-columns:1fr 312px; gap:18px; align-items:start; }
.cmd-left { display:flex; flex-direction:column; gap:24px; min-width:0; }
.cmd-horizon-body { display:flex; align-items:center; gap:24px; padding:18px; }
.cmd-gauge { flex:none; }
.gauge { position:relative; width:104px; height:104px; border-radius:50%; display:grid; place-items:center; }
.gauge-hole { position:absolute; inset:11px; border-radius:50%; background:var(--bg-1); }
.gauge-c { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; z-index:1; }
.gauge-val { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--sev-high); }
.gauge-sub { font-size:8px !important; }
.hz-legend { display:flex; gap:12px; }
.hz-legend span { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); }
.hz-legend i { width:8px; height:8px; border-radius:2px; }
.horizon { flex:1; display:flex; align-items:flex-end; gap:4px; height:160px; min-width:0; }
.hz-col { flex:1; display:flex; align-items:flex-end; justify-content:center; height:100%; }
.hz-stack { width:100%; max-width:22px; display:flex; flex-direction:column-reverse; border-radius:3px 3px 0 0; overflow:hidden; transition:opacity .15s; }
.hz-col:hover .hz-stack { opacity:.75; }
.hz-stack span { display:block; min-height:2px; }
.cmd-hot-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.cmd-rail { display:flex; flex-direction:column; gap:18px; }
.actfeed { padding:6px 6px 10px; max-height:360px; overflow-y:auto; }
.actrow { display:flex; gap:11px; padding:11px 10px; border-radius:6px; cursor:pointer; transition:background .13s; }
.actrow:hover { background:var(--bg-3); }
.act-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
.act-body { min-width:0; }
.act-id { font-size:10.5px; color:var(--violet-ink); }
.act-txt { font-size:12px; color:var(--ink-2); line-height:1.45; margin:2px 0 3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.act-date { font-size:10px; color:var(--ink-4); }
.cmd-tactics-body { padding:14px 16px 16px; }
.rankbars { display:flex; flex-direction:column; gap:9px; }
.rb-row { display:grid; grid-template-columns:118px 1fr 28px; align-items:center; gap:10px; }
.rb-label { font-size:11px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-track { height:7px; background:var(--bg-3); border-radius:99px; overflow:hidden; }
.rb-fill { display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.7,.3,1); }
.rb-val { font-size:11px; color:var(--ink-3); text-align:right; }

/* spotlight + med card */
.spot { display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; }
.spot:hover { border-color:var(--line-3); transform:translateY(-2px); box-shadow:var(--shadow); }
.spot-media { position:relative; height:104px; background:var(--bg-inset); overflow:hidden; display:flex; align-items:flex-end; padding:12px; }
.spot-media-tag { position:relative; z-index:2; font-size:10px; color:var(--ink-3); }
.spot-media-grid { position:absolute; inset:0; background:repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 26px), radial-gradient(120% 140% at 100% 0%, var(--violet-tint) 0%, transparent 55%); }
.spot[data-cat="VULNERABILITY"] .spot-media-grid, .spot[data-cat="MALWARE"] .spot-media-grid { background-image:repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 26px), radial-gradient(120% 140% at 100% 0%, var(--sev-critical-tint) 0%, transparent 55%); }
.spot-sevbar { position:absolute; top:0; left:0; right:0; height:3px; }
.spot-body { padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; }
.spot-meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.spot-title { font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1.18; letter-spacing:-.02em; color:var(--ink); }
.spot-summary { font-size:12.5px; color:var(--ink-2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.spot-foot { display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:2px; font-size:11px; }
.spot-foot .mono, .spot-foot .sig-mono { color:var(--ink-3); }
.spot-actor { color:var(--violet-ink) !important; }
.spot-read { margin-left:auto; color:var(--violet-ink) !important; }
.tcard { position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); padding:15px 16px 14px 18px; cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; overflow:hidden; display:flex; flex-direction:column; }
.tcard:hover { border-color:var(--line-3); transform:translateY(-2px); box-shadow:var(--shadow); }
.tcard-rail { position:absolute; left:0; top:0; bottom:0; width:3px; }
.tcard-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.tcard-title { font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.tcard-sum { font-size:12px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:12px; }
.tcard-foot { display:flex; align-items:center; gap:9px; margin-top:auto; }
.tcard-cat { font-size:10.5px; color:var(--ink-3); }
.tcard-spacer { flex:1; }
.tcard-det { font-size:10.5px; color:var(--mint); }

/* briefing */
.brief { display:flex; flex-direction:column; gap:30px; }
.brief-top { display:grid; grid-template-columns:1fr 336px; gap:18px; align-items:stretch; }
.brief-feat { display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad-lg); overflow:hidden; cursor:pointer; transition:border-color .16s, box-shadow .16s; }
.brief-feat:hover { border-color:var(--line-3); box-shadow:var(--shadow); }
.brief-feat-media { position:relative; height:200px; background:var(--bg-inset); display:flex; align-items:flex-start; padding:16px; overflow:hidden; }
.brief-kicker { position:relative; z-index:2; font-size:11px; color:var(--ink-3); }
.brief-feat-body { padding:22px 26px 26px; display:flex; flex-direction:column; gap:13px; }
.brief-feat-meta { display:flex; align-items:center; gap:11px; }
.brief-feat-title { font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--ink); }
.brief-feat-sum { font-size:15px; color:var(--ink-2); line-height:1.6; max-width:64ch; }
.brief-feat-foot { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:12px; margin-top:4px; }
.brief-feat-foot .mono, .brief-feat-foot .sig-mono { color:var(--ink-3); }
.brief-read { margin-left:auto; color:var(--violet-ink) !important; font-weight:500; }
.brief-debrief { display:flex; flex-direction:column; cursor:pointer; transition:border-color .16s; }
.brief-debrief:hover { border-color:var(--violet); }
.brief-deb-date { font-size:11px; color:var(--ink-3); }
.brief-deb-head { font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-.02em; padding:14px 20px 16px; color:var(--ink); }
.brief-deb-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:0 0 auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brief-deb-stats > div { background:var(--bg-1); padding:16px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.brief-deb-stats .numeral { font-size:30px; color:var(--ink); }
.brief-deb-btn { margin:18px 20px; justify-content:center; display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--line-2); border-radius:var(--rad-sm); font-family:var(--font-mono); font-size:12px; color:var(--ink-2); background:var(--bg-2); }
.brief-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:14px; }
.brief-stream-list { margin-top:14px; display:flex; flex-direction:column; gap:3px; }
.stream-it { position:relative; display:flex; align-items:center; gap:12px; padding:9px 12px 9px 16px; border-radius:6px; cursor:pointer; transition:background .13s; }
.stream-it:hover { background:var(--bg-2); }
.stream-rail { position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:3px; }
.stream-title { font-size:13.5px; font-weight:500; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stream-id { font-size:10.5px; color:var(--ink-4); flex:none; }
.brief-curated .sig-idx-rule, .brief-developing .sig-idx-rule, .cmd-hot .sig-idx-rule { margin-bottom:2px; }

/* hub responsive */
@media (max-width:1000px){
  .metric-row { grid-template-columns:repeat(2,1fr); }
  .cmd-grid { grid-template-columns:1fr; }
  .brief-top { grid-template-columns:1fr; }
  .cmd-hot-grid, .brief-rail { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .metric-row, .cmd-hot-grid, .brief-rail { grid-template-columns:1fr; }
  .hubbar { flex-wrap:wrap; gap:12px; }
  .brief-feat-title { font-size:24px; }
  .cmd-horizon-body { flex-direction:column; gap:14px; }
}

/* ============================================================================
   SIGNAL v2 — persistent topbar, no-underline, >_ logo, threat-detail editorial
   ============================================================================ */

/* ---- global: kill ugly link underlines (design has a{text-decoration:none}) ---- */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---- logo: ">_" blinking cursor ---- */
.logo-prompt { color:var(--violet); font-family:var(--font-mono); font-weight:700; }
.logo-cursor { animation:sigBlink 1.1s steps(1) infinite; }
.sidebar .logo-prompt { animation:none; }

/* ============================================================================
   PERSISTENT TOPBAR
   ============================================================================ */
.sig-main { flex:1; min-width:0; margin-left:var(--sidebar-width); display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.sig-main > .main-content { margin-left:0 !important; min-height:0 !important; height:auto; flex:1 1 auto; overflow-y:auto; background:var(--bg) !important; gap:0; }
.sig-tb { flex:none; display:flex; align-items:center; gap:18px; height:64px; padding:0 26px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:blur(14px); }
.tb-crumb { display:none; align-items:baseline; gap:9px; flex:none; min-width:140px; }
.tb-crumb-pre { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.tb-slash { color:var(--ink-4); font-family:var(--font-mono); }
.tb-page { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.tb-tlql { flex:1; max-width:640px; margin:0 auto; display:flex; align-items:center; gap:8px; height:38px; border-radius:var(--rad); border:1px solid color-mix(in srgb, var(--violet) 28%, var(--line-2)); background:var(--violet-tint); padding:0 8px 0 13px; transition:border-color .15s, box-shadow .15s; }
.tb-tlql:focus-within { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); background:var(--bg-1); }
.tb-tlql .feed-tlql-input { flex:1; min-width:0; height:100%; border:none !important; background:transparent !important; outline:none; color:var(--ink); font-family:var(--font-mono); font-size:12.5px; padding:0; box-shadow:none !important; }
.tb-tlql .feed-tlql-input::placeholder { color:var(--ink-4); }
.tb-tlql .feed-tlql-match { font-family:var(--font-mono); font-size:10px; color:var(--ink-3); flex:none; white-space:nowrap; }
.tb-tlql .feed-tlql-ai { flex:none; }
.tb-right { display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
.tb-right .notif-wrap { display:inline-flex !important; position:relative; }
.tb-right .topbar-user { margin-left:0; }
.tb-right .theme-toggle-btn .theme-label, .tb-right .notif-btn .notif-label { display:none; }
@media (max-width:768px){
  .sig-main { margin-left:0; height:100dvh; }
  .sig-tb { display:none; }
}

/* ============================================================================
   THREAT DETAIL — Signal editorial (restyle existing tp-* full-page)
   ============================================================================ */
.threat-page { background:var(--bg); }
.tp-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 30px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); position:sticky; top:0; z-index:6; }
.tp-topbar-left { display:flex; align-items:center; gap:16px; }
.tp-topbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tp-back { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); cursor:pointer; }
.tp-back:hover { color:var(--violet-ink); }
.tp-crumb { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.tp-crumb span { color:var(--violet-ink); }
.tp-action { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--rad-sm); padding:7px 12px; cursor:pointer; transition:all .14s; }
.tp-action:hover { border-color:var(--violet); color:var(--ink); }
.tp-cta-primary { background:var(--violet-deep); border-color:var(--violet-deep); color:#fff; }
.tp-cta-primary:hover { background:var(--violet); color:#fff; }
.tp-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-1); padding:24px 30px 26px; }
.tp-hero::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 30px), repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 30px), radial-gradient(80% 120% at 88% 0%, var(--violet-tint) 0%, transparent 55%); pointer-events:none; }
.tp-hero > * { position:relative; z-index:1; }
.tp-hero-meta { display:flex; align-items:center; gap:11px; margin-bottom:14px; flex-wrap:wrap; }
.tp-hero-id { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.tp-sev-badge { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:var(--rad-sm); }
.tp-sev-badge.critical{ color:var(--sev-critical); background:var(--sev-critical-tint);} .tp-sev-badge.high{ color:var(--sev-high); background:var(--sev-high-tint);} .tp-sev-badge.medium{ color:var(--sev-medium); background:var(--sev-medium-tint);} .tp-sev-badge.low{ color:var(--sev-low); background:var(--sev-low-tint);}
.tp-exploit { font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--rose); background:var(--sev-critical-tint); padding:3px 9px; border-radius:99px; letter-spacing:.04em; }
.tp-meta-sep { color:var(--ink-4); }
.tp-meta-text { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
.tp-title { font-family:var(--font-display); font-size:38px; font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--ink); max-width:24ch; margin:0 0 14px; }
.tp-summary { font-size:15px; color:var(--ink-2); line-height:1.6; max-width:80ch; margin:0 0 22px; }
.tp-stats { display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; }
.tp-stat { flex:1; min-width:120px; background:var(--bg-1); padding:12px 16px; display:flex; flex-direction:column; gap:5px; }
.tp-stat-lbl { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.tp-stat-val { font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.tp-tabs { display:flex; gap:4px; padding:0 30px; border-bottom:1px solid var(--line); position:sticky; top:0; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); z-index:5; overflow-x:auto; }
.tp-tab { padding:13px 14px; border:none; background:none; border-bottom:2px solid transparent; color:var(--ink-3); font-family:var(--font-mono); font-size:12.5px; cursor:pointer; white-space:nowrap; transition:color .14s; }
.tp-tab:hover { color:var(--ink); }
.tp-tab.active, .tp-tab.on { color:var(--violet-ink); border-bottom-color:var(--violet); }
.tp-layout { padding:26px 30px 50px; max-width:var(--maxw); margin:0 auto; }

/* ---- today's debrief: list of last-24h threats ---- */
.brief-debrief { padding:0; }
.brief-deb-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.brief-deb-count { font-size:10.5px; color:var(--violet-ink); white-space:nowrap; }
.brief-deb-list { display:flex; flex-direction:column; padding:6px; flex:1; overflow-y:auto; max-height:380px; }
.deb-it { position:relative; display:flex; align-items:center; gap:11px; padding:9px 10px 9px 14px; border-radius:var(--rad-sm); cursor:pointer; transition:background .13s; }
.deb-it:hover { background:var(--bg-2); }
.deb-it-rail { position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; }
.deb-it-body { min-width:0; flex:1; }
.deb-it-title { font-size:12.5px; font-weight:500; color:var(--ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deb-it-meta { font-size:10px; color:var(--ink-4); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deb-it-empty { padding:20px 14px; font-size:11px; color:var(--ink-4); text-align:center; }
.brief-deb-btn { margin:12px 18px 16px; justify-content:center; }

/* ---- topbar icon buttons: bell (notif) + sun/moon (theme) ---- */
.notif-btn, .theme-toggle-btn { width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:var(--rad-sm); border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer; position:relative; transition:all .14s; }
.notif-btn:hover, .theme-toggle-btn:hover { background:var(--bg-3); color:var(--ink); border-color:var(--line-2); }
.notif-btn .notif-bracket, .theme-toggle-btn .theme-bracket, .notif-btn .notif-label, .theme-toggle-btn .theme-label, .notif-btn .notif-icon, .theme-toggle-btn .theme-icon { display:none !important; }
.tb-ic-sun, .tb-ic-moon { display:none; }
[data-theme="dark"] .theme-toggle-btn .tb-ic-sun { display:block; }
[data-theme="light"] .theme-toggle-btn .tb-ic-moon { display:block; }
:root .theme-toggle-btn .tb-ic-moon { display:block; }
[data-theme="dark"] .theme-toggle-btn .tb-ic-moon { display:none; }
.notif-btn .notif-count { position:absolute; top:1px; right:1px; min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:var(--violet); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:600; display:grid; place-items:center; border:2px solid var(--bg); }

/* ============================================================================
   THREAT DETAIL — tab CONTENT (dp-* panes) → Signal editorial
   ============================================================================ */
.tp-pane { font-size:14px; color:var(--ink-2); line-height:1.7; }
.dp-overview { font-size:14px; color:var(--ink-2); line-height:1.7; }
.dp-overview b, .dp-overview strong { color:var(--ink); }
.dp-block { display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.dp-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.dp-muted-text { color:var(--ink-3); }
.detail-meta-item, .dp-attr-cell { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); padding:12px 15px; display:flex; flex-direction:column; gap:4px; }
.detail-meta-label, .dp-attr-label { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.detail-meta-value, .dp-attr-value { font-size:13px; font-weight:600; color:var(--ink); }
/* identifier + tag chips */
.dp-ident-badge { font-family:var(--font-mono); font-size:11px; font-weight:600; padding:4px 9px; border-radius:var(--rad-sm); border:1px solid var(--line-2); color:var(--ink-2); background:var(--bg-2); }
.dp-tag, .dp-tag-cve, .dp-tag-cwe { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); background:var(--bg-2); border:1px solid var(--line); padding:3px 8px; border-radius:99px; }
.dp-tag-cve { color:var(--sev-critical); background:var(--sev-critical-tint); border-color:color-mix(in srgb,var(--sev-critical) 30%,transparent); }
.dp-tag-cwe { color:var(--amber); background:var(--sev-high-tint); border-color:color-mix(in srgb,var(--amber) 30%,transparent); }
.dp-tag:hover { border-color:var(--violet); color:var(--violet-ink); }
.dp-vuln-clickable { cursor:pointer; }
/* detections — code blocks */
.dp-det-code, .dp-code-content { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--rad-sm); font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--ink); }
.dp-code-lines { color:var(--ink-4); font-family:var(--font-mono); }
.dp-lang-tab { font-family:var(--font-mono); font-size:11.5px; padding:7px 16px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-3); border-radius:var(--rad-sm) var(--rad-sm) 0 0; cursor:pointer; }
.dp-lang-tab.active { color:var(--ink); background:var(--bg-inset); font-weight:600; }
.dp-lang-dim { opacity:.55; }
.dp-det-num { color:var(--violet-ink); font-family:var(--font-mono); font-weight:600; }
.dp-det-badge { font-family:var(--font-mono); font-size:10px; padding:2px 7px; border-radius:99px; }
.dp-det-section-label, .dp-det-mitre-label, .dp-det-tuning-text { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.dp-bracket-btn, .tp-bracket-btn, .dp-copy-btn { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--rad-sm); padding:4px 9px; cursor:pointer; transition:all .13s; }
.dp-bracket-btn:hover, .tp-bracket-btn:hover, .dp-copy-btn:hover { border-color:var(--violet); color:var(--violet-ink); }
/* timeline */
.dp-timeline-row { display:grid; grid-template-columns:104px 12px 1fr; gap:14px; align-items:start; padding:13px 0; border-bottom:1px solid var(--line); }
.dp-tl-date { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.dp-tl-dot { width:9px; height:9px; border-radius:50%; margin-top:4px; background:var(--violet); }
.dp-tl-text { font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.dp-tl-sub-item { font-size:12px; color:var(--ink-3); }
/* mitre techniques + kill chain */
.dp-technique-row { display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.dp-technique-id { font-family:var(--font-mono); font-size:11.5px; color:var(--sigma); font-weight:600; }
.dp-technique-name { font-size:13px; color:var(--ink); }
.dp-kc-cell { display:flex; flex-direction:column; gap:6px; align-items:center; }
.dp-kc-bar { width:100%; height:6px; border-radius:2px; background:var(--line-2); }
.dp-kc-label { font-family:var(--font-mono); font-size:9px; color:var(--ink-3); }
/* references */
.dp-ref-row { display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); }
.dp-ref-type { font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--violet-ink); }
.dp-ref-title { flex:1; font-size:13px; color:var(--ink); }
/* iocs (indicators) */
.ioc-val { font-family:var(--font-mono); font-size:12.5px; color:var(--ink); word-break:break-all; }

/* ---- threat detail mobile ---- */
@media (max-width:900px){
  .tp-layout { padding:20px 16px 50px; }
  .tp-hero { padding:18px 16px 22px; }
  .tp-title { font-size:26px; }
  .tp-stats { flex-direction:column; }
  .tp-topbar { padding:12px 16px; }
  .dp-technique-row { grid-template-columns:80px 1fr; }
  .dp-technique-row > :last-child { grid-column:1 / -1; }
}


/* ============================================================================
   SIGNAL PAGE-MODULE ADAPTATIONS (swarm) — per-page polish + mobile, scoped.
   ============================================================================ */

/* ---- page-my-feeds.js  [mf-] ---- */
/* ============================================================================
   SIGNAL POLISH + MOBILE — /my-feeds (mf-* prefix). Appended after the legacy
   mf-* block so this cascade wins. CSS-only; every selector is page-scoped.
   ============================================================================ */

/* ---- Page shell + header ---- */
.mf-page { max-width: 1200px; margin: 0 auto; padding: 28px 26px 64px; font-family: var(--font-sans); color: var(--ink); }
.mf-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 14px; }
.mf-title-block .mf-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-ink);
}
.mf-title-block .mf-sub {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-3);
  margin-top: 8px; max-width: 64ch; line-height: 1.55;
}

/* Primary [ + new_feed ] button — Signal violet pill */
.mf-btn {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--violet-deep); color: #fff; border: 1px solid transparent;
  padding: 9px 15px; border-radius: var(--rad-sm); cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .12s;
}
.mf-btn:hover { background: var(--violet); box-shadow: var(--shadow-violet); }
.mf-btn:active { transform: translateY(1px); }
.mf-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.mf-btn-secondary {
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--ink-2);
  padding: 9px 15px; border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; transition: all .15s;
}
.mf-btn-secondary:hover { border-color: var(--violet); color: var(--violet-ink); }
.mf-btn-danger {
  background: var(--bg-1); border: 1px solid color-mix(in srgb, var(--rose) 45%, var(--line-2));
  color: var(--rose); font-family: var(--font-mono); font-size: 12px; padding: 9px 15px;
  border-radius: var(--rad-sm); cursor: pointer; transition: all .15s;
}
.mf-btn-danger:hover { background: var(--sev-critical-tint); border-color: var(--rose); }

.mf-empty {
  text-align: center; padding: 56px 22px; color: var(--ink-3); font-size: 13px;
  font-family: var(--font-mono); line-height: 1.7;
  border: 1px dashed var(--line-2); border-radius: var(--rad-lg); background: var(--bg-1);
}
.mf-empty a { color: var(--violet-ink); text-decoration: none; }
.mf-empty a:hover { text-decoration: underline; }
.mf-limit-bar { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; margin-bottom: 16px; }

/* ---- Top tab bar (feeds / library) ---- */
.mf-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.mf-tab {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-3); padding: 9px 13px; cursor: pointer; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.mf-tab:hover { color: var(--ink); }
.mf-tab.mf-tab-active { color: var(--violet-ink); border-bottom-color: var(--violet); }

/* ---- Feed cards (Signal panels) ---- */
.mf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mf-card {
  position: relative; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--rad); padding: 16px 16px 14px 18px; overflow: hidden;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.mf-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--violet); border-radius: var(--rad) 0 0 var(--rad);
}
.mf-card:hover { border-color: var(--violet); transform: translateY(-2px); box-shadow: var(--shadow); }
.mf-card.color-rose::before { background: var(--rose); }
.mf-card.color-peach::before { background: var(--amber); }
.mf-card.color-lavender::before { background: var(--violet); }
.mf-card.color-mint::before { background: var(--mint); }
.mf-card.color-sky::before { background: var(--sky); }
.mf-card.color-yellow::before { background: var(--amber); }
.mf-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.mf-card-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; }
.mf-card-counts { font-family: var(--font-mono); font-size: 11px; color: var(--mint); white-space: nowrap; flex: none; }
.mf-card-counts .mf-new { color: var(--rose); font-weight: 700; margin-left: 6px; }
.mf-card-desc { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); min-height: 18px; margin-bottom: 10px; line-height: 1.55; }
.mf-card-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; min-height: 18px; }
.mf-pill {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: 99px;
  background: var(--violet-tint); color: var(--violet-ink);
}
.mf-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mf-card-actions button, .mf-card-actions a {
  font-family: var(--font-mono); font-size: 11px; padding: 6px 10px; border-radius: var(--rad-sm);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2);
  cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
  flex: 0 0 auto; transition: all .15s;
}
.mf-card-actions button:hover, .mf-card-actions a:hover { border-color: var(--violet); color: var(--violet-ink); }
.mf-card-actions .mf-card-del { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 28%, var(--line-2)); }
.mf-card-actions .mf-card-del:hover { border-color: var(--rose); background: var(--sev-critical-tint); color: var(--rose); }

/* ---- Tenant-shared feeds (enterprise) ---- */
.mf-shared-badge {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 99px;
  background: var(--gold-tint, color-mix(in srgb, #fde68a 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold, #fde68a) 35%, var(--line));
  color: var(--gold, #fde68a); white-space: nowrap;
}
.mf-vis-row { display: flex; flex-direction: column; gap: 8px; }
.mf-vis-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad);
  padding: 11px 13px; transition: border-color .15s, background .15s;
}
.mf-vis-opt:hover { border-color: var(--line-3); }
.mf-vis-opt.selected { border-color: var(--violet); background: var(--violet-tint); color: var(--ink); }
.mf-vis-opt input { accent-color: var(--violet); margin: 0; flex: none; }
.mf-vis-opt strong { color: var(--ink); font-weight: 600; }

/* ---- Modal ---- */
.mf-modal-bg {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--bg-inset) 78%, transparent);
  backdrop-filter: blur(6px); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.mf-modal {
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad-lg);
  box-shadow: var(--shadow-lg); max-width: 640px; width: 100%; padding: 22px 24px;
  font-family: var(--font-sans); max-height: 90vh; overflow-y: auto;
}
.mf-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.mf-modal-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-ink); }
.mf-modal-close { background:none; border:none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor:pointer; padding: 2px 6px; border-radius: var(--rad-sm); transition: all .14s; }
.mf-modal-close:hover { color: var(--ink); background: var(--bg-3); }
.mf-field { margin-bottom: 14px; }
.mf-field-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 7px; display: block; }
.mf-input, .mf-textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 12.5px; padding: 9px 11px; border-radius: var(--rad-sm);
  outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
.mf-input::placeholder, .mf-textarea::placeholder { color: var(--ink-4); }
.mf-input:focus, .mf-textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.mf-textarea { resize: vertical; min-height: 60px; }

/* color swatches */
.mf-color-row { display:flex; gap: 9px; }
.mf-color-swatch {
  width: 26px; height: 26px; cursor: pointer; border: 2px solid transparent; border-radius: 7px;
  transition: border-color .15s, transform .12s;
}
.mf-color-swatch:hover { transform: scale(1.08); }
.mf-color-swatch.selected { border-color: var(--ink); }
.mf-color-swatch.color-rose { background: var(--rose); }
.mf-color-swatch.color-peach { background: var(--amber); }
.mf-color-swatch.color-lavender { background: var(--violet); }
.mf-color-swatch.color-mint { background: var(--mint); }
.mf-color-swatch.color-sky { background: var(--sky); }
.mf-color-swatch.color-yellow { background: #fde68a; }

/* filter chips */
.mf-chip-row { display:flex; flex-wrap: wrap; gap: 5px; }
.mf-chip {
  font-family: var(--font-mono); font-size: 10px; padding: 5px 9px; border-radius: var(--rad-sm);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-3); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em; transition: all .14s;
}
.mf-chip:hover { border-color: var(--violet); color: var(--ink); }
.mf-chip.selected { background: var(--violet-tint); border-color: var(--violet); color: var(--violet-ink); }
.mf-chip.color-rose.selected { background: var(--sev-critical-tint); border-color: var(--rose); color: var(--rose); }
.mf-chip.color-peach.selected { background: var(--sev-high-tint); border-color: var(--amber); color: var(--amber); }

.mf-preview {
  padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--mint); text-align: center;
}
.mf-modal-actions { display:flex; gap: 8px; justify-content:flex-end; margin-top: 18px; flex-wrap: wrap; }

/* TLQL block */
.mf-tlql-top {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 13px 14px; margin-bottom: 14px;
}
.mf-tlql-top .mf-field-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mf-tlql-top .mf-field-label > span:first-child { color: var(--ink-2); }
.mf-tlql-top .mf-field-label a { color: var(--violet-ink) !important; text-decoration: none; }
.mf-tlql-top .mf-preview { margin-top: 8px; background: var(--bg-1); border-color: var(--line-2); }
.mf-tlql-input { font-family: var(--font-mono); font-size: 12px; color: var(--violet-ink); background: var(--bg-1); }
.mf-tlql-status { font-family: var(--font-mono); font-size: 10px; margin-top: 5px; min-height: 14px; }
.mf-tlql-ok { color: var(--mint); }
.mf-tlql-err { color: var(--rose); }

.mf-divider { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

/* group tabs (main / or / not) */
.mf-group-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-group-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; padding: 6px 10px; border-radius: var(--rad-sm);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-3); cursor: pointer;
  transition: all .14s;
}
.mf-group-tab:hover { color: var(--ink); border-color: var(--line-3); }
.mf-group-tab.mf-group-active { border-color: var(--violet); color: var(--ink); background: var(--violet-tint); }
.mf-group-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--violet); flex-shrink: 0; }
.mf-group-lavender .mf-group-dot { background: var(--violet); }
.mf-group-peach .mf-group-dot { background: var(--amber); }
.mf-group-rose .mf-group-dot { background: var(--rose); }
.mf-group-peach.mf-group-active { border-color: var(--amber); background: var(--sev-high-tint); }
.mf-group-rose.mf-group-active { border-color: var(--rose); background: var(--sev-critical-tint); }
.mf-group-x { color: var(--ink-4); margin-left: 2px; cursor: pointer; font-size: 13px; line-height: 1; }
.mf-group-x:hover { color: var(--rose); }
.mf-group-add {
  font-family: var(--font-mono); font-size: 11px; padding: 6px 10px; border-radius: var(--rad-sm);
  background: none; border: 1px dashed var(--line-2); color: var(--ink-3); cursor: pointer; transition: all .14s;
}
.mf-group-add:hover { border-color: var(--violet); color: var(--violet-ink); }
.mf-group-body { padding-top: 4px; }

/* display modules picker */
.mf-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mf-module {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px;
  align-items: start; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--rad-sm);
  background: var(--bg-2); cursor: pointer; transition: background .14s, border-color .14s;
}
.mf-module:hover { background: var(--violet-tint); border-color: var(--violet); }
.mf-module input[type=checkbox] { margin-top: 2px; cursor: pointer; accent-color: var(--violet); grid-row: 1 / 3; }
.mf-module-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; }
.mf-module-desc { font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-4); line-height: 1.45; grid-column: 2; }
.mf-module input[type=checkbox]:checked ~ .mf-module-label { color: var(--violet-ink); }
.mf-module-locked { opacity: 0.5; cursor: not-allowed; }
.mf-module-locked input[type=checkbox] { cursor: not-allowed; }
.mf-module-lock { font-family: var(--font-mono); font-size: 8.5px; color: var(--amber); margin-left: 6px; letter-spacing: 0.04em; }

/* AI buttons */
.mf-tlql-ai-btn, .mf-feed-explain-btn {
  font-family: var(--font-mono); font-size: 10.5px; padding: 4px 9px; border-radius: var(--rad-sm);
  background: var(--violet-tint); color: var(--violet-ink);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
  cursor: pointer; transition: all .14s;
}
.mf-tlql-ai-btn:hover, .mf-feed-explain-btn:hover:not(:disabled) { background: var(--violet-tint-2); border-color: var(--violet); }
.mf-tlql-ai-btn:disabled, .mf-feed-explain-btn:disabled { opacity: 0.6; cursor: default; }
.mf-feed-explanation {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); line-height: 1.6;
  background: var(--violet-tint); border-left: 3px solid var(--violet); border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
  padding: 10px 12px; margin: 10px 0 4px;
}

/* ---- active feed-view badge (main feed chrome) ---- */
.feed-view-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; margin-left: 8px;
  border-radius: 99px; background: var(--violet-tint); color: var(--violet-ink);
}
.feed-view-badge .fv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.feed-view-badge.color-rose { background: var(--sev-critical-tint); color: var(--rose); }
.feed-view-badge.color-rose .fv-dot { background: var(--rose); }
.feed-view-badge.color-peach { background: var(--sev-high-tint); color: var(--amber); }
.feed-view-badge.color-peach .fv-dot { background: var(--amber); }
.feed-view-badge.color-mint { background: var(--sev-low-tint); color: var(--mint); }
.feed-view-badge.color-mint .fv-dot { background: var(--mint); }
.feed-view-badge.color-sky { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); }
.feed-view-badge.color-sky .fv-dot { background: var(--sky); }
.feed-view-badge.color-yellow { background: var(--sev-high-tint); color: var(--amber); }
.feed-view-badge.color-yellow .fv-dot { background: var(--amber); }
.feed-view-clear { margin-left: 8px; color: var(--ink-4); cursor: pointer; font-size: 11px; font-family: var(--font-mono); text-decoration: none; }
.feed-view-clear:hover { color: var(--violet-ink); }

/* ---- Library tab ---- */
.mf-lib-section { margin-bottom: 24px; }
.mf-lib-section-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.mf-lib-section-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-ink); }
.mf-lib-section-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.mf-lib-empty { padding: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); font-style: italic; }
.mf-lib-items { display: flex; flex-direction: column; gap: 5px; }
.mf-lib-item {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-sm);
  transition: border-color .14s;
}
.mf-lib-item:hover { border-color: var(--line-3); }
.mf-lib-item.expanded { border-color: var(--violet); }
.mf-lib-item-main {
  flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 11px; cursor: pointer;
}
.mf-lib-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.mf-lib-caret { font-size: 9px; color: var(--ink-4); transition: transform .16s, color .16s; }
.mf-lib-item.expanded .mf-lib-caret { transform: rotate(90deg); color: var(--violet-ink); }
.mf-lib-title { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); flex: 1 1 200px; min-width: 0; }
.mf-lib-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.mf-lib-link { color: var(--violet-ink); text-decoration: none; font-size: 10px; font-family: var(--font-mono); }
.mf-lib-link:hover { text-decoration: underline; }
.mf-lib-when { color: var(--ink-4); }
.mf-lib-remove {
  flex: none; align-self: stretch; width: 34px; background: none; border: none; border-left: 1px solid var(--line);
  color: var(--ink-4); font-size: 15px; cursor: pointer; transition: all .14s; border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
}
.mf-lib-remove:hover { color: var(--rose); background: var(--sev-critical-tint); }

/* library badges */
.mf-badge { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.mf-badge-critical { background: var(--sev-critical-tint); color: var(--sev-critical); }
.mf-badge-high { background: var(--sev-high-tint); color: var(--sev-high); }
.mf-badge-medium { background: var(--sev-medium-tint); color: var(--sev-medium); }
.mf-badge-low { background: var(--sev-low-tint); color: var(--sev-low); }
.mf-badge-info { background: var(--bg-3); color: var(--ink-3); }
.mf-badge-cat { background: var(--violet-tint); color: var(--violet-ink); }

/* library drill-down */
.mf-lib-drilldown {
  flex: 1 1 100%; width: 100%; background: var(--bg-2); border-top: 1px solid var(--line);
  border-left: 3px solid var(--violet); padding: 12px 14px;
}
.mf-lib-dd-rose { border-left-color: var(--rose); }
.mf-lib-dd-peach { border-left-color: var(--amber); }
.mf-lib-dd-lavender { border-left-color: var(--violet); }
.mf-lib-dd-mint { border-left-color: var(--mint); }
.mf-lib-dd-sky { border-left-color: var(--sky); }
.mf-lib-dd-yellow { border-left-color: #fde68a; }
.mf-lib-dd-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; }
.mf-lib-dd-row:last-child { border-bottom: none; }
.mf-lib-dd-label { flex: 0 0 90px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.mf-lib-dd-row > span:not(.mf-lib-dd-label):not(.mf-badge):not(.mf-pill) { flex: 1; min-width: 0; color: var(--ink); word-wrap: break-word; }
.mf-lib-dd-row a { color: var(--violet-ink) !important; text-decoration: none; }
.mf-lib-dd-row a:hover { text-decoration: underline; }
.mf-lib-dd-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mf-lib-dd-open {
  font-family: var(--font-mono); font-size: 11px; padding: 5px 10px; border-radius: var(--rad-sm);
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--violet-ink);
  text-decoration: none; transition: all .14s;
}
.mf-lib-dd-open:hover { border-color: var(--violet); background: var(--violet-tint); }
.mf-lib-code-wrap { margin-top: 8px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad-sm); overflow: hidden; }
.mf-lib-code-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; background: var(--bg-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.mf-lib-copy { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: var(--rad-sm); background: none; border: 1px solid var(--line-2); color: var(--violet-ink); cursor: pointer; transition: all .14s; }
.mf-lib-copy:hover { border-color: var(--violet); background: var(--violet-tint); }
.mf-lib-code-body { margin: 0; padding: 12px 13px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.mf-lib-code-mini { margin: 0; padding: 8px 10px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad-sm); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* ============================================================================
   RESPONSIVE — /my-feeds
   ============================================================================ */
@media (max-width: 1000px) {
  .mf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mf-page { padding: 18px 14px 48px; }
  .mf-header { align-items: flex-start; }
  .mf-grid { grid-template-columns: 1fr; gap: 12px; }
  .mf-tabs { flex-wrap: wrap; gap: 2px; }
  .mf-tab { font-size: 11px; padding: 8px 11px; }
  .mf-modules { grid-template-columns: 1fr; }
  .mf-modal-bg { padding: 18px 10px; }
  .mf-modal { max-width: 100%; padding: 16px 15px; border-radius: var(--rad); }
  .mf-modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .mf-modal-actions .mf-btn, .mf-modal-actions .mf-btn-secondary { width: 100%; text-align: center; }
  .mf-tlql-top .mf-field-label { flex-wrap: wrap; gap: 6px; }
  /* iOS anti-zoom — inputs >=16px */
  .mf-input, .mf-textarea, .mf-tlql-input { font-size: 16px; }
  .mf-lib-dd-label { flex: 0 0 100%; }
}
@media (max-width: 480px) {
  .mf-page { padding: 14px 11px 40px; }
  .mf-card { padding: 13px 13px 12px 16px; }
  .mf-card-head { flex-direction: column; gap: 4px; }
  .mf-card-name { font-size: 15px; }
  .mf-card-actions { gap: 5px; }
  .mf-card-actions button, .mf-card-actions a { font-size: 10px; padding: 6px 8px; flex: 1 1 auto; }
  .mf-group-tabs { gap: 4px; }
  .mf-group-tab, .mf-group-add { padding: 7px 9px; font-size: 10px; }
  .mf-lib-item-main { gap: 6px; padding: 9px 10px; }
  .mf-lib-title { flex-basis: 100%; }
  .mf-lib-code-body, .mf-lib-code-mini { font-size: 11px; }
}

/* ---- page-correlation.js  [corr-] ---- */
/* ============================================================================
   SIGNAL POLISH — IOC Correlation Workstation (corr-*)
   Appended to shared styles.css. Every selector is scoped with #mainContent so
   it out-specifies the page's runtime-injected correlationCss (single-class)
   without editing that block, and cannot leak to other pages.
   Tokens only — no hardcoded palette.
   ============================================================================ */

/* --- Workspace: guard against horizontal overflow --- */
#mainContent .corr-workspace { max-width: 100%; overflow-x: hidden; }

/* --- Header: editorial Bricolage title + mono eyebrow + numerals --- */
#mainContent .corr-header {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
#mainContent .corr-header-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}
#mainContent .corr-header-subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 5px;
}
#mainContent .corr-stat-num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
#mainContent .corr-stat-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 2px;
}

/* --- Search panel: surface + violet focus/prompt accent --- */
#mainContent .corr-search-panel {
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
}
#mainContent .corr-search-prompt {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--violet-ink);
    letter-spacing: 0.02em;
}
#mainContent .corr-search-input {
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
#mainContent .corr-search-input:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-tint);
}
#mainContent .corr-search-input::placeholder { color: var(--ink-4); }

#mainContent .corr-filter-btn {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
    color: var(--ink-3);
    letter-spacing: 0.08em;
    transition: all .14s;
}
#mainContent .corr-filter-btn:hover {
    border-color: var(--line-3);
    color: var(--ink-2);
}
#mainContent .corr-filter-btn.active {
    background: var(--violet-tint);
    border-color: var(--violet);
    color: var(--violet-ink);
}

/* --- Search results --- */
#mainContent .corr-search-results::-webkit-scrollbar { width: 8px; }
#mainContent .corr-search-results::-webkit-scrollbar-track { background: var(--bg); }
#mainContent .corr-search-results::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 99px; }
#mainContent .corr-search-count,
#mainContent .corr-search-empty,
#mainContent .corr-search-more { font-family: var(--font-mono); color: var(--ink-3); }
#mainContent .corr-search-result {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    margin-bottom: 6px;
    padding: 11px 13px;
    transition: border-color .14s, transform .14s;
}
#mainContent .corr-search-result:hover {
    border-color: var(--violet);
    transform: translateY(-1px);
}
#mainContent .corr-search-result-value { font-family: var(--font-mono); color: var(--ink); }
#mainContent .corr-search-result-count { font-family: var(--font-mono); color: var(--ink-2); }
#mainContent .corr-highlight {
    background: var(--sev-high-tint);
    color: var(--amber);
    padding: 0 2px;
    border-radius: var(--rad-sm);
}

/* --- Stats bar --- */
#mainContent .corr-stats-bar {
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 13px 24px;
}
#mainContent .corr-stat-chip-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
#mainContent .corr-stat-chip-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 3px;
}
#mainContent .corr-stat-divider { background: var(--line); }

/* --- Grid layout --- */
#mainContent .corr-grid-layout {
    grid-template-columns: 1fr 340px;
    min-height: calc(100vh - 264px);
}
#mainContent .corr-main-col { border-right: 1px solid var(--line); }
#mainContent .corr-side-col { background: var(--bg-1); }

/* --- Sections: mono "// eyebrow" labels --- */
#mainContent .corr-section { border-bottom: 1px solid var(--line); padding: 22px 24px; }
#mainContent .corr-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
#mainContent .corr-section-count { font-family: var(--font-mono); color: var(--violet-ink); }
#mainContent .corr-section-subtitle { font-family: var(--font-mono); color: var(--ink-4); }
#mainContent .corr-empty-state,
#mainContent .corr-empty-state-sm { font-family: var(--font-mono); color: var(--ink-3); }

/* --- IOC type badge --- */
#mainContent .corr-ioc-type-badge {
    font-family: var(--font-mono);
    border-radius: var(--rad-sm);
    letter-spacing: 0.08em;
}

/* --- Copy buttons → violet accent --- */
#mainContent .corr-copy-btn { font-family: var(--font-mono); color: var(--ink-4); border-radius: var(--rad-sm); }
#mainContent .corr-copy-btn:hover,
#mainContent .corr-copy-btn.copied { color: var(--violet-ink); }
#mainContent .corr-copy-btn-sm {
    font-family: var(--font-mono);
    color: var(--ink-4);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
}
#mainContent .corr-copy-btn-sm:hover,
#mainContent .corr-copy-btn-sm.copied { border-color: var(--violet); color: var(--violet-ink); }

/* --- Threat chips --- */
#mainContent .corr-threat-chip {
    font-family: var(--font-mono);
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    transition: all .14s;
}
#mainContent .corr-threat-chip:hover { background: var(--bg-3); border-color: var(--violet); color: var(--ink); }
#mainContent .corr-threat-chip-sm {
    font-family: var(--font-mono);
    color: var(--ink-2);
    background: var(--bg-2);
    border-radius: var(--rad-sm);
}
#mainContent .corr-threat-chip-sm:hover { background: var(--bg-3); color: var(--ink); }
#mainContent .corr-more-badge { font-family: var(--font-mono); color: var(--ink-3); }

/* --- Shared infrastructure rows = cards --- */
#mainContent .corr-infra-row {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    transition: border-color .14s, transform .14s, background .14s;
}
#mainContent .corr-infra-row:hover {
    border-color: var(--violet);
    background: var(--bg-2);
    transform: translateY(-1px);
}
#mainContent .corr-infra-value { font-family: var(--font-mono); color: var(--ink); }
#mainContent .corr-infra-count { font-family: var(--font-mono); color: var(--ink-2); }
#mainContent .corr-conn-line { background: var(--line-3); }
#mainContent .corr-show-more {
    font-family: var(--font-mono);
    color: var(--violet-ink);
    transition: color .14s;
}
#mainContent .corr-show-more:hover { color: var(--violet-bright); }

/* --- Campaign pattern cards --- */
#mainContent .corr-pattern-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--rose);
    border-radius: var(--rad);
    transition: border-color .14s, transform .14s;
}
#mainContent .corr-pattern-card:hover { transform: translateY(-1px); }
#mainContent .corr-pattern-actor { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--rose); }
#mainContent .corr-pattern-nation { font-family: var(--font-mono); color: var(--ink-2); background: var(--bg-3); border-radius: 99px; }
#mainContent .corr-pattern-label {
    font-family: var(--font-mono);
    color: var(--violet-deep);
    background: var(--sev-high-tint);
    color: var(--amber);
    border-radius: 99px;
    letter-spacing: 0.08em;
}
#mainContent .corr-pattern-subtitle { font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.1em; }
#mainContent .corr-tech-pill {
    font-family: var(--font-mono);
    color: var(--sky);
    background: var(--violet-tint);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
}
#mainContent .corr-tech-pill-name { color: var(--ink-3); }
#mainContent .corr-infra-pill {
    font-family: var(--font-mono);
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
}
#mainContent .corr-pattern-threat:hover { background: var(--violet-tint); border-radius: var(--rad-sm); }
#mainContent .corr-pattern-threat-id { font-family: var(--font-mono); color: var(--violet-ink); }
#mainContent .corr-pattern-threat-title { font-family: var(--font-sans); color: var(--ink-2); }

/* --- Actor cards --- */
#mainContent .corr-actor-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    transition: border-color .14s;
    overflow: hidden;
}
#mainContent .corr-actor-card:hover { border-color: var(--line-3); }
#mainContent .corr-actor-header:hover { background: var(--bg-2); }
#mainContent .corr-actor-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--violet-ink); }
#mainContent .corr-actor-nation { font-family: var(--font-mono); color: var(--ink-2); background: var(--bg-3); border-radius: 99px; }
#mainContent .corr-actor-motivation { font-family: var(--font-mono); color: var(--ink-3); }
#mainContent .corr-actor-count { font-family: var(--font-mono); color: var(--violet-ink); }
#mainContent .corr-actor-toggle { font-family: var(--font-mono); color: var(--ink-3); }
#mainContent .corr-actor-threat { border-bottom: 1px solid var(--line); transition: background .12s; }
#mainContent .corr-actor-threat:hover { background: var(--violet-tint); }
#mainContent .corr-actor-threat-id { font-family: var(--font-mono); color: var(--violet-ink); }
#mainContent .corr-actor-threat-title { font-family: var(--font-sans); color: var(--ink-2); }

/* --- Sidebar panels --- */
#mainContent .corr-side-section { border-bottom: 1px solid var(--line); }
#mainContent .corr-top-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
#mainContent .corr-sort-btn {
    font-family: var(--font-mono);
    color: var(--ink-3);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
    transition: all .14s;
}
#mainContent .corr-sort-btn:hover { border-color: var(--violet); color: var(--violet-ink); }
#mainContent .corr-top-row { border-radius: var(--rad-sm); transition: background .12s; }
#mainContent .corr-top-row:hover { background: var(--bg-2); }
#mainContent .corr-top-rank { font-family: var(--font-mono); color: var(--ink-4); }
#mainContent .corr-top-value { font-family: var(--font-mono); color: var(--ink-2); }
#mainContent .corr-top-count { font-family: var(--font-mono); color: var(--ink-2); }

/* --- Technique overlap --- */
#mainContent .corr-tech-row { border-bottom: 1px solid var(--line); }
#mainContent .corr-tech-id { font-family: var(--font-mono); color: var(--sky); background: var(--violet-tint); border-radius: var(--rad-sm); }
#mainContent .corr-tech-name { font-family: var(--font-sans); color: var(--ink-2); }
#mainContent .corr-tech-count { font-family: var(--font-mono); color: var(--ink-3); }

/* --- Tag cloud --- */
#mainContent .corr-tag-pill {
    font-family: var(--font-mono);
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 99px;
    transition: border-color .14s, color .14s;
}
#mainContent .corr-tag-pill:hover { border-color: var(--violet); color: var(--violet-ink); }

/* --- Scrollbars --- */
#mainContent .corr-main-col::-webkit-scrollbar,
#mainContent .corr-side-col::-webkit-scrollbar { width: 8px; }
#mainContent .corr-main-col::-webkit-scrollbar-track,
#mainContent .corr-side-col::-webkit-scrollbar-track { background: var(--bg); }
#mainContent .corr-main-col::-webkit-scrollbar-thumb,
#mainContent .corr-side-col::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 99px; }

/* ============================================================================
   MOBILE / RESPONSIVE — no horizontal overflow, stacked layout
   ============================================================================ */
@media (max-width: 1000px) {
    #mainContent .corr-grid-layout { grid-template-columns: 1fr; min-height: 0; }
    #mainContent .corr-main-col { border-right: none; overflow: visible; }
    #mainContent .corr-side-col {
        border-top: 1px solid var(--line);
        position: static;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    #mainContent .corr-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 16px 14px;
    }
    #mainContent .corr-header-title { font-size: 22px; }
    #mainContent .corr-header-right { flex-wrap: wrap; gap: 14px; width: 100%; }
    #mainContent .corr-header-stat { align-items: flex-start; }
    #mainContent .corr-stat-num { font-size: 20px; }

    #mainContent .corr-search-panel { padding: 12px 16px; }
    #mainContent .corr-search-row { flex-direction: column; align-items: stretch; gap: 10px; }
    #mainContent .corr-search-input { min-width: 0; width: 100%; font-size: 16px; }
    #mainContent .corr-search-filters { flex-wrap: wrap; gap: 6px; }

    #mainContent .corr-stats-bar {
        padding: 10px 16px;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #mainContent .corr-stat-chip { padding: 4px 14px; }
    #mainContent .corr-stat-chip-value { font-size: 18px; }

    #mainContent .corr-section { padding: 16px; }
    #mainContent .corr-section-subtitle { margin-left: 0; width: 100%; }

    #mainContent .corr-infra-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }
    #mainContent .corr-infra-left { width: 100%; flex-wrap: wrap; }
    #mainContent .corr-infra-right { width: 100%; align-items: flex-start; }
    #mainContent .corr-infra-threats { justify-content: flex-start; }

    #mainContent .corr-search-result { flex-direction: column; gap: 9px; }
    #mainContent .corr-search-result-left { flex-wrap: wrap; }
    #mainContent .corr-search-result-right { align-items: flex-start; }
    #mainContent .corr-search-result-threats { justify-content: flex-start; }

    #mainContent .corr-pattern-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    #mainContent .corr-pattern-label { margin-left: 0; }
    #mainContent .corr-pattern-techs,
    #mainContent .corr-pattern-infra { align-items: flex-start; }

    #mainContent .corr-actor-header { flex-wrap: wrap; }
    #mainContent .corr-actor-meta { flex: 1 1 100%; order: 3; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    #mainContent .corr-header { padding: 14px 12px; }
    #mainContent .corr-header-title { font-size: 20px; }
    #mainContent .corr-search-panel { padding: 10px 12px; }
    #mainContent .corr-section { padding: 13px 12px; }
    #mainContent .corr-stats-bar { padding: 8px 12px; }
    #mainContent .corr-stat-chip { padding: 3px 10px; }
    #mainContent .corr-stat-chip-value { font-size: 16px; }
    #mainContent .corr-filter-btn { padding: 6px 10px; }
    #mainContent .corr-infra-value,
    #mainContent .corr-search-result-value { font-size: 12px; }
}

/* ============================================================================
   LIGHT MODE — token remap (only surfaces that needed it)
   ============================================================================ */
[data-theme="light"] #mainContent .corr-header { background: var(--bg); border-bottom-color: var(--line); }
[data-theme="light"] #mainContent .corr-header-title { color: var(--ink); }
[data-theme="light"] #mainContent .corr-search-panel { background: var(--bg-1); }
[data-theme="light"] #mainContent .corr-search-input { background: var(--bg); border-color: var(--line-2); color: var(--ink); }
[data-theme="light"] #mainContent .corr-search-input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
[data-theme="light"] #mainContent .corr-filter-btn { background: var(--bg-2); border-color: var(--line-2); color: var(--ink-3); }
[data-theme="light"] #mainContent .corr-filter-btn.active { background: var(--violet-tint); border-color: var(--violet); color: var(--violet-ink); }
[data-theme="light"] #mainContent .corr-stats-bar { background: var(--bg-1); }
[data-theme="light"] #mainContent .corr-side-col { background: var(--bg-1); }
[data-theme="light"] #mainContent .corr-search-result { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] #mainContent .corr-search-result:hover { border-color: var(--violet); }
[data-theme="light"] #mainContent .corr-infra-row { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] #mainContent .corr-infra-row:hover { border-color: var(--violet); background: var(--bg-2); }
[data-theme="light"] #mainContent .corr-pattern-card { background: var(--bg-1); border-color: var(--line); border-left-color: var(--rose); }
[data-theme="light"] #mainContent .corr-pattern-actor { color: var(--rose); }
[data-theme="light"] #mainContent .corr-pattern-label { color: var(--amber); background: var(--sev-high-tint); }
[data-theme="light"] #mainContent .corr-actor-card { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] #mainContent .corr-actor-name { color: var(--violet-ink); }
[data-theme="light"] #mainContent .corr-tag-pill { background: var(--bg-2); border-color: var(--line); color: var(--ink-2); }
[data-theme="light"] #mainContent .corr-tag-pill:hover { border-color: var(--violet); color: var(--violet-ink); }
[data-theme="light"] #mainContent .corr-tech-id { color: var(--sky); background: var(--violet-tint); }
[data-theme="light"] #mainContent .corr-tech-pill { color: var(--sky); background: var(--violet-tint); border-color: var(--line-2); }

/* ---- page-actor-attribution.js  [aa-] ---- */
/* ============================================================
   ACTOR ATTRIBUTION — Signal polish + mobile (aa-* prefix)
   Appended to shared styles.css. Scoped under .aa-container /
   #mainContent to outrank the page's runtime-injected <style>.
   ============================================================ */

/* ---------- header / eyebrow ---------- */
.aa-container .aa-header { border-bottom: 1px solid var(--line); padding: 0 0 12px 0; }
.aa-container .aa-title {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
}
.aa-container .aa-header-stats { gap: 18px; }
.aa-container .aa-stat { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.02em; }
.aa-container .aa-stat-total { color: var(--violet-ink); }
.aa-container .aa-stat-nations { color: var(--sky); }

/* ---------- filter bar ---------- */
.aa-container .aa-filter-bar { border-bottom: 1px solid var(--line); gap: 10px; }
.aa-container .aa-search-prompt { font-family: var(--font-mono); color: var(--mint); }
.aa-container .aa-search-input { font-family: var(--font-mono); color: var(--ink); }
.aa-container .aa-search-input::placeholder { color: var(--ink-4); }
.aa-container .aa-filter-select {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding: 5px 9px;
  transition: border-color .15s;
}
.aa-container .aa-filter-select:focus { border-color: var(--violet); }
.aa-container .aa-sort-btn {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 5px 10px;
  transition: all .15s;
}
.aa-container .aa-sort-btn:hover { border-color: var(--violet); color: var(--violet-ink); background: var(--bg-3); }

/* ---------- layout: sticky sidebar ---------- */
.aa-container .aa-panels { min-height: calc(100vh - 160px); }
.aa-container .aa-filter-sidebar {
  width: 240px; border-right: 1px solid var(--line); background: var(--bg);
  top: 52px; max-height: calc(100vh - 60px);
}
.aa-container .aa-filter-toggle {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 6px 13px;
  transition: all .15s;
}
.aa-container .aa-filter-toggle:hover { border-color: var(--violet); color: var(--violet-ink); }
.aa-container .aa-filter-toggle-count { color: var(--violet-ink); }

/* ---------- sidebar groups ---------- */
.aa-container .aa-filter-group-header {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-4);
}
.aa-container .aa-filter-group-header:hover { color: var(--ink-2); }
.aa-container .aa-filter-item { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); border-radius: var(--rad-sm); }
.aa-container .aa-filter-item:hover { color: var(--ink-2); }
.aa-container .aa-filter-item.active { color: var(--ink); }
.aa-container .aa-filter-check { border: 1px solid var(--line-2); border-radius: var(--rad-sm); }
.aa-container .aa-filter-item.active .aa-filter-check { border-color: var(--violet); color: var(--violet-ink); }
.aa-container .aa-filter-count { color: var(--ink-4); }
.aa-container .aa-filter-pill {
  font-family: var(--font-mono); font-size: 10px; padding: 3px 8px;
  border: 1px solid var(--violet); border-radius: 99px;
  color: var(--violet-ink); background: var(--violet-tint);
}
.aa-container .aa-filter-pill-x { color: var(--violet-ink); }
.aa-container .aa-filter-pill-x:hover { color: var(--rose); }
.aa-container .aa-filter-clear { font-family: var(--font-mono); font-size: 11px; color: var(--rose); }

/* ---------- results info ---------- */
.aa-container .aa-results-info {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  border-bottom: 1px solid var(--line); letter-spacing: 0.02em;
}

/* ---------- actor rows ---------- */
.aa-container .aa-row { border-bottom: 1px solid var(--line); }
.aa-container .aa-row-header { transition: background .13s; }
.aa-container .aa-row-header:hover { background: var(--bg-2); }
.aa-container .aa-row-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.aa-container .aa-row-name { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.aa-container .aa-row-aliases { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.aa-container .aa-sev-dot { border-radius: 1px; }
.aa-container .aa-sev-dot-critical { background: var(--sev-critical); }
.aa-container .aa-sev-dot-high { background: var(--sev-high); }
.aa-container .aa-sev-dot-medium { background: var(--sev-medium); }
.aa-container .aa-sev-dot-low { background: var(--sev-low); }
.aa-container .aa-row-count { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); }
.aa-container .aa-row-nation { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.aa-container .aa-row-motivation {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 7px;
  border: 1px solid var(--line-2); border-radius: 99px;
}
.aa-container .aa-mot-financial   { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.aa-container .aa-mot-espionage   { color: var(--rose);  border-color: color-mix(in srgb, var(--rose) 35%, transparent); }
.aa-container .aa-mot-disruption,
.aa-container .aa-mot-destruction  { color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 35%, transparent); }
.aa-container .aa-mot-hacktivism  { color: var(--sky);   border-color: color-mix(in srgb, var(--sky) 35%, transparent); }
.aa-container .aa-mot-other       { color: var(--ink-3); }

/* ---------- expanded row ---------- */
.aa-container .aa-row-open { background: var(--bg-1) !important; }
.aa-container .aa-row-open .aa-row-header { border-bottom: 1px solid var(--line); }
.aa-container .aa-row-open .aa-row-name { color: var(--ink); }
.aa-container .aa-row-loading { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }

/* ---------- profile stat cards (editorial numerals) ---------- */
.aa-container .aa-profile-stat {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 12px 16px;
}
.aa-container .aa-profile-stat-val {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 0.92; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.aa-container .aa-profile-stat-label {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.aa-container .aa-sev-bar { border-radius: 2px; }

/* ---------- profile tabs (violet active) ---------- */
.aa-container .aa-profile-tabs { border-bottom: 1px solid var(--line); }
.aa-container .aa-profile-tab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.aa-container .aa-profile-tab:hover { color: var(--ink-2); }
.aa-container .aa-profile-tab.active { color: var(--violet-ink); border-bottom-color: var(--violet); }

/* ---------- dossier ---------- */
.aa-container .aa-dossier-title { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; }
.aa-container .aa-dossier-key { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.aa-container .aa-dossier-val { font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); }
.aa-container .aa-dossier-val strong { color: var(--ink); }
.aa-container .aa-section-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* ---------- MITRE heatstrip ---------- */
.aa-container .aa-heatcell {
  font-family: var(--font-mono); font-size: 8px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--rad-sm);
}
.aa-container .aa-heatcell-count { font-size: 10px; font-weight: 700; }

/* ---------- threats sub-list ---------- */
.aa-container .aa-threat-item { border-bottom: 1px solid var(--line); transition: background .12s; }
.aa-container .aa-threat-item:hover { background: var(--bg-2); }
.aa-container .aa-threat-id { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); }
.aa-container .aa-threat-title { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
.aa-container .aa-threat-sev { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: var(--rad-sm); }
.aa-container .aa-threat-date { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }

/* severity tags / dots — Signal palette */
.aa-container .aa-sev-critical { background: var(--sev-critical); color: var(--bg); }
.aa-container .aa-sev-high     { background: var(--sev-high);     color: var(--bg); }
.aa-container .aa-sev-medium   { background: var(--sev-medium);   color: var(--bg); }
.aa-container .aa-sev-low      { background: var(--sev-low);      color: var(--bg); }

/* ---------- MITRE grid ---------- */
.aa-container .aa-mitre-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); }
.aa-container .aa-mitre-tactic { font-family: var(--font-mono); font-size: 10px; color: var(--sky); letter-spacing: 0.05em; text-transform: uppercase; }
.aa-container .aa-mitre-tech {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--rad-sm);
  background: var(--violet-tint); color: var(--ink-2);
}

/* ---------- IOC / arsenal tables ---------- */
.aa-container .aa-ioc-table th,
.aa-container .aa-arsenal-table th {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
  border-bottom: 1px solid var(--line); letter-spacing: 0.06em; text-transform: uppercase;
}
.aa-container .aa-ioc-table td,
.aa-container .aa-arsenal-table td {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.aa-container .aa-ioc-val { color: var(--amber); }
.aa-container .aa-arsenal-header { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; }
.aa-container .aa-arsenal-cve  { color: var(--sev-critical); }
.aa-container .aa-arsenal-cwe  { color: var(--amber); }
.aa-container .aa-arsenal-tool { color: var(--mint); }
.aa-container .aa-arsenal-type { font-size: 10px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: var(--rad-sm); }

/* ---------- detections sub-list ---------- */
.aa-container .aa-det-item { border-bottom: 1px solid var(--line); }
.aa-container .aa-det-header { transition: background .12s; }
.aa-container .aa-det-header:hover { background: var(--bg-2); }
.aa-container .aa-det-name { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
.aa-container .aa-det-type { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: var(--rad-sm); }
.aa-container .aa-det-spl   { background: var(--sev-low-tint);    color: var(--spl); }
.aa-container .aa-det-kql   { background: var(--violet-tint);     color: var(--kql); }
.aa-container .aa-det-sigma { background: rgba(125,211,252,0.15);  color: var(--sigma); }
.aa-container .aa-det-sev { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: var(--rad-sm); }
.aa-container .aa-det-chevron { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.aa-container .aa-det-code-tabs { border-bottom: 1px solid var(--line); }
.aa-container .aa-det-code-tab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.aa-container .aa-det-code-tab:hover { color: var(--ink-3); }
.aa-container .aa-det-code-tab.active { color: var(--ink-2); }
.aa-container .aa-det-code-tab-spl.active   { color: var(--spl);   border-bottom-color: var(--spl); }
.aa-container .aa-det-code-tab-kql.active   { color: var(--kql);   border-bottom-color: var(--kql); }
.aa-container .aa-det-code-tab-sigma.active { color: var(--sigma); border-bottom-color: var(--sigma); }
.aa-container .aa-det-copy-btn {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--rad-sm);
}
.aa-container .aa-det-copy-btn:hover { color: var(--ink-2); border-color: var(--line-3); }
.aa-container .aa-det-copied { color: var(--mint) !important; border-color: var(--mint) !important; }
.aa-container .aa-det-code-block {
  background: var(--bg-inset); border-left: 3px solid var(--line-2); border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
.aa-container .aa-det-code-spl   { border-left-color: var(--spl); }
.aa-container .aa-det-code-kql   { border-left-color: var(--kql); }
.aa-container .aa-det-code-sigma { border-left-color: var(--sigma); }
.aa-container .aa-det-line-num { color: var(--ink-4); }

/* ---------- timeline ---------- */
.aa-container .aa-timeline-item { border-bottom: 1px solid var(--line); }
.aa-container .aa-timeline-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.aa-container .aa-timeline-text { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }

/* ---------- tags ---------- */
.aa-container .aa-tag {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; color: var(--ink-3);
  transition: all .13s;
}
.aa-container .aa-tag:hover { border-color: var(--violet); color: var(--violet-ink); }

/* ---------- empty / loading ---------- */
.aa-container .aa-empty-text { font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); }
.aa-container .aa-empty-hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
#mainContent .aa-loading-spinner { border: 2px solid var(--line-2); border-top-color: var(--violet); }
#mainContent .aa-loading-text { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }
#mainContent .aa-empty-text { font-family: var(--font-mono); color: var(--ink-4); }
#mainContent .aa-empty-hint { font-family: var(--font-mono); color: var(--ink-4); }

/* ============================================================
   MOBILE RESPONSIVENESS — no horizontal overflow on phones
   ============================================================ */
@media (max-width: 1000px) {
  .aa-container .aa-filter-sidebar { width: 220px; }
  .aa-container .aa-profile-header { gap: 10px; }
}

@media (max-width: 768px) {
  .aa-container .aa-container,
  .aa-container { padding: 0; }
  /* stack sidebar + content; unstick rail */
  .aa-container .aa-panels { flex-direction: column; min-height: 0; }
  .aa-container .aa-filter-sidebar {
    width: 100%; position: static; top: auto; max-height: none;
    border-right: none; border-bottom: 1px solid var(--line);
    display: none; padding: 10px 12px; background: var(--bg-1);
  }
  .aa-container .aa-filter-sidebar.aa-sidebar-open { display: block; }
  .aa-container .aa-filter-toggle { display: inline-block; margin: 8px 12px; }
  .aa-container .aa-content { min-width: 0; width: 100%; }

  /* filter bar wraps */
  .aa-container .aa-filter-bar { padding: 10px 12px; gap: 8px; }
  .aa-container .aa-search-wrap { min-width: 0; flex: 1 1 100%; }

  /* row header wraps, drop low-priority columns */
  .aa-container .aa-row-header { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .aa-container .aa-row-name { flex: 1 1 auto; min-width: 120px; }
  .aa-container .aa-row-aliases { display: none; }
  .aa-container .aa-row-nation { display: none; }

  /* profile stat cards: flexible row that wraps */
  .aa-container .aa-profile-header { gap: 8px; }
  .aa-container .aa-profile-stat { flex: 1 1 calc(33.333% - 8px); min-width: 78px; padding: 10px 12px; }
  .aa-container .aa-profile-stat-val { font-size: 22px; }

  /* MITRE grid → 2 cols, heatstrip wraps */
  .aa-container .aa-mitre-grid { grid-template-columns: 1fr 1fr; }
  .aa-container .aa-heatstrip { flex-wrap: wrap; }

  /* wide tables scroll horizontally */
  .aa-container .aa-ioc-table,
  .aa-container .aa-arsenal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* code block scrolls, dossier keys narrower */
  .aa-container .aa-det-code-block { font-size: 10.5px; max-height: 320px; }
  .aa-container .aa-dossier-kv { flex-wrap: wrap; gap: 4px; }
  .aa-container .aa-dossier-key { min-width: 0; }

  /* timeline stacks */
  .aa-container .aa-timeline-date { min-width: 70px; }
}

@media (max-width: 480px) {
  .aa-container .aa-filter-bar { padding: 8px 10px; }
  .aa-container .aa-row-header { padding: 8px 10px; }
  .aa-container .aa-row-expanded { padding: 12px; }
  .aa-container .aa-mitre-grid { grid-template-columns: 1fr; }
  .aa-container .aa-profile-stat { flex: 1 1 calc(50% - 8px); }
  .aa-container .aa-profile-stat-val { font-size: 20px; }
  .aa-container .aa-profile-tab { padding: 6px 10px; }
  .aa-container .aa-threat-id { min-width: 84px; }
  .aa-container .aa-det-code-block { font-size: 10px; }
}

/* ---- page-intel-graph.js  [ig-] ---- */
/* ============================================================================
   SIGNAL POLISH · intel_graph (ig-)  — scoped under .ig-page to out-specify the
   page's own inline <style id="igStyleTag"> (injected into <head> after this
   file). Single-class inline rules (.ig-card) lose to .ig-page .ig-card.
   PURE DESIGN — no JS hooks, ids, data-* or behaviour touched.
   ============================================================================ */

/* ---- Page shell ---- */
.ig-page { background:var(--bg); font-family:var(--font-sans); }
[data-theme="light"] .ig-page { background:var(--bg); }

/* ---- Header: Bricolage title + mono eyebrow ---- */
.ig-page .ig-header { padding:18px 24px 6px; }
.ig-page .ig-header-title {
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:0.14em; text-transform:lowercase; color:var(--violet-ink);
}
.ig-page .ig-header-sub { font-family:var(--font-sans); font-size:11.5px; color:var(--ink-3); margin-top:5px; }
[data-theme="light"] .ig-page .ig-header-title { color:var(--violet); }
[data-theme="light"] .ig-page .ig-header-sub { color:var(--ink-3); }

/* ---- Toolbar ---- */
.ig-page .ig-toolbar { padding:6px 24px 10px; gap:8px; }
.ig-page .ig-search {
  background:var(--bg-1); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--font-mono); font-size:11px; border-radius:var(--rad-sm);
  padding:6px 12px; transition:border-color .15s, box-shadow .15s;
}
.ig-page .ig-search::placeholder { color:var(--ink-4); }
.ig-page .ig-search:focus { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); }
.ig-page .ig-btn {
  background:var(--bg-1); border:1px solid var(--line-2); color:var(--ink-2);
  font-family:var(--font-mono); font-size:11px; border-radius:var(--rad-sm);
  padding:5px 11px; transition:all .15s;
}
.ig-page .ig-btn:hover { border-color:var(--violet); color:var(--ink); background:var(--bg-2); }
.ig-page .ig-sep { background:var(--line-2); }
.ig-page .ig-stats { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); }
[data-theme="light"] .ig-page .ig-search { background:var(--bg-1); border-color:var(--line-2); color:var(--ink); }
[data-theme="light"] .ig-page .ig-btn { background:var(--bg-1); border-color:var(--line-2); color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-btn:hover { border-color:var(--violet); color:var(--ink); background:var(--bg-2); }

/* MITRE toggle → violet active */
.ig-page .ig-toggle {
  background:var(--bg-1); border:1px solid var(--line-2); color:var(--ink-2);
  font-family:var(--font-mono); font-size:11px; border-radius:var(--rad-sm); transition:all .15s;
}
.ig-page .ig-toggle:hover { border-color:var(--line-3); }
.ig-page .ig-toggle.ig-toggle-on { border-color:var(--violet); color:var(--violet-ink); background:var(--violet-tint); }
[data-theme="light"] .ig-page .ig-toggle { background:var(--bg-1); border-color:var(--line-2); color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-toggle.ig-toggle-on { border-color:var(--violet); color:var(--violet); background:var(--violet-tint); }

/* ---- Breadcrumb ---- */
.ig-page .ig-breadcrumb { padding:0 24px 8px; }
.ig-page .ig-bc-item { font-family:var(--font-mono); font-size:10px; border-radius:var(--rad-sm); }
.ig-page .ig-bc-item:hover { background:var(--bg-2); }
.ig-page .ig-bc-item.ig-bc-active { background:var(--violet-tint); color:var(--violet-ink) !important; }
.ig-page .ig-bc-sep { color:var(--line-3); }
[data-theme="light"] .ig-page .ig-bc-item:hover { background:var(--bg-2); }
[data-theme="light"] .ig-page .ig-bc-item.ig-bc-active { background:var(--violet-tint); color:var(--violet) !important; }

/* ---- Tree viewport + scrollbars ---- */
.ig-page .ig-tree-vp { scrollbar-color:var(--line-2) transparent; }
.ig-page .ig-tree-vp::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; }
.ig-page .ig-tree-vp::-webkit-scrollbar-thumb:hover { background:var(--line-3); }

/* ---- Sticky column 0 background matches shell ---- */
.ig-page .ig-col-0 { background:var(--bg); }
[data-theme="light"] .ig-page .ig-col-0 { background:var(--bg); }

/* ---- Cards ---- */
.ig-page .ig-card {
  background:var(--bg-1); border:1px solid var(--line);
  border-radius:var(--rad); transition:border-color .18s, transform .18s, box-shadow .18s;
}
.ig-page .ig-card:hover { border-color:var(--violet); transform:translateY(-2px); box-shadow:var(--shadow); }
.ig-page .ig-card.ig-active { border-color:var(--violet); border-left:3px solid var(--violet); box-shadow:var(--shadow-violet); }
.ig-page .ig-card.ig-active:hover { transform:none; }
[data-theme="light"] .ig-page .ig-card { background:var(--bg-1); border-color:var(--line); }
[data-theme="light"] .ig-page .ig-card:hover { border-color:var(--violet); box-shadow:var(--shadow); }
[data-theme="light"] .ig-page .ig-card.ig-active { border-color:var(--violet); box-shadow:var(--shadow-violet); }

.ig-page .ig-card-id { font-family:var(--font-mono); color:var(--ink-2); }
.ig-page .ig-card-sev { font-family:var(--font-mono); border-radius:var(--rad-sm); }
.ig-page .ig-card-title { font-family:var(--font-sans); color:var(--ink); }
[data-theme="light"] .ig-page .ig-card-id { color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-card-title { color:var(--ink); }

/* Meta + badges + data rows */
.ig-page .ig-badge { font-family:var(--font-mono); background:var(--bg-3); color:var(--ink-2); border-radius:var(--rad-sm); }
[data-theme="light"] .ig-page .ig-badge { background:var(--bg-3); color:var(--ink-2); }
.ig-page .ig-row { font-family:var(--font-mono); color:var(--ink-4); }
.ig-page .ig-row-l { color:var(--ink-4); }
.ig-page .ig-row-v { color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-row-l { color:var(--ink-4); }
[data-theme="light"] .ig-page .ig-row-v { color:var(--ink-2); }

/* CVSS bar */
.ig-page .ig-cvss-lbl, .ig-page .ig-cvss-val { font-family:var(--font-mono); }
.ig-page .ig-cvss-lbl { color:var(--ink-4); }
.ig-page .ig-cvss-val { color:var(--ink-2); }
.ig-page .ig-cvss-bar { background:var(--bg-3); border-radius:99px; }
.ig-page .ig-cvss-fill { border-radius:99px; }
[data-theme="light"] .ig-page .ig-cvss-bar { background:var(--bg-3); }

/* Description block */
.ig-page .ig-desc { background:var(--bg-inset); border-left:2px solid var(--violet-tint-2); color:var(--ink-3); border-radius:0 var(--rad-sm) var(--rad-sm) 0; }
[data-theme="light"] .ig-page .ig-desc { background:var(--bg-inset); border-left-color:var(--violet-tint-2); color:var(--ink-3); }

/* Stats grid */
.ig-page .ig-stats-grid { border-top:1px solid var(--line); }
.ig-page .ig-stat-v { font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.ig-page .ig-stat-l { font-family:var(--font-mono); color:var(--ink-4); }
[data-theme="light"] .ig-page .ig-stats-grid { border-top-color:var(--line); }
[data-theme="light"] .ig-page .ig-stat-v { color:var(--ink); }

/* Expand arrow → violet on hover */
.ig-page .ig-arrow { font-family:var(--font-mono); color:var(--ink-4); }
.ig-page .ig-card:hover .ig-arrow { color:var(--violet-ink); }
[data-theme="light"] .ig-page .ig-card:hover .ig-arrow { color:var(--violet); }

/* Show-more pill */
.ig-page .ig-more { font-family:var(--font-mono); color:var(--violet-ink); border:1px dashed var(--line-2); border-radius:var(--rad-sm); transition:all .15s; }
.ig-page .ig-more:hover { background:var(--violet-tint); border-color:var(--violet); }
[data-theme="light"] .ig-page .ig-more { color:var(--violet); border-color:var(--line-2); }
[data-theme="light"] .ig-page .ig-more:hover { background:var(--violet-tint); border-color:var(--violet); }

/* Tags */
.ig-page .ig-tag { font-family:var(--font-mono); border:1px solid var(--line-2); color:var(--ink-2); border-radius:var(--rad-sm); transition:all .15s; }
.ig-page .ig-tag:hover { border-color:var(--violet); color:var(--violet-ink); background:var(--violet-tint); }
[data-theme="light"] .ig-page .ig-tag { border-color:var(--line-2); color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-tag:hover { border-color:var(--violet); color:var(--violet); background:var(--violet-tint); }

/* Detection type chip + query block */
.ig-page .ig-det-type { font-family:var(--font-mono); border-radius:var(--rad-sm); }
.ig-page .ig-det-query { font-family:var(--font-mono); background:var(--bg-inset); border-left:2px solid var(--line-2); color:var(--ink-2); border-radius:0 var(--rad-sm) var(--rad-sm) 0; }
[data-theme="light"] .ig-page .ig-det-query { background:var(--bg-inset); border-left-color:var(--line-2); color:var(--ink-2); }

/* Text expand / show-more inline */
.ig-page .ig-show-more { font-family:var(--font-mono); color:var(--violet-ink); }
[data-theme="light"] .ig-page .ig-show-more { color:var(--violet); }

/* Correlation badge → violet */
.ig-page .ig-corr { font-family:var(--font-mono); background:var(--violet-tint); color:var(--violet-ink); border-radius:var(--rad-sm); }
[data-theme="light"] .ig-page .ig-corr { background:var(--violet-tint); color:var(--violet); }

/* Reference link → violet */
.ig-page .ig-ref-link { font-family:var(--font-mono); color:var(--violet-ink); }
[data-theme="light"] .ig-page .ig-ref-link { color:var(--violet); }

/* Timeline date + summary text */
.ig-page .ig-tl-date { font-family:var(--font-mono); color:var(--ink-4); }
.ig-page .ig-sum-text { font-family:var(--font-sans); color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-sum-text { color:var(--ink-2); }

/* Section eyebrow */
.ig-page .ig-sec { font-family:var(--font-mono); color:var(--ink-3); letter-spacing:0.12em; }
.ig-page .ig-sec-count { color:var(--ink-4); }
[data-theme="light"] .ig-page .ig-sec { color:var(--ink-3); }
[data-theme="light"] .ig-page .ig-sec-count { color:var(--ink-4); }

/* ---- Detail panel (expanded node) ---- */
.ig-page .ig-detail { background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--rad); box-shadow:var(--shadow-sm); }
.ig-page .ig-detail-label { font-family:var(--font-mono); color:var(--ink-3); letter-spacing:0.1em; }
.ig-page .ig-detail-title { font-family:var(--font-sans); color:var(--ink); }
.ig-page .ig-detail-body { font-family:var(--font-sans); color:var(--ink-2); }
.ig-page .ig-detail-query { font-family:var(--font-mono); background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--rad-sm); }
.ig-page .ig-detail-query::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; }
.ig-page .ig-detail-link { font-family:var(--font-mono); color:var(--violet-ink); background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--rad-sm); transition:all .15s; }
.ig-page .ig-detail-link:hover { border-color:var(--violet); background:var(--violet-tint); }
.ig-page .ig-detail-sep { background:var(--line); }
.ig-page .ig-detail-row { font-family:var(--font-mono); }
.ig-page .ig-detail-row-l { color:var(--ink-4); }
.ig-page .ig-detail-row-v { color:var(--ink-2); }
.ig-page .ig-detail-chip { font-family:var(--font-mono); border:1px solid var(--line-2); color:var(--ink-2); border-radius:var(--rad-sm); }
.ig-page .ig-detail-mitre { font-family:var(--font-mono); color:var(--violet-ink); background:var(--violet-tint); border:1px solid var(--violet-tint-2); border-radius:var(--rad-sm); }
.ig-page .ig-detail-source { font-family:var(--font-mono); color:var(--ink-4); }
.ig-page .ig-detail-badge { font-family:var(--font-mono); border-radius:var(--rad-sm); }
[data-theme="light"] .ig-page .ig-detail { background:var(--bg-1); border-color:var(--line-2); }
[data-theme="light"] .ig-page .ig-detail-title { color:var(--ink); }
[data-theme="light"] .ig-page .ig-detail-body { color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-detail-query { background:var(--bg-inset); border-color:var(--line); }
[data-theme="light"] .ig-page .ig-detail-link { color:var(--violet); background:var(--bg-inset); border-color:var(--line); }
[data-theme="light"] .ig-page .ig-detail-sep { background:var(--line); }
[data-theme="light"] .ig-page .ig-detail-row-v { color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-detail-chip { border-color:var(--line-2); color:var(--ink-2); }
[data-theme="light"] .ig-page .ig-detail-mitre { color:var(--violet); background:var(--violet-tint); border-color:var(--violet-tint-2); }

/* ---- Column-0 search input ---- */
.ig-page .ig-col-search { background:var(--bg-1); border:1px solid var(--line-2); color:var(--ink); font-family:var(--font-mono); border-radius:var(--rad-sm); transition:border-color .15s, box-shadow .15s; }
.ig-page .ig-col-search::placeholder { color:var(--ink-4); }
.ig-page .ig-col-search:focus { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); }
[data-theme="light"] .ig-page .ig-col-search { background:var(--bg-1); border-color:var(--line-2); color:var(--ink); }

/* ---- Dragging glow → violet ---- */
.ig-page .ig-card.ig-dragging { box-shadow:var(--shadow-violet); }
[data-theme="light"] .ig-page .ig-card.ig-dragging { box-shadow:var(--shadow-lg); }

/* ---- Legend ---- */
.ig-page .ig-legend { border-top:1px solid var(--line); padding:8px 24px; }
.ig-page .ig-legend-item { font-family:var(--font-mono); color:var(--ink-4); }
[data-theme="light"] .ig-page .ig-legend { border-top-color:var(--line); }
[data-theme="light"] .ig-page .ig-legend-item { color:var(--ink-4); }

/* ---- Loading + hint ---- */
.ig-page .ig-loading { background:var(--bg); }
.ig-page .ig-loading-text { font-family:var(--font-mono); color:var(--ink-3); }
.ig-page .ig-hint { font-family:var(--font-mono); color:var(--ink-4); }
[data-theme="light"] .ig-page .ig-loading { background:var(--bg); }
[data-theme="light"] .ig-page .ig-hint { color:var(--ink-4); }

/* ============================================================================
   MOBILE — no horizontal overflow on the page chrome; the tree itself stays
   intentionally horizontally scrollable (core LTR-expansion UX).
   ============================================================================ */
@media (max-width:1000px){
  .ig-page .ig-header { padding:14px 16px 4px; }
  .ig-page .ig-toolbar { padding:5px 16px 8px; }
  .ig-page .ig-breadcrumb { padding:0 16px 6px; }
  .ig-page .ig-legend { padding:7px 16px; }
  .ig-page .ig-col-0 { width:320px; }
  .ig-page .ig-col-child { width:280px; margin-left:80px; }
}
@media (max-width:768px){
  .ig-page { height:calc(100vh - 56px); height:calc(100dvh - 56px); max-width:100vw; overflow-x:hidden; }
  .ig-page .ig-header { padding:12px 12px 2px; }
  .ig-page .ig-header-title { font-size:11px; }
  .ig-page .ig-header-sub { font-size:10.5px; }
  .ig-page .ig-toolbar { padding:4px 12px 7px; gap:6px; }
  .ig-page .ig-search { width:170px; font-size:10.5px; }
  .ig-page .ig-btn, .ig-page .ig-toggle { font-size:10.5px; padding:5px 9px; }
  .ig-page .ig-stats { font-size:9px; }
  .ig-page .ig-breadcrumb { padding:0 12px 5px; }
  .ig-page .ig-legend { padding:6px 12px; gap:11px; }
  .ig-page .ig-col-0 { width:280px; padding-right:8px; }
  .ig-page .ig-col-child { width:248px; margin-left:60px; }
  .ig-page .ig-card { padding:12px 13px; }
  .ig-page .ig-card-title { font-size:12.5px; }
  .ig-page .ig-card, .ig-page .ig-tag { user-select:auto; }
}
@media (max-width:480px){
  .ig-page .ig-header { padding:10px 10px 2px; }
  .ig-page .ig-toolbar { padding:4px 10px 6px; }
  .ig-page .ig-search { width:140px; }
  .ig-page .ig-breadcrumb { padding:0 10px 4px; }
  .ig-page .ig-legend { padding:6px 10px; }
  /* unstick column 0 so it cannot overlap on narrow phones */
  .ig-page .ig-col-0 { width:256px; position:relative; left:auto; z-index:1; padding-right:0; }
  .ig-page .ig-col-child { width:228px; margin-left:42px; }
  .ig-page .ig-tree { padding:8px 10px 32px; }
  .ig-page .ig-card { padding:11px 12px; }
  .ig-page .ig-detail { padding:13px 14px; }
  .ig-page .ig-stat-v { font-size:13px; }
}

/* ---- page-blast-radius.js  [br-] ---- */
/* ============================================================
   SIGNAL POLISH + MOBILE — IOC BLAST RADIUS (br-* prefix)
   Scoped to .br-page / body .br-* ; higher specificity than the
   page's injected <style id="br-css"> so Signal tokens win.
   All colors via tokens (resolve per dark/light). No JS-hook changes.
   ============================================================ */

/* ---- Page shell ---- */
body .br-page{
  max-width:1100px;margin:0 auto;padding:32px 24px;
  font-family:var(--font-mono);
}

/* ---- Header: Bricolage title + mono eyebrow + prose sub ---- */
body .br-page .br-header{margin-bottom:26px}
body .br-page .br-title{
  font-family:var(--font-mono);
  font-size:13px;font-weight:600;letter-spacing:0.04em;
  color:var(--ink-3);text-transform:uppercase;
}
body .br-page .br-sub{
  font-family:var(--font-sans);
  font-size:13.5px;line-height:1.55;color:var(--ink-2);
  margin-top:8px;max-width:74ch;
}

/* ---- Search bar ---- */
body .br-page .br-search{display:flex;gap:8px;margin-bottom:0;align-items:center;flex-wrap:wrap}
body .br-page .br-input{
  flex:1;min-width:260px;font-family:var(--font-mono);font-size:13px;
  background:var(--bg-inset);border:1px solid var(--line);color:var(--ink);
  padding:11px 14px;border-radius:var(--rad);transition:border-color .14s,box-shadow .14s;
}
body .br-page .br-input::placeholder{color:var(--ink-4)}
body .br-page .br-input:focus{
  outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px var(--violet-tint);
}
body .br-page .br-depth{
  font-family:var(--font-mono);font-size:12px;
  background:var(--bg-inset);border:1px solid var(--line);color:var(--ink);
  padding:11px 10px;border-radius:var(--rad);cursor:pointer;transition:border-color .14s;
}
body .br-page .br-depth:hover{border-color:var(--line-3)}
body .br-page .br-depth:focus{outline:none;border-color:var(--violet)}
body .br-page .br-btn{
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.02em;
  background:var(--violet-deep);color:#fff;border:1px solid var(--violet-deep);
  padding:11px 20px;cursor:pointer;white-space:nowrap;border-radius:var(--rad);
  transition:background .14s,box-shadow .14s,transform .14s;
}
body .br-page .br-btn:hover{background:var(--violet);box-shadow:var(--shadow-violet);transform:translateY(-1px)}
body .br-page .br-btn:active{transform:translateY(0)}
body .br-page .br-btn:disabled{opacity:0.5;cursor:default;background:var(--bg-3);border-color:var(--line);color:var(--ink-3);box-shadow:none;transform:none}

/* ---- Tabs: violet active underline ---- */
body .br-page .br-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line);
  margin-bottom:22px;margin-top:18px;flex-shrink:0;
}
body .br-page .br-tab{
  padding:10px 18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.03em;
  color:var(--ink-3);cursor:pointer;border:none;background:none;
  border-bottom:2px solid transparent;transition:color .14s,border-color .14s;
}
body .br-page .br-tab:hover{color:var(--ink)}
body .br-page .br-tab.br-active{color:var(--violet-ink);border-bottom-color:var(--violet)}

/* ---- Stats strip: panel cards + Bricolage numerals ---- */
body .br-page .br-stats{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
body .br-page .br-stat{
  background:var(--bg-1);border:1px solid var(--line);
  padding:14px 16px;flex:1;min-width:108px;text-align:center;
  border-radius:var(--rad);transition:border-color .14s,transform .14s;
}
body .br-page .br-stat:hover{border-color:var(--line-3);transform:translateY(-2px)}
body .br-page .br-stat-val{
  font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em;
  font-size:26px;line-height:1;color:var(--ink);
}
body .br-page .br-stat-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.06em;
  color:var(--ink-3);text-transform:uppercase;margin-top:6px;
}

/* ---- Empty / status states ---- */
body .br-page .br-empty{
  text-align:center;padding:64px 20px;color:var(--ink-3);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.02em;
}

/* ---- Ring cards (the blast rings) ---- */
body .br-page .br-ring{
  margin-bottom:16px;border:1px solid var(--line);background:var(--bg-1);
  border-radius:var(--rad);overflow:hidden;transition:border-color .14s;
}
body .br-page .br-ring:hover{border-color:var(--line-3)}
body .br-page .br-ring-header{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .13s;
}
body .br-page .br-ring-header:hover{background:var(--bg-2)}
body .br-page .br-ring-num{
  width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff;
  border-radius:50%;
}
/* token-mapped ring palette: origin→violet, threats→rose, ttp→sky, actors→amber, related→violet-bright */
body .br-page .br-ring-0 .br-ring-num{background:var(--violet)}
body .br-page .br-ring-1 .br-ring-num{background:var(--rose)}
body .br-page .br-ring-2 .br-ring-num{background:var(--sky)}
body .br-page .br-ring-3 .br-ring-num{background:var(--amber)}
body .br-page .br-ring-4 .br-ring-num{background:var(--violet-bright)}
body .br-page .br-ring-label{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink)}
body .br-page .br-ring-count{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-left:auto}
body .br-page .br-ring-body{padding:16px;display:grid;gap:8px}
body .br-page .br-ring-body.br-collapsed{display:none}

/* ---- Node rows ---- */
body .br-page .br-node{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--bg-2);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px;cursor:pointer;
  border-radius:var(--rad-sm);transition:border-color .14s,background .14s;
}
body .br-page .br-node:hover{border-color:var(--violet);background:var(--violet-tint)}
body .br-page .br-node-id{color:var(--violet-ink);font-weight:600;white-space:nowrap}
body .br-page .br-node-title{
  font-family:var(--font-sans);color:var(--ink-2);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- Severity badges via sev tokens ---- */
body .br-page .br-badge{
  font-family:var(--font-mono);font-size:9.5px;padding:2px 7px;font-weight:600;
  letter-spacing:0.04em;text-transform:uppercase;border-radius:99px;
}
body .br-page .br-badge-critical{background:var(--sev-critical-tint,var(--violet-tint));color:var(--sev-critical)}
body .br-page .br-badge-high{background:var(--sev-high-tint,var(--violet-tint));color:var(--sev-high)}
body .br-page .br-badge-medium{background:var(--sev-medium-tint,var(--violet-tint));color:var(--sev-medium)}
body .br-page .br-badge-low{background:var(--sev-low-tint,var(--violet-tint));color:var(--sev-low)}

/* ---- Technique pills / actor chips / sibling chips ---- */
body .br-page .br-pill{
  display:inline-block;font-family:var(--font-mono);font-size:10px;padding:3px 9px;
  background:var(--violet-tint);color:var(--sky);
  border:1px solid var(--line-2);margin:2px;border-radius:99px;
}
body .br-page .br-actor{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  background:var(--bg-2);border:1px solid var(--line-2);
  color:var(--amber);font-family:var(--font-mono);font-size:11px;margin:2px;border-radius:99px;
}
body .br-page .br-sibling{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-2);padding:4px 9px;
  background:var(--bg-2);border:1px solid var(--line);
  display:inline-block;margin:2px;border-radius:var(--rad-sm);
}

/* ---- Fidelity-scored edges ---- */
body .br-page .br-edges{margin-top:22px}
body .br-page .br-edges-title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;
  color:var(--ink-3);text-transform:lowercase;margin-bottom:10px;
}
body .br-page .br-edge-row{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  font-family:var(--font-mono);font-size:11px;border-bottom:1px solid var(--line);
}
body .br-page .br-edge-row:last-child{border-bottom:none}
body .br-page .br-edge-score{width:40px;text-align:right;font-weight:700;color:var(--mint)}
body .br-page .br-edge-from,
body .br-page .br-edge-to{color:var(--ink-2)}
body .br-page .br-edge-type{color:var(--ink-4);margin-left:auto}

/* ---- Canvas tab: viewport + controls (Signal chrome) ---- */
body .br-page .br-tree-ctrl{
  font-family:var(--font-mono);font-size:11px;
  background:var(--bg-1);border:1px solid var(--line);color:var(--ink-2);
  padding:5px 13px;cursor:pointer;margin-right:6px;border-radius:var(--rad-sm);
  transition:border-color .14s,color .14s,background .14s;
}
body .br-page .br-tree-ctrl:hover{border-color:var(--violet);color:var(--ink);background:var(--violet-tint)}
/* viewport background + frame retokenized (JS sets inline style; raise specificity) */
body .br-page div#brTreeViewport{
  background:var(--bg-inset)!important;border:1px solid var(--line)!important;
  border-radius:var(--rad);
}
/* SVG node chrome via presentation-attr override (fill only; stroke left to JS hover) */
body .br-page #brTreeSvg .br-tree-node rect{fill:var(--bg-2)}
body .br-page #brTreeSvg .br-tree-node text{fill:var(--ink-2)}

/* ---- MOBILE: 1000px (trim canvas height) ---- */
@media (max-width:1000px){
  body .br-page div#brTreeViewport{max-height:480px!important}
}

/* ---- MOBILE: 768px (stack, full-width controls, no overflow) ---- */
@media (max-width:768px){
  body .br-page{padding:20px 14px}
  body .br-page .br-title{font-size:12px}
  body .br-page .br-sub{font-size:12.5px}
  body .br-page .br-search{flex-direction:column;align-items:stretch}
  body .br-page .br-input{min-width:0;width:100%}
  body .br-page .br-depth{width:100%}
  body .br-page .br-btn{width:100%;text-align:center}
  body .br-page .br-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
  body .br-page .br-tab{white-space:nowrap}
  body .br-page .br-stats{gap:8px}
  body .br-page .br-stat{min-width:calc(50% - 4px);padding:12px 8px}
  body .br-page .br-stat-val{font-size:21px}
  body .br-page .br-ring-header{flex-wrap:wrap;gap:8px;padding:12px}
  body .br-page .br-ring-count{margin-left:auto}
  body .br-page .br-node{flex-wrap:wrap}
  body .br-page .br-node-title{min-width:0;width:100%;order:3}
  body .br-page .br-edge-row{flex-wrap:wrap;gap:4px}
  body .br-page .br-edge-type{margin-left:0}
  body .br-page div#brTreeViewport{max-height:420px!important}
}

/* ---- MOBILE: 480px (single col, tighter) ---- */
@media (max-width:480px){
  body .br-page .br-stats{flex-direction:column}
  body .br-page .br-stat{min-width:100%}
  body .br-page .br-stat-val{font-size:19px}
  body .br-page .br-ring-num{width:24px;height:24px;font-size:10px}
  body .br-page .br-ring-label{font-size:12px}
  body .br-page .br-tree-ctrl{margin-bottom:4px}
}

/* ---- page-related-threats.js  [rt-] ---- */
/* ============================================================
   SIGNAL POLISH — Related Threats (rt-*)  [scoped to .rt-page]
   Appended after styles.css. Selectors prefixed with .rt-page
   (or page-specific ids) to out-specify the page's own rtCss
   block, which injects into <head> after this file.
   No JS hooks, ids, data-* or class names are altered.
   ============================================================ */

/* --- Page shell: editorial container, sans body / mono data --- */
.rt-page { font-family: var(--font-sans); color: var(--ink); padding: 30px 24px; }

/* --- Header: mono eyebrow label, sans subtitle --- */
.rt-page .rt-header { margin-bottom: 22px; }
.rt-page .rt-title {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violet-ink);
}
.rt-page .rt-sub {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  margin-top: 8px; max-width: 78ch;
}

/* --- Tabs: violet active underline, Signal spacing --- */
.rt-page .rt-tabs {
  display: flex; gap: 2px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.rt-page .rt-tab {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  padding: 11px 18px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3); cursor: pointer; transition: color .15s, border-color .15s;
}
.rt-page .rt-tab:hover { color: var(--ink); }
.rt-page .rt-tab.rt-active {
  color: var(--violet-ink);
  border-bottom-color: var(--violet);
}

/* --- Layout: master/detail using reverse flex (detail first in DOM) --- */
.rt-page .rt-panels { gap: 24px; min-height: calc(100vh - 220px); }
.rt-page .rt-main { flex: 1; min-width: 0; }

/* --- Picker rail: bordered card list, violet active, rounded --- */
.rt-page .rt-picker {
  width: 272px; flex-shrink: 0;
  background: var(--bg-1);
  border: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden auto;
  max-height: calc(100vh - 220px);
  position: sticky; top: 64px; align-self: flex-start;
}
.rt-page .rt-picker-header {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 13px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.rt-page .rt-picker-search {
  width: 100%; box-sizing: border-box;
  background: var(--bg-inset); border: none; border-bottom: 1px solid var(--line);
  color: var(--ink); font-family: var(--font-mono); font-size: 11px;
  padding: 9px 14px; outline: none;
}
.rt-page .rt-picker-search:focus { background: var(--bg-2); border-bottom-color: var(--violet); }
.rt-page .rt-picker-search::placeholder { color: var(--ink-4); }
.rt-page .rt-picker-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .13s, border-color .13s;
  border-left: 2px solid transparent;
}
.rt-page .rt-picker-card:hover { background: var(--bg-2); }
.rt-page .rt-picker-card.rt-picker-active {
  background: var(--violet-tint);
  border-left-color: var(--violet);
}
.rt-page .rt-picker-id {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; color: var(--violet-ink); letter-spacing: 0.02em;
}
.rt-page .rt-picker-title {
  font-family: var(--font-sans);
  font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-page .rt-picker-conn {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--violet-ink); font-weight: 500; margin-left: 4px;
}

/* --- Search row + input + bracket button (Signal violet) --- */
.rt-page .rt-search { gap: 8px; margin-bottom: 20px; }
.rt-page .rt-input {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--rad-sm);
  color: var(--ink); padding: 11px 14px;
  transition: border-color .15s, background .15s;
}
.rt-page .rt-input:focus { outline: none; border-color: var(--violet); background: var(--bg-1); }
.rt-page .rt-input::placeholder { color: var(--ink-4); }
.rt-page .rt-btn {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--violet-deep); color: #fff; border: 1px solid var(--violet-deep);
  border-radius: var(--rad-sm);
  padding: 11px 18px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.rt-page .rt-btn:hover { background: var(--violet); border-color: var(--violet); opacity: 1; }
.rt-page .rt-btn:disabled { opacity: 0.45; cursor: default; }

/* --- Empty / loading states --- */
.rt-page .rt-empty {
  text-align: center; padding: 48px 20px;
  color: var(--ink-3); font-family: var(--font-mono); font-size: 12.5px;
}

/* --- Similarity result cards --- */
.rt-page .rt-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 15px 16px; margin-bottom: 10px;
  cursor: pointer; transition: border-color .13s, transform .13s, box-shadow .13s, background .13s;
}
.rt-page .rt-card:hover {
  border-color: var(--violet);
  background: var(--bg-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.rt-page .rt-card-top { gap: 10px; margin-bottom: 9px; }
.rt-page .rt-card-id {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--violet-ink); letter-spacing: 0.02em;
}
.rt-page .rt-card-title {
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-page .rt-card-score {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--mint);
}
.rt-page .rt-card-bar-track {
  height: 4px; background: var(--line); border-radius: 99px;
  margin-bottom: 9px; overflow: hidden;
}
.rt-page .rt-card-bar-fill { height: 4px; background: var(--mint); border-radius: 99px; }

/* --- Pills & badges (token-driven) --- */
.rt-page .rt-pill {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 7px; border-radius: var(--rad-sm);
  background: var(--sky-tint, rgba(125,211,252,0.12));
  color: var(--sky); border: 1px solid transparent;
}
.rt-page .rt-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--rad-sm);
}
.rt-page .rt-badge-cat { background: var(--violet-tint); color: var(--violet-ink); }
.rt-page .rt-badge-actor { background: var(--sev-high-tint); color: var(--sev-high); }
.rt-page .rt-badge-critical { background: var(--sev-critical-tint); color: var(--sev-critical); }
.rt-page .rt-badge-high { background: var(--sev-high-tint); color: var(--sev-high); }
.rt-page .rt-badge-medium { background: var(--sev-medium-tint); color: var(--sev-medium); }
.rt-page .rt-badge-low { background: var(--sev-low-tint); color: var(--sev-low); }

/* --- Autocomplete suggest dropdown --- */
.rt-page .rt-suggest {
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--rad); box-shadow: var(--shadow);
  max-height: 220px; overflow-y: auto;
}
.rt-page .rt-suggest-item {
  padding: 9px 13px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2); border-bottom: 1px solid var(--line); cursor: pointer;
}
.rt-page .rt-suggest-item:last-child { border-bottom: none; }
.rt-page .rt-suggest-item:hover { background: var(--violet-tint); color: var(--ink); }
.rt-page .rt-suggest-id { color: var(--violet-ink); margin-right: 8px; }

/* --- Attack-path transition table --- */
.rt-page .rt-trans-row {
  padding: 11px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
}
.rt-page .rt-trans-header {
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-size: 9.5px;
  background: var(--bg-2);
}
.rt-page .rt-trans-from,
.rt-page .rt-trans-to { color: var(--ink-2); }
.rt-page .rt-trans-prob {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--mint);
}
.rt-page .rt-trans-count { color: var(--ink-3); }
.rt-page .rt-trans-tid { color: var(--violet-ink); cursor: pointer; }
.rt-page .rt-trans-tid:hover { text-decoration: underline; color: var(--violet); }
.rt-page .rt-prob-bar {
  width: 60px; height: 6px; background: var(--line); border-radius: 99px;
  display: inline-block; vertical-align: middle; margin-left: 6px; overflow: hidden;
}
.rt-page .rt-prob-fill { height: 6px; background: var(--mint); border-radius: 99px; }

/* --- Graph viewport / controls (token theming) --- */
.rt-page .rt-graph-vp {
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--rad);
  max-height: calc(100vh - 300px); min-height: 500px;
}
.rt-page .rt-graph-ctrl { gap: 8px; margin-bottom: 12px; }
.rt-page .rt-graph-ctrl button {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-1); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--rad-sm); padding: 5px 12px; cursor: pointer;
  transition: border-color .13s, color .13s;
}
.rt-page .rt-graph-ctrl button:hover { border-color: var(--violet); color: var(--ink); }
.rt-page .rt-graph-ctrl > span { font-family: var(--font-mono); color: var(--ink-3); }

/* --- Graph legend / tooltip --- */
.rt-page .rt-graph-legend { top: 12px; right: 12px; }
.rt-page .rt-legend-toggle {
  font-family: var(--font-mono); font-size: 10px;
  padding: 5px 11px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--rad-sm); color: var(--ink-2); cursor: pointer;
}
.rt-page .rt-legend-toggle:hover { border-color: var(--violet); color: var(--ink); }
.rt-page .rt-legend-body {
  background: var(--bg-1); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--rad-sm) var(--rad-sm);
  padding: 9px 11px;
}
.rt-page .rt-legend-item { color: var(--ink-2); font-family: var(--font-mono); }
.rt-graph-tooltip {
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--rad-sm); box-shadow: var(--shadow);
  color: var(--ink); font-family: var(--font-mono);
}
.rt-graph-tooltip-type { color: var(--ink-3); }

/* ============================================================
   MOBILE — no horizontal overflow, stacked master/detail
   ============================================================ */
@media (max-width: 1000px) {
  .rt-page .rt-panels { flex-direction: column; gap: 16px; min-height: 0; }
  .rt-page .rt-picker {
    width: 100%; max-height: none;
    position: static; order: -1;
    border-right: 1px solid var(--line);
  }
  .rt-page .rt-main { order: 1; }
}

@media (max-width: 768px) {
  .rt-page { padding: 18px 14px; }
  .rt-page .rt-title { font-size: 11px; }
  .rt-page .rt-sub { font-size: 12.5px; }

  .rt-page .rt-tabs { overflow-x: auto; flex-shrink: 0; -webkit-overflow-scrolling: touch; }
  .rt-page .rt-tabs::-webkit-scrollbar { height: 0; }
  .rt-page .rt-tab { padding: 9px 14px; font-size: 11px; white-space: nowrap; }

  .rt-page .rt-search { flex-direction: column; }
  .rt-page .rt-search .rt-search-wrap { width: 100%; min-width: 0; }
  .rt-page .rt-input { width: 100%; min-width: 0; box-sizing: border-box; }
  .rt-page .rt-btn { width: 100%; text-align: center; }

  .rt-page .rt-card-top { flex-wrap: wrap; }
  .rt-page .rt-card-title { width: 100%; order: 3; white-space: normal; }
  .rt-page .rt-card-meta { gap: 5px; }

  /* Transition table -> stacked cells, no overflow */
  .rt-page .rt-trans-row {
    grid-template-columns: 1fr auto 1fr;
    gap: 6px 8px;
    padding: 12px;
  }
  .rt-page .rt-trans-header { display: none; }
  .rt-page .rt-trans-prob,
  .rt-page .rt-trans-count,
  .rt-page .rt-trans-threats { grid-column: 1 / -1; }
  .rt-page .rt-trans-threats { flex-wrap: wrap; }
  .rt-page .rt-prob-bar { width: 90px; }

  .rt-page .rt-suggest { max-height: 170px; }
  .rt-page .rt-graph-vp { min-height: 380px; max-height: 70vh; }
  .rt-page .rt-graph-ctrl { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .rt-page .rt-card { padding: 13px; }
  .rt-page .rt-card-id { font-size: 11px; }
  .rt-page .rt-card-score { font-size: 14px; }
  .rt-page .rt-pill { font-size: 9px; padding: 1px 5px; }
  .rt-page .rt-badge { font-size: 9px; padding: 1px 5px; }
  .rt-page .rt-tab { padding: 8px 11px; font-size: 10px; }
  .rt-page .rt-graph-vp { min-height: 320px; }
}

/* ============================================================
   LIGHT MODE — tokens already flip; structural overrides only
   for base rules that referenced hardcoded grays.
   ============================================================ */
[data-theme="light"] .rt-page .rt-graph-vp { background: var(--bg-inset); border-color: var(--line); }
[data-theme="light"] .rt-graph-tooltip { background: var(--bg-1); border-color: var(--line-2); color: var(--ink); }
[data-theme="light"] .rt-page .rt-legend-toggle,
[data-theme="light"] .rt-page .rt-legend-body { background: var(--bg-1); border-color: var(--line); color: var(--ink-2); }

/* ---- page-statistics.js  [sp-] ---- */
/* ============================================================
   STATISTICS PAGE — Signal polish + mobile (scoped .sp-page)
   Appended to shared styles.css. Every selector is prefixed
   with .sp-page so it outranks the runtime-injected
   <style id="stats-page-css"> single-class rules regardless
   of source order. CSS-ONLY — no JS / markup changes.
   ============================================================ */

/* ---- PAGE CONTAINER ---- */
.sp-page {
  padding: 28px 32px 56px;
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* ---- HEADER ---- */
.sp-page .sp-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
  padding-bottom: 18px;
}
.sp-page .sp-header-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
}
.sp-page .sp-header-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 7px;
}
.sp-page .sp-header-ts,
.sp-page .sp-header-ver {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.sp-page .sp-header-ver {
  color: var(--ink-2);
  margin-top: 3px;
}

/* ---- HERO ROW ---- */
.sp-page .sp-hero-row {
  gap: 14px;
  margin-bottom: 26px;
}
.sp-page .sp-hero-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sp-page .sp-hero-card:hover {
  border-color: var(--violet);
  transform: translateY(-2px);
  box-shadow: var(--shadow-violet);
}
.sp-page .sp-hero-card::before {
  height: 2px;
  opacity: 0.55;
}
.sp-page .sp-hero-icon {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.55;
}
.sp-page .sp-hero-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 9px;
}
.sp-page .sp-hero-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- TWO-COLUMN GRID ---- */
.sp-page .sp-grid { gap: 16px; }
.sp-page .sp-col { gap: 16px; }

/* ---- CARD = SIGNAL PANEL ---- */
.sp-page .sp-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: border-color .16s ease, transform .16s ease;
}
.sp-page .sp-card:hover {
  border-color: var(--violet);
  transform: translateY(-1px);
}
.sp-page .sp-card-header {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.sp-page .sp-card-sub {
  color: var(--ink-4);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.sp-page .sp-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
}
.sp-page .sp-empty-state {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
}

/* ---- BAR ROWS (severity / category / IOC) ---- */
.sp-page .sp-bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sp-page .sp-bar-track {
  height: 18px;
  background: var(--bg-inset);
  border-radius: 99px;
}
.sp-page .sp-bar-fill {
  border-radius: 99px;
  opacity: 0.92;
}
.sp-page .sp-bar-fill:hover { opacity: 1; }
.sp-page .sp-bar-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sp-page .sp-bar-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ---- DETECTION LANGUAGES ---- */
.sp-page .sp-stack-bar {
  height: 9px;
  border-radius: 99px;
}
.sp-page .sp-stack-seg { opacity: 0.92; }
.sp-page .sp-stack-seg:hover { opacity: 1; }
.sp-page .sp-lang-bar {
  background: var(--bg-inset);
  border-radius: var(--rad-sm);
}
.sp-page .sp-lang-abbr {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.sp-page .sp-lang-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sp-page .sp-lang-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.sp-page .sp-lang-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}

/* ---- MITRE TECHNIQUES ---- */
.sp-page .sp-mitre-row {
  border-radius: var(--rad-sm);
  transition: background .14s ease;
}
.sp-page .sp-mitre-row:nth-child(odd) { background: var(--bg-inset); }
.sp-page .sp-mitre-row:hover { background: var(--bg-3); }
.sp-page .sp-mitre-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}
.sp-page .sp-mitre-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.sp-page .sp-mitre-name {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-2);
}
.sp-page .sp-mitre-tactic {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* ---- THREAT ACTORS ---- */
.sp-page .sp-actor-row {
  border-radius: var(--rad-sm);
  transition: background .14s ease;
}
.sp-page .sp-actor-row:nth-child(odd) { background: var(--bg-inset); }
.sp-page .sp-actor-row:hover { background: var(--bg-3); }
.sp-page .sp-actor-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}
.sp-page .sp-actor-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}
.sp-page .sp-actor-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.sp-page .sp-actor-sep { color: var(--line-3); }

/* ---- MONTHLY CHART ---- */
.sp-page .sp-sparkline-text {
  font-family: var(--font-mono);
  color: var(--violet-ink);
  letter-spacing: 2px;
}
.sp-page .sp-chart-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.sp-page .sp-chart-bar {
  border-radius: var(--rad-sm) var(--rad-sm) 0 0;
  opacity: 0.92;
}
.sp-page .sp-chart-bar:hover { opacity: 1; }
.sp-page .sp-chart-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-4);
}

/* ---- SEVERITY RING / DONUT ---- */
.sp-page .sp-ring { box-shadow: var(--shadow); }
.sp-page .sp-ring-inner { background: var(--bg-1); }
.sp-page .sp-ring-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.sp-page .sp-ring-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sp-page .sp-ring-leg-item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.sp-page .sp-ring-dot { border-radius: 2px; }
.sp-page .sp-ring-leg-val {
  color: var(--ink);
  font-weight: 700;
}

/* ---- TAG CLOUD ---- */
.sp-page .sp-tag {
  font-family: var(--font-mono);
  font-weight: 500;
}
.sp-page .sp-tag:hover { color: var(--violet-ink) !important; opacity: 1 !important; }
.sp-page .sp-tag-count { color: var(--ink-4); }

/* ---- FOOTER ---- */
.sp-page .sp-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sp-page .sp-footer-prompt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--violet-ink);
}
.sp-page .sp-footer-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
}

/* ============================================================
   RESPONSIVE — outranks the page's own breakpoints
   ============================================================ */
@media (max-width: 1000px) {
  .sp-page { padding: 22px 22px 44px; }
  .sp-page .sp-grid { grid-template-columns: 1fr; }
  .sp-page .sp-hero-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sp-page { padding: 16px 14px 40px; }
  .sp-page .sp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .sp-page .sp-header-right { text-align: left; }
  .sp-page .sp-header-title { font-size: 24px; }

  .sp-page .sp-hero-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sp-page .sp-hero-card { padding: 15px 16px; }
  .sp-page .sp-hero-number { font-size: 30px; }

  .sp-page .sp-card { padding: 16px; }

  /* bar rows: shrink the fixed columns so the track never overflows */
  .sp-page .sp-bar-row {
    grid-template-columns: 88px 1fr 34px 38px;
    gap: 8px;
  }

  /* detection-language blocks single column */
  .sp-page .sp-lang-grid { grid-template-columns: 1fr; gap: 10px; }

  /* MITRE table: drop the wide bar + tactic, keep rank/id/name/count */
  .sp-page .sp-mitre-row {
    grid-template-columns: 24px 76px 1fr 34px;
    gap: 8px;
  }
  .sp-page .sp-mitre-tactic,
  .sp-page .sp-mitre-track { display: none; }

  /* actor table: rank / info / count (drop the wide bar) */
  .sp-page .sp-actor-row {
    grid-template-columns: 24px 1fr 34px;
    gap: 8px;
  }
  .sp-page .sp-actor-track { display: none; }

  /* donut row stacks */
  .sp-page .sp-ring-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .sp-page .sp-ring-legend { width: 100%; }

  /* monthly chart compresses */
  .sp-page .sp-chart { height: 130px; gap: 4px; }
  .sp-page .sp-chart-label { font-size: 8px; }
  .sp-page .sp-sparkline-text { font-size: 13px; letter-spacing: 1px; word-break: break-all; }
}

@media (max-width: 480px) {
  .sp-page .sp-hero-row { grid-template-columns: 1fr; gap: 8px; }
  .sp-page .sp-hero-number { font-size: 28px; }

  /* bar rows: very tight — label + track + count only */
  .sp-page .sp-bar-row {
    grid-template-columns: 64px 1fr 30px;
    gap: 6px;
  }
  .sp-page .sp-bar-pct { display: none; }

  /* MITRE collapses to id + name + count */
  .sp-page .sp-mitre-row {
    grid-template-columns: 70px 1fr 30px;
    gap: 6px;
  }
  .sp-page .sp-mitre-rank { display: none; }

  /* actors: name block + count */
  .sp-page .sp-actor-row {
    grid-template-columns: 1fr 30px;
    gap: 6px;
  }
  .sp-page .sp-actor-rank { display: none; }

  .sp-page .sp-chart { height: 110px; gap: 3px; }
  .sp-page .sp-chart-val { display: none; }
}

/* ============================================================
   LIGHT MODE — token-based, replaces leftover greys
   ============================================================ */
[data-theme="light"] .sp-page .sp-header { border-bottom-color: var(--line); }
[data-theme="light"] .sp-page .sp-header-title { color: var(--ink); }
[data-theme="light"] .sp-page .sp-header-sub,
[data-theme="light"] .sp-page .sp-header-ts { color: var(--ink-3); }
[data-theme="light"] .sp-page .sp-header-ver { color: var(--ink-2); }

[data-theme="light"] .sp-page .sp-hero-card { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] .sp-page .sp-hero-card:hover { border-color: var(--violet); }
[data-theme="light"] .sp-page .sp-hero-label { color: var(--ink-3); }

[data-theme="light"] .sp-page .sp-card { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] .sp-page .sp-card:hover { border-color: var(--violet); }
[data-theme="light"] .sp-page .sp-card-header { color: var(--ink-3); }
[data-theme="light"] .sp-page .sp-card-sub,
[data-theme="light"] .sp-page .sp-empty { color: var(--ink-4); }
[data-theme="light"] .sp-page .sp-empty-state { color: var(--ink-3); }

[data-theme="light"] .sp-page .sp-bar-track { background: var(--bg-inset); }
[data-theme="light"] .sp-page .sp-bar-count { color: var(--ink); }
[data-theme="light"] .sp-page .sp-bar-pct { color: var(--ink-3); }

[data-theme="light"] .sp-page .sp-lang-bar { background: var(--bg-inset); }
[data-theme="light"] .sp-page .sp-lang-name { color: var(--ink-3); }
[data-theme="light"] .sp-page .sp-lang-pct { color: var(--ink-4); }

[data-theme="light"] .sp-page .sp-mitre-row:nth-child(odd) { background: var(--bg-inset); }
[data-theme="light"] .sp-page .sp-mitre-row:hover { background: var(--bg-3); }
[data-theme="light"] .sp-page .sp-mitre-rank { color: var(--ink-4); }
[data-theme="light"] .sp-page .sp-mitre-name { color: var(--ink-2); }
[data-theme="light"] .sp-page .sp-mitre-tactic { color: var(--ink-3); }

[data-theme="light"] .sp-page .sp-actor-row:nth-child(odd) { background: var(--bg-inset); }
[data-theme="light"] .sp-page .sp-actor-row:hover { background: var(--bg-3); }
[data-theme="light"] .sp-page .sp-actor-rank { color: var(--ink-4); }
[data-theme="light"] .sp-page .sp-actor-meta { color: var(--ink-3); }
[data-theme="light"] .sp-page .sp-actor-sep { color: var(--line-3); }

[data-theme="light"] .sp-page .sp-sparkline-text { color: var(--violet-ink); }
[data-theme="light"] .sp-page .sp-chart-val { color: var(--ink-3); }
[data-theme="light"] .sp-page .sp-chart-label { color: var(--ink-4); }

[data-theme="light"] .sp-page .sp-ring-inner { background: var(--bg-1); }
[data-theme="light"] .sp-page .sp-ring-total { color: var(--ink); }
[data-theme="light"] .sp-page .sp-ring-label { color: var(--ink-3); }
[data-theme="light"] .sp-page .sp-ring-leg-item { color: var(--ink-2); }
[data-theme="light"] .sp-page .sp-ring-leg-val { color: var(--ink); }

[data-theme="light"] .sp-page .sp-tag-count { color: var(--ink-4); }

[data-theme="light"] .sp-page .sp-footer { border-top-color: var(--line); }
[data-theme="light"] .sp-page .sp-footer-prompt { color: var(--violet-ink); }
[data-theme="light"] .sp-page .sp-footer-text { color: var(--ink-4); }

/* ---- page-coverage.js  [cm-] ---- */
/* =====================================================================
   SIGNAL POLISH — MITRE ATT&CK Coverage Map (page-coverage.js, cm-* prefix)
   Scoped under #mainContent so it overrides the runtime-injected
   <style id="coverageMapCss"> (ID+class specificity) and cannot leak.
   Tokens only — no hardcoded hex. Adds full mobile responsiveness.
   ===================================================================== */

/* ---- PAGE SHELL ---- */
#mainContent .cm-page { padding: 26px 28px 56px; max-width: 100%; overflow-x: hidden; }

/* ---- HEADER ---- */
#mainContent .cm-header-row { margin-bottom: 26px; gap: 24px; }
#mainContent .cm-page-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.05;
}
#mainContent .cm-page-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 6px;
    letter-spacing: 0.01em;
}

/* ---- COVERAGE ARC ---- */
#mainContent .cm-coverage-arc { width: 104px; height: 104px; }
#mainContent .cm-arc-svg circle:first-of-type { stroke: var(--line-2); }
#mainContent .cm-arc-svg #cmGradient stop:nth-child(1) { stop-color: var(--violet-bright); }
#mainContent .cm-arc-svg #cmGradient stop:nth-child(2) { stop-color: var(--mint); }
#mainContent .cm-arc-svg #cmGradient stop:nth-child(3) { stop-color: var(--sky); }
#mainContent .cm-arc-pct {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    fill: var(--ink);
    letter-spacing: -0.02em;
}
#mainContent .cm-arc-sub { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }

/* ---- STATS BAR ---- */
#mainContent .cm-stats-bar { gap: 1px; margin-bottom: 18px; background: var(--line); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
#mainContent .cm-stat {
    background: var(--bg-1);
    border: none;
    padding: 16px 20px;
    border-radius: 0;
}
#mainContent .cm-stat::before {
    height: 2px;
    background: var(--violet);
    opacity: 0.55;
}
#mainContent .cm-stat-val {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
#mainContent .cm-val-lavender { color: var(--violet-ink); }
#mainContent .cm-val-mint { color: var(--mint); }
#mainContent .cm-val-peach { color: var(--amber); }
#mainContent .cm-val-sky { color: var(--sky); }
#mainContent .cm-stat-pct { font-size: 17px; margin-left: 2px; }
#mainContent .cm-stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

/* ---- LANGUAGE BAR ---- */
#mainContent .cm-lang-bar {
    gap: 2px;
    margin-bottom: 18px;
    height: 32px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
#mainContent .cm-lang-segment {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
}
#mainContent .cm-lang-dot { border-radius: var(--rad-sm); }
#mainContent .cm-dot-spl { background: var(--spl); }
#mainContent .cm-dot-kql { background: var(--kql); }
#mainContent .cm-dot-sigma { background: var(--sigma); }
#mainContent .cm-lang-count { font-weight: 700; color: var(--ink); }
#mainContent .cm-lang-name { color: var(--ink-3); }

/* ---- SEARCH ---- */
#mainContent .cm-search-wrap {
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: var(--rad);
    padding: 0 14px;
    margin-bottom: 14px;
    height: 40px;
    transition: border-color 0.16s, box-shadow 0.16s;
}
#mainContent .cm-search-wrap:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
#mainContent .cm-search-icon { font-family: var(--font-mono); font-size: 14px; color: var(--violet-ink); }
#mainContent .cm-search-input { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
#mainContent .cm-search-input::placeholder { color: var(--ink-4); }
#mainContent .cm-search-clear { color: var(--ink-3); border-radius: var(--rad-sm); }
#mainContent .cm-search-clear:hover { color: var(--rose); }

/* ---- FILTER ROW ---- */
#mainContent .cm-filter-row { gap: 8px; margin-bottom: 18px; }
#mainContent .cm-filter-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    border: 1px solid var(--line-2);
    border-radius: var(--rad);
    padding: 5px 11px;
    transition: all 0.14s;
}
#mainContent .cm-filter-btn:hover { color: var(--ink); border-color: var(--line-3); }
#mainContent .cm-filter-btn.cm-filter-active {
    color: var(--violet-ink);
    border-color: var(--violet);
    background: var(--violet-tint);
}

/* ---- BREADCRUMB ---- */
#mainContent .cm-breadcrumb { margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; }
#mainContent .cm-bc-root, #mainContent .cm-bc-item { color: var(--ink-3); border-radius: var(--rad-sm); }
#mainContent .cm-bc-root:hover, #mainContent .cm-bc-item.cm-bc-click:hover { color: var(--violet-ink); }
#mainContent .cm-bc-item.cm-bc-active { color: var(--ink); }
#mainContent .cm-bc-sep { color: var(--ink-4); }

/* ---- SPLIT LAYOUT ---- */
#mainContent .cm-split {
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    min-height: 520px;
    overflow: hidden;
}
#mainContent .cm-panel { background: var(--bg-1); }
#mainContent .cm-panel-title {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    letter-spacing: 0.02em;
}
#mainContent .cm-panel-body { scrollbar-color: var(--line-3) transparent; }
#mainContent .cm-panel-body::-webkit-scrollbar-thumb { background: var(--line-3); }
#mainContent .cm-empty { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 24px 14px; }

/* ---- TACTIC ITEMS ---- */
#mainContent .cm-tactic-item { border-bottom: 1px solid var(--line); }
#mainContent .cm-tactic-item:hover { background: var(--bg-2); }
#mainContent .cm-tactic-item.cm-active { background: var(--bg-2); }
#mainContent .cm-tactic-item.cm-active::after { width: 2px; background: var(--violet); }
#mainContent .cm-tactic-heat { background: linear-gradient(180deg, var(--violet), var(--mint)); }
#mainContent .cm-tactic-id { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
#mainContent .cm-tactic-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 600; }
#mainContent .cm-tactic-tech-count { color: var(--violet-ink); }
#mainContent .cm-tactic-tech-count::after { color: var(--ink-3); }
#mainContent .cm-tactic-det-count { color: var(--mint); }
#mainContent .cm-tactic-det-count::after { color: var(--ink-3); }
#mainContent .cm-tactic-bar { background: var(--line-2); border-radius: var(--rad-sm); overflow: hidden; }
#mainContent .cm-tactic-bar-fill { background: linear-gradient(90deg, var(--violet), var(--mint)); }

/* ---- TECHNIQUE CARDS ---- */
#mainContent .cm-technique-card { border-bottom: 1px solid var(--line); }
#mainContent .cm-technique-card:hover { background: var(--bg-2); }
#mainContent .cm-technique-card.cm-active { background: var(--bg-2); }
#mainContent .cm-technique-card.cm-active::after { width: 2px; background: var(--violet); }
#mainContent .cm-tech-id { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
#mainContent .cm-tech-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
#mainContent .cm-tech-sub { color: var(--ink-3); font-size: 10px; }
#mainContent .cm-tech-det-badge, #mainContent .cm-tech-threat-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
}
#mainContent .cm-tech-det-badge { color: var(--mint); }
#mainContent .cm-tech-threat-badge { color: var(--violet-ink); }
#mainContent .cm-sev-pip { border-radius: var(--rad-sm); }

/* ---- SEVERITY TOKENS ---- */
#mainContent .cm-sev-critical { background: var(--sev-critical); color: var(--sev-critical); }
#mainContent .cm-sev-high { background: var(--sev-high); color: var(--sev-high); }
#mainContent .cm-sev-medium { background: var(--sev-medium); color: var(--sev-medium); }
#mainContent .cm-sev-low { background: var(--sev-low); color: var(--sev-low); }
#mainContent .cm-sev-bg-critical { background: var(--sev-critical); }
#mainContent .cm-sev-bg-high { background: var(--sev-high); }
#mainContent .cm-sev-bg-medium { background: var(--sev-medium); }
#mainContent .cm-sev-bg-low { background: var(--sev-low); }

/* ---- THREAT CARDS ---- */
#mainContent .cm-threat-card { border-bottom: 1px solid var(--line); }
#mainContent .cm-threat-card:hover { background: var(--bg-2); }
#mainContent .cm-threat-card.cm-active { background: var(--bg-2); }
#mainContent .cm-threat-card.cm-active::after { width: 2px; background: var(--violet); }
#mainContent .cm-threat-id { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
#mainContent .cm-threat-title { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
#mainContent .cm-threat-sev {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: var(--rad-sm);
}
#mainContent .cm-threat-det-count { font-family: var(--font-mono); font-size: 10px; color: var(--mint); }

/* ---- DETECTION PANEL ---- */
#mainContent .cm-det-tabs { border-bottom: 1px solid var(--line); }
#mainContent .cm-det-tab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); border-bottom: 2px solid transparent; }
#mainContent .cm-det-tab:hover { color: var(--ink); }
#mainContent .cm-det-tab.cm-det-tab-active { color: var(--ink); border-bottom-color: var(--violet); }
#mainContent .cm-det-tab-label { font-weight: 700; }
#mainContent .cm-det-tab-count { color: var(--ink-4); font-size: 10px; }
#mainContent .cm-det-content { scrollbar-color: var(--line-3) transparent; }
#mainContent .cm-det-content::-webkit-scrollbar-thumb { background: var(--line-3); }
#mainContent .cm-det-card { border-bottom: 1px solid var(--line); }
#mainContent .cm-det-card-idx { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
#mainContent .cm-det-card-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
#mainContent .cm-det-card-sev {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: var(--rad-sm);
}
#mainContent .cm-det-code-wrap {
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    margin: 0 14px 12px;
}
#mainContent .cm-det-copy {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--rad-sm);
    padding: 2px 7px;
}
#mainContent .cm-det-copy:hover { color: var(--violet-ink); border-color: var(--violet); }
#mainContent .cm-det-code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--spl);
    line-height: 1.55;
    scrollbar-color: var(--line-3) transparent;
}
#mainContent .cm-det-code::-webkit-scrollbar-thumb { background: var(--line-3); }

/* =====================================================================
   MOBILE / RESPONSIVE
   ===================================================================== */
@media (max-width: 1000px) {
    #mainContent .cm-page { padding: 22px 18px 44px; }
    #mainContent .cm-page-title { font-size: 23px; }
    #mainContent .cm-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    #mainContent .cm-page { padding: 16px 12px 36px; }
    #mainContent .cm-header-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    #mainContent .cm-page-title { font-size: 21px; }
    #mainContent .cm-coverage-arc { width: 84px; height: 84px; }

    /* split panels stack to single column, unstick fixed widths */
    #mainContent .cm-split { flex-direction: column; min-height: auto; }
    #mainContent .cm-panel-tactics {
        width: 100%;
        min-width: 0;
        max-height: 280px;
        overflow-y: auto;
    }
    #mainContent .cm-panel-techniques,
    #mainContent .cm-panel-threats,
    #mainContent .cm-panel-detections {
        flex: none;
        min-width: 0;
        max-height: 360px;
    }
    #mainContent .cm-det-content { max-height: none; }

    #mainContent .cm-stats-bar { grid-template-columns: repeat(2, 1fr); }
    #mainContent .cm-stat-val { font-size: 24px; }
    #mainContent .cm-stat { padding: 13px 15px; }

    /* language bar stacks so it can't overflow */
    #mainContent .cm-lang-bar { flex-direction: column; height: auto; }
    #mainContent .cm-lang-segment { padding: 8px 12px; justify-content: flex-start; }

    /* filter chips tappable */
    #mainContent .cm-filter-row { gap: 6px; }
    #mainContent .cm-filter-btn { min-height: 40px; display: inline-flex; align-items: center; }

    #mainContent .cm-breadcrumb { font-size: 11px; }

    /* code wraps, never overflows horizontally */
    #mainContent .cm-det-code { white-space: pre-wrap; word-break: break-word; max-height: 260px; }
}

@media (max-width: 480px) {
    #mainContent .cm-page { padding: 12px 10px 28px; }
    #mainContent .cm-page-title { font-size: 18px; }
    #mainContent .cm-stats-bar { grid-template-columns: 1fr 1fr; gap: 1px; }
    #mainContent .cm-stat { padding: 11px 12px; }
    #mainContent .cm-stat-val { font-size: 20px; }
    #mainContent .cm-stat-pct { font-size: 13px; }
    #mainContent .cm-panel-tactics,
    #mainContent .cm-panel-techniques,
    #mainContent .cm-panel-threats,
    #mainContent .cm-panel-detections { max-height: 300px; }
    #mainContent .cm-det-tab { padding: 8px 12px; }
    #mainContent .cm-det-code-wrap { margin: 0 10px 10px; }
}

/* ---- page-advanced-correlations.js  [ac-] ---- */


/* === Container & Layout === */

/* === Tabs === */

/* === Content === */

/* === Mono helper + meta lines === */

/* === Stats strip === */

/* pastel accent classes — scoped to page root so they cannot leak */
#acContainer .pastel-rose { color: var(--sev-critical); }
#acContainer .pastel-lavender { color: var(--violet-ink); }
#acContainer .pastel-mint { color: var(--mint); }
#acContainer .pastel-peach { color: var(--sev-high); }
#acContainer .pastel-sky { color: var(--sky); }

/* === Engine cards (overview) === */

/* === v2: campaigns / pivotal entities / technique rules === */

/* === Bar === */

/* === Badge === */


/* === Table rows === */

/* === MITRE heatmap grid === */

/* === Adversary infra cards === */

/* === CVE velocity scatter chart === */

/* === Attribution cards === */

/* === Sync info === */


/* === Priority labels === */

/* === Enrichment health row === */

/* === Grid column templates === */

/* === Light-mode fine-tuning (tokens cover the rest) === */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {

     /* hide epss col */
}

@media (max-width: 768px) {

    /* Stats wrap into a tidy grid instead of a squashed single row */

    /* Tables: drop header, stack each row into a 2-col label/value layout */

}

/* ---- page-wild-c2.js  [wc-] ---- */


/* === Container & Header === */

/* === Tabs === */

/* === Content === */


/* === Stat strips === */

/* === Section eyebrows === */


/* === Bar charts === */

/* === Watermark + recent rows === */

/* === Search + filters === */

/* === Tables === */

/* === Pagination === */


/* === Bracket buttons === */

/* === Inline beacon detail === */

/* === Config list + block === */

/* === Operator clusters === */

/* === Badges === */

/* === Severity badges === */

/* === Correlation feed === */

/* === Heatmap === */

/* === Actor / chain / fingerprint cards === */

/* === Domain fronting === */

/* === Confidence waterfall === */

/* === Kill timeline === */

/* === MITRE heat / tech tags === */

/* === Nation groups === */

/* === Cross-intel feed detail === */


/* === Placeholder + loading === */

/* ============================================================================
   MOBILE — no horizontal overflow, stacked grids, unstuck rails, scaled type
   ============================================================================ */

/* ---- page-dns-enrichment.js  [de-] ---- */


/* === Container & header === */

/* === Tabs === */

/* === Content / loading / placeholders === */

/* === Section eyebrows (// label) === */

/* === Stats strip === */

/* === Bracket buttons (violet primary) === */

/* === Search bar === */

/* === Selects === */

/* === Tables === */

/* Re-map common inline hex the JS sets on cells to tokens */

/* === Expanded detail === */

/* === Pagination === */


/* === Health bar === */

/* === Activity feed === */

/* === Cross-correlation cards === */

/* === Threat badges (violet) === */

/* === Reverse-lookup accordion === */

/* === Dendrogram controls === */

/* === Message boxes === */

/* === Enrich section === */

/* === Generic badge === */


/* Inline-styled health hint text uses hardcoded #888 */

/* ============================================================================
   MOBILE — no horizontal overflow; collapse grids; scroll wide tables
   ============================================================================ */

/* ---- page-simulations.js  [sl-] ---- */
/* ============================================================ */
/* SIMULATION LIBRARY (sl-*) — SIGNAL POLISH + MOBILE           */
/* Appended after existing sl-* blocks; equal specificity wins. */
/* ============================================================ */

/* --- Container / surfaces --- */
.sl-stats-bar { border-bottom:1px solid var(--line); gap:24px; }
.sl-stat { gap:4px; }
.sl-stat-val { font-family:var(--font-display); font-weight:700; font-size:30px; line-height:0.92; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.sl-stat-label { color:var(--ink-3); letter-spacing:0.06em; }
.sl-val-lavender { color:var(--violet-ink); }
.sl-val-mint { color:var(--mint); }
.sl-val-peach { color:var(--amber); }
.sl-val-sky { color:var(--sky); }

/* --- Page tabs -> violet active --- */
.sl-page-tabs { border-bottom:1px solid var(--line); }
.sl-page-tab { color:var(--ink-3); border-bottom:2px solid transparent; transition:color .15s,border-color .15s; }
.sl-page-tab:hover { color:var(--ink); }
.sl-page-tab.active { color:var(--violet-ink); border-bottom-color:var(--violet); }

/* --- Breadcrumb --- */
.sl-breadcrumb { border-bottom:1px solid var(--line); background:var(--bg-inset); color:var(--ink-4); }
.sl-breadcrumb-item { color:var(--ink-3); }
.sl-breadcrumb-item:hover { color:var(--violet-ink); }
.sl-breadcrumb-item.current { color:var(--ink); }
.sl-breadcrumb-sep { color:var(--ink-4); }

/* --- Filter sidebar --- */
.sl-filter-sidebar { border-right:1px solid var(--line); background:var(--bg-1); }
.sl-filter-group { border-bottom:1px solid var(--line); }
.sl-filter-group-header { color:var(--ink-3); letter-spacing:0.04em; }
.sl-filter-group-header:hover { background:var(--bg-2); }
.sl-filter-chevron { color:var(--ink-4); }
.sl-filter-item { color:var(--ink-3); }
.sl-filter-item:hover { color:var(--ink); }
.sl-filter-item.active { color:var(--ink); }
.sl-filter-check { border:1px solid var(--line-2); border-radius:var(--rad-sm); }
.sl-filter-item.active .sl-filter-check { border-color:var(--violet); color:var(--violet-ink); }
.sl-filter-count { color:var(--ink-4); }
.sl-filter-search { background:var(--bg-inset); border:1px solid var(--line); color:var(--ink); border-radius:var(--rad-sm); }
.sl-filter-search:focus { border-color:var(--violet); }
.sl-filter-search::placeholder { color:var(--ink-4); }
.sl-filter-pill { background:var(--violet-tint); color:var(--violet-ink); border-radius:var(--rad-sm); }
.sl-filter-clear:hover { color:var(--rose); }

/* --- Threat panel / search / sort --- */
.sl-threat-panel { border-right:1px solid var(--line); }
.sl-search-bar { border-bottom:1px solid var(--line); }
.sl-search-input { background:var(--bg-inset); border:1px solid var(--line); color:var(--ink); border-radius:var(--rad-sm); }
.sl-search-input:focus { border-color:var(--violet); }
.sl-search-input::placeholder { color:var(--ink-4); }
.sl-search-count { color:var(--ink-4); }
.sl-sort-bar { border-bottom:1px solid var(--line); }
.sl-sort-btn { color:var(--ink-4); border-bottom:2px solid transparent; }
.sl-sort-btn:hover { color:var(--ink-2); }
.sl-sort-btn.active { color:var(--violet-ink); border-bottom-color:var(--violet); }

/* --- Threat cards --- */
.sl-threat-card { border-bottom:1px solid var(--line); border-left:3px solid transparent; transition:background .15s,border-color .15s; }
.sl-threat-card:hover { background:var(--bg-2); }
.sl-threat-card.selected { background:var(--bg-3); border-left-color:var(--violet); }
.sl-threat-title { color:var(--ink); font-weight:600; }
.sl-threat-id { color:var(--ink-4); }
.sl-threat-actor { color:var(--rose); }
.sl-threat-nation { color:var(--sky); }
.sl-threat-cat { color:var(--ink-4); background:var(--bg-2); border-radius:var(--rad-sm); }
.sl-threat-sim-count { color:var(--violet-ink); background:var(--violet-tint); border-radius:var(--rad-sm); }

/* --- Sim list panel --- */
.sl-sim-panel { border-right:1px solid var(--line); background:var(--bg-1); }
.sl-sim-header { border-bottom:1px solid var(--line); background:var(--bg-inset); }
.sl-sim-header-title { color:var(--ink); font-weight:700; letter-spacing:-0.01em; }
.sl-sim-platform-group { border-bottom:1px solid var(--line); }
.sl-sim-platform-label { background:var(--bg-inset); color:var(--ink-3); letter-spacing:0.04em; }
.sl-sim-card { border-bottom:1px solid var(--line); transition:background .15s; }
.sl-sim-card:hover { background:var(--bg-2); }
.sl-sim-card.selected { background:var(--bg-3); box-shadow:inset 3px 0 0 var(--violet); }
.sl-sim-title { color:var(--ink); }
.sl-sim-caution { border-radius:var(--rad-sm); }
.sl-sim-caution-critical { color:var(--sev-critical); background:var(--sev-critical-tint); }
.sl-sim-caution-high { color:var(--sev-high); background:var(--sev-high-tint); }
.sl-sim-caution-medium { color:var(--sev-medium); background:var(--sev-medium-tint); }
.sl-sim-caution-low { color:var(--sev-low); background:var(--sev-low-tint); }
.sl-sim-mitre-pill { color:var(--violet-ink); background:var(--violet-tint); border-radius:var(--rad-sm); }
.sl-sim-author { color:var(--ink-4); }

/* --- Detail panel --- */
.sl-detail-header { border-bottom:1px solid var(--line); background:var(--bg-inset); }
.sl-detail-title { color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-0.02em; }
.sl-detail-section { border-bottom:1px solid var(--line); }
.sl-detail-section-label { color:var(--ink-3); letter-spacing:0.04em; }

/* --- Code block -> Signal inset + rounded --- */
.sl-code-block { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--rad); }
.sl-code-header { background:var(--bg-2); border-bottom:1px solid var(--line); color:var(--ink-3); }
.sl-code-copy { color:var(--ink-3); }
.sl-code-copy:hover { color:var(--mint); }
.sl-code-content { color:var(--ink); }
.sl-code-line-num { color:var(--ink-4); }

/* --- Requirements / references / notes --- */
.sl-req-item { color:var(--ink-2); }
.sl-req-item::before { color:var(--violet-ink); }
.sl-ref-type { color:var(--ink-3); background:var(--bg-2); border-radius:var(--rad-sm); }
.sl-ref-link { color:var(--sky); }
.sl-notes { color:var(--ink-2); }

/* --- Correlation / coverage --- */
.sl-section-label { color:var(--ink-3); letter-spacing:0.04em; }
.sl-corr-card, .sl-corr-chain-card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); transition:border-color .15s,transform .15s; }
.sl-corr-card:hover, .sl-corr-chain-card:hover { border-color:var(--violet); transform:translateY(-2px); }
.sl-corr-tech-id { color:var(--violet-ink) !important; }
.sl-corr-tech-name { color:var(--ink); }
.sl-corr-count { color:var(--ink-4); }
.sl-corr-tactic { color:var(--ink-4) !important; }
.sl-corr-pill { color:var(--rose); background:var(--sev-critical-tint); border-radius:var(--rad-sm); }
.sl-corr-pill:hover { background:var(--violet-tint); color:var(--violet-ink); }
.sl-corr-chain-threat { color:var(--ink); }
.sl-corr-chain-threat:hover { color:var(--violet-ink); }
.sl-corr-chain-arrow { color:var(--violet-ink); }
.sl-corr-chain-count { color:var(--violet-ink) !important; }
.sl-corr-tech-pill { color:var(--violet-ink); background:var(--violet-tint); border-radius:var(--rad-sm); }
.sl-cov-bar-track { background:var(--bg-inset); border-radius:var(--rad-sm); overflow:hidden; }
.sl-cov-platform-stats { color:var(--ink-4); }
.sl-cov-kc-cell { border:1px solid var(--line); border-radius:var(--rad-sm); }
.sl-cov-kc-name { color:var(--ink-2); }

/* --- Empty / loading --- */
.sl-empty, .sl-loading { color:var(--ink-3); }

/* --- Syntax highlighting -> tokens --- */
.sl-hl-keyword { color:var(--violet-ink); }
.sl-hl-string { color:var(--mint); }
.sl-hl-comment { color:var(--ink-4); font-style:italic; }
.sl-hl-variable { color:var(--rose); }
.sl-hl-operator { color:var(--amber); }
.sl-hl-builtin { color:var(--sky); }
.sl-hl-decorator { color:var(--amber); }

/* ---------- LIGHT MODE token parity for new accents ---------- */
[data-theme="light"] .sl-page-tab.active { color:var(--violet); border-bottom-color:var(--violet); }
[data-theme="light"] .sl-sort-btn.active { color:var(--violet); border-bottom-color:var(--violet); }
[data-theme="light"] .sl-breadcrumb-item:hover { color:var(--violet); }
[data-theme="light"] .sl-filter-item.active .sl-filter-check { border-color:var(--violet); color:var(--violet); }
[data-theme="light"] .sl-filter-pill { background:var(--violet-tint); color:var(--violet); }
[data-theme="light"] .sl-threat-card.selected { border-left-color:var(--violet); }
[data-theme="light"] .sl-threat-sim-count { color:var(--violet); background:var(--violet-tint); }
[data-theme="light"] .sl-code-block { background:var(--bg-inset); border-color:var(--line); }
[data-theme="light"] .sl-code-header { background:var(--bg-2); }
[data-theme="light"] .sl-corr-card:hover, [data-theme="light"] .sl-corr-chain-card:hover { border-color:var(--violet); }

/* ============================================================ */
/* MOBILE / TABLET RESPONSIVE                                   */
/* ============================================================ */

/* Tablet: collapse 4 fixed panels -> threat list full, sim+detail slide over */
@media (max-width:1000px) {
    .sl-panels { position:relative; }
    .sl-filter-sidebar { width:200px; min-width:200px; }
    .sl-threat-panel { min-width:0; }
    .sl-sim-panel.visible {
        position:absolute; top:0; right:0; bottom:0;
        width:380px; min-width:380px; z-index:5;
        box-shadow:var(--shadow-lg);
    }
    .sl-detail-panel.visible {
        position:absolute; top:0; right:0; bottom:0;
        width:480px; min-width:480px; max-width:90%; z-index:6;
        background:var(--bg-1); box-shadow:var(--shadow-lg);
    }
}

/* Phone: full stack, no horizontal overflow */
@media (max-width:768px) {
    .sl-container {
        height:auto; min-height:calc(100dvh - var(--header-height));
        overflow:visible;
    }

    /* Stats: 2-col grid, smaller numerals */
    .sl-stats-bar {
        display:grid; grid-template-columns:repeat(2,1fr);
        gap:12px; padding:14px 16px;
    }
    .sl-stat { align-items:flex-start; }
    .sl-stat-val { font-size:24px; }

    /* Tabs / breadcrumb: allow horizontal scroll, no wrap */
    .sl-page-tabs { padding:0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .sl-page-tab { padding:10px 14px; white-space:nowrap; flex:none; }
    .sl-breadcrumb { padding:8px 14px; overflow-x:auto; white-space:nowrap; }

    /* Body becomes flow layout */
    .sl-body { overflow:visible; }
    .sl-panels { flex-direction:column; height:auto; overflow:visible; position:relative; }

    /* Filter sidebar -> collapsible horizontal strip */
    .sl-filter-sidebar {
        width:100%; min-width:0; max-height:none;
        border-right:none; border-bottom:1px solid var(--line);
        overflow-x:auto; overflow-y:visible;
        display:flex; flex-wrap:nowrap;
    }
    .sl-filter-pills { width:100%; flex-basis:100%; }
    .sl-filter-clear { width:100%; flex-basis:100%; }
    .sl-filter-group { border-bottom:none; border-right:1px solid var(--line); min-width:180px; flex:none; }
    .sl-filter-group-body { max-height:220px; }

    /* Threat list panel: full width, capped height with own scroll */
    .sl-threat-panel {
        width:100%; min-width:0; border-right:none;
        border-bottom:1px solid var(--line);
        max-height:60vh;
    }
    .sl-search-bar { flex-wrap:wrap; }
    .sl-search-input { min-width:0; }
    .sl-threat-list { -webkit-overflow-scrolling:touch; }

    /* Sim + detail panels: full-screen overlays driven by .visible */
    .sl-sim-panel, .sl-detail-panel {
        width:0; min-width:0; border-right:none;
    }
    .sl-sim-panel.visible,
    .sl-detail-panel.visible {
        position:fixed; top:var(--header-height); left:0; right:0; bottom:0;
        width:100%; min-width:0; max-width:100%;
        z-index:60; background:var(--bg);
        box-shadow:none; border-left:1px solid var(--line);
    }
    .sl-detail-panel.visible { z-index:61; }
    .sl-sim-list, .sl-detail-scroll { -webkit-overflow-scrolling:touch; }

    /* Code block wraps instead of horizontal scroll */
    .sl-code-content { white-space:pre-wrap; word-break:break-word; max-height:none; }
    .sl-code-line-text { word-break:break-word; }

    /* Correlation / coverage grids -> single column */
    .sl-corr-section { padding:14px 16px; }
    .sl-corr-grid { grid-template-columns:1fr; }
    .sl-cov-killchain { grid-template-columns:repeat(2,1fr); }
    .sl-section-label { padding:12px 16px 0; }
}

@media (max-width:480px) {
    .sl-stats-bar { grid-template-columns:repeat(2,1fr); }
    .sl-stat-val { font-size:21px; }
    .sl-cov-killchain { grid-template-columns:1fr; }
    .sl-detail-title { font-size:15px; }
}

/* ---- page-mcp.js  [mcp-] ---- */
/* ============================================================
   MCP SERVER PAGE — SIGNAL POLISH + MOBILE
   Scoped with .mcp-page ancestor to outrank the page's injected
   mcpCss block. Token-only colors (dark/light auto-resolve).
   ============================================================ */

/* ---------- Page shell ---------- */
.mcp-page { max-width: 980px; }

/* ---------- Hero ---------- */
.mcp-page .mcp-hero-v2 { border-bottom: 1px solid var(--line); }
.mcp-page .mcp-status-row {
    background: var(--sev-low-tint);
    border: 1px solid var(--sev-low-tint);
    border-radius: 999px;
}
.mcp-page .mcp-status-dot { background: var(--mint); border-radius: 50%; }
.mcp-page .mcp-status-text { color: var(--mint); }

.mcp-page .mcp-hero-title {
    color: var(--ink);
    letter-spacing: -0.5px;
}
.mcp-page .mcp-hero-sub { color: var(--ink-2); }

.mcp-page .mcp-hbadge { border-radius: var(--rad-sm); }
.mcp-page .mcp-hbadge--rose    { color: var(--rose);       border-color: var(--sev-critical-tint); background: var(--sev-critical-tint); }
.mcp-page .mcp-hbadge--lavender{ color: var(--violet-ink); border-color: var(--violet-tint);      background: var(--violet-tint); }
.mcp-page .mcp-hbadge--mint    { color: var(--mint);       border-color: var(--sev-low-tint);      background: var(--sev-low-tint); }
.mcp-page .mcp-hbadge--sky     { color: var(--sky);        border-color: var(--sev-medium-tint);   background: rgba(125,211,252,0.10); }
.mcp-page .mcp-hbadge--peach   { color: var(--amber);      border-color: var(--sev-high-tint);     background: var(--sev-high-tint); }

.mcp-page .mcp-hero-endpoint {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.mcp-page .mcp-he-label { color: var(--ink-3); }
.mcp-page .mcp-he-url { color: var(--sky); }

/* ---------- Inline router links (was inline #c4b5fd) ---------- */
.mcp-page .mcp-ilink {
    color: var(--violet-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--violet-tint-2);
    transition: color .13s, border-color .13s;
}
.mcp-page .mcp-ilink:hover { color: var(--violet-bright); border-bottom-color: var(--violet); }

/* ---------- Sections ---------- */
.mcp-page .mcp-sect { border-bottom: 1px solid var(--line); }
.mcp-page .mcp-sect-label { color: var(--ink); }
.mcp-page .mcp-sect-line { background: var(--line); }
.mcp-page .mcp-sect-desc { color: var(--ink-3); }
.mcp-page .mcp-sect-desc code.mcp-inline-code,
.mcp-page .mcp-auth-desc code.mcp-inline-code {
    color: var(--violet-ink);
    background: var(--violet-tint);
    border: 1px solid var(--violet-tint-2);
    border-radius: var(--rad-sm);
}

/* ---------- Config tabs ---------- */
.mcp-page .mcp-config-tabs-v2 { border-bottom: 1px solid var(--line); }
.mcp-page .mcp-ctab { color: var(--ink-3); }
.mcp-page .mcp-ctab:hover { color: var(--ink-2); }
.mcp-page .mcp-ctab.active { color: var(--ink); border-bottom-color: var(--violet); }
.mcp-page .mcp-config-path {
    color: var(--ink-3);
    background: var(--bg-inset);
    border-left: 2px solid var(--violet);
    border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
}

/* ---------- Code blocks ---------- */
.mcp-page .mcp-codeblock {
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.mcp-page .mcp-codeblock-head {
    background: var(--bg-inset);
    border-bottom: 1px solid var(--line);
}
.mcp-page .mcp-codeblock-lang { color: var(--ink-3); }
.mcp-page .mcp-copy-btn { color: var(--ink-3); border-radius: var(--rad-sm); }
.mcp-page .mcp-copy-btn:hover { color: var(--violet-ink); }
.mcp-page .mcp-copy-btn.mcp-copied { color: var(--mint); }
.mcp-page .mcp-pre { background: var(--bg-inset); }
.mcp-page .mcp-code { color: var(--ink-2); }

.mcp-page .mcp-syn-brace,
.mcp-page .mcp-syn-bracket,
.mcp-page .mcp-syn-colon,
.mcp-page .mcp-syn-comma { color: var(--ink-3); }
.mcp-page .mcp-syn-key { color: var(--violet-ink); }
.mcp-page .mcp-syn-str { color: var(--mint); }
.mcp-page .mcp-syn-num { color: var(--amber); }
.mcp-page .mcp-syn-comment { color: var(--ink-4); }

/* ---------- API endpoints ---------- */
.mcp-page .mcp-endpoints {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    overflow: hidden;
}
.mcp-page .mcp-endpoint { background: var(--bg-1); }
.mcp-page .mcp-ep-header:hover { background: var(--bg-2); }
.mcp-page .mcp-ep-method { border-radius: var(--rad-sm); }
.mcp-page .mcp-ep-method--get {
    color: var(--mint);
    background: var(--sev-low-tint);
    border: 1px solid var(--sev-low-tint);
}
.mcp-page .mcp-ep-path { color: var(--ink); }
.mcp-page .mcp-ep-toggle { color: var(--ink-3); }
.mcp-page .mcp-endpoint.open .mcp-ep-toggle { color: var(--violet); }
.mcp-page .mcp-ep-desc { color: var(--ink-2); }
.mcp-page .mcp-ep-params,
.mcp-page .mcp-ep-example { border: 1px solid var(--line); border-radius: var(--rad-sm); }
.mcp-page .mcp-ep-params-head,
.mcp-page .mcp-ep-example-head {
    color: var(--ink-3);
    background: var(--bg-inset);
    border-bottom: 1px solid var(--line);
}
.mcp-page .mcp-ep-example-head span { color: var(--ink-3); }
.mcp-page .mcp-ep-params-table th { color: var(--ink-3); border-bottom: 1px solid var(--line); }
.mcp-page .mcp-ep-params-table td { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mcp-page .mcp-param-name {
    color: var(--ink);
    background: var(--bg-3);
    border-radius: var(--rad-sm);
}
.mcp-page .mcp-param-req { color: var(--rose); }
.mcp-page .mcp-param-type { color: var(--sky); }

/* ---------- MCP tools ---------- */
.mcp-page .mcp-tool-v2 {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    transition: border-color .13s, transform .13s;
}
.mcp-page .mcp-tool-v2:hover { transform: translateY(-1px); }
.mcp-page .mcp-tool--rose:hover     { border-color: var(--sev-critical); }
.mcp-page .mcp-tool--lavender:hover { border-color: var(--violet); }
.mcp-page .mcp-tool--mint:hover     { border-color: var(--mint); }
.mcp-page .mcp-tool--peach:hover    { border-color: var(--amber); }
.mcp-page .mcp-tool--sky:hover      { border-color: var(--sky); }
.mcp-page .mcp-tool--yellow:hover   { border-color: var(--sev-high); }

.mcp-page .mcp-tool-dot { border-radius: 50%; }
.mcp-page .mcp-tool-dot--rose     { background: var(--rose); }
.mcp-page .mcp-tool-dot--lavender { background: var(--violet-ink); }
.mcp-page .mcp-tool-dot--mint     { background: var(--mint); }
.mcp-page .mcp-tool-dot--peach    { background: var(--amber); }
.mcp-page .mcp-tool-dot--sky      { background: var(--sky); }
.mcp-page .mcp-tool-dot--yellow   { background: var(--sev-high); }

.mcp-page .mcp-tool-name-v2 { color: var(--ink); }
.mcp-page .mcp-tool-desc-v2 { color: var(--ink-3); }
.mcp-page .mcp-tool-param {
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
}
.mcp-page .mcp-tp-name { color: var(--ink-2); }
.mcp-page .mcp-tp-name--req { color: var(--ink); }
.mcp-page .mcp-tp-type { color: var(--ink-3); }
.mcp-page .mcp-tp-desc { color: var(--ink-3); }
.mcp-page .mcp-tp-req {
    color: var(--rose);
    background: var(--sev-critical-tint);
    border: 1px solid var(--sev-critical-tint);
    border-radius: var(--rad-sm);
}
.mcp-page .mcp-tool-group-header { color: var(--ink-4); }

/* ---------- Tier badges ---------- */
.mcp-page .mcp-tier-badge { border-radius: var(--rad-sm); }
.mcp-page .mcp-tier--mint { color: var(--mint); background: var(--sev-low-tint); border: 1px solid var(--sev-low-tint); }
.mcp-page .mcp-tier--sky  { color: var(--sky);  background: rgba(125,211,252,0.10); border: 1px solid rgba(125,211,252,0.22); }
.mcp-page .mcp-tier--rose { color: var(--rose); background: var(--sev-critical-tint); border: 1px solid var(--sev-critical-tint); }
.mcp-page .mcp-tier--peach{ color: var(--amber);background: var(--sev-high-tint); border: 1px solid var(--sev-high-tint); }

/* ---------- Auth steps + tier list ---------- */
.mcp-page .mcp-auth-step { border-bottom: 1px solid var(--line); }
.mcp-page .mcp-auth-num { color: var(--violet-ink); }
.mcp-page .mcp-auth-head { color: var(--ink); }
.mcp-page .mcp-auth-desc { color: var(--ink-3); }
.mcp-page .mcp-auth-tiers { border: 1px solid var(--line); border-radius: var(--rad); }
.mcp-page .mcp-tier-name { color: var(--ink-2); }
.mcp-page .mcp-tier-tools { color: var(--ink-4); }
.mcp-page .mcp-tier-dot { border-radius: 50%; }
.mcp-page .mcp-tier-dot--free   { background: var(--ink-4); }
.mcp-page .mcp-tier-dot--blue   { background: var(--sky); }
.mcp-page .mcp-tier-dot--red    { background: var(--rose); }
.mcp-page .mcp-tier-dot--purple { background: var(--violet-ink); }

/* ---------- Try it ---------- */
.mcp-page .mcp-tryit { border: 1px solid var(--line); border-radius: var(--rad); }
.mcp-page .mcp-tryit-controls { border-bottom: 1px solid var(--line); }
.mcp-page .mcp-tryit-select { background: var(--bg-inset); color: var(--ink); }
.mcp-page .mcp-tryit-select option { background: var(--bg-1); color: var(--ink); }
.mcp-page .mcp-tryit-exec {
    background: var(--violet-tint);
    color: var(--violet-ink);
    border-left: 1px solid var(--line);
}
.mcp-page .mcp-tryit-exec:hover { background: var(--violet-tint-2); }
.mcp-page .mcp-tryit-url { background: var(--bg-inset); border-bottom: 1px solid var(--line); }
.mcp-page .mcp-tryit-method {
    color: var(--mint);
    background: var(--sev-low-tint);
    border: 1px solid var(--sev-low-tint);
    border-radius: var(--rad-sm);
}
.mcp-page .mcp-tryit-path { color: var(--ink-2); }
.mcp-page .mcp-tryit-result { background: var(--bg-inset); }
.mcp-page .mcp-tryit-placeholder { color: var(--ink-3); }
.mcp-page .mcp-tryit-loading { color: var(--ink-2); }
.mcp-page .mcp-tryit-spinner {
    border: 2px solid var(--line);
    border-top-color: var(--violet);
    border-radius: 50%;
}
.mcp-page .mcp-tryit-status { background: var(--bg-inset); border-bottom: 1px solid var(--line); }
.mcp-page .mcp-tryit-status-code { border-radius: var(--rad-sm); }
.mcp-page .mcp-tryit-status--ok  { color: var(--mint); background: var(--sev-low-tint); border: 1px solid var(--sev-low-tint); }
.mcp-page .mcp-tryit-status--err { color: var(--rose); background: var(--sev-critical-tint); border: 1px solid var(--sev-critical-tint); }
.mcp-page .mcp-tryit-error { color: var(--rose); }

/* ---------- Usage examples ---------- */
.mcp-page .mcp-ex {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    transition: border-color .13s;
}
.mcp-page .mcp-ex:hover { border-color: var(--violet); }
.mcp-page .mcp-ex-prompt { color: var(--ink); }
.mcp-page .mcp-ex-arrow { color: var(--ink-3); }
.mcp-page .mcp-ex-call { color: var(--mint); }

/* ---------- Stats grid ---------- */
.mcp-page .mcp-stat-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    transition: border-color .13s, transform .13s;
}
.mcp-page .mcp-stat-card:hover { border-color: var(--violet); transform: translateY(-1px); }
.mcp-page .mcp-stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 30px;
}
.mcp-page .mcp-stat--rose     { color: var(--rose); }
.mcp-page .mcp-stat--lavender { color: var(--violet-ink); }
.mcp-page .mcp-stat--mint     { color: var(--mint); }
.mcp-page .mcp-stat--sky      { color: var(--sky); }
.mcp-page .mcp-stat--peach    { color: var(--amber); }
.mcp-page .mcp-stat--yellow   { color: var(--sev-high); }
.mcp-page .mcp-stat-label { color: var(--ink-3); }

/* ---------- Links ---------- */
.mcp-page .mcp-link-v2 {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    color: var(--ink);
    transition: border-color .13s, background .13s, transform .13s;
}
.mcp-page .mcp-link-v2:hover { border-color: var(--violet); background: var(--bg-2); transform: translateY(-1px); }
.mcp-page .mcp-link-icon { color: var(--violet-ink); }
.mcp-page .mcp-link-text { color: var(--ink-2); }
.mcp-page .mcp-link-arrow { color: var(--ink-3); }
.mcp-page .mcp-link-v2:hover .mcp-link-arrow { color: var(--violet); }

/* ---------- Scrollbars ---------- */
.mcp-page .mcp-pre::-webkit-scrollbar-track { background: var(--bg-inset); }
.mcp-page .mcp-pre::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.mcp-page .mcp-pre::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* ============================================================
   MOBILE — no horizontal overflow, stacked layouts, scaled type
   ============================================================ */
@media (max-width: 1000px) {
    .mcp-page { max-width: 100%; }
    .mcp-page .mcp-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .mcp-page { padding: 0 14px 56px; overflow-x: hidden; }
    .mcp-page .mcp-hero-v2 { padding: 30px 0 26px; }
    .mcp-page .mcp-hero-title { font-size: 23px; }
    .mcp-page .mcp-hero-sub { font-size: 13.5px; }
    .mcp-page .mcp-hero-endpoint { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
    .mcp-page .mcp-he-url { word-break: break-word; overflow-wrap: anywhere; }

    .mcp-page .mcp-config-tabs-v2 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mcp-page .mcp-config-tabs-v2::-webkit-scrollbar { display: none; }
    .mcp-page .mcp-ctab { white-space: nowrap; flex: none; }

    .mcp-page .mcp-config-path { word-break: break-all; }
    .mcp-page .mcp-code { font-size: 12px; }

    .mcp-page .mcp-ep-header { flex-wrap: wrap; gap: 8px; }
    .mcp-page .mcp-ep-path { flex: 1 1 100%; order: 3; word-break: break-all; }
    .mcp-page .mcp-ep-params-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .mcp-page .mcp-tool-param { flex-wrap: wrap; }
    .mcp-page .mcp-tp-name,
    .mcp-page .mcp-tp-type { min-width: auto; }
    .mcp-page .mcp-tp-desc { flex-basis: 100%; }
    .mcp-page .mcp-tp-req { margin-left: 0; }

    .mcp-page .mcp-tryit-controls { flex-direction: column; }
    .mcp-page .mcp-tryit-exec { border-left: none; border-top: 1px solid var(--line); }
    .mcp-page .mcp-tryit-path { word-break: break-all; overflow-wrap: anywhere; }

    .mcp-page .mcp-ex { flex-direction: column; gap: 8px; }
    .mcp-page .mcp-ex-arrow { display: none; }
    .mcp-page .mcp-ex-call { padding-left: 12px; border-left: 2px solid var(--violet); }

    .mcp-page .mcp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mcp-page .mcp-stat-num { font-size: 24px; }

    .mcp-page .mcp-link-v2 { flex-wrap: wrap; }
    .mcp-page .mcp-link-icon { min-width: 0; }
}

@media (max-width: 480px) {
    .mcp-page .mcp-hero-title { font-size: 20px; }
    .mcp-page .mcp-hero-badges { gap: 6px; }
    .mcp-page .mcp-hbadge { font-size: 10.5px; padding: 4px 9px; }
    .mcp-page .mcp-stats-grid { grid-template-columns: 1fr 1fr; }
    .mcp-page .mcp-stat-card { padding: 16px 12px; }
    .mcp-page .mcp-stat-num { font-size: 21px; }
    .mcp-page .mcp-auth-tier { flex-wrap: wrap; }
    .mcp-page .mcp-tier-tools { flex-basis: 100%; padding-left: 16px; }
}


/* ============================================================
   CHANGELOG PAGE — Signal design system (token-driven, cl- prefix)
   All colors via design tokens; light/dark auto-resolve.
   ============================================================ */

.cl-page { padding: 28px 32px 72px 32px; max-width: var(--maxw, 1320px); margin: 0 auto; min-height: 100vh; }

/* --- Loading --- */
.cl-loading { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); padding: 64px 0; text-align: center; }
.cl-loading-cursor { color: var(--violet); margin-right: 6px; font-weight: 600; }
.cl-blink { animation: clBlink 1.2s steps(1) infinite; color: var(--violet); }
@keyframes clBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============ HEADER ============ */
.cl-header { margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.cl-header-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.cl-header-left { flex: 1; min-width: 0; }
.cl-page-id { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.cl-page-title { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.cl-page-subtitle { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 56ch; }
.cl-header-right { display: flex; gap: 1px; flex-shrink: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.cl-counter-box { background: var(--bg-1); padding: 12px 20px; text-align: left; min-width: 88px; display: flex; flex-direction: column; gap: 4px; }
.cl-counter-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 0.92; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cl-counter-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }

/* Stats bar — type chips */
.cl-stats-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-stat-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 4px 10px; }
.cl-stat-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.cl-stat-label { color: var(--ink-3); font-size: 9.5px; letter-spacing: 0.06em; }
.cl-stat-count { font-weight: 600; font-size: 12px; }

/* ============ TOOLBAR — Filters + Search ============ */
.cl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.cl-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.cl-filter-btn { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-3); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 6px 11px; cursor: pointer; transition: all 0.15s ease; text-transform: uppercase; letter-spacing: 0.08em; }
.cl-filter-btn:hover { color: var(--ink); border-color: var(--line-2); }
.cl-filter-btn.cl-filter-active { color: var(--filter-color, var(--ink)); border-color: var(--filter-color, var(--violet)); background: color-mix(in srgb, var(--filter-color, var(--violet)) 12%, transparent); }
.cl-search-wrap { display: flex; align-items: center; gap: 9px; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad); padding: 0 14px; min-width: 240px; height: 40px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.cl-search-wrap:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.cl-search-icon { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--violet); flex-shrink: 0; }
.cl-search-input { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); background: transparent; border: none; outline: none; padding: 8px 0; width: 100%; }
.cl-search-input::placeholder { color: var(--ink-4); }

/* ============ BODY LAYOUT — Timeline + Sidebar ============ */
.cl-body { display: grid; grid-template-columns: 1fr 304px; gap: 28px; align-items: start; }
.cl-timeline-col { position: relative; min-width: 0; }
.cl-timeline-line { position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 0; }
.cl-entries { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; }

/* ============ SINGLE ENTRY ============ */
.cl-entry { display: flex; gap: 16px; padding: 0 0 2px 0; transition: opacity 0.2s ease; }
.cl-entry-node { width: 24px; flex-shrink: 0; display: flex; justify-content: center; padding-top: 18px; }
.cl-node-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; z-index: 2; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cl-entry.cl-entry-open .cl-node-dot { transform: scale(1.35); box-shadow: 0 0 0 4px var(--violet-tint); }
.cl-entry-card { flex: 1; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); margin-bottom: 12px; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; min-width: 0; }
.cl-entry-card:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: var(--shadow); }
.cl-entry.cl-entry-open .cl-entry-card { border-color: var(--line-2); }
.cl-entry.cl-entry-open .cl-entry-card:hover { border-color: var(--violet); }

.cl-entry-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px 16px; cursor: pointer; user-select: none; }
.cl-entry-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cl-entry-hash { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.cl-entry-version { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.cl-entry-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.cl-entry-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.cl-entry-toggle { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.cl-toggle-icon { display: block; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform 0.2s ease; margin-top: -2px; }
.cl-entry-card:hover .cl-toggle-icon { border-right-color: var(--violet-ink); border-bottom-color: var(--violet-ink); }
.cl-entry.cl-entry-open .cl-toggle-icon { transform: rotate(45deg); margin-top: 0; border-right-color: var(--violet-ink); border-bottom-color: var(--violet-ink); }

.cl-entry-title { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); padding: 0 16px 8px 16px; line-height: 1.4; cursor: pointer; }
.cl-entry-summary { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-3); padding: 0 16px 12px 16px; line-height: 1.55; cursor: pointer; }

.cl-entry-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; opacity: 0; }
.cl-entry.cl-entry-open .cl-entry-body { max-height: 3000px; opacity: 1; }
.cl-changes-list { padding: 4px 16px 8px 16px; border-top: 1px solid var(--line); }

.cl-change-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--bg-inset); transition: opacity 0.15s ease; }
.cl-change-item:last-child { border-bottom: none; }
.cl-change-item.cl-change-dimmed { opacity: 0.22; }
.cl-change-symbol { font-family: var(--font-mono); font-size: 13px; font-weight: 700; width: 14px; text-align: center; flex-shrink: 0; line-height: 1.5; }
.cl-change-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 2px 7px; border: 1px solid transparent; border-radius: var(--rad-sm); flex-shrink: 0; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg-2); }
.cl-change-badge[data-type="added"]    { background: var(--sev-low-tint);      border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.cl-change-badge[data-type="changed"]  { background: color-mix(in srgb, var(--sky) 14%, transparent);   border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
.cl-change-badge[data-type="fixed"]    { background: var(--sev-high-tint);     border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.cl-change-badge[data-type="removed"]  { background: var(--sev-critical-tint); border-color: color-mix(in srgb, var(--rose) 30%, transparent); }
.cl-change-badge[data-type="security"] { background: var(--violet-tint);       border-color: color-mix(in srgb, var(--violet-ink) 34%, transparent); }
.cl-change-desc { font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); line-height: 1.5; min-width: 0; }

.cl-entry-footer { padding: 10px 16px; border-top: 1px solid var(--line); }
.cl-footer-sig { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.04em; }

/* ============ SIDEBAR — Roadmap + Completed ============ */
.cl-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cl-roadmap-panel, .cl-completed-panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.cl-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cl-panel-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cl-panel-count { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); }
.cl-panel-empty { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); padding: 22px 16px; text-align: center; }

.cl-roadmap-list { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.cl-roadmap-item { padding: 11px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad-sm); transition: border-color 0.15s ease, transform 0.15s ease; }
.cl-roadmap-item:hover { border-color: var(--violet); transform: translateY(-1px); }
.cl-roadmap-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.cl-roadmap-priority { font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 2px 7px; border: 1px solid transparent; border-radius: var(--rad-sm); letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg-3); }
.cl-roadmap-priority[data-priority="high"]   { background: var(--sev-critical-tint); border-color: color-mix(in srgb, var(--rose) 30%, transparent); }
.cl-roadmap-priority[data-priority="medium"] { background: var(--sev-high-tint);     border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.cl-roadmap-priority[data-priority="low"]    { background: var(--sev-low-tint);      border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.cl-roadmap-status { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); letter-spacing: 0.08em; }
.cl-roadmap-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 4px; }
.cl-roadmap-desc { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

.cl-completed-list { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.cl-completed-item { display: flex; align-items: flex-start; gap: 9px; padding: 6px 4px; }
.cl-completed-check { font-size: 11px; color: var(--mint); flex-shrink: 0; line-height: 1.5; }
.cl-completed-title { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); line-height: 1.45; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
    .cl-body { grid-template-columns: 1fr; }
    .cl-sidebar { position: static; top: auto; order: -1; }
    .cl-page { padding: 24px 20px 56px 20px; }
}
@media (max-width: 768px) {
    .cl-page { padding: 20px 14px 48px 14px; }
    .cl-header-top { flex-direction: column; align-items: stretch; gap: 16px; }
    .cl-page-title { font-size: 28px; }
    .cl-header-right { width: 100%; }
    .cl-counter-box { flex: 1; min-width: 0; align-items: center; text-align: center; }
    .cl-toolbar { flex-direction: column; align-items: stretch; }
    .cl-search-wrap { min-width: 0; width: 100%; }
    .cl-filters { gap: 4px; }
    .cl-entry { gap: 12px; }
    .cl-entry-node { width: 18px; padding-top: 16px; }
    .cl-timeline-line { left: 8px; }
    .cl-entry-meta { gap: 8px; }
}
@media (max-width: 480px) {
    .cl-page-title { font-size: 24px; }
    .cl-entry-hash { display: none; }
    .cl-change-item { flex-wrap: wrap; }
    .cl-change-badge { order: 3; }
    .cl-change-symbol { width: 12px; }
    .cl-change-desc { flex-basis: 100%; }
    .cl-counter-value { font-size: 24px; }
    .cl-filter-btn { flex: 1 0 auto; text-align: center; }
}

/* ---- page shell ---- */


/* ---- ASCII hero block ---- */


/* ---- Hero ---- */

/* ---- Sections (panel look) ---- */

/* ---- Mission copy ---- */

/* ---- Stats grid ---- */

/* ---- Features grid ---- */

/* ---- Stack grid ---- */

/* ---- Pipeline phases ---- */

/* ---- Agent cards ---- */

/* ---- Detection engineering ---- */

/* ---- Pipeline quality ---- */

/* ---- Terminal block ---- */

/* ---- Links grid ---- */

/* ---- Credits ---- */

/* ---- Footer ---- */

/* ---- Agent communication diagram ---- */

/* ============================================================================
   LIGHT MODE — re-assert tokenized colors so legacy [data-theme=light] hexes
   defer to Signal tokens (tokens already remap per-theme, so just point back).
   ============================================================================ */

/* ============================================================================
   MOBILE HARDENING (scoped) — no horizontal overflow on phones
   ============================================================================ */


@media (max-width: 768px) {

    /* terminal: allow wrapping, no nowrap overflow */

    /* a2a already collapses to vertical cards via existing rule; ensure no x-scroll */

}

/* ---- page-profile.js  [prf-] ---- */
/* ============================================================
   PROFILE PAGE — Signal polish + mobile (scoped, prf-*)
   Appended to shared styles.css. Every selector is prefixed with
   #mainContent (and [data-theme="light"] #mainContent for light)
   so it out-specifies the page's inline single-class <style> block
   in both themes without leaking to other pages.
   ============================================================ */

/* ---- container & header ---- */
#mainContent .prf-container { max-width: 720px; padding: 44px 32px 64px; }
#mainContent .prf-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px; padding-bottom: 14px;
}
#mainContent .prf-title {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---- tabs: violet active, scrollable strip ---- */
#mainContent .prf-tabs {
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px; gap: 2px;
  scrollbar-width: none;
}
#mainContent .prf-tabs::-webkit-scrollbar { display: none; }
#mainContent .prf-tab {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--ink-3); padding: 11px 15px;
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
#mainContent .prf-tab:hover { color: var(--ink); }
#mainContent .prf-tab.active {
  color: var(--violet-ink);
  border-bottom-color: var(--violet);
}

/* ---- cards & panels: bg-1 + line + rounded + hover lift ---- */
#mainContent .prf-card,
#mainContent .prf-tier-section,
#mainContent .prf-recent-section,
#mainContent .prf-settings-card,
#mainContent .prf-sec-card,
#mainContent .prf-plan-card,
#mainContent .prf-plan-current,
#mainContent .prf-plan-access-code,
#mainContent .prf-lib-empty,
#mainContent .prf-act-empty,
#mainContent .prf-sec-empty {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}
#mainContent .prf-card { box-shadow: var(--shadow-sm); }
#mainContent .prf-sec-card,
#mainContent .prf-plan-card {
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#mainContent .prf-sec-card:hover,
#mainContent .prf-plan-card:hover {
  border-color: var(--line-2);
}

/* ---- rows & labels ---- */
#mainContent .prf-row { border-bottom: 1px solid var(--line); }
#mainContent .prf-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3);
}
#mainContent .prf-value { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

/* ---- avatar: rounded, display font ---- */
#mainContent .prf-avatar {
  border-radius: var(--rad);
  font-family: var(--font-display); font-weight: 800;
  box-shadow: var(--shadow-violet);
}

/* ---- badge / verified pill ---- */
#mainContent .prf-badge {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: var(--rad-sm);
  padding: 3px 8px;
}

/* ---- tier section ---- */
#mainContent .prf-tier-header,
#mainContent .prf-recent-header span,
#mainContent .prf-lib-header,
#mainContent .prf-sec-header,
#mainContent .prf-settings-title,
#mainContent .prf-danger-title,
#mainContent .prf-plan-access-title {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
#mainContent .prf-tier-name {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; font-size: 26px; line-height: 1;
}
#mainContent .prf-tier-desc { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
#mainContent .prf-tier-expiry { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
#mainContent .prf-tier-expiry span { color: var(--amber); }

/* ---- stats strip: display-font numerals, gridline gaps ---- */
#mainContent .prf-stats-strip {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden;
}
#mainContent .prf-stat-cell { background: var(--bg-1); }
#mainContent .prf-stat-number {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  font-size: 24px; color: var(--ink);
}
#mainContent .prf-stat-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
#mainContent .prf-stat-sub { font-family: var(--font-mono); font-size: 10px; }

/* ---- recent activity ---- */
#mainContent .prf-recent-viewall {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--violet-ink); letter-spacing: 0.04em;
}
#mainContent .prf-recent-row { border-bottom: 1px solid var(--line); }

/* ---- library tab ---- */
#mainContent .prf-lib-export-bar button {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--line-2); color: var(--ink-3);
  border-radius: var(--rad-sm); padding: 5px 12px;
  transition: color .14s ease, border-color .14s ease;
}
#mainContent .prf-lib-export-bar button:hover {
  color: var(--violet-ink); border-color: var(--violet);
}
#mainContent .prf-lib-row { border-bottom: 1px solid var(--line); }
#mainContent .prf-lib-row:nth-child(odd) { background: var(--bg-1); }
#mainContent .prf-lib-row:nth-child(even) { background: var(--bg-2); }
#mainContent .prf-lib-row:hover { background: var(--bg-3); }
#mainContent .prf-lib-id { color: var(--violet-ink); }
#mainContent .prf-lib-title { color: var(--ink); }
#mainContent .prf-lib-date { color: var(--ink-4); }
#mainContent .prf-lib-sev,
#mainContent .prf-lib-det-type {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em;
  border-radius: var(--rad-sm);
}
#mainContent .prf-lib-remove {
  font-family: var(--font-mono); border: 1px solid var(--line-2);
  color: var(--ink-3); border-radius: var(--rad-sm);
  transition: color .14s ease, border-color .14s ease;
}
#mainContent .prf-lib-remove:hover { color: var(--rose); border-color: var(--rose); }

/* ---- activity tab ---- */
#mainContent .prf-act-filter-select {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  padding: 6px 10px;
}
#mainContent .prf-act-filter-select:focus { outline: none; border-color: var(--violet); }
#mainContent .prf-act-row { border-bottom: 1px solid var(--line); }
#mainContent .prf-act-row:nth-child(odd) { background: var(--bg-1); }
#mainContent .prf-act-row:nth-child(even) { background: var(--bg-2); }
#mainContent .prf-act-dot { border-radius: 1px; }
#mainContent .prf-act-type { color: var(--ink); }
#mainContent .prf-act-target { color: var(--violet-ink); }
#mainContent .prf-act-geo,
#mainContent .prf-act-time { color: var(--ink-4); }
#mainContent .prf-act-more {
  font-family: var(--font-mono); border: 1px solid var(--line-2);
  color: var(--ink-3); border-radius: var(--rad-sm);
  transition: color .14s ease, border-color .14s ease;
}
#mainContent .prf-act-more:hover { color: var(--violet-ink); border-color: var(--violet); }

/* ---- security / sessions ---- */
#mainContent .prf-sec-card-current {
  border-color: color-mix(in srgb, var(--mint) 42%, transparent);
}
#mainContent .prf-sec-device { font-family: var(--font-mono); color: var(--ink); }
#mainContent .prf-sec-current {
  font-family: var(--font-mono); color: var(--mint);
  border: 1px solid var(--mint); border-radius: var(--rad-sm);
  letter-spacing: 0.08em;
}
#mainContent .prf-sec-detail-label { color: var(--ink-3); }
#mainContent .prf-sec-detail-value { color: var(--ink); }
#mainContent .prf-sec-revoke {
  font-family: var(--font-mono); color: var(--rose);
  border: 1px solid color-mix(in srgb, var(--rose) 42%, transparent);
  border-radius: var(--rad-sm); transition: background .14s ease, border-color .14s ease;
}
#mainContent .prf-sec-revoke:hover {
  background: var(--sev-critical-tint); border-color: var(--rose);
}

/* ---- settings / inputs ---- */
#mainContent .prf-input,
#mainContent .prf-textarea {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--rad-sm); transition: border-color .14s ease, box-shadow .14s ease;
}
#mainContent .prf-input:focus,
#mainContent .prf-textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-tint);
}
#mainContent .prf-input::placeholder,
#mainContent .prf-textarea::placeholder { color: var(--ink-4); }
#mainContent .prf-input-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); }
#mainContent .prf-save-btn {
  font-family: var(--font-mono); color: var(--violet-ink);
  border: 1px solid var(--violet); border-radius: var(--rad-sm);
  transition: background .14s ease;
}
#mainContent .prf-save-btn:hover { background: var(--violet-tint); }
#mainContent .prf-msg-ok { color: var(--mint); }
#mainContent .prf-msg-err { color: var(--rose); }

/* ---- danger zone ---- */
#mainContent .prf-danger {
  background: var(--bg-1);
  border: 1px solid color-mix(in srgb, var(--rose) 30%, var(--line));
  border-radius: var(--rad);
}
#mainContent .prf-danger-title { color: var(--rose); }
#mainContent .prf-danger-btn {
  font-family: var(--font-mono); color: var(--rose);
  border: 1px solid var(--rose); border-radius: var(--rad-sm);
  transition: background .14s ease;
}
#mainContent .prf-danger-btn:hover { background: var(--sev-critical-tint); }

/* ---- plan / billing ---- */
#mainContent .prf-plan-card-popular { border-color: color-mix(in srgb, var(--violet) 42%, transparent); }
#mainContent .prf-plan-card-active { border-color: color-mix(in srgb, var(--mint) 42%, transparent); }
#mainContent .prf-plan-popular-badge {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: #fff; background: var(--violet-deep);
  border-radius: 0 0 var(--rad-sm) 0; top: -1px;
}
#mainContent .prf-plan-tier {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 19px;
}
#mainContent .prf-plan-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
#mainContent .prf-plan-price {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink);
}
#mainContent .prf-plan-price span { font-family: var(--font-mono); font-weight: 400; color: var(--ink-3); }
#mainContent .prf-plan-features li { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
#mainContent .prf-plan-features li::before { color: var(--violet-ink); }
#mainContent .prf-plan-btn,
#mainContent .prf-plan-manage {
  font-family: var(--font-mono); color: var(--violet-ink);
  border: 1px solid var(--violet); border-radius: var(--rad-sm);
  transition: background .14s ease;
}
#mainContent .prf-plan-btn:hover,
#mainContent .prf-plan-manage:hover { background: var(--violet-tint); }
#mainContent .prf-plan-btn-rose { color: var(--rose); border-color: var(--rose); }
#mainContent .prf-plan-btn-rose:hover { background: var(--sev-critical-tint); }
#mainContent .prf-plan-status {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  border-radius: var(--rad-sm);
}
#mainContent .prf-plan-renewal,
#mainContent .prf-plan-msg { font-family: var(--font-mono); }
#mainContent .prf-plan-renewal { color: var(--ink-3); }
#mainContent .prf-plan-current > div:first-child { color: var(--ink-3); }

/* ============================================================
   LIGHT MODE — out-specify inline [data-theme="light"] .prf-*
   ============================================================ */
[data-theme="light"] #mainContent .prf-header,
[data-theme="light"] #mainContent .prf-tabs,
[data-theme="light"] #mainContent .prf-row,
[data-theme="light"] #mainContent .prf-recent-row,
[data-theme="light"] #mainContent .prf-lib-row,
[data-theme="light"] #mainContent .prf-act-row { border-color: var(--line); }
[data-theme="light"] #mainContent .prf-title,
[data-theme="light"] #mainContent .prf-label,
[data-theme="light"] #mainContent .prf-tier-header,
[data-theme="light"] #mainContent .prf-lib-header,
[data-theme="light"] #mainContent .prf-sec-header,
[data-theme="light"] #mainContent .prf-settings-title,
[data-theme="light"] #mainContent .prf-plan-access-title,
[data-theme="light"] #mainContent .prf-input-label,
[data-theme="light"] #mainContent .prf-plan-role { color: var(--ink-3); }
[data-theme="light"] #mainContent .prf-tab { color: var(--ink-3); }
[data-theme="light"] #mainContent .prf-tab:hover { color: var(--ink); }
[data-theme="light"] #mainContent .prf-tab.active { color: var(--violet); border-bottom-color: var(--violet); }
[data-theme="light"] #mainContent .prf-card,
[data-theme="light"] #mainContent .prf-tier-section,
[data-theme="light"] #mainContent .prf-recent-section,
[data-theme="light"] #mainContent .prf-settings-card,
[data-theme="light"] #mainContent .prf-sec-card,
[data-theme="light"] #mainContent .prf-plan-card,
[data-theme="light"] #mainContent .prf-plan-current,
[data-theme="light"] #mainContent .prf-plan-access-code,
[data-theme="light"] #mainContent .prf-lib-empty,
[data-theme="light"] #mainContent .prf-act-empty,
[data-theme="light"] #mainContent .prf-sec-empty { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] #mainContent .prf-stats-strip { background: var(--line); border-color: var(--line); }
[data-theme="light"] #mainContent .prf-stat-cell { background: var(--bg-1); }
[data-theme="light"] #mainContent .prf-stat-number,
[data-theme="light"] #mainContent .prf-value,
[data-theme="light"] #mainContent .prf-tier-name,
[data-theme="light"] #mainContent .prf-lib-title,
[data-theme="light"] #mainContent .prf-act-type,
[data-theme="light"] #mainContent .prf-sec-device,
[data-theme="light"] #mainContent .prf-sec-detail-value,
[data-theme="light"] #mainContent .prf-plan-price { color: var(--ink); }
[data-theme="light"] #mainContent .prf-lib-row:nth-child(odd) { background: var(--bg-1); }
[data-theme="light"] #mainContent .prf-lib-row:nth-child(even) { background: var(--bg-2); }
[data-theme="light"] #mainContent .prf-lib-row:hover { background: var(--bg-3); }
[data-theme="light"] #mainContent .prf-act-row:nth-child(odd) { background: var(--bg-1); }
[data-theme="light"] #mainContent .prf-act-row:nth-child(even) { background: var(--bg-2); }
[data-theme="light"] #mainContent .prf-lib-id,
[data-theme="light"] #mainContent .prf-act-target,
[data-theme="light"] #mainContent .prf-recent-viewall { color: var(--violet); }
[data-theme="light"] #mainContent .prf-input,
[data-theme="light"] #mainContent .prf-textarea { background: var(--bg-1); border-color: var(--line-2); color: var(--ink); }
[data-theme="light"] #mainContent .prf-input:focus,
[data-theme="light"] #mainContent .prf-textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
[data-theme="light"] #mainContent .prf-input::placeholder,
[data-theme="light"] #mainContent .prf-textarea::placeholder { color: var(--ink-4); }
[data-theme="light"] #mainContent .prf-act-filter-select { background: var(--bg-1); border-color: var(--line-2); color: var(--ink); }
[data-theme="light"] #mainContent .prf-save-btn,
[data-theme="light"] #mainContent .prf-plan-btn,
[data-theme="light"] #mainContent .prf-plan-manage { color: var(--violet); border-color: var(--violet); }
[data-theme="light"] #mainContent .prf-save-btn:hover,
[data-theme="light"] #mainContent .prf-plan-btn:hover,
[data-theme="light"] #mainContent .prf-plan-manage:hover { background: var(--violet-tint); }
[data-theme="light"] #mainContent .prf-lib-export-bar button { border-color: var(--line-2); color: var(--ink-3); }
[data-theme="light"] #mainContent .prf-lib-export-bar button:hover { color: var(--violet); border-color: var(--violet); }
[data-theme="light"] #mainContent .prf-act-more { border-color: var(--line-2); }
[data-theme="light"] #mainContent .prf-act-more:hover { color: var(--violet); border-color: var(--violet); }
[data-theme="light"] #mainContent .prf-lib-remove { border-color: var(--line-2); color: var(--ink-3); }
[data-theme="light"] #mainContent .prf-lib-remove:hover,
[data-theme="light"] #mainContent .prf-msg-err,
[data-theme="light"] #mainContent .prf-danger-title { color: var(--rose); }
[data-theme="light"] #mainContent .prf-lib-remove:hover { border-color: var(--rose); }
[data-theme="light"] #mainContent .prf-danger { border-color: color-mix(in srgb, var(--rose) 30%, var(--line)); }
[data-theme="light"] #mainContent .prf-danger-btn,
[data-theme="light"] #mainContent .prf-sec-revoke,
[data-theme="light"] #mainContent .prf-plan-btn-rose { color: var(--rose); border-color: var(--rose); }
[data-theme="light"] #mainContent .prf-danger-btn:hover,
[data-theme="light"] #mainContent .prf-sec-revoke:hover,
[data-theme="light"] #mainContent .prf-plan-btn-rose:hover { background: var(--sev-critical-tint); }
[data-theme="light"] #mainContent .prf-msg-ok { color: var(--mint); }
[data-theme="light"] #mainContent .prf-plan-popular-badge { background: var(--violet-deep); color: #fff; }
[data-theme="light"] #mainContent .prf-plan-features li { color: var(--ink-2); }
[data-theme="light"] #mainContent .prf-plan-features li::before { color: var(--violet); }
[data-theme="light"] #mainContent .prf-tier-expiry span { color: var(--amber); }

/* ============================================================
   MOBILE — no horizontal overflow on phones
   ============================================================ */
@media (max-width: 1000px) {
  #mainContent .prf-container { max-width: 100%; padding: 36px 22px 56px; }
}

@media (max-width: 768px) {
  #mainContent .prf-container { padding: 24px 14px 48px; }
  #mainContent .prf-card,
  #mainContent .prf-settings-card,
  #mainContent .prf-tier-section,
  #mainContent .prf-danger,
  #mainContent .prf-recent-section,
  #mainContent .prf-plan-current,
  #mainContent .prf-plan-access-code,
  #mainContent .prf-sec-card { padding: 16px; }
  #mainContent .prf-plan-grid { grid-template-columns: 1fr; }
  #mainContent .prf-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  #mainContent .prf-tab { padding: 9px 11px; font-size: 11px; }
  #mainContent .prf-stats-strip { grid-template-columns: repeat(2, 1fr); }
  #mainContent .prf-stat-number { font-size: 21px; }
  #mainContent .prf-tier-name { font-size: 22px; }
  #mainContent .prf-lib-row { flex-wrap: wrap; gap: 6px; }
  #mainContent .prf-lib-id { min-width: 0; }
  #mainContent .prf-lib-title { flex: 1 1 100%; }
  #mainContent .prf-act-geo { display: none; }
  #mainContent .prf-act-type { min-width: 96px; }
  #mainContent .prf-sec-card-details { grid-template-columns: 1fr; }
  #mainContent .prf-plan-access-code > div[style] { flex-wrap: wrap; }
  #mainContent .prf-plan-access-code .prf-input { max-width: 100% !important; flex: 1 1 100%; }
}

@media (max-width: 480px) {
  #mainContent .prf-container { padding: 18px 10px 44px; }
  #mainContent .prf-tabs .prf-tab {
    padding: 8px 10px; font-size: 10.5px;
    min-height: 44px; display: inline-flex; align-items: center;
  }
  #mainContent .prf-card,
  #mainContent .prf-settings-card,
  #mainContent .prf-tier-section,
  #mainContent .prf-danger,
  #mainContent .prf-recent-section,
  #mainContent .prf-plan-current,
  #mainContent .prf-plan-access-code,
  #mainContent .prf-sec-card { padding: 13px; }
  #mainContent .prf-input,
  #mainContent .prf-textarea,
  #mainContent .prf-act-filter-select { font-size: 16px; } /* prevent iOS zoom */
  #mainContent .prf-stats-strip { grid-template-columns: repeat(2, 1fr); }
  #mainContent .prf-stat-number { font-size: 19px; }
  #mainContent .prf-value { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mainContent .prf-row { flex-wrap: wrap; gap: 4px; }
  #mainContent .prf-lib-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  #mainContent .prf-act-row { flex-wrap: wrap; }
  #mainContent .prf-act-type { min-width: 80px; }
  #mainContent .prf-sec-card-top { flex-wrap: wrap; gap: 8px; }
  #mainContent .prf-act-filters { flex-wrap: wrap; gap: 8px; }
  #mainContent #prfApiKeyValue { letter-spacing: 0 !important; }
}

/* ---- page-admin.js  [adm-] ---- */
/* =====================================================================
   SIGNAL POLISH — ADMIN DASHBOARD (page-admin.js, adm-* prefix)
   Appended last; every selector scoped to .adm-* / admin page so it
   cannot leak. Re-skins all 12 tabs onto Signal tokens (violet accent,
   Bricolage titles, mono eyebrows, token surfaces, --rad corners) and
   adds full mobile responsiveness. Pure design — no JS/logic changes.
   ===================================================================== */

/* ---------- Container / header ---------- */
.adm-container { max-width: var(--maxw, 1320px); }
.adm-header {
  border-bottom: 1px solid var(--line);
}
.adm-title {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--violet-ink);
}
.adm-subtitle { font-family: var(--font-mono); color: var(--ink-4); }
.adm-user { font-family: var(--font-mono); color: var(--ink-3); }

/* ---------- Stats strip ---------- */
.adm-stats-strip { border-bottom: 1px solid var(--line); }
.adm-stat-val {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.adm-stat-label {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* ---------- Tabs ---------- */
.adm-tabs { border-bottom: 1px solid var(--line); }
.adm-tab {
  font-family: var(--font-mono);
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
}
.adm-tab:hover { color: var(--ink-2); }
.adm-tab.active {
  color: var(--violet-ink);
  border-bottom-color: var(--violet);
}
.adm-tab-new { color: var(--mint); font-style: normal; font-size: 9px; letter-spacing: 0.06em; }

/* ---------- Loading / empty ---------- */
.adm-loading, .adm-empty, .adm-muted { font-family: var(--font-mono); color: var(--ink-3); }
.adm-loading, .adm-empty { color: var(--ink-4); }

/* ---------- Search / inputs ---------- */
.adm-search-input,
.adm-note-input,
.adm-fb-note-input,
.adm-filter-select,
.adm-bulk-tier-select,
.adm-select,
.adm-delete-input,
.adm-uam-filters select {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: var(--rad);
}
.adm-search-input:focus,
.adm-note-input:focus,
.adm-fb-note-input:focus,
.adm-filter-select:focus,
.adm-bulk-tier-select:focus,
.adm-select:focus,
.adm-delete-input:focus,
.adm-uam-filters select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-tint);
  outline: none;
}

/* ---------- Section eyebrows ---------- */
.adm-section-title,
.adm-content-section-title,
.adm-unv-section-title,
.adm-geo-section-title,
.adm-uam-card h3 {
  font-family: var(--font-mono);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

/* ---------- Tables ---------- */
.adm-table { border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.adm-table-header {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.adm-user-row, .adm-session-row, .adm-wl-row, .adm-activity-row {
  border-bottom: 1px solid var(--line);
}
.adm-user-row:nth-child(4n+1),
.adm-session-row:nth-child(odd),
.adm-wl-row:nth-child(odd),
.adm-activity-row:nth-child(odd) { background: var(--bg-1); }
.adm-user-row:nth-child(4n+3),
.adm-session-row:nth-child(even),
.adm-wl-row:nth-child(even),
.adm-activity-row:nth-child(even) { background: var(--bg-2); }
.adm-user-row:hover,
.adm-session-row:hover,
.adm-wl-row:hover,
.adm-activity-row:hover { background: var(--bg-3); }
.adm-user-row.adm-row-expanded,
.adm-session-row.adm-row-expanded {
  background: var(--bg-3);
  border-left: 2px solid var(--violet);
}
.adm-user-email, .adm-session-user, .adm-wl-email, .adm-activity-user { font-family: var(--font-mono); }
.adm-pagination, .adm-page-info { font-family: var(--font-mono); color: var(--ink-4); }

/* status / badges */
.adm-verified, .adm-status-active { color: var(--mint); }
.adm-unverified, .adm-status-suspended, .adm-admin-badge { color: var(--rose); }
.adm-lib-badge, .adm-lib-type { color: var(--violet-ink); }
.adm-copy-badge { color: var(--mint); }
.adm-converted { color: var(--mint); }
.adm-pending { color: var(--ink-3); }

/* tier select */
.adm-tier-select, .adm-session-tier {
  font-family: var(--font-mono);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--rad-sm);
}
.adm-tier-select:focus { border-color: var(--violet); outline: none; }

/* ---------- Action buttons ---------- */
.adm-action-btn {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  border-radius: var(--rad);
  transition: border-color .13s, color .13s, background .13s;
}
.adm-action-btn:hover {
  border-color: var(--violet);
  color: var(--violet-ink);
  background: var(--violet-tint);
}
.adm-suspend-btn:hover, .adm-delete-btn:hover, .adm-confirm-yes:hover { border-color: var(--rose); color: var(--rose); background: var(--sev-critical-tint); }
.adm-activate-btn:hover { border-color: var(--mint); color: var(--mint); background: var(--sev-low-tint); }
.adm-revoke-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--sev-high-tint); }
.adm-note-btn:hover, .adm-verify-btn:hover { border-color: var(--violet); color: var(--violet-ink); }
.adm-sort-btn {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  border-radius: var(--rad-sm);
}
.adm-sort-btn:hover { border-color: var(--violet); color: var(--violet-ink); }

/* bulk bar */
.adm-bulk-bar {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}
.adm-bulk-count { font-family: var(--font-mono); color: var(--ink-2); }
.adm-delete-confirm { font-family: var(--font-mono); color: var(--ink-2); }

/* ---------- Expandable detail grid ---------- */
.adm-user-detail, .adm-session-detail, .adm-content-detail {
  background: var(--bg-inset);
  border-top: 1px solid var(--line);
}
.adm-detail-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}
.adm-engagement-big {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--violet-ink);
}
.adm-eng-item {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rad-sm);
  color: var(--ink-3);
}

/* timeline / journey */
.adm-timeline-time, .adm-journey-date { font-family: var(--font-mono); color: var(--ink-4); }
.adm-timeline-type, .adm-journey-desc { color: var(--ink-2); }
.adm-timeline-target, .adm-timeline-meta { color: var(--ink-3); }
.adm-journey-line { background: var(--line-2); }

/* lib / sessions / notes */
.adm-lib-item, .adm-detail-session { font-family: var(--font-mono); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.adm-note-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-note-admin { color: var(--violet-ink); font-family: var(--font-mono); }
.adm-note-time { font-family: var(--font-mono); color: var(--ink-4); }
.adm-note-text { color: var(--ink-2); }

/* saved feeds / tlql */
.adm-feed-row, .adm-tlql-row { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-feed-row:hover, .adm-tlql-row:hover { border-color: var(--violet); }
.adm-feed-name { font-family: var(--font-mono); color: var(--ink); }
.adm-feed-time, .adm-tlql-time { font-family: var(--font-mono); color: var(--ink-4); }
.adm-feed-summary, .adm-tlql-query { font-family: var(--font-mono); color: var(--ink-3); }
.adm-feed-raw { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad); color: var(--ink-2); }
.adm-tlql-ok { background: var(--mint); }
.adm-tlql-fail { background: var(--rose); }
.adm-tlql-results { color: var(--mint); font-family: var(--font-mono); }
.adm-tlql-copied { color: var(--violet-ink) !important; }

/* ---------- Bar charts ---------- */
.adm-bar-label { font-family: var(--font-mono); color: var(--ink-2); }
.adm-bar-track { background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.adm-bar-fill { border-radius: 99px; }
.adm-bar-val { font-family: var(--font-mono); color: var(--ink-3); }
.adm-adopt-label { font-family: var(--font-mono); color: var(--ink-2); }
.adm-adopt-track { background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.adm-adopt-fill { border-radius: 99px; }
.adm-adopt-val { font-family: var(--font-mono); color: var(--ink-3); }

/* power users */
.adm-pwr-email { font-family: var(--font-mono); color: var(--ink-2); }

/* ---------- Heatstrip / heat cells ---------- */
.adm-heat-cell { font-family: var(--font-mono); color: var(--ink-4); border-radius: var(--rad-sm); }
.adm-uam-heat-cell { background: var(--bg-3); border-radius: 2px; }
.adm-uam-heat-day { font-family: var(--font-mono); color: var(--ink-4); }

/* ---------- Sparkline ---------- */
.adm-sparkline polyline { stroke: var(--violet) !important; }
.adm-uam-spark-humans { background: var(--violet); }
.adm-uam-spark-bots { background: var(--line-3); }
.adm-uam-legend-humans { background: var(--violet); }
.adm-uam-legend-bots { background: var(--line-3); }
.adm-uam-spark-legend { font-family: var(--font-mono); color: var(--ink-3); }

/* ---------- Daily chart ---------- */
.adm-chart-bar { background: var(--violet); border-radius: var(--rad-sm) var(--rad-sm) 0 0; }
.adm-chart-label { font-family: var(--font-mono); color: var(--ink-4); }

/* ---------- Funnel ---------- */
.adm-funnel-bar { background: var(--violet); border-radius: var(--rad-sm); }
.adm-funnel-label { font-family: var(--font-mono); color: var(--ink-2); }
.adm-funnel-val { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.adm-funnel-rate { font-family: var(--font-mono); color: var(--mint); }

/* ---------- Leaderboard ---------- */
.adm-lb-header { font-family: var(--font-mono); color: var(--ink-3); border-bottom: 1px solid var(--line); letter-spacing: 0.04em; }
.adm-lb-row { border-bottom: 1px solid var(--line); }
.adm-lb-row:nth-child(odd) { background: var(--bg-1); }
.adm-lb-row:nth-child(even) { background: var(--bg-2); }
.adm-lb-row:hover { background: var(--bg-3); }
.adm-lb-rank { font-family: var(--font-mono); color: var(--ink-4); }
.adm-lb-id { font-family: var(--font-mono); }
.adm-lb-title { color: var(--ink); }
.adm-lb-views, .adm-lb-copies, .adm-lb-saves { font-family: var(--font-mono); color: var(--ink-3); }

/* content viewers */
.adm-content-viewer { border-bottom: 1px solid var(--line); }
.adm-content-viewer-email { font-family: var(--font-mono); color: var(--ink-2); }
.adm-content-viewer-time { font-family: var(--font-mono); color: var(--ink-4); }
.adm-content-viewer-type { font-family: var(--font-mono); border-radius: var(--rad-sm); }

/* ---------- Retention cohort ---------- */
.adm-ret-table { font-family: var(--font-mono); }
.adm-ret-table th { color: var(--ink-3); border-bottom: 1px solid var(--line); letter-spacing: 0.04em; }
.adm-ret-week, .adm-ret-size { color: var(--ink-2); }
.adm-ret-cell { color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--rad-sm); }

/* ---------- Anomalies ---------- */
.adm-anomaly-section { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-anomaly-header { font-family: var(--font-mono); color: var(--ink-2); }
.adm-anomaly-count { font-family: var(--font-mono); color: var(--rose); }
.adm-anomaly-clear { font-family: var(--font-mono); color: var(--mint); }
.adm-anomaly-email { font-family: var(--font-mono); color: var(--ink-2); }
.adm-anomaly-detail { font-family: var(--font-mono); color: var(--ink-3); }
.adm-anomaly-row { border-bottom: 1px solid var(--line); }

/* ---------- Platform / system ---------- */
.adm-platform-stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-platform-stat .adm-stat-val { font-family: var(--font-display); }
.adm-email-row { border-bottom: 1px solid var(--line); }
.adm-email-time, .adm-email-geo { font-family: var(--font-mono); color: var(--ink-4); }
.adm-email-user { font-family: var(--font-mono); color: var(--ink-2); }
.adm-email-type { font-family: var(--font-mono); color: var(--ink-3); }

/* tracking coverage */
.adm-tracking-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad-sm); }
.adm-tracking-item.gap { border-color: var(--rose); }
.adm-tracking-type { font-family: var(--font-mono); color: var(--ink-2); }
.adm-tracking-cnt { font-family: var(--font-mono); color: var(--violet-ink); }

/* ---------- Geo ---------- */
.adm-geo-section { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-geo-city-row { border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
.adm-geo-city-name { color: var(--ink); }
.adm-geo-city-country { color: var(--ink-4); }
.adm-geo-city-cnt { color: var(--violet-ink); }
.adm-geo-device { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-geo-device-name { font-family: var(--font-mono); color: var(--ink-3); }
.adm-geo-device-cnt { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Unverified ---------- */
.adm-unv-row { border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
.adm-unv-row:nth-child(even) { background: var(--bg-1); }
.adm-unv-email { color: var(--ink); }
.adm-unv-date, .adm-unv-attempt, .adm-unv-status { color: var(--ink-3); }
.adm-unv-age.ok { color: var(--mint); }
.adm-unv-age.warning { color: var(--amber); }
.adm-unv-age.urgent { color: var(--rose); }

/* ---------- Flow breadcrumb ---------- */
.adm-flow-breadcrumb { font-family: var(--font-mono); }
.adm-flow-step { color: var(--violet-ink); background: var(--violet-tint); border-radius: var(--rad-sm); }
.adm-flow-arrow { color: var(--ink-4); }

/* ---------- Feedback tab ---------- */
.adm-fb-pill {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  border-radius: var(--rad);
}
.adm-fb-pill:hover { color: var(--ink-2); border-color: var(--line-3); }
.adm-fb-pill.active { color: var(--violet-ink); border-color: var(--violet); background: var(--violet-tint); }
.adm-fb-pill-count { font-family: var(--font-mono); color: var(--ink-4); }
.adm-fb-row { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-fb-date { font-family: var(--font-mono); color: var(--ink-4); }
.adm-fb-name { font-family: var(--font-mono); color: var(--ink-2); }
.adm-fb-threat { font-family: var(--font-mono); color: var(--violet-ink); }
.adm-fb-threat-title { color: var(--ink-3); }
.adm-fb-content { color: var(--ink-2); }
.adm-fb-notes { font-family: var(--font-mono); color: var(--ink-3); }
.adm-fb-status-pending { color: var(--amber); }
.adm-fb-status-approved { color: var(--mint); }
.adm-fb-status-rejected { color: var(--rose); }

/* ---------- UAM (unauth metrics) tab ---------- */
.adm-uam-filters { font-family: var(--font-mono); color: var(--ink-3); }
.adm-uam-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-uam-chip { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); }
.adm-uam-chip-v { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; color: var(--violet-ink); }
.adm-uam-chip-l { font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.08em; }
.adm-uam-list, .adm-uam-pages { font-family: var(--font-mono); }
.adm-uam-pages th { color: var(--ink-3); border-bottom: 1px solid var(--line); letter-spacing: 0.04em; }
.adm-uam-pages td, .adm-uam-list td { border-bottom: 1px solid var(--line); }
.adm-uam-rank { color: var(--ink-4); }
.adm-uam-host, .adm-uam-path { color: var(--ink-2); }
.adm-uam-cnt { color: var(--violet-ink); }
.adm-uam-cat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad-sm); }
.adm-uam-cat-l { color: var(--ink-3); }
.adm-uam-cat-v { color: var(--ink); }
.adm-uam-tag { font-family: var(--font-mono); border: 1px solid var(--line-2); border-radius: var(--rad-sm); color: var(--ink-3); }
.adm-uam-subhead { font-family: var(--font-mono); color: var(--ink-3); }
.adm-uam-pct-row { font-family: var(--font-mono); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.adm-uam-bot-name { color: var(--violet-ink); }
.adm-uam-velocity { color: var(--mint); }
.adm-uam-trending-head { font-family: var(--font-mono); color: var(--ink-2); }
.adm-uam-muted, .adm-uam-empty { font-family: var(--font-mono); color: var(--ink-4); }
.adm-uam-err { font-family: var(--font-mono); color: var(--rose); }
.adm-uam-funnel-note, .adm-uam-funnel-signups { font-family: var(--font-mono); color: var(--ink-3); }
.adm-uam-funnel-signups strong { color: var(--violet-ink); }

/* ---------- Onboarding tab ---------- */
.adm-onboard-card { background: var(--bg-1) !important; border: 1px solid var(--line) !important; border-radius: var(--rad); }

/* =====================================================================
   MOBILE — eliminate horizontal overflow; collapse grids; stack tables
   ===================================================================== */
@media (max-width: 1000px) {
  .adm-container { padding: 0 16px 32px; }
  .adm-analytics-grid,
  .adm-geo-grid,
  .adm-detail-grid,
  .adm-uam-grid { grid-template-columns: 1fr; }
  .adm-analytics-wide,
  .adm-detail-wide,
  .adm-uam-card-wide { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .adm-container { padding: 0 12px 24px; }
  .adm-header { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* stats strip: wrap into a tidy row of chips */
  .adm-stats-strip { gap: 14px 18px; }
  .adm-stat-val { font-size: 18px; }

  /* tabs: horizontal scroll, never wrap/overflow the page */
  .adm-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: thin;
  }
  .adm-tabs::-webkit-scrollbar { height: 3px; }
  .adm-tabs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
  .adm-tab { flex-shrink: 0; font-size: 11px; padding: 8px 11px; }

  /* tables: allow horizontal scroll containers, shrink type */
  .adm-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-table-header,
  .adm-session-row, .adm-wl-row, .adm-activity-row { font-size: 10px; }

  /* user rows → stacked cards so nothing overflows */
  .adm-user-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
  }
  .adm-user-row > * { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; }
  .adm-user-row .adm-user-col { padding: 0; }
  .adm-table > .adm-table-header:first-child { display: none; } /* header meaningless once stacked */
  .adm-user-email { font-size: 12px; word-break: break-all; }
  .adm-user-actions { text-align: left; display: flex; flex-wrap: wrap; gap: 6px; }
  .adm-user-check { display: none; }

  /* drop low-priority columns on wide tables */
  .adm-user-active, .adm-user-created, .adm-user-lib { display: none; }
  .adm-session-ip, .adm-session-device, .adm-session-country { display: none; }
  .adm-activity-geo { display: none; }

  /* analytics widgets fit + scroll where needed */
  .adm-platform-grid { grid-template-columns: 1fr 1fr; }
  .adm-heatstrip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-uam-heat-wrap, .adm-uam-spark-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-sparkline { width: 100%; height: auto; }
  .adm-ret-table, .adm-uam-pages, .adm-uam-list { font-size: 10px; }

  /* unstick / un-cap rails inside detail */
  .adm-feed, .adm-detail-timeline { max-height: none; }

  /* filters wrap */
  .adm-activity-filters, .adm-uam-filters, .adm-fb-bar, .adm-bulk-bar { flex-wrap: wrap; }
  .adm-bulk-bar { gap: 8px; }

  /* detail grid + forms stack */
  .adm-detail-grid { gap: 12px; padding: 12px; }
  .adm-feed-row, .adm-tlql-row { padding: 8px; }
  .adm-feed-summary, .adm-tlql-query { font-size: 10px; word-break: break-word; }
  .adm-feed-actions { flex-wrap: wrap; }
  .adm-note-form { flex-direction: column; align-items: stretch; gap: 6px; }

  /* iOS anti-zoom on inputs */
  .adm-search-input,
  .adm-note-input,
  .adm-fb-note-input,
  .adm-delete-input { width: 100%; font-size: 16px; }

  /* onboarding inline-styled grids collapse */
  .adm-onboard-card [style*="grid-template-columns: 1fr 1fr 1fr"],
  .adm-onboard-card [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .adm-stats-strip { gap: 10px 14px; }
  .adm-stat-chip { min-width: calc(33.333% - 14px); }
  .adm-stat-val { font-size: 16px; }
  .adm-tab { padding: 7px 8px; font-size: 10px; }
  .adm-platform-grid { grid-template-columns: 1fr; }
  .adm-bar-label, .adm-adopt-label { min-width: 64px; font-size: 9px; }
  .adm-pwr-email { min-width: 90px; }
  .adm-uam-chips { grid-template-columns: 1fr 1fr; }
  .adm-detail-grid { padding: 10px; }
  .adm-section-title { font-size: 11px; }
}

/* ---- page-debriefs.js  [db-] ---- */
/* ============================================================
   DAILY DEBRIEFS (db-*) — SIGNAL POLISH + MOBILE
   All selectors scoped under .db-page (page root) so they
   override the JS-injected baseline without !important and
   cannot leak to other pages.
   ============================================================ */

/* --- Page shell --- */
.db-page { font-family: var(--font-sans); color: var(--ink-2); }

/* --- Boot / loading --- */
.db-page .db-boot { color: var(--ink-3); }
.db-page .db-boot-blink { color: var(--mint); }

/* --- Error state --- */
.db-page .db-error-icon { color: var(--rose); }
.db-page .db-error-label { color: var(--rose); }
.db-page .db-error-msg { color: var(--ink-3); }
.db-page .db-retry-btn {
    color: var(--ink-2);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    transition: border-color .15s ease, color .15s ease;
}
.db-page .db-retry-btn:hover { color: var(--ink); border-color: var(--violet); }

/* --- Empty state --- */
.db-page .db-empty-sigil { color: var(--ink-4); }
.db-page .db-empty-label { color: var(--ink-3); }
.db-page .db-empty-msg { color: var(--ink-3); }

/* ============================================================
   HEADER
   ============================================================ */
.db-page .db-header { border-bottom: 1px solid var(--line); }
.db-page .db-header-classification { color: var(--rose); }
.db-page .db-header-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 30px;
    color: var(--ink);
}
.db-page .db-header-sub { color: var(--ink-3); }
.db-page .db-meta-label { color: var(--ink-3); }
.db-page .db-meta-value { color: var(--ink-2); }

/* Subscribe button -> violet primary action */
.db-page .db-sub-btn {
    color: var(--violet-ink);
    border: 1px solid var(--violet);
    border-radius: var(--rad-sm);
    background: var(--violet-tint);
    transition: background .15s ease, border-color .15s ease;
}
.db-page .db-sub-btn:hover { background: var(--violet-tint-2); border-color: var(--violet-bright); }
.db-page .db-sub-active {
    color: var(--ink-3);
    border-color: var(--line-2);
    background: transparent;
}
.db-page .db-sub-active:hover { background: var(--bg-2); border-color: var(--line-3); }

/* ============================================================
   HEATMAP CALENDAR
   ============================================================ */
.db-page .db-heatmap { border-bottom: 1px solid var(--line); }
.db-page .db-hm-title { color: var(--ink-3); }
.db-page .db-hm-legend-label { color: var(--ink-3); }
.db-page .db-hm-legend-cell { border-radius: 2px; }
/* Violet ramp legend (match data-viz heatmap fills) */
.db-page .db-hm-legend-cell:nth-child(2) { background: var(--bg-3); }
.db-page .db-hm-legend-cell:nth-child(3) { background: color-mix(in srgb, var(--violet) 28%, var(--bg-2)); }
.db-page .db-hm-legend-cell:nth-child(4) { background: color-mix(in srgb, var(--violet) 52%, var(--bg-1)); }
.db-page .db-hm-legend-cell:nth-child(5) { background: var(--violet); }
.db-page .db-hm-legend-cell:nth-child(6) { background: var(--violet-ink); }
.db-page .db-hm-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.db-page .db-hm-svg rect:hover { opacity: .8; stroke: var(--violet-bright); stroke-width: 1; }

/* ============================================================
   AGGREGATE STATS STRIP — Bricolage numerals
   ============================================================ */
.db-page .db-agg-stats {
    border: 1px solid var(--line);
    border-radius: var(--rad);
    overflow: hidden;
    background: var(--line);
    gap: 1px;
}
.db-page .db-agg-cell { background: var(--bg-1); }
.db-page .db-agg-num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.db-page .db-agg-lbl { color: var(--ink-3); }

/* ============================================================
   SPARKLINES
   ============================================================ */
.db-page .db-trend-row { border-bottom: 1px solid var(--line); }
.db-page .db-spark-label { color: var(--ink-3); }

/* ============================================================
   ENRICHMENT BADGES (collapsed header)
   ============================================================ */
.db-page .db-badge { border-radius: var(--rad-sm); }
.db-page .db-badge-sky { color: var(--sky); background: color-mix(in srgb, var(--sky) 14%, transparent); }
.db-page .db-badge-mint { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.db-page .db-badge-peach { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.db-page .db-badge-lavender { color: var(--violet-ink); background: var(--violet-tint); }

.db-page .db-actor-dot {
    background: color-mix(in srgb, var(--rose) 16%, transparent);
    color: var(--rose);
    border-radius: var(--rad-sm);
}
.db-page .db-actor-more { color: var(--ink-3); }
.db-page .db-nation-tag {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border-radius: 2px;
}

.db-page .db-cov-bar { background: var(--bg-inset); border-radius: 2px; }
.db-page .db-cov-fill { background: var(--mint); }

.db-page .db-update-tag {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    border-radius: 2px;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.db-page .db-search-bar { border-bottom: 1px solid var(--line); }
.db-page .db-search-field {
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: var(--rad);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.db-page .db-search-field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.db-page .db-search-prompt { color: var(--violet-ink); }
.db-page .db-search-input { color: var(--ink); }
.db-page .db-search-input::placeholder { color: var(--ink-3); }
.db-page .db-date-field {
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: var(--rad);
}
.db-page .db-date-label { color: var(--ink-3); }
.db-page .db-date-input { color: var(--ink-2); }
.db-page .db-clear-btn {
    color: var(--ink-3);
    border: 1px solid transparent;
    border-radius: var(--rad-sm);
    transition: color .15s ease, border-color .15s ease;
}
.db-page .db-clear-btn:hover { color: var(--ink); border-color: var(--violet); }

/* ============================================================
   NO RESULTS
   ============================================================ */
.db-page .db-no-results-label { color: var(--ink-3); }
.db-page .db-no-results-msg { color: var(--ink-3); }

/* ============================================================
   TIMELINE
   ============================================================ */
.db-page .db-marker-line { background: var(--line); }
.db-page .db-marker-dot { background: var(--ink-4); border: 2px solid var(--line); border-radius: 50%; }
.db-page .db-marker-pulse {
    background: var(--violet);
    border-color: var(--violet);
    box-shadow: 0 0 8px var(--violet-glow);
}
@keyframes dbPulse {
    0%, 100% { box-shadow: 0 0 8px var(--violet-glow); }
    50% { box-shadow: 0 0 18px var(--violet-glow); }
}

.db-page .db-entry-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.db-page .db-entry-card:hover {
    border-color: var(--violet);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.db-page .db-entry-expanded .db-entry-card {
    border-color: var(--line-2);
    transform: none;
}

.db-page .db-entry-header:hover { background: var(--bg-2); }
.db-page .db-entry-date-block { border-right: 1px solid var(--line); }
.db-page .db-entry-day { color: var(--ink-3); }
.db-page .db-entry-monthday { color: var(--ink); }
.db-page .db-entry-year { color: var(--ink-3); }

.db-page .db-latest-tag {
    color: #fff;
    background: var(--violet-deep);
    border-radius: 2px;
}
.db-page .db-entry-title { color: var(--ink); font-weight: 600; }
.db-page .db-theme-chip {
    color: var(--ink-3);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
}
.db-page .db-theme-more { color: var(--ink-3); }

/* Severity bar */
.db-page .db-sev-bar { background: var(--bg-inset); border-radius: 2px; }
.db-page .db-sev-critical { background: var(--sev-critical); }
.db-page .db-sev-high { background: var(--sev-high); }
.db-page .db-sev-medium { background: var(--sev-medium); }
.db-page .db-sev-low { background: var(--sev-low); }
.db-page .db-sev-bar-empty { color: var(--ink-4); }

/* Stats mini */
.db-page .db-stat-threats { color: var(--rose); }
.db-page .db-stat-dets { color: var(--sky); }
.db-page .db-stat-lbl { color: var(--ink-3); }
.db-page .db-stat-num { font-family: var(--font-mono); }

/* Chevron */
.db-page .db-entry-chevron { color: var(--ink-3); }
.db-page .db-entry-header:hover .db-entry-chevron { color: var(--violet-ink); }

/* ============================================================
   EXPANDED BODY
   ============================================================ */
.db-page .db-entry-body { border-top: 1px solid var(--line); background: var(--bg-2); }
.db-page .db-class-notice { background: var(--bg-inset); border-bottom: 1px solid var(--line); }
.db-page .db-class-left { color: var(--ink-4); }
.db-page .db-class-center { color: var(--ink-3); }
.db-page .db-class-right { color: var(--ink-4); }

.db-page .db-stats-row { border-bottom: 1px solid var(--line); }
.db-page .db-stats-cell { border-right: 1px solid var(--line); }
.db-page .db-stats-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.db-page .db-val-threats { color: var(--rose); }
.db-page .db-val-dets { color: var(--sky); }
.db-page .db-val-total { color: var(--ink-2); }
.db-page .db-stats-label { color: var(--ink-3); }

/* Section eyebrows -> mono "// label" in --ink-3 */
.db-page .db-section { border-bottom: 1px solid var(--line); }
.db-page .db-section-title { color: var(--ink-3); font-family: var(--font-mono); }
.db-page .db-section-count { color: var(--ink-4); }

/* MITRE badges */
.db-page .db-mitre-badge {
    color: var(--sky);
    background: color-mix(in srgb, var(--sky) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--sky) 22%, transparent);
    border-radius: var(--rad-sm);
}

/* IOC distribution */
.db-page .db-ioc-bar { background: var(--bg-inset); border-radius: 2px; }
.db-page .db-ioc-fill { border-radius: 2px; }
.db-page .db-ioc-count { color: var(--ink); }

/* Threat attribution cards */
.db-page .db-attr-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.db-page .db-attr-name { color: var(--rose); }
.db-page .db-attr-nation { color: var(--amber); }

/* Detection status */
.db-page .db-det-pct { color: var(--mint); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.db-page .db-det-pct-sign { color: var(--ink-4); }
.db-page .db-det-label { color: var(--ink-3); }
.db-page .db-det-prog { background: var(--bg-inset); border-radius: 3px; overflow: hidden; }
.db-page .db-det-prog-fill { background: var(--mint); }

/* Severity breakdown detail */
.db-page .db-sev-detail-bar { background: var(--bg-inset); border-radius: 2px; }
.db-page .db-sev-detail-count { color: var(--ink); }
.db-page .db-sev-detail-pct { color: var(--ink-3); }

/* Summary / themes / highlights */
.db-page .db-summary-text { color: var(--ink-2); }
.db-page .db-theme-item { border-bottom: 1px solid var(--line); }
.db-page .db-theme-idx { color: var(--violet-ink); font-family: var(--font-mono); }
.db-page .db-theme-text { color: var(--ink); }
.db-page .db-highlight-item { border-bottom: 1px solid var(--line); }
.db-page .db-highlight-marker { color: var(--mint); }
.db-page .db-highlight-text { color: var(--ink-2); }

/* ============================================================
   THREAT INVENTORY
   ============================================================ */
.db-page .db-threat-group-header { border-bottom: 1px solid var(--line); }
.db-page .db-threat-sev-count { color: var(--ink-3); }
.db-page .db-threat-row { border-radius: var(--rad-sm); transition: background .12s ease; }
.db-page .db-threat-row:nth-child(odd) { background: var(--bg-1); }
.db-page .db-threat-row:nth-child(even) { background: var(--bg-2); }
.db-page .db-threat-row:hover { background: var(--violet-tint); }
.db-page .db-threat-id { color: var(--amber); }
.db-page .db-threat-title { color: var(--ink-2); }
.db-page .db-threat-arrow { color: var(--ink-4); }
.db-page .db-threat-row:hover .db-threat-arrow { color: var(--violet-ink); }
.db-page .db-threat-row:hover .db-threat-id { color: var(--violet-ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.db-page .db-entry-footer { border-top: 1px solid var(--line); background: var(--bg-inset); }
.db-page .db-footer-author { color: var(--violet-ink); }
.db-page .db-footer-separator { color: var(--ink-4); }
.db-page .db-footer-date { color: var(--ink-3); }
.db-page .db-footer-end { color: var(--ink-4); }

/* ============================================================
   MOBILE / RESPONSIVE — no horizontal overflow
   ============================================================ */
@media (max-width: 1000px) {
    .db-page .db-agg-stats { grid-template-columns: repeat(3, 1fr); }
    .db-page .db-stats-row { grid-template-columns: repeat(2, 1fr); }
    .db-page .db-stats-cell:nth-child(2) { border-right: none; }
    .db-page .db-stats-cell:nth-child(3),
    .db-page .db-stats-cell:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 768px) {
    .db-page {
        padding: 0 14px 32px;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .db-page .db-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .db-page .db-header-right { align-items: flex-start; flex-direction: row; gap: 16px; flex-wrap: wrap; }
    .db-page .db-header-title { font-size: 24px; }

    /* Heatmap stays in its own contained horizontal scroller */
    .db-page .db-heatmap { overflow: hidden; }
    .db-page .db-hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .db-page .db-hm-header { flex-wrap: wrap; gap: 8px; }

    .db-page .db-agg-stats { grid-template-columns: repeat(3, 1fr); }
    .db-page .db-agg-num { font-size: 22px; }
    .db-page .db-trend-row { grid-template-columns: 1fr; gap: 10px; }

    /* Search row + dates stack full width */
    .db-page .db-search-row { flex-direction: column; align-items: stretch; }
    .db-page .db-search-field { min-width: 0; }
    .db-page .db-date-fields { flex-direction: column; }
    .db-page .db-date-field { width: 100%; box-sizing: border-box; }
    .db-page .db-date-input { width: 100%; box-sizing: border-box; }
    .db-page .db-clear-btn { align-self: flex-start; }

    /* Timeline marker unsticks / hides, card goes full width */
    .db-page .db-entry { flex-direction: column; }
    .db-page .db-entry-marker { display: none; }
    .db-page .db-entry-card { margin-left: 0; }

    /* Collapsed header reflows */
    .db-page .db-entry-header { flex-wrap: wrap; gap: 10px; padding: 12px; position: relative; }
    .db-page .db-entry-date-block { width: auto; padding-right: 10px; }
    .db-page .db-entry-stats-mini {
        width: 100%;
        justify-content: flex-start;
        gap: 24px;
        padding-top: 8px;
        border-top: 1px solid var(--line);
    }
    .db-page .db-entry-chevron { position: absolute; right: 12px; top: 14px; }
    .db-page .db-actor-dots,
    .db-page .db-nation-tags { display: none; }

    /* Expanded body grids collapse */
    .db-page .db-stats-row { grid-template-columns: repeat(2, 1fr); }
    .db-page .db-stats-cell { padding: 12px; }
    .db-page .db-stats-value { font-size: 20px; }
    .db-page .db-class-notice { flex-direction: column; gap: 2px; text-align: center; }
    .db-page .db-det-pct { font-size: 34px; }
    .db-page .db-det-pct-sign { font-size: 18px; }

    /* Threat rows wrap rather than overflow */
    .db-page .db-threat-row { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
    .db-page .db-threat-id { min-width: 0; font-size: 11px; }
    .db-page .db-threat-title { flex: 1 1 100%; white-space: normal; }
    .db-page .db-threat-arrow { display: none; }

    /* IOC + severity detail rows tighten */
    .db-page .db-ioc-label { width: 70px; font-size: 10px; }
    .db-page .db-sev-detail-bar { display: none; }
}

@media (max-width: 480px) {
    .db-page .db-header-title { font-size: 20px; }
    .db-page .db-agg-stats { grid-template-columns: repeat(2, 1fr); }
    .db-page .db-agg-num {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .db-page .db-trend-row { grid-template-columns: 1fr; }
    .db-page .db-stats-row { grid-template-columns: 1fr; }
    .db-page .db-stats-cell { border-right: none; border-bottom: 1px solid var(--line); }
    .db-page .db-stats-cell:last-child { border-bottom: none; }
    .db-page .db-det-pct { font-size: 26px; }
    .db-page .db-det-pct-sign { font-size: 14px; }
    .db-page .db-sub-btn { font-size: 10px; padding: 5px 10px; }
    .db-page .db-entry-title { font-size: 13px; }
    .db-page .db-entry-themes-preview { display: none; }
    .db-page .db-mitre-grid { gap: 4px; }
    .db-page .db-mitre-badge { font-size: 9px; padding: 2px 6px; }
}


/* ============================================================================
   ███  SIGNAL — FEED VIEW (/?view=<uuid>)  ███
   Restyles the saved-feed view to the Signal design system. Scoped entirely to
   .fv-* / .fv-mcp-* / .fv-mod-* / .fv-canvas-* / .fc-tree-* so nothing leaks to
   other pages. Appended after the legacy fv-* blocks AND the Signal token block,
   so equal-specificity rules win by source order. Tokens only — no hardcoded
   colors. Goals: (1) round every card/panel/row/banner/chip/pill/button,
   (2) Bricolage on titles + big numerals / mono on // labels, IDs, code / Inter
   on body, (3) violet accents + --line borders + bg-1/bg-2 surfaces,
   (4) mobile-responsive collapse to 1 column with no horizontal overflow.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. MODULE SECTIONS + TAB BAR  (fv-mod-section / fv-tab-*)
   --------------------------------------------------------------------------- */
.fv-mcp-mount { font-family: var(--font-sans); font-size: 13px; }

.fv-mod-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .14s, box-shadow .14s;
}
.fv-mod-section:hover { border-color: var(--line-2); }
.fv-mod-section.fv-mcp-section-pinned {
  border-color: color-mix(in srgb, var(--violet) 38%, transparent);
  box-shadow: 0 0 0 1px var(--violet-tint), var(--shadow);
}
.fv-mod-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 13px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer; min-height: 0;
}
.fv-mod-head:hover { border-color: var(--line-2); }
.fv-mod-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: 14px; color: var(--violet-ink);
}
.fv-mod-caret { color: var(--ink-4); transition: transform .15s; }
.fv-mod-section.fv-mod-collapsed .fv-mod-caret { transform: rotate(-90deg); }
.fv-mod-section.fv-mod-collapsed .fv-mod-body { display: none; }
.fv-mod-body { padding: 6px 0; background: var(--bg-1); }
.fv-mod-empty {
  padding: 18px 16px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); font-style: normal; text-align: center;
}

/* group sub-headers */
.fv-mod-subhead {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--bg-2); padding: 7px 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fv-mod-sub-count { color: var(--ink-4); margin-left: 4px; font-weight: 600; }

/* rows */
.fv-mod-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 0; transition: background .12s;
}
.fv-mod-row:hover { background: var(--bg-2); }
.fv-mod-row:last-child { border-bottom: none; }
.fv-mod-row-flex { flex-wrap: wrap; }
.fv-mod-row[data-expandable] { cursor: pointer; }
.fv-mod-row.fv-mod-row-expanded {
  background: var(--bg-2);
  box-shadow: inset 3px 0 0 var(--violet);
}
.fv-mod-row-id { font-family: var(--font-mono); color: var(--violet-ink); font-weight: 600; flex-shrink: 0; }
.fv-mod-row-id[data-fv-mcp] { background: transparent; border: none; cursor: pointer; padding: 0; }
.fv-mod-row-id[data-fv-mcp]:hover { color: var(--violet-bright); text-decoration: underline; }
.fv-mod-row-title { font-family: var(--font-sans); color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-mod-row-meta { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.fv-mod-row-threat {
  font-family: var(--font-mono); font-size: 10px; color: var(--violet-ink);
  background: transparent; border: none; cursor: pointer;
}
.fv-mod-row-threat:hover { text-decoration: underline; }
.fv-mod-row-threat[data-threat] {
  padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--bg-2); transition: border-color .12s, color .12s;
}
.fv-mod-row-threat[data-threat]:hover { border-color: var(--violet); color: var(--violet-bright); text-decoration: none; }
a.fv-mod-row-title { color: var(--violet-ink); text-decoration: none; }
a.fv-mod-row-title:hover { text-decoration: underline; }
a.fv-mod-row-threat { text-decoration: none; }

.fv-mod-date { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); flex-shrink: 0; }
.fv-mod-occ {
  font-family: var(--font-mono); font-size: 9px; padding: 1px 6px;
  border-radius: 99px; background: var(--violet-tint); color: var(--violet-ink);
  border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
}

/* mitre grid */
.fv-mod-mitre-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; padding: 12px 16px;
}
.fv-mod-mitre-cell {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 9px 11px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s;
}
.fv-mod-mitre-cell:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.fv-mod-mitre-cell.fv-mod-row-expanded { border-color: var(--violet); box-shadow: inset 3px 0 0 var(--violet); }
.fv-mod-mitre-id { font-family: var(--font-mono); font-size: 11px; color: var(--amber); font-weight: 700; background: transparent; border: none; cursor: pointer; padding: 0; }
.fv-mod-mitre-id:hover { text-decoration: underline; }
.fv-mod-mitre-name { font-family: var(--font-sans); font-size: 11px; color: var(--ink-2); }
.fv-mod-mitre-count { font-family: var(--font-mono); font-size: 9px; color: var(--mint); align-self: flex-end; margin-left: auto; }
.fv-mod-mitre-tactic { font-family: var(--font-mono); font-size: 9px; color: var(--violet-ink); text-transform: uppercase; letter-spacing: .04em; opacity: .75; }

/* toolbar: pills + search + sort */
.fv-mod-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.fv-mod-pillrow { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-mod-pillrow-secondary { opacity: .9; }
.fv-mod-pill {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 11px; padding: 5px 10px; border-radius: 99px;
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--ink-3);
  cursor: pointer; transition: all .13s; line-height: 1.3;
}
.fv-mod-pill:hover { border-color: var(--violet); color: var(--ink); }
.fv-mod-pill.active { background: var(--violet-deep); color: #fff; border-color: var(--violet-deep); }
.fv-mod-pill-count { margin-left: 6px; opacity: .65; font-weight: 700; }
.fv-mod-pill.active .fv-mod-pill-count { opacity: .85; }
.fv-mod-toolbar-bottom { display: flex; gap: 10px; align-items: center; }
.fv-mod-search {
  flex: 1; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  padding: 7px 11px; transition: border-color .14s, box-shadow .14s;
}
.fv-mod-search:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.fv-mod-search::placeholder { color: var(--ink-4); }
.fv-mod-sort {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  padding: 7px 10px; cursor: pointer;
}
.fv-mod-sort:focus { outline: none; border-color: var(--violet); }

.fv-mod-rowhidden { display: none !important; }
.fv-mod-rowcapped { display: none; }
.fv-mod-grouphidden { display: none; }
.fv-mod-loadmore {
  width: 100%; font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink);
  background: var(--bg-1); border: none; border-top: 1px solid var(--line);
  padding: 11px; cursor: pointer; transition: background .12s;
}
.fv-mod-loadmore:hover { background: var(--violet-tint); color: var(--violet-bright); }

/* IOC type badges + values */
.fv-mod-iocbadge {
  display: inline-block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--ink-3); flex-shrink: 0;
}
.fv-mod-iocbadge-ip       { color: var(--sky);    border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
.fv-mod-iocbadge-domain   { color: var(--violet-ink); border-color: color-mix(in srgb, var(--violet) 30%, transparent); }
.fv-mod-iocbadge-url      { color: var(--amber);  border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.fv-mod-iocbadge-email    { color: var(--rose);   border-color: color-mix(in srgb, var(--rose) 30%, transparent); }
.fv-mod-iocbadge-md5,
.fv-mod-iocbadge-sha1,
.fv-mod-iocbadge-sha256,
.fv-mod-iocbadge-sha512,
.fv-mod-iocbadge-hash     { color: var(--mint);   border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.fv-mod-iocbadge-filename,
.fv-mod-iocbadge-path     { color: var(--amber);  border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.fv-mod-iocbadge-registry,
.fv-mod-iocbadge-mutex,
.fv-mod-iocbadge-process,
.fv-mod-iocbadge-pipe,
.fv-mod-iocbadge-generic  { color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 30%, transparent); }
.fv-mod-ioc-ip       { color: var(--sky)        !important; }
.fv-mod-ioc-domain   { color: var(--violet-ink) !important; }
.fv-mod-ioc-url      { color: var(--amber)      !important; }
.fv-mod-ioc-email    { color: var(--rose)       !important; }
.fv-mod-ioc-md5,
.fv-mod-ioc-sha1,
.fv-mod-ioc-sha256,
.fv-mod-ioc-sha512,
.fv-mod-ioc-hash     { color: var(--mint)       !important; }
.fv-mod-ioc-filename,
.fv-mod-ioc-path     { color: var(--amber)      !important; }
.fv-mod-ioc-registry,
.fv-mod-ioc-mutex,
.fv-mod-ioc-process,
.fv-mod-ioc-pipe,
.fv-mod-ioc-generic  { color: var(--sev-critical) !important; }
.fv-mod-row-ioc { gap: 8px; }
.fv-mod-row-ioc .fv-mod-ioc-value {
  font-family: var(--font-mono); flex: 1; min-width: 0; word-break: break-all;
  background: transparent; border: none; cursor: pointer; padding: 0;
}
.fv-mod-row-ioc .fv-mod-ioc-value:hover { text-decoration: underline; }

/* CVSS / KEV badges */
.fv-mod-cvss { font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.fv-mod-cvss-critical { color: var(--sev-critical); }
.fv-mod-cvss-high     { color: var(--sev-high); }
.fv-mod-cvss-medium   { color: var(--sev-medium); }
.fv-mod-cvss-low      { color: var(--sev-low); }
.fv-mod-cvss-none     { color: var(--ink-4); }
.fv-mod-kev-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 99px; color: var(--sev-critical);
  border: 1px solid color-mix(in srgb, var(--sev-critical) 45%, transparent);
  background: var(--sev-critical-tint);
}

/* detection type stripes + badges */
.fv-mod-typestripe { border-left: 3px solid transparent; }
.fv-mod-typestripe-spl   { border-left-color: var(--spl); }
.fv-mod-typestripe-kql   { border-left-color: var(--kql); }
.fv-mod-typestripe-sigma { border-left-color: var(--sigma); }
.fv-mod-typestripe-yara  { border-left-color: var(--mint); }
.fv-mod-typestripe-other { border-left-color: var(--ink-4); }
.fv-mod-typebadge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
  border: 1px solid var(--line-2); color: var(--ink-3);
}
.fv-mod-typebadge-spl   { color: var(--spl);   border-color: color-mix(in srgb, var(--spl) 32%, transparent); }
.fv-mod-typebadge-kql   { color: var(--kql);   border-color: color-mix(in srgb, var(--kql) 32%, transparent); }
.fv-mod-typebadge-sigma { color: var(--sigma); border-color: color-mix(in srgb, var(--sigma) 32%, transparent); }
.fv-mod-typebadge-yara  { color: var(--mint);  border-color: color-mix(in srgb, var(--mint) 32%, transparent); }
.fv-mod-typebadge-other { color: var(--ink-3); }

.fv-mod-threat-wrap { padding: 0; border-bottom: 1px solid var(--line); }
.fv-mod-threat-wrap:last-child { border-bottom: none; }
.fv-mod-threat-wrap:hover { background: transparent; }

/* expandable detail panel */
.fv-mod-row-detail {
  display: none; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.fv-mod-row-detail.fv-mod-row-detail-open { display: block; }
.fv-mod-row-detail-inner { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.fv-mod-detail-section-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 8px;
}
.fv-mod-detail-section-head:first-child { margin-top: 0; }
.fv-mod-detail-codeblock {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink); line-height: 1.55;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow: auto;
}
.fv-mod-detail-copy, a.fv-mod-detail-copy {
  display: inline-block; align-self: flex-start; font-family: var(--font-mono);
  font-size: 10px; color: var(--violet-ink); text-decoration: none;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  padding: 5px 10px; cursor: pointer; transition: border-color .12s, color .12s; margin-top: 4px;
}
.fv-mod-detail-copy:hover { border-color: var(--violet); color: var(--violet-bright); }
.fv-mod-detail-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  color: var(--violet-ink); background: var(--bg-1);
  border: 1px solid color-mix(in srgb, var(--violet) 26%, transparent);
  border-radius: 99px; padding: 3px 9px; margin: 2px 3px 2px 0; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fv-mod-detail-chip:hover { background: var(--violet-tint); border-color: var(--violet); }

/* ===== tab bar (modules-as-tabs) ===== */
.fv-mcp-section-pinned { margin-bottom: 16px; }
.fv-tab-bar {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
  padding: 4px 0 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.fv-tab-bar::-webkit-scrollbar { height: 4px; }
.fv-tab-bar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.fv-tab {
  font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap;
  color: var(--ink-3); background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: 99px; padding: 7px 14px; cursor: pointer;
  transition: all .13s; flex: none;
}
.fv-tab:hover { color: var(--ink); border-color: var(--line-3); background: var(--bg-2); }
.fv-tab.fv-tab-active {
  color: #fff; background: var(--violet-deep); border-color: var(--violet-deep);
  box-shadow: var(--shadow-violet);
}
.fv-tab.fv-tab-active:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.fv-tab-content { display: block; }
.fv-tab-pane { display: block; }
.fv-tab-pane[hidden] { display: none !important; }
/* inside a tab pane the section header is redundant — strip the chrome, drop the border-radius
   doubling, keep the rounded body */
.fv-tab-pane > .fv-mod-section {
  border: none; border-radius: 0; background: transparent; overflow: visible; margin: 0;
}
.fv-tab-pane > .fv-mod-section:hover { border: none; }
.fv-tab-pane > .fv-mod-section > .fv-mod-head { display: none; }
.fv-tab-pane > .fv-mod-section > .fv-mod-body {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg);
  overflow: hidden; padding: 6px 0;
}

/* ---------------------------------------------------------------------------
   2. INTEL BRIEF  (fv-mcp-brief-*)
   --------------------------------------------------------------------------- */
.fv-mcp-mount, .fv-mcp-loading, .fv-mcp-err { font-family: var(--font-sans); }
.fv-mcp-loading { padding: 16px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-align: center; }
.fv-mcp-err { padding: 10px; color: var(--sev-critical); font-family: var(--font-mono); font-size: 11px; }
.fv-mcp-accent { color: var(--violet-ink); }
.fv-mcp-meta { color: var(--ink-3); }

.fv-mcp-btn-link {
  background: transparent; border: none; color: var(--violet-ink);
  font-family: var(--font-mono); font-size: inherit; cursor: pointer;
  padding: 0; text-align: inherit;
}
.fv-mcp-btn-link:hover { text-decoration: underline; color: var(--violet-bright); }
.fv-mcp-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 9.5px;
  padding: 3px 9px; margin: 2px; border-radius: 99px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.fv-mcp-tag:hover { border-color: var(--violet); color: var(--violet-ink); }
.fv-mcp-tag-cve   { color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 32%, transparent); }
.fv-mcp-tag-mitre { color: var(--sky);          border-color: color-mix(in srgb, var(--sky) 32%, transparent); }
.fv-mcp-tag-actor { color: var(--amber);        border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.fv-mcp-tag-cwe   { color: var(--violet-ink);   border-color: color-mix(in srgb, var(--violet) 32%, transparent); }
.fv-mcp-tool { font-family: var(--font-mono); color: var(--ink-4); font-size: 9px; font-weight: 400; margin-left: 6px; }

.fv-mcp-brief { display: flex; flex-direction: column; gap: 14px; }
.fv-mcp-brief-hero-inner {
  cursor: pointer; padding: 15px 18px; border-radius: var(--rad-lg);
  background: linear-gradient(100deg, var(--violet-tint), transparent 70%);
  border: 1px solid var(--line); border-left: 3px solid var(--violet);
  transition: background .14s, border-color .14s;
}
.fv-mcp-brief-hero-inner:hover {
  background: linear-gradient(100deg, var(--violet-tint-2), transparent 70%);
  border-color: var(--violet);
}
.fv-mcp-brief-hero-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-bottom: 5px; letter-spacing: .02em; }
.fv-mcp-brief-hero-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.fv-mcp-brief-hero-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.fv-mcp-brief-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.fv-mcp-stat {
  padding: 13px 15px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--rad); display: flex; flex-direction: column; gap: 3px;
  transition: border-color .12s, transform .12s;
}
.fv-mcp-stat:hover { border-color: var(--violet); transform: translateY(-1px); }
.fv-mcp-stat .v { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: .95; letter-spacing: -0.02em; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
.fv-mcp-stat .l { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }

.fv-mcp-brief-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fv-mcp-brief-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

.fv-mcp-brief-spark {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg);
  padding: 14px 16px; margin-bottom: 0;
}
.fv-mcp-brief-spark-h { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-bottom: 8px; letter-spacing: .02em; }
.fv-mcp-brief-spark-bars { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.fv-mcp-brief-spark-bar { flex: 1; background: var(--bg-3); border-radius: var(--rad-sm) var(--rad-sm) 0 0; min-height: 3px; }
.fv-mcp-brief-spark-bar.has { background: var(--violet); opacity: .8; }

.fv-mcp-brief-card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg);
  padding: 15px 17px; transition: border-color .12s, box-shadow .12s;
}
.fv-mcp-brief-card:hover { border-color: var(--line-2); }
.fv-mcp-brief-card.pinned { border-color: color-mix(in srgb, var(--violet) 38%, transparent); box-shadow: 0 0 0 1px var(--violet-tint); }
.fv-mcp-brief-card h3 { font-family: var(--font-mono); font-size: 10.5px; color: var(--violet-ink); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; font-weight: 500; }

.fv-mcp-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 7px; }
.fv-mcp-engine { padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); display: block; text-decoration: none; transition: border-color .12s; }
.fv-mcp-engine:hover { border-color: var(--violet); }
.fv-mcp-engine .n { font-family: var(--font-display); font-size: 15px; color: var(--ink); font-weight: 700; }
.fv-mcp-engine .e-l { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

.fv-mcp-mitre-mini { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; margin-top: 6px; }
.fv-mcp-mitre-mini .c {
  height: 20px; background: var(--bg-3); border: 0; border-radius: var(--rad-sm);
  font-family: var(--font-mono); font-size: 8px; color: var(--ink-3); cursor: pointer;
  transition: background .12s;
}
.fv-mcp-mitre-mini .c:hover { background: var(--violet-tint-2); }
.fv-mcp-mitre-mini .c.emph { outline: 1px solid var(--violet); outline-offset: -1px; }
.fv-mcp-mitre-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); margin-top: 7px; }

.fv-mcp-enrich-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fv-mcp-enrich-cell { padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); }
.fv-mcp-enrich-cell .v { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; }
.fv-mcp-enrich-cell .l { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

.fv-mcp-cve-list { display: flex; flex-direction: column; gap: 6px; }
.fv-mcp-cve-row {
  display: grid; grid-template-columns: 130px 52px 1fr; gap: 9px; align-items: center;
  padding: 8px 11px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad);
  cursor: pointer; font-family: var(--font-mono); font-size: 11px; text-align: left;
  transition: border-color .12s;
}
.fv-mcp-cve-row:hover { border-color: var(--violet); }
.fv-mcp-cve-row .id { color: var(--sev-critical); }
.fv-mcp-cve-row .cvss { padding: 2px 6px; border-radius: var(--rad-sm); background: var(--bg-3); text-align: center; font-size: 10px; font-weight: 700; color: var(--ink); }
.fv-mcp-cve-row .cvss.critical { color: var(--sev-critical); }
.fv-mcp-cve-row .cvss.high { color: var(--sev-high); }
.fv-mcp-cve-row .nm { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fv-mcp-actor-list, .fv-mcp-cat-list { display: flex; flex-direction: column; gap: 6px; }
.fv-mcp-actor-row, .fv-mcp-cat-row {
  padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad);
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; width: 100%; text-align: left;
  transition: border-color .12s;
}
.fv-mcp-actor-row:hover { border-color: var(--amber); }
.fv-mcp-actor-row .n { color: var(--amber); }
.fv-mcp-actor-row.emph { border-color: var(--violet); }
.fv-mcp-cat-row { cursor: default; }
.fv-mcp-cat-row:hover { border-color: var(--sky); }
.fv-mcp-cat-row.emph { border-color: var(--violet); }
.fv-mcp-cat-row .n { color: var(--sky); }
.fv-mcp-actor-row .c, .fv-mcp-cat-row .c { color: var(--ink-4); font-size: 10px; }

.fv-mcp-c2-list { display: flex; flex-direction: column; gap: 5px; }
.fv-mcp-c2-row {
  padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad);
  display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center;
  cursor: pointer; font-family: var(--font-mono); font-size: 10px; text-align: left;
  transition: border-color .12s;
}
.fv-mcp-c2-row:hover { border-color: var(--mint); }
.fv-mcp-c2-row .ip { color: var(--mint); }
.fv-mcp-c2-row .meta { color: var(--ink-4); }

/* ---------------------------------------------------------------------------
   3. CLUSTER VIEW  (fv-mcp-cluster-*)
   --------------------------------------------------------------------------- */
.fv-mcp-cluster-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; flex-wrap: wrap; }
.fv-mcp-cluster-controls { display: flex; align-items: center; gap: 10px; }
.fv-mcp-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.fv-mcp-select {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  padding: 6px 11px; cursor: pointer;
}
.fv-mcp-select:focus { outline: none; border-color: var(--violet); }
.fv-mcp-cluster-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.fv-mcp-cluster-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px)  { .fv-mcp-cluster-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1280px) { .fv-mcp-cluster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fv-mcp-cluster-group {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg);
  overflow: hidden; transition: border-color .12s;
}
.fv-mcp-cluster-group:hover { border-color: var(--line-2); }
.fv-mcp-cluster-ghead { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.fv-mcp-bar { display: inline-block; width: 4px; height: 18px; border-radius: 99px; }
.fv-mcp-bar-rose     { background: var(--sev-critical); }
.fv-mcp-bar-peach    { background: var(--sev-high); }
.fv-mcp-bar-yellow   { background: var(--sev-medium); }
.fv-mcp-bar-mint     { background: var(--sev-low); }
.fv-mcp-bar-lavender { background: var(--violet); }
.fv-mcp-gname { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; text-transform: capitalize; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-mcp-gcount {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 9px; border-radius: 99px;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line-2);
}
.fv-mcp-cluster-gbody { display: flex; flex-direction: column; max-height: 480px; overflow-y: auto; }
.fv-mcp-cluster-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 15px; border-top: 1px solid var(--line); transition: background .12s; }
.fv-mcp-cluster-row:hover { background: var(--bg-2); }
.fv-mcp-cluster-row:first-child { border-top: 0; }
.fv-mcp-rsev { width: 3px; align-self: stretch; min-height: 30px; border-radius: 99px; }
.fv-mcp-sev-CRITICAL { background: var(--sev-critical); }
.fv-mcp-sev-HIGH     { background: var(--sev-high); }
.fv-mcp-sev-MEDIUM   { background: var(--sev-medium); }
.fv-mcp-sev-LOW      { background: var(--sev-low); }
.fv-mcp-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fv-mcp-rtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fv-mcp-rid { font-family: var(--font-mono); font-size: 10px; color: var(--violet-ink); text-decoration: none; }
.fv-mcp-rid:hover { text-decoration: underline; }
.fv-mcp-rtitle { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fv-mcp-rdate { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); flex-shrink: 0; }
.fv-mcp-rchips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fv-mcp-rcat { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------------------
   4. HEATMAP VIEW  (fv-mcp-hm-*)
   --------------------------------------------------------------------------- */
.fv-mcp-hm-head { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-bottom: 14px; letter-spacing: .02em; }
.fv-mcp-hm-grid {
  display: grid; grid-template-columns: 120px repeat(14, 1fr); gap: 3px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg);
  padding: 14px; min-width: 780px; overflow-x: auto;
}
.fv-mcp-hm-col-h, .fv-mcp-hm-row-h {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 4px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--rad-sm);
}
.fv-mcp-hm-col-h:hover { color: var(--sky); }
.fv-mcp-hm-row-h { justify-content: flex-end; padding-right: 10px; cursor: default; }
.fv-mcp-hm-row-h.fv-mcp-sev-CRITICAL { color: var(--sev-critical); background: transparent; }
.fv-mcp-hm-row-h.fv-mcp-sev-HIGH     { color: var(--sev-high);     background: transparent; }
.fv-mcp-hm-row-h.fv-mcp-sev-MEDIUM   { color: var(--sev-medium);   background: transparent; }
.fv-mcp-hm-row-h.fv-mcp-sev-LOW      { color: var(--sev-low);      background: transparent; }
.fv-mcp-hm-cell {
  background: var(--bg-3); border: 1px solid transparent; border-radius: var(--rad-sm);
  height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); padding: 0;
  transition: border-color .12s;
}
.fv-mcp-hm-cell:hover { border-color: var(--violet); }
.fv-mcp-hm-cell.active { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-tint-2); }
.fv-mcp-hm-empty .n { color: var(--ink-4); opacity: .4; font-weight: 400; }
.fv-mcp-hm-drill { margin-top: 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 13px 16px; }
.fv-mcp-hm-drill-head { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
.fv-mcp-hm-drill-row { display: grid; grid-template-columns: 100px 60px 1fr 100px; gap: 10px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); }
.fv-mcp-hm-drill-row:first-child { border-top: 0; }
.fv-mcp-sev-pill {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 8px; text-align: center;
  border: 1px solid; border-radius: 99px; text-transform: uppercase; letter-spacing: .03em;
}
.fv-mcp-sev-pill.fv-mcp-sev-CRITICAL { color: var(--sev-critical); border-color: var(--sev-critical); background: var(--sev-critical-tint); }
.fv-mcp-sev-pill.fv-mcp-sev-HIGH     { color: var(--sev-high);     border-color: var(--sev-high);     background: var(--sev-high-tint); }
.fv-mcp-sev-pill.fv-mcp-sev-MEDIUM   { color: var(--sev-medium);   border-color: var(--sev-medium);   background: var(--sev-medium-tint); }
.fv-mcp-sev-pill.fv-mcp-sev-LOW      { color: var(--sev-low);      border-color: var(--sev-low);      background: var(--sev-low-tint); }

/* ---------------------------------------------------------------------------
   5. TIMELINE VIEW  (fv-mcp-tl-*)
   --------------------------------------------------------------------------- */
.fv-mcp-tl-spark { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 14px 16px; margin-bottom: 14px; }
.fv-mcp-tl-spark-h { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-bottom: 8px; letter-spacing: .02em; }
.fv-mcp-tl-bars { display: flex; align-items: flex-end; gap: 2px; height: 62px; }
.fv-mcp-tl-bar { flex: 1; background: var(--bg-3); position: relative; min-height: 3px; border-radius: var(--rad-sm) var(--rad-sm) 0 0; }
.fv-mcp-tl-bar.has { background: var(--violet); opacity: .8; }
.fv-mcp-tl-bar.has:hover { opacity: 1; }
.fv-mcp-tl-dot {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; background: var(--sev-high); border: 1px solid var(--bg);
  border-radius: 50%; cursor: pointer; padding: 0;
}
.fv-mcp-tl-dot:hover { transform: translateX(-50%) scale(1.4); }
.fv-mcp-tl-days { display: flex; flex-direction: column; gap: 10px; }
.fv-mcp-tl-day { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; transition: border-color .12s; }
.fv-mcp-tl-day:hover { border-color: var(--line-2); }
.fv-mcp-tl-dhead { display: flex; align-items: center; gap: 12px; padding: 11px 15px; flex-wrap: wrap; background: var(--bg-2); }
.fv-mcp-tl-ddate { font-family: var(--font-mono); font-size: 12px; color: var(--violet-ink); font-weight: 700; min-width: 130px; }
.fv-mcp-tl-dbar { flex: 1; display: flex; height: 14px; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; min-width: 120px; }
.fv-mcp-tl-seg.fv-mcp-sev-CRITICAL { background: var(--sev-critical); }
.fv-mcp-tl-seg.fv-mcp-sev-HIGH     { background: var(--sev-high); }
.fv-mcp-tl-seg.fv-mcp-sev-MEDIUM   { background: var(--sev-medium); }
.fv-mcp-tl-seg.fv-mcp-sev-LOW      { background: var(--sev-low); }
.fv-mcp-tl-dcnt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); min-width: 80px; text-align: right; }
.fv-mcp-tl-dbody { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fv-mcp-tl-row { display: grid; grid-template-columns: 100px 60px 1fr 100px; gap: 10px; align-items: center; padding: 10px 15px; border-top: 1px solid var(--line); transition: background .12s; }
.fv-mcp-tl-row:hover { background: var(--bg-2); }
.fv-mcp-tl-row:first-child { border-top: 0; }

/* ---------------------------------------------------------------------------
   6. UNIVERSAL SIDE PANEL  (fv-mcp-panel*)
   --------------------------------------------------------------------------- */
.fv-mcp-panels-back {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--bg-inset) 70%, transparent);
  backdrop-filter: blur(2px); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.fv-mcp-panels-back.open { opacity: 1; pointer-events: auto; }
.fv-mcp-panels {
  position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%;
  z-index: 301; background: var(--bg-1); border-left: 1px solid var(--line);
  border-top-left-radius: var(--rad-lg); border-bottom-left-radius: var(--rad-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease; overflow: hidden;
}
.fv-mcp-panels.open { transform: translateX(0); }
.fv-mcp-panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.fv-mcp-stack {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding: 2px 8px;
  border-radius: 99px; border: 1px solid var(--line-2); background: var(--bg-1);
}
.fv-mcp-back, .fv-mcp-close {
  background: transparent; border: 1px solid transparent; border-radius: var(--rad-sm);
  color: var(--ink-2); cursor: pointer; font-family: var(--font-mono); font-size: 11px; padding: 4px 9px;
  transition: border-color .12s, color .12s;
}
.fv-mcp-close { font-size: 18px; line-height: 1; }
.fv-mcp-back:hover { color: var(--ink); border-color: var(--line-2); }
.fv-mcp-close:hover { color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 40%, transparent); }
.fv-mcp-panel-title {
  flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--violet-ink);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fv-mcp-panel-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--bg-2); flex-shrink: 0; }
.fv-mcp-panel-tabs::-webkit-scrollbar { height: 4px; }
.fv-mcp-panel-tabs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.fv-mcp-panel-tabs .fv-mcp-tab {
  font-family: var(--font-mono); font-size: 10px; background: var(--bg-1);
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 99px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em; transition: all .13s; flex: none;
  display: inline-block; margin: 0;
}
.fv-mcp-panel-tabs .fv-mcp-tab:hover { color: var(--ink); border-color: var(--line-3); }
.fv-mcp-panel-tabs .fv-mcp-tab.active { color: #fff; background: var(--violet-deep); border-color: var(--violet-deep); }
.fv-mcp-panel-body { flex: 1; overflow-y: auto; padding: 17px 19px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.fv-mcp-section { margin-bottom: 18px; }
.fv-mcp-section h3 { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; font-weight: 500; }
.fv-mcp-row { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-bottom: 6px; display: flex; gap: 10px; }
.fv-mcp-row b { color: var(--ink); min-width: 90px; flex-shrink: 0; font-weight: 600; }
.fv-mcp-row code { background: var(--bg-3); border-radius: var(--rad-sm); padding: 1px 7px; color: var(--mint); font-family: var(--font-mono); }
.fv-mcp-desc { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.fv-mcp-code {
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 11px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; line-height: 1.55;
}
.fv-mcp-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fv-mcp-item:last-child { border-bottom: none; }
.fv-mcp-item-t { font-family: var(--font-sans); font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.fv-mcp-item-m { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; }
.fv-mcp-link {
  display: inline-block; font-family: var(--font-mono); color: var(--violet-ink);
  cursor: pointer; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent); border-radius: var(--rad-sm);
  padding: 6px 11px; transition: background .12s, border-color .12s;
}
.fv-mcp-link:hover { background: var(--violet-tint); border-color: var(--violet); color: var(--violet-bright); }

/* ---------------------------------------------------------------------------
   7. CANVAS / DENDROGRAM  (fv-canvas-* / fc-tree-*)
   SVG node fills are inline (#1a1a1a etc.) — themed via attribute selectors below.
   --------------------------------------------------------------------------- */
.fv-canvas-wrap { padding: 4px 0; }
.fc-tree-summary { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.fc-tree-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.fc-tree-ctrl {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  padding: 5px 11px; cursor: pointer; transition: border-color .12s, color .12s;
}
.fc-tree-ctrl:hover { border-color: var(--violet); color: var(--violet-ink); }
.fc-tree-zoomlabel { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-left: 4px; }
.fc-tree-vp {
  border: 1px solid var(--line) !important; border-radius: var(--rad-lg) !important;
  background: var(--bg-inset) !important; overflow: hidden;
}
.fc-tree-vp::-webkit-scrollbar { width: 9px; height: 9px; }
.fc-tree-vp::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.fc-tree-vp::-webkit-scrollbar-track { background: transparent; }
.fc-tree-node:hover rect { stroke-width: 2 !important; }
.fc-tree-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.fc-tree-legend-item { display: flex; align-items: center; gap: 5px; }
.fc-tree-legend-dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
/* re-theme the inline-dark SVG fills so the canvas reads on both themes */
.fc-tree-vp svg rect[fill="#1a1a1a"] { fill: var(--bg-2); }
.fc-tree-vp svg rect[stroke="#333"] { stroke: var(--line-2); }
.fc-tree-vp svg text[fill="#e5e5e5"] { fill: var(--ink); }
.fc-tree-vp svg circle[fill="#555"] { fill: var(--ink-4); }

/* ---------------------------------------------------------------------------
   8. MOBILE  (max-width: 768px) — single-column grids, full-width panel, no overflow
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .fv-mcp-panels { width: 100%; border-radius: 0; }
  .fv-mcp-brief-grid { grid-template-columns: minmax(0, 1fr); }
  .fv-mcp-cluster-grid { grid-template-columns: minmax(0, 1fr); }
  .fv-mcp-enrich-bar { grid-template-columns: 1fr 1fr; }
  .fv-mod-mitre-grid { grid-template-columns: 1fr; }
  .fv-mcp-brief-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* keep wide grids scrollable inside their card rather than blowing out the page */
  .fv-mcp-hm-grid { min-width: 700px; }
  .fv-mcp-tl-dhead { gap: 6px; }
  .fv-mcp-tl-ddate { min-width: 0; }

  /* touch targets (32px project floor) */
  .fv-mcp-tag,
  .fv-mcp-btn-link,
  .fv-mcp-cve-row,
  .fv-mcp-actor-row,
  .fv-mcp-cat-row,
  .fv-mcp-c2-row,
  .fv-mcp-engine,
  .fv-mcp-link,
  .fv-tab,
  .fv-mod-pill,
  .fv-mod-row-threat[data-threat],
  .fv-mod-row-id[data-fv-mcp],
  .fv-mod-mitre-id[data-fv-mcp],
  .fv-mod-ioc-value[data-fv-mcp] { min-height: 32px; }
  .fv-mcp-tag { padding: 6px 11px; line-height: 1.4; }
  .fv-mcp-mitre-mini .c { min-height: 32px; height: auto; }
  .fv-mcp-tl-dot { width: 12px; height: 12px; top: -14px; }

  /* prevent any single element from forcing horizontal page overflow */
  .fv-mcp-rtitle, .fv-mcp-cluster-row .fv-mcp-rtitle { min-width: 0; }
  .fv-mcp-rchips { row-gap: 6px; }
  .fv-mcp-cluster-row { flex-wrap: wrap; }
  .fv-mcp-cluster-gbody { max-height: none; }
  .fv-mcp-hm-drill-row { grid-template-columns: 80px 50px 1fr; }
  .fv-mcp-hm-drill-row .fv-mcp-rdate { display: none; }
  .fv-mcp-tl-row { grid-template-columns: 80px 50px 1fr; }
  .fv-mcp-tl-row .fv-mcp-rcat { display: none; }
  /* stack feed-module rows on mobile — a flex row squeezed the title (flex:1;min-width:0)
     down to a 1-char-per-line column; column layout gives each part its own full-width line */
  .fv-mod-row { flex-direction: column; align-items: stretch; gap: 4px; flex-wrap: nowrap; }
  .fv-mod-row-id { flex: none; }
  .fv-mod-row-title { flex: none; width: 100%; white-space: normal; word-break: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
  .fv-mod-row-meta { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .fv-mod-toolbar-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
  .fv-mod-sort { width: 100%; }
  .fv-tab-bar { padding: 4px 0 10px; gap: 5px; }
  .fc-tree-controls { flex-wrap: wrap; }
  .fc-tree-vp { max-height: 480px !important; }
}

@media (max-width: 480px) {
  .fv-mcp-brief-strip { grid-template-columns: 1fr 1fr; }
  .fv-mcp-stat .v { font-size: 22px; }
  .fv-mod-pill { font-size: 9px; padding: 5px 8px; }
  .fv-mod-sub-count { display: none; }
  .fv-mod-search { font-size: 16px; }          /* iOS anti-zoom */
  .fv-mod-row { gap: 6px; padding: 9px 12px; }
  .fv-mod-date { display: none; }
  .fv-mcp-cve-row { grid-template-columns: 1fr auto; }
  .fv-mcp-cve-row .nm { display: none; }
  .fv-mod-title, .fv-mcp-brief-hero-title { font-size: 14px; }
}

/* ============================================================================
   END SIGNAL — FEED VIEW
   ============================================================================ */

/* ============================================================================
   SIGNAL v4 — mobile fixes: search on mobile, compact metrics, briefing fit,
   global reflow safety net. Appended last so it wins.
   ============================================================================ */

/* ---- mobile: show the persistent Signal topbar (TLQL + ask + bell + theme)
        below the fixed 56px mobile-header (the old ⌘K modal still works too) ---- */
@media (max-width: 768px) {
  .sig-main { margin-left: 0; padding-top: calc(56px + env(safe-area-inset-top)); }
  .sig-main > .main-content { padding-top: 0 !important; }
  .sig-tb { display: flex; height: auto; min-height: 46px; padding: 7px 12px; gap: 8px; }
  .sig-tb .tb-crumb { display: none; }
  .sig-tb .tb-tlql { margin: 0; max-width: none; flex: 1 1 auto; }
  .sig-tb .tb-tlql .feed-tlql-ai { padding: 6px 9px; }
  .sig-tb .tb-right { gap: 2px; flex: none; margin-left: 0; }
  .sig-tb .topbar-user { display: none !important; }  /* user lives in the drawer footer on mobile */
}

/* ---- command metrics: compact 2x2 on phones (was full-width tall boxes) ---- */
@media (max-width: 700px) {
  .metric-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .metric { padding: 11px 12px 9px; }
  .metric-val { font-size: 25px; }
  .metric-suf { font-size: 14px; }
  .metric .spark { height: 22px; }
}

/* ---- briefing featured: fit + no right cutoff on mobile ---- */
@media (max-width: 768px) {
  .brief-top { grid-template-columns: 1fr !important; }
  .brief-feat-media { height: 110px; padding: 12px; }
  .brief-feat-body { padding: 16px 16px 18px; }
  .brief-feat-title { font-size: 22px; overflow-wrap: break-word; word-break: break-word; }
  .brief-feat-sum { font-size: 13.5px; }
  .brief-feat-foot { gap: 10px 14px; }
  .brief-rail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .brief-feat-title { font-size: 20px; }
  .brief-rail { grid-template-columns: 1fr; }
}

/* ---- GLOBAL mobile reflow safety net: stack grids, scroll wide tables/code,
        unstick rails, break long titles → no horizontal cutoff anywhere ---- */
@media (max-width: 768px) {
  .main-content { overflow-x: hidden; }
  .threat-page { overflow-x: hidden; }
  /* master-detail layouts + card grids → single column */
  .main-content [class$="-layout"],
  .main-content [class$="-grid"],
  .cmd-grid, .brief-top, .corr-top, .blast-detail, .blast-agg, .actor-layout,
  .rel-layout, .sim-layout, .sim-grid, .dns-layout, .dns-grid, .c2-layout,
  .deb-layout, .stats-grid, .rem-grid, .mcp-grid, .adm-grid, .adv-grid,
  .actor-stats, .deb-stats { grid-template-columns: 1fr !important; }
  /* wide matrices / heatmaps / tables / code → scroll inside their box, not the page */
  .main-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .main-content pre,
  .main-content .codeblock,
  .main-content [class*="code-content"],
  .main-content [class*="-code"],
  .main-content [class*="matrix"],
  .main-content [class*="heat"],
  .main-content [class*="-table"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* sticky side rails / detail panes unstick + full width */
  .main-content [class$="-rail"],
  .main-content [class$="-side"],
  .main-content [class$="-detail"],
  .main-content [class$="-list"].rel-side { position: static !important; max-height: none !important; width: auto !important; }
  /* long titles wrap instead of overflowing */
  .main-content h1, .main-content h2,
  .main-content [class$="-title"],
  .main-content [class$="-headline"] { overflow-wrap: break-word; word-break: break-word; }
  /* page heads stack */
  .pg-head, .page-head, [class$="-head"] { flex-wrap: wrap; }
  /* iOS anti-zoom on inputs */
  .main-content input, .sig-tb input, .main-content textarea, .main-content select { font-size: 16px; }
}

/* v4 nit: briefing featured foot wraps so read_brief never clips on mobile */
@media (max-width: 768px) {
  .brief-feat-foot { flex-wrap: wrap; }
  .brief-read { margin-left: 0 !important; }
}

/* v4 net+: stat strips / kpi rows reflow to 2-up on mobile (wild_c2, etc.) */
@media (max-width: 768px) {
  .main-content [class$="-stats"], .main-content [class$="-strip"], .main-content [class$="-cells"], .main-content [class$="-kpis"] { grid-template-columns: 1fr 1fr !important; }
  .main-content [class$="-stats"] > * { min-width: 0; }
}

/* ============================================================================
   SIGNAL v5 — detail markdown structure · topbar manual search · my-feeds (+) · IOC overflow
   ============================================================================ */
/* (1) markdown-structured description / analysis (formatDescription output) */
.desc-heading { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; margin: 18px 0 7px; }
.desc-h2 { font-size: 17px; font-weight: 700; }
.desc-h3 { font-size: 13px; font-weight: 600; color: var(--violet-ink); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.desc-hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.dp-overview p, .detail-section-content p, .tp-pane p, .detection-item-desc p { margin: 0 0 12px; line-height: 1.7; }
.dp-overview p:last-child, .detail-section-content p:last-child { margin-bottom: 0; }
.desc-list { margin: 6px 0 14px; display: flex; flex-direction: column; gap: 7px; }
ol.desc-list { list-style: decimal; padding-left: 24px; }
ol.desc-list li::marker { color: var(--violet); font-family: var(--font-mono); font-weight: 600; }
ul.desc-list { list-style: none; padding-left: 18px; }
ul.desc-list li { position: relative; padding-left: 16px; }
ul.desc-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--violet); font-family: var(--font-mono); }
.desc-list li { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.desc-codeblock { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 13px 15px; margin: 12px 0; overflow: auto; max-height: 380px; }
.desc-codeblock code { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--ink); white-space: pre; background: none; padding: 0; }
.dp-overview code, .detail-section-content code, .tp-pane code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-3); color: var(--mint); padding: 1px 6px; border-radius: var(--rad-sm); }

/* (2) topbar manual search button (relocated #advancedSearchBtn) — distinct from ✦ ask */
.tb-tlql .advanced-search-btn { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: transparent; border: none; padding: 0 2px 0 9px; margin-left: 2px; border-left: 1px solid var(--line-2); cursor: pointer; white-space: nowrap; }
.tb-tlql .advanced-search-btn:hover { color: var(--violet-ink); }

/* (3) my-feeds "+" button perfectly centered */
.sidebar .nav-myfeeds-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sidebar .nav-myfeeds-manage { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 15px; text-decoration: none; flex: none; }

/* (4) IOC correlation: long IOC value + long threat list never break the layout */
.corr-search-result-value, .corr-infra-value, .corr-pattern-id { word-break: break-all; overflow-wrap: anywhere; min-width: 0; }
.corr-search-result-left, .corr-infra-row { min-width: 0; }
.corr-search-result-threats, .corr-infra-threats, .corr-pattern-threats { flex-wrap: wrap; }
.corr-threat-chip, .corr-threat-chip-sm, .corr-pattern-threat { max-width: 100%; }

/* mobile: clean topbar search (full modal via header), no header overlap */
@media (max-width: 768px) {
  .mobile-header { background: var(--bg-1); }
  .tb-tlql .advanced-search-btn, .tb-tlql .feed-tlql-match { display: none; }
  .sig-main { padding-top: calc(56px + env(safe-area-inset-top)) !important; }
  .corr-search-result-left, .corr-search-result-right { align-items: flex-start; }
}


/* ============================================================================
   SIGNAL POLISH PASS (edge-case audit swarm) — long-content/alignment/mobile fixes,
   scoped per page. border-radius:0 rules stripped (Signal is rounded).
   ============================================================================ */

/* ---- scripts/page-correlation.js ---- */
/* ============================================================================
   IOC CORRELATION — EDGE-CASE POLISH (Token-based corrections)
   ============================================================================ */

/* A. LONG CONTENT HANDLING — IOC values, IDs, lists */

/* Fix flex shrinking for long IOC values in search results */
.corr-search-result-left {
    min-width: 0; /* Allow flex child to shrink below content size */
}

/* Fix flex shrinking for long IOC values in infrastructure rows */
.corr-infra-left {
    min-width: 0; /* Allow proper word-break on overflow */
}

/* Ensure threat lists wrap gracefully */
.corr-infra-threats,
.corr-search-result-threats {
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0; /* Prevent flex overflow */
}

/* Long threat title truncation in pattern cards */
.corr-pattern-threat {
    min-width: 0; /* Enable ellipsis on child */
}

/* Long threat title truncation in actor cards */
.corr-actor-threat {
    min-width: 0; /* Enable ellipsis on child */
}

/* Top IOC row — ensure value doesn't overflow when long */
.corr-top-value-wrap {
    min-width: 0; /* Critical for flex shrinking with long domains */
    overflow: hidden; /* Clip the bar background if value is very long */
}

/* Top IOC bar positioning — ensure it respects min-width constraint */
.corr-top-bar {
    pointer-events: none; /* Prevent bar from interfering with clicks */
    max-width: 100%; /* Cap bar width to parent */
}

/* B. TWO-COLUMN ROW STACKING — search result & infrastructure rows */

/* At 640px and below, stack search result columns */
@media (max-width: 640px) {
    .corr-search-result {
        flex-direction: column;
        gap: 8px;
    }
    
    .corr-search-result-left {
        width: 100%; /* Full width for stacked layout */
    }
    
    .corr-search-result-right {
        width: 100%; /* Full width for stacked layout */
        align-items: flex-start; /* Align left when stacked */
    }
    
    /* Threat chips should flow naturally in stacked context */
    .corr-search-result-threats {
        justify-content: flex-start; /* Left-align when stacked */
    }
    
    /* Infrastructure rows already flex-wrap, ensure clean stacking */
    .corr-infra-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .corr-infra-left {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .corr-infra-right {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .corr-infra-threats {
        justify-content: flex-start;
    }
}

/* C. VERTICAL ALIGNMENT — severity dots & text */

/* Threat chips — align dot with text baseline */
.corr-threat-chip,
.corr-threat-chip-sm {
    vertical-align: middle; /* Align with surrounding text */
}

/* Severity dot in threat rows — vertically center */
.corr-pattern-threat-sev,
.corr-actor-threat-sev {
    display: inline-block; /* Ensure proper vertical alignment */
    vertical-align: middle; /* Align with adjacent text */
}

/* Threat IDs in rows should align with severity dots */
.corr-pattern-threat-id,
.corr-actor-threat-id {
    vertical-align: middle;
}

/* D. NUMBERS RIGHT-ALIGNED (tabular) */

.corr-top-count,
.corr-infra-count,
.corr-search-result-count,
.corr-stat-chip-value,
.corr-corr-stat-num {
    font-variant-numeric: tabular-nums; /* Ensure fixed-width numerals */
}

/* E. MOBILE SAFEGUARDS — iOS antipattern fixes */

@media (max-width: 768px) {
    /* iOS anti-zoom: 16px minimum for inputs */
    .corr-search-input,
    input[type="text"] {
        font-size: 16px;
    }
    
    /* Ensure touch targets are >= 32px */
    .corr-filter-btn {
        min-height: 32px;
        min-width: 32px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .corr-copy-btn,
    .corr-copy-btn-sm {
        min-height: 32px;
        min-width: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
    }
}

@media (max-width: 480px) {
    /* Extra explicit font-size for iOS on small screens */
    .corr-search-input {
        font-size: 16px;
        padding: 10px 12px;
    }
    
    /* Ensure buttons remain tappable */
    .corr-filter-btn,
    .corr-copy-btn,
    .corr-copy-btn-sm {
        min-height: 32px;
        min-width: 32px;
    }
}

/* F. SIGNAL FIDELITY — Typography & Severity Colors */

/* Ensure mono/display font weights match design tokens */
.corr-header-title,
.corr-section-title,
.corr-pattern-actor,
.corr-actor-name {
    font-family: var(--font-mono);
    letter-spacing: -0.5px; /* Tighten mono spacing per design */
}

/* Severity badge colors — use CSS tokens only */
.corr-pattern-threat-sev,
.corr-actor-threat-sev {
    /* (sharp removed — signal is rounded) */ /* Sharp corners per Signal design */
    display: inline-block;
}

/* IOC type badges — rounded per Signal (if any) or sharp (current) */
.corr-ioc-type-badge {
    /* (sharp removed — signal is rounded) */ /* Sharp per current design */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* G. EMPTY & ERROR STATES — styled consistently */

.corr-empty-state,
.corr-empty-state-sm,
.corr-search-empty {
    font-family: var(--font-mono);
    color: var(--text-muted);
    line-height: 1.6;
    padding: 16px 0;
}

/* Search "no results" feedback */
.corr-search-count {
    display: block;
    margin-bottom: 8px;
}

/* ============================================================================
   LIGHT MODE POLISH (Edge-case fixes for light theme)
   ============================================================================ */

@media (max-width: 640px) {
    [data-theme="light"] .corr-search-result {
        flex-direction: column;
    }
    
    [data-theme="light"] .corr-search-result-right {
        align-items: flex-start;
    }
    
    [data-theme="light"] .corr-infra-row {
        flex-direction: column;
    }
    
    [data-theme="light"] .corr-infra-right {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- scripts/page-actor-attribution.js ---- */
/* Actor Attribution v2 — Edge-Case Polish Fixes */
.aa-container .aa-row-name {
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-container .aa-row-aliases {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.aa-container .aa-filter-label {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.aa-container .aa-threat-item {
  align-items: flex-start;
}

.aa-container .aa-threat-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-container .aa-det-header {
  align-items: flex-start;
}

.aa-container .aa-det-name {
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-container .aa-sev-dot {
  border-radius: var(--rad-sm);
}

.aa-container .aa-dossier-val {
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-container .aa-dossier-kv {
  flex-wrap: wrap;
  align-items: flex-start;
}

.aa-container .aa-profile-tabs {
  flex-wrap: wrap;
}

.aa-container .aa-profile-tab {
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-container .aa-ioc-table,
.aa-container .aa-arsenal-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aa-container .aa-arsenal-table td,
.aa-container .aa-ioc-table td {
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

.aa-container .aa-ioc-val {
  word-break: break-all;
}

.aa-container .aa-arsenal-cve,
.aa-container .aa-arsenal-cwe,
.aa-container .aa-arsenal-tool {
  word-break: break-all;
  max-width: 120px;
}

.aa-container .aa-tag {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.aa-container .aa-tag-cloud {
  flex-wrap: wrap;
}

.aa-container .aa-mitre-card {
  border-radius: var(--rad-sm);
}

.aa-container .aa-profile-tab {
  border-radius: var(--rad-sm) var(--rad-sm) 0 0;
}

.aa-container .aa-det-code-tab {
  border-radius: var(--rad-sm) var(--rad-sm) 0 0;
}

.aa-container .aa-sev-dot-critical,
.aa-container .aa-sev-dot-high,
.aa-container .aa-sev-dot-medium,
.aa-container .aa-sev-dot-low {
  border-radius: var(--rad-sm);
}

/* Ensure alert/error state for profile errors */
.aa-container .aa-row-loading {
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  border-radius: var(--rad-sm);
  background: var(--bg-2);
}

.aa-container .aa-row-loading[style*="color:#ef4444"],
.aa-container [style*="color:#ef4444"].aa-row-loading {
  color: var(--sev-critical);
  background: color-mix(in srgb, var(--sev-critical) 8%, var(--bg));
}

/* Mobile: ensure dossier KV wraps below key on smaller screens */
@media (max-width: 600px) {
  .aa-container .aa-dossier-kv {
    flex-direction: column;
    gap: 2px;
  }

  .aa-container .aa-dossier-key {
    min-width: 0;
  }

  .aa-container .aa-arsenal-table td,
  .aa-container .aa-ioc-table td {
    max-width: 200px;
  }
}

/* Ensure timeline refs don't overflow on mobile */
@media (max-width: 480px) {
  .aa-container .aa-timeline-item {
    flex-direction: column;
    gap: 4px;
  }

  .aa-container .aa-dossier-kv {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---- scripts/page-intel-graph.js ---- */
/* EDGE-CASE POLISH: Long content overflow / wrapping / mobile fixes */

/* A. Long content in card IDs, rows, and badges */
.ig-page .ig-card-id {
  flex-wrap: wrap;
  min-width: 0;
}
.ig-page .ig-card-id > span:nth-child(2) {
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.ig-page .ig-row {
  flex-wrap: wrap;
  gap: 8px 6px;
}
.ig-page .ig-row-v {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ig-page .ig-badge {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Long correlations badge */
.ig-page .ig-corr {
  flex-shrink: 0;
}

/* B. Tag and chip lists must wrap, never overflow */
.ig-page .ig-tags {
  flex-wrap: wrap;
  gap: 5px 4px;
  word-break: break-word;
}
.ig-page .ig-tag {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  flex-shrink: 0;
}

/* Detail panel chips: wrap + no overflow */
.ig-page .ig-detail-chips {
  flex-wrap: wrap;
  gap: 5px 4px;
}
.ig-page .ig-detail-chip {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  flex-shrink: 0;
}
.ig-page .ig-detail-mitre {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* C. Reference links: word-break without truncation in CSS */
.ig-page .ig-ref-link {
  word-break: break-word;
  overflow-wrap: anywhere;
  display: block;
  margin-top: 4px;
}
.ig-page .ig-detail-link {
  word-break: break-word;
  overflow-wrap: anywhere;
  display: inline-block;
  margin-top: 8px;
  max-width: 100%;
}

/* D. Detection queries and code blocks: auto-scroll but contained */
.ig-page .ig-det-query {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 120px;
  word-break: break-word;
  white-space: pre-wrap;
}
.ig-page .ig-detail-query {
  overflow-x: auto;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

/* E. Detail panel rows: flex-wrap for long values */
.ig-page .ig-detail-row {
  flex-wrap: wrap;
  gap: 6px 6px;
}
.ig-page .ig-detail-row-v {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* F. Threat actor aliases and actor/nation lists inline */
.ig-page .ig-row-v {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* G. SVG graph labels: truncate or wrap gracefully */
.ig-page .ig-svg text {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* H. Rounded corners: replace hardcoded 0 with design tokens */
.ig-page .ig-search,
.ig-page .ig-btn,
.ig-page .ig-toggle,
.ig-page .ig-col-search,
.ig-page .ig-tag,
.ig-page .ig-badge,
.ig-page .ig-card-sev,
.ig-page .ig-more,
.ig-page .ig-det-type,
.ig-page .ig-bc-item,
.ig-page .ig-show-more {
  border-radius: var(--rad-sm);
}

.ig-page .ig-card,
.ig-page .ig-detail,
.ig-page .ig-desc,
.ig-page .ig-det-query,
.ig-page .ig-detail-query {
  border-radius: var(--rad);
}

/* I. Mobile: prevent horizontal overflow on all widths */
@media (max-width: 1024px) {
  .ig-page {
    overflow-x: hidden;
  }
  .ig-page .ig-tree {
    overflow-x: auto;
  }
  .ig-page .ig-row-v,
  .ig-page .ig-detail-row-v {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .ig-page .ig-card-id {
    flex-direction: column;
    gap: 4px;
  }
  .ig-page .ig-badge {
    margin-left: 0 !important;
  }
  .ig-page .ig-row {
    flex-direction: column;
    gap: 2px;
  }
  .ig-page .ig-row-l {
    min-width: auto;
    flex-shrink: 0;
  }
  .ig-page .ig-detail-row {
    flex-direction: column;
    gap: 2px;
  }
  .ig-page .ig-detail-row-l {
    min-width: auto;
  }
  .ig-page .ig-card {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .ig-page .ig-tags,
  .ig-page .ig-detail-chips {
    gap: 4px 3px;
  }
  .ig-page .ig-tag,
  .ig-page .ig-detail-chip {
    font-size: 8px;
    padding: 1px 5px;
  }
  .ig-page .ig-detail-mitre {
    font-size: 9px;
  }
}

/* J. Empty states: ensure visible + aligned */
.ig-page .ig-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  text-align: center;
  padding: 20px 16px;
  border-radius: var(--rad-sm);
  background: var(--bg-1);
  border: 1px dashed var(--line-2);
  color: var(--ink-4);
}

/* K. Loading state: centered + visible */
.ig-page .ig-loading {
  border-radius: var(--rad);
}

/* L. Legend items: nowrap + individual wrapping */
.ig-page .ig-legend-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* M. Title truncation: 2-line max for card titles */
.ig-page .ig-card-title.ig-trunc {
  -webkit-line-clamp: 2;
  max-height: 2.8em;
}

/* N. Detail title: no truncation (full content) */
.ig-page .ig-detail-title {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* O. Icon + text vertical alignment */
.ig-page .ig-card-id > span:first-child,
.ig-page .ig-detail-label > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* P. Right-align numbers in stats grid */
.ig-page .ig-stat-v {
  text-align: right;
  tabular-nums: true;
}
.ig-page .ig-cvss-val {
  text-align: right;
  tabular-nums: true;
}

/* Q. Card action buttons (arrow/expand) alignment */
.ig-page .ig-arrow,
.ig-page .ig-show-more {
  align-self: flex-end;
  flex-shrink: 0;
}

/* R. Breadcrumb truncation + wrapping */
.ig-page .ig-breadcrumb {
  flex-wrap: wrap;
  min-height: auto;
}
.ig-page .ig-bc-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  flex-shrink: 0;
}

/* S. Section headers alignment */
.ig-page .ig-sec {
  align-items: center;
  display: flex;
  gap: 6px;
}
.ig-page .ig-sec-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
}

/* ---- scripts/page-blast-radius.js ---- */
/* ============================================================
   EDGE-CASE POLISH — Long content, mobile overflow, Signal fidelity
   ============================================================ */

/* A. LONG IOC VALUE HANDLING — input field overflow wrap + iOS zoom prevention */
body .br-page .br-input{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* B. LONG NODE IDs IN RESULT ROWS — fallback word-break for edge cases */
body .br-page .br-node-id{
  overflow-wrap:break-word;
  word-break:break-word;
  min-width:0;
}

/* C. EDGE ROW IDs (node_a_id, node_b_id) — long CVE/IP/domain break-wrap */
body .br-page .br-edge-from,
body .br-page .br-edge-to{
  overflow-wrap:break-word;
  word-break:break-word;
  min-width:0;
  flex-shrink:1;
}

/* D. ACTOR CHIPS — long threat actor names wrap instead of overflow */
body .br-page .br-actor{
  overflow-wrap:break-word;
  word-break:break-word;
  max-width:100%;
}

/* E. SIBLING IOC CHIPS — long domain/IP names wrap inline */
body .br-page .br-sibling{
  overflow-wrap:anywhere;
  word-break:break-word;
  display:inline-flex;
  align-items:center;
}

/* F. TECHNIQUE PILLS — ensure they wrap on narrow screens and don't overflow flex grid */
body .br-page .br-pill{
  overflow-wrap:break-word;
  word-break:break-word;
  max-width:100%;
  display:inline-block;
}

/* G. RING-BODY with pills — flex-wrap allows pills to flow to next line on narrow screens */
body .br-page .br-ring-body{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:16px;
}

/* H. SVG CANVAS VIEWPORT — cap width on mobile to prevent horizontal scroll */
body .br-page #brTreeSvg{
  max-width:100%;
  height:auto;
}

body .br-page div#brTreeViewport{
  overflow-x:auto;
  overflow-y:auto;
}

/* I. SIGNAL FIDELITY — ring labels use Bricolage (--font-display) per design system */
body .br-page .br-ring-label{
  font-family:var(--font-display);
  font-weight:700;
}

/* J. MOBILE TOUCH TARGET — ensure buttons are >=44px height on touch screens */
@media(max-width:768px){
  body .br-page .br-btn{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  body .br-page .br-input{
    font-size:16px;
  }
  
  body .br-page .br-depth{
    font-size:14px;
  }
  
  body .br-page .br-pill{
    max-width:calc(100% - 4px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:480px){
  body .br-page .br-pill{
    font-size:9px;
    padding:2px 6px;
  }
  
  body .br-page .br-btn{
    min-height:40px;
    font-size:11px;
  }
}

/* ---- scripts/page-related-threats.js ---- */
/* EDGE CASE POLISH: Long content overflow fixes */

/* Picker: long threat titles must wrap/truncate, row must not overflow */
.rt-page .rt-picker-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
  border-left: 2px solid transparent;
  min-width: 0; /* Critical: enables text truncation in flex parent */
}

.rt-page .rt-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0; /* Ensure flex children truncate */
}

.rt-page .rt-picker-id {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--violet-ink);
  letter-spacing: 0.02em;
  flex-shrink: 0; /* ID badge doesn't shrink */
  display: flex;
  align-items: center;
  gap: 2px;
}

.rt-page .rt-picker-title {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Critical: enables ellipsis on flex child */
}

.rt-page .rt-picker-conn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--violet-ink);
  font-weight: 500;
  flex-shrink: 0;
}

/* Similarity cards: proper two-column wrap with long IDs/titles/badges */
.rt-page .rt-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  flex-wrap: wrap; /* Allow wrapping on long content */
  min-width: 0;
}

.rt-page .rt-card-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-ink);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.rt-page .rt-card-title {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  flex: 1;
  min-width: 0; /* Critical: truncate long titles */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-page .rt-card-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--mint);
  flex-shrink: 0;
}

.rt-page .rt-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap; /* Multi-line badges and pills */
  width: 100%;
}

/* Pills & badges: short and blocky, wrap naturally */
.rt-page .rt-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--rad-sm);
  background: var(--sky-tint, rgba(125, 211, 252, 0.12));
  color: var(--sky);
  border: 1px solid transparent;
  flex-shrink: 0;
  word-break: break-word; /* Long values break within pill */
  overflow-wrap: anywhere;
  max-width: 100%; /* Don't exceed container */
}

.rt-page .rt-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--rad-sm);
  flex-shrink: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Attack-path transition table: proper grid with overflow handling */
.rt-page .rt-trans-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 20px minmax(80px, 1fr) 70px 50px minmax(60px, 1fr);
  gap: 6px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
}

.rt-page .rt-trans-from,
.rt-page .rt-trans-to {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Enable truncation in grid cell */
}

.rt-page .rt-trans-threats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap; /* Multi-line threat IDs */
  min-width: 0;
}

.rt-page .rt-trans-tid {
  color: var(--violet-ink);
  cursor: pointer;
  font-size: 10px;
  flex-shrink: 0;
  word-break: break-word;
  overflow-wrap: anywhere; /* Long IOC/threat IDs break */
  max-width: 100%;
}

.rt-page .rt-trans-tid:hover {
  text-decoration: underline;
  color: var(--violet);
}

/* Probability bar: keep inline, don't overflow */
.rt-page .rt-prob-bar {
  width: 60px;
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Input fields: proper text truncation */
.rt-page .rt-input {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--rad-sm);
  color: var(--ink);
  padding: 11px 14px;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
  min-width: 0;
}

/* Search wrapper: flex container must allow children to shrink */
.rt-page .rt-search-wrap {
  flex: 1;
  min-width: 240px;
  min-width: 0; /* Enable shrinking and truncation */
  position: relative;
}

/* Autocomplete suggestion items: long threat titles truncate */
.rt-page .rt-suggest-item {
  padding: 9px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.rt-page .rt-suggest-id {
  color: var(--violet-ink);
  margin-right: 0; /* Reset margin, use gap instead */
  flex-shrink: 0;
  font-weight: 600;
}

/* Graph tooltip: proper text handling for long threat titles */
.rt-graph-tooltip {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-sm);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font-mono);
  max-width: 280px;
  padding: 9px 11px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.rt-graph-tooltip-type {
  color: var(--ink-3);
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* Mobile: stack everything, no horizontal overflow */
@media (max-width: 768px) {
  .rt-page .rt-search-wrap {
    width: 100%;
    min-width: 0;
  }

  .rt-page .rt-trans-row {
    grid-template-columns: 1fr 20px 1fr;
    gap: 6px 8px;
    padding: 12px;
  }

  .rt-page .rt-trans-header {
    display: none;
  }

  .rt-page .rt-trans-prob,
  .rt-page .rt-trans-count,
  .rt-page .rt-trans-threats {
    grid-column: 1 / -1;
  }

  .rt-page .rt-trans-threats {
    flex-wrap: wrap;
  }

  .rt-page .rt-trans-from,
  .rt-page .rt-trans-to {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .rt-page .rt-picker {
    width: 100%;
    max-height: none;
    position: static;
    order: -1;
    border-right: 1px solid var(--line);
    border-radius: var(--rad-sm);
  }

  .rt-page .rt-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .rt-page .rt-card-id {
    font-size: 11px;
  }

  .rt-page .rt-card-title {
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .rt-page .rt-card-score {
    font-size: 14px;
    align-self: flex-end;
  }

  .rt-page .rt-pill {
    font-size: 9px;
    padding: 1px 5px;
  }

  .rt-page .rt-badge {
    font-size: 9px;
    padding: 1px 5px;
  }

  .rt-page .rt-prob-bar {
    width: 90px;
  }

  .rt-page .rt-graph-vp {
    min-height: 380px;
    max-height: 70vh;
  }

  .rt-graph-tooltip {
    max-width: 220px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .rt-page .rt-card {
    padding: 13px;
  }

  .rt-page .rt-card-id {
    font-size: 11px;
  }

  .rt-page .rt-card-score {
    font-size: 14px;
  }

  .rt-page .rt-pill {
    font-size: 9px;
    padding: 1px 5px;
  }

  .rt-page .rt-badge {
    font-size: 9px;
    padding: 1px 5px;
  }

  .rt-page .rt-tab {
    padding: 8px 11px;
    font-size: 10px;
    white-space: nowrap;
  }

  .rt-page .rt-input {
    font-size: 16px; /* iOS prevents zoom at 16px+ */
  }

  .rt-page .rt-graph-vp {
    min-height: 320px;
  }

  .rt-graph-tooltip {
    max-width: 200px;
    font-size: 9px;
  }
}

/* ---- scripts/page-dns-enrichment.js ---- */
/* ============================================================================
   DNS Enrichment Edge-Case Polish — Long Content, Alignment, Mobile
   ============================================================================ */

/* A. TABLE CELLS: long IPs/domains must not overflow */

/* B. THREAT BADGES IN TABLES: flex parent must allow shrinking */


/* C. CROSS-CORRELATIONS PIVOT: very long IPs/domains */


/* D. CROSS-HEADER WRAPPING: flex-wrap for long pivot + confidence */

/* E. INDICATOR TAGS: flex-wrap safety + word-break for long tags */

/* F. FEED IOC: very long IOCs with proper flex constraints */


/* G. ACCORDION IP: long IPv6 + domain names */


/* H. ACCORDION HEADER: proper flex layout with alignment */

/* I. DOMAIN TAGS IN DETAIL ROWS: flex-wrap + word-break */

/* J. CLUSTER DOMAINS: same wrap pattern */


/* K. PARENT DOMAIN TABLE: long domains + IPs */


/* L. TOP TABLE CELLS: long IPs in top_connected_ips */

/* M. STAT VALUES: truncate long values (numbers right-aligned) */


/* N. MESSAGE BOX: flex parent for long error messages */


/* O. SEARCH BAR: long placeholder text safe */


/* P. MOBILE: enforce no horizontal scroll, 1-col grids, touch targets */
@media (max-width: 768px) {

    /* Ensure table cells don't overflow viewport */

}

@media (max-width: 480px) {
    /* Strict mobile: no horizontal overflow */
    body {
        overflow-x: hidden;
        width: 100vw;
    }

}

/* ---- scripts/page-wild-c2.js ---- */
/* === POLISH AUDIT FIXES: Long Content Overflow Prevention === */

/* A. Table cells: force word-break on long IPs/hashes/domains */

/* A. Beacon table long content handling */

/* A. Watermark clusters row — long country list */

/* A. Recent activity row wrapping */

/* A. Detail items (label / value pairs) — handle long values */

/* A. Feed items — long domain names must wrap or break */

/* A. Feed badge lists — wrap long badge sequences */


/* A. Correlation row in detail */


/* A. Card metadata rows — wrap long lists (versions, countries, domains) */

/* A. Member table IPs */


/* B. Config block code — explicit scroll wrapper */

/* B. Heatmap wide grid */


/* B. MITRE heat grid on mobile */


/* C. Icon/badge vertical alignment in feed items */


/* C. Bracket buttons vertical centering */


/* D. Section spacing consistency */

/* E. Mobile: prevent horizontal overflow on wc-wm-countries */

/* F. Signal design system: NO hardcoded hex — but badge colors already in theme */
/* Radius: all zero radius per Signal design spec (--radius-sm: 0) */

/* ---- scripts/page-advanced-correlations.js ---- */


/* A. LONG CONTENT: Prevent overflow on IOC values, threat IDs, long text */

/* IOC grid: long IOC values + lists must not overflow */

/* Engine card top items: long threat IDs/IPs should wrap, not overflow */

/* Attribution entity: handle long IDs (IPv6, hashes) */


/* Threat/actor badge lists: wrap to multiple lines */


/* Enrichment row: long source names should wrap */

/* Badge lists in expanded rows: wrap and don't overflow */

/* Debt grid: handle long technique names + IDs */

/* Velocity grid: CVE IDs can be long */

/* B. WIDE ELEMENTS: Wrap tables in overflow-x containers */

/* Grid-based tables: add wrapper overflow if needed */


/* C. ALIGNMENT: Right-align numbers, vertically center badges */

/* Numeric columns: tabular-nums + right-align */

/* Badge vertical centering */

/* Engine card name/count alignment */


/* D. SIGNAL FIDELITY: Ensure corner radius on all interactive elements */

/* E. MOBILE: Prevent horizontal overflow, stack complex layouts */

@media (max-width: 768px) {
    /* Ensure grid children don't overflow viewport */
    

    /* IOC grid: reduce columns or stack */

    /* Debt grid: simplify for mobile */

    /* Velocity grid: simplify */

    /* Enrichment row: simplify for mobile */

    /* Input/touch target: font-size 16px to prevent iOS zoom */
    

    /* Infra/engine cards: 1 column */
    

    /* No horizontal scroll on page */
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    /* Aggressive simplification for very small screens */

}

/* ---- scripts/page-simulations.js ---- */
/* ========================================
   A. LONG CONTENT OVERFLOW & WRAPPING
   ======================================== */

/* Threat titles in list - prevent overflow, wrap if needed */
.sl-threat-title {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;  /* Enable flex child shrinking */
}

/* Threat actor badges - long names must break */
.sl-threat-actor {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Threat nation badges - long names must break */
.sl-threat-nation {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Simulation titles in panel 3 - wrap long titles */
.sl-sim-title {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Simulation header title in panel 4 - wrap long titles */
.sl-sim-header-title {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Detail panel title - Bricolage font + wrap support */
.sl-detail-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Correlation chain threat titles - flex children need min-width:0 to wrap */
.sl-corr-chain-threat {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Correlation pills (IOCs, threat IDs, CVEs) - flex container with wrap */
.sl-corr-threat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* Individual correlation pill - allow break */
.sl-corr-pill {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  flex-shrink: 0;  /* Let wrap handle overflow, don't squeeze */
}

/* Technique pills in chains - wrap support */
.sl-corr-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.sl-corr-tech-pill {
  flex-shrink: 0;  /* Allow wrapping, don't squeeze */
}

/* Filter labels in sidebar - truncate with ellipsis (single line, narrow sidebar) */
.sl-filter-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Filter pills row - ensure wrapping in narrow sidebar */
.sl-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
}

.sl-filter-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  overflow-wrap: break-word;
  word-break: break-word;
  flex-shrink: 0;
}

/* ========================================
   B. CODE BLOCKS & WIDE ELEMENTS
   ======================================== */

/* Code block: ensure it scrolls, doesn't break page width */
.sl-code-block {
  border-radius: var(--rad);
  overflow: hidden;
}

.sl-code-content {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
}

/* Code line text: break long lines without breaking word */
.sl-code-line-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Kill chain / tactic heatmap - responsive grid */
.sl-cov-killchain {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* Kill chain cell - allow tactic name to wrap cleanly */
.sl-cov-kc-cell {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--rad-sm);
}

.sl-cov-kc-name {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.3;
}

/* Platform coverage bar - rounded corners */
.sl-cov-bar-track {
  border-radius: var(--rad-sm);
}

.sl-cov-bar-fill {
  border-radius: var(--rad-sm);
}

/* ========================================
   C. ALIGNMENT & VERTICAL CENTERING
   ======================================== */

/* Filter check marks - perfect vertical centering */
.sl-filter-check {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Caution badges - vertically center with text */
.sl-sim-caution {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.sl-sim-author {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Code line numbers - right-aligned, tabular spacing */
.sl-code-line {
  display: flex;
  align-items: baseline;
}

.sl-code-line-num {
  text-align: right;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Threat meta: ensure badges line up */
.sl-threat-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sl-threat-sev,
.sl-threat-cat,
.sl-threat-sim-count {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Detail meta: badges align */
.sl-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sim list meta */
.sl-sim-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Correlation card header - proper alignment */
.sl-corr-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.sl-corr-count {
  margin-left: auto;
}

/* ========================================
   D. SIGNAL FIDELITY — Rounded Corners
   ======================================== */

.sl-corr-card {
  border-radius: var(--rad);
}

.sl-corr-chain-card {
  border-radius: var(--rad);
}

.sl-threat-card {
  border-radius: var(--rad-sm);
}

.sl-sim-card {
  border-radius: var(--rad-sm);
}

.sl-filter-pill {
  border-radius: var(--rad-sm);
}

/* ========================================
   E. SIGNAL FIDELITY — Color Tokens
   ======================================== */

/* Replace hardcoded violet with token */
.sl-page-tab.active {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

.sl-sort-btn.active {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

.sl-threat-sim-count {
  color: var(--violet-ink);
  background: var(--violet-tint);
}

.sl-filter-pill {
  color: var(--violet-ink);
  background: var(--violet-tint);
}

.sl-sim-mitre-pill {
  color: var(--violet-ink);
  background: var(--violet-tint);
}

.sl-corr-tech-pill {
  color: var(--violet-ink);
  background: var(--violet-tint);
}

/* Violet on hover/active states */
.sl-threat-card.selected {
  border-left-color: var(--violet);
}

.sl-sim-card.selected {
  box-shadow: inset 3px 0 0 var(--violet);
}

/* Severity colors use semantic tokens */
.sl-threat-sev {
  border-radius: var(--rad-sm);
}

.sl-sim-caution {
  border-radius: var(--rad-sm);
}

.sl-ref-type {
  border-radius: var(--rad-sm);
}

/* ========================================
   F. SIGNAL FIDELITY — Typography
   ======================================== */

/* Stats numerals use display font */
.sl-stat-val {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Section labels: mono all-caps with letter-spacing */
.sl-detail-section-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sl-section-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Breadcrumb styling */
.sl-breadcrumb-item {
  cursor: pointer;
  transition: color 0.2s;
}

.sl-breadcrumb-item:hover {
  color: var(--violet);
}

/* ========================================
   G. MOBILE RESPONSIVE (<768px)
   ======================================== */

@media (max-width: 768px) {
  /* Panel widths adjust for smaller screens */
  .sl-sim-panel.visible {
    width: 100%;
    min-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
  }

  .sl-detail-panel.visible {
    width: 100%;
    min-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Correlation grid: tighter columns on mobile */
  .sl-corr-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  /* Kill chain grid: 2 cols on tablet, 1 on phone */
  .sl-cov-killchain {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (max-width: 480px) {
  /* Kill chain: single column on phone */
  .sl-cov-killchain {
    grid-template-columns: 1fr;
  }

  /* Correlation: single column on phone */
  .sl-corr-grid {
    grid-template-columns: 1fr;
  }

  /* Stats bar: stack vertically on phone */
  .sl-stats-bar {
    flex-direction: column;
    gap: 8px;
  }

  .sl-stat {
    align-items: flex-start;
  }

  /* Filter sidebar: full width, reasonable height */
  .sl-filter-sidebar {
    max-height: 40vh;
  }

  /* Threat panel: don't force height limit */
  .sl-threat-list {
    max-height: none;
  }

  /* Code block: limit height on phone */
  .sl-code-content {
    max-height: 300px;
  }

  /* Detail panel sections: adjust spacing */
  .sl-detail-section {
    padding: 12px;
  }

  /* Threat card padding */
  .sl-threat-card {
    padding: 10px 12px;
  }
}

/* ========================================
   H. EMPTY/LOADING STATE POLISH
   ======================================== */

.sl-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

.sl-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* ---- scripts/page-coverage.js ---- */
/* ==================================================================
   EDGE-CASE POLISH: Long Content, Wrap, Alignment, Responsive
   ================================================================== */

/* ---- A. LONG CONTENT HANDLING — word-break + min-width ---- */
.cm-tactic-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cm-tech-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.cm-threat-id {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.cm-threat-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.cm-det-card-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* ---- B. BADGE/META LIST WRAP ---- */
.cm-tech-badges {
    flex-wrap: wrap;
    align-items: center;
}

.cm-threat-meta {
    flex-wrap: wrap;
    align-items: center;
}

/* ---- C. FLEX CONTAINER MIN-WIDTH FIXES ---- */
.cm-panel-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-tactic-info {
    min-width: 0;
}

.cm-tech-info {
    min-width: 0;
}

.cm-threat-info {
    min-width: 0;
}

/* ---- D. VERTICAL ALIGNMENT POLISH ---- */
.cm-tactic-counts {
    align-items: baseline;
    vertical-align: middle;
}

.cm-tech-badges {
    align-items: center;
    vertical-align: middle;
}

.cm-threat-meta {
    align-items: center;
    vertical-align: middle;
}

.cm-det-card-header {
    align-items: flex-start;
    gap: 8px;
}

.cm-det-card-idx {
    align-self: center;
    padding-top: 2px;
}

.cm-sev-pip {
    vertical-align: middle;
    align-self: center;
}

/* ---- E. BREADCRUMB WRAP & ALIGNMENT ---- */
.cm-breadcrumb {
    gap: 4px;
    word-break: break-word;
}

.cm-bc-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- F. SPLIT PANEL SCROLLING FIX ---- */
.cm-split {
    width: 100%;
    overflow: hidden;
}

.cm-panel {
    min-width: 0;
    max-width: 100%;
}

/* ---- G. STATS BAR MOBILE WRAP ---- */
.cm-stats-bar {
    gap: 12px;
}

.cm-stat {
    min-width: 0;
    word-break: break-word;
}

.cm-stat-val {
    word-break: break-all;
}

/* ---- H. LANG BAR LABEL TRUNCATION ---- */
.cm-lang-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 30px;
}

.cm-lang-count {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- I. FILTER ROW WRAP ---- */
.cm-filter-row {
    gap: 8px;
    flex-wrap: wrap;
}

.cm-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- J. DETECTION TAB OVERFLOW ---- */
.cm-det-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    gap: 0;
}

.cm-det-tabs::-webkit-scrollbar {
    height: 4px;
}

.cm-det-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.cm-det-tabs::-webkit-scrollbar-thumb {
    background: #333;
}

.cm-det-tab {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- K. CODE BLOCK OVERFLOW ---- */
.cm-det-code {
    overflow-x: auto;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ---- L. EMPTY STATE STYLING ---- */
.cm-empty {
    text-align: center;
    padding: 32px 14px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
}

/* ---- M. RESPONSIVE: TABLET (900px) ---- */
@media (max-width: 900px) {
    .cm-header-row {
        flex-direction: column;
        gap: 16px;
    }

    .cm-coverage-arc {
        width: 80px;
        height: 80px;
        align-self: flex-start;
    }

    .cm-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cm-stat {
        padding: 12px 14px;
        min-width: 0;
    }

    .cm-stat-val {
        font-size: 20px;
    }

    .cm-stat-label {
        font-size: 10px;
    }

    .cm-lang-bar {
        flex-direction: column;
        height: auto;
        gap: 1px;
    }

    .cm-lang-segment {
        padding: 6px 12px;
        justify-content: flex-start;
        gap: 6px;
    }

    .cm-lang-name {
        min-width: auto;
    }

    .cm-filter-row {
        gap: 6px;
    }

    .cm-filter-btn {
        font-size: 10px;
        padding: 6px 10px;
        min-height: 32px;
    }

    .cm-breadcrumb {
        font-size: 11px;
        gap: 3px;
    }

    .cm-split {
        flex-direction: column;
        min-height: auto;
    }

    .cm-panel-tactics {
        width: 100%;
        min-width: unset;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .cm-panel-techniques,
    .cm-panel-threats,
    .cm-panel-detections {
        width: 100%;
        min-width: unset;
        max-height: 280px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .cm-page {
        padding: 16px 12px 32px;
    }

    .cm-page-title {
        font-size: 18px;
    }

    .cm-page-sub {
        font-size: 11px;
    }
}

/* ---- N. RESPONSIVE: PHONE (768px) ---- */
@media (max-width: 768px) {
    .cm-page {
        padding: 12px 10px 24px;
    }

    .cm-stats-bar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cm-stat {
        padding: 10px 12px;
    }

    .cm-stat-val {
        font-size: 18px;
    }

    .cm-stat-pct {
        font-size: 12px;
    }

    .cm-stat-label {
        font-size: 9px;
    }

    .cm-coverage-arc {
        width: 70px;
        height: 70px;
    }

    .cm-arc-pct {
        font-size: 16px;
    }

    .cm-arc-sub {
        font-size: 8px;
    }

    .cm-search-wrap {
        height: 34px;
        padding: 0 10px;
    }

    .cm-search-input {
        font-size: 11px;
    }

    .cm-lang-bar {
        height: auto;
    }

    .cm-lang-segment {
        font-size: 10px;
        padding: 6px 10px;
        gap: 4px;
    }

    .cm-lang-dot {
        width: 5px;
        height: 5px;
    }

    .cm-lang-count {
        font-size: 10px;
    }

    .cm-lang-name {
        font-size: 9px;
    }

    .cm-filter-btn {
        font-size: 9px;
        padding: 5px 8px;
        min-height: 28px;
    }

    .cm-filter-row {
        gap: 4px;
    }

    .cm-breadcrumb {
        font-size: 10px;
        gap: 2px;
    }

    .cm-bc-item,
    .cm-bc-root {
        padding: 1px 4px;
        font-size: 10px;
    }

    .cm-bc-sep {
        margin: 0 1px;
    }

    .cm-panel-tactics {
        max-height: 160px;
    }

    .cm-panel-techniques,
    .cm-panel-threats,
    .cm-panel-detections {
        max-height: 200px;
    }

    .cm-tactic-item {
        padding: 10px 12px;
    }

    .cm-tactic-name {
        font-size: 11px;
    }

    .cm-tactic-id {
        font-size: 9px;
    }

    .cm-tactic-counts {
        font-size: 10px;
    }

    .cm-technique-card {
        padding: 8px 12px;
    }

    .cm-tech-name {
        font-size: 11px;
    }

    .cm-tech-id {
        font-size: 9px;
    }

    .cm-tech-badges {
        gap: 4px;
        margin-top: 4px;
    }

    .cm-tech-det-badge,
    .cm-tech-threat-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    .cm-threat-card {
        padding: 10px 12px;
    }

    .cm-threat-title {
        font-size: 11px;
    }

    .cm-threat-id {
        font-size: 9px;
    }

    .cm-threat-meta {
        gap: 6px;
        font-size: 9px;
    }

    .cm-threat-sev {
        font-size: 9px;
        padding: 1px 4px;
    }

    .cm-threat-det-count {
        font-size: 9px;
    }

    .cm-det-tab {
        padding: 6px 12px;
        font-size: 10px;
    }

    .cm-det-tab-count {
        font-size: 9px;
    }

    .cm-det-card-header {
        padding: 8px 12px 4px;
        gap: 6px;
    }

    .cm-det-card-idx {
        font-size: 9px;
    }

    .cm-det-card-name {
        font-size: 11px;
    }

    .cm-det-card-sev {
        font-size: 9px;
        padding: 1px 4px;
    }

    .cm-det-code-wrap {
        margin: 0 12px 8px;
    }

    .cm-det-code {
        font-size: 10px;
        padding: 8px 10px;
        max-height: 200px;
    }

    .cm-det-copy {
        font-size: 9px;
        padding: 2px 4px;
        top: 4px;
        right: 4px;
    }

    .cm-panel-title {
        font-size: 10px;
        padding: 8px 12px;
    }
}

/* ---- O. RESPONSIVE: SMALL PHONE (480px) ---- */
@media (max-width: 480px) {
    .cm-page {
        padding: 8px 8px 16px;
    }

    .cm-header-row {
        flex-direction: column;
        gap: 12px;
    }

    .cm-page-title {
        font-size: 16px;
    }

    .cm-page-sub {
        font-size: 10px;
    }

    .cm-coverage-arc {
        width: 60px;
        height: 60px;
        align-self: flex-start;
    }

    .cm-arc-pct {
        font-size: 14px;
    }

    .cm-arc-sub {
        font-size: 7px;
    }

    .cm-stats-bar {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .cm-stat {
        padding: 8px 10px;
    }

    .cm-stat-val {
        font-size: 16px;
    }

    .cm-stat-label {
        font-size: 8px;
    }

    .cm-search-wrap {
        height: 32px;
        padding: 0 8px;
    }

    .cm-search-input {
        font-size: 10px;
    }

    .cm-search-icon {
        font-size: 12px;
        margin-right: 6px;
    }

    .cm-lang-bar {
        font-size: 9px;
    }

    .cm-lang-segment {
        padding: 4px 8px;
        font-size: 9px;
    }

    .cm-lang-dot {
        width: 4px;
        height: 4px;
    }

    .cm-filter-btn {
        font-size: 8px;
        padding: 4px 6px;
        min-height: 24px;
    }

    .cm-breadcrumb {
        font-size: 9px;
        min-height: 20px;
    }

    .cm-bc-item,
    .cm-bc-root {
        font-size: 9px;
        padding: 1px 2px;
    }

    .cm-panel-tactics,
    .cm-panel-techniques,
    .cm-panel-threats,
    .cm-panel-detections {
        max-height: 140px;
    }

    .cm-tactic-item {
        padding: 8px 10px;
    }

    .cm-tactic-name {
        font-size: 10px;
    }

    .cm-tactic-bar {
        height: 1px;
        margin-top: 6px;
        margin-left: 0;
    }

    .cm-technique-card {
        padding: 6px 10px;
    }

    .cm-tech-name {
        font-size: 10px;
    }

    .cm-tech-badges {
        gap: 3px;
        margin-top: 3px;
    }

    .cm-threat-card {
        padding: 8px 10px;
    }

    .cm-threat-title {
        font-size: 10px;
    }

    .cm-threat-meta {
        gap: 4px;
        font-size: 8px;
    }

    .cm-det-tab {
        padding: 5px 10px;
        font-size: 9px;
    }

    .cm-det-card-header {
        padding: 6px 10px 3px;
        font-size: 9px;
    }

    .cm-det-code {
        font-size: 9px;
        padding: 6px 8px;
        max-height: 150px;
    }

    .cm-det-copy {
        font-size: 8px;
        padding: 1px 3px;
    }

    .cm-panel-title {
        font-size: 9px;
        padding: 6px 10px;
    }

    /* Touch targets must be ≥32px */
    .cm-filter-btn,
    .cm-det-tab,
    .cm-tactic-item,
    .cm-technique-card,
    .cm-threat-card {
        min-height: 32px;
        display: flex;
        align-items: center;
    }

    /* Prevent iOS zoom on input focus */
    .cm-search-input {
        font-size: 16px;
    }
}

/* ---- P. LIGHT MODE TWEAKS ---- */
[data-theme="light"] .cm-det-tabs {
    scrollbar-color: #d4d4d4 transparent;
}

[data-theme="light"] .cm-det-tabs::-webkit-scrollbar-thumb {
    background: #d4d4d4;
}

[data-theme="light"] .cm-split {
    background: #f0f0f0;
    border-color: #f0f0f0;
}

[data-theme="light"] .cm-empty {
    color: #9ca3af;
}

/* ---- scripts/page-statistics.js ---- */
/* ---- EDGE-CASE POLISH — overflow, alignment, responsive refinements ---- */

/* A. LONG CONTENT: force word-break & ellipsis on text-heavy cells */

.sp-page .sp-bar-label {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.sp-page .sp-mitre-name {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sp-page .sp-mitre-id {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sp-page .sp-mitre-tactic {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sp-page .sp-actor-info {
  min-width: 0;
}

.sp-page .sp-actor-name {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sp-page .sp-actor-origin,
.sp-page .sp-actor-motiv {
  overflow-wrap: break-word;
  word-break: break-word;
}

.sp-page .sp-tag {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* B. ALIGNMENT: ensure numbers are right-aligned & tabular */

.sp-page .sp-bar-count,
.sp-page .sp-bar-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sp-page .sp-lang-count {
  font-variant-numeric: tabular-nums;
}

.sp-page .sp-mitre-row > .sp-bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sp-page .sp-actor-row > .sp-bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sp-page .sp-chart-val {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* C. VERTICAL CENTERING: dots in ring legend + all icon/badge alignments */

.sp-page .sp-ring-dot {
  vertical-align: middle;
}

.sp-page .sp-ring-leg-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-page .sp-bar-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sp-page .sp-actor-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* D. RESPONSIVE REFINEMENTS: word-break at all breakpoints */

@media (max-width: 1000px) {
  .sp-page .sp-mitre-row {
    grid-template-columns: 20px minmax(60px, auto) 1fr 28px;
    gap: 8px;
  }
  .sp-page .sp-mitre-id {
    min-width: auto;
  }
  .sp-page .sp-mitre-name {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .sp-page .sp-bar-label {
    min-width: 0;
    max-width: 100%;
  }

  .sp-page .sp-bar-row {
    align-items: center;
  }

  .sp-page .sp-mitre-row {
    grid-template-columns: 20px minmax(50px, auto) 1fr 28px;
    gap: 6px;
    height: auto;
    padding: 0 6px;
  }

  .sp-page .sp-mitre-id {
    font-size: 11px;
    min-width: auto;
  }

  .sp-page .sp-mitre-name {
    min-width: 0;
    font-size: 11px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .sp-page .sp-actor-row {
    grid-template-columns: 20px 1fr 28px;
    gap: 6px;
    height: auto;
    padding: 8px 6px;
  }

  .sp-page .sp-actor-info {
    min-width: 0;
    overflow: hidden;
  }

  .sp-page .sp-actor-name {
    min-width: 0;
    font-size: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .sp-page .sp-actor-meta {
    font-size: 9px;
    margin-top: 2px;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .sp-page .sp-bar-label {
    min-width: 0;
    max-width: 100%;
    font-size: 10px;
  }

  .sp-page .sp-bar-row {
    grid-template-columns: minmax(50px, auto) 1fr 28px;
    gap: 6px;
    height: auto;
    align-items: center;
  }

  .sp-page .sp-mitre-row {
    grid-template-columns: minmax(60px, 1fr) 24px;
    gap: 6px;
    height: auto;
    padding: 6px;
  }

  .sp-page .sp-mitre-id {
    min-width: 0;
    font-size: 10px;
  }

  .sp-page .sp-mitre-name {
    min-width: 0;
    font-size: 10px;
  }

  .sp-page .sp-actor-row {
    grid-template-columns: 1fr 24px;
    gap: 6px;
    height: auto;
    padding: 6px;
  }

  .sp-page .sp-actor-name {
    min-width: 0;
    font-size: 11px;
  }

  .sp-page .sp-actor-meta {
    font-size: 8px;
    gap: 2px;
  }

  .sp-page .sp-actor-sep {
    display: none;
  }

  .sp-page .sp-tag-cloud {
    gap: 8px 10px;
  }

  .sp-page .sp-tag {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }
}

/* E. TOUCH TARGETS: ensure interactive elements ≥32px height where possible */

.sp-page .sp-hero-card {
  min-height: 32px;
}

.sp-page .sp-bar-track {
  min-height: 20px;
}

.sp-page .sp-stack-seg {
  min-height: 9px;
}

.sp-page .sp-chart-bar {
  min-width: 8px;
}

/* F. WIDE CONTENT CONTAINMENT: prevent page overflow */

.sp-page .sp-mitre-list,
.sp-page .sp-actor-list,
.sp-page .sp-bars {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sp-page .sp-mitre-row,
.sp-page .sp-actor-row {
  flex-shrink: 0;
  min-width: min-content;
}

.sp-page {
  overflow-x: hidden;
}

.sp-page .sp-tag-cloud {
  overflow-x: hidden;
  word-break: break-word;
}

/* G. HEADER OVERFLOW: ensure timestamp doesn't break at mobile */

.sp-page .sp-header-ts,
.sp-page .sp-header-ver {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .sp-page .sp-header {
    gap: 6px;
  }
  .sp-page .sp-header-ts,
  .sp-page .sp-header-ver {
    font-size: 10px;
  }
}

/* ---- scripts/page-debriefs.js ---- */
/* ============================================================
   POLISH FIXES — Long Content, Alignment, Mobile, Signal Fidelity
   ============================================================ */

/* A. LONG CONTENT WORD-BREAK & ELLIPSIS */

.db-entry-title {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.db-threat-title {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.db-summary-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.db-theme-text,
.db-highlight-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.db-attr-name {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* B. BADGE & CHIP LISTS WITH FLEX-WRAP */

.db-entry-badges-row {
    flex-wrap: wrap;
    align-content: flex-start;
}

.db-entry-themes-preview {
    flex-wrap: wrap;
    gap: 6px;
}

.db-mitre-grid {
    flex-wrap: wrap;
    gap: 6px;
}

.db-attr-cards {
    flex-wrap: wrap;
    gap: 8px;
}

/* C. TWO-COLUMN ROWS: STACK ON LONG CONTENT */

.db-threat-row {
    flex-wrap: wrap;
    gap: 12px;
}

.db-threat-id {
    min-width: auto;
}

.db-threat-title {
    flex-basis: 100%;
    margin-top: 2px;
}

.db-threat-arrow {
    align-self: flex-start;
}

/* D. ALIGNMENT: VERTICAL CENTER FOR ICONS/DOTS/TEXT */

.db-threat-group-header {
    align-items: center;
    gap: 8px;
}

.db-sev-detail-row {
    align-items: center;
}

.db-sev-detail-dot {
    flex-shrink: 0;
    margin-top: 2px;
}

.db-theme-item {
    align-items: flex-start;
    gap: 12px;
}

.db-theme-idx {
    margin-top: 2px;
    flex-shrink: 0;
}

.db-highlight-item {
    align-items: flex-start;
    gap: 10px;
}

.db-highlight-marker {
    margin-top: 1px;
    flex-shrink: 0;
}

/* E. TABULAR NUMBERS IN TABLES */

.db-sev-detail-count,
.db-stat-mini .db-stat-num,
.db-ioc-count {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* F. SIGNAL FIDELITY: REPLACE HARDCODED COLORS WITH TOKENS */

.db-badge-sky {
    color: var(--det-sigma);
    background: rgba(125, 211, 252, 0.1);
}

.db-badge-mint {
    color: var(--severity-low);
    background: rgba(168, 230, 207, 0.1);
}

.db-badge-peach {
    color: var(--severity-high);
    background: rgba(253, 186, 116, 0.1);
}

.db-badge-lavender {
    color: var(--severity-medium);
    background: rgba(196, 181, 253, 0.1);
}

.db-sev-critical {
    background: var(--severity-critical);
}

.db-sev-high {
    background: var(--severity-high);
}

.db-sev-medium {
    background: var(--severity-medium);
}

.db-sev-low {
    background: var(--severity-low);
}

.db-cov-fill {
    background: var(--severity-low);
}

.db-det-prog-fill {
    background: var(--severity-low);
}

.db-det-pct {
    color: var(--severity-low);
}

.db-update-tag {
    color: var(--severity-high);
    background: rgba(253, 186, 116, 0.12);
}

.db-boot-blink {
    color: var(--severity-low);
}

.db-search-prompt {
    color: var(--severity-low);
}

.db-theme-chip {
    background: var(--bg-hover);
}

.db-cov-bar {
    background: var(--bg-surface-alt);
}

.db-ioc-bar {
    background: var(--bg-surface-alt);
}

.db-det-prog {
    background: var(--bg-surface-alt);
}

.db-sev-bar {
    background: var(--bg-surface-alt);
}

.db-sev-detail-bar {
    background: var(--bg-surface-alt);
}

.db-actor-dot {
    background: rgba(253, 164, 175, 0.15);
    color: var(--severity-critical);
}

.db-nation-tag {
    color: #fde68a;
    background: rgba(253, 230, 138, 0.1);
}

.db-footer-author {
    color: var(--accent-purple);
}

.db-theme-idx {
    color: var(--accent-purple);
}

.db-marker-pulse {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    box-shadow: 0 0 8px rgba(196, 181, 253, 0.4);
}

.db-latest-tag {
    color: #0a0a0a;
    background: var(--accent-purple);
}

.db-highlight-marker {
    color: var(--severity-low);
}

.db-threat-id {
    color: var(--severity-high);
}

.db-mitre-badge {
    color: var(--det-sigma);
    background: rgba(125, 211, 252, 0.08);
    border-color: rgba(125, 211, 252, 0.15);
}

.db-attr-name {
    color: var(--severity-critical);
}

.db-val-threats {
    color: var(--severity-critical);
}

.db-val-dets {
    color: var(--det-sigma);
}

.db-stat-threats {
    color: var(--severity-critical);
}

.db-stat-dets {
    color: var(--det-sigma);
}

/* G. MOBILE: PREVENT HORIZONTAL OVERFLOW & ADJUST TOUCH TARGETS */

@media (max-width: 768px) {
    .db-threat-row {
        gap: 8px;
        padding: 8px 10px;
    }

    .db-threat-id {
        min-width: 70px;
        font-size: 11px;
        flex-shrink: 0;
    }

    .db-threat-title {
        flex-basis: auto;
        margin-top: 0;
    }

    .db-threat-arrow {
        display: none;
    }

    .db-entry-summary {
        min-width: 0;
    }

    .db-entry-title {
        font-size: 13px;
    }

    .db-stat-mini {
        min-width: 70px;
    }

    .db-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    .db-sub-btn,
    .db-clear-btn,
    .db-retry-btn {
        min-height: 36px;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .db-entry-title {
        font-size: 12px;
    }

    .db-threat-row {
        flex-direction: column;
        gap: 4px;
        padding: 6px 8px;
    }

    .db-threat-id {
        font-size: 10px;
    }

    .db-stat-mini {
        min-width: 60px;
    }

    .db-threat-sev-dot {
        width: 6px;
        height: 6px;
    }

    .db-sev-detail-dot {
        width: 6px;
        height: 6px;
    }

    .db-entry-date-block {
        width: 45px;
        padding-right: 8px;
    }

    .db-agg-num {
        font-size: 16px;
    }

    .db-sub-btn,
    .db-clear-btn,
    .db-retry-btn {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 32px;
    }

    .db-search-input,
    .db-date-input {
        font-size: 16px;
    }
}

/* ---- scripts/page-my-feeds.js ---- */
/* ===== EDGE-CASE POLISH: Long content overflow & mobile fixes ===== */

/* Feed card name: long titles must not overflow or clip */
.mf-card-name {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Filter pills: long individual values get wrapped properly */
.mf-pill {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Card filter row: ensure pills wrap when list is long */
.mf-card-filters {
  min-width: 0;
}

/* Modal label: prevent long labels like "filter_groups (main = AND...)" from breaking layout */
.mf-field-label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Textarea and code blocks: horizontal scroll instead of pushing page wide */
.mf-textarea,
.mf-lib-code-body,
.mf-lib-code-mini {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Library item main: long IDs and titles need proper flex sizing */
.mf-lib-item-main {
  min-width: 0;
}

.mf-lib-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

.mf-lib-id {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Drill-down row: two-column label + value wrapping for long content */
.mf-lib-dd-row {
  min-width: 0;
}

.mf-lib-dd-row > span:not(.mf-lib-dd-label):not(.mf-badge):not(.mf-pill) {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Multiple badges/pills in drill-down row: ensure they wrap */
.mf-lib-dd-row .mf-badge,
.mf-lib-dd-row .mf-pill {
  flex-wrap: wrap;
}

/* Section headers: add rounded corners for Signal fidelity */
.mf-lib-section-head {
  border-radius: var(--rad-sm);
}

.mf-lib-section-head:hover {
  background: var(--bg-2);
}

/* Library item: ensure consistent padding/radius */
.mf-lib-item {
  border-radius: var(--rad-sm);
}

.mf-card {
  border-radius: var(--rad-sm);
}

/* Modal itself: ensure padding and rounded corners */
.mf-modal {
  border-radius: var(--rad-lg);
}

/* Group tabs: ensure no sharp corners */
.mf-group-tab {
  border-radius: var(--rad-sm);
}

.mf-group-add {
  border-radius: var(--rad-sm);
}

/* Chip and color swatches: rounded corners */
.mf-chip {
  border-radius: 99px;
}

.mf-color-swatch {
  border-radius: var(--rad-sm);
}

/* Drilldown panels: rounded corners */
.mf-lib-drilldown {
  border-radius: var(--rad-sm);
}

/* Copy button in code block: rounded corner */
.mf-lib-copy {
  border-radius: var(--rad-sm);
}

/* ===== MOBILE FIXES (max-width: 768px) ===== */

@media (max-width: 768px) {
  /* Grid: stack to single column, no gap increase on small screens */
  .mf-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Card: reduce padding on tablet */
  .mf-card {
    padding: 13px 12px;
  }

  /* Modal: ensure it's readable but not too large */
  .mf-modal {
    padding: 18px 16px;
  }

  /* Tabs: allow wrap but stay compact */
  .mf-tabs {
    gap: 2px;
    flex-wrap: wrap;
  }

  /* Tab button: reduce padding */
  .mf-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Library item: stack ID/title vertically on narrow screens */
  .mf-lib-item-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .mf-lib-id {
    width: 100%;
  }

  .mf-lib-title {
    width: 100%;
  }

  /* Drill-down row: label should stack above value on narrow screens */
  .mf-lib-dd-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .mf-lib-dd-label {
    flex: 0 0 auto;
    margin-bottom: 3px;
  }

  /* Drill-down body content: full width on mobile */
  .mf-lib-dd-row > span:not(.mf-lib-dd-label):not(.mf-badge):not(.mf-pill) {
    width: 100%;
  }
}

/* ===== MOBILE FIXES (max-width: 480px) ===== */

@media (max-width: 480px) {
  /* Page padding: tighter on phone */
  .mf-page {
    padding: 14px 11px 24px;
  }

  /* Modal on phone: minimal padding, no horizontal scroll */
  .mf-modal {
    max-width: 100%;
    padding: 16px 14px;
  }

  .mf-modal-title {
    font-size: 13px;
  }

  /* Card on phone: tighter spacing */
  .mf-card {
    padding: 12px 12px 11px;
    gap: 6px;
  }

  .mf-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .mf-card-name {
    font-size: 13px;
    width: 100%;
  }

  .mf-card-counts {
    font-size: 10px;
    width: 100%;
  }

  /* Card actions: wrap tightly, increase touch target */
  .mf-card-actions {
    width: 100%;
    gap: 4px;
  }

  .mf-card-actions button,
  .mf-card-actions a {
    font-size: 10px;
    padding: 6px 8px;
    flex: 1 1 48%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Filter pills: smaller on phone but still readable */
  .mf-pill {
    font-size: 8.5px;
    padding: 2px 5px;
  }

  /* Modal fields: full width, readable inputs */
  .mf-input,
  .mf-textarea {
    font-size: 16px;
    padding: 10px 8px;
  }

  /* Group tabs: compact on phone */
  .mf-group-tabs {
    gap: 3px;
    flex-wrap: wrap;
  }

  .mf-group-tab,
  .mf-group-add {
    padding: 6px 8px;
    font-size: 9px;
  }

  /* Library section header: compact */
  .mf-lib-section-head {
    padding-bottom: 6px;
    margin-bottom: 6px;
  }

  .mf-lib-section-title {
    font-size: 10px;
  }

  /* Library item: single column on phone */
  .mf-lib-item {
    padding: 10px 9px;
  }

  .mf-lib-item-main {
    gap: 6px;
  }

  .mf-lib-id {
    font-size: 10px;
  }

  .mf-lib-title {
    font-size: 11px;
  }

  .mf-lib-meta {
    gap: 4px;
    font-size: 9px;
  }

  /* Library remove button: larger touch target */
  .mf-lib-remove {
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
    font-size: 16px;
  }

  /* Drill-down: tighter on phone */
  .mf-lib-drilldown {
    padding: 10px 9px;
    margin-top: 8px;
  }

  .mf-lib-dd-row {
    padding: 5px 0;
    font-size: 10.5px;
    gap: 6px;
  }

  .mf-lib-dd-label {
    font-size: 9px;
  }

  /* Code preview on phone: full width scroll */
  .mf-lib-code-wrap {
    margin-top: 6px;
  }

  .mf-lib-code-body {
    font-size: 10px;
    padding: 8px 10px;
  }

  .mf-lib-code-mini {
    font-size: 10px;
    padding: 7px 9px;
  }

  .mf-lib-code-head {
    font-size: 9px;
    padding: 6px 9px;
  }

  .mf-lib-copy {
    font-size: 9px;
    padding: 3px 6px;
  }

  /* Tabs on phone: smaller */
  .mf-tabs {
    gap: 2px;
    margin-bottom: 16px;
  }

  .mf-tab {
    padding: 7px 10px;
    font-size: 11px;
  }

  /* Modal actions: stack on phone */
  .mf-modal-actions {
    flex-direction: column-reverse;
    gap: 6px;
  }

  .mf-modal-actions .mf-btn,
  .mf-modal-actions .mf-btn-secondary {
    width: 100%;
  }

  /* Color row: 3 swatches per row on phone */
  .mf-color-row {
    gap: 6px;
  }

  .mf-color-swatch {
    width: 32px;
    height: 32px;
  }

  /* Modules grid: single column on phone */
  .mf-modules {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Empty state: tighter text on phone */
  .mf-empty {
    padding: 40px 14px;
    font-size: 12px;
  }

  /* Limit bar: smaller on phone */
  .mf-limit-bar {
    font-size: 10px;
    margin-bottom: 12px;
  }
}

/* ---- /Users/threadlinqs/Documents/threadlinqs-Intelligence-Prod/scripts/page-profile.js ---- */
/* ============================================================
   PROFILE PAGE — EDGE-CASE POLISH
   Long content control, flex child constraints, mobile wrapping
   ============================================================ */

/* Long text on flex children: constrain width so ellipsis works */
#mainContent .prf-lib-title,
#mainContent .prf-act-target {
  min-width: 0;
}

/* Library ID: allow break on very long IDs (CVE, domain, hash) */
#mainContent .prf-lib-id {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Activity type: constrain for long event type names */
#mainContent .prf-act-type {
  min-width: 0;
}

/* Session detail value: break long IPs, locations, dates */
#mainContent .prf-sec-detail-value {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Overview row values: wrap/break email, display_name, bio on long input */
#mainContent .prf-value {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Plan tier name: break long tier labels */
#mainContent .prf-plan-tier {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Library rows: allow wrap with proper spacing */
#mainContent .prf-lib-row {
  flex-wrap: wrap;
  gap: 8px;
}

/* Activity filter selects: wrap on narrow viewport */
#mainContent .prf-act-filters {
  flex-wrap: wrap;
  gap: 12px;
}

/* Library export buttons: wrap on narrow with consistent gap */
#mainContent .prf-lib-export-bar {
  flex-wrap: wrap;
  gap: 8px;
}

/* Stat strip: tabular-nums for right-aligned numbers */
#mainContent .prf-stat-number {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Activity row alignment: dot centered vertically with flex */
#mainContent .prf-act-dot {
  flex-shrink: 0;
  align-self: center;
}

/* Mobile: ensure activity row doesn't overflow on narrow screens */
@media (max-width: 768px) {
  #mainContent .prf-lib-export-bar {
    gap: 6px;
  }
  #mainContent .prf-lib-row {
    gap: 4px;
  }
  #mainContent .prf-sec-detail-value {
    word-break: break-word;
  }
}

/* Mobile 480px: tighter wrapping, ensure no horizontal scroll */
@media (max-width: 480px) {
  #mainContent .prf-lib-title {
    flex-basis: 100%;
  }
  #mainContent .prf-act-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  #mainContent .prf-value {
    max-width: 100%;
  }
  #mainContent .prf-lib-export-bar button {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---- scripts/page-admin.js ---- */
/* =====================================================
   CHECKLIST A: Long Content Overflow Prevention
   ===================================================== */

/* Long IDs, CVE, threat names, domains, IPs must break */
.adm-uam-host,
.adm-uam-path,
.adm-session-ip,
.adm-activity-target,
.adm-lb-id,
.adm-feed-name,
.adm-tlql-query,
.adm-uam-bot-name {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Session detail IP/UA can be long */
.adm-detail-session {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* User email can be very long */
.adm-user-email {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Activity feed target IDs (threats, etc) can overflow */
.adm-activity-target {
  min-width: 0;
  flex: 1;
}

/* Feedback threat title wrapping */
.adm-fb-threat-title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* TLQL query lines must wrap, not scroll */
.adm-tlql-query {
  word-break: break-word;
  white-space: normal;
}

/* Long chip/tag/badge LISTS must wrap */
.adm-uam-cats {
  flex-wrap: wrap;
}

.adm-engagement-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adm-eng-item {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Feedback meta row (date, name, threat link, title) wrapping */
.adm-fb-meta {
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.adm-fb-threat {
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

/* =====================================================
   CHECKLIST B: Wide Elements (Tables, Code) Overflow
   ===================================================== */

/* Tables must scroll inside their own box, not the page */
.adm-uam-pages,
.adm-uam-list {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}

/* Feed raw JSON pre block */
.adm-feed-raw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-break: break-word;
}

/* Detail timeline max width for target IDs */
.adm-detail-timeline {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Heatmap for 24h needs scroll room */
.adm-uam-heat-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =====================================================
   CHECKLIST C: Alignment & Centering Fixes
   ===================================================== */

/* Icon/badge vertical centering in rows */
.adm-activity-icon {
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

.adm-tlql-ok,
.adm-tlql-fail {
  vertical-align: middle;
}

/* Numbers right-aligned & tabular */
.adm-uam-cnt,
.adm-lb-views,
.adm-lb-copies,
.adm-lb-saves {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status badges inline alignment */
.adm-fb-status {
  vertical-align: baseline;
}

/* Tier colors vertically centered */
.adm-session-tier {
  text-align: center;
}

/* =====================================================
   CHECKLIST D: Spacing & Rhythm Consistency
   ===================================================== */

/* Card padding consistency */
.adm-uam-card {
  padding: 14px 16px;
}

.adm-feed-row,
.adm-tlql-row {
  padding: 8px 10px;
}

/* Section spacing rhythm */
.adm-detail-section {
  padding: 12px 14px;
  gap: 8px;
}

.adm-section-title {
  margin-bottom: 12px;
}

/* =====================================================
   CHECKLIST E: Mobile Responsive (max-width: 480px)
   ===================================================== */

@media (max-width: 480px) {
  /* Tables become scrollable on small screens */
  .adm-uam-pages,
  .adm-uam-list {
    font-size: 9px;
  }

  /* Heatmap cells smaller on mobile */
  .adm-uam-heat-cell {
    min-width: 6px;
    height: 16px;
  }

  /* Flex rows stack on mobile */
  .adm-user-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
  }

  .adm-user-row > * {
    flex-shrink: 1;
    min-width: 0;
  }

  /* User email breaks on mobile */
  .adm-user-email {
    font-size: 12px;
    word-break: break-all;
  }

  /* Feed/TLQL rows on mobile */
  .adm-feed-row,
  .adm-tlql-row {
    padding: 8px;
  }

  .adm-feed-summary,
  .adm-tlql-query {
    font-size: 10px;
    word-break: break-word;
  }

  .adm-feed-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Touch targets >= 32px (buttons) */
  .adm-action-btn {
    min-height: 32px;
    padding: 8px 12px;
  }

  /* Input font-size:16px prevents iOS zoom */
  .adm-search-input,
  .adm-note-input,
  .adm-delete-input,
  .adm-fb-note-input,
  .adm-code-input {
    font-size: 16px;
  }

  /* Unstick detail sections on mobile */
  .adm-detail-grid {
    grid-template-columns: 1fr;
  }

  /* Two-col layout stacks */
  .adm-uam-twocol {
    grid-template-columns: 1fr;
  }

  /* Filter bar wraps */
  .adm-activity-filters,
  .adm-uam-filters,
  .adm-fb-bar {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* =====================================================
   CHECKLIST F: Signal Fidelity (Rounded Corners, Colors)
   ===================================================== */

/* Rounded corners: use design tokens only */
.adm-uam-card,
.adm-detail-section,
.adm-feed-row,
.adm-tlql-row,
.adm-action-btn,
.adm-sort-btn,
.adm-tier-select,
.adm-bar-track,
.adm-bar-fill,
.adm-funnel-bar {
  border-radius: var(--rad);
}

.adm-bar-track,
.adm-bar-fill {
  border-radius: 99px;
}

.adm-heat-cell {
  border-radius: var(--rad-sm);
}

.adm-feed-color {
  border-radius: 50%;
}

/* Violet accents for active/hover/links */
.adm-tab.active {
  color: var(--violet);
  border-color: var(--violet);
}

.adm-feed-row:hover,
.adm-tlql-row:hover {
  border-color: var(--violet);
}

.adm-action-btn:hover {
  border-color: var(--violet);
  color: var(--violet-ink);
}

.adm-fb-threat {
  color: var(--violet);
}

.adm-fb-threat:hover {
  color: var(--violet-ink);
  text-decoration: underline;
}

/* Mono "// label" eyebrows */
.adm-section-title,
.adm-uam-card h3,
.adm-fb-bar,
.adm-activity-filters {
  font-family: var(--font-mono);
}

/* Bricolage on headings + big numbers */
.adm-title,
.adm-engagement-big,
.adm-stat-val {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Severity color tokens (rose/peach/lavender/mint) */
.adm-sev-critical {
  color: var(--rose);
}

.adm-sev-high {
  color: var(--amber);
}

.adm-sev-medium {
  color: var(--violet);
}

.adm-sev-low {
  color: var(--mint);
}

/* Status badges with signal colors */
.adm-status-active {
  color: var(--mint);
}

.adm-status-suspended {
  color: var(--rose);
}

.adm-fb-status-pending {
  color: var(--amber);
}

.adm-fb-status-approved {
  color: var(--mint);
}

.adm-fb-status-rejected {
  color: var(--rose);
}

/* =====================================================
   CHECKLIST G: Empty / Loading / Error States
   ===================================================== */

.adm-empty,
.adm-loading,
.adm-uam-empty,
.adm-uam-err {
  font-family: var(--font-mono);
  color: var(--ink-3);
  padding: 16px;
  text-align: center;
  border-radius: var(--rad);
  background: var(--bg-1);
}

.adm-uam-err {
  background: var(--bg-1);
  color: var(--rose);
}

/* =====================================================
   PAGE-SPECIFIC: User Table (long emails)
   ===================================================== */

.adm-user-email {
  min-width: 0;
  flex: 3;
  word-break: break-all;
}

/* =====================================================
   PAGE-SPECIFIC: Activity Feed (long targets)
   ===================================================== */

.adm-activity-target {
  min-width: 0;
  flex: 1;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* =====================================================
   PAGE-SPECIFIC: Geo/Sessions (long IPs + UAs)
   ===================================================== */

.adm-session-ip {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* User agent truncation for sessions */
.adm-session-row {
  word-break: break-word;
}

/* ---- scripts/page-mcp.js ---- */
/* ========== MCP PAGE EDGE-CASE POLISH FIXES ========== */

/* A. LONG CONTENT — word-break & ellipsis fixes */

.mcp-ep-path {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.mcp-tool-name-v2 {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.mcp-param-name {
    word-break: break-all;
    overflow-wrap: anywhere;
}

.mcp-tp-name {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mcp-tp-desc {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mcp-tool-desc-v2 {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mcp-ep-desc {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* B. FLEX CHILDREN with minmax to prevent overflow */

.mcp-tool-param {
    min-width: 0;
}

.mcp-tool-head {
    min-width: 0;
}

.mcp-ep-header {
    min-width: 0;
}

.mcp-ex {
    min-width: 0;
}

/* Long list wrapping — chip/badge/tag lists */

.mcp-hero-badges {
    flex-wrap: wrap;
    gap: 10px;
}

.mcp-tool-params-v2 {
    flex-wrap: wrap;
}

.mcp-auth-tiers {
    flex-wrap: wrap;
}

/* C. VERTICAL CENTER alignment for icons/dots/badges with text */

.mcp-tool-head {
    align-items: center;
}

.mcp-tool-dot {
    flex-shrink: 0;
}

.mcp-status-row {
    align-items: center;
}

.mcp-status-dot {
    flex-shrink: 0;
}

.mcp-tier-dot {
    flex-shrink: 0;
}

.mcp-auth-step {
    align-items: flex-start;
}

.mcp-auth-num {
    flex-shrink: 0;
    text-align: center;
}

/* E. MOBILE RESPONSIVE — viewport sizing */

@media (max-width: 768px) {
    .mcp-ep-path {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .mcp-tool-param {
        flex-wrap: wrap;
        min-width: 0;
    }

    .mcp-tp-name {
        min-width: auto;
        flex-basis: auto;
    }

    .mcp-tp-type {
        min-width: auto;
        flex-basis: auto;
    }

    .mcp-tp-desc {
        flex-basis: 100%;
        margin-top: 2px;
        min-width: 0;
    }

    .mcp-ex {
        flex-direction: column;
    }

    .mcp-ex-call {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .mcp-auth-step {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .mcp-page {
        padding: 0 12px 50px;
    }

    .mcp-code {
        font-size: 11px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .mcp-ep-path {
        font-size: 11px;
    }

    .mcp-tool-name-v2 {
        font-size: 12px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .mcp-hero-endpoint {
        flex-direction: column;
        gap: 6px;
    }
}

/* F. SIGNAL FIDELITY — rounded corners using CSS tokens */

.mcp-status-row {
    border-radius: var(--rad-sm);
}

.mcp-hbadge {
    border-radius: var(--rad-sm);
}

.mcp-hero-endpoint {
    border-radius: var(--rad-sm);
}

.mcp-codeblock {
    border-radius: var(--rad);
}

.mcp-tool-v2 {
    border-radius: var(--rad);
}

.mcp-endpoint {
    border-radius: var(--rad);
}

.mcp-stat-card {
    border-radius: var(--rad);
}

.mcp-link-v2 {
    border-radius: var(--rad);
}

.mcp-ex {
    border-radius: var(--rad);
}

.mcp-auth-tiers {
    border-radius: var(--rad);
}

.mcp-tryit {
    border-radius: var(--rad);
}

/* G. EMPTY STATE styling */

.mcp-tryit-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.mcp-tryit-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px dashed var(--line);
    border-radius: var(--rad-sm);
}

/* TABLE right-align numbers, left-align headers */

.mcp-ep-params-table td:first-child {
    text-align: left;
}

.mcp-ep-params-table td:last-child {
    text-align: left;
}

/* Numeric values in tables */
.mcp-param-type {
    text-align: center;
}

/* ---- app.js (threat detail dp-*/tp-* panes) ---- */
/* ===================================================================
   EDGE-CASE POLISH: Threat Detail Panes (dp-* and tp-*)
   Long content overflow, mobile wrapping, alignment fixes
   =================================================================== */

/* ── INDICATORS TAB: Long IOC values (hashes, domains, IPs) ── */
.dp-technique-row {
  word-break: break-all;
  overflow-wrap: anywhere;
}

.dp-technique-row span:nth-child(2) {
  min-width: 0;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ── DETECTIONS TAB: Collapsed detection titles ── */
.dp-det-collapsed {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dp-det-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.dp-det-title-collapsed {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex: 1;
}

.dp-det-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── DETECTION CODE BLOCKS: Horizontal scroll for long queries ── */
.dp-det-code {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.dp-code-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── REFERENCES TAB: Long titles and URLs ── */
.dp-ref-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.dp-ref-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.dp-ref-agent {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── TIMELINE: Long event text and source URLs ── */
.dp-timeline-row {
  display: grid;
  grid-template-columns: 104px 12px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.dp-tl-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.dp-tl-text {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.dp-tl-source-link,
.dp-tl-source {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ── TIMELINE NESTED: Tag/technique/actor labels wrap ── */
.dp-tl-nested {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
}

.dp-tl-sub-section {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.dp-tl-sub-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.dp-tl-sub-item {
  font-size: 12px;
  color: var(--ink-3);
  padding: 2px 6px;
  background: var(--bg-2);
  border-radius: var(--rad-sm);
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}

/* ── MITRE TECHNIQUE ROWS: Long technique names ── */
.dp-technique-name {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── DETECTION EXPANDED: Long description text ── */
.dp-det-desc {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.5;
}

.dp-det-tuning-text {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ── DETECTION MITRE FOOTER: Long technique IDs wrap ── */
.dp-det-mitre-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dp-det-mitre-id {
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────── */
/* THREAT DETAIL PAGE (tp-*) — Long content polish          */
/* ────────────────────────────────────────────────────────── */

/* ── Threat title overflow on very long names ── */
.tp-title {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ── Actor names and attribution values ── */
.tp-attr-v {
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: left;
}

/* ── Sector/Region pill wrapping (already has flex-wrap but ensure gap) ── */
.tp-tgt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Tag cloud wrapping ── */
.tp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tp-tag {
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}

/* ── Detection language tabs: wrap when crowded ── */
.dp-det-lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dp-lang-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

.dp-copy-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────── */
/* MOBILE OPTIMIZATIONS (@media max-width: 768px)           */
/* ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Detail pane references: ensure title wraps on mobile */
  .dp-ref-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dp-ref-type {
    flex-shrink: 0;
  }

  .dp-ref-agent {
    margin-top: 2px;
  }

  /* Timeline: stack when narrow */
  .dp-timeline-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dp-tl-date {
    order: -1;
  }

  .dp-tl-content {
    grid-column: 1;
  }

  /* Detection language tabs: single row with horizontal scroll if needed */
  .dp-det-lang-tabs {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Code blocks: ensure scroll on mobile */
  .dp-det-code,
  .dp-code-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Technique rows: stack columns when space constrained */
  .dp-technique-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dp-technique-row > :last-child {
    grid-column: 1;
  }

  /* Detection title: ensure wraps */
  .dp-det-title-collapsed,
  .dp-det-title-expanded {
    min-width: 0;
    word-break: break-word;
  }

  /* Threat detail tags: ensure tap targets stay above 32px height */
  .tp-tag,
  .tp-pill {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Input font-size to prevent iOS zoom-on-focus */
  .dp-engage-textarea,
  textarea,
  input[type="text"],
  input[type="email"] {
    font-size: 16px;
  }
}

/* ============================================================================
   KILLCHAIN-REPLAY-CONSOLE  (prefix: kr-)
   Repurposes #tpHero (banner + index), #tpTabs (spine), #tpSide (vitals rail),
   #tpMain (evidence dock + dossier). Uses Signal CSS tokens. Dark + light.
   ============================================================================ */

/* per-severity accent for the page */
.kr-hero[data-sev="critical"], .kr-stage[data-sev="critical"] { --kr-sev: var(--sev-critical); }
.kr-hero[data-sev="high"]     { --kr-sev: var(--sev-high); }
.kr-hero[data-sev="medium"]   { --kr-sev: var(--sev-medium); }
.kr-hero[data-sev="low"]      { --kr-sev: var(--sev-low); }
.kr-hero { --kr-sev: var(--violet); }

/* severity color helpers */
.kr-sev-critical { stroke: var(--sev-critical); } .kr-sev-high { stroke: var(--sev-high); }
.kr-sev-medium { stroke: var(--sev-medium); } .kr-sev-low { stroke: var(--sev-low); }
.kr-sev-critical-txt { color: var(--sev-critical) !important; } .kr-sev-high-txt { color: var(--sev-high) !important; }
.kr-sev-medium-txt { color: var(--sev-medium) !important; } .kr-sev-low-txt { color: var(--sev-low) !important; }
.kr-mint-txt { color: var(--mint) !important; } .kr-sky-txt { color: var(--sky) !important; }
.kr-rose-txt { color: var(--rose) !important; } .kr-amber-txt { color: var(--amber) !important; }
.kr-violet-txt { color: var(--violet-ink) !important; } .kr-lav-txt { color: var(--violet-ink) !important; }
.kr-peach-txt { color: var(--amber) !important; } .kr-ghost-txt { color: var(--ink-4) !important; }
.kr-spl-txt { color: var(--spl) !important; } .kr-kql-txt { color: var(--kql) !important; } .kr-sigma-txt { color: var(--sigma) !important; }
.kr-mint-bg { background: var(--mint); } .kr-amber-bg { background: var(--amber); }
.kr-rose-bg { background: var(--rose); } .kr-ghost-bg { background: var(--ink-4); }

/* override the repurposed containers: tabs region holds the spine (no flex tab row) */
.tp-tabs:has(.kr-spine-wrap) { display: block; padding: 0; overflow: visible; background: var(--bg-1); border-bottom: 1px solid var(--line); position: static; backdrop-filter: none; }
/* P1(1): body track floors at min(640px,100%) so the vitals rail can never starve
   the dossier below a readable width (WCAG reflow); collapsing the rail to 48px hands
   the reclaimed ~252px to the body. Width animates only when motion is allowed. */
.tp-layout:has(.kr-dossier) { display: grid; grid-template-columns: 300px minmax(min(640px, 100%), 1fr); gap: 0; padding: 0; max-width: none; }
.tp-layout.kr-rail-collapsed:has(.kr-dossier) { grid-template-columns: 48px minmax(min(640px, 100%), 1fr); }
@media (prefers-reduced-motion: no-preference) {
  .tp-layout:has(.kr-dossier) { transition: grid-template-columns .22s ease; }
  .tp-side:has(.kr-vitals) { transition: width .22s ease, padding .22s ease; }
}
/* vitals rail = #tpSide (left, sticky); stage column = #tpMain (right) */
.tp-layout:has(.kr-dossier) #tpSide { order: -1; width: 300px; }
.tp-layout.kr-rail-collapsed:has(.kr-dossier) #tpSide { width: 48px; }
.tp-side:has(.kr-vitals) { width: 300px; border-left: none; border-right: 1px solid var(--line); position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 22px 18px; background: var(--bg-1); }
.tp-layout.kr-rail-collapsed .tp-side:has(.kr-vitals) { width: 48px; padding: 12px 4px; overflow: hidden; }
.tp-layout.kr-rail-collapsed .tp-side .kr-vitals { display: none; }
.tp-main:has(.kr-dossier), .tp-main#tpMain { min-width: 0; }
/* rail collapse toggle */
.kr-rail-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 14px; padding: 6px 8px; background: none; border: 1px solid var(--line); border-radius: var(--rad-sm); color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
.kr-rail-toggle:hover { color: var(--ink); border-color: var(--line-2); }
.kr-rail-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.kr-rail-toggle-ico { width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex-shrink: 0; transition: transform .2s ease; }
.kr-rail-toggle-lbl { flex: 1; text-align: left; }
.tp-layout.kr-rail-collapsed .kr-rail-toggle { flex-direction: column; gap: 10px; margin: 0; padding: 8px 2px; border: none; }
.tp-layout.kr-rail-collapsed .kr-rail-toggle-ico { transform: rotate(-135deg); }
.tp-layout.kr-rail-collapsed .kr-rail-toggle-lbl { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
@media (prefers-reduced-motion: reduce) { .kr-rail-toggle-ico { transition: none; } }
.tp-main:has(.kr-stage-wrap), .tp-main:has(.kr-dossier) { padding: 0 0 60px; }

/* fallback when :has() unsupported — still reasonable */
.kr-vitals { display: flex; flex-direction: column; gap: 20px; }

/* ── 0. progress / scrubber ── */
.kr-progress { position: sticky; top: 0; height: 3px; background: var(--line); z-index: 7; cursor: pointer; }
.kr-progress-bar { height: 100%; width: 0; background: var(--violet); box-shadow: 0 0 8px var(--violet-glow); transition: width .08s linear; }

/* ── 1. banner ── */
.kr-hero { position: sticky; top: 3px; z-index: 6; background: color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: padding .2s ease; }
.kr-hero-full { padding: 22px 30px 20px; position: relative; }
.kr-hero-full::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 140% at 90% -10%, var(--violet-tint) 0%, transparent 55%); pointer-events: none; }
.kr-hero-full > * { position: relative; }
.kr-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-bottom: 12px; }
.kr-eb-id { color: var(--violet-ink); font-weight: 600; }
.kr-eb-sep { color: var(--ink-4); }
.kr-status-pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--ink-3); }
.kr-status-pill.live { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.kr-hero-row { display: flex; align-items: flex-start; gap: 14px; }
.kr-diamond { width: 16px; height: 16px; flex-shrink: 0; margin-top: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--kr-sev); box-shadow: 0 0 14px color-mix(in srgb, var(--kr-sev) 60%, transparent); }
.kr-diamond.critical { background: var(--sev-critical); box-shadow: 0 0 16px color-mix(in srgb, var(--sev-critical) 70%, transparent); }
.kr-diamond.high { background: var(--sev-high); } .kr-diamond.medium { background: var(--sev-medium); } .kr-diamond.low { background: var(--sev-low); }
.kr-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--ink); margin: 0 0 12px; max-width: 30ch; }
.kr-summary { font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-2); line-height: 1.55; max-width: 90ch; margin: 0 0 16px; }
.kr-hero-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kr-sev-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: var(--rad-sm); }
.kr-sev-tag.critical { color: var(--sev-critical); background: var(--sev-critical-tint); } .kr-sev-tag.high { color: var(--sev-high); background: var(--sev-high-tint); }
.kr-sev-tag.medium { color: var(--sev-medium); background: var(--sev-medium-tint); } .kr-sev-tag.low { color: var(--sev-low); background: var(--sev-low-tint); }
.kr-active-pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--rose); background: var(--sev-critical-tint); padding: 3px 10px; border-radius: 99px; letter-spacing: .04em; animation: krPulse 2.4s ease-in-out infinite; }
@keyframes krPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.kr-alias-set { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kr-alias { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.kr-tag-toggle { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 3px 9px; cursor: pointer; }
.kr-tag-toggle:hover, .kr-tag-toggle.on { color: var(--violet-ink); border-color: var(--violet); }
.kr-tag-drawer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.kr-tag-drawer[hidden] { display: none !important; }
.kr-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; }
/* shrunk strip */
.kr-hero-strip { display: none; align-items: center; gap: 14px; padding: 0 30px; height: 44px; }
.kr-strip-id { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); font-weight: 600; }
.kr-strip-title { font-family: var(--font-sans); font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.kr-mini-spine { display: inline-flex; gap: 5px; margin-left: auto; }
.kr-mini-dot { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: transparent; border: 1px solid var(--line-3); cursor: pointer; transition: all .12s; }
.kr-mini-dot.on { background: var(--violet); border-color: var(--violet); }
.kr-mini-dot.cov { background: var(--mint); border-color: var(--mint); }
.kr-mini-dot.sel { outline: 2px solid var(--violet-ink); outline-offset: 1px; }
.kr-hero.shrunk .kr-hero-full { display: none; }
.kr-hero.shrunk .kr-hero-strip { display: flex; }

/* ── 2. threat-index verdict ── */
.kr-index { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 22px; padding: 22px 30px 26px; border-bottom: 1px solid var(--line); background: var(--bg); }
.kr-verdict { display: flex; align-items: center; gap: 18px; }
.kr-meter { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.kr-meter-svg { width: 100%; height: 100%; }
.kr-meter-track { fill: none; stroke: var(--line); stroke-width: 8; }
.kr-meter-fill { fill: none; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--violet-glow)); transition: stroke-dasharray 1s cubic-bezier(.2,.7,.2,1); }
.kr-meter-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.kr-meter-num { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink); }
.kr-meter-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; }
.kr-verdict-word { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; }
.kr-verdict-caption { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); line-height: 1.5; letter-spacing: .02em; }
.kr-instruments { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.kr-tile { background: var(--bg-1); padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; min-height: 86px; }
.kr-tile-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kr-tile-val { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.kr-tile-val.dim { color: var(--ink-4); font-size: 14px; font-weight: 500; }
.kr-tile-hint { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }
/* cvss gauge + flip */
.kr-tile-flip { perspective: 600px; cursor: default; }
.kr-tile-flip.has-flip { cursor: pointer; }
.kr-tile-inner { position: relative; transition: transform .5s; transform-style: preserve-3d; flex: 1; }
.kr-tile-flip.flipped .kr-tile-inner { transform: rotateY(180deg); }
.kr-tile-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; gap: 6px; }
.kr-tile-back { transform: rotateY(180deg); }
.kr-gauge { position: relative; width: 56px; height: 56px; }
.kr-gauge svg { width: 100%; height: 100%; }
.kr-gauge-track { fill: none; stroke: var(--line); stroke-width: 5; }
.kr-gauge-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .9s; }
.kr-gauge-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.kr-decode { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 70px; }
.kr-decode-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }
.kr-decode-v { color: var(--ink); }
/* exploit dial */
.kr-dial { display: flex; gap: 4px; }
.kr-dial-seg { flex: 1; height: 8px; border-radius: 2px; background: var(--bg-3); border: 1px solid var(--line-2); }
.kr-dial-seg.lit { background: var(--amber); border-color: var(--amber); }
.kr-dial-seg.lit.hot { background: var(--rose); border-color: var(--rose); }
/* epss spark */
.kr-spark { height: 6px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.kr-spark-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--violet)); }
.kr-epss-loading { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
/* impact */
.kr-impact-row { display: flex; gap: 5px; }
.kr-impact-cell { flex: 1; font-family: var(--font-mono); font-size: 11px; text-align: center; padding: 4px 0; border-radius: var(--rad-sm); background: var(--bg-2); border: 1px solid var(--line); }
.kr-impact-cell b { display: block; font-size: 8px; color: var(--ink-3); }
/* engage */
.kr-engage-row { display: flex; gap: 10px; }
.kr-eng-cell { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }
.kr-eng-cell b { font-family: var(--font-display); font-size: 16px; }

/* ── 3. spine ── */
.kr-spine-wrap { padding: 18px 30px 16px; }
.kr-spine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kr-spine-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kr-replay-btn { font-family: var(--font-mono); font-size: 12px; color: var(--violet-ink); background: var(--violet-tint); border: 1px solid var(--violet); border-radius: var(--rad-sm); padding: 6px 13px; cursor: pointer; transition: all .14s; }
.kr-replay-btn:hover { background: var(--violet); color: #fff; }
/* top headroom so the hover tooltip (.kr-node-tip) + corner badge (.kr-node-badge)
   are not clipped — overflow-x:auto forces overflow-y to clip, so pad the scrollport */
.kr-spine-scroll { overflow-x: auto; overflow-y: visible; padding: 34px 8px 12px; }
.kr-spine { position: relative; display: flex; align-items: flex-start; gap: 0; min-width: 980px; padding: 6px 4px 2px; }
.kr-spine-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
/* P2(A/C): orthogonal Manhattan connectors routed through a top lane above the labels;
   round joins keep the right-angle corners clean; arrowheads mark flow direction. */
.kr-conn { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kr-conn.flow { stroke: var(--violet); stroke-dasharray: 7 6; filter: drop-shadow(0 0 3px var(--violet-glow)); animation: krDash 1s linear infinite; }
.kr-conn.flow.noflow { animation: none; }
/* ghost (only if a rendered pair spans an inactive tactic) — AA-visible in both themes */
.kr-conn.ghost { stroke: var(--ink-4); stroke-width: 1.5; stroke-dasharray: 2 6; opacity: .75; }
/* adjacency-skip: hidden tactics between these two → gapped/long-dash so it doesn't read as
   a true-adjacent step (overrides the flow/ghost dasharray; keeps the flow color + animation). */
.kr-conn.kr-conn-skip { stroke-dasharray: 3 9; opacity: .82; }
.kr-conn-arrow { fill: var(--violet); }
.kr-rib-inert { cursor: default; }
/* P2 fixup: single compact line for a techniques-only stage (replaces N empty lanes) */
.kr-stage-only { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 8px 2px; }
@keyframes krDash { to { stroke-dashoffset: -26; } }
.kr-node { position: relative; z-index: 1; flex: 1; min-width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0 2px; }
.kr-hex { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: var(--bg-2); border: 1.5px solid var(--line-2); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); transition: all .18s; }
.kr-node.on .kr-hex { background: var(--violet-tint); border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet-tint), 0 0 16px -2px var(--violet-glow); }
.kr-node.off { opacity: .32; }
.kr-node.off .kr-hex { background: transparent; border-style: dashed; }
.kr-node.sel .kr-hex { background: var(--violet); border-color: var(--violet-ink); box-shadow: 0 0 0 3px var(--violet-tint), 0 0 22px -2px var(--violet-glow); }
.kr-node:focus-visible { outline: none; }
.kr-node:focus-visible .kr-hex { outline: 2px solid var(--violet-ink); outline-offset: 3px; }
.kr-hex-abbr { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.kr-node.on .kr-hex-abbr { color: var(--violet-ink); }
.kr-node.sel .kr-hex-abbr { color: #fff; }
/* badge now lives directly under .kr-node (NOT .kr-hex, whose clip-path was cropping it) —
   anchor it to the hexagon's visual top-right (hex is 46px, centered in the node) */
.kr-node-badge { position: absolute; top: -3px; left: 50%; transform: translateX(4px); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px; background: var(--violet-deep); color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 600; display: grid; place-items: center; border: 1.5px solid var(--bg-1); z-index: 3; pointer-events: none; }
.kr-node-name { font-family: var(--font-mono); font-size: 8.5px; line-height: 1.15; text-align: center; color: var(--ink-3); max-width: 72px; }
.kr-node.on .kr-node-name { color: var(--ink-2); }
.kr-node.sel .kr-node-name { color: var(--ink); }
.kr-node-dots { display: flex; gap: 3px; height: 6px; }
.kr-mdot { width: 5px; height: 5px; border-radius: 99px; opacity: .9; }
.kr-mdot.mint { background: var(--mint); } .kr-mdot.sky { background: var(--sky); }
.kr-mdot.peach { background: var(--amber); opacity: .35; } .kr-mdot.peach.has { opacity: .9; }
.kr-mdot.lav { background: var(--violet-ink); }
.kr-node-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 10px; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 3px 8px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; box-shadow: var(--shadow-sm); }
.kr-node:hover .kr-node-tip { opacity: 1; }
/* coverage ribbon */
.kr-ribbon { display: flex; gap: 2px; margin-top: 14px; }
.kr-rib-seg { flex: 1; height: 7px; border: none; border-radius: 2px; cursor: pointer; transition: all .14s; }
.kr-rib-seg.mint { background: var(--mint); }
.kr-rib-seg.rose { background: var(--rose); }
.kr-rib-seg.ghost { background: var(--bg-3); border: 1px solid var(--line); }
.kr-rib-seg.rose:hover { box-shadow: 0 0 8px color-mix(in srgb, var(--rose) 60%, transparent); }
.kr-rib-seg.sel { outline: 2px solid var(--violet-ink); outline-offset: 1px; }
.kr-replay-tally { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--violet-ink); display: flex; align-items: center; gap: 10px; }

/* ── 4. evidence dock ── */
.kr-stage-wrap { padding: 22px 30px 8px; }
.kr-fade-in { animation: krFade .3s ease; }
@keyframes krFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kr-stage-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kr-stage-abbr { font-family: var(--font-mono); font-size: 22px; font-weight: 800; }
.kr-stage-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); }
.kr-stage-inactive { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.kr-stage-pos { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.kr-lanes { display: flex; flex-direction: column; gap: 22px; }
.kr-lane { display: flex; flex-direction: column; gap: 10px; }
.kr-lane-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.kr-lane-cnt { font-family: var(--font-mono); font-size: 9px; color: var(--violet-ink); background: var(--violet-tint); border-radius: 99px; padding: 1px 7px; }
.kr-empty { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); padding: 8px 0; font-style: normal; }
/* techniques lane */
.kr-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.kr-tech-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 4px 9px; }
.kr-tech-id { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--violet-ink); }
.kr-tech-name { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
/* narrative lane */
.kr-narr { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.65; background: var(--bg-1); border: 1px solid var(--line); border-left: 2px solid var(--violet); border-radius: var(--rad); padding: 14px 16px; }
.kr-narr .desc-heading { font-family: var(--font-display); color: var(--ink); margin: 0 0 8px; font-size: 15px; }
.kr-narr p { margin: 0 0 10px; }
.kr-narr code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-inset); padding: 1px 5px; border-radius: 3px; color: var(--ink); }
.kr-narr-back { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); cursor: pointer; }
.kr-narr-back:hover { text-decoration: underline; }
/* commands lane */
.kr-cmd-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; margin-bottom: 10px; }
.kr-cmd-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.kr-cmd-num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.kr-cmd-code { margin: 0; padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink); overflow-x: auto; white-space: pre; }
/* indicators lane */
.kr-ioc-row { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-sm); margin-bottom: 5px; cursor: pointer; transition: border-color .12s; }
.kr-ioc-row:hover { border-color: var(--violet); }
.kr-ioc-type { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; color: var(--sky); background: color-mix(in srgb, var(--sky) 14%, transparent); padding: 2px 7px; border-radius: var(--rad-sm); flex-shrink: 0; }
.kr-ioc-val { font-family: var(--font-mono); font-size: 12px; color: var(--ink); word-break: break-all; flex: 1; min-width: 0; }
.kr-ioc-ctx { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); max-width: 38%; }
.kr-ioc-copy { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); flex-shrink: 0; }
.kr-ioc-row:hover .kr-ioc-copy { color: var(--violet-ink); }
.kr-sublane { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.kr-sublane-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--amber); margin-bottom: 7px; }
/* enrichment chip — replaces the old inline chip() in _krArsenalHtml, which used
   undefined vars (var(--text,#cfcfe1)/var(--border,#2a2a35)) whose fallbacks won
   and rendered near-white/invisible in light mode. Uses defined Signal tokens so
   it reads at AA contrast in BOTH themes. */
.kr-chip { display: inline-flex; gap: 5px; align-items: center; padding: 3px 8px; margin: 3px 4px 0 0; border: 1px solid var(--line); border-radius: var(--rad-sm); font: 11px/1.4 var(--font-mono, monospace); color: var(--ink); background: var(--bg-1); }
.kr-chip > i { color: var(--violet-ink); font-style: normal; opacity: .85; }
/* P1(3): compact enrichment blocks + capped chip cluster */
.kr-enr-block { margin: 10px 0; }
.kr-enr-block-lbl { font: 11px/1.4 var(--font-mono, monospace); color: var(--ink-3); margin-bottom: 4px; }
.kr-chip-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.kr-chip-more { display: inline; }
.kr-chip-more-sum { display: inline-flex; align-items: center; margin: 3px 4px 0 0; padding: 3px 8px; border: 1px dashed var(--line-2); border-radius: var(--rad-sm); font: 11px/1.4 var(--font-mono, monospace); color: var(--ink-3); cursor: pointer; list-style: none; }
.kr-chip-more-sum::-webkit-details-marker { display: none; }
.kr-chip-more[open] .kr-chip-more-sum { color: var(--ink); }
.kr-chip-more-sum:hover { color: var(--ink); border-color: var(--violet); }
.kr-chip-more-sum:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.kr-chip-more-body { margin-top: 4px; }
/* P1(2): narrative entity-link contract. Live = violet + underline (color-blind-safe:
   never color alone). Inert = plain mono, no affordance. */
.kr-ent-link { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; border-radius: 2px; }
.kr-ent-link:hover { color: var(--violet); text-decoration-thickness: 2px; }
.kr-ent-link:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.kr-ent-inert { color: inherit; text-decoration: none; cursor: text; }
/* P1(4): skip layout/paint for off-screen dossier sections (documented ~232→30ms). */
.kr-sec { content-visibility: auto; contain-intrinsic-size: auto 480px; }
/* detections lane */
.kr-det-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; margin-bottom: 12px; }
.kr-det-card-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px 8px; }
.kr-conf-dot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.kr-det-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); }
.kr-det-tabs { display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.kr-det-lang { font-family: var(--font-mono); font-size: 11px; padding: 6px 13px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-3); cursor: pointer; }
.kr-det-lang.on { border-bottom-color: currentColor; font-weight: 600; }
.kr-det-tab-spacer { flex: 1; }
/* detection copy/export buttons — Signal bracket-button language */
.kr-copy-btn { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 4px 9px; cursor: pointer; transition: all .13s; white-space: nowrap; }
.kr-copy-btn:hover { border-color: var(--violet); color: var(--violet-ink); background: var(--violet-tint); }
.kr-copy-btn:active { transform: translateY(1px); }
[data-theme="light"] .kr-copy-btn:hover { background: var(--violet-tint); color: var(--violet-deep); }
.kr-det-codewrap { padding: 12px 14px; }
.kr-det-code { display: flex; gap: 12px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 10px 12px; overflow-x: auto; }
.kr-code-lines { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--ink-4); text-align: right; user-select: none; display: flex; flex-direction: column; flex-shrink: 0; }
.kr-code-content { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--ink); white-space: pre; flex: 1; }
.kr-code-content.kr-spl-edge { border-left: 2px solid var(--spl); padding-left: 10px; }
.kr-code-content.kr-kql-edge { border-left: 2px solid var(--kql); padding-left: 10px; }
.kr-code-content.kr-sigma-edge { border-left: 2px solid var(--sigma); padding-left: 10px; }
.kr-code-unavail { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); padding: 8px; }
.kr-det-more { display: inline-block; margin: 0 14px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 4px 10px; cursor: pointer; }
.kr-det-more:hover, .kr-det-more.on { color: var(--violet-ink); border-color: var(--violet); }
.kr-det-extra { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.kr-det-extra[hidden] { display: none; }
.kr-det-ex-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kr-det-ex-body { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.kr-ds-chip { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 3px 8px; }
.kr-det-ex-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.kr-det-ex-text { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
/* simulate lane */
.kr-sim-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.kr-sim-tab { font-family: var(--font-mono); font-size: 11px; padding: 5px 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--rad-sm); cursor: pointer; }
.kr-sim-tab.on { background: var(--bg-inset); border-color: var(--violet); }
.kr-sim-pane { display: none; }
.kr-sim-pane.on { display: block; }
.kr-sim-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); padding: 13px 15px; margin-bottom: 10px; }
.kr-sim-card-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.kr-sim-card-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
.kr-sim-caution { font-family: var(--font-mono); font-size: 10.5px; color: var(--amber); margin-bottom: 10px; }

/* ── 5. dossier ── */
.kr-dossier { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 28px 30px 40px; border-top: 1px solid var(--line); }
.kr-toc { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.kr-toc-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.kr-toc-item { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); text-decoration: none; padding: 4px 8px; border-left: 2px solid transparent; cursor: pointer; }
.kr-toc-item:hover { color: var(--ink); }
.kr-toc-item.on { color: var(--violet-ink); border-left-color: var(--violet); }
.kr-dossier-body { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.kr-sec { scroll-margin-top: 60px; }
.kr-sec-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.kr-prose { font-family: var(--font-sans); font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.kr-prose .desc-heading { font-family: var(--font-display); color: var(--ink); margin: 20px 0 10px; }
.kr-prose p { margin: 0 0 12px; }
.kr-prose code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-inset); padding: 1px 5px; border-radius: 3px; color: var(--ink); }
.kr-prose .desc-codeblock { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 12px 14px; overflow-x: auto; }
.kr-prose .desc-list { margin: 0 0 12px; padding-left: 20px; }
.kr-stage-chip { font-family: var(--font-mono); font-size: 10px; color: var(--violet-ink); background: var(--violet-tint); border: 1px solid var(--violet); border-radius: var(--rad-sm); padding: 1px 7px; margin-left: 8px; cursor: pointer; vertical-align: middle; }
.kr-stage-chip:hover { background: var(--violet); color: #fff; }
/* attribution */
.kr-attr-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kr-actor-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); padding: 16px; }
.kr-actor-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.kr-actor-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--violet-ink); text-decoration: none; }
.kr-actor-name:hover { text-decoration: underline; }
.kr-actor-nation { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.kr-actor-aliases { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kr-actor-meta { display: flex; flex-direction: column; gap: 8px; }
.kr-actor-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.kr-actor-row b { color: var(--ink); font-weight: 600; }
.kr-conf-meter { display: inline-flex; align-items: center; gap: 4px; }
.kr-conf-seg { width: 16px; height: 5px; border-radius: 2px; background: var(--bg-3); border: 1px solid var(--line-2); }
.kr-conf-seg.lit { background: var(--violet); border-color: var(--violet); }
.kr-blast { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); padding: 16px; }
.kr-blast-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.kr-blast-group { margin-bottom: 12px; }
.kr-blast-group > span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); display: block; margin-bottom: 6px; }
.kr-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--bg-2); }
.kr-pill.sec { color: var(--sky); border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
.kr-pill.reg { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
/* affected table */
.kr-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad); }
.kr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kr-table th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 9px 13px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.kr-table td { padding: 9px 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
.kr-table tr:last-child td { border-bottom: none; }
/* timeline rail */
.kr-tl-rail { display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.kr-tl-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0 9px 18px; position: relative; }
.kr-tl-dot { position: absolute; left: -7px; top: 13px; width: 9px; height: 9px; border-radius: 99px; background: var(--violet); border: 2px solid var(--bg); flex-shrink: 0; }
.kr-tl-content { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.kr-tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.kr-tl-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.kr-tl-text { font-size: 13px; color: var(--ink); }
.kr-tl-nested { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 1px solid var(--line-2); }
.kr-tl-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.kr-tl-sub-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); min-width: 64px; flex-shrink: 0; text-transform: lowercase; }
.kr-tl-sub-body { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-tl-chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-sm); text-decoration: none; color: var(--ink-2); }
a.kr-tl-chip.ref:hover { border-color: var(--violet); }
.kr-tl-chip.actor { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 35%, var(--line)); }
.kr-tl-chip.tech { color: var(--violet-ink); }
.kr-tl-chip.ioc { color: var(--amber); }
/* remediation accordions */
.kr-acc-wrap { display: flex; flex-direction: column; gap: 8px; }
.kr-acc { border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.kr-acc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg-1); border: none; cursor: pointer; font-family: var(--font-mono); font-size: 12px; }
.kr-acc-head > span:first-child { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.kr-acc-cnt { margin-left: auto; font-size: 10px; color: var(--ink-3); background: var(--bg-2); border-radius: 99px; padding: 1px 8px; }
.kr-acc-caret { color: var(--ink-3); transition: transform .15s; }
.kr-acc-head.on .kr-acc-caret { transform: rotate(90deg); }
.kr-acc-body { margin: 0; padding: 4px 14px 14px 32px; list-style: disc; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.kr-acc-body li { margin-bottom: 6px; }
/* references */
.kr-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.kr-ref-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); text-decoration: none; transition: border-color .12s; }
.kr-ref-card:hover { border-color: var(--violet); }
.kr-ref-type { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.kr-ref-title { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
/* vuln */
.kr-vuln-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-vuln-chip { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--rad-sm); cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-2); }
.kr-vuln-chip.cve { color: var(--sev-critical); background: var(--sev-critical-tint); border-color: color-mix(in srgb, var(--sev-critical) 30%, transparent); }
.kr-vuln-chip.cwe { color: var(--amber); background: var(--sev-high-tint); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.kr-vuln-chip:hover { border-color: var(--violet); }
.kr-vuln-hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 8px; }
/* related */
.kr-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.kr-related-card { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad); text-decoration: none; transition: border-color .12s; }
.kr-related-card:hover { border-color: var(--violet); }
.kr-related-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kr-related-id { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); font-weight: 600; }
.kr-related-title { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.kr-related-actor { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
/* related-threats calibrated-engine explainability (similarity %, dominant signal, anomaly flags, shared-signal counts) */
.kr-rel-explain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 1px; }
.kr-rel-score { display: flex; align-items: center; gap: 6px; min-width: 88px; }
.kr-rel-bar { flex: 1; height: 4px; background: var(--bg-3, var(--line)); border-radius: 2px; overflow: hidden; display: block; min-width: 38px; }
.kr-rel-bar i { display: block; height: 100%; background: var(--violet); }
.kr-rel-pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--violet-ink); }
.kr-rel-chip { font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--rad-sm, 3px); color: var(--ink-3); white-space: nowrap; }
.kr-rel-driver { border-color: var(--violet); color: var(--violet-ink); }
.kr-rel-warn { border-color: var(--amber, #f0b429); color: var(--amber, #f0b429); }
.kr-rel-pill { font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; background: var(--bg-2, var(--line)); color: var(--ink-2, var(--ink-3)); border-radius: var(--rad-sm, 3px); white-space: nowrap; }
/* pipeline + engage footer */
.kr-bracket-btn { font-family: var(--font-mono); font-size: 12px; color: var(--violet-ink); background: var(--violet-tint); border: 1px solid var(--violet); border-radius: var(--rad-sm); padding: 7px 14px; cursor: pointer; }
.kr-bracket-btn:hover { background: var(--violet); color: #fff; }
.kr-engage-footer { margin-top: 8px; }

/* ── vitals rail (#tpSide) keeps the engagement block markup intact ── */
.kr-vrail-sec { margin-bottom: 22px; }
.kr-vrail-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.kr-vrail-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; font-family: var(--font-mono); font-size: 11.5px; }
.kr-vrail-k { color: var(--ink-3); }
.kr-vrail-v { color: var(--ink); font-weight: 600; }
.kr-vrail-bar { height: 6px; background: var(--bg-3); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.kr-vrail-bar-fill { display: block; height: 100%; background: var(--mint); }

/* ── responsive: 1100px ── */
@media (max-width: 1100px) {
  .kr-index { grid-template-columns: 1fr; }
  .kr-dossier { grid-template-columns: 1fr; }
  .kr-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .kr-attr-wrap { grid-template-columns: 1fr; }
  .tp-layout:has(.kr-dossier) { grid-template-columns: 1fr; }
  .tp-side:has(.kr-vitals) { position: static; width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .tp-layout:has(.kr-dossier) #tpSide { order: -1; width: 100%; }
}

/* ── responsive: 768px — vertical spine, sticky vitals strip, carousel tiles ── */
@media (max-width: 768px) {
  .kr-hero-full { padding: 16px 14px; }
  /* drop the sticky backdrop-blur on mobile — it repaints every scroll frame (major jank) */
  .kr-hero { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-1); }
  .kr-title { font-size: 22px; }
  .kr-index { padding: 16px 14px; }
  .kr-instruments { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .kr-tile { min-width: 150px; scroll-snap-align: start; }
  .kr-spine-wrap { padding: 14px 14px; }
  .kr-spine-scroll { overflow: visible; padding: 6px 0 4px; }
  .kr-spine { flex-direction: column; min-width: 0; gap: 0; padding-left: 22px; }
  .kr-spine-svg { display: none; }
  .kr-node { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 8px 4px; position: relative; }
  .kr-node-badge { top: 5px; left: 42px; transform: none; }
  .kr-node::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
  .kr-node.on::before { background: var(--violet); border-left: 2px dashed transparent; }
  .kr-node.off::before { background: repeating-linear-gradient(0deg, var(--line-3) 0 3px, transparent 3px 7px); }
  .kr-node-name { text-align: left; max-width: none; font-size: 12px; }
  .kr-node-tip { display: none; }
  .kr-node-dots { margin-left: auto; }
  .kr-ribbon { display: none; }
  .kr-stage-wrap { padding: 18px 14px 4px; }
  .kr-dossier { padding: 22px 14px 36px; }
  .kr-ioc-ctx { display: none; }
  .kr-ref-grid, .kr-related-grid { grid-template-columns: 1fr; }
  /* vitals rail flows normally on mobile — a tall sticky rail trapped scrolling
     (it pinned to the top and the dossier/dock scrolled underneath it) */
  .tp-side:has(.kr-vitals) { position: static; top: auto; z-index: auto; max-height: none; overflow: visible; padding: 14px; }
  .kr-verdict { flex-direction: column; align-items: flex-start; }
  /* tap targets >= 44px */
  .kr-replay-btn, .kr-bracket-btn, .kr-copy-btn, .kr-sim-tab, .kr-det-lang, .kr-tag-toggle, .kr-view-b { min-height: 36px; }
  .kr-rib-seg { min-height: 18px; }
}

/* ── light-mode niceties (tokens already swap; a few explicit tweaks) ── */
[data-theme="light"] .kr-hero { background: color-mix(in srgb, #fff 92%, transparent); }
[data-theme="light"] .kr-node.sel .kr-hex-abbr,
[data-theme="light"] .kr-stage-chip:hover,
[data-theme="light"] .kr-replay-btn:hover,
[data-theme="light"] .kr-bracket-btn:hover,
[data-theme="light"] .kr-tag-toggle.on { color: #fff; }
[data-theme="light"] .kr-conn.flow { filter: none; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .kr-conn.flow { animation: none; }
  .kr-active-pill { animation: none; }
  .kr-fade-in { animation: none; }
  .kr-meter-fill, .kr-gauge-fill, .kr-tile-inner { transition: none; }
}

/* ============================================================
   SIGNAL — threat page: two-view (dossier / attack_flow),
   detection buttons, ask-modal glass + responsive polish
   ============================================================ */

/* view switcher bar (mirrors the home #hubSeg segmented control) */
.kr-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 30px; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.kr-view-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; }
.kr-view-b { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; padding: 7px 18px; border-radius: 6px; border: none; background: transparent; color: var(--ink-3); cursor: pointer; transition: all .15s; }
.kr-view-b:hover { color: var(--ink); }
.kr-view-b.on { background: var(--violet); color: #fff; box-shadow: 0 1px 8px var(--violet-glow); }
.kr-view-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
[data-theme="light"] .kr-view-b.on { color: #fff; }

/* two-view visibility — nodes stay in the DOM so :has() layout hooks keep matching.
   Duplicated for [data-kr-root] instance roots (multi-window threat views); the
   legacy #threatPage selectors are kept so the page works without the attribute. */
#threatPage[data-kr-view="dossier"] .kr-spine-wrap,
[data-kr-root][data-kr-view="dossier"] .kr-spine-wrap,
#threatPage[data-kr-view="dossier"] #krStageWrap,
[data-kr-root][data-kr-view="dossier"] #krStageWrap { display: none; }
#threatPage[data-kr-view="attack_flow"] #krDossier,
[data-kr-root][data-kr-view="attack_flow"] #krDossier { display: none; }

/* graph view — hide dossier / stage / spine, reveal the per-record correlation graph */
#threatPage[data-kr-view="graph"] #krDossier,
[data-kr-root][data-kr-view="graph"] #krDossier,
#threatPage[data-kr-view="graph"] #krStageWrap,
[data-kr-root][data-kr-view="graph"] #krStageWrap,
#threatPage[data-kr-view="graph"] .kr-spine-wrap,
[data-kr-root][data-kr-view="graph"] .kr-spine-wrap { display: none; }
.kr-graph-wrap { display: none; }
#threatPage[data-kr-view="graph"] .kr-graph-wrap,
[data-kr-root][data-kr-view="graph"] .kr-graph-wrap { display: block; border-top: 1px solid var(--line); }
.kr-graph-g6 { position: relative; width: 100%; height: 60vh; min-height: 320px; }
.kr-graph-loading, .kr-graph-empty { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 40px 30px; text-align: center; }
/* P3: on-canvas STIX-type legend (theme-aware; swatch colors resolved by the adapter) */
.tlg-legend { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; max-height: calc(100% - 20px); overflow: auto; padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-sm); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); pointer-events: none; box-shadow: var(--shadow-sm); }
.tlg-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tlg-legend-sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); }

/* window-hosted threat root (multi-instance) — NOT .threat-page (that class is position:fixed/100vh) */
.tp-root { background: var(--bg); min-height: 100%; }

/* dossier detections section list */
.kr-det-list { display: flex; flex-direction: column; }
.kr-det-list .kr-det-card:last-child { margin-bottom: 0; }

/* ask modal — light-purple translucent "glass" (dark; light handled at the
   [data-theme="light"] legacy rules which carry higher specificity).
   Opaque-ish base FIRST so the panel stays readable where backdrop-filter is
   unsupported; the translucent frosted look is layered in via @supports. */
.tlql-ai-overlay { background: color-mix(in srgb, var(--violet-deep) 20%, transparent); }
.tlql-ai-box { background: color-mix(in srgb, var(--violet-deep) 30%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--violet) 50%, transparent); box-shadow: 0 24px 64px -14px var(--violet-glow); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tlql-ai-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .tlql-ai-box { background: color-mix(in srgb, var(--violet-deep) 34%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
}

@media (max-width: 768px) {
  .kr-viewbar { padding: 10px 14px; gap: 8px; }
  .kr-view-seg { flex: 1; }
  .kr-view-b { flex: 1; text-align: center; padding: 9px 10px; }
  .kr-view-meta { display: none; }
}

/* ============================================================
   SIGNAL — narrative IoC highlights + dossier Indicators groups
   (colors are design tokens → auto-readable in dark + light)
   ============================================================ */
.kr-prose .kr-ioc-hl { font-family: var(--font-mono); font-size: 12.5px; padding: 0 3px; border-radius: 3px; }
.kr-prose .kr-ioc-known { background: var(--violet-tint); border-bottom: 1px solid var(--violet); }
.kr-prose .kr-ioc-disc { border-bottom: 1px dashed var(--ink-4); }
.kr-prose .kr-ioc-defanged { font-style: italic; }
/* IoC type → color (used by both narrative highlights and is token-driven for light mode) */
.kr-ioc-network, .kr-ioc-ip, .kr-ioc-domain, .kr-ioc-cidr { color: var(--sky); }
.kr-ioc-url { color: var(--violet-ink); }
.kr-ioc-path, .kr-ioc-filename, .kr-ioc-email { color: var(--mint); }
.kr-ioc-hash, .kr-ioc-md5, .kr-ioc-sha256, .kr-ioc-sha1, .kr-ioc-wallet, .kr-ioc-asn { color: var(--amber); }
.kr-ioc-registry { color: var(--violet-ink); }
.kr-ioc-service, .kr-ioc-malware_family, .kr-ioc-malware_name, .kr-ioc-tool_name, .kr-ioc-person, .kr-ioc-process, .kr-ioc-command { color: var(--rose); }

/* dossier indicators section groups */
.kr-ioc-group { margin-bottom: 16px; }
.kr-ioc-group:last-child { margin-bottom: 0; }
.kr-ioc-unverified { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 3px; padding: 1px 5px; margin-left: 8px; }
.kr-ioc-disc-group .kr-ioc-row { opacity: .9; }

/* ============================================================
   SIGNAL — MOBILE RESPONSIVE FIXES (round 9)
   Per-page overflow/scroll fixes so each page fits a 375px viewport.
   All rules are @media-scoped to mobile; desktop is unaffected.
   ============================================================ */

/* ---- home hub (briefing + command + explorer) ---- */
/* ============================================================================
   MOBILE FIX — HOME HUB (briefing + command + explorer)
   Scoped under #mainContent. Forces single-column, kills horizontal overflow,
   keeps vertical scroll working at 375px. No fixed clipping heights.
   ============================================================================ */
@media (max-width: 768px) {
  /* page shell can't be pushed wider than the viewport */
  #mainContent .threats-section { padding: 0 16px 24px; min-width: 0; max-width: 100%; overflow-x: hidden; }
  #mainContent .brief,
  #mainContent .cmd-grid { width: 100%; max-width: 100%; min-width: 0; }

  /* hub toggle bar wraps, segmented control fills width */
  #mainContent .hubbar { flex-wrap: wrap; gap: 12px; row-gap: 10px; }
  #mainContent .hub-seg { flex-wrap: wrap; }
  #mainContent .hub-meta { flex-wrap: wrap; }

  /* metrics: 2-up so 4 KPI tiles never overflow */
  #mainContent .metric-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  #mainContent .metric { min-width: 0; }

  /* ---- COMMAND view: collapse to single column, unstick rail ---- */
  #mainContent .cmd-grid { grid-template-columns: 1fr; gap: 18px; }
  #mainContent .cmd-left,
  #mainContent .cmd-rail { min-width: 0; width: 100%; }
  #mainContent .cmd-hot-grid { grid-template-columns: 1fr; gap: 12px; }
  /* horizon gauge stacks above the bar chart */
  #mainContent .cmd-horizon-body { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; min-width: 0; }
  #mainContent .cmd-gauge { align-self: center; }
  #mainContent .horizon { width: 100%; min-width: 0; }
  /* top_tactics rank rows: shrink the fixed label column so the track fits */
  #mainContent .cmd-tactics-body { padding: 14px 12px 14px; }
  #mainContent .rb-row { grid-template-columns: minmax(0, 90px) 1fr 26px; gap: 8px; }
  #mainContent .rb-label { min-width: 0; }
  /* activity feed scrolls inside its own box */
  #mainContent .actfeed { max-height: 320px; }
  #mainContent .act-body { min-width: 0; }

  /* ---- BRIEFING view: featured + debrief stack ---- */
  #mainContent .brief-top { grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
  #mainContent .brief-feat,
  #mainContent .brief-debrief { width: 100%; min-width: 0; max-width: 100%; }
  #mainContent .brief-feat-media { height: 120px; padding: 12px; }
  #mainContent .brief-feat-body { padding: 16px 16px 18px; min-width: 0; }
  #mainContent .brief-feat-title { font-size: 22px; overflow-wrap: anywhere; word-break: break-word; }
  #mainContent .brief-feat-sum { font-size: 13.5px; max-width: 100%; }
  #mainContent .brief-feat-foot { flex-wrap: wrap; gap: 8px 14px; }
  #mainContent .brief-read { margin-left: 0; }
  /* debrief panel: stat triplet + scrolling row list, never wider than viewport */
  #mainContent .brief-deb-head { font-size: 18px; padding: 14px 16px 14px; overflow-wrap: anywhere; }
  #mainContent .brief-deb-stats > div { padding: 12px; }
  #mainContent .brief-deb-stats .numeral { font-size: 24px; }
  #mainContent .brief-deb-h { padding: 14px 14px 10px; flex-wrap: wrap; gap: 6px; }
  #mainContent .brief-deb-list { max-height: 340px; }
  #mainContent .deb-it { padding: 9px 8px 9px 12px; }
  #mainContent .deb-it-body { min-width: 0; }
  /* curated rail: 2-up grid */
  #mainContent .brief-rail { grid-template-columns: 1fr 1fr; gap: 12px; }
  #mainContent .tcard { min-width: 0; }
  #mainContent .tcard-title { overflow-wrap: anywhere; }
  /* developing/stream rows keep their ellipsis but allow shrink */
  #mainContent .brief-stream-list,
  #mainContent .stream-it { min-width: 0; }
  #mainContent .stream-title { min-width: 0; }

  /* shared spotlight cards (hot_right_now) */
  #mainContent .spot { min-width: 0; width: 100%; }
  #mainContent .spot-body { min-width: 0; padding: 14px 14px 15px; }
  #mainContent .spot-title { overflow-wrap: anywhere; }
  #mainContent .spot-foot { gap: 8px 12px; }
  #mainContent .spot-read { margin-left: 0; }
}

@media (max-width: 480px) {
  #mainContent .threats-section { padding: 0 12px 24px; }
  #mainContent .metric-row { grid-template-columns: 1fr 1fr; }
  /* single-column curated + hot cards on the narrowest phones */
  #mainContent .brief-rail { grid-template-columns: 1fr; }
  #mainContent .cmd-hot-grid { grid-template-columns: 1fr; }
  #mainContent .brief-feat-title { font-size: 20px; }
  /* debrief stat triplet stays 3-up but tighter so numerals don't push width */
  #mainContent .brief-deb-stats > div { padding: 10px 8px; }
  #mainContent .brief-deb-stats .numeral { font-size: 20px; }
  /* rank-bar label column shrinks further */
  #mainContent .rb-row { grid-template-columns: minmax(0, 76px) 1fr 24px; gap: 7px; }
}

/* ---- advanced-correlations ---- */

@media (max-width: 768px) {
    /* Pin the page container so it can never exceed the viewport
       and so it forces its grid/flex children to shrink. */
    

    /* Header text must wrap, never force min-content width */

    /* Tab bar: horizontal scroll only, never widens the page */
    

    /* Stats strip: 2-up grid, cells shrink, value ellipsizes safely */

    /* Engine / infra / attribution card grids → single column */
    
    
    /* Long IDs / IPs / hashes inside cards wrap instead of overflowing */

    /* MITRE heatmap: 2 columns of flexible cells, cell text wraps */

    /* Velocity scatter chart: bounded width, dots are %-positioned */
    

    /* Grid-based "tables": collapse to a label/value stack.
       Headers already hidden by existing rule; here we guarantee
       no fixed pixel track survives to push the row wide. */
    
    
    /* Force the value spans that were nowrap-ellipsis to wrap so they
       cannot contribute min-content width wider than their track */

    /* Expanded row + badge wrappers never overflow */

    /* Sync footer: long timestamps/sources wrap */
    
}

@media (max-width: 480px) {
    

    /* All data grids → single column at the smallest width */
    
    /* Stats + MITRE stay 2-up but tracks may shrink fully */
    
    
}

/* ---- debriefs ---- */
/* ============================================================================
   DEBRIEFS (db-*) — MOBILE OVERFLOW + SCROLL FIX
   Scoped under #mainContent .db-page to outrank the runtime-injected
   debriefCss <style> (bare .db-* selectors) which loads AFTER styles.css.
   Goal: no horizontal overflow at 375px, heatmap scrolls in its own track,
   all grids single/2-col, page scrolls vertically (no height clamp).
   ============================================================================ */
@media (max-width: 768px) {
    /* Page container fills width, clips horizontal escape only (never height) */
    #mainContent .db-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 14px 32px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: visible;
    }

    /* Header reflows to a column */
    #mainContent .db-page .db-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    #mainContent .db-page .db-header-right {
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        flex-wrap: wrap;
    }
    #mainContent .db-page .db-header-title { font-size: 24px; }

    /* HEATMAP: 742px SVG stays inside its own horizontal scroller and
       cannot push the page. Outer block clips; inner track scrolls. */
    #mainContent .db-page .db-heatmap {
        overflow: hidden;
        max-width: 100%;
        min-width: 0;
    }
    #mainContent .db-page .db-hm-header { flex-wrap: wrap; gap: 8px; }
    #mainContent .db-page .db-hm-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        min-width: 0;
    }
    #mainContent .db-page .db-hm-svg {
        display: block;
        max-width: none; /* keep natural 742px so it scrolls, not squashes */
    }

    /* Aggregate stats strip: 2 columns, numbers may wrap instead of clip */
    #mainContent .db-page .db-agg-stats {
        grid-template-columns: repeat(2, 1fr);
        min-width: 0;
    }
    #mainContent .db-page .db-agg-cell { min-width: 0; }
    #mainContent .db-page .db-agg-num {
        font-size: 20px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Trend sparklines: single column, svg fills */
    #mainContent .db-page .db-trend-row {
        grid-template-columns: 1fr;
        gap: 12px;
        min-width: 0;
    }
    #mainContent .db-page .db-spark-item { min-width: 0; }
    #mainContent .db-page .db-spark-svg { width: 100%; }

    /* Search + date filters stack full width */
    #mainContent .db-page .db-search-row {
        flex-direction: column;
        align-items: stretch;
    }
    #mainContent .db-page .db-search-field {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    #mainContent .db-page .db-date-fields { flex-direction: column; }
    #mainContent .db-page .db-date-field {
        width: 100%;
        box-sizing: border-box;
    }
    #mainContent .db-page .db-date-input {
        width: 100%;
        box-sizing: border-box;
    }
    #mainContent .db-page .db-clear-btn { align-self: flex-start; }

    /* Timeline: drop the left marker rail, card goes full width */
    #mainContent .db-page .db-entry { flex-direction: column; }
    #mainContent .db-page .db-entry-marker { display: none; }
    #mainContent .db-page .db-entry-card {
        margin-left: 0;
        min-width: 0;
        max-width: 100%;
    }

    /* Collapsed header reflows; title wraps instead of nowrap-ellipsis */
    #mainContent .db-page .db-entry-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
        position: relative;
    }
    #mainContent .db-page .db-entry-date-block {
        width: auto;
        padding-right: 10px;
    }
    #mainContent .db-page .db-entry-summary { min-width: 0; flex: 1 1 100%; }
    #mainContent .db-page .db-entry-title-row { min-width: 0; flex-wrap: wrap; }
    #mainContent .db-page .db-entry-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    #mainContent .db-page .db-entry-stats-mini {
        width: 100%;
        justify-content: flex-start;
        gap: 24px;
        padding-top: 8px;
        border-top: 1px solid var(--line);
    }
    #mainContent .db-page .db-entry-chevron {
        position: absolute;
        right: 12px;
        top: 14px;
    }
    /* Hide dense enrichment dots/tags that don't fit narrow header */
    #mainContent .db-page .db-actor-dots,
    #mainContent .db-page .db-nation-tags { display: none; }
    #mainContent .db-page .db-cov-bar { max-width: 100%; }
    #mainContent .db-page .db-entry-badges-row { min-width: 0; }

    /* Expanded body: stats grid to 2 cols */
    #mainContent .db-page .db-entry-body { min-width: 0; max-width: 100%; }
    #mainContent .db-page .db-stats-row {
        grid-template-columns: repeat(2, 1fr);
        min-width: 0;
    }
    #mainContent .db-page .db-stats-cell {
        padding: 12px;
        min-width: 0;
    }
    #mainContent .db-page .db-stats-value {
        font-size: 20px;
        overflow-wrap: anywhere;
    }
    #mainContent .db-page .db-class-notice {
        flex-direction: column;
        gap: 2px;
        text-align: center;
    }
    #mainContent .db-page .db-det-pct { font-size: 34px; }
    #mainContent .db-page .db-det-pct-sign { font-size: 18px; }
    #mainContent .db-page .db-det-prog { max-width: 100%; }

    /* MITRE badges + IOC + attribution rows allowed to shrink/wrap */
    #mainContent .db-page .db-section { min-width: 0; }
    #mainContent .db-page .db-mitre-grid { min-width: 0; }
    #mainContent .db-page .db-ioc-dist { min-width: 0; }
    #mainContent .db-page .db-ioc-row { min-width: 0; }
    #mainContent .db-page .db-ioc-label { width: 72px; font-size: 10px; flex-shrink: 0; }
    #mainContent .db-page .db-attr-cards { min-width: 0; }
    #mainContent .db-page .db-attr-card { min-width: 0; max-width: 100%; }
    #mainContent .db-page .db-attr-name {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    #mainContent .db-page .db-sev-detail-bar { display: none; }
    #mainContent .db-page .db-sev-detail-row { min-width: 0; }

    /* Threat inventory rows: wrap instead of overflow */
    #mainContent .db-page .db-threat-list { min-width: 0; }
    #mainContent .db-page .db-threat-row {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 8px 10px;
        min-width: 0;
    }
    #mainContent .db-page .db-threat-id {
        min-width: 0;
        font-size: 11px;
    }
    #mainContent .db-page .db-threat-title {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    #mainContent .db-page .db-threat-arrow { display: none; }

    /* Footer wraps */
    #mainContent .db-page .db-entry-footer { flex-wrap: wrap; gap: 6px 12px; }
    #mainContent .db-page .db-footer-end { margin-left: 0; }
}

@media (max-width: 480px) {
    #mainContent .db-page { padding: 0 12px 32px; }
    #mainContent .db-page .db-header-title { font-size: 20px; }

    /* Aggregate strip can stay 2-col but tighten numbers */
    #mainContent .db-page .db-agg-stats { grid-template-columns: repeat(2, 1fr); }
    #mainContent .db-page .db-agg-num { font-size: 18px; }

    #mainContent .db-page .db-trend-row { grid-template-columns: 1fr; }

    /* Expanded stats grid single column on the narrowest screens */
    #mainContent .db-page .db-stats-row { grid-template-columns: 1fr; }
    #mainContent .db-page .db-stats-cell {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    #mainContent .db-page .db-stats-cell:last-child { border-bottom: none; }

    #mainContent .db-page .db-det-pct { font-size: 26px; }
    #mainContent .db-page .db-det-pct-sign { font-size: 14px; }
    #mainContent .db-page .db-sub-btn { font-size: 10px; padding: 5px 10px; }
    #mainContent .db-page .db-entry-title { font-size: 13px; }
    #mainContent .db-page .db-entry-themes-preview { display: none; }
    #mainContent .db-page .db-mitre-grid { gap: 4px; }
    #mainContent .db-page .db-mitre-badge { font-size: 9px; padding: 2px 6px; }
}

/* ---- statistics ---- */
/* ============================================================
   STATISTICS PAGE (page-statistics.js, .sp-page) — mobile overflow
   hardening. Scoped #mainContent .sp-page so it outranks both the
   runtime <style id="stats-page-css"> single-class rules AND the
   appended .sp-page two-class rules without !important. Complements
   (does not duplicate) the existing responsive block in styles.css.
   ============================================================ */
@media (max-width: 768px) {
  /* container can never exceed the viewport */
  #mainContent .sp-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* grid / flex children that hold long content must be allowed to shrink */
  #mainContent .sp-page .sp-grid,
  #mainContent .sp-page .sp-col,
  #mainContent .sp-page .sp-card,
  #mainContent .sp-page .sp-card-wide,
  #mainContent .sp-page .sp-mitre-list,
  #mainContent .sp-page .sp-actor-list {
    min-width: 0;
  }

  /* MITRE rows: flexible name track must be minmax(0,1fr) and the
     nowrap name child must get min-width:0 so it ellipsis-truncates
     instead of expanding the track past 375px */
  #mainContent .sp-page .sp-mitre-row {
    grid-template-columns: 24px 76px minmax(0, 1fr) 34px;
    gap: 8px;
  }
  #mainContent .sp-page .sp-mitre-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #mainContent .sp-page .sp-mitre-tactic,
  #mainContent .sp-page .sp-mitre-track { display: none; }

  /* Actor rows: same minmax(0,1fr) guarantee for the info column */
  #mainContent .sp-page .sp-actor-row {
    grid-template-columns: 24px minmax(0, 1fr) 34px;
    gap: 8px;
  }
  #mainContent .sp-page .sp-actor-info { min-width: 0; }
  #mainContent .sp-page .sp-actor-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #mainContent .sp-page .sp-actor-track { display: none; }

  /* Bar rows: flexible track minmax(0,1fr); label clips, never pushes */
  #mainContent .sp-page .sp-bar-row {
    grid-template-columns: 88px minmax(0, 1fr) 34px 38px;
    gap: 8px;
  }
  #mainContent .sp-page .sp-bar-label { min-width: 0; }
  #mainContent .sp-page .sp-bar-track { min-width: 0; }

  /* Tag cloud: long single tags must wrap instead of overflowing */
  #mainContent .sp-page .sp-tag-cloud { max-width: 100%; }
  #mainContent .sp-page .sp-tag {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  /* Sparkline mono run can break (reinforces existing rule) */
  #mainContent .sp-page .sp-sparkline-text {
    overflow-wrap: anywhere;
    word-break: break-all;
    max-width: 100%;
  }

  /* Detection-language blocks single column already; guard shrink */
  #mainContent .sp-page .sp-lang-grid { grid-template-columns: 1fr; }
  #mainContent .sp-page .sp-lang-block,
  #mainContent .sp-page .sp-lang-bar { min-width: 0; }
  #mainContent .sp-page .sp-lang-count {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Header version string wraps rather than forcing width */
  #mainContent .sp-page .sp-header-ver,
  #mainContent .sp-page .sp-header-ts {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Monthly chart: many columns at flex:1 stay inside the card */
  #mainContent .sp-page .sp-chart { min-width: 0; }
  #mainContent .sp-page .sp-chart-col { min-width: 0; }
  #mainContent .sp-page .sp-chart-label {
    white-space: normal;
    word-break: break-word;
  }

  /* Severity ring stacks; legend constrained */
  #mainContent .sp-page .sp-ring-legend { width: 100%; min-width: 0; }
  #mainContent .sp-page .sp-ring-leg-item { min-width: 0; }
}

@media (max-width: 480px) {
  /* Tighter MITRE/actor/bar columns; flexible tracks stay minmax(0,1fr) */
  #mainContent .sp-page .sp-mitre-row {
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    gap: 6px;
  }
  #mainContent .sp-page .sp-mitre-rank { display: none; }

  #mainContent .sp-page .sp-actor-row {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 6px;
  }
  #mainContent .sp-page .sp-actor-rank { display: none; }

  #mainContent .sp-page .sp-bar-row {
    grid-template-columns: 60px minmax(0, 1fr) 30px;
    gap: 6px;
  }
  #mainContent .sp-page .sp-bar-pct { display: none; }

  /* very narrow: let the monthly bar chart scroll horizontally inside
     its card rather than crushing labels into the page width */
  #mainContent .sp-page .sp-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- wild-c2 ---- */

@media (max-width: 768px) {
    /* Top container: never wider than the viewport; allow children to shrink */
    
    /* Content + sections must be able to shrink so scroll wrappers don't push */

    /* Wide data stays inside its own horizontal-scroll wrapper — clamp wrappers
       to the viewport so the inner min-width content scrolls instead of pushing */
    

    /* Bar rows: let the track shrink and cap inline-width labels so a
       style="width:140px"/"160px" label can't crowd the row past the viewport */

    /* Multi-column detail/feed/fingerprint grids collapse to single column */
    
}

@media (max-width: 480px) {
    /* Tighter container padding so 2-up stats and rows fit a 375px viewport */
    

    /* Bar labels narrower at phone width */

    /* Hosting category cards 2-up (base flex) */

    /* Long mono strings (IPs, hashes, domains, configs) wrap instead of pushing */
    
}

/* ---- correlation ---- */
/* ============================================================================
   CORRELATION PAGE (corr-*) — 375px mobile overflow hardening
   Scoped under #mainContent .corr-* to outrank the page's runtime-injected
   single-class CSS without leaking to other pages. Tokens only.
   ============================================================================ */
@media (max-width: 768px) {
    /* Hard guard: nothing in the workspace may exceed the viewport */
    #mainContent .corr-workspace { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
    #mainContent .corr-grid-layout { width: 100%; max-width: 100%; min-width: 0; }
    #mainContent .corr-main-col,
    #mainContent .corr-side-col { width: 100%; max-width: 100%; min-width: 0; }
    #mainContent .corr-section,
    #mainContent .corr-side-section,
    #mainContent .corr-side-panel { min-width: 0; max-width: 100%; }

    /* Connection chain: dots+lines must wrap instead of pushing the page wide */
    #mainContent .corr-infra-connections { width: 100%; min-width: 0; max-width: 100%; }
    #mainContent .corr-conn-chain { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }

    /* Shared-infrastructure rows: let the cluster shrink + break long IoCs */
    #mainContent .corr-infra-left { width: 100%; min-width: 0; flex-wrap: wrap; flex: 1 1 100%; }
    #mainContent .corr-infra-value { min-width: 0; word-break: break-all; overflow-wrap: anywhere; }
    #mainContent .corr-infra-right { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    #mainContent .corr-infra-threats { min-width: 0; max-width: 100%; }

    /* Search results: stop the left cluster from refusing to shrink */
    #mainContent .corr-search-result-left { flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
    #mainContent .corr-search-result-value { min-width: 0; word-break: break-all; overflow-wrap: anywhere; }
    #mainContent .corr-search-result-right { min-width: 0; max-width: 100%; }
    #mainContent .corr-search-result-threats { min-width: 0; max-width: 100%; }

    /* Side-panel top rows: keep value+bar inside the column */
    #mainContent .corr-top-row { max-width: 100%; min-width: 0; }
    #mainContent .corr-top-value-wrap { min-width: 0; max-width: 100%; }
    #mainContent .corr-top-value { min-width: 0; }

    /* Technique overlap rows: contain ellipsis name */
    #mainContent .corr-tech-row { max-width: 100%; min-width: 0; }
    #mainContent .corr-tech-name { min-width: 0; }

    /* Tag cloud: a single long/large tag can't push past the viewport */
    #mainContent .corr-tag-cloud { max-width: 100%; min-width: 0; }
    #mainContent .corr-tag-pill { max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }

    /* Campaign-pattern + actor inner pill rows wrap and stay contained */
    #mainContent .corr-pattern-techs,
    #mainContent .corr-pattern-infra,
    #mainContent .corr-pattern-threats { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    #mainContent .corr-tech-pill,
    #mainContent .corr-infra-pill { max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }
    #mainContent .corr-pattern-threat-id,
    #mainContent .corr-pattern-threat-title,
    #mainContent .corr-actor-threat-title { min-width: 0; overflow-wrap: anywhere; }

    /* Header stat cluster wraps within width */
    #mainContent .corr-header-right { min-width: 0; max-width: 100%; }
}

@media (max-width: 480px) {
    /* Tighter side panel so value+count fit a 375px column */
    #mainContent .corr-conn-line { width: 14px; }
    #mainContent .corr-top-value,
    #mainContent .corr-tech-name { font-size: 10.5px; }
    #mainContent .corr-tag-pill { font-size: 11px !important; }
}

/* ---- dns-enrichment ---- */

@media (max-width: 768px) {
    /* Containment backstop: never exceed the #mainContent viewport */

    /* Wide tables: clamp wrapper to viewport, let it own the horizontal scroll */
    
    /* Unbounded top/parent tables get cell caps + ellipsis so they wrap-or-scroll, never push the page */

    /* Cross-correlation cards: restore long-pivot wrapping the styles.css override dropped */

    /* Filters / search: full-width inputs, no wide row */

    /* Accordion / feed rows: contain long IOC + result strings */

    /* Enrich-all + pagination + messages: wrap, never clip */

}


/* ---- detection-library ---- */
@media (max-width: 768px) {
    /* Pin top containers so nothing can exceed the 375px viewport */
    #mainContent .dl-container { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    #mainContent .dl-content { width: 100%; max-width: 100%; min-width: 0; overflow: visible; }
    #mainContent .dl-panels { width: 100%; max-width: 100%; min-width: 0; }

    /* Filter-bar controls: full width, no fixed mins forcing overflow */
    #mainContent .dl-filter-select { min-width: 0; width: 100%; }
    #mainContent .dl-sort-btn,
    #mainContent .dl-correlate-btn { width: 100%; white-space: normal; box-sizing: border-box; }

    /* Row header: tighter padding + ensure children can shrink */
    #mainContent .dl-row-header { padding-left: 10px; padding-right: 10px; }
    #mainContent .dl-row-name { min-width: 0; overflow-wrap: anywhere; }
    #mainContent .dl-row-expanded { padding-left: 10px; padding-right: 10px; }

    /* Code: scroll within block, never push the page */
    #mainContent .dl-code-block { max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #mainContent .dl-code-tabs { min-width: 0; }
    #mainContent .dl-copy-btn { margin-left: auto; }

    /* Variable-length token rows: guarantee wrap, allow children to shrink */
    #mainContent .dl-row-footer,
    #mainContent .dl-row-mitre,
    #mainContent .dl-row-sources,
    #mainContent .dl-correlated-items,
    #mainContent .dl-corr-pills,
    #mainContent .dl-corr-list,
    #mainContent .dl-active-pills,
    #mainContent .dl-filter-pills { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    #mainContent .dl-correlated-link,
    #mainContent .dl-mitre-tag,
    #mainContent .dl-src-tag,
    #mainContent .dl-corr-item { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }

    /* Correlation panel grid already collapses; ensure no min-width leak */
    #mainContent .dl-correlation-panel { min-width: 0; max-width: 100%; }
    #mainContent .dl-corr-section { min-width: 0; }

    /* Pagination must wrap instead of overflowing one line */
    #mainContent .dl-pagination { flex-wrap: wrap; gap: 10px; }

    /* Sidebar pills/labels fit narrow column */
    #mainContent .dl-filter-pill { max-width: 100%; }
    #mainContent .dl-filter-label { min-width: 0; }
}

@media (max-width: 480px) {
    #mainContent .dl-row-header { gap: 6px; padding-left: 8px; padding-right: 8px; }
    #mainContent .dl-row-num { min-width: 24px; }
    #mainContent .dl-row-sev { min-width: 0; }
    #mainContent .dl-code-block { padding-left: 10px; padding-right: 10px; font-size: 11px; }
    #mainContent .dl-header-stats { gap: 10px; }
}

/* ---- intel-graph ---- */
/* ===== intel-graph (ig-) mobile fit — scoped to .ig-page ===== */
@media (max-width: 768px) {
  /* Topbar (.sig-tb) is display:none on mobile, so the -56px reservation
     wastes height and squeezes the flex children. Use full dvh. Keep the
     page horizontally clamped; vertical scroll happens inside .ig-tree-vp. */
  .ig-page {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }
  /* Guarantee the inner tree viewport can shrink in a flex column and keep
     its own working vertical + horizontal scroll (never clips content). */
  .ig-page .ig-tree-vp {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Flex/grid children that hold long content must be allowed to shrink. */
  .ig-page .ig-col,
  .ig-page .ig-card,
  .ig-page .ig-detail,
  .ig-page .ig-row,
  .ig-page .ig-detail-row {
    min-width: 0;
  }
  /* Long IoC / URL / query / alias strings must wrap, never widen a column. */
  .ig-page .ig-row-v,
  .ig-page .ig-detail-row-v,
  .ig-page .ig-ref-link,
  .ig-page .ig-detail-link,
  .ig-page .ig-det-query,
  .ig-page .ig-detail-query {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
@media (max-width: 480px) {
  /* On the narrowest phones keep column 0 inside the scroll area (it is
     already unstuck at 480px) and make sure the page never forces the
     document wider than the viewport. */
  .ig-page {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .ig-page .ig-tree-vp {
    min-height: 0;
  }
}


#mainContent > * { flex-shrink: 0; min-width: 0; }

/* wild-c2: watermark country list must wrap instead of overflowing on mobile */


/* ============================================================
   SIGNAL — mobile chrome fixes (round 10)
   ============================================================ */
@media (max-width: 768px) {
  /* threat-page topbar: back was overlapping the action buttons. Hide the
     redundant crumb (the threat id is in the banner), allow wrapping, drop the
     sticky backdrop-blur (scroll perf). */
  .tp-topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tp-topbar-left { min-width: 0; flex: 1 1 auto; }
  .tp-crumb { display: none; }
  .tp-topbar-right { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .tp-action { font-size: 10.5px; padding: 5px 9px; }
  /* magnifier icon button sizing */
  .mobile-filter-btn svg { display: block; }
}

/* ============================================================
   SIGNAL — mobile squish sweep (round 12): IOC rows that collapsed
   to a 1-char-per-line column (flex:1;min-width:0;break-all text) now stack
   ============================================================ */
@media (max-width: 768px) {
  .kr-ioc-row { flex-direction: column; align-items: stretch; gap: 4px; flex-wrap: nowrap; }
  .kr-ioc-row > .kr-ioc-val { flex: none; width: 100%; min-width: 0; white-space: normal; word-break: break-word; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
  .kr-ioc-row > .kr-ioc-type, .kr-ioc-row > .kr-ioc-copy { flex: none; align-self: flex-start; }
  .sv-ioc-row { flex-direction: column; align-items: stretch; gap: 4px; flex-wrap: nowrap; }
  .sv-ioc-row > .sv-ioc-value { flex: none; width: 100%; min-width: 0; white-space: normal; word-break: break-word; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
  .sv-ioc-row > .sv-ioc-type-badge, .sv-ioc-row > .sv-ioc-ctx { flex: none; align-self: flex-start; max-width: 100%; }
}

/* ============================================================
   PROFILE — // account_console two-zone shell + // ai_model card
   (page-profile.js v4) — appended; all #mainContent .prf-* scoped.
   Base = single column (mobile-first); >=1080px = sticky rail + deck.
   ============================================================ */

/* widen the container so the two-zone shell has room on desktop.
   width:100% + min-width:0 are REQUIRED on mobile: #mainContent is a flex column
   and align-items:stretch is defeated here, so without an explicit definite width
   the container snaps to its min-content (~505px) and overflows a 375px viewport
   (verified 505->375 with this rule). max-width still caps + centers it on desktop. */
#mainContent .prf-container { width: 100%; min-width: 0; max-width: 1040px; margin-left: auto; margin-right: auto; }

/* shell: single column by default, 2-col grid at >=1080 */
#mainContent .prf-shell { display: block; }
#mainContent .prf-deck { min-width: 0; }

/* identity rail hero */
#mainContent .prf-rail-hero {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
  margin-bottom: 18px;
}
#mainContent .prf-rail-avatar {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #0a0a0a;
  margin-bottom: 16px;
}
#mainContent .prf-rail-email {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 12px;
}
#mainContent .prf-rail-tier {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
#mainContent .prf-rail-tier-chip {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em; padding: 3px 10px;
  border: 1px solid currentColor; border-radius: var(--rad-sm);
}
#mainContent .prf-rail-verified { align-self: center; }
#mainContent .prf-rail-tier-desc {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--ink-3); margin-bottom: 16px;
}
#mainContent .prf-rail-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--rad-sm);
  overflow: hidden; margin-bottom: 16px;
}
#mainContent .prf-rail-cell { background: var(--bg-1); padding: 12px 6px; text-align: center; }
#mainContent .prf-rail-num {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  font-size: 20px; color: var(--ink);
}
#mainContent .prf-rail-cell-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
#mainContent .prf-rail-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--line);
}
#mainContent .prf-rail-meta-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3);
}
#mainContent .prf-rail-meta-value { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
#mainContent .prf-rail-uid {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
  word-break: break-all; margin-top: 8px; line-height: 1.4;
}

/* ---- // ai_model chooser ---- */
#mainContent .prf-ai-intro {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--ink-3); margin-bottom: 16px;
}
#mainContent .prf-ai-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
#mainContent .prf-ai-opt {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--rad); padding: 18px 16px 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#mainContent .prf-ai-opt:hover { border-color: var(--violet); }
#mainContent .prf-ai-opt.selected {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-tint);
  background: var(--bg-1);
}
#mainContent .prf-ai-opt-byok.selected { box-shadow: 0 0 0 3px var(--violet-tint); }
#mainContent .prf-ai-ribbon {
  position: absolute; top: -1px; right: 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  color: #fff; background: var(--violet-deep);
  padding: 2px 8px; border-radius: 0 0 var(--rad-sm) var(--rad-sm);
}
#mainContent .prf-ai-opt-byok .prf-ai-ribbon { background: var(--sky); color: #0a0a0a; }
#mainContent .prf-ai-opt-name {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 15px; color: var(--ink);
}
#mainContent .prf-ai-opt-role {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
#mainContent .prf-ai-opt-desc {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55;
  color: var(--ink-3); margin-top: 2px;
}
#mainContent .prf-ai-opt-check {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--violet-ink); margin-top: 6px; opacity: 0; transition: opacity .12s ease;
}
#mainContent .prf-ai-opt.selected .prf-ai-opt-check { opacity: 1; }

/* BYOK reveal panel */
#mainContent .prf-ai-byok {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
#mainContent .prf-ai-byok[hidden] { display: none; }
#mainContent .prf-ai-key-row {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
}
#mainContent .prf-ai-key-row .prf-ai-key { flex: 1 1 200px; min-width: 0; }
#mainContent .prf-ai-key-note {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
  color: var(--ink-4); margin-top: 8px;
}
#mainContent .prf-ai-status-row {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
}
#mainContent .prf-ai-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-4);
}
#mainContent .prf-ai-status-dot[data-state="set"] { background: var(--sky); }
#mainContent .prf-ai-status-dot[data-state="ok"] { background: var(--mint); }
#mainContent .prf-ai-status-dot[data-state="fail"] { background: var(--rose); }
#mainContent .prf-ai-status-dot[data-state="testing"] { background: var(--amber); }
#mainContent .prf-ai-status-dot[data-state="empty"] { background: var(--amber); }
#mainContent .prf-ai-status-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}
#mainContent .prf-ai-actions { margin-top: 16px; }

/* ---- DESKTOP: sticky rail + deck at >=1080px ---- */
@media (min-width: 1080px) {
  #mainContent .prf-shell {
    display: grid; grid-template-columns: 300px 1fr; gap: 28px;
    align-items: start;
  }
  #mainContent .prf-rail {
    position: sticky; top: 24px; align-self: start;
  }
  /* vertical tab nav on desktop */
  #mainContent .prf-rail .prf-tabs {
    flex-direction: column; border-bottom: none; gap: 1px;
    margin-bottom: 0; overflow: visible;
  }
  #mainContent .prf-rail .prf-tab {
    text-align: left; border-bottom: none;
    border-left: 2px solid transparent; border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
    padding: 10px 14px; width: 100%;
  }
  #mainContent .prf-rail .prf-tab.active {
    border-bottom-color: transparent;
    border-left-color: var(--violet);
    background: var(--violet-tint); color: var(--violet-ink);
  }
}

/* ---- LIGHT MODE for the new shell/rail/ai ---- */
[data-theme="light"] #mainContent .prf-rail-hero { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] #mainContent .prf-rail-email,
[data-theme="light"] #mainContent .prf-rail-num,
[data-theme="light"] #mainContent .prf-rail-meta-value,
[data-theme="light"] #mainContent .prf-ai-opt-name { color: var(--ink); }
[data-theme="light"] #mainContent .prf-rail-tier-desc,
[data-theme="light"] #mainContent .prf-rail-meta-label,
[data-theme="light"] #mainContent .prf-rail-cell-label,
[data-theme="light"] #mainContent .prf-ai-intro,
[data-theme="light"] #mainContent .prf-ai-opt-role,
[data-theme="light"] #mainContent .prf-ai-opt-desc,
[data-theme="light"] #mainContent .prf-ai-status-label { color: var(--ink-3); }
[data-theme="light"] #mainContent .prf-rail-uid,
[data-theme="light"] #mainContent .prf-ai-key-note { color: var(--ink-4); }
[data-theme="light"] #mainContent .prf-rail-strip { background: var(--line); border-color: var(--line); }
[data-theme="light"] #mainContent .prf-rail-cell { background: var(--bg-1); }
[data-theme="light"] #mainContent .prf-rail-meta { border-top-color: var(--line); }
[data-theme="light"] #mainContent .prf-ai-opt { background: var(--bg-2); border-color: var(--line-2); }
[data-theme="light"] #mainContent .prf-ai-opt:hover { border-color: var(--violet); }
[data-theme="light"] #mainContent .prf-ai-opt.selected { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); background: var(--bg-1); }
[data-theme="light"] #mainContent .prf-ai-opt-check { color: var(--violet); }
[data-theme="light"] #mainContent .prf-ai-byok { border-top-color: var(--line); }
[data-theme="light"] #mainContent .prf-ai-ribbon { background: var(--violet-deep); color: #fff; }
[data-theme="light"] #mainContent .prf-ai-opt-byok .prf-ai-ribbon { background: var(--sky); color: #0a0a0a; }
[data-theme="light"] #mainContent .prf-rail .prf-tab.active { background: var(--violet-tint); color: var(--violet); border-left-color: var(--violet); }

/* ---- MOBILE adjustments for new sections ---- */
@media (max-width: 768px) {
  #mainContent .prf-rail-hero { padding: 16px; }
  #mainContent .prf-ai-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  #mainContent .prf-rail-hero { padding: 14px; }
  #mainContent .prf-rail-avatar { width: 56px; height: 56px; font-size: 24px; }
  /* prevent iOS zoom on the BYOK key input + provider select */
  #mainContent .prf-ai-key,
  #mainContent .prf-ai-provider { font-size: 16px; }
  #mainContent #prfAiKey { letter-spacing: 0; }
  #mainContent .prf-ai-key-row { flex-wrap: wrap; }
  #mainContent .prf-ai-key-row .prf-ai-key { flex: 1 1 100%; }
}

/* ============================================================
   SIGNAL header restructure — rolling threat-posture ticker takes the
   center; the search box moves to the right (swap). Consistent on every
   page. The ticker module (header-ticker.js) renders into #tbTicker.
   ============================================================ */
#tbTicker { flex: 1 1 0; min-width: 180px; display: flex; align-items: center; overflow: hidden; height: 100%; }
/* search box no longer center — compact, sits right of the ticker before the controls */
.sig-tb .tb-tlql { flex: 0 1 200px; max-width: 200px; margin: 0; }
.sig-tb .tb-crumb { flex: none; min-width: 0; white-space: nowrap; }


@media (max-width: 1100px) {
  .sig-tb .tb-tlql { flex: 0 1 150px; max-width: 150px; }
}
@media (max-width: 768px) {
  /* mobile: breadcrumb removed so the rolling threat-posture ticker (the
     "message") has full width; search collapses to the magnifier in the
     fixed mobile-header. */
  .sig-tb .tb-crumb { display: none !important; }
  .sig-tb .tb-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .sig-tb .tb-tlql { display: none !important; }
  .sig-tb #tbTicker { flex: 1 1 0; min-width: 0; }
  /* logo icon only on the fixed mobile header */
  .mobile-header .logo-text, .mobile-header .logo-subtitle { display: none; }
}
/* metric-row: wrap to 2-up on tablet/mobile so the extra Command stats fit */
@media (max-width: 900px) { .metric-row { flex-wrap: wrap; } .metric-row > .metric { flex: 1 1 calc(50% - 8px); min-width: 0; } }
@media (max-width: 480px) { .metric-row > .metric { flex: 1 1 calc(50% - 6px); } }

/* ============================================================
   SIGNAL header — minimal right side: only ✨ ask + 🔍 search icon buttons.
   (search textbox, notifications, theme toggle, and user/sign-out removed from
   the header; theme toggle relocated to the sidebar footer.)
   ============================================================ */
.sig-tb .tb-right { gap: 8px; margin-left: 8px; flex: none; }
.tb-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: var(--rad); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; transition: background .14s, border-color .14s, transform .08s; }
.tb-iconbtn:hover { background: var(--bg-2); border-color: var(--line); }
.tb-iconbtn:active { transform: translateY(1px); }
.tb-iconbtn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* purple magnifier search button */
.tb-search-btn { background: var(--violet-tint); border-color: color-mix(in srgb, var(--violet) 42%, var(--line-2)); }
.tb-search-btn:hover { background: color-mix(in srgb, var(--violet) 20%, var(--bg-1)); border-color: var(--violet); }
/* theme toggle, relocated into the sidebar footer */
.sidebar-footer .sb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--rad); background: var(--bg-1); color: var(--ink-2); cursor: pointer; }
.sidebar-footer .sb-theme-toggle:hover { background: var(--bg-2); border-color: var(--line); }

/* ============================================================
   SIGNAL-styled string-match search modal (opened by the 🔍 header button).
   #searchModal-scoped so it outranks the legacy .search-modal-* base rules.
   ============================================================ */
#searchModal .search-modal-backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(10px); }
#searchModal .search-modal-content { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--rad-lg); box-shadow: var(--shadow-violet, 0 24px 70px -20px rgba(139,92,246,.5)); }
#searchModal .search-modal-header { border-bottom: 1px solid var(--line); align-items: center; }
#searchModal #searchModalTitle { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--violet-ink); text-transform: lowercase; }
#searchModal .close-btn { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: transparent; border: 1px solid var(--line-2); border-radius: var(--rad); padding: 4px 9px; width: auto; height: auto; line-height: 1.4; cursor: pointer; transition: color .14s, border-color .14s; }
#searchModal .close-btn:hover { color: var(--ink); border-color: var(--violet); }
#searchModal .search-modal-input-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line-2)); background: var(--violet-tint); border-radius: var(--rad); padding: 0 12px; }
#searchModal .search-modal-input-wrap:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow, rgba(139,92,246,.18)); }
#searchModal .search-modal-prompt { color: var(--violet-ink); font-size: 14px; flex: none; }
#searchModal .search-modal-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; box-shadow: none; font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); padding: 13px 0; }
#searchModal .search-modal-input::placeholder { color: var(--ink-4); }
#searchModal .search-modal-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); line-height: 1.6; }
#searchModal .search-modal-hint a { color: var(--violet-ink); text-decoration: none; }
#searchModal .search-modal-hint a:hover { text-decoration: underline; }

/* mobile: let the Threat Horizon controls (legend + range picker) wrap instead of
   overflowing the panel; #mainContent-scoped to outrank the injected base rule. */
@media (max-width: 520px) {
  #mainContent .cx-hz-controls { flex-wrap: wrap; row-gap: 8px; }
  #mainContent .cx-hz-controls > * { min-width: 0; }
}

/* ============================================================
   SIGNAL — sidebar footer bar, header Ask button, nav hex icon + [new]
   ============================================================ */
.sidebar-footer .sb-foot { display: flex; align-items: center; gap: 10px; padding: 6px 2px 2px; }
.sb-foot .sb-foot-theme { display: inline-flex; align-items: center; }
.sb-foot .sb-theme-toggle { width: 30px; height: 30px; margin-top: 0; }
.sb-foot-profile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--violet-tint); color: var(--violet-ink); border: 1px solid color-mix(in srgb, var(--violet) 42%, var(--line-2)); transition: background .14s, border-color .14s; }
.sb-foot-profile:hover { background: color-mix(in srgb, var(--violet) 22%, var(--bg-1)); border-color: var(--violet); }
.sb-foot-tier { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); padding: 3px 8px; border: 1px solid var(--line-2); border-radius: var(--rad); white-space: nowrap; text-transform: lowercase; }
.sb-foot-logout { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; transition: border-color .14s; }
.sb-foot-logout:hover { border-color: var(--rose, #fb6f84); }
.sb-foot-logout-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose, #fb6f84); transition: box-shadow .14s; }
.sb-foot-logout:hover .sb-foot-logout-dot { box-shadow: 0 0 8px 1px rgba(251,111,132,.6); }

.sig-tb .tb-ask { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--rad); border: 1px solid color-mix(in srgb, var(--violet) 42%, var(--line-2)); background: var(--violet-tint); color: var(--ink); cursor: pointer; transition: background .14s, border-color .14s; }
.sig-tb .tb-ask:hover { background: color-mix(in srgb, var(--violet) 18%, var(--bg-1)); border-color: var(--violet); }
.sig-tb .tb-ask .tb-ask-ico { display: block; }
.sig-tb .tb-ask .tb-ask-label { font-style: italic; font-size: 14px; font-weight: 600; color: var(--violet-ink); font-family: var(--font-display, sans-serif); }

.nav-item .nav-ico-hex { width: 16px; height: 16px; flex: none; display: block; }
.nav-item .nav-new { margin-left: 6px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); background: var(--violet-tint); border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line-2)); border-radius: 3px; padding: 1px 5px; line-height: 1.5; }

/* ============================================================
   SIGNAL r17 — animated brand logo, hex-chip grid, 1-line footer, threat-level pad
   ============================================================ */
/* Animated brand mark (replaces the >_ glyph). Transparent; violet works in both themes. */
.tl-logo-mark { display: inline-flex; align-items: center; }
.tl-logo-svg { height: 26px; width: auto; display: block; }
.mobile-header .tl-logo-svg { height: 22px; }
.tl-logo-svg .tl-load-fill { transform-box: fill-box; transform-origin: left center; animation: tlLoadPulse 2.4s ease-in-out infinite; }
.tl-logo-svg g.tl-load:nth-of-type(2) .tl-load-fill { animation-delay: .35s; }
.tl-logo-svg g.tl-load:nth-of-type(3) .tl-load-fill { animation-delay: .7s; }
@keyframes tlLoadPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tl-logo-svg .tl-load-fill { animation: none; opacity: 1; } }

/* Grid → faint tiled hex-chip motif (keeps the violet glow). */
.spot-media-grid { background: radial-gradient(120% 140% at 100% 0%, var(--violet-tint) 0%, transparent 55%); overflow: hidden; }
.spot-media-grid::before { content: ""; position: absolute; inset: 0; background-image: url(/threadlinqs-hexchip-24.png); background-repeat: repeat; background-size: 26px 26px; opacity: .09; pointer-events: none; }
.spot[data-cat="VULNERABILITY"] .spot-media-grid, .spot[data-cat="MALWARE"] .spot-media-grid { background: radial-gradient(120% 140% at 100% 0%, var(--sev-critical-tint) 0%, transparent 55%); }
.tp-hero::before { background: url(/threadlinqs-hexchip-24.png) repeat !important; background-size: 28px 28px !important; opacity: .09; }
.tp-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 88% 0%, var(--violet-tint) 0%, transparent 55%); pointer-events: none; }

/* Sidebar footer: single tight horizontal line; drop the stats line to free menu space. */
.sidebar-footer { padding-top: 8px; }
.sidebar-footer .sb-foot { flex-direction: row !important; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 2px 0; }
.sidebar-footer .stats-mini { display: none; }

/* Threat-level widget: breathing room so text/bars aren't on the border. */
#mainContent .cmd-gaugewrap .cmd-gaugewrap-body { padding: 8px 16px 16px; }
#mainContent .cx-tl { padding: 4px 2px 2px; gap: 16px; }
#mainContent .cx-tl-crits { padding: 0 2px; }

/* Ask button now uses the inline animated logo mark — size it for the button. */
.sig-tb .tb-ask .tb-ask-ico.tl-logo-svg { height: 16px; width: auto; flex: none; }

/* ============================================================================
   ███  SIGNAL ADMIN CONSOLE  ███   (design handoff → production)
   All rules scoped under .adm-app to avoid generic-class collisions
   (.panel/.kpi/.drawer/.funnel/.bars/.chip/.btn/.spark/.lead/.geo-row …).
   Consumes the Signal tokens defined above (:root / [data-theme="light"]).
   Legacy .adm-container/.adm-stats-strip block (~L14683) is removed at cutover.
   ============================================================================ */
@keyframes admBlink { 0%,60%{opacity:1} 61%,100%{opacity:.35} }
@keyframes admPulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent);} 70%,100%{ box-shadow:0 0 0 5px color-mix(in srgb,currentColor 0%,transparent);} }
@keyframes admFadeUp { from{ transform:translateY(9px); opacity:0;} to{ transform:none; opacity:1;} }
@keyframes admExpandIn { from{ opacity:0;} to{ opacity:1;} }
@keyframes admFadeIn { from{ opacity:0;} to{ opacity:1;} }
@keyframes admSlideIn { from{ transform:translateX(100%);} to{ transform:none;} }
@keyframes admToastIn { from{ transform:translateY(14px); opacity:0;} to{ transform:none; opacity:1;} }

.adm-app { display:block; width:100%; background:var(--bg); color:var(--ink); font-family:var(--font-sans); }
.adm-app .spark { display:block; width:auto; }
.adm-app .fade-up { animation:admFadeUp .3s cubic-bezier(.2,.7,.3,1); }
.adm-app .mono { font-family:var(--font-mono); }
.adm-app .font-display { font-family:var(--font-display); }
.adm-app .micro { font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.adm-app .micro-vi { color:var(--violet-ink); }
.adm-app .br { color:var(--ink-4); }

/* brand / top row */
.adm-app .adm-head { display:flex; align-items:center; gap:16px; padding:0 22px; height:58px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter:blur(12px); position:sticky; top:0; z-index:30; }
.adm-app .adm-brand { display:flex; align-items:center; gap:11px; cursor:pointer; flex:none; }
.adm-app .adm-brand-tx { display:flex; flex-direction:column; line-height:1.03; }
.adm-app .adm-brand-name { font-family:var(--font-display); font-weight:700; font-size:15.5px; letter-spacing:-.02em; color:var(--ink); }
.adm-app .adm-brand-sub { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.adm-app .adm-shield { color:var(--violet-ink); display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--violet-tint); border:1px solid color-mix(in srgb, var(--violet) 26%, transparent); flex:none; }
.adm-app .adm-search { margin-left:6px; flex:1; max-width:360px; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:var(--rad); border:1px solid var(--line-2); background:var(--bg-1); color:var(--ink-3); transition:border-color .15s, box-shadow .15s; }
.adm-app .adm-search.focus { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); color:var(--violet-ink); }
.adm-app .adm-search input { flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink); font-size:13px; font-family:var(--font-sans); }
.adm-app .adm-search input::placeholder { color:var(--ink-4); }
.adm-app .adm-search kbd { font-family:var(--font-mono); font-size:9.5px; color:var(--ink-4); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; }
.adm-app .adm-toolbar { margin-left:auto; display:flex; align-items:center; gap:9px; flex:none; }
.adm-app .adm-clock { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); flex:none; letter-spacing:.02em; }
.adm-app .adm-live-toggle { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); border:1px solid var(--line-2); background:var(--bg-1); padding:6px 11px; border-radius:99px; cursor:pointer; transition:all .15s; }
.adm-app .adm-live-toggle:hover { border-color:var(--line-3); color:var(--ink-2); }
.adm-app .adm-live-toggle.on { color:var(--mint); border-color:color-mix(in srgb, var(--mint) 40%, transparent); }
.adm-app .adm-live-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.adm-app .adm-live-toggle.on .adm-live-dot { background:var(--mint); animation:admPulse 2s infinite; }
.adm-app .adm-icbtn { width:34px; height:34px; border-radius:var(--rad-sm); display:grid; place-items:center; cursor:pointer; background:transparent; border:1px solid transparent; color:var(--ink-2); transition:all .14s; }
.adm-app .adm-icbtn:hover { background:var(--bg-3); color:var(--ink); border-color:var(--line-2); }
.adm-app .adm-tweakbtn { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); padding:7px 12px; border-radius:var(--rad-sm); border:1px solid var(--line-2); background:var(--bg-1); cursor:pointer; transition:all .14s; }
.adm-app .adm-tweakbtn:hover { border-color:var(--violet); color:var(--violet-ink); }

/* tab strip */
.adm-app .adm-tabs { display:flex; align-items:stretch; gap:2px; margin:0; padding:0 16px; height:46px; border-bottom:1px solid var(--line); background:var(--bg-1); overflow-x:auto; position:sticky; top:58px; z-index:20; }
.adm-app .adm-tabs::-webkit-scrollbar { height:0; }
.adm-app .adm-tab { display:inline-flex; align-items:center; gap:8px; padding:0 13px; height:100%; font-family:var(--font-mono); font-size:12.5px; letter-spacing:-.01em; color:var(--ink-3); border:none; background:none; cursor:pointer; position:relative; white-space:nowrap; transition:color .14s; }
.adm-app .adm-tab:hover { color:var(--ink); }
.adm-app .adm-tab.on { color:var(--ink); }
.adm-app .adm-tab.on::after { content:""; position:absolute; left:9px; right:9px; bottom:0; height:2px; border-radius:2px 2px 0 0; background:var(--violet); }
.adm-app .adm-tab-ic { display:grid; place-items:center; color:currentColor; opacity:.85; }
.adm-app .adm-tab.on .adm-tab-ic { color:var(--violet-ink); opacity:1; }
.adm-app .adm-tab-badge { font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--violet-ink); background:var(--violet-tint); border-radius:99px; padding:1px 6px; min-width:18px; text-align:center; }
.adm-app .adm-tab-badge.live { color:var(--mint); background:var(--sev-low-tint); }

/* body */
.adm-app .adm-body { min-height:60vh; }
.adm-app .adm-pad { padding:22px; max-width:1500px; margin:0 auto; width:100%; }
.adm-app[data-density="compact"] .adm-pad { padding:15px 18px; }
.adm-app .adm-h { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; flex-wrap:wrap; }
.adm-app .adm-h-tx h1 { font-family:var(--font-display); font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1; margin-top:5px; }
.adm-app .adm-h-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.adm-app .idx-rule { display:flex; align-items:center; gap:14px; margin:22px 0 13px; }
.adm-app .idx-rule .ln { flex:1; height:1px; background:var(--line); }
.adm-app .chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-2); padding:6px 11px; border-radius:var(--rad-sm); border:1px solid var(--line-2); background:var(--bg-1); cursor:pointer; transition:all .14s; }
.adm-app .chip:hover { border-color:var(--violet); color:var(--violet-ink); }
.adm-app .btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); padding:7px 11px; border-radius:var(--rad-sm); border:1px solid var(--line-2); background:var(--bg-1); cursor:pointer; transition:all .14s; }
.adm-app .btn:hover { border-color:var(--violet); color:var(--violet-ink); background:var(--violet-tint); }
.adm-app .bracket-btn { font-family:var(--font-mono); background:none; border:none; color:var(--ink-2); cursor:pointer; }
.adm-app .panel { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; }
.adm-app .panel-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line); }
.adm-app .panel-h .ttl { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.adm-app .panel-h .ttl b { color:var(--violet-ink); }
.adm-app .live-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; color:var(--mint); letter-spacing:.12em; text-transform:uppercase; }
.adm-app .live-tag i { width:6px; height:6px; border-radius:50%; background:var(--mint); animation:admPulse 2s infinite; }

/* KPI */
.adm-app .kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:18px; }
.adm-app .kpi { padding:14px 15px 12px; position:relative; overflow:hidden; }
.adm-app .kpi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.adm-app .kpi-delta { font-family:var(--font-mono); font-size:10px; padding:1px 6px; border-radius:99px; }
.adm-app .kpi-delta.up { color:var(--mint); background:var(--sev-low-tint); }
.adm-app .kpi-delta.dn { color:var(--rose); background:var(--sev-critical-tint); }
.adm-app .kpi-delta.flat { color:var(--ink-3); background:var(--bg-3); }
.adm-app .kpi-val { font-family:var(--font-display); font-weight:700; font-size:34px; line-height:.95; letter-spacing:-.03em; color:var(--ink); margin:9px 0 5px; font-variant-numeric:tabular-nums; }
.adm-app .kpi-val .suf { font-size:17px; color:var(--ink-3); margin-left:2px; }
.adm-app .kpi-val .live-pip { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--mint); margin-left:9px; vertical-align:middle; animation:admPulse 2s infinite; }
.adm-app .kpi-sub { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }

/* content grids */
.adm-app .adm-grid2 { display:grid; grid-template-columns:1.55fr 1fr; gap:14px; }
.adm-app .adm-grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.adm-app .span2 { grid-column:span 2; }

/* USER TABLE */
.adm-app .utable { display:flex; flex-direction:column; }
.adm-app .uthead, .adm-app .urow { display:grid; grid-template-columns:1.9fr 1.3fr .95fr .85fr 1.25fr .8fr 24px; align-items:center; gap:12px; padding:0 16px; }
.adm-app .uthead { height:38px; border-bottom:1px solid var(--line); background:var(--bg-1); z-index:4; }
.adm-app .uthead span { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:4px; }
.adm-app .uthead span:hover { color:var(--ink-2); }
.adm-app .uthead span.sorted { color:var(--violet-ink); }
.adm-app .urow { min-height:56px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; position:relative; }
.adm-app .urow:hover { background:var(--bg-2); }
.adm-app .urow.open { background:var(--violet-tint); }
.adm-app[data-density="compact"] .urow { min-height:46px; }
.adm-app .ucell-user { display:flex; align-items:center; gap:11px; min-width:0; }
.adm-app .uava { width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; background:linear-gradient(135deg, var(--violet-deep), var(--violet)); position:relative; }
.adm-app .uava.t0 { background:linear-gradient(135deg, #4b4660, #6b6483); }
.adm-app .uava.t1 { background:linear-gradient(135deg, #2a6fb0, var(--sigma)); }
.adm-app .uava.t2 { background:linear-gradient(135deg, var(--rose), var(--sev-high)); }
.adm-app .uava.t3 { background:linear-gradient(135deg, var(--violet-deep), var(--violet-bright)); box-shadow:0 0 0 1px color-mix(in srgb, var(--violet) 40%, transparent); }
.adm-app .uava.t4 { background:linear-gradient(135deg, #b8860b, #fcd34d); box-shadow:0 0 0 1px color-mix(in srgb, #fcd34d 50%, transparent); }
.adm-app .uava-sd { position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%; border:2px solid var(--bg-1); }
.adm-app .urow:hover .uava-sd { border-color:var(--bg-2); }
.adm-app .uname-wrap { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.adm-app .uname { font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .uemail { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .uorg { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.adm-app .uorg-name { font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .uorg-sector { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); }
.adm-app .urole { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap; }
.adm-app .tier-tag { font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.03em; padding:1px 6px; border-radius:4px; border:1px solid var(--line-2); color:var(--ink-4); background:var(--bg-2); flex:none; white-space:nowrap; }
.adm-app .tier-tag.t1 { color:var(--sigma); border-color:color-mix(in srgb, var(--sigma) 35%, transparent); }
.adm-app .tier-tag.t2 { color:var(--rose); border-color:color-mix(in srgb, var(--rose) 35%, transparent); }
.adm-app .tier-tag.t3 { color:var(--violet-ink); border-color:color-mix(in srgb, var(--violet) 55%, transparent); background:var(--violet-tint); }
.adm-app .tier-tag.t4 { color:#fcd34d; border-color:color-mix(in srgb, #fcd34d 55%, transparent); background:rgba(252,211,77,.10); }
.adm-app .ustatus { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); white-space:nowrap; }
.adm-app .sd { width:8px; height:8px; border-radius:50%; flex:none; }
.adm-app .sd.online { background:var(--mint); box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 20%, transparent); }
.adm-app .sd.idle { background:var(--amber); }
.adm-app .sd.today { background:var(--sigma); }
.adm-app .sd.offline { background:var(--ink-4); }
.adm-app .sd.suspended { background:var(--rose); }
.adm-app .ustatus.online { color:var(--mint); }
.adm-app .ustatus.suspended { color:var(--rose); }
.adm-app .ueng { display:flex; align-items:center; gap:9px; }
.adm-app .ueng .spark { flex:none; }
.adm-app .ueng-n { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.adm-app .ueng-n b { color:var(--ink); font-weight:600; }
.adm-app .urisk { display:flex; align-items:center; gap:7px; }
.adm-app .risk-bar { width:38px; height:5px; border-radius:99px; background:var(--bg-3); overflow:hidden; flex:none; }
.adm-app .risk-fill { height:100%; border-radius:99px; }
.adm-app .urisk-n { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); width:20px; }
.adm-app .uchev { color:var(--ink-4); display:grid; place-items:center; transition:transform .2s, color .14s; }
.adm-app .urow:hover .uchev { color:var(--violet-ink); }
.adm-app .urow.open .uchev { transform:rotate(90deg); color:var(--violet-ink); }
.adm-app .utable-empty { padding:40px; text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--ink-4); }
.adm-app .urow-inline { border-bottom:1px solid var(--line); background:var(--bg-inset); animation:admExpandIn .26s cubic-bezier(.2,.7,.3,1); overflow:hidden; }

/* DRAWER */
.adm-app .drawer-scrim { position:fixed; inset:0; z-index:500; background:color-mix(in srgb, var(--bg-inset) 60%, transparent); backdrop-filter:blur(3px); animation:admFadeIn .2s; }
.adm-app .drawer { position:fixed; top:0; right:0; bottom:0; z-index:510; width:560px; max-width:94vw; background:var(--bg-1); border-left:1px solid var(--line-2); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; animation:admSlideIn .3s cubic-bezier(.2,.7,.3,1); }
.adm-app .dh { flex:none; padding:18px 20px 16px; border-bottom:1px solid var(--line); position:relative; }
.adm-app .dh-close { position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:var(--rad-sm); border:1px solid transparent; background:transparent; color:var(--ink-3); font-size:18px; cursor:pointer; display:grid; place-items:center; transition:all .14s; }
.adm-app .dh-close:hover { background:var(--bg-3); color:var(--ink); }
.adm-app .dh-id { display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.adm-app .dh-top { display:flex; align-items:center; gap:14px; }
.adm-app .dh-ava { width:52px; height:52px; border-radius:13px; flex:none; display:grid; place-items:center; font-family:var(--font-mono); font-size:18px; font-weight:600; color:#fff; background:linear-gradient(135deg, var(--violet-deep), var(--violet-bright)); position:relative; }
.adm-app .dh-ava .uava-sd { width:14px; height:14px; border:2.5px solid var(--bg-1); }
.adm-app .dh-name { font-family:var(--font-display); font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.adm-app .dh-meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:4px; }
.adm-app .dh-meta-i { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:5px; }
.adm-app .dh-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; }
.adm-app .drawer-body { flex:1; overflow-y:auto; padding:6px 20px 30px; }
.adm-app .dossier { display:flex; flex-direction:column; }
.adm-app .dsec { margin-top:20px; }
.adm-app .dsec-h { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.adm-app .dsec-h .micro { white-space:nowrap; }
.adm-app .dsec-h .ln { flex:1; height:1px; background:var(--line); }
.adm-app .dsec-h .cnt { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); }
.adm-app .dfields { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; }
.adm-app .dfield { background:var(--bg-1); padding:9px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.adm-app .dfield.wide { grid-column:span 2; }
.adm-app .dfield-k { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
.adm-app .dfield-v { font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .dfield-v.mono { font-family:var(--font-mono); font-size:12px; }
.adm-app .dstats { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; }
.adm-app .dstat { background:var(--bg-1); padding:11px 12px; display:flex; flex-direction:column; gap:3px; }
.adm-app .dstat-n { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.adm-app .dstat-l { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); }
.adm-app .dchips { display:flex; flex-wrap:wrap; gap:6px; }
.adm-app .dchip { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-2); padding:4px 9px; border-radius:99px; border:1px solid var(--line-2); background:var(--bg-2); }
.adm-app .dchip.vi { color:var(--violet-ink); border-color:color-mix(in srgb, var(--violet) 30%, transparent); }
.adm-app .dchip.warn { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 35%, transparent); }
.adm-app .dchip.bad { color:var(--rose); border-color:color-mix(in srgb, var(--rose) 35%, transparent); }
.adm-app .dlist { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; }
.adm-app .dli { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2); }
.adm-app .dli:last-child { border-bottom:none; }
.adm-app .dli:hover { background:var(--bg-2); }
.adm-app .dli-q { font-family:var(--font-mono); font-size:11.5px; color:var(--violet-ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .dli-t { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); flex:none; }
.adm-app .dli-rail { width:3px; align-self:stretch; border-radius:2px; flex:none; }
.adm-app .dli-id { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); flex:none; }
.adm-app .dli-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font-size:12.5px; }
.adm-app .dli-n { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); flex:none; }
.adm-app .dli-ok { width:7px; height:7px; border-radius:50%; flex:none; }
.adm-app .dli-ok.y { background:var(--mint); } .adm-app .dli-ok.n { background:var(--rose); }
.adm-app .dtl { position:relative; padding-left:6px; }
.adm-app .dtl-row { display:flex; gap:11px; padding:6px 0; position:relative; }
.adm-app .dtl-dot { width:9px; height:9px; border-radius:50%; flex:none; margin-top:4px; border:2px solid var(--bg-1); box-shadow:0 0 0 1px var(--line-2); }
.adm-app .dtl-line { position:absolute; left:4px; top:14px; bottom:-6px; width:1px; background:var(--line); }
.adm-app .dtl-body { flex:1; min-width:0; }
.adm-app .dtl-txt { font-size:12.5px; color:var(--ink); }
.adm-app .dtl-time { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); }
.adm-app .dusage { display:flex; align-items:flex-end; gap:3px; height:46px; padding:4px 0; }
.adm-app .dusage span { flex:1; background:var(--violet); border-radius:2px 2px 0 0; opacity:.82; min-height:2px; }
.adm-app .dnote-form { display:flex; gap:7px; margin-top:9px; }
.adm-app .dnote-input { flex:1; min-width:0; border:1px solid var(--line-2); background:var(--bg-1); color:var(--ink); border-radius:var(--rad-sm); padding:7px 10px; font-size:12px; font-family:var(--font-sans); outline:none; }
.adm-app .dnote-input:focus { border-color:var(--violet); }

/* DATASOURCES */
.adm-app .ds-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:13px; }
.adm-app .ds-card { padding:0; overflow:hidden; }
.adm-app .ds-top { display:flex; align-items:flex-start; gap:12px; padding:15px 16px 12px; }
.adm-app .ds-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; color:var(--violet-ink); background:var(--violet-tint); border:1px solid color-mix(in srgb, var(--violet) 22%, transparent); }
.adm-app .ds-tx { flex:1; min-width:0; }
.adm-app .ds-name { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); }
.adm-app .ds-note { font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.4; }
.adm-app .ds-status { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:99px; flex:none; }
.adm-app .ds-status .dot { width:6px; height:6px; border-radius:50%; }
.adm-app .ds-status.healthy { color:var(--mint); background:var(--sev-low-tint); } .adm-app .ds-status.healthy .dot { background:var(--mint); }
.adm-app .ds-status.degraded { color:var(--amber); background:var(--sev-high-tint); } .adm-app .ds-status.degraded .dot { background:var(--amber); animation:admPulse 1.8s infinite; }
.adm-app .ds-status.throttled { color:var(--sigma); background:rgba(125,211,252,.12); } .adm-app .ds-status.throttled .dot { background:var(--sigma); }
.adm-app .ds-status.down { color:var(--rose); background:var(--sev-critical-tint); } .adm-app .ds-status.down .dot { background:var(--rose); animation:admPulse 1.2s infinite; }
.adm-app .ds-status.unknown { color:var(--ink-3); background:var(--bg-3); } .adm-app .ds-status.unknown .dot { background:var(--ink-4); }
.adm-app .ds-spark { padding:0 16px; }
.adm-app .ds-metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); margin-top:12px; }
.adm-app .ds-m { background:var(--bg-1); padding:9px 12px; display:flex; flex-direction:column; gap:2px; }
.adm-app .ds-m-n { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); }
.adm-app .ds-m-l { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }
.adm-app .ds-m-n.good { color:var(--mint); } .adm-app .ds-m-n.warn { color:var(--amber); } .adm-app .ds-m-n.bad { color:var(--rose); }

/* AUDIT */
.adm-app .audit-list { display:flex; flex-direction:column; }
.adm-app .audit-row { display:grid; grid-template-columns:78px 26px 1fr auto; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); transition:background .12s; }
.adm-app .audit-row:last-child { border-bottom:none; }
.adm-app .audit-row:hover { background:var(--bg-2); }
.adm-app .audit-time { font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.adm-app .audit-ic { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none; }
.adm-app .audit-ic.high { color:var(--rose); background:var(--sev-critical-tint); }
.adm-app .audit-ic.warn { color:var(--amber); background:var(--sev-high-tint); }
.adm-app .audit-ic.info { color:var(--violet-ink); background:var(--violet-tint); }
.adm-app .audit-main { min-width:0; }
.adm-app .audit-action { font-size:13px; color:var(--ink); }
.adm-app .audit-action b { color:var(--violet-ink); font-weight:600; cursor:pointer; }
.adm-app .audit-action b:hover { text-decoration:underline; }
.adm-app .audit-sub { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .audit-sev { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:99px; flex:none; }
.adm-app .audit-sev.high { color:var(--rose); background:var(--sev-critical-tint); }
.adm-app .audit-sev.warn { color:var(--amber); background:var(--sev-high-tint); }
.adm-app .audit-sev.info { color:var(--ink-3); background:var(--bg-3); }

/* charts */
.adm-app .bars { display:flex; align-items:flex-end; gap:6px; height:150px; padding:14px 16px; }
.adm-app .bars .bcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.adm-app .bars .btrack { width:100%; display:flex; align-items:flex-end; justify-content:center; height:100%; }
.adm-app .bars .bfill { width:70%; max-width:22px; border-radius:3px 3px 0 0; background:linear-gradient(var(--violet-bright), var(--violet)); transition:height .5s cubic-bezier(.2,.7,.3,1); }
.adm-app .bars .blabel { font-family:var(--font-mono); font-size:9px; color:var(--ink-4); }
.adm-app .funnel { display:flex; flex-direction:column; padding:6px 0; }
.adm-app .fn-row { display:grid; grid-template-columns:140px 1fr 60px; align-items:center; gap:12px; padding:7px 16px; }
.adm-app .fn-label { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .fn-track { height:22px; border-radius:var(--rad-sm); background:var(--bg-3); overflow:hidden; }
.adm-app .fn-fill { height:100%; border-radius:var(--rad-sm); background:linear-gradient(90deg, var(--violet-deep), var(--violet-bright)); display:flex; align-items:center; }
.adm-app .fn-val { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); text-align:right; }
.adm-app .ret-strip { display:flex; gap:4px; padding:16px; align-items:flex-end; flex-wrap:wrap; }
.adm-app .ret-col { flex:1; min-width:34px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.adm-app .ret-cell { width:100%; aspect-ratio:1; border-radius:var(--rad-sm); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; color:var(--ink); }
.adm-app .ret-wk { font-family:var(--font-mono); font-size:9px; color:var(--ink-4); }

/* leaderboard + feed + presence + geo */
.adm-app .lead { display:flex; flex-direction:column; }
.adm-app .lead-row { display:grid; grid-template-columns:22px 3px 1fr auto auto; align-items:center; gap:11px; padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.adm-app .lead-row:last-child { border-bottom:none; }
.adm-app .lead-row:hover { background:var(--bg-2); }
.adm-app .lead-rank { font-family:var(--font-mono); font-size:13px; color:var(--ink-4); }
.adm-app .lead-rail { align-self:stretch; border-radius:2px; }
.adm-app .lead-title { font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.adm-app .lead-cat { font-family:var(--font-mono); font-size:9.5px; color:var(--ink-4); flex:none; }
.adm-app .lead-views { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); flex:none; }
.adm-app .afeed { display:flex; flex-direction:column; max-height:560px; overflow-y:auto; }
.adm-app .afeed-row { display:flex; align-items:center; gap:11px; padding:9px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.adm-app .afeed-row:last-child { border-bottom:none; }
.adm-app .afeed-row:hover { background:var(--bg-2); }
.adm-app .afeed-ava { width:24px; height:24px; border-radius:6px; flex:none; display:grid; place-items:center; font-family:var(--font-mono); font-size:9.5px; font-weight:600; color:#fff; background:linear-gradient(135deg, var(--violet-deep), var(--violet)); }
.adm-app .afeed-u { font-family:var(--font-mono); font-size:11px; color:var(--violet-ink); flex:none; }
.adm-app .afeed-act { flex:1; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-app .afeed-t { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); flex:none; }
.adm-app .presence { display:flex; flex-wrap:wrap; gap:7px; padding:16px; }
.adm-app .pres-ava { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; background:linear-gradient(135deg, var(--violet-deep), var(--violet)); position:relative; cursor:pointer; transition:transform .14s; }
.adm-app .pres-ava:hover { transform:translateY(-2px) scale(1.06); }
.adm-app .pres-ava .uava-sd { width:9px; height:9px; right:-2px; bottom:-2px; border:2px solid var(--bg-1); }
.adm-app .pres-more { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); background:var(--bg-3); border:1px solid var(--line-2); }
.adm-app .geo-list { display:flex; flex-direction:column; padding:6px 0; }
.adm-app .geo-row { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:11px; padding:6px 16px; }
.adm-app .geo-flag { font-size:16px; }
.adm-app .geo-track { display:block; height:6px; border-radius:99px; background:var(--bg-3); overflow:hidden; }
.adm-app .geo-fill { display:block; height:100%; border-radius:99px; background:var(--violet); }
.adm-app .geo-n { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }

/* filter chips bar */
.adm-app .filt-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.adm-app .filt-seg { display:flex; gap:2px; padding:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:9px; }
.adm-app .filt-seg button { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); border:none; background:none; padding:5px 11px; border-radius:6px; cursor:pointer; transition:all .13s; white-space:nowrap; }
.adm-app .filt-seg button:hover { color:var(--ink); }
.adm-app .filt-seg button.on { background:var(--violet-deep); color:#fff; }
.adm-app .filt-count { font-family:var(--font-mono); font-size:11px; color:var(--ink-4); margin-left:auto; }
.adm-app select.chip { appearance:auto; cursor:pointer; }

/* toast */
.adm-app .toast-wrap { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:700; display:flex; flex-direction:column; gap:8px; align-items:center; }
.adm-app .toast { position:relative; opacity:1; transform:none; transition:none; bottom:auto; left:auto; display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:var(--rad); background:var(--bg-1); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); font-size:12.5px; color:var(--ink); animation:admToastIn .26s cubic-bezier(.2,.8,.3,1) both; }
.adm-app .toast .tic { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:var(--mint); flex:none; }
.adm-app .toast b { color:var(--violet-ink); font-family:var(--font-mono); font-size:12px; }

/* misc states */
.adm-app .adm-loading2 { padding:50px; text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--ink-4); }
.adm-app .adm-err2 { padding:24px; text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--rose); }

/* responsive */
@media (max-width:1100px) {
  .adm-app .kpi-row { grid-template-columns:repeat(3, 1fr); }
  .adm-app .adm-grid2 { grid-template-columns:1fr; }
  .adm-app .ds-grid { grid-template-columns:1fr; }
  .adm-app .uthead, .adm-app .urow { grid-template-columns:1.8fr 1fr .9fr 1fr 24px; }
  .adm-app .ucell-org, .adm-app .ucell-eng { display:none; }
}
@media (max-width:680px) {
  .adm-app .adm-head { padding:0 12px; gap:10px; }
  .adm-app .adm-search { max-width:none; }
  .adm-app .adm-clock { display:none; }
  .adm-app .adm-pad { padding:14px 12px; }
  .adm-app .kpi-row { grid-template-columns:repeat(2, 1fr); }
  .adm-app .adm-grid3 { grid-template-columns:1fr; }
  .adm-app .uthead, .adm-app .urow { grid-template-columns:1.6fr .9fr 1fr 24px; }
  .adm-app .ucell-role { display:none; }
  .adm-app .dfields, .adm-app .dstats { grid-template-columns:1fr 1fr; }
  .adm-app .drawer { width:100%; }
}

/* ============================================================================
   Research Lab AUDIT tab (admin) — read any user's chat transcripts (read-only).
   Scoped under .adm-app with the .adm-rl-* prefix (no collision with site/admin
   classes). Dark + light come free via the shared token variables.
   ============================================================================ */
.adm-app .adm-rl-bar { display:flex; gap:10px; align-items:center; margin:14px 0; }
.adm-app .adm-rl-search { flex:1; display:flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line); padding:0 12px; height:38px; color:var(--ink-3); }
.adm-app .adm-rl-search input { flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:inherit; font-size:13px; }
.adm-app .adm-rl-select { background:var(--bg-2); border:1px solid var(--line); color:var(--ink); height:38px; padding:0 10px; font-family:inherit; font-size:13px; cursor:pointer; }
.adm-app .adm-rl-row { cursor:pointer; transition:background .12s; }
.adm-app .adm-rl-row:hover { background:var(--bg-2); }
.adm-app .adm-rl-tier { font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border:1px solid var(--line); color:var(--ink-3); margin-left:6px; white-space:nowrap; }
.adm-app .adm-rl-tier.t3 { color:var(--violet); border-color:var(--violet); }
.adm-app .adm-rl-tier.t4 { color:#d4a017; border-color:#d4a017; }
.adm-app .adm-rl-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.adm-app .adm-rl-pager .chip[disabled] { opacity:.4; pointer-events:none; }
.adm-app .adm-rl-meta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:10px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2); }
.adm-app .adm-rl-thread { display:flex; flex-direction:column; gap:14px; }
.adm-app .adm-rl-msg { border:1px solid var(--line); padding:13px 16px; background:var(--bg-1); }
.adm-app .adm-rl-user { border-left:3px solid var(--ink-4); }
.adm-app .adm-rl-assistant { border-left:3px solid var(--violet); }
.adm-app .adm-rl-role { font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:8px; }
.adm-app .adm-rl-body { white-space:pre-wrap; word-break:break-word; font-size:13.5px; line-height:1.55; color:var(--ink); }
.adm-app .adm-rl-body.adm-rl-empty { color:var(--ink-4); font-style:italic; }
.adm-app .adm-rl-think { margin-bottom:10px; font-size:12px; }
.adm-app .adm-rl-think summary { cursor:pointer; color:var(--ink-3); font-family:'IBM Plex Mono', monospace; }
.adm-app .adm-rl-think ul { margin:8px 0 0; padding-left:18px; color:var(--ink-2); }
.adm-app .adm-rl-think li { margin:3px 0; }
.adm-app .adm-rl-tools { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.adm-app .adm-rl-tool > summary { cursor:pointer; color:var(--ink-2); font-family:'IBM Plex Mono', monospace; font-size:12px; display:flex; align-items:center; gap:6px; }
.adm-app .adm-rl-tool.err > summary { color:var(--sev-high); }
.adm-app .adm-rl-tool-args { font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-3); margin:6px 0 0; word-break:break-all; }
.adm-app .adm-rl-tool-out { background:var(--bg-3); border:1px solid var(--line); padding:8px; margin:6px 0 0; font-size:11px; max-height:240px; overflow:auto; white-space:pre-wrap; word-break:break-word; color:var(--ink-2); }
@media (max-width: 768px) {
  .adm-app .adm-rl-bar { flex-direction:column; align-items:stretch; }
}

/* ============================================================================
   ENTERPRISE GOLD THEME (.adm-app.adm-ent) — the tenant-admin console's premium
   skin. Toggled by admApplyEntTheme() (page-admin.js): tenant admins always,
   super-admins only while drilled into a tenant's my_team view.
   NOTE: the ACCENT (--violet*) is set as INLINE custom properties by
   admApplyAccent() — inline beats stylesheets, so never set --violet* here.
   Everything below re-tokens the neutrals (warm blacks/golds) + a small set of
   targeted rules for hardcoded colors/radii. Do NOT define --text (it is
   load-bearing that it stays undefined → falls back to inherited color).
   ============================================================================ */
.adm-app.adm-ent {
  /* warm-black ramp (replaces the violet-tinged Signal neutrals) */
  --bg: #0c0b09; --bg-1: #12100c; --bg-2: #171410; --bg-3: #1d1913; --bg-inset: #0a0908;
  --line: #26221a; --line-2: #38301f; --line-3: #4a4028;
  --ink: #f7f4ec; --ink-2: #c6bdab; --ink-3: #8f8776; --ink-4: #615a4b;
  /* gold locals mirroring ent-ui.js */
  --ent-gold: #fde68a; --ent-gold-soft: rgba(253,230,138,.13); --ent-gold-line: rgba(253,230,138,.32); --ent-gold-ink: #fde68a;
  --adm-accent-contrast: #141208; /* text on solid gold */
  --rad: 0; --rad-sm: 0; --rad-lg: 0; /* zero-radius enterprise geometry */
}
[data-theme="light"] .adm-app.adm-ent {
  --bg: #f7f5ee; --bg-1: #fffdf7; --bg-2: #fbf8ef; --bg-3: #f1ecdf; --bg-inset: #f0ece0;
  --line: #e9e2cf; --line-2: #dcd2b7; --line-3: #c9bd9d;
  --ink: #1c180f; --ink-2: #4c452f; --ink-3: #726a52; --ink-4: #9a917a;
  --ent-gold: #9a6a00; --ent-gold-soft: rgba(154,106,0,.10); --ent-gold-line: rgba(154,106,0,.34); --ent-gold-ink: #7a5400;
  --adm-accent-contrast: #ffffff;
}
/* solid-accent contrast: white-on-gold is unreadable in dark mode */
.adm-app.adm-ent .filt-seg button.on { color: var(--adm-accent-contrast); }
/* NOTE: avatars keep their per-tier gradient + white glyph — they are NOT accent-tinted,
   so forcing dark contrast text would break the dark-gradient tiers (t0). */
/* zero the hardcoded radii (status DOTS stay round on purpose) */
.adm-app.adm-ent :is(.filt-seg, .filt-seg button, .adm-tab-badge, .adm-live-toggle, .adm-search kbd, .dchip, .ds-status, .kpi-delta, .audit-sev, .uava, .dh-ava, .afeed-ava, .pres-ava, .adm-shield, .tier-tag) { border-radius: 0; }
/* signature gold glow on the active tab + brand */
.adm-app.adm-ent .adm-tab.on { box-shadow: inset 0 -2px 0 var(--ent-gold-ink); }
.adm-app.adm-ent .adm-brand-sub { color: var(--ent-gold-ink); letter-spacing: .08em; }
/* premium KPI cards: 2px gold rail (mirrors .ent-kpi.gold) */
.adm-app.adm-ent .kpi { position: relative; overflow: hidden; }
.adm-app.adm-ent .kpi::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--ent-gold-ink); }
/* panels get a touch more air + a hover lift on endpoint cards */
.adm-app.adm-ent .panel { box-shadow: 0 1px 0 rgba(253,230,138,.04); }

/* ============================================================================
   ADMIN FORM SYSTEM — premium, consistent controls. Scoped .adm-app (accent-
   token driven: violet under magenta, gold under adm-ent automatically).
   ============================================================================ */
.adm-app .adm-field { display: grid; gap: 6px; min-width: 0; }
.adm-app .adm-field-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.adm-app .adm-field-help { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; max-width: 620px; }
.adm-app .adm-input, .adm-app .adm-select, .adm-app .adm-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink);
  padding: 9px 11px; border-radius: var(--rad-sm, 0); outline: none; transition: border-color .15s, box-shadow .15s;
}
.adm-app .adm-input:focus, .adm-app .adm-select:focus, .adm-app .adm-textarea:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint);
}
.adm-app .adm-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.adm-app .adm-form-row > .adm-field { flex: 1; min-width: 180px; }
.adm-app .adm-btn { font-family: var(--font-mono); font-size: 12px; padding: 9px 15px; cursor: pointer; transition: all .15s; border-radius: var(--rad-sm, 0); }
.adm-app .adm-btn-primary { color: var(--violet-ink); background: var(--violet-tint); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); font-weight: 600; }
.adm-app .adm-btn-primary:hover { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 22%, transparent); }
.adm-app .adm-btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
.adm-app .adm-btn-ghost:hover { color: var(--ink); border-color: var(--line-3); }
.adm-app .adm-btn-danger { background: transparent; border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent); color: var(--rose); }
.adm-app .adm-btn-danger:hover { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }
.adm-app .adm-msg { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.adm-app .adm-msg.ok { color: var(--mint); }
.adm-app .adm-msg.err { color: var(--rose); }
.adm-app .adm-check { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin: 0 14px 8px 0; cursor: pointer; }
.adm-app .adm-check input { accent-color: var(--violet); }
.adm-app .adm-sec-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); margin-bottom: 12px; }
.adm-app .adm-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-app .adm-token { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); background: var(--violet-tint); border: 1px solid var(--violet-tint-2); padding: 5px 9px; }
.adm-app .adm-token-rm { cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1; }
.adm-app .adm-token-rm:hover { color: var(--rose); }
.adm-app .adm-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-app .adm-suggest-opt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); padding: 5px 10px; cursor: pointer; transition: all .15s; }
.adm-app .adm-suggest-opt:hover { color: var(--violet-ink); border-color: var(--violet); background: var(--violet-tint); }
.adm-app .adm-endpoint-card { border: 1px solid var(--line); background: var(--bg-1); padding: 14px 16px; margin-bottom: 10px; transition: border-color .15s; }
.adm-app.adm-ent .adm-endpoint-card:hover { border-color: var(--ent-gold-line); }

/* ── AI policy card chooser (ai_mcp tab) ── */
.adm-app .adm-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
@media (max-width: 860px) { .adm-app .adm-ai-grid { grid-template-columns: 1fr; } }
.adm-app .adm-ai-opt { position: relative; text-align: left; border: 1px solid var(--line-2); background: var(--bg-1); padding: 16px; cursor: pointer; transition: all .15s; display: grid; gap: 4px; }
.adm-app .adm-ai-opt:hover { border-color: var(--violet); }
.adm-app .adm-ai-opt.selected { border-color: var(--violet); background: var(--violet-tint); box-shadow: 0 0 0 3px var(--violet-tint); }
.adm-app .adm-ai-ribbon { position: absolute; top: 10px; right: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--violet-ink); }
.adm-app .adm-ai-name { font-family: var(--font-display, 'Bricolage Grotesque', Inter, sans-serif); font-weight: 650; font-size: 14.5px; color: var(--ink); }
.adm-app .adm-ai-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--violet-ink); }
.adm-app .adm-ai-desc { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.adm-app .adm-ai-check { font-family: var(--font-mono); font-size: 10.5px; color: var(--violet-ink); opacity: 0; transition: opacity .15s; margin-top: 2px; }
.adm-app .adm-ai-opt.selected .adm-ai-check { opacity: 1; }
.adm-app .adm-ai-keyrow { display: flex; gap: 8px; align-items: center; }
.adm-app .adm-ai-keyrow .adm-input { flex: 1; min-width: 220px; }
.adm-app .adm-ai-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-4); }
.adm-app .adm-ai-dot[data-state="testing"] { background: var(--amber); animation: admAiPulse 1s infinite; }
.adm-app .adm-ai-dot[data-state="ok"] { background: var(--mint); }
.adm-app .adm-ai-dot[data-state="fail"] { background: var(--rose); }
@keyframes admAiPulse { 50% { opacity: .35; } }
.adm-app .adm-ai-disclaimer { border-left: 2px solid var(--violet-ink); background: var(--violet-tint); padding: 12px 14px; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); margin: 12px 0; }
.adm-app .adm-ai-disclaimer b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); display: block; margin-bottom: 5px; }
.adm-app .adm-ai-keystate { display: flex; gap: 9px; align-items: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin-bottom: 10px; }

/* nav: tenant logo beside "// enterprise" */
.nav-section-toggle .nav-ent-logo { width: 14px; height: 14px; object-fit: contain; flex: none; }

/* ── Threat "Updated" signal + Update History (harness Update Pipeline) ─────── */
.threat-row-meta-updated { color: var(--violet-bright, #9e74f6); font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .02em; }
.kr-updated-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--violet, #8b5cf6); color: var(--violet-bright, #9e74f6); background: color-mix(in oklab, var(--violet, #8b5cf6) 12%, transparent); font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .08em; border-radius: 0; }
.kr-updates { display: flex; flex-direction: column; gap: 14px; }
.kr-upd { border-left: 2px solid var(--violet, #8b5cf6); padding: 2px 0 2px 16px; }
.kr-upd-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kr-upd-date { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; color: var(--violet-bright, #9e74f6); }
.kr-upd-src { font-size: 12px; color: var(--text-muted, #837b96); }
.kr-upd-src a { color: var(--violet-bright, #9e74f6); text-decoration: none; }
.kr-upd-src a:hover { text-decoration: underline; }
.kr-upd-deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.kr-upd-delta, .kr-upd-change { font-family: var(--font-mono, monospace); font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--line-2, #2a2733); color: var(--text-2, #b6afc8); }
.kr-upd-change { color: var(--violet-bright, #9e74f6); border-color: var(--violet, #8b5cf6); }
.kr-upd-body { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--text-2, #b6afc8); }
.kr-upd-body .kr-upd-h { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #837b96); margin: 10px 0 4px; }
.kr-upd-body p { margin: 4px 0; }
.kr-upd-body ul { margin: 4px 0; padding-left: 18px; }
.kr-upd-body li { margin: 2px 0; }

/* ── Signal node icons (window.TLIcons) — inline entity glyphs ────────────────
   .tl-ent-ico inherits the surrounding text color via currentColor, so it tints
   to whatever severity/type color the label already uses. Sized to the local
   font (1em) with a small legibility floor; flex:none so it never shrinks in a
   row. Use .tl-ent-ico--lead for the common "glyph then label" prefix spacing. */
.tl-ent-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 13px;
  min-height: 13px;
  vertical-align: -0.15em;
  flex: none;
  overflow: visible;
  pointer-events: none;
}
.tl-ent-ico--lead { margin-right: 0.4em; }
.tl-ent-ico--trail { margin-left: 0.4em; }
/* graph legend: the glyph replaces the color swatch, tinted by the row color. */
.tl-legend-ico { display: inline-flex; align-items: center; justify-content: center; }
.tl-legend-ico .tl-ent-ico { width: 14px; height: 14px; min-width: 14px; min-height: 14px; vertical-align: middle; }