/**
 * Broken Canvas Central Admin & Quant Telemetry Terminal
 * Inspired by Broken Canvas Capital Quant Terminal (v2.5)
 */

:root {
    --bg-primary: #070a12;
    --bg-secondary: #0b0f19;
    --bg-card: rgba(13, 19, 34, 0.78);
    --bg-card-hover: rgba(18, 27, 48, 0.9);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(0, 229, 255, 0.35);

    --text-primary: #f0f4f8;
    --text-secondary: #8a9bb5;
    --text-muted: #53657f;

    --accent: #00e5ff;
    --accent-glow: rgba(0, 229, 255, 0.25);
    --accent-bg: rgba(0, 229, 255, 0.08);

    --profit: #00e676;
    --profit-glow: rgba(0, 230, 118, 0.25);
    --profit-bg: rgba(0, 230, 118, 0.12);

    --lite-color: #d500f9;
    --lite-glow: rgba(213, 0, 249, 0.25);
    --lite-bg: rgba(213, 0, 249, 0.1);

    --warning: #ffab00;
    --warning-glow: rgba(255, 171, 0, 0.25);
    --warning-bg: rgba(255, 171, 0, 0.12);

    --loss: #ff1744;
    --loss-glow: rgba(255, 23, 68, 0.25);
    --loss-bg: rgba(255, 23, 68, 0.12);

    --primary: #6366f1;
    --panel-bg: rgba(13, 19, 34, 0.85);
    --panel-border: rgba(255, 255, 255, 0.08);
    --text-main: #f0f4f8;
    --danger: #ff1744;
    --bg-input: rgba(0, 0, 0, 0.45);
}

[data-theme="morning"] {
    --bg-primary: #e8f0ec;
    --bg-secondary: #d8e5df;
    --bg-card: #ffffff;
    --bg-card-hover: #f4fbf7;
    --border-color: #94a3b8;
    --border-color-hover: #ea580c;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #475569;

    --accent: #ea580c;
    --accent-glow: rgba(234, 88, 12, 0.25);
    --accent-bg: rgba(234, 88, 12, 0.12);

    --profit: #059669;
    --profit-glow: rgba(5, 150, 105, 0.25);
    --profit-bg: rgba(5, 150, 105, 0.12);

    --lite-color: #d97706;
    --warning: #d97706;
    --loss: #dc2626;

    --primary: #ea580c;
    --panel-bg: #ffffff;
    --panel-border: #94a3b8;
    --text-main: #0f172a;
    --danger: #dc2626;
    --bg-input: #ffffff;
}

[data-theme="afternoon"],
[data-theme="light"] {
    --bg-primary: #e2e8f0;
    --bg-secondary: #cbd5e1;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --border-color: #475569;
    --border-color-hover: #0284c7;

    --text-primary: #000000;
    --text-secondary: #090d16;
    --text-muted: #0f172a;

    --accent: #0284c7;
    --accent-glow: rgba(2, 132, 199, 0.25);
    --accent-bg: rgba(2, 132, 199, 0.15);

    --profit: #047857;
    --profit-glow: rgba(4, 120, 87, 0.25);
    --profit-bg: rgba(4, 120, 87, 0.15);

    --lite-color: #6b21a8;
    --warning: #9a3412;
    --loss: #991b1b;

    --primary: #1d4ed8;
    --panel-bg: #ffffff;
    --panel-border: #475569;
    --text-main: #000000;
    --danger: #991b1b;
    --bg-input: #ffffff;
}

[data-theme="evening"] {
    --bg-primary: #1e1b24;
    --bg-secondary: #27232f;
    --bg-card: rgba(44, 38, 54, 0.88);
    --bg-card-hover: rgba(55, 48, 68, 0.95);
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-hover: rgba(249, 115, 22, 0.4);

    --text-primary: #f8fafc;
    --text-secondary: #e2d9c8;
    --text-muted: #a89f91;

    --accent: #f97316;
    --accent-glow: rgba(249, 115, 22, 0.3);
    --accent-bg: rgba(249, 115, 22, 0.12);

    --profit: #10b981;
    --profit-glow: rgba(16, 185, 129, 0.25);
    --profit-bg: rgba(16, 185, 129, 0.12);

    --lite-color: #fb923c;
    --warning: #f59e0b;
    --loss: #ef4444;

    --primary: #f97316;
    --panel-bg: rgba(44, 38, 54, 0.9);
    --panel-border: rgba(255, 255, 255, 0.12);
    --text-main: #f8fafc;
    --danger: #ef4444;
    --bg-input: rgba(30, 27, 36, 0.85);
}

[data-theme="night"],
[data-theme="dark"] {
    --bg-primary: #070a12;
    --bg-secondary: #0b0f19;
    --bg-card: rgba(13, 19, 34, 0.78);
    --bg-card-hover: rgba(18, 27, 48, 0.9);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(0, 229, 255, 0.35);

    --text-primary: #f0f4f8;
    --text-secondary: #8a9bb5;
    --text-muted: #53657f;

    --accent: #00e5ff;
    --accent-glow: rgba(0, 229, 255, 0.25);
    --accent-bg: rgba(0, 229, 255, 0.08);

    --profit: #00e676;
    --profit-glow: rgba(0, 230, 118, 0.25);
    --profit-bg: rgba(0, 230, 118, 0.12);

    --lite-color: #d500f9;
    --warning: #ffab00;
    --loss: #ff1744;

    --primary: #6366f1;
    --panel-bg: rgba(13, 19, 34, 0.85);
    --panel-border: rgba(255, 255, 255, 0.08);
    --text-main: #f0f4f8;
    --danger: #ff1744;
    --bg-input: rgba(0, 0, 0, 0.45);
}

/* Global Hidden & Visibility Utilities */
.hidden {
    display: none !important;
}

.floating-chat-launcher.hidden,
.floating-radio-launcher.hidden,
.floating-messenger-window.hidden,
.floating-radio-window.hidden {
    display: none !important;
}

/* Global Form Controls & Inputs (Dark + Light Mode Support) */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea,
.form-control,
.control-select,
.form-input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.control-select:focus,
.form-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

[data-theme="light"] select option,
[data-theme="afternoon"] select option,
[data-theme="morning"] select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Light / Afternoon / Morning Mode Overrides for Hardcoded & Card Containers */
[data-theme="light"] .quant-card,
[data-theme="afternoon"] .quant-card,
[data-theme="morning"] .quant-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .quant-card-title,
[data-theme="afternoon"] .quant-card-title,
[data-theme="morning"] .quant-card-title,
[data-theme="light"] label,
[data-theme="afternoon"] label,
[data-theme="morning"] label,
[data-theme="light"] h1,
[data-theme="afternoon"] h1,
[data-theme="morning"] h1,
[data-theme="light"] h2,
[data-theme="afternoon"] h2,
[data-theme="morning"] h2,
[data-theme="light"] h3,
[data-theme="afternoon"] h3,
[data-theme="morning"] h3,
[data-theme="light"] h4,
[data-theme="afternoon"] h4,
[data-theme="morning"] h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .mini-rank-list,
[data-theme="afternoon"] .mini-rank-list,
[data-theme="morning"] .mini-rank-list,
[data-theme="light"] [style*="background: rgba(0, 0, 0"],
[data-theme="afternoon"] [style*="background: rgba(0, 0, 0"],
[data-theme="morning"] [style*="background: rgba(0, 0, 0"],
[data-theme="light"] [style*="background:rgba(0,0,0"],
[data-theme="afternoon"] [style*="background:rgba(0,0,0"],
[data-theme="morning"] [style*="background:rgba(0,0,0"],
[data-theme="light"] [style*="background: rgba(0,0,0"],
[data-theme="afternoon"] [style*="background: rgba(0,0,0"],
[data-theme="morning"] [style*="background: rgba(0,0,0"] {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .btn-secondary,
[data-theme="afternoon"] .btn-secondary,
[data-theme="morning"] .btn-secondary {
    background: #f1f5f9;
    color: #0f172a;
    border: 1.5px solid #cbd5e1;
    font-weight: 700;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="afternoon"] .btn-secondary:hover,
[data-theme="morning"] .btn-secondary:hover {
    background: #e2e8f0;
    color: #000000;
    border-color: #94a3b8;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 10% 20%, rgba(0, 229, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(213, 0, 249, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 50% 60%, rgba(0, 230, 118, 0.03) 0%, transparent 60%);
    background-attachment: fixed;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

.container {
    max-width: 1780px;
    width: 96%;
    margin: 0 auto;
    padding: 10px 16px 24px 16px;
}

/* ==========================================================================
   Header Navigation & Brand Bar
   ========================================================================== */
header {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
    transition: transform 0.25s ease;
}

.brand:hover .logo-icon-svg {
    transform: rotate(45deg);
}

.brand-text h1 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="light"] .brand-text h1,
[data-theme="afternoon"] .brand-text h1,
[data-theme="morning"] .brand-text h1 {
    color: #0f172a;
}

.brand-text p {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-pill {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(213, 0, 249, 0.2));
    border: 1px solid rgba(0, 229, 255, 0.4);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.header-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}

.badge-live {
    background: rgba(0, 230, 118, 0.12);
    border-color: rgba(0, 230, 118, 0.35);
    color: var(--profit);
}

.badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--profit);
    box-shadow: 0 0 8px var(--profit);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--profit); }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.badge-stream {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--accent);
}

.badge-clock {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.control-select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="light"] .control-select,
[data-theme="afternoon"] .control-select,
[data-theme="morning"] .control-select {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

.control-select:hover, .control-select:focus {
    border-color: var(--accent);
}

/* Base Buttons */
.tab-btn, .btn-secondary, .btn-primary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    user-select: none;
    line-height: 1.2;
}

.tab-btn:hover, .btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #00e5ff 100%);
    border-color: #00e5ff;
    color: #070a12;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff 0%, #00e676 100%);
    color: #070a12;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.5);
    transform: translateY(-1px);
}

/* Action Button Utilities for Tables */
.action-btn-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.btn-action-pass, .btn-action-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-action-pass {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--accent);
}

.btn-action-pass:hover {
    background: rgba(0, 229, 255, 0.22);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
    transform: translateY(-1px);
}

.btn-action-delete {
    background: rgba(255, 23, 68, 0.08);
    border: 1px solid rgba(255, 23, 68, 0.35);
    color: var(--loss);
}

.btn-action-delete:hover {
    background: rgba(255, 23, 68, 0.22);
    border-color: var(--loss);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.35);
    transform: translateY(-1px);
}

/* ==========================================================================
   Top KPI Command Deck (6-card Ultra-Wide Matrix)
   ========================================================================== */
.kpi-command-deck {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.kpi-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 11px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kpi-stat-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.kpi-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.25s ease;
}

.kpi-card-live::before { background: linear-gradient(90deg, var(--profit), var(--accent)); }
.kpi-card-views::before { background: linear-gradient(90deg, var(--accent), #6366f1); }
.kpi-card-uniques::before { background: linear-gradient(90deg, var(--lite-color), #ec4899); }
.kpi-card-clicks::before { background: linear-gradient(90deg, var(--warning), #ff6d00); }
.kpi-card-read::before { background: linear-gradient(90deg, var(--profit), #00b0ff); }
.kpi-card-scroll::before { background: linear-gradient(90deg, #00e5ff, var(--lite-color)); }

.kpi-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.kpi-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.kpi-stat-icon {
    font-size: 13px;
    opacity: 0.85;
}

.kpi-stat-value {
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 2px;
}

[data-theme="light"] .kpi-stat-value,
[data-theme="afternoon"] .kpi-stat-value,
[data-theme="morning"] .kpi-stat-value {
    color: #0f172a;
}

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

.delta-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9.5px;
}

.delta-up { background: var(--profit-bg); color: var(--profit); }
.delta-neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }

/* ==========================================================================
   Navigation Tabs Bar
   ========================================================================== */
.terminal-nav-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.terminal-nav-bar::-webkit-scrollbar {
    display: none;
}

.nav-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.nav-tab-btn.active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 800;
    box-shadow: 0 0 12px var(--accent-glow);
}

.tab-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.nav-tab-btn.active .tab-badge {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* Light / Afternoon / Morning Theme Overrides for Navigation Bar & Tabs */
[data-theme="light"] .terminal-nav-bar,
[data-theme="afternoon"] .terminal-nav-bar,
[data-theme="morning"] .terminal-nav-bar {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .nav-tab-btn,
[data-theme="afternoon"] .nav-tab-btn,
[data-theme="morning"] .nav-tab-btn {
    color: #1e293b !important;
    font-weight: 700;
}

[data-theme="light"] .nav-tab-btn:hover,
[data-theme="afternoon"] .nav-tab-btn:hover,
[data-theme="morning"] .nav-tab-btn:hover {
    color: #000000 !important;
    background: #f1f5f9 !important;
}

[data-theme="light"] .nav-tab-btn.active,
[data-theme="afternoon"] .nav-tab-btn.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.35);
}

[data-theme="morning"] .nav-tab-btn.active {
    background: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(234, 88, 12, 0.35);
}

[data-theme="light"] .tab-badge,
[data-theme="afternoon"] .tab-badge,
[data-theme="morning"] .tab-badge {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .nav-tab-btn.active .tab-badge,
[data-theme="afternoon"] .nav-tab-btn.active .tab-badge,
[data-theme="morning"] .nav-tab-btn.active .tab-badge {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   Tab View Panels
   ========================================================================== */
.terminal-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.terminal-panel.active {
    display: flex;
    animation: fadeIn 0.25s ease forwards;
}

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

/* Card & Section Containers */
.quant-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.quant-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 6px;
}

.quant-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.2px;
}

[data-theme="light"] .quant-card-title,
[data-theme="afternoon"] .quant-card-title,
[data-theme="morning"] .quant-card-title {
    color: #0f172a;
}

.quant-card-subtitle {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* Grids */
.grid-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

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

.grid-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

/* ==========================================================================
   Charts & Visualizations
   ========================================================================== */
.chart-container-wrap {
    position: relative;
    width: 100%;
    height: 240px;
}

.chart-period-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.period-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.period-btn.active {
    background: rgba(0, 229, 255, 0.2);
    color: var(--accent);
    font-weight: 700;
}

/* ==========================================================================
   Terminal Tables & Lists
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.quant-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: left;
}

.quant-table th {
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sortable-th:hover {
    background: rgba(0, 229, 255, 0.12) !important;
    color: var(--accent) !important;
}

.sortable-th .sort-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 9.5px;
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sortable-th.active-sort {
    color: var(--accent) !important;
    border-bottom: 1.5px solid var(--accent) !important;
}

.sortable-th.active-sort .sort-indicator {
    opacity: 1;
    color: var(--accent);
    font-weight: 900;
}

[data-theme="light"] .quant-table th,
[data-theme="afternoon"] .quant-table th,
[data-theme="morning"] .quant-table th {
    background: #f1f5f9;
    color: #334155;
    border-bottom: 1.5px solid #cbd5e1;
}

[data-theme="light"] .sortable-th:hover,
[data-theme="afternoon"] .sortable-th:hover,
[data-theme="morning"] .sortable-th:hover {
    background: #e2e8f0 !important;
    color: #0284c7 !important;
}

[data-theme="light"] .sortable-th.active-sort,
[data-theme="afternoon"] .sortable-th.active-sort,
[data-theme="morning"] .sortable-th.active-sort {
    color: #0284c7 !important;
    border-bottom: 2px solid #0284c7 !important;
}

.quant-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    vertical-align: middle;
}

[data-theme="light"] .quant-table td,
[data-theme="afternoon"] .quant-table td,
[data-theme="morning"] .quant-table td {
    border-bottom-color: #e2e8f0;
    color: #0f172a;
}

.quant-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.tag-pageview { background: rgba(0, 229, 255, 0.15); color: #00e5ff; border: 1px solid rgba(0, 229, 255, 0.3); }
.tag-click { background: rgba(213, 0, 249, 0.15); color: #d500f9; border: 1px solid rgba(213, 0, 249, 0.3); }
.tag-read { background: rgba(0, 230, 118, 0.15); color: #00e676; border: 1px solid rgba(0, 230, 118, 0.3); }
.tag-scroll { background: rgba(255, 171, 0, 0.15); color: #ffab00; border: 1px solid rgba(255, 171, 0, 0.3); }
.tag-dwell { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }

/* Progress & Milestone Bars */
.progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fill-cyan { background: linear-gradient(90deg, #0284c7, #00e5ff); }
.fill-green { background: linear-gradient(90deg, #00c853, #00e676); }
.fill-purple { background: linear-gradient(90deg, #9c27b0, #d500f9); }
.fill-gold { background: linear-gradient(90deg, #ff8f00, #ffc107); }

/* Top Pages / Items Mini List */
.mini-rank-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.mini-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    gap: 6px;
    font-size: 11px;
    transition: all 0.15s ease;
}

.mini-rank-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 229, 255, 0.2);
}

.mini-rank-left {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mini-rank-title {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==========================================================================
   App Cards (Portals & Apps)
   ========================================================================== */
.portal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.portal-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.portal-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.portal-card-info {
    flex: 1;
    min-width: 0;
}

.portal-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="light"] .portal-card-name,
[data-theme="afternoon"] .portal-card-name,
[data-theme="morning"] .portal-card-name {
    color: #0f172a;
}

.portal-card-path {
    font-size: 10.5px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Soundboard & Alerts Modal (Matching localhost:5000 style)
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
}

.modal-backdrop.hidden {
    display: none !important;
}

.terminal-modal-card {
    background: #0d1322;
    background: linear-gradient(165deg, #0f172a 0%, #090e1a 100%);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 12px;
    max-width: 580px;
    width: 100%;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 229, 255, 0.1);
    overflow: hidden;
}

.terminal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
}

.terminal-modal-card .quant-card-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

/* High-Contrast Form Groups & Form Controls (Dark Default) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 2px;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #ffffff !important;
    background: #050811 !important;
    border: 1.5px solid rgba(0, 229, 255, 0.35) !important;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.form-control.mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13.5px;
    letter-spacing: 0.5px;
}

.form-control:focus {
    border-color: var(--accent) !important;
    background: #090e1c !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.form-control::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
    opacity: 1;
}

.form-control option {
    background-color: #0d1322 !important;
    color: #ffffff !important;
    padding: 10px;
}

.modal-notice {
    padding: 12px 14px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.28);
    border-radius: 8px;
    font-size: 12px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.45;
}

.modal-notice strong {
    color: #00e5ff;
    font-weight: 700;
}

.btn-auto-gen {
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 4px;
    padding: 2px 8px;
    color: #00e5ff;
    font-size: 11.5px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-auto-gen:hover {
    background: rgba(0, 229, 255, 0.22);
    border-color: #00e5ff;
}

/* ==========================================================================
   MORNING THEME OVERRIDES (Green/Amber Light Mode)
   ========================================================================== */
[data-theme="morning"] .terminal-modal-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="morning"] .terminal-modal-header {
    border-bottom: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

[data-theme="morning"] .terminal-modal-card .quant-card-title {
    color: #0f172a !important;
}

[data-theme="morning"] .form-group label {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="morning"] .form-control {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="morning"] .form-control:focus {
    border-color: #ea580c !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.3) !important;
}

[data-theme="morning"] .form-control::placeholder {
    color: #64748b !important;
    opacity: 1;
}

[data-theme="morning"] .form-control option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-theme="morning"] .modal-notice {
    background: rgba(234, 88, 12, 0.08) !important;
    border: 1.5px solid rgba(234, 88, 12, 0.3) !important;
    color: #0f172a !important;
    font-weight: 600;
}

[data-theme="morning"] .modal-notice strong {
    color: #ea580c !important;
}

[data-theme="morning"] .btn-auto-gen {
    background: rgba(234, 88, 12, 0.12) !important;
    border: 1.5px solid rgba(234, 88, 12, 0.35) !important;
    color: #ea580c !important;
}

/* ==========================================================================
   AFTERNOON & LIGHT THEME OVERRIDES (High-Contrast White Light Mode)
   ========================================================================== */
[data-theme="afternoon"] .terminal-modal-card,
[data-theme="light"] .terminal-modal-card {
    background: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="afternoon"] .terminal-modal-header,
[data-theme="light"] .terminal-modal-header {
    border-bottom: 1.5px solid #cbd5e1 !important;
    background: #f1f5f9 !important;
}

[data-theme="afternoon"] .terminal-modal-card .quant-card-title,
[data-theme="light"] .terminal-modal-card .quant-card-title {
    color: #000000 !important;
}

[data-theme="afternoon"] .form-group label,
[data-theme="light"] .form-group label {
    color: #000000 !important;
    font-weight: 800 !important;
}

[data-theme="afternoon"] .form-control,
[data-theme="light"] .form-control {
    color: #000000 !important;
    background: #ffffff !important;
    border: 1.5px solid #64748b !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="afternoon"] .form-control:focus,
[data-theme="light"] .form-control:focus {
    border-color: #0284c7 !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="afternoon"] .form-control::placeholder,
[data-theme="light"] .form-control::placeholder {
    color: #475569 !important;
    opacity: 1;
}

[data-theme="afternoon"] .form-control option,
[data-theme="light"] .form-control option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

[data-theme="afternoon"] .modal-notice,
[data-theme="light"] .modal-notice {
    background: rgba(2, 132, 199, 0.08) !important;
    border: 1.5px solid rgba(2, 132, 199, 0.3) !important;
    color: #000000 !important;
    font-weight: 600;
}

[data-theme="afternoon"] .modal-notice strong,
[data-theme="light"] .modal-notice strong {
    color: #0284c7 !important;
}

[data-theme="afternoon"] .btn-auto-gen,
[data-theme="light"] .btn-auto-gen {
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
    color: #0284c7 !important;
}

/* ==========================================================================
   EVENING THEME OVERRIDES (Warm Violet & Amber Dark Mode)
   ========================================================================== */
[data-theme="evening"] .terminal-modal-card {
    background: linear-gradient(165deg, #2c2636 0%, #1e1b24 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 30px rgba(249, 115, 22, 0.15) !important;
}

[data-theme="evening"] .terminal-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="evening"] .terminal-modal-card .quant-card-title {
    color: #f8fafc !important;
}

[data-theme="evening"] .form-group label {
    color: #f8fafc !important;
    font-weight: 700 !important;
}

[data-theme="evening"] .form-control {
    color: #ffffff !important;
    background: #16131c !important;
    border: 1.5px solid rgba(249, 115, 22, 0.35) !important;
}

[data-theme="evening"] .form-control:focus {
    border-color: #f97316 !important;
    background: #231e2b !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.4) !important;
}

[data-theme="evening"] .form-control::placeholder {
    color: #a89f91 !important;
    opacity: 1;
}

[data-theme="evening"] .form-control option {
    background-color: #1e1b24 !important;
    color: #ffffff !important;
}

[data-theme="evening"] .modal-notice {
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    color: #f8fafc !important;
}

[data-theme="evening"] .modal-notice strong {
    color: #f97316 !important;
}

[data-theme="evening"] .btn-auto-gen {
    background: rgba(249, 115, 22, 0.15) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    color: #f97316 !important;
}

.soundboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.test-sound-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    text-align: center;
}

.test-sound-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.12);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.25);
    color: var(--accent);
}

.test-sound-btn span:first-child {
    font-size: 11px;
    font-weight: 800;
}

.test-sound-btn .sound-sub {
    font-size: 9px;
    color: var(--text-muted);
}

/* Custom Range Slider */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.25s ease;
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    transition: 0.25s ease;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--profit);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
#admin-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.admin-toast {
    background: rgba(13, 19, 34, 0.95);
    border: 1px solid var(--border-color);
    padding: 10px 16px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.25s ease forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.admin-toast.toast-success { border-color: var(--profit); color: var(--profit); }
.admin-toast.toast-error { border-color: var(--loss); color: var(--loss); }
.admin-toast.toast-info { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Login Splash & Login Card
   ========================================================================== */
#login-modal {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(13, 19, 34, 0.95), #070a12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.login-card {
    background: rgba(13, 19, 34, 0.88);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 32px 28px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    text-align: center;
}

.login-branding-logo {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
}

.login-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffffff;
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.form-group {
    text-align: left;
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #ffffff;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.alert-box {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: left;
}

.alert-error {
    background: var(--loss-bg);
    border: 1px solid rgba(255, 23, 68, 0.4);
    color: #ff80ab;
}

.alert-success {
    background: var(--profit-bg);
    border: 1px solid rgba(0, 230, 118, 0.4);
    color: #b9f6ca;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1400px) {
    .kpi-command-deck {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 768px) {
    .kpi-command-deck {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3col, .grid-4col {
        grid-template-columns: 1fr;
    }
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-badges, .header-controls {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .kpi-command-deck {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Ticket Real-time Notifications & Toast Styling
   ========================================================================== */
.ticket-alert-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #0f172a !important;
    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    border-left: 5px solid var(--accent) !important;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.25);
    cursor: pointer;
    min-width: 320px;
    max-width: 420px;
    animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ticket-alert-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 229, 255, 0.4);
}

[data-theme="light"] .ticket-alert-toast {
    background: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 15px rgba(56, 189, 248, 0.25);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.badge-ticket-pulse {
    animation: ticketPulse 1.5s infinite;
    background: rgba(0, 229, 255, 0.4) !important;
    color: #ffffff !important;
}

@keyframes ticketPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

/* ==========================================================================
   End-to-End Encrypted (E2EE) Messenger Styles
   ========================================================================== */
.chat-layout-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
}

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

.chat-channel-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-channel-btn:hover {
    background: rgba(0, 229, 255, 0.06);
    border-color: rgba(0, 229, 255, 0.3);
}

.chat-channel-btn.active {
    background: rgba(0, 229, 255, 0.12);
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}

.chat-contact-btn {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-contact-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.chat-contact-btn.active {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.35);
    color: var(--accent);
}

.chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 8px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    animation: fadeIn 0.2s ease;
}

.chat-bubble-incoming {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-top-left-radius: 2px;
}

.chat-bubble-outgoing {
    align-self: flex-end;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-top-right-radius: 2px;
}

.chat-verified-badge {
    font-size: 9px;
    color: var(--profit);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
}

[data-theme="light"] .chat-bubble-incoming {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

[data-theme="light"] .chat-bubble-outgoing {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

/* ==========================================================================
   Floating E2EE Messenger Dock & Window
   ========================================================================== */
.floating-chat-launcher {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 99990;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.floating-chat-launcher:hover {
    transform: translateY(-2px) scale(1.03);
}

.floating-chat-pill {
    background: #0f172a;
    border: 1px solid rgba(0, 229, 255, 0.45);
    padding: 10px 16px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 229, 255, 0.2);
    position: relative;
    user-select: none;
    backdrop-filter: blur(8px);
}

.floating-chat-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--profit);
    box-shadow: 0 0 8px var(--profit);
    animation: statusBlink 2s infinite;
}

.floating-chat-unread-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    min-width: 20px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    line-height: 1;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7), inset 0 0 4px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: chatBadgePulse 2s infinite ease-in-out;
}

@keyframes chatBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
    50% { transform: scale(1.12); box-shadow: 0 0 14px rgba(239, 68, 68, 0.9); }
}

.floating-chat-unread-badge.hidden {
    display: none !important;
}

.contact-unread-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 5px;
    min-width: 16px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    margin-left: auto;
}

.contact-unread-badge.hidden {
    display: none !important;
}

/* Presence & Online Status Indicators */
.status-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676, 0 0 14px rgba(0, 230, 118, 0.4);
    display: inline-block;
    flex-shrink: 0;
    animation: statusBlink 2s infinite ease-in-out;
}

.status-offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    display: inline-block;
    flex-shrink: 0;
}

.online-tag-badge {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.35);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.offline-tag-badge {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.25);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chat-room-presence-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(0, 230, 118, 0.05);
    border-bottom: 1px solid rgba(0, 230, 118, 0.15);
    font-size: 11px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.chat-room-presence-bar .online-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: #00e676;
}

.floating-messenger-window {
    position: fixed;
    bottom: 76px;
    right: 22px;
    z-index: 99995;
    background: #0d1322;
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 229, 255, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpFloat 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
}

/* Three Floating Sizes */
.floating-messenger-window.size-sm {
    width: 380px;
    height: 520px;
}

.floating-messenger-window.size-md {
    width: 520px;
    height: 640px;
}

.floating-messenger-window.size-lg {
    width: 760px;
    height: 750px;
}

@keyframes slideUpFloat {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.floating-messenger-window.hidden {
    display: none !important;
}

.floating-chat-header {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.floating-chat-size-group {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.floating-chat-size-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.floating-chat-size-btn:hover {
    color: var(--text-primary);
}

.floating-chat-size-btn.active {
    background: var(--accent);
    color: #070a12;
}

.floating-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #070a12;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.floating-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.floating-chat-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    outline: none;
    max-width: 140px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.floating-messenger-window.size-sm .floating-chat-header {
    padding: 8px 10px;
    gap: 6px;
}

.floating-messenger-window.size-sm .floating-chat-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.floating-messenger-window.size-sm .floating-chat-select {
    max-width: 115px;
    font-size: 11px;
    padding: 2px 4px;
}

.floating-messenger-window.size-sm .floating-chat-action-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.floating-messenger-window.size-sm .floating-chat-size-btn {
    padding: 2px 5px;
    font-size: 10px;
}

.floating-chat-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.floating-chat-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.floating-chat-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.floating-chat-sidebar {
    width: 200px;
    border-right: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.floating-messenger-window.size-lg .floating-chat-sidebar {
    display: flex;
}

.floating-chat-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.floating-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floating-chat-footer {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ==========================================================================
   Dynamic Theme Engine Overrides: E2EE Messenger
   ========================================================================== */

/* 1. MORNING THEME (Sunrise Orange / Dawn Mint) */
[data-theme="morning"] .floating-chat-pill {
    background: #ffffff;
    border: 1.5px solid #ea580c;
    color: #0f172a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 0 15px rgba(234, 88, 12, 0.22);
}

[data-theme="morning"] .floating-messenger-window {
    background: #ffffff;
    border: 1.5px solid #ea580c;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 0 25px rgba(234, 88, 12, 0.22);
}

[data-theme="morning"] .floating-chat-header,
[data-theme="morning"] .floating-chat-footer,
[data-theme="morning"] .floating-chat-sidebar {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="morning"] .floating-chat-avatar {
    background: #ea580c;
    color: #ffffff;
}

[data-theme="morning"] .floating-chat-select {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="morning"] .chat-channel-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="morning"] .chat-channel-btn:hover {
    background: #fff7ed;
    border-color: #fdba74;
}

[data-theme="morning"] .chat-channel-btn.active {
    background: #ffedd5;
    border-color: #ea580c;
    color: #c2410c;
    font-weight: 700;
}

[data-theme="morning"] .chat-contact-btn {
    color: #334155;
}

[data-theme="morning"] .chat-contact-btn:hover {
    background: #fff7ed;
    color: #0f172a;
}

[data-theme="morning"] .chat-contact-btn.active {
    background: #ffedd5;
    border-color: #ea580c;
    color: #c2410c;
}

[data-theme="morning"] .chat-bubble-incoming {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

[data-theme="morning"] .chat-bubble-outgoing {
    background: #ffedd5;
    border: 1px solid #fdba74;
    color: #9a3412;
}

[data-theme="morning"] .floating-chat-size-group {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[data-theme="morning"] .floating-chat-size-btn {
    color: #475569;
}

[data-theme="morning"] .floating-chat-size-btn.active {
    background: #ea580c;
    color: #ffffff;
}

/* 2. AFTERNOON & LIGHT THEME (Clean White & Sky Blue) */
[data-theme="afternoon"] .floating-chat-pill,
[data-theme="light"] .floating-chat-pill {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    color: #0f172a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 0 15px rgba(2, 132, 199, 0.2);
}

[data-theme="afternoon"] .floating-messenger-window,
[data-theme="light"] .floating-messenger-window {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 0 25px rgba(2, 132, 199, 0.2);
}

[data-theme="afternoon"] .floating-chat-header,
[data-theme="light"] .floating-chat-header,
[data-theme="afternoon"] .floating-chat-footer,
[data-theme="light"] .floating-chat-footer,
[data-theme="afternoon"] .floating-chat-sidebar,
[data-theme="light"] .floating-chat-sidebar {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="afternoon"] .floating-chat-avatar,
[data-theme="light"] .floating-chat-avatar {
    background: #0284c7;
    color: #ffffff;
}

[data-theme="afternoon"] .floating-chat-select,
[data-theme="light"] .floating-chat-select {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="afternoon"] .chat-channel-btn,
[data-theme="light"] .chat-channel-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="afternoon"] .chat-channel-btn:hover,
[data-theme="light"] .chat-channel-btn:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
}

[data-theme="afternoon"] .chat-channel-btn.active,
[data-theme="light"] .chat-channel-btn.active {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0369a1;
    font-weight: 700;
}

[data-theme="afternoon"] .chat-contact-btn,
[data-theme="light"] .chat-contact-btn {
    color: #334155;
}

[data-theme="afternoon"] .chat-contact-btn:hover,
[data-theme="light"] .chat-contact-btn:hover {
    background: #f0f9ff;
    color: #0f172a;
}

[data-theme="afternoon"] .chat-contact-btn.active,
[data-theme="light"] .chat-contact-btn.active {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0369a1;
}

[data-theme="afternoon"] .chat-bubble-incoming,
[data-theme="light"] .chat-bubble-incoming {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

[data-theme="afternoon"] .chat-bubble-outgoing,
[data-theme="light"] .chat-bubble-outgoing {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0369a1;
}

[data-theme="afternoon"] .floating-chat-size-group,
[data-theme="light"] .floating-chat-size-group {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[data-theme="afternoon"] .floating-chat-size-btn,
[data-theme="light"] .floating-chat-size-btn {
    color: #475569;
}

[data-theme="afternoon"] .floating-chat-size-btn.active,
[data-theme="light"] .floating-chat-size-btn.active {
    background: #0284c7;
    color: #ffffff;
}

/* 3. EVENING THEME (Golden Hour & Dusk Mauve) */
[data-theme="evening"] .floating-chat-pill {
    background: #27232f;
    border: 1.5px solid rgba(249, 115, 22, 0.6);
    color: #f8fafc;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(249, 115, 22, 0.25);
}

[data-theme="evening"] .floating-messenger-window {
    background: #1e1b24;
    border: 1.5px solid rgba(249, 115, 22, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 25px rgba(249, 115, 22, 0.25);
}

[data-theme="evening"] .floating-chat-header,
[data-theme="evening"] .floating-chat-footer,
[data-theme="evening"] .floating-chat-sidebar {
    background: rgba(39, 35, 47, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="evening"] .floating-chat-avatar {
    background: #f97316;
    color: #ffffff;
}

[data-theme="evening"] .floating-chat-select {
    background: rgba(30, 27, 36, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f8fafc;
}

[data-theme="evening"] .chat-channel-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

[data-theme="evening"] .chat-channel-btn.active {
    background: rgba(249, 115, 22, 0.2);
    border-color: #f97316;
    color: #f97316;
}

[data-theme="evening"] .chat-bubble-incoming {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

[data-theme="evening"] .chat-bubble-outgoing {
    background: rgba(249, 115, 22, 0.2);
    border: 1px solid rgba(249, 115, 22, 0.45);
    color: #fed7aa;
}

[data-theme="evening"] .floating-chat-size-btn.active {
    background: #f97316;
    color: #ffffff;
}

@media (max-width: 600px) {
    .floating-messenger-window {
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        bottom: 70px !important;
        height: calc(100vh - 90px) !important;
    }
    .floating-chat-sidebar {
        display: none !important;
    }
    .floating-radio-launcher {
        left: 10px !important;
        right: auto !important;
        bottom: 22px !important;
    }
    .floating-radio-window {
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        bottom: 70px !important;
        max-height: calc(100vh - 90px) !important;
    }
}

/* ==========================================================================
   Floating Airwave Live Radio Player (Left-Docked)
   ========================================================================== */
.floating-radio-launcher {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 99980;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.floating-radio-launcher:hover {
    transform: translateY(-2px) scale(1.03);
}

.floating-radio-pill {
    background: #0f172a;
    border: 1px solid rgba(213, 0, 249, 0.45);
    padding: 8px 14px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(213, 0, 249, 0.2);
    position: relative;
    user-select: none;
    backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-radio-pill.playing {
    border-color: #d500f9;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(213, 0, 249, 0.4);
}

.floating-radio-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.floating-radio-pulse.live {
    background: #ff1744;
    box-shadow: 0 0 8px #ff1744;
    animation: statusBlink 1.5s infinite;
}

.floating-radio-pulse.buffering {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning);
    animation: statusBlink 0.8s infinite;
}

.floating-radio-icon {
    font-size: 16px;
}

.floating-radio-info-mini {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.floating-radio-station-mini {
    font-weight: 700;
    font-size: 12px;
    color: #ffffff;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-radio-status-mini {
    font-size: 9.5px;
    color: var(--text-secondary);
}

/* Mini Equalizer Bars in Pill */
.radio-mini-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    width: 14px;
}

.radio-mini-equalizer span {
    width: 2px;
    background: var(--lite-color);
    border-radius: 1px;
    height: 3px;
    transition: height 0.15s ease;
}

.floating-radio-pill.playing .radio-mini-equalizer span:nth-child(1) {
    animation: miniEq 0.7s ease-in-out infinite alternate;
}
.floating-radio-pill.playing .radio-mini-equalizer span:nth-child(2) {
    animation: miniEq 0.5s ease-in-out 0.15s infinite alternate;
}
.floating-radio-pill.playing .radio-mini-equalizer span:nth-child(3) {
    animation: miniEq 0.8s ease-in-out 0.3s infinite alternate;
}
.floating-radio-pill.playing .radio-mini-equalizer span:nth-child(4) {
    animation: miniEq 0.6s ease-in-out 0.2s infinite alternate;
}

@keyframes miniEq {
    0% { height: 3px; }
    100% { height: 12px; }
}

/* Floating Radio Deck Window (Left Docked) */
.floating-radio-window {
    position: fixed;
    bottom: 76px;
    left: 22px;
    z-index: 99992;
    background: #0d1322;
    border: 1px solid rgba(213, 0, 249, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 25px rgba(213, 0, 249, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpFloat 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
}

.floating-radio-window.hidden {
    display: none !important;
}

.floating-radio-header {
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.floating-radio-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(213, 0, 249, 0.3), rgba(0, 229, 255, 0.3));
    border: 1px solid rgba(213, 0, 249, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.radio-live-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 23, 68, 0.2);
    color: #ff1744;
    border: 1px solid rgba(255, 23, 68, 0.4);
    letter-spacing: 0.5px;
}

.radio-live-tag.on-air {
    background: rgba(0, 230, 118, 0.2);
    color: #00e676;
    border-color: rgba(0, 230, 118, 0.4);
}

.floating-radio-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.floating-radio-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.floating-radio-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 170px);
}

/* Now Playing Card */
.radio-now-playing-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.radio-station-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(213, 0, 249, 0.25) 0%, rgba(13, 19, 34, 0.8) 100%);
    border: 1px solid rgba(213, 0, 249, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(213, 0, 249, 0.2);
}

.radio-now-playing-details {
    flex: 1;
    min-width: 0;
}

.radio-now-playing-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-now-playing-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-stream-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.radio-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

.radio-status-dot.playing {
    background: var(--profit);
    box-shadow: 0 0 6px var(--profit);
}

.radio-status-dot.buffering {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning);
}

.radio-status-text {
    font-size: 10px;
    color: var(--accent);
}

/* Controls Deck Card */
.radio-controls-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Waveform Visualizer */
.radio-visualizer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
}

.radio-wave-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    width: 100%;
}

.radio-wave-visualizer .vbar {
    width: 3px;
    background: linear-gradient(to top, rgba(0, 229, 255, 0.4), var(--lite-color));
    border-radius: 2px;
    height: 4px;
    transition: height 0.1s ease;
}

.floating-radio-window.playing .radio-wave-visualizer .vbar-1 { animation: waveBar 0.8s infinite ease-in-out alternate 0.1s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-2 { animation: waveBar 0.6s infinite ease-in-out alternate 0.2s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-3 { animation: waveBar 0.9s infinite ease-in-out alternate 0.05s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-4 { animation: waveBar 0.7s infinite ease-in-out alternate 0.25s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-5 { animation: waveBar 1.0s infinite ease-in-out alternate 0.15s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-6 { animation: waveBar 0.5s infinite ease-in-out alternate 0.3s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-7 { animation: waveBar 0.85s infinite ease-in-out alternate 0.1s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-8 { animation: waveBar 0.65s infinite ease-in-out alternate 0.22s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-9 { animation: waveBar 0.95s infinite ease-in-out alternate 0.08s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-10 { animation: waveBar 0.7s infinite ease-in-out alternate 0.18s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-11 { animation: waveBar 0.85s infinite ease-in-out alternate 0.28s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-12 { animation: waveBar 0.55s infinite ease-in-out alternate 0.12s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-13 { animation: waveBar 0.75s infinite ease-in-out alternate 0.2s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-14 { animation: waveBar 0.9s infinite ease-in-out alternate 0.05s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-15 { animation: waveBar 0.6s infinite ease-in-out alternate 0.15s; }
.floating-radio-window.playing .radio-wave-visualizer .vbar-16 { animation: waveBar 0.8s infinite ease-in-out alternate 0.25s; }

@keyframes waveBar {
    0% { height: 4px; }
    100% { height: 22px; }
}

/* Playback Controls Row */
.radio-buttons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.radio-btn-play {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00e5ff 0%, #d500f9 100%);
    border: none;
    color: #070a12;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 229, 255, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.radio-btn-play:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(213, 0, 249, 0.6);
}

.radio-btn-play:active {
    transform: scale(0.95);
}

.radio-btn-sec {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.radio-btn-sec:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
}

/* Volume Row */
.radio-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.radio-vol-btn {
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
}

.radio-vol-display {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}

/* Category Tuner Tabs */
.radio-tabs-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.radio-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 5px 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-align: center;
}

.radio-tab-btn:hover {
    color: var(--text-primary);
}

.radio-tab-btn.active {
    background: var(--lite-color);
    color: #ffffff;
}

/* Station List Items */
.radio-stations-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.station-item-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.station-item-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(213, 0, 249, 0.4);
}

.station-item-card.active {
    background: rgba(213, 0, 249, 0.12);
    border-color: var(--lite-color);
}

.station-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.station-item-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.station-item-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-item-sub {
    font-size: 10px;
    color: var(--text-secondary);
}

.station-item-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.15);
    color: var(--accent);
    flex-shrink: 0;
}

/* Custom URL Form */
.radio-custom-form {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

.radio-footer-quicklink {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Dynamic Theme Engine Overrides: Floating Live Radio Player
   ========================================================================== */

/* 1. MORNING THEME (Sunrise Orange / Dawn Mint) */
[data-theme="morning"] .floating-radio-pill {
    background: #ffffff;
    border: 1.5px solid #ea580c;
    color: #0f172a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 0 15px rgba(234, 88, 12, 0.22);
}

[data-theme="morning"] .floating-radio-station-mini {
    color: #0f172a;
}

[data-theme="morning"] .floating-radio-window {
    background: #ffffff;
    border: 1.5px solid #ea580c;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 0 25px rgba(234, 88, 12, 0.22);
}

[data-theme="morning"] .radio-now-playing-card,
[data-theme="morning"] .radio-controls-card,
[data-theme="morning"] .floating-radio-header {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="morning"] .radio-now-playing-name,
[data-theme="morning"] .station-item-title {
    color: #0f172a !important;
    font-weight: 700;
}

[data-theme="morning"] .radio-now-playing-desc,
[data-theme="morning"] .radio-vol-display,
[data-theme="morning"] .radio-footer-quicklink {
    color: #334155 !important;
    font-weight: 600 !important;
}

[data-theme="morning"] .station-item-card {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[data-theme="morning"] .station-item-card:hover {
    background: #fff7ed;
    border-color: #fdba74;
}

[data-theme="morning"] .station-item-card.active {
    background: #ffedd5;
    border-color: #ea580c;
}

[data-theme="morning"] .radio-tabs-bar {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[data-theme="morning"] .radio-tab-btn {
    color: #475569;
}

[data-theme="morning"] .radio-tab-btn.active {
    background: #ea580c;
    color: #ffffff;
}

[data-theme="morning"] .radio-btn-play {
    background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35);
}

[data-theme="morning"] .radio-btn-sec {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="morning"] .radio-wave-visualizer .vbar {
    background: linear-gradient(to top, #ea580c, #d97706);
}

/* 2. AFTERNOON & LIGHT THEME (Clean White & Sky Blue) */
[data-theme="afternoon"] .floating-radio-pill,
[data-theme="light"] .floating-radio-pill {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    color: #0f172a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 0 15px rgba(2, 132, 199, 0.2);
}

[data-theme="afternoon"] .floating-radio-station-mini,
[data-theme="light"] .floating-radio-station-mini {
    color: #0f172a;
}

[data-theme="afternoon"] .floating-radio-window,
[data-theme="light"] .floating-radio-window {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 0 25px rgba(2, 132, 199, 0.2);
}

[data-theme="afternoon"] .radio-now-playing-card,
[data-theme="light"] .radio-now-playing-card,
[data-theme="afternoon"] .radio-controls-card,
[data-theme="light"] .radio-controls-card,
[data-theme="afternoon"] .floating-radio-header,
[data-theme="light"] .floating-radio-header {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="afternoon"] .radio-now-playing-name,
[data-theme="light"] .radio-now-playing-name,
[data-theme="afternoon"] .station-item-title,
[data-theme="light"] .station-item-title {
    color: #0f172a !important;
    font-weight: 700;
}

[data-theme="afternoon"] .radio-now-playing-desc,
[data-theme="light"] .radio-now-playing-desc,
[data-theme="afternoon"] .radio-vol-display,
[data-theme="light"] .radio-vol-display,
[data-theme="afternoon"] .radio-footer-quicklink,
[data-theme="light"] .radio-footer-quicklink {
    color: #334155 !important;
    font-weight: 600 !important;
}

[data-theme="afternoon"] .station-item-card,
[data-theme="light"] .station-item-card {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[data-theme="afternoon"] .station-item-card:hover,
[data-theme="light"] .station-item-card:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
}

[data-theme="afternoon"] .station-item-card.active,
[data-theme="light"] .station-item-card.active {
    background: #e0f2fe;
    border-color: #0284c7;
}

[data-theme="afternoon"] .radio-tabs-bar,
[data-theme="light"] .radio-tabs-bar {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[data-theme="afternoon"] .radio-tab-btn,
[data-theme="light"] .radio-tab-btn {
    color: #475569;
}

[data-theme="afternoon"] .radio-tab-btn.active,
[data-theme="light"] .radio-tab-btn.active {
    background: #0284c7;
    color: #ffffff;
}

[data-theme="afternoon"] .radio-btn-play,
[data-theme="light"] .radio-btn-play {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.35);
}

[data-theme="afternoon"] .radio-btn-sec,
[data-theme="light"] .radio-btn-sec {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="afternoon"] .radio-wave-visualizer .vbar,
[data-theme="light"] .radio-wave-visualizer .vbar {
    background: linear-gradient(to top, #0284c7, #2563eb);
}

/* 3. EVENING THEME (Golden Hour & Dusk Mauve) */
[data-theme="evening"] .floating-radio-pill {
    background: #27232f;
    border: 1.5px solid rgba(249, 115, 22, 0.6);
    color: #f8fafc;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(249, 115, 22, 0.25);
}

[data-theme="evening"] .floating-radio-station-mini {
    color: #f8fafc;
}

[data-theme="evening"] .floating-radio-window {
    background: #1e1b24;
    border: 1.5px solid rgba(249, 115, 22, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 25px rgba(249, 115, 22, 0.25);
}

[data-theme="evening"] .radio-now-playing-card,
[data-theme="evening"] .radio-controls-card,
[data-theme="evening"] .floating-radio-header {
    background: rgba(39, 35, 47, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="evening"] .radio-now-playing-name,
[data-theme="evening"] .station-item-title {
    color: #f8fafc !important;
}

[data-theme="evening"] .radio-now-playing-desc,
[data-theme="evening"] .radio-vol-display,
[data-theme="evening"] .radio-footer-quicklink {
    color: #e2d9c8 !important;
}

[data-theme="evening"] .station-item-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="evening"] .station-item-card.active {
    background: rgba(249, 115, 22, 0.2);
    border-color: #f97316;
}

[data-theme="evening"] .radio-tab-btn.active {
    background: #f97316;
    color: #ffffff;
}

[data-theme="evening"] .radio-btn-play {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(249, 115, 22, 0.4);
}

[data-theme="evening"] .radio-wave-visualizer .vbar {
    background: linear-gradient(to top, #f97316, #ea580c);
}

/* ==========================================================================
   Visual Drag-and-Drop Blog Builder & Post Customizer Studio
   ========================================================================== */
.blog-studio-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .blog-studio-layout {
        grid-template-columns: 1fr;
    }
}

/* Mode Switcher Tabs */
.blog-mode-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.blog-mode-btn {
    padding: 5px 12px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-mode-btn:hover {
    color: var(--text-primary);
}

.blog-mode-btn.active {
    background: var(--accent);
    color: #070a12;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* Appearance & Customizer Card */
.blog-customizer-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cover-gradient-preview-banner {
    height: 48px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.gradient-presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gradient-swatch-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.gradient-swatch-btn:hover {
    transform: scale(1.15);
}

.gradient-swatch-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

/* Drag-and-Drop Block List & Block Items */
.blog-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    margin-bottom: 12px;
}

.blog-block-item {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: default;
}

[data-theme="light"] .blog-block-item {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.blog-block-item:hover {
    border-color: rgba(0, 229, 255, 0.4);
}

.blog-block-item.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    border: 2px dashed var(--accent);
}

.blog-block-item.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: translateY(-2px);
}

.blog-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.blog-block-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 4px;
    user-select: none;
    transition: color 0.15s ease;
}

.blog-block-handle:hover {
    color: var(--accent);
}

.blog-block-handle:active {
    cursor: grabbing;
}

.blog-block-type-badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.12);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-block-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.block-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.block-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.block-action-btn.delete:hover {
    color: var(--loss);
    background: rgba(255, 23, 68, 0.15);
    border-color: rgba(255, 23, 68, 0.3);
}

/* Image Dropzone Component */
.image-dropzone {
    border: 2px dashed rgba(0, 229, 255, 0.35);
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.03);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.image-dropzone:hover,
.image-dropzone.drag-active {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 14px var(--accent-glow);
}

.image-preview-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    max-height: 260px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.image-preview-card img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
}

.image-remove-overlay-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s ease;
}

.image-remove-overlay-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
}

/* Add Block Toolbar */
.blog-add-block-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.blog-add-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.blog-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px var(--accent-glow);
}

/* Live Side-by-Side Preview Pane */
.blog-live-preview-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.live-preview-banner {
    height: 100px;
    display: flex;
    align-items: flex-end;
    padding: 14px 18px;
    color: #ffffff;
}

.live-preview-body {
    padding: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-primary);
    max-height: 580px;
    overflow-y: auto;
}

.live-preview-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.live-preview-callout {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
}

.live-preview-blockquote {
    border-left: 3.5px solid var(--accent);
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin: 12px 0;
    font-style: italic;
}

/* -------------------------------------------------------------
   Hero Featured Post Showcase & Toggle Controls
   ------------------------------------------------------------- */
.featured-showcase-box {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(251, 191, 36, 0.35);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

[data-theme="light"] .featured-showcase-box {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, #ffffff 100%);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.featured-showcase-box:hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.14);
}

.featured-showcase-banner {
    height: 48px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.btn-feature-toggle {
    transition: all 0.18s ease;
}

.btn-feature-toggle.is-featured {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}

.btn-feature-toggle.is-featured:hover {
    background: rgba(251, 191, 36, 0.25) !important;
    border-color: #fbbf24 !important;
}

.mini-rank-item.is-featured-row {
    border-left: 3px solid #fbbf24 !important;
    background: rgba(251, 191, 36, 0.04) !important;
}

/* Micro Formatting Toolbar */
.block-format-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: fit-content;
}

[data-theme="light"] .block-format-toolbar {
    background: #f1f5f9;
}

.format-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}

.format-btn:hover {
    background: var(--hover-bg);
    color: var(--accent);
}

/* ==========================================================================
   Comprehensive Responsive Overrides (iPad, iPhone, Android, Tablets)
   ========================================================================== */

/* Touch Scroll Utilities */
.table-responsive,
.terminal-nav-bar,
.radio-tabs-bar,
.live-preview-body,
.floating-chat-messages,
.floating-radio-body,
.blog-blocks-container {
    -webkit-overflow-scrolling: touch !important;
}

/* Tablet & iPad Landscape / Portrait (<= 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 12px 14px 70px 14px !important;
        max-width: 100vw !important;
    }

    .kpi-command-deck {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .grid-2col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    [style*="grid-template-columns: 380px 1fr"],
    [style*="grid-template-columns:380px 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .grid-3col {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-4col {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Floating Windows on iPad/Tablet */
    .floating-messenger-window {
        width: 380px !important;
        max-width: calc(100vw - 32px) !important;
    }

    .floating-radio-window {
        width: 380px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Mobile & Small Tablets / Phones (<= 768px - iPhone & Android) */
@media (max-width: 768px) {
    body {
        font-size: 13px !important;
    }

    .container {
        padding: 10px 10px 80px 10px !important;
    }

    /* Header Bar Mobile Stacking */
    header {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .brand {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .brand-text h1 {
        font-size: 14.5px !important;
    }

    .header-badges {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .header-badges .badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .header-controls {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        border-top: 1px solid var(--border-color) !important;
        padding-top: 10px !important;
    }

    /* KPI Cards on Mobile */
    .kpi-command-deck {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

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

    .kpi-stat-value {
        font-size: 18px !important;
    }

    .kpi-stat-label {
        font-size: 10.5px !important;
    }

    .kpi-stat-sub {
        font-size: 9.5px !important;
    }

    /* Navigation Bar */
    .terminal-nav-bar {
        padding: 4px !important;
        gap: 4px !important;
    }

    .nav-tab-btn {
        padding: 7px 11px !important;
        font-size: 11.5px !important;
    }

    /* Grids */
    .grid-2col,
    .grid-3col,
    .grid-4col {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Quant Cards */
    .quant-card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .quant-card-header {
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    /* Tables */
    .table-responsive {
        margin: 0 -4px !important;
        width: calc(100% + 8px) !important;
    }

    .quant-table {
        min-width: 500px !important;
        font-size: 11.5px !important;
    }

    .quant-table th,
    .quant-table td {
        padding: 8px 10px !important;
    }

    /* Floating Messenger & Radio Player on Mobile */
    .floating-chat-launcher {
        right: 12px !important;
        bottom: 16px !important;
    }

    .floating-radio-launcher {
        left: 12px !important;
        bottom: 16px !important;
    }

    .floating-chat-pill,
    .floating-radio-pill {
        padding: 6px 11px !important;
        font-size: 11px !important;
        gap: 6px !important;
    }

    .floating-messenger-window {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        bottom: 65px !important;
        height: calc(100vh - 80px) !important;
        max-height: calc(100vh - 80px) !important;
        border-radius: 12px !important;
        z-index: 99995 !important;
    }

    .floating-chat-sidebar {
        width: 130px !important;
    }

    .floating-radio-window {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        bottom: 65px !important;
        max-height: calc(100vh - 80px) !important;
        border-radius: 12px !important;
        z-index: 99995 !important;
    }

    /* Modal dialogs */
    .modal-content,
    .login-card {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        margin: 12px !important;
        padding: 16px !important;
    }

    /* Ticket Alerts Toast */
    .ticket-alert-toast {
        min-width: auto !important;
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
    }
}

/* Extra Small Phones (<= 420px) */
@media (max-width: 420px) {
    .kpi-command-deck {
        grid-template-columns: 1fr 1fr !important;
    }

    .floating-chat-sidebar {
        display: none !important;
    }
}

/* ==========================================================================
   Enhanced Light Mode Styles & High Contrast Elements
   ========================================================================== */
[data-theme="light"] {
    color-scheme: light;
}

[data-theme="light"] body {
    background-color: #f1f5f9;
    color: #000000;
    background-image: none !important;
}

[data-theme="light"] header {
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .brand-text h1 {
    color: #000000 !important;
    font-weight: 900 !important;
}

[data-theme="light"] .brand-text p {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .kpi-stat-card {
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .kpi-stat-label {
    color: #000000 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .kpi-stat-sub,
[data-theme="light"] .kpi-stat-sub span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .quant-card {
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .quant-card-title {
    color: #000000 !important;
    font-weight: 900 !important;
}

[data-theme="light"] .quant-card-subtitle {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .quant-card-header {
    border-bottom: 1.5px solid #cbd5e1 !important;
}

[data-theme="light"] .quant-table {
    color: #000000 !important;
}

[data-theme="light"] .quant-table th {
    background: #e2e8f0 !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border-bottom: 1.5px solid #475569 !important;
}

[data-theme="light"] .quant-table td {
    color: #000000 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .quant-table tr:hover td {
    background: #e0f2fe !important;
}

/* Eliminate unreadable washed out grey across all elements */
[data-theme="light"] [style*="color: var(--text-muted)"],
[data-theme="light"] [style*="color:var(--text-muted)"],
[data-theme="light"] [style*="color: var(--text-secondary)"],
[data-theme="light"] [style*="color:var(--text-secondary)"],
[data-theme="light"] [style*="color: #64748b"],
[data-theme="light"] [style*="color: #94a3b8"],
[data-theme="light"] [style*="color: #8b949e"],
[data-theme="light"] [style*="color: #6b7280"],
[data-theme="light"] [style*="color: #9ca3af"],
[data-theme="light"] [style*="color:#64748b"],
[data-theme="light"] [style*="color:#94a3b8"] {
    color: #000000 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary,
[data-theme="light"] small,
[data-theme="light"] .event-time,
[data-theme="light"] .chat-timestamp,
[data-theme="light"] .chat-meta {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .delta-tag.delta-neutral {
    background: #e2e8f0 !important;
    color: #000000 !important;
    border: 1px solid #475569 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .tag-badge {
    font-weight: 800 !important;
    border: 1px solid #475569 !important;
}

[data-theme="light"] .tab-btn {
    background: #e2e8f0 !important;
    color: #0284c7 !important;
    border: 1.5px solid #475569 !important;
    font-weight: 800 !important;
}

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

[data-theme="light"] .login-card,
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
    color: #000000 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .login-title {
    color: #000000 !important;
}

[data-theme="light"] .login-subtitle {
    color: #0f172a !important;
    font-weight: 700;
}

[data-theme="light"] .blog-block-item {
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
}

[data-theme="light"] .blog-add-block-toolbar {
    background: #e2e8f0 !important;
    border: 1.5px solid #475569 !important;
}

[data-theme="light"] .blog-live-preview-container {
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
}

[data-theme="light"] .station-item-card {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #000000 !important;
}

[data-theme="light"] .station-item-card:hover {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
}

[data-theme="light"] .station-item-card.active {
    background: #e0f2fe !important;
    border: 1.5px solid #0284c7 !important;
}

[data-theme="light"] .station-item-title {
    color: #000000 !important;
    font-weight: 800;
}

[data-theme="light"] .station-item-sub {
    color: #0f172a !important;
    font-weight: 700;
}

[data-theme="light"] .radio-tab-btn {
    background: #e2e8f0 !important;
    border: 1.5px solid #475569 !important;
    color: #000000 !important;
    font-weight: 800;
}

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

[data-theme="light"] .radio-tab-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* ── Operator Profile Avatar & Header Styles ──────────────── */
.profile-avatar-wrap {
    transition: all 0.2s ease-in-out;
}

.profile-avatar-wrap:hover {
    transform: scale(1.03);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
}

.header-user-avatar {
    transition: all 0.18s ease-in-out;
}

.header-user-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px var(--accent) !important;
}

[data-theme="morning"] .profile-avatar-wrap {
    border-color: #ea580c !important;
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(234, 88, 12, 0.25) !important;
}

[data-theme="morning"] #acc-photo-fallback {
    color: #ea580c !important;
}

[data-theme="morning"] .header-user-avatar {
    border-color: #ea580c !important;
    background: #ffffff !important;
    box-shadow: 0 0 6px rgba(234, 88, 12, 0.2) !important;
}

[data-theme="morning"] #nav-avatar-fallback {
    color: #ea580c !important;
}

[data-theme="afternoon"] .profile-avatar-wrap,
[data-theme="light"] .profile-avatar-wrap {
    border-color: #0284c7 !important;
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="afternoon"] #acc-photo-fallback,
[data-theme="light"] #acc-photo-fallback {
    color: #0284c7 !important;
}

[data-theme="afternoon"] .header-user-avatar,
[data-theme="light"] .header-user-avatar {
    border-color: #0284c7 !important;
    background: #ffffff !important;
    box-shadow: 0 0 6px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="afternoon"] #nav-avatar-fallback,
[data-theme="light"] #nav-avatar-fallback {
    color: #0284c7 !important;
}

[data-theme="evening"] .profile-avatar-wrap {
    border-color: #f97316 !important;
    background: #1e1b24 !important;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3) !important;
}

[data-theme="evening"] #acc-photo-fallback {
    color: #f97316 !important;
}

[data-theme="evening"] .header-user-avatar {
    border-color: #f97316 !important;
    background: #1e1b24 !important;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.25) !important;
}

[data-theme="evening"] #nav-avatar-fallback {
    color: #f97316 !important;
}

/* ==========================================================================
   Blog Studio, Visual Drag-and-Drop Blocks & Live Reader Previews
   ========================================================================== */
.blog-mode-nav {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px;
    gap: 3px;
}

.blog-mode-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.blog-mode-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.blog-mode-btn.active {
    background: var(--accent);
    color: #070a12;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.blog-customizer-card {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cover-gradient-preview-banner {
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease;
}

.gradient-presets-grid {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}

.gradient-swatch-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gradient-swatch-btn:hover {
    transform: scale(1.18);
}

.gradient-swatch-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    transform: scale(1.18);
}

/* Blocks Container & Items */
.blog-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 10px;
}

.blog-block-item {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.blog-block-item:hover {
    border-color: rgba(0, 229, 255, 0.4);
}

.blog-block-item.drag-over {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.08);
}

.blog-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-block-handle {
    cursor: grab;
    font-size: 14px;
    color: var(--text-muted);
    user-select: none;
    padding: 0 4px;
}

.blog-block-handle:hover {
    color: var(--accent);
}

.blog-block-type-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

.blog-block-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.block-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.block-action-btn:hover:not(:disabled) {
    background: rgba(0, 229, 255, 0.18);
    border-color: var(--accent);
    color: var(--accent);
}

.block-action-btn.delete:hover {
    background: rgba(255, 23, 68, 0.18);
    border-color: #ff5252;
    color: #ff5252;
}

.blog-add-block-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed var(--border-color);
    border-radius: 7px;
}

.blog-add-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.blog-add-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

/* Image Dropzone & Preview */
.image-dropzone {
    border: 2px dashed rgba(0, 229, 255, 0.4);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    background: rgba(0, 229, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.image-dropzone:hover,
.image-dropzone.drag-over {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.12);
}

.image-preview-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

.image-preview-card img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.image-remove-overlay-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.image-remove-overlay-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
}

/* Live Simulation Card & In-Place Preview */
.live-preview-banner {
    padding: 16px 14px;
    min-height: 85px;
    display: flex;
    align-items: flex-end;
    transition: background 0.3s ease;
}

.live-preview-body {
    padding: 14px;
    background: var(--bg-card);
    max-height: 440px;
    overflow-y: auto;
}

.blog-inline-preview-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px;
    max-height: 540px;
    overflow-y: auto;
}

/* Article Formatted Reader Content */
.article-rendered-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}

.article-rendered-content h1,
.article-rendered-content h2 {
    font-size: 17px;
    font-weight: 800;
    margin: 16px 0 8px 0;
    color: var(--text-primary);
}

.article-rendered-content h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 14px 0 6px 0;
    color: var(--text-primary);
}

.article-rendered-content p {
    margin: 0 0 10px 0;
}

.article-rendered-content figure {
    margin: 14px 0;
    text-align: center;
}

.article-rendered-content figure img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.live-preview-callout {
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 12px;
    line-height: 1.55;
}

.callout-info {
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.35);
    color: var(--text-primary);
}

.callout-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: var(--text-primary);
}

.callout-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--text-primary);
}

.callout-critical {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--text-primary);
}

.live-preview-blockquote {
    border-left: 3.5px solid var(--accent);
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 14px;
    margin: 12px 0;
    font-style: italic;
    border-radius: 0 7px 7px 0;
    color: var(--text-secondary);
}

.article-rendered-content pre.code-block {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 14px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 11.5px;
    margin: 12px 0;
    color: #38bdf8;
}

.article-rendered-content ul,
.article-rendered-content ol {
    padding-left: 20px;
    margin: 8px 0 12px 0;
}

.article-rendered-content li {
    margin-bottom: 4px;
}

/* ==========================================================================
   Operator Accounts Table & Floating Dossier Profile Modal
   ========================================================================== */
.operator-table-row {
    transition: background 0.15s ease, transform 0.15s ease;
}

.operator-table-row:hover {
    background: rgba(0, 229, 255, 0.05) !important;
}

.operator-profile-modal-card {
    background: var(--bg-card) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.25) !important;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-dossier-close:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #ff4d4d !important;
    transform: scale(1.08);
}

.btn-dossier-close-round:hover {
    background: rgba(239, 68, 68, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.1);
}

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

/* Dossier Info Cards */
.dossier-info-card {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.dossier-info-card:hover {
    border-color: rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.04);
}

.dossier-card-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dossier-card-value {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .dossier-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   FLOATING WHOIS & IP INTELLIGENCE WINDOW & INTERACTIVE IP BADGES
   ========================================================================== */

/* Clickable IP Address Styling Across Tables */
.ip-clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--accent, #00e5ff);
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
    transition: all 0.16s ease-in-out;
    user-select: text;
}

.ip-clickable:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: rgba(0, 229, 255, 0.55);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
    transform: translateY(-1px);
}

.ip-clickable .whois-hint-icon {
    font-size: 10px;
    opacity: 0.65;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ip-clickable:hover .whois-hint-icon {
    opacity: 1;
    transform: scale(1.15);
}

/* Floating Window Overlay / Backdrop (Non-blocking or Soft) */
.whois-window-wrapper {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    z-index: 99998;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 14, 26, 0.98) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.88), 0 0 35px rgba(0, 229, 255, 0.18);
    overflow: hidden;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), height 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    animation: whoisPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.whois-window-wrapper.hidden {
    display: none !important;
}

.whois-window-wrapper.dragging {
    opacity: 0.95;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.92), 0 0 50px rgba(0, 229, 255, 0.3);
    cursor: grabbing !important;
}

.whois-window-wrapper.size-compact {
    width: 520px;
}

.whois-window-wrapper.size-expanded {
    width: 860px;
}

.whois-window-wrapper.size-maximized {
    top: 12px !important;
    left: 12px !important;
    transform: none !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    height: calc(100vh - 24px) !important;
    max-height: none !important;
    border-radius: 8px;
}

@keyframes whoisPopIn {
    from {
        opacity: 0;
        transform: translate(-50%, 15px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* Floating Window Header (Draggable Handle) */
.floating-whois-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    user-select: none;
}

.floating-whois-header:active {
    cursor: grabbing;
}

.whois-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.whois-header-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.whois-ip-badge {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #00e5ff);
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.whois-ip-badge:hover {
    background: rgba(0, 229, 255, 0.25);
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.whois-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.whois-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary, #cbd5e1);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.whois-action-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.5);
    color: #ffffff;
    transform: scale(1.06);
}

.whois-action-btn.btn-close:hover {
    background: rgba(255, 23, 68, 0.3);
    border-color: rgba(255, 23, 68, 0.6);
    color: #ff5252;
}

/* Tab Switcher Bar */
.whois-tabs-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 16px 0;
    gap: 4px;
}

.whois-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.whois-tab-btn:hover {
    color: #ffffff;
}

.whois-tab-btn.active {
    color: var(--accent, #00e5ff);
    border-bottom-color: var(--accent, #00e5ff);
    background: rgba(0, 229, 255, 0.06);
    border-top-left-radius: 6px;
    border-top-right-left: 6px;
}

/* Window Content Body */
.floating-whois-body {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.whois-window-wrapper.size-maximized .floating-whois-body {
    max-height: calc(100vh - 160px);
}

/* Quick Summary Hero Banner */
.whois-hero-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    gap: 12px;
}

.whois-hero-location {
    display: flex;
    align-items: center;
    gap: 12px;
}

.whois-flag-large {
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.whois-hero-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
}

.whois-hero-sub {
    font-size: 11.5px;
    color: var(--text-secondary, #cbd5e1);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Grid Cards */
.whois-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .whois-cards-grid {
        grid-template-columns: 1fr;
    }
}

.whois-info-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.whois-info-card:hover {
    border-color: rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.03);
}

.whois-card-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.whois-card-value {
    font-size: 12.5px;
    color: var(--text-primary, #f8fafc);
    font-weight: 600;
    word-break: break-word;
}

.whois-card-value.mono {
    font-family: var(--font-mono, monospace);
}

/* Connection Type Badges */
.whois-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.whois-tag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.whois-tag-ok {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.whois-tag-warn {
    background: rgba(255, 158, 0, 0.15);
    color: #ff9e00;
    border: 1px solid rgba(255, 158, 0, 0.3);
}

.whois-tag-danger {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
    border: 1px solid rgba(255, 23, 68, 0.3);
}

.whois-tag-info {
    background: rgba(0, 229, 255, 0.12);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.25);
}

/* Local Telemetry Mini Table */
.whois-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.whois-mini-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted, #94a3b8);
    font-size: 10.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.whois-mini-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Raw RDAP / JSON Block */
.whois-raw-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.whois-raw-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.whois-raw-code {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: #a5f3fc;
    line-height: 1.5;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Floating Window Footer */
.floating-whois-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    flex-wrap: wrap;
}

.whois-footer-actions-left {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.whois-footer-links-right {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Minimized Dock Pill at Bottom */
.floating-whois-dock {
    position: fixed;
    bottom: 24px;
    right: 170px;
    z-index: 99997;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(9, 14, 26, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 30px;
    padding: 6px 14px 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 229, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation: dockPulse 3s infinite ease-in-out;
}

.floating-whois-dock:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(0, 229, 255, 0.7);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 229, 255, 0.4);
}

.floating-whois-dock.hidden {
    display: none !important;
}

@keyframes dockPulse {
    0%, 100% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 16px rgba(0, 229, 255, 0.15); }
    50% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 26px rgba(0, 229, 255, 0.35); }
}

/* Light / Morning / Afternoon / Evening Theme Overrides for WHOIS Window */
[data-theme="morning"] .whois-window-wrapper {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="morning"] .floating-whois-header {
    background: #f1f5f9 !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

[data-theme="morning"] .whois-header-title {
    color: #0f172a !important;
}

[data-theme="morning"] .whois-tabs-bar {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

[data-theme="morning"] .whois-tab-btn {
    color: #475569 !important;
}

[data-theme="morning"] .whois-tab-btn.active {
    color: #ea580c !important;
    border-bottom-color: #ea580c !important;
    background: rgba(234, 88, 12, 0.08) !important;
}

[data-theme="morning"] .whois-hero-banner {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="morning"] .whois-hero-title {
    color: #0f172a !important;
}

[data-theme="morning"] .whois-info-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="morning"] .whois-card-value {
    color: #0f172a !important;
}

[data-theme="morning"] .whois-raw-code {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="morning"] .floating-whois-footer {
    background: #f1f5f9 !important;
    border-top: 1.5px solid #e2e8f0 !important;
}

[data-theme="afternoon"] .whois-window-wrapper,
[data-theme="light"] .whois-window-wrapper {
    background: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="afternoon"] .floating-whois-header,
[data-theme="light"] .floating-whois-header {
    background: #f1f5f9 !important;
    border-bottom: 1.5px solid #cbd5e1 !important;
}

[data-theme="afternoon"] .whois-header-title,
[data-theme="light"] .whois-header-title {
    color: #000000 !important;
}

[data-theme="afternoon"] .whois-hero-banner,
[data-theme="light"] .whois-hero-banner {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

[data-theme="afternoon"] .whois-hero-title,
[data-theme="light"] .whois-hero-title {
    color: #000000 !important;
}

[data-theme="afternoon"] .whois-info-card,
[data-theme="light"] .whois-info-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="afternoon"] .whois-card-value,
[data-theme="light"] .whois-card-value {
    color: #000000 !important;
}

[data-theme="afternoon"] .whois-raw-code,
[data-theme="light"] .whois-raw-code {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0369a1 !important;
}

[data-theme="evening"] .whois-window-wrapper {
    background: linear-gradient(165deg, #2c2636 0%, #1e1b24 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(249, 115, 22, 0.2) !important;
}

[data-theme="evening"] .whois-tab-btn.active {
    color: #f97316 !important;
    border-bottom-color: #f97316 !important;
}

/* =============================================================
   Security Threat Defense Banner & Threat Matrix Styles
   ============================================================= */
.security-threat-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.16) 0%, rgba(213, 0, 0, 0.28) 100%);
    border: 1.5px solid rgba(255, 23, 68, 0.65);
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255, 23, 68, 0.25), inset 0 0 15px rgba(255, 23, 68, 0.1);
    animation: threatBannerPulse 2.5s infinite ease-in-out;
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
}

@keyframes threatBannerPulse {
    0%, 100% { border-color: rgba(255, 23, 68, 0.65); box-shadow: 0 0 20px rgba(255, 23, 68, 0.2); }
    50% { border-color: rgba(255, 82, 82, 1); box-shadow: 0 0 35px rgba(255, 23, 68, 0.45); }
}

.security-threat-banner.hidden {
    display: none !important;
}

.security-threat-banner-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 280px;
}

.threat-icon-pulse {
    font-size: 26px;
    animation: threatIconShake 1.2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes threatIconShake {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

.threat-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.threat-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.threat-title-row strong {
    font-size: 13.5px;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.threat-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.threat-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.threat-desc code {
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 6px;
    border-radius: 4px;
    color: #ff8a80;
    font-weight: 700;
}

.threat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-threat-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.btn-threat-whois {
    background: rgba(0, 229, 255, 0.2);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.45);
}

.btn-threat-whois:hover {
    background: rgba(0, 229, 255, 0.35);
    transform: translateY(-1px);
}

.btn-threat-block {
    background: #ff1744;
    color: #ffffff;
    border: 1px solid #ff5252;
    box-shadow: 0 2px 8px rgba(255, 23, 68, 0.4);
}

.btn-threat-block:hover {
    background: #d50000;
    transform: translateY(-1px);
}

.btn-threat-ack {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-threat-ack:hover {
    background: rgba(255, 255, 255, 0.25);
}

.threat-severity-badge {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-critical {
    background: rgba(255, 23, 68, 0.3);
    color: #ff5252;
    border: 1px solid rgba(255, 23, 68, 0.6);
}

.severity-high {
    background: rgba(255, 158, 0, 0.25);
    color: #ffab00;
    border: 1px solid rgba(255, 158, 0, 0.5);
}

.severity-warning {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.4);
}

.badge-threat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    animation: threatBadgeGlow 2s infinite ease-in-out;
}

.threat-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff1744;
    box-shadow: 0 0 8px #ff1744;
    animation: threatBadgePulse 1.2s infinite ease-in-out;
}

@keyframes threatBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes threatBadgeGlow {
    0%, 100% { border-color: rgba(255, 23, 68, 0.45); }
    50% { border-color: rgba(255, 82, 82, 0.9); box-shadow: 0 0 10px rgba(255, 23, 68, 0.35); }
}

.threat-micro-stat {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
}

.threat-stat-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.threat-stat-val {
    font-size: 16px;
    font-weight: 800;
}

[data-theme="light"] .security-threat-banner,
[data-theme="morning"] .security-threat-banner,
[data-theme="afternoon"] .security-threat-banner {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15) !important;
}

[data-theme="light"] .threat-title-row strong,
[data-theme="morning"] .threat-title-row strong,
[data-theme="afternoon"] .threat-title-row strong {
    color: #991b1b !important;
}

[data-theme="light"] .threat-desc,
[data-theme="morning"] .threat-desc,
[data-theme="afternoon"] .threat-desc {
    color: #7f1d1d !important;
}

[data-theme="light"] .threat-micro-stat,
[data-theme="morning"] .threat-micro-stat,
[data-theme="afternoon"] .threat-micro-stat {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}