/* ==========================================================================
   SciRoute AI Design System & Style Core
   Warm laboratory notebook aesthetic.
   Light-first with dark mode support.
   ========================================================================== */

:root {
    /* Color Palette Ramps (Stone / Warm Paper / Warm Ink) */
    --stone-50: #FBFBF9;    /* warm paper background */
    --stone-100: #F5F3EF;   /* off-white surface */
    --stone-200: #E7E3DB;   /* subtle borders */
    --stone-300: #D2CBBF;   /* default borders */
    --stone-400: #B5A997;   /* muted text */
    --stone-500: #938672;   /* tertiary text / strong borders */
    --stone-600: #776C5B;   /* sub-text */
    --stone-700: #5E5448;   /* deep slate labels */
    --stone-800: #3E372E;   /* dark mode elements */
    --stone-900: #221E19;   /* warm near-black ink text */
    --stone-950: #16130D;   /* dark mode background warm ink */

    /* Clay (Terracotta brand accent) */
    --clay-50: #FDF4F0;
    --clay-100: #FCE8E2;
    --clay-200: #F7D1C7;
    --clay-300: #EFB09E;
    --clay-400: #E4856E;
    --clay-500: #C85A32;    /* brand accent */
    --clay-600: #B34822;
    --clay-700: #96371B;
    --clay-800: #7C2E17;
    --clay-900: #662614;

    /* Semantic indicators (Muted, earthy) */
    /* Spruce (Success) */
    --spruce-50: #F0F6F3;
    --spruce-100: #E1EDEC;
    --spruce-500: #3C6148;
    --spruce-600: #2E4B37;
    --spruce-900: #1C2D1F;

    /* Amber (Warning) */
    --amber-50: #FCFAF0;
    --amber-100: #F9F5DE;
    --amber-500: #B37622;
    --amber-600: #935E17;
    --amber-900: #4B2E0B;

    /* Brick (Danger/Hallucination) */
    --brick-50: #FDF1F0;
    --brick-100: #FBE2E0;
    --brick-500: #A83C32;
    --brick-600: #892F26;
    --brick-900: #4B1712;

    /* Azure (Info) */
    --azure-50: #F3F7FA;
    --azure-100: #E6EEF4;
    --azure-500: #2B5F8C;
    --azure-600: #204B70;
    --azure-900: #102747;

    /* Font Families */
    --font-serif: 'Newsreader', 'Georgia', serif;
    --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;

    /* Radii */
    --radius-md: 9px;
    --radius-lg: 13px;
    --radius-xl: 20px;

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadow (Warm-tinted, low, few) */
    --shadow-sm: 0 1px 2px rgba(30, 26, 18, 0.05), 0 1px 3px rgba(30, 26, 18, 0.03);
    --shadow-md: 0 4px 6px rgba(30, 26, 18, 0.04), 0 10px 15px rgba(30, 26, 18, 0.05);
    --shadow-lg: 0 10px 25px rgba(30, 26, 18, 0.06), 0 20px 48px rgba(30, 26, 18, 0.1);

    /* Base Light Theme Mappings (Default) */
    --bg: var(--stone-50);
    --surface: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --surface-off: var(--stone-100);
    --surface-inverse: var(--stone-900);
    --text-main: var(--stone-900);
    --text-sub: var(--stone-600);
    --text-muted: var(--stone-400);
    --border-subtle: var(--stone-200);
    --border-default: var(--stone-300);
    --border-strong: var(--stone-500);
    --accent: var(--clay-500);
    --accent-hover: var(--clay-600);
    --accent-light: var(--clay-100);
    --ring: 0 0 0 3px rgba(200, 90, 50, 0.25);

    /* Semantic Indicators (Light) */
    --color-success: var(--spruce-500);
    --color-success-bg: var(--spruce-50);
    --color-success-border: var(--spruce-100);
    --color-warning: var(--amber-500);
    --color-warning-bg: var(--amber-50);
    --color-warning-border: var(--amber-100);
    --color-danger: var(--brick-500);
    --color-danger-bg: var(--brick-50);
    --color-danger-border: var(--brick-100);
    --color-info: var(--azure-500);
    --color-info-bg: var(--azure-50);
    --color-info-border: var(--azure-100);

    /* Legacy compatibility HSL aliases mapped directly to clean theme tokens */
    --color-bg: var(--bg);
    --color-panel: var(--surface);
    --color-panel-border: var(--border-subtle);
    --color-panel-hover-border: var(--border-default);
    --color-text-main: var(--text-main);
    --color-text-sub: var(--text-sub);
    --color-text-muted: var(--text-muted);

    --color-cyan: var(--accent);
    --color-cyan-glow: var(--accent-light);
    --color-purple: var(--color-info);
    --color-purple-glow: var(--color-info-bg);
    --color-green: var(--color-success);
    --color-green-glow: var(--color-success-bg);
    --color-red: var(--color-danger);
    --color-red-glow: var(--color-danger-bg);
    --color-yellow: var(--color-warning);
    --color-yellow-glow: var(--color-warning-bg);
    --color-amber: var(--color-warning);
    --color-teal: #0d9488;
    --color-blue: #1d4ed8;
    --color-orange: #c2410c;
    --color-rose: #be123c;
    --color-pink: #be185d;
    --color-indigo: #4338ca;
}

/* Dark Theme overrides (Warm Ink base, same semantic aliases) */
[data-theme="dark"] {
    --bg: var(--stone-950);
    --surface: var(--stone-900);
    --glass-bg: rgba(34, 30, 25, 0.75);
    --surface-off: var(--stone-800);
    --surface-inverse: var(--stone-50);
    --text-main: var(--stone-50);
    --text-sub: var(--stone-300);
    --text-muted: var(--stone-500);
    --border-subtle: var(--stone-800);
    --border-default: var(--stone-700);
    --border-strong: var(--stone-600);
    --accent: var(--clay-400);
    --accent-hover: var(--clay-500);
    --accent-light: rgba(228, 133, 110, 0.15);
    --ring: 0 0 0 3px rgba(228, 133, 110, 0.3);

    /* Semantic Indicators (Dark) */
    --color-success: #70A080;
    --color-success-bg: rgba(112, 160, 128, 0.1);
    --color-success-border: rgba(112, 160, 128, 0.2);
    --color-warning: #D9A050;
    --color-warning-bg: rgba(217, 160, 80, 0.1);
    --color-warning-border: rgba(217, 160, 80, 0.2);
    --color-danger: #D96860;
    --color-danger-bg: rgba(217, 104, 96, 0.1);
    --color-danger-border: rgba(217, 104, 96, 0.2);
    --color-info: #5080A8;
    --color-info-bg: rgba(80, 128, 168, 0.1);
    --color-info-border: rgba(80, 128, 168, 0.2);
    --color-amber: var(--color-warning);
    --color-teal: #14b8a6;
    --color-blue: #3b82f6;
    --color-orange: #f97316;
    --color-rose: #f43f5e;
    --color-pink: #ec4899;
    --color-indigo: #6366f1;
}

/* ==========================================================================
   Base Structure & Layout
   ========================================================================== */

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

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: var(--font-sans);
    min-block-size: 100dvh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Three-voice display typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text-main);
}

/* Faint dot grid texture representing a warm laboratory notebook */
.mesh-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--bg);
}

.mesh-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--border-default) 1.5px, transparent 0);
    background-size: 32px 32px;
    opacity: 0.12;
    pointer-events: none;
}

.app-container {
    max-inline-size: 1440px; /* Aligns with app shell max size guideline */
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ==========================================================================
   Header Architecture
   ========================================================================== */

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 50%;
}

.app-header h1 {
    font-size: 1.6rem;
    font-family: var(--font-sans); /* Wordmark in Hanken Grotesk 700 */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-main);
}

.accent-text {
    color: var(--accent);
}

.subtitle {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-sub);
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-default);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-sub);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.disconnected {
    background-color: var(--color-danger);
}

.status-dot.connected {
    background-color: var(--color-success);
}

.status-dot.processing {
    background-color: var(--color-warning);
}

/* ==========================================================================
   Premium Glass Components
   ========================================================================== */

.glass-panel {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-base) var(--ease-out), 
                background-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.glass-panel:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ==========================================================================
   Top Telemetry Bar
   ========================================================================== */

.telemetry-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.25rem 1.5rem;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.glow-cyan { color: var(--color-cyan); background: var(--color-cyan-glow); }
.glow-purple { color: var(--color-purple); background: var(--color-purple-glow); }
.glow-green { color: var(--color-green); background: var(--color-green-glow); }
.glow-blue { color: hsl(210, 85%, 55%); background: hsla(210, 85%, 55%, 0.12); }

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-sub);
}

.metric-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.15rem 0;
}

.mini-unit {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-sub);
}

.metric-subtext {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Grid Workspace
   ========================================================================== */

.workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 1.5rem;
}

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

.workspace-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

.panel-header h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.panel-header p {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin-top: 0.15rem;
}

.instructions-block {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-sub);
}

/* Button & Controls System */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out), 
                background-color var(--duration-fast) var(--ease-out), 
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn i {
    width: 16px;
    height: 16px;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--accent);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

.btn-glow-green {
    background: var(--color-success);
    color: #FFFFFF;
}

.btn-glow-green:hover {
    background: var(--spruce-600);
    box-shadow: var(--shadow-md);
}

.btn-glow-red {
    background: var(--color-danger);
    color: #FFFFFF;
}

.btn-glow-red:hover {
    background: var(--brick-600);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--surface-off);
    border: 1px solid var(--border-default);
    color: var(--text-main);
}

.btn-secondary:hover {
    background: var(--border-subtle);
    border-color: var(--border-strong);
}

/* ==========================================================================
   Terminal Layout (Developer Output Logs)
   ========================================================================== */

.terminal-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--color-panel-border);
    overflow: hidden;
    background-color: hsl(224, 28%, 3%);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: hsla(224, 20%, 15%, 0.3);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-panel-border);
}

.terminal-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-sub);
}

.terminal-actions {
    display: flex;
    gap: 0.5rem;
}

.badge {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background-color: hsla(210, 20%, 92%, 0.05);
    color: var(--color-text-sub);
    border: 1px solid var(--color-panel-border);
}

.badge.slm {
    color: var(--color-cyan);
    background-color: var(--color-cyan-glow);
    border-color: hsla(180, 85%, 45%, 0.3);
}

.badge.lrm {
    color: var(--color-purple);
    background-color: var(--color-purple-glow);
    border-color: hsla(272, 75%, 55%, 0.3);
}

/* Scrollable terminal context */
.terminal-content {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 1rem;
    max-block-size: 320px;
    min-block-size: 240px;
    overflow-y: auto;
    color: var(--color-text-main);
    scrollbar-gutter: stable;
}

.small-terminal {
    max-block-size: 190px;
    min-block-size: 190px;
    font-size: 0.75rem;
}

.terminal-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    min-block-size: 200px;
    gap: 0.75rem;
}

.pulse-icon {
    width: 48px;
    height: 48px;
    fill: currentColor;
    opacity: 0.3;
    animation: slow-pulse 2s ease-in-out infinite;
}

.terminal-line {
    margin-bottom: 0.4rem;
    word-break: break-all;
    white-space: pre-wrap;
    animation: scanline 0.2s ease-out;
}

/* Output colors on prefixes */
.terminal-line.unoptimized-line { color: hsl(35, 75%, 60%); }
.terminal-line.optimized-line { color: var(--color-cyan); }
.terminal-line.verification-log-line { color: var(--color-text-sub); }
.terminal-line.muted { color: var(--color-text-muted); }
.terminal-line.success { color: var(--color-green); }
.terminal-line.warning { color: var(--color-red); }

/* ==========================================================================
   Telemetry Split Scrolling Container
   ========================================================================== */

.comparative-logs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.log-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.log-col-title {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 0.25rem;
}

.unoptimized-header { color: var(--color-purple); }
.optimized-header { color: var(--color-cyan); }

/* ==========================================================================
   Verification Console (Background evaluation display)
   ========================================================================== */

.verification-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background-color: hsla(224, 28%, 3%, 0.4);
}

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

.verification-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-sub);
}

.verification-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.verification-badge.idle { background-color: var(--color-text-muted); color: var(--color-bg); }
.verification-badge.scanning { background-color: hsl(200, 75%, 45%); color: #fff; animation: pulse 1s infinite; }
.verification-badge.passed { background-color: var(--color-green); color: #fff; }
.verification-badge.failed { background-color: var(--color-red); color: #fff; }

.verification-progress-container {
    width: 100%;
    height: 3px;
    background-color: var(--color-panel-border);
    border-radius: 2px;
    overflow: hidden;
}

.verification-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--color-cyan);
    transition: width 0.3s ease;
}

.verification-results-container {
    background-color: hsl(224, 28%, 2%);
    border-radius: 6px;
    border: 1px solid var(--color-panel-border);
    padding: 0.85rem;
    min-block-size: 100px;
    max-block-size: 130px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ==========================================================================
   Utilities & Custom Animations
   ========================================================================== */

/* Custom styled thin scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-panel-border);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-cyan);
}

.muted-text { color: var(--color-text-muted); }
.text-center { text-align: center; }

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(14, 203, 114, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(14, 203, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 203, 114, 0); }
}

@keyframes slow-pulse {
    0% { opacity: 0.2; transform: scale(0.98); }
    50% { opacity: 0.4; transform: scale(1.02); }
    100% { opacity: 0.2; transform: scale(0.98); }
}

@keyframes scanline {
    0% { transform: translateY(2px); opacity: 0.8; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   Tab Navigation & Multi-Hub Panels
   ========================================================================== */

.hub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-block-end: 0.5rem;
    align-items: center;
}

.hub-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-sub);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.hub-tab svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.hub-tab:hover {
    color: var(--color-text-main);
    background-color: hsla(210, 20%, 92%, 0.04);
    border-color: var(--color-panel-border);
}

.hub-tab:hover svg {
    transform: translateY(-1px);
}

.hub-tab.active {
    color: var(--color-cyan);
    background-color: var(--color-cyan-glow);
    border-color: hsla(180, 85%, 45%, 0.2);
    box-shadow: 0 0 15px hsla(180, 85%, 45%, 0.05);
}

/* Section toggling */
.hub-section {
    display: none;
}

.hub-section.active {
    display: block;
}

/* ==========================================================================
   Prompt Optimization Hub Elements
   ========================================================================== */

.few-shot-card {
    background-color: hsl(224, 28%, 2%);
    border: 1px solid var(--color-panel-border);
    border-radius: 6px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: all 0.2s ease;
}

.few-shot-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px hsla(272, 75%, 55%, 0.05);
}

.few-shot-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
}

.few-shot-content {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-main);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

/* ==========================================================================
   Stateful Memory Chip Badges
   ========================================================================== */

.chip-empty {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.chip-gene {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background-color: var(--color-cyan-glow);
    color: var(--color-cyan);
    border: 1px solid hsla(180, 85%, 45%, 0.25);
    box-shadow: 0 0 8px hsla(180, 85%, 45%, 0.08);
    transition: all 0.2s ease;
}

.chip-gene:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 0 12px hsla(180, 85%, 45%, 0.2);
}

.chip-variant {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background-color: var(--color-purple-glow);
    color: var(--color-purple);
    border: 1px solid hsla(272, 75%, 55%, 0.25);
    box-shadow: 0 0 8px hsla(272, 75%, 55%, 0.08);
    transition: all 0.2s ease;
}

.chip-variant:hover {
    border-color: var(--color-purple);
    box-shadow: 0 0 12px hsla(272, 75%, 55%, 0.2);
}

.chip-compound {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background-color: hsla(35, 75%, 60%, 0.12);
    color: hsl(35, 75%, 65%);
    border: 1px solid hsla(35, 75%, 60%, 0.25);
    box-shadow: 0 0 8px hsla(35, 75%, 60%, 0.08);
    transition: all 0.2s ease;
}

.chip-compound:hover {
    border-color: hsl(35, 75%, 60%);
    box-shadow: 0 0 12px hsla(35, 75%, 60%, 0.2);
}

.chip-trial {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background-color: var(--color-green-glow);
    color: var(--color-green);
    border: 1px solid hsla(145, 80%, 42%, 0.25);
    box-shadow: 0 0 8px hsla(145, 80%, 42%, 0.08);
    transition: all 0.2s ease;
}

.chip-trial:hover {
    border-color: var(--color-green);
    box-shadow: 0 0 12px hsla(145, 80%, 42%, 0.2);
}

/* ==========================================================================
   Form Controls and Special Inputs
   ========================================================================== */

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: hsl(224, 25%, 8%);
    border: 1px solid var(--color-panel-border);
    border-radius: 4px;
    padding: 0.4rem 1.8rem 0.4rem 0.6rem;
    color: var(--color-text-main);
    font-family: var(--font-sans);
    cursor: pointer;
    outline: none;
    font-size: 0.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.1rem;
    transition: border-color 0.2s ease;
}

.custom-select:hover {
    border-color: var(--color-cyan);
}

/* Resource Cards */
.resource-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-card:hover {
    background-color: hsla(210, 20%, 92%, 0.03) !important;
    border-color: var(--color-cyan) !important;
    transform: translateY(-2px);
}

.resource-card.active {
    background-color: hsla(180, 85%, 45%, 0.05) !important;
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 15px hsla(180, 85%, 45%, 0.12);
}

/* Telemetry Color Flashes */
.color-flash {
    animation: flash-border 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes flash-border {
    0% { border-color: var(--color-cyan); box-shadow: 0 0 15px var(--color-cyan-glow); }
    100% { border-color: var(--color-panel-border); box-shadow: none; }
}

/* Live Evaluation Status Badges */
.status-normal { color: var(--color-text-sub); }
.status-excellent { color: var(--color-green); text-shadow: 0 0 10px hsla(145, 80%, 42%, 0.2); }
.status-warning { color: hsl(35, 75%, 60%); text-shadow: 0 0 10px hsla(35, 75%, 60%, 0.2); }
.status-failure { color: var(--color-red); text-shadow: 0 0 10px hsla(352, 75%, 48%, 0.2); }

/* Premium Glow Triggers */
.btn-glow-purple {
    background: var(--color-info);
    color: #FFFFFF;
}

.btn-glow-purple:hover {
    background: var(--azure-600);
    box-shadow: var(--shadow-md);
}

.btn-glow-yellow {
    background: var(--color-warning);
    color: #FFFFFF;
}

.btn-glow-yellow:hover {
    background: var(--amber-600);
    box-shadow: var(--shadow-md);
}

/* Policy Subtab Controls */
.policy-subtab {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.policy-subtab:hover {
    color: var(--color-text-main) !important;
    background-color: hsla(210, 20%, 92%, 0.04) !important;
}

.policy-subtab.active {
    color: var(--color-green) !important;
    background-color: hsla(145, 80%, 42%, 0.12) !important;
    border: 1px solid hsla(145, 80%, 42%, 0.2) !important;
    box-shadow: 0 0 10px hsla(145, 80%, 42%, 0.05);
}

/* Database Index Viewer Items */
.db-index-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-radius: 4px;
    background-color: hsla(224, 20%, 15%, 0.15);
    border: 1px solid var(--color-panel-border);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-index-item:hover {
    background-color: hsla(210, 20%, 92%, 0.03);
    border-color: var(--color-cyan);
    transform: translateX(2px);
}

.db-index-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background-color: hsla(180, 85%, 45%, 0.08);
    color: var(--color-cyan);
}

/* ==========================================================================
   Multi-Agent Consensus Network Visuals
   ========================================================================== */

.consensus-network-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-panel-border);
}

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

.network-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 0.75px;
}

.consensus-overall {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.consensus-overall .label {
    font-size: 0.75rem;
    color: var(--color-text-sub);
}

.consensus-overall .score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-cyan);
    background-color: var(--color-cyan-glow);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid hsla(180, 85%, 45%, 0.2);
}

.consensus-agents-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.agent-trace-card {
    background-color: hsla(224, 28%, 3%, 0.35);
    border: 1px solid var(--color-panel-border);
    border-radius: 6px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-trace-card:hover {
    border-color: var(--color-panel-hover-border);
    transform: translateY(-2px);
    background-color: hsla(224, 28%, 5%, 0.55);
}

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

.agent-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.agent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}

.agent-dot.indicator-idle {
    background-color: var(--color-text-muted);
    box-shadow: none;
}

.agent-dot.indicator-active {
    background-color: var(--color-yellow);
    box-shadow: 0 0 6px var(--color-yellow);
    animation: pulse 1.5s infinite;
}

.agent-dot.indicator-passed {
    background-color: var(--color-green);
    box-shadow: 0 0 6px var(--color-green);
}

.agent-dot.indicator-failed {
    background-color: var(--color-red);
    box-shadow: 0 0 6px var(--color-red);
    animation: pulse 1s infinite;
}

.agent-role {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: 0.25px;
}

.agent-confidence {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background-color: hsla(224, 20%, 15%, 0.4);
    color: var(--color-text-sub);
    border: 1px solid var(--color-panel-border);
}

.agent-card-body {
    background-color: hsl(224, 28%, 1.5%);
    border: 1px solid var(--color-panel-border);
    border-radius: 4px;
    padding: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.4;
    min-height: 70px;
    max-height: 100px;
    overflow-y: auto;
    color: var(--color-text-sub);
    scrollbar-gutter: stable;
}

.agent-placeholder {
    color: var(--color-text-muted);
    font-style: italic;
    display: block;
    text-align: center;
    margin-top: 0.8rem;
}

.agent-log-entry {
    margin-bottom: 0.3rem;
    word-break: break-word;
    border-left: 2.5px solid transparent;
    padding-left: 0.3rem;
}

.agent-log-entry:last-child {
    margin-bottom: 0;
}

.agent-log-entry.warning {
    color: var(--color-yellow);
    border-left-color: var(--color-yellow);
}

.agent-log-entry.critical {
    color: var(--color-red);
    font-weight: 600;
    border-left-color: var(--color-red);
}

.agent-log-entry.verified {
    color: var(--color-green);
    border-left-color: var(--color-green);
}

@media (max-width: 1400px) {
    .consensus-agents-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Step-by-Step Multi-Knob Sliders & Custom Styling
   ========================================================================== */

/* Modernized Chrome/Safari Range Sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: hsl(224, 25%, 10%);
    border: 1px solid var(--color-panel-border);
    height: 6px;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="range"]:focus {
    border-color: var(--color-cyan);
}

/* Chrome/Safari slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-cyan);
    box-shadow: 0 0 8px var(--color-cyan);
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease, box-shadow 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Varying range thumbs based on slider IDs */
#slider-pricing::-webkit-slider-thumb {
    background: var(--color-cyan);
    box-shadow: 0 0 6px var(--color-cyan);
}
#slider-latency::-webkit-slider-thumb {
    background: var(--color-purple);
    box-shadow: 0 0 6px var(--color-purple);
}
#slider-throughput::-webkit-slider-thumb {
    background: var(--color-green);
    box-shadow: 0 0 6px var(--color-green);
}
#slider-accuracy::-webkit-slider-thumb {
    background: var(--color-yellow);
    box-shadow: 0 0 6px var(--color-yellow);
}

/* Firefox slider thumb */
input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--color-cyan);
    cursor: pointer;
    transition: transform 0.1s ease;
}
input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}

/* ==========================================================================
   Collapsible XML Thought Traces Accordion
   ========================================================================== */

.accordion-thought {
    margin: 0.85rem 0;
    border: 1px solid hsla(272, 75%, 55%, 0.2);
    border-radius: 6px;
    overflow: hidden;
    background-color: hsla(272, 75%, 55%, 0.03);
    transition: border-color 0.2s ease;
}

.accordion-thought:hover {
    border-color: hsla(272, 75%, 55%, 0.4);
}

.accordion-header {
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-purple);
    background-color: hsla(272, 75%, 55%, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.accordion-header:hover {
    background-color: hsla(272, 75%, 55%, 0.1);
}

.accordion-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    fill: currentColor;
}

.accordion-thought.active .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-thought.active .accordion-content {
    max-height: 250px;
    overflow-y: auto;
}

.accordion-inner-text {
    padding: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-sub);
    white-space: pre-wrap;
    border-top: 1px solid hsla(272, 75%, 55%, 0.1);
}

/* ==========================================================================
   Word Diff Text-Highlighter Panels
   ========================================================================== */

#prompt-diff-box {
    line-height: 1.5;
}

.diff-added {
    background-color: hsla(145, 80%, 42%, 0.15);
    border-bottom: 1.5px dashed var(--color-green);
    padding: 1px 2px;
    border-radius: 2px;
    color: hsl(145, 80%, 65%);
}

.diff-removed {
    background-color: hsla(0, 85%, 60%, 0.15);
    text-decoration: line-through;
    border-bottom: 1.5px dashed var(--color-red);
    padding: 1px 2px;
    border-radius: 2px;
    color: hsl(0, 85%, 70%);
    opacity: 0.8;
}

/* ==========================================================================
   Batch Operational Cards
   ========================================================================== */

.batch-item-card {
    background-color: hsla(224, 28%, 3%, 0.4);
    border: 1px solid var(--color-panel-border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: all 0.25s ease;
    animation: slideInUp 0.3s ease;
}

.batch-item-card:hover {
    border-color: hsla(200, 75%, 45%, 0.3);
    background-color: hsla(224, 28%, 5%, 0.6);
    transform: translateY(-2px);
}

.batch-item-card.low-complexity {
    border-left: 3px solid var(--color-green);
}

.batch-item-card.high-complexity {
    border-left: 3px solid var(--color-purple);
}

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

.batch-item-title {
    font-size: 0.82rem;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-text-main);
}

.batch-item-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.batch-pill {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-sans);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.batch-pill.pill-slm {
    background-color: hsla(145, 80%, 42%, 0.15);
    color: var(--color-green);
    border: 1px solid hsla(145, 80%, 42%, 0.3);
}

.batch-pill.pill-lrm {
    background-color: hsla(272, 75%, 55%, 0.15);
    color: var(--color-purple);
    border: 1px solid hsla(272, 75%, 55%, 0.3);
}

.batch-pill.pill-score {
    font-family: var(--font-mono);
}

.batch-pill.pill-score.good {
    background-color: hsla(145, 80%, 42%, 0.15);
    color: var(--color-green);
}

.batch-pill.pill-score.alert {
    background-color: hsla(0, 85%, 60%, 0.15);
    color: var(--color-red);
}

.batch-item-body {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    line-height: 1.4;
    word-break: break-word;
}

.batch-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid hsl(224, 25%, 10%);
    padding-top: 0.5rem;
    margin-top: 0.2rem;
}

.batch-item-savings {
    font-size: 0.72rem;
    color: var(--color-green);
    font-family: var(--font-mono);
    font-weight: 600;
}

.batch-item-costs {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   Phase 7: Series B Enterprise-Grade Console Stylings
   ========================================================================== */

/* Toggle Switches */
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-cyan) !important;
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 10px var(--color-cyan-glow);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(14px);
    background-color: hsl(224, 25%, 5%) !important;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-text-sub);
    border-radius: 50%;
    transition: .3s;
}

/* HIPAA Badges and Tokens */
.hipaa-token-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-panel-border);
    gap: 0.5rem;
}

.hipaa-token-row:last-child {
    border-bottom: none;
}

.hipaa-badge-redacted {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: hsl(45, 100%, 70%);
    background-color: hsla(45, 90%, 50%, 0.12);
    border: 1px solid hsla(45, 90%, 50%, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    letter-spacing: -0.2px;
    animation: slow-pulse 3s infinite;
}

.hipaa-badge-hydrated {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: hsl(145, 100%, 75%);
    background-color: hsla(145, 80%, 42%, 0.12);
    border: 1px solid hsla(145, 80%, 42%, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* HITL Quarantine Cards */
.quarantine-card {
    background-color: hsla(352, 75%, 48%, 0.015);
    border: 1px solid hsla(352, 15%, 35%, 0.12);
    border-left: 3px solid var(--color-red);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: slideInUp 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.quarantine-card:hover {
    border-color: hsla(352, 75%, 48%, 0.3);
    background-color: hsla(352, 75%, 48%, 0.03);
    box-shadow: 0 4px 20px hsla(352, 75%, 48%, 0.04);
}

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

.quarantine-id {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.quarantine-sfs {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.quarantine-sfs.danger {
    color: hsl(352, 100%, 75%);
    background-color: hsla(352, 75%, 48%, 0.15);
    border: 1px solid hsla(352, 75%, 48%, 0.3);
}

.quarantine-sfs.warning {
    color: hsl(45, 100%, 75%);
    background-color: hsla(45, 90%, 50%, 0.15);
    border: 1px solid hsla(45, 90%, 50%, 0.3);
}

.quarantine-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.quarantine-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.quarantine-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.quarantine-field-value {
    font-size: 0.78rem;
    color: var(--color-text-sub);
    line-height: 1.4;
    white-space: pre-wrap;
    background-color: hsl(224, 28%, 2%);
    border: 1px solid var(--color-panel-border);
    border-radius: 6px;
    padding: 0.5rem;
}

.quarantine-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.quarantine-reason-badge {
    font-size: 0.68rem;
    font-weight: 600;
    color: hsl(352, 90%, 80%);
    background-color: hsla(352, 75%, 48%, 0.08);
    border: 1px solid hsla(352, 75%, 48%, 0.2);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.override-textarea {
    width: 100%;
    min-height: 80px;
    background-color: hsl(224, 25%, 3%);
    border: 1px solid hsla(180, 85%, 45%, 0.15);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-main);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.4;
    resize: vertical;
}

.override-textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 10px var(--color-cyan-glow);
}

.badge-quarantine {
    animation: blink-red 2s infinite;
}

@keyframes blink-red {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px hsla(352, 75%, 48%, 0.6);
    }
    50% {
        opacity: 0.4;
        box-shadow: 0 0 1px transparent;
    }
}

/* MCTS Live Visualization Styles */
.mcts-pulse-cyan {
    animation: pulse-cyan-glow 2s infinite ease-in-out;
}

.mcts-pulse-red {
    animation: pulse-red-glow 2s infinite ease-in-out;
}

@keyframes pulse-cyan-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px var(--color-cyan)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 8px var(--color-cyan)) brightness(1.2);
    }
}

@keyframes pulse-red-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px var(--color-red)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 8px var(--color-red)) brightness(1.2);
    }
}

.mcts-node-element {
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.mcts-node-element:hover {
    transform: scale(1.25);
}

.mcts-link-element {
    transition: stroke-width 0.2s ease, filter 0.2s ease;
}


/* Precision Control Buttons */
.precision-btn {
    background-color: hsl(224, 25%, 3%);
    border: 1px solid var(--color-panel-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.precision-btn:hover {
    border-color: var(--color-cyan);
    color: white;
}

.precision-btn.active {
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
    color: black;
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.4);
}


/* ==========================================================================
   Enterprise LLMRouter Console Styling & Tables
   ========================================================================== */

.db-explorer-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 0.6rem;
    border-bottom: 2px solid var(--color-panel-border);
}

.db-explorer-table td {
    padding: 0.75rem 0.6rem;
    transition: background-color 0.2s ease;
}

.db-explorer-table tbody tr {
    transition: all 0.2s ease;
}

.db-explorer-table tbody tr:hover {
    background-color: hsla(224, 25%, 15%, 0.15);
}

/* Glassmorphism styling for playground inputs */
#router-playground-input:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 10px var(--color-cyan-glow);
}

/* Animations for sliders & score ticks */
input[type="range"] {
    background: hsl(224, 15%, 12%);
    border-radius: 4px;
    height: 6px;
    outline: none;
    transition: background 0.3s ease;
}

input[type="range"]:hover {
    background: hsl(224, 15%, 16%);
}

/* Persona and custom buttons active state */
.btn.active-mode {
    background: var(--color-cyan) !important;
    color: hsl(224, 25%, 5%) !important;
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 12px var(--color-cyan-glow) !important;
}

/* Redaction highlight animations */
.redact-tag {
    color: var(--color-red);
    background-color: var(--color-red-glow);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-weight: bold;
    border: 1px solid var(--color-red);
    font-size: 0.72rem;
    text-shadow: 0 0 2px var(--color-red);
}

/* General high-vibe updates */
.text-danger-glow {
    color: var(--color-red) !important;
    text-shadow: 0 0 4px var(--color-red-glow);
}

.text-warning-glow {
    color: var(--color-yellow) !important;
    text-shadow: 0 0 4px var(--color-yellow-glow);
}

.text-success-glow {
    color: var(--color-green) !important;
    text-shadow: 0 0 4px var(--color-green-glow);
}

.font-bold {
    font-weight: bold;
}


/* ==========================================================================
   Clinical & Usability UX Elevators (Phase 13 additions)
   ========================================================================== */

/* Toast Notification System */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}

.toast {
    background: var(--surface);
    border-left: 4px solid var(--accent);
    border-right: 1px solid var(--border-subtle);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    pointer-events: auto;
    animation: toast-slide-in 0.35s var(--ease-out);
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}

.toast.toast-success {
    border-left-color: var(--color-success);
}

.toast.toast-warning {
    border-left-color: var(--color-warning);
}

.toast.toast-error {
    border-left-color: var(--color-danger);
}

@keyframes toast-slide-in {
    from { transform: translateX(120%) scale(0.9); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

/* Clinical Session Timeline */
.clinical-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 1rem;
    border-left: 1.5px solid var(--color-panel-border);
}

.clinical-timeline-item {
    position: relative;
    margin-bottom: 1.2rem;
    font-size: 0.78rem;
}

.clinical-timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -25px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-panel-border);
    border: 2px solid hsl(224, 25%, 5%);
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

.timeline-dot.dot-mutation {
    background-color: var(--color-red);
    box-shadow: 0 0 8px var(--color-red-glow);
}

.timeline-dot.dot-gene {
    background-color: var(--color-cyan);
    box-shadow: 0 0 8px var(--color-cyan-glow);
}

.timeline-dot.dot-compound {
    background-color: var(--color-yellow);
    box-shadow: 0 0 8px var(--color-yellow-glow);
}

.timeline-dot.dot-trial {
    background-color: var(--color-purple);
    box-shadow: 0 0 8px hsla(280, 80%, 50%, 0.4);
}

.timeline-content {
    background: hsla(224, 25%, 8%, 0.4);
    border: 1px solid var(--color-panel-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s ease;
}

.timeline-content:hover {
    border-color: var(--color-cyan);
}

/* Official GxP Document Styling */
.gxp-document {
    background-color: hsl(224, 25%, 2%);
    border: 1.5px solid var(--color-panel-border);
    border-radius: 8px;
    padding: 2rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

.gxp-header {
    border-bottom: 2px double var(--color-panel-border);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gxp-logo-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gxp-badge-stamp {
    border: 1.5px solid var(--color-green);
    color: var(--color-green);
    background-color: var(--color-green-glow);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-weight: 800;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.1rem;
    box-shadow: 0 0 10px var(--color-green-glow);
}

.gxp-badge-stamp.stamp-held {
    border-color: var(--color-yellow);
    color: var(--color-yellow);
    background-color: var(--color-yellow-glow);
    box-shadow: 0 0 10px var(--color-yellow-glow);
}

.gxp-section-title {
    font-family: var(--font-sans);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05rem;
    border-bottom: 1px solid var(--color-panel-border);
    padding-bottom: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.gxp-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    background-color: hsla(224, 25%, 8%, 0.3);
    padding: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--color-panel-border);
    font-size: 0.72rem;
}

.gxp-narrative-text {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-sub);
    white-space: pre-wrap;
    background: hsla(224, 25%, 1%, 0.6);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid hsla(224, 25%, 15%, 0.4);
    line-height: 1.6;
}

.gxp-signature-block {
    margin-top: 2rem;
    border-top: 1px dashed var(--color-panel-border);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
}

.gxp-sig-line {
    border-top: 1px solid var(--color-text-muted);
    width: 150px;
    margin-top: 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* Modal Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-card {
    background-color: hsl(224, 25%, 5%);
    border: 1.5px solid var(--color-panel-border);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px var(--color-cyan-glow);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

/* Tooltips */
.tooltip-trigger {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: hsl(224, 30%, 4%);
    color: var(--color-text-main);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    border: 1.5px solid var(--color-panel-border);
    font-size: 0.68rem;
    white-space: normal;
    width: 200px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 10px var(--color-cyan-glow);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
    line-height: 1.35;
    text-align: center;
}

.tooltip-trigger:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Filter Pills */
.filter-pills {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-pill {
    background-color: hsl(224, 25%, 8%);
    border: 1px solid var(--color-panel-border);
    color: var(--color-text-sub);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}

.filter-pill:hover {
    border-color: var(--color-cyan);
    color: white;
}

.filter-pill.active {
    background-color: var(--color-cyan-glow);
    border-color: var(--color-cyan);
    color: white;
    box-shadow: 0 0 8px var(--color-cyan-glow);
}

/* Ranking Medals */
.med-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 800;
    margin-right: 0.3rem;
    border: 1px solid transparent;
}

.med-medal-gold {
    background-color: hsla(45, 100%, 50%, 0.15);
    color: hsl(45, 100%, 65%);
    border-color: hsl(45, 100%, 50%);
    box-shadow: 0 0 6px hsla(45, 100%, 50%, 0.3);
}

.med-medal-silver {
    background-color: hsla(200, 10%, 70%, 0.15);
    color: hsl(200, 10%, 85%);
    border-color: hsl(200, 10%, 70%);
    box-shadow: 0 0 6px hsla(200, 10%, 70%, 0.3);
}

.med-medal-bronze {
    background-color: hsla(25, 70%, 45%, 0.15);
    color: hsl(25, 70%, 60%);
    border-color: hsl(25, 70%, 45%);
    box-shadow: 0 0 6px hsla(25, 70%, 45%, 0.3);
}

/* ==========================================================================
   Phase 14: B2B Enterprise & Async Queue Overhauls
   ========================================================================== */

.persona-switcher {
    border-radius: 8px;
    transition: all var(--duration-base) var(--ease-out);
}

.persona-switcher .btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-sub) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.persona-switcher .btn:hover {
    color: var(--text-main) !important;
}

.persona-switcher .btn.active {
    background-color: var(--surface) !important;
    color: var(--accent) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Hoverable Glossary Dotted Tooltips */
.glossary-term {
    border-bottom: 1px dotted var(--border-strong);
    cursor: help;
    position: relative;
    display: inline-block;
}

.glossary-term:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.glossary-tooltip {
    visibility: hidden;
    width: 260px;
    background-color: var(--stone-900);
    color: var(--stone-50);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -130px;
    opacity: 0;
    transition: opacity 0.3s;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--stone-700);
}

.glossary-term:hover .glossary-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Active Batch Queue Cards */
.batch-queue-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.batch-queue-card:hover {
    border-color: var(--border-default);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

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

.batch-queue-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
}

.batch-queue-status {
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.batch-queue-status.running {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.batch-queue-status.completed {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.batch-queue-status.quarantined {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

.batch-queue-status.queued {
    background-color: var(--surface-off);
    color: var(--text-muted);
}


/* ==========================================================================
   Phase 15: Veritas clinical foundation suite
   ========================================================================== */

/* HA Load Balancer Node states */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px currentColor;
    animation: pulse 1.6s infinite ease-in-out;
}

#node-primary-cloud.offline,
#node-secondary-cloud.offline {
    border-color: var(--color-red) !important;
    opacity: 0.65;
}

#node-primary-cloud.offline .pulse-dot,
#node-secondary-cloud.offline .pulse-dot {
    background-color: var(--color-red) !important;
    box-shadow: 0 0 6px var(--color-red);
}

#node-secondary-cloud.degraded {
    border-color: var(--color-yellow) !important;
}

#node-secondary-cloud.degraded .pulse-dot {
    background-color: var(--color-yellow) !important;
    box-shadow: 0 0 6px var(--color-yellow);
}

/* Taxonomy Chip styles */
.taxonomy-card {
    background-color: hsla(224, 25%, 3%, 0.4);
    border: 1px solid var(--color-panel-border);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    animation: slideInUp 0.3s ease-out;
}

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

.taxonomy-term {
    font-size: 0.82rem;
    font-weight: 700;
    color: white;
}

.taxonomy-domain {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--color-cyan);
    font-weight: bold;
    letter-spacing: 0.05rem;
}

.taxonomy-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.code-chip {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: hsla(224, 25%, 8%, 0.6);
    border: 1px solid var(--color-panel-border);
    color: var(--color-text-sub);
}

.calibration-gauge-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1.5px dashed var(--color-panel-border);
    padding-top: 0.4rem;
    margin-top: 0.2rem;
}

.calibration-status {
    font-size: 0.68rem;
    font-weight: 700;
}

.calibration-status.optimal {
    color: var(--color-green);
}

.calibration-status.low {
    color: var(--color-yellow);
}

.calibration-value {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: bold;
    color: white;
}

/* GxP Ledger Styles */
.ledger-entry-card {
    border-left: 2.5px solid var(--color-cyan);
    background-color: hsla(224, 25%, 2%, 0.65);
    border-top: 1px solid var(--color-panel-border);
    border-right: 1px solid var(--color-panel-border);
    border-bottom: 1px solid var(--color-panel-border);
    border-radius: 4px;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}

.ledger-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--color-panel-border);
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
}

.ledger-index-badge {
    font-weight: bold;
    color: var(--color-cyan);
}

.ledger-timestamp {
    color: var(--color-text-muted);
    font-size: 0.68rem;
}

.ledger-action {
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.ledger-payload {
    color: var(--color-text-sub);
    font-size: 0.68rem;
    word-break: break-all;
    line-height: 1.3;
}

.ledger-hashes {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-top: 1px dotted var(--color-panel-border);
    padding-top: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.64rem;
    color: var(--color-text-muted);
}

.ledger-hash-link {
    word-break: break-all;
}

.ledger-signature {
    color: var(--color-green);
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
    font-size: 0.64rem;
    margin-top: 0.1rem;
}


/* ==========================================================================
   Tab 11: Clinical operations command center styling.
   ========================================================================== */

.entity-chip {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: hsla(180, 85%, 45%, 0.08);
    border: 1.5px solid hsla(180, 85%, 45%, 0.15);
    color: var(--color-cyan);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.warning-board-critical {
    padding: 0.8rem;
    background: hsla(0, 100%, 15%, 0.15);
    border: 1.5px solid var(--color-red);
    box-shadow: 0 0 10px hsla(0, 100%, 50%, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.78rem;
    line-height: 1.4;
}

.warning-board-warning {
    padding: 0.8rem;
    background: hsla(40, 100%, 15%, 0.15);
    border: 1.5px solid var(--color-orange);
    box-shadow: 0 0 10px hsla(40, 100%, 50%, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.78rem;
    line-height: 1.4;
}

.warning-board-aligned {
    padding: 0.8rem;
    background: hsla(140, 100%, 10%, 0.1);
    border: 1.5px solid var(--color-green);
    border-radius: 8px;
    color: white;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* ==========================================================================
   Phase 17: High-Fidelity Print & Live Telemetry Styles
   ========================================================================== */

/* 1. Live Pulse-Dot animations under healthy live tracking (glowing green) vs clinical alert (flashing red) */
#oscilloscope-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#oscilloscope-status .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color var(--duration-base) var(--ease-out);
}

/* Glowing green for healthy live tracking */
#oscilloscope-status .pulse-dot[style*="background-color: var(--color-green)"],
#oscilloscope-status .pulse-dot[style*="background-color:var(--color-green)"],
#oscilloscope-status .pulse-dot[style*="background-color: rgb(112, 160, 128)"],
#oscilloscope-status .pulse-dot[style*="background-color:rgb(112, 160, 128)"] {
    animation: pulse-glow-green 2s infinite ease-in-out !important;
    background-color: var(--color-green) !important;
    box-shadow: 0 0 8px var(--color-green);
}

/* Flashing red for clinical alert */
#oscilloscope-status .pulse-dot[style*="background-color: var(--color-red)"],
#oscilloscope-status .pulse-dot[style*="background-color:var(--color-red)"],
#oscilloscope-status .pulse-dot[style*="background-color: rgb(217, 104, 96)"],
#oscilloscope-status .pulse-dot[style*="background-color:rgb(217, 104, 96)"] {
    animation: pulse-flash-red 0.8s infinite ease-in-out !important;
    background-color: var(--color-red) !important;
    box-shadow: 0 0 12px var(--color-red);
}

@keyframes pulse-glow-green {
    0% {
        box-shadow: 0 0 0 0 rgba(112, 160, 128, 0.8);
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        box-shadow: 0 0 10px 3px rgba(112, 160, 128, 0.5);
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(112, 160, 128, 0);
        transform: scale(0.95);
        opacity: 0.8;
    }
}

@keyframes pulse-flash-red {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 104, 96, 0.9);
        transform: scale(1);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 14px 5px rgba(217, 104, 96, 0.6);
        transform: scale(1.35);
        opacity: 0.45;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(217, 104, 96, 0);
        transform: scale(1);
        opacity: 1;
    }
}


/* 2. Comprehensive print media queries for GxP report */
@media print {
    /* Hide all dashboard components except the report modal and its printed content */
    body * {
        visibility: hidden !important;
    }

    /* Target the modal container, card, and the GxP report content specifically to show them */
    #gxp-report-modal,
    #gxp-report-modal *,
    #gxp-report-content,
    #gxp-report-content * {
        visibility: visible !important;
    }

    /* Hide the non-printable parts explicitly */
    .print-hide,
    .print-hide *,
    button,
    .btn {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reset window/body for full page layout */
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Clean positioning of the GxP report modal overlay */
    #gxp-report-modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        z-index: auto !important;
    }

    /* Clean GxP report card for printing */
    .print-report-card {
        max-width: 100% !important;
        width: 100% !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border-radius: 0 !important;
    }

    /* Format GxP report content block */
    #gxp-report-content {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Format the inner paper card container to fit perfectly on A4 or Letter paper */
    #gxp-report-content > div {
        border: 1px solid #111111 !important;
        padding: 2.5cm !important;
        margin: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
        font-family: 'Inter', 'Georgia', serif !important;
        page-break-after: avoid !important;
    }

    /* Ensure text color and contrasts are perfect black & white */
    #gxp-report-content h1,
    #gxp-report-content h2,
    #gxp-report-content h3,
    #gxp-report-content h4,
    #gxp-report-content h5,
    #gxp-report-content h6,
    #gxp-report-content p,
    #gxp-report-content span,
    #gxp-report-content div,
    #gxp-report-content strong,
    #gxp-report-content li {
        color: #000000 !important;
        text-shadow: none !important;
    }

    /* Stylize headings in black on paper */
    #gxp-report-content h1 {
        font-size: 20pt !important;
        border-bottom: 2px solid #000000 !important;
        padding-bottom: 5px !important;
        margin-bottom: 15px !important;
    }

    /* Stylize grids/flex elements */
    #gxp-report-content .gxp-meta-grid,
    #gxp-report-content div[style*="display: grid"],
    #gxp-report-content div[style*="display: flex"] {
        background: transparent !important;
        border-color: #000000 !important;
    }

    /* Format clinical narrative and warnings blocks beautifully */
    #gxp-report-content div[style*="background-color: #f8f9fa"] {
        background-color: #f2f2f2 !important;
        border: 1px solid #333333 !important;
        padding: 10pt !important;
        font-size: 10pt !important;
    }

    /* Force page breaks prevention on critical signoff signature block */
    #gxp-report-content div[style*="display: flex; justify-content: space-between; align-items: flex-end"] {
        page-break-inside: avoid !important;
        margin-top: 30pt !important;
    }

    /* Signature line drawing */
    #gxp-report-content div[style*="border-bottom: 1px solid black"] {
        border-bottom: 1.5px solid #000000 !important;
    }

    /* GxP Cryptographic signature text wrap */
    #gxp-report-content div[style*="word-break: break-all"] {
        font-family: 'JetBrains Mono', 'Courier New', monospace !important;
        font-size: 8pt !important;
        color: #111111 !important;
    }

    /* Remove scrollbars from output during print */
    .custom-scrollbar::-webkit-scrollbar {
        display: none !important;
    }
}

/* ==========================================================================
   Appendices: Clinical Pulse-Dot Micro-Animations & Printable Media Overrides
   ========================================================================== */

/* 1. Clinical Pulse-Dot Micro-Animations with mathematically sound transition curves */
.pulse-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-green);
    transition: background-color var(--duration-base) var(--ease-out);
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: clinical-pulse-ring 2.4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.pulse-dot-scale {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
    animation: clinical-sinusoidal-scale 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

@keyframes clinical-pulse-ring {
    0% {
        transform: scale(0.6);
        opacity: 0.85;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes clinical-sinusoidal-scale {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.28);
    }
    100% {
        transform: scale(1.0);
    }
}

/* 2. Comprehensive clinical print overrides for GxP verification report compliance */
@media print {
    /* Hide all non-printable dashboard and container components */
    .app-header,
    .hub-tabs,
    .telemetry-bar,
    .workspace-column,
    .terminal-wrapper,
    .verification-panel,
    button,
    .btn,
    .mesh-background,
    .header-controls,
    #venture-teleboard-card,
    #venture-teleboard-card * {
        display: none !important;
    }

    /* Force GxP validation report container and content to be statically positioned and full-width */
    #gxp-report-modal {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        visibility: visible !important;
    }

    #gxp-report-content {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        visibility: visible !important;
    }

    #gxp-report-content * {
        visibility: visible !important;
    }

    /* Convert all colors to solid high-contrast clinical black and white, removing gradients or glows */
    body, 
    #gxp-report-modal, 
    #gxp-report-content, 
    #gxp-report-content div, 
    #gxp-report-content p, 
    #gxp-report-content span, 
    #gxp-report-content table, 
    #gxp-report-content td, 
    #gxp-report-content th, 
    #gxp-report-content h1, 
    #gxp-report-content h2, 
    #gxp-report-content h3, 
    #gxp-report-content h4, 
    #gxp-report-content h5, 
    #gxp-report-content h6 {
        background-color: #FFFFFF !important;
        color: #16130D !important;
        text-shadow: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Use precise serif headers and monospaced verification details */
    #gxp-report-content h1,
    #gxp-report-content h2,
    #gxp-report-content h3,
    #gxp-report-content h4,
    #gxp-report-content h5,
    #gxp-report-content h6 {
        font-family: var(--font-serif) !important;
        color: #16130D !important;
        border-bottom: 1px solid var(--border-default) !important;
    }

    #gxp-report-content code,
    #gxp-report-content pre,
    #gxp-report-content .ledger-payload,
    #gxp-report-content .ledger-hashes {
        font-family: var(--font-mono) !important;
        color: #16130D !important;
    }

    /* Structure tables with collapsed borders and distinct boundaries */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }

    table, th, td {
        border: 1px solid var(--border-default) !important;
    }

    th, td {
        padding: 8px !important;
        text-align: left !important;
    }

    /* Prevent pagination disruptions within critical clinical assessment structures */
    .ledger-entry-card,
    .warning-board-critical,
    .warning-board-warning,
    .warning-board-aligned,
    section,
    tr,
    blockquote,
    #gxp-report-content div[style*="display: flex; justify-content: space-between; align-items: flex-end"] {
        page-break-inside: avoid !important;
    }
}

/* ==========================================================================
   Phase 20: SciTinker Accordions, Micro-Animations & Monospaced Glows
   ========================================================================== */

/* Accordion Layout & Animations */
.scitinker-accordion {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.5rem;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.scitinker-accordion:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.scitinker-accordion.active {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.scitinker-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface-off);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duration-base) var(--ease-out);
}

.scitinker-accordion-header:hover {
    background: var(--surface);
}

.scitinker-accordion-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: none;
}

.scitinker-accordion-chevron {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-sub);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scitinker-accordion.active .scitinker-accordion-chevron {
    transform: rotate(180deg);
}

.scitinker-accordion-content {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    overflow: hidden;
}

.scitinker-accordion-body {
    padding: 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border-subtle);
}

/* Interactive Elements Micro-Animations */
.scitinker-accordion-body select,
.scitinker-accordion-body input[type="text"],
.scitinker-accordion-body input[type="number"],
.scitinker-accordion-body input[type="checkbox"] {
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.scitinker-accordion-body select:focus,
.scitinker-accordion-body input[type="text"]:focus,
.scitinker-accordion-body input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.scitinker-accordion-body select:hover,
.scitinker-accordion-body input[type="text"]:hover,
.scitinker-accordion-body input[type="number"]:hover {
    transform: translateY(-0.5px);
}

.scitinker-accordion-body select:active,
.scitinker-accordion-body input[type="text"]:active,
.scitinker-accordion-body input[type="number"]:active {
    transform: scale(0.985);
}

/* Checkbox specific transitions */
.scitinker-accordion-body input[type="checkbox"] {
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out);
}

.scitinker-accordion-body input[type="checkbox"]:hover {
    transform: scale(1.1);
}

.scitinker-accordion-body input[type="checkbox"]:active {
    transform: scale(0.9);
}

/* Stage-Specific Glow Classes (Monospaced Terminal Logs) */
.text-cyan-glow {
    color: var(--color-cyan) !important;
    text-shadow: 0 0 4px var(--color-cyan-glow);
}

.text-purple-glow {
    color: var(--color-purple) !important;
    text-shadow: 0 0 4px var(--color-purple-glow);
}

.text-yellow-glow {
    color: var(--color-yellow) !important;
    text-shadow: 0 0 4px var(--color-yellow-glow);
}

.text-pink-glow {
    color: hsl(330, 85%, 60%) !important;
    text-shadow: 0 0 4px hsla(330, 85%, 60%, 0.25);
}

/* Stage-Specific Glow Classes (Monospaced Terminal Logs) */
.text-cyan-glow {
    color: var(--color-cyan) !important;
    text-shadow: 0 0 4px var(--color-cyan-glow);
}

.text-purple-glow {
    color: var(--color-purple) !important;
    text-shadow: 0 0 4px var(--color-purple-glow);
}

.text-yellow-glow {
    color: var(--color-yellow) !important;
    text-shadow: 0 0 4px var(--color-yellow-glow);
}

.text-pink-glow {
    color: hsl(330, 85%, 60%) !important;
    text-shadow: 0 0 4px hsla(330, 85%, 60%, 0.25);
}

.text-blue-glow {
    color: hsl(210, 85%, 55%) !important;
    text-shadow: 0 0 4px hsla(210, 85%, 55%, 0.25);
}

/* SciTinker Console Sub-Tabs styling override for consistency and premium glow */
.scitinker-subtab-btn {
    color: var(--color-text-muted);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.scitinker-subtab-btn:hover {
    color: white;
    background: hsla(224, 25%, 6%, 0.4);
}

.scitinker-subtab-btn.active {
    color: white !important;
    background: hsla(180, 85%, 45%, 0.1) !important;
    border: 1px solid var(--color-cyan) !important;
    box-shadow: 0 0 10px hsla(180, 85%, 45%, 0.15) !important;
}

/* ==========================================================================
   World-Class Global UI/UX Redesign & Premium Widgets
   ========================================================================== */

/* Translucent Glassmorphism Overrides */
.glass-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.glass-panel:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), var(--ring) !important;
    transform: translateY(-2px) !important;
}

/* Inputs, Selects, and Textareas Styling */
input[type="text"],
input[type="number"],
select,
textarea {
    background-color: var(--surface-off) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-main) !important;
    padding: 0.5rem 0.8rem !important;
    font-family: var(--font-sans) !important;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out) !important;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    background-color: var(--surface) !important;
    box-shadow: var(--ring) !important;
}
input[type="text"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
    border-color: var(--border-strong) !important;
    transform: translateY(-0.5px);
}

/* Tactile Buttons Styling */
.btn {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: border-color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out) !important;
}
.btn:hover {
    transform: translateY(-1.5px) !important;
}
.btn:active {
    transform: translateY(0.5px) scale(0.97) !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--clay-500), var(--clay-600)) !important;
    border: 1px solid var(--clay-600) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--clay-400), var(--clay-500)) !important;
    box-shadow: 0 4px 12px rgba(200, 90, 50, 0.25), var(--ring) !important;
}
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--clay-400), var(--clay-500)) !important;
    border: 1px solid var(--clay-500) !important;
}
[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, var(--clay-300), var(--clay-400)) !important;
    box-shadow: 0 4px 12px rgba(228, 133, 110, 0.3), var(--ring) !important;
}
.btn-secondary {
    background-color: var(--surface-off) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-main) !important;
}
.btn-secondary:hover {
    background-color: var(--surface) !important;
    border-color: var(--border-strong) !important;
}

/* Range Sliders Styling */
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    background: var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    outline: none !important;
    transition: background var(--duration-base) var(--ease-out) !important;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    cursor: pointer !important;
    border: 2px solid var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out) !important;
}
input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    cursor: pointer !important;
    border: 2px solid var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out) !important;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.25) !important;
    box-shadow: 0 0 10px var(--accent) !important;
}
input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.25) !important;
    box-shadow: 0 0 10px var(--accent) !important;
}

/* Custom Standalone Checkboxes */
input[type="checkbox"]:not(.toggle-switch-checkbox):not([style*="display: none"]):not([style*="display:none"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--surface-off) !important;
    margin: 0 !important;
    font: inherit !important;
    color: var(--accent) !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 4px !important;
    display: grid !important;
    place-content: center !important;
    cursor: pointer !important;
    transition: border-color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out) !important;
}
input[type="checkbox"]:not(.toggle-switch-checkbox):not([style*="display: none"]):not([style*="display:none"])::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    transform: scale(0) !important;
    transition: transform var(--duration-fast) var(--ease-out) !important;
    box-shadow: inset 1em 1em var(--accent) !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
input[type="checkbox"]:not(.toggle-switch-checkbox):not([style*="display: none"]):not([style*="display:none"]):checked::before {
    transform: scale(1) !important;
}
input[type="checkbox"]:not(.toggle-switch-checkbox):not([style*="display: none"]):not([style*="display:none"]):checked {
    border-color: var(--accent) !important;
    background-color: var(--surface) !important;
}
input[type="checkbox"]:not(.toggle-switch-checkbox):not([style*="display: none"]):not([style*="display:none"]):hover {
    border-color: var(--accent) !important;
    transform: scale(1.05) !important;
}
input[type="checkbox"]:not(.toggle-switch-checkbox):not([style*="display: none"]):not([style*="display:none"]):active {
    transform: scale(0.95) !important;
}

/* Hub Navigation Tabs Overrides */
.hub-tab {
    position: relative !important;
    overflow: hidden !important;
    transition: color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out) !important;
}
.hub-tab:hover {
    color: var(--text-main) !important;
    background-color: var(--surface-off) !important;
    border-color: var(--border-default) !important;
}
.hub-tab.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--clay-500), var(--clay-600)) !important;
    border-color: var(--clay-600) !important;
    box-shadow: 0 4px 15px rgba(200, 90, 50, 0.3) !important;
}
[data-theme="dark"] .hub-tab.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--clay-400), var(--clay-500)) !important;
    border-color: var(--clay-500) !important;
    box-shadow: 0 4px 15px rgba(228, 133, 110, 0.4) !important;
}


/* ==========================================================================
   Bulletproof Responsive Hub Navigation Tab Overrides
   ========================================================================== */

/* Disable card-like hover animations for structural container and enforce wrapping layout */
.hub-tabs.glass-panel {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    padding: 0.75rem 1rem !important;
    margin-block-end: 1rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hub-tabs.glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Enforce non-shrinking, non-wrapping individual tabs */
.hub-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.65rem 1.15rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-width: max-content !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    height: auto !important;
    min-height: 2.35rem !important;
    box-sizing: border-box !important;
}

/* Adjust tab icon spacing */
.hub-tab .tab-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}


/* Ultra-high specificity overrides to prevent hub tab squeezing and overlapping */
nav.hub-tabs.glass-panel {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 0.65rem !important;
    overflow: visible !important;
    width: 100% !important;
}
button.hub-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    width: auto !important;
    max-width: none !important;
}

/* ==========================================================================
   Phase 18: Sovereign SciRoute Enterprise Suite Custom Styles
   ========================================================================== */

/* GxP Prompt Contract Card Stylings */
#gxp-contract-card, .gxp-contract-card {
    background: linear-gradient(135deg, hsla(224, 25%, 4%, 0.75), hsla(224, 25%, 1%, 0.9)) !important;
    border: 1.5px solid var(--color-green-glow) !important;
    border-radius: 8px;
    padding: 1.15rem;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    color: var(--color-text-main);
    box-shadow: 0 0 15px rgba(112, 160, 128, 0.15) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#gxp-contract-card:hover, .gxp-contract-card:hover {
    box-shadow: 0 0 25px rgba(112, 160, 128, 0.3) !important;
    border-color: var(--color-green) !important;
}

#gxp-contract-card::before {
    content: "SECURE ENCLAVE";
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
    color: rgba(112, 160, 128, 0.3);
    border: 1px solid rgba(112, 160, 128, 0.3);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-family: var(--font-sans);
}

/* Mutation Lineage Tree Visuals */
#prompt-mut-lineage-tree {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    background-color: hsl(224, 25%, 1%) !important;
    border-radius: 6px;
    border: 1px solid var(--color-panel-border);
}

.mutation-node-card {
    background: hsla(276, 50%, 4%, 0.55);
    border: 1.5px solid rgba(217, 70, 239, 0.2);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    position: relative;
    margin-left: 2rem;
    box-shadow: 0 0 8px rgba(217, 70, 239, 0.05);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mutation-node-card:hover {
    border-color: var(--color-purple) !important;
    box-shadow: 0 0 12px rgba(217, 70, 239, 0.25) !important;
}

.mutation-node-card.root-node {
    margin-left: 0 !important;
    border-color: rgba(0, 255, 213, 0.3);
}

.mutation-node-card.root-node:hover {
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 12px rgba(0, 255, 213, 0.25) !important;
}

.mutation-node-card.elite-node {
    border-color: var(--color-purple) !important;
    background: hsla(276, 50%, 8%, 0.7);
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3) !important;
}

.tree-branch {
    position: absolute;
    left: 0.85rem;
    top: -0.6rem;
    width: 1.15rem;
    height: 1.5rem;
    border-left: 1.5px solid rgba(217, 70, 239, 0.3);
    border-bottom: 1.5px solid rgba(217, 70, 239, 0.3);
    border-bottom-left-radius: 4px;
    pointer-events: none;
}

.mutation-node-card.elite-node .tree-branch {
    border-color: var(--color-purple) !important;
}

.mutation-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}

.mutation-node-generation {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.mutation-node-score {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.72rem;
}

.mutation-node-body {
    font-size: 0.68rem;
    color: var(--color-text-sub);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lagrangian Frontier Row highlighting */
.sla-frontier-row {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sla-frontier-row.active-route {
    background-color: rgba(0, 255, 213, 0.08) !important;
    border-left: 3px solid var(--color-cyan) !important;
}

.sla-frontier-row.active-route td {
    color: white !important;
    font-weight: 700;
}

.sla-frontier-row.violated-row {
    opacity: 0.5;
    background-color: rgba(217, 104, 96, 0.03) !important;
}

.sla-frontier-row.violated-row td {
    color: var(--color-text-muted) !important;
}

/* ==========================================================================
   Phase 24: Sovereign Clinical Enterprise Suite STYLINGS
   ========================================================================== */

.coordinate-link {
    background: hsla(271, 100%, 50%, 0.06);
    border: 1px solid hsla(271, 100%, 50%, 0.25);
    color: #a855f7 !important; /* purple */
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1;
    margin: 0 0.1rem;
    text-shadow: 0 0 4px rgba(168, 85, 247, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.coordinate-link:hover {
    background: hsla(180, 100%, 50%, 0.1) !important;
    border-color: var(--color-cyan) !important;
    color: var(--color-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.25);
    text-shadow: 0 0 4px rgba(0, 255, 213, 0.2);
}

.coordinate-link.active {
    background: hsla(180, 100%, 50%, 0.18) !important;
    border-color: var(--color-cyan) !important;
    color: white !important;
    box-shadow: 0 0 14px rgba(0, 255, 213, 0.35);
}

@keyframes wave-pulse {
    0%, 100% {
        transform: scaleY(0.3);
        background-color: var(--color-cyan);
    }
    50% {
        transform: scaleY(1);
        background-color: var(--color-purple);
    }
}

.waveform-container .wave-bar {
    transform-origin: bottom;
    transition: background-color 0.2s ease;
}

.diarized-speaker-box {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.diarized-speaker-segment {
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid var(--color-panel-border);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.45;
}

.diarized-speaker-segment.clinician {
    border-left: 3px solid var(--color-cyan);
}

.diarized-speaker-segment.patient {
    border-left: 3px solid var(--color-purple);
}

.diarized-speaker-label {
    font-size: 0.68rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diarized-speaker-label.clinician {
    color: var(--color-cyan);
}

.diarized-speaker-label.patient {
    color: var(--color-purple);
}

.diarized-speaker-text {
    font-size: 0.76rem;
    color: var(--color-text-sub);
}


/* ==========================================================================
   Phase 25: Sovereign Clinical Operations & Revenue Command Center Styles
   ========================================================================== */

/* Claims Parent-Child toggles */
.claims-rag-toggle {
    transition: all 0.2s ease-in-out;
}
.claims-rag-toggle.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
    box-shadow: 0 0 8px var(--accent-light);
}

/* Chat Terminal Specialists bubbles */
.specialist-bubble {
    border-radius: 8px;
    padding: 0.8rem;
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1.45;
    animation: slide-in-up 0.3s ease-out;
}
.specialist-bubble.oncology {
    border-left: 3px solid #b57df3;
}
.specialist-bubble.cardiology {
    border-left: 3px solid #50b380;
}
.specialist-bubble.emergency {
    border-left: 3px solid #d99f48;
}

.specialist-header {
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
}
.specialist-header.oncology { color: #b57df3; }
.specialist-header.cardiology { color: #50b380; }
.specialist-header.emergency { color: #d99f48; }

.specialist-text {
    font-size: 0.76rem;
    color: var(--text-sub);
}

/* Hardening contradictory clinical notes & glowing prompt alerts */
.contradiction-badge {
    background: rgba(217, 104, 96, 0.1);
    border: 1px solid rgba(217, 104, 96, 0.2);
    color: #D96860;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.micro-prompt-bubble {
    background: rgba(80, 128, 168, 0.08);
    border: 1px solid rgba(80, 128, 168, 0.25);
    border-left: 3px solid #5080A8;
    color: white;
    padding: 0.8rem;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.45;
    box-shadow: 0 0 10px rgba(80, 128, 168, 0.15);
    animation: pulse-glow 2s infinite ease-in-out;
}

/* Animations */
@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(80, 128, 168, 0.15);
        border-color: rgba(80, 128, 168, 0.25);
    }
    50% {
        box-shadow: 0 0 16px rgba(80, 128, 168, 0.35);
        border-color: rgba(80, 128, 168, 0.5);
    }
}

/* ==========================================================================
   Enterprise LLMRouter Console Styling & Sub-Tabs
   ========================================================================== */
.router-sub-tab {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.router-sub-tab:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.router-sub-tab.active-sub-tab {
    color: var(--color-cyan) !important;
    background: var(--color-cyan-glow) !important;
    border: 1px solid hsla(180, 85%, 45%, 0.2) !important;
    box-shadow: 0 0 15px hsla(180, 85%, 45%, 0.15) !important;
}

/* Speculative Cascade Timeline Styles */
.cascade-step {
    animation: slide-in-up 0.4s ease forwards;
}

/* ==========================================================================
   SOTA Predictive Pareto Frontier & Outage Simulator Styles
   ========================================================================== */
.pareto-plot-wrapper {
    position: relative;
    border: 1px solid var(--color-panel-border);
    border-radius: 8px;
    background: radial-gradient(circle at center, rgba(16, 24, 48, 0.4) 0%, rgba(5, 8, 16, 0.95) 100%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

#pareto-frontier-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* SVG Elements style rules */
.pareto-grid-line {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.pareto-axis-line {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1.5;
}

.pareto-axis-text {
    fill: var(--color-text-muted);
    font-size: 10px;
    font-family: var(--font-mono);
}

.pareto-frontier-line {
    fill: none;
    stroke: var(--color-cyan);
    stroke-width: 2.5;
    stroke-dasharray: 4;
    animation: dash-flow 20s linear infinite;
    filter: drop-shadow(0 0 4px var(--color-cyan-glow));
}

.pareto-frontier-fill {
    fill: rgba(0, 240, 255, 0.03);
}

.pareto-node {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.pareto-node:hover {
    filter: drop-shadow(0 0 8px currentColor);
}

.pareto-node-dot {
    stroke-width: 2;
    transition: r 0.25s ease;
}

.pareto-node:hover .pareto-node-dot {
    r: 8px;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -200;
    }
}

/* Simulator styles */
.simulator-model-card {
    background: rgba(10, 15, 30, 0.4);
    border: 1px solid var(--color-panel-border);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: all 0.3s ease;
}

.simulator-model-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(15, 22, 45, 0.6);
}

.simulator-slider {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    accent-color: var(--color-purple);
    cursor: pointer;
    transition: all 0.2s;
}

.simulator-slider:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Pulsing dot animation for outages */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Cross-agent memory upgrades styling */
.chip-evidence-l1 {
    background-color: hsla(145, 80%, 42%, 0.15);
    color: var(--color-green);
    border: 1px solid hsla(145, 80%, 42%, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.chip-evidence-l2 {
    background-color: hsla(272, 75%, 55%, 0.15);
    color: var(--color-purple);
    border: 1px solid hsla(272, 75%, 55%, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.chip-evidence-l3 {
    background-color: hsla(35, 75%, 60%, 0.15);
    color: hsl(35, 75%, 65%);
    border: 1px solid hsla(35, 75%, 60%, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.gauge-card {
    transition: transform 0.2s, border-color 0.2s;
}
.gauge-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.progress-ring circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}