/* ============================================================
   CyberGuard — Cyber Theme
   Enterprise SOC Console — Tokenized Design System
   All colors reference var(--cg-*) from theme-tokens.css
   ============================================================ */

/* ---- Accessibility Utilities ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ---- General Utilities ---- */
.hidden {
    display: none !important;
}


/* ---- Legacy Variable Aliases (map old vars → tokens) ---- */
:root {
    /* @deprecated Use --cg-bg-base instead */
    --bg-base: var(--cg-bg-base);

    /* @deprecated Use --cg-bg-surface instead */
    --bg-surface: var(--cg-bg-surface);

    /* @deprecated Use --cg-bg-surface instead */
    --bg-card: var(--cg-bg-surface);

    /* @deprecated Use --cg-bg-elevated instead */
    --bg-card-hover: var(--cg-bg-elevated);

    /* @deprecated Use --cg-accent-muted instead */
    --border-subtle: var(--cg-accent-muted);

    /* @deprecated Use --cg-focus-ring instead */
    --border-glow: var(--cg-focus-ring);

    /* @deprecated Use --cg-accent instead */
    --purple-400: var(--cg-accent);

    /* @deprecated Use --cg-accent-hover instead */
    --purple-500: var(--cg-accent-hover);

    /* @deprecated Use --cg-accent-hover or define as token in theme-tokens.css */
    --purple-600: var(--cg-accent-dark);

    /* @deprecated Use --cg-info instead */
    --cyan-400: var(--cg-info);

    /* @deprecated Use shadow tokens with --cg-focus-ring and --cg-accent-muted */
    --neon-purple:
        0 0 20px var(--cg-focus-ring), 0 0 40px var(--cg-accent-muted);

    /* @deprecated Use shadow tokens with rgba(56, 189, 248, ...) or --cg-info */
    --neon-cyan: 0 0 20px var(--cg-accent), 0 0 40px var(--cg-accent-hover);

    /* @deprecated Use shadow tokens with rgba(248, 113, 113, ...) or --cg-danger */
    --neon-red:
        0 0 20px rgba(248, 113, 113, 0.5), 0 0 40px rgba(248, 113, 113, 0.2);

    /* @deprecated Use shadow tokens with rgba(52, 211, 153, ...) or --cg-success */
    --neon-green:
        0 0 20px rgba(52, 211, 153, 0.5), 0 0 40px rgba(52, 211, 153, 0.2);

    /* @deprecated Use shadow tokens with rgba(251, 191, 36, ...) or --cg-warning */
    --neon-amber:
        0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.2);
}

/* ---- Base Body ---- */
.cyber-body {
    background-color: var(--cg-bg-base);
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    font-family: var(--cg-font-sans);
    color: var(--cg-text-1);
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.cyber-sidebar {
    background: #0a0a0a;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    /* Task 2.1: CSS transition properties for sidebar toggle */
    transition:
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        width 300ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width, opacity;
    /* GPU acceleration for smooth 60fps animation */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Task 2.1: Collapsed state class */
.cyber-sidebar.sidebar-collapsed {
    transform: translateX(-100%);
    width: 0;
    min-width: 0;
    opacity: 0;
}

/* Legacy support for existing .hidden class */
.cyber-sidebar.hidden {
    transform: translateX(-100%);
    opacity: 0;
    width: 0;
    min-width: 0;
}

/* ---- Main Content Area Expansion (Task 2.2) ---- */
/* Main content transitions smoothly when sidebar toggles */
main {
    flex: 1;
    transition: margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: margin-left;
    /* GPU acceleration for smooth 60fps animation */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* When sidebar is collapsed, main content expands to fill space */
.cyber-sidebar.sidebar-collapsed ~ main {
    margin-left: 0;
}

/* Legacy support for existing .hidden class */
.cyber-sidebar.hidden ~ main {
    margin-left: 0;
}

/* ---- Content Visibility Management (Task 6.1 & 6.2) ---- */
/* Hide user profile card when sidebar is collapsed */
.cyber-sidebar.sidebar-collapsed .cyber-user-card {
    display: none;
}

/* Hide 2FA controls when sidebar is collapsed */
.cyber-sidebar.sidebar-collapsed #enable-2fa-btn,
.cyber-sidebar.sidebar-collapsed #twofa-enabled-section {
    display: none;
}

/* Legacy support for existing .hidden class */
.cyber-sidebar.hidden .cyber-user-card,
.cyber-sidebar.hidden #enable-2fa-btn,
.cyber-sidebar.hidden #twofa-enabled-section {
    display: none;
}

.cyber-logo-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-logo-icon svg {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyber-logo-icon:hover svg {
    transform: scale(1.05) rotate(2deg);
}

.cyber-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--cg-border-subtle),
        transparent
    );
}

/* ---- Nav Items ---- */
.cyber-nav-item {
    color: var(--cg-text-2);
    text-decoration: none;
    transition: all var(--cg-transition-fast);
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}
.cyber-nav-item svg {
    transition: all var(--cg-transition-fast);
}
.cyber-nav-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fafafa !important;
    text-shadow: none;
    box-shadow: none;
}
.cyber-nav-item:hover svg {
    color: #fafafa !important;
}
.cyber-nav-active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fafafa !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
}
.cyber-nav-active svg {
    color: #fafafa !important;
}
.cyber-live-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cg-success);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 1px 6px;
    border-radius: var(--cg-radius-full);
}

/* ---- Pulsing Active Dot ---- */
.cyber-active-dot {
    width: 6px;
    height: 6px;
    background-color: var(--cg-accent);
    border-radius: 50%;
    position: relative;
    display: none;
    margin-left: auto;
    transition: all 0.3s ease;
}
.cyber-nav-active .cyber-active-dot {
    display: inline-block !important;
}

/* ---- User Card ---- */
.cyber-user-card {
    background: var(--cg-bg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
}
.cyber-avatar {
    width: 2.25rem;
    height: 2.25rem;
    background: #27272a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-avatar-sm {
    width: 2rem;
    height: 2rem;
    background: #27272a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-avatar-lg {
    background: #27272a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}
.cyber-pro-badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--cg-warning);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    padding: 2px 7px;
    border-radius: var(--cg-radius-full);
}

/* ---- Header ---- */
.cyber-header {
    background: var(--cg-bg-surface);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cg-border);
    transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjust header padding when sidebar is collapsed to avoid overlapping the float button */
.cyber-sidebar.sidebar-collapsed ~ main .cyber-header {
    padding-left: 3.5rem; /* ~56px to clear the floating button (which is 36px wide + 12px left) */
}

/* ---- Floating Button ---- */
.cyber-float-btn {
    background: var(--cg-accent-muted);
    border: 1px solid var(--cg-accent);
    color: var(--cg-accent);
    border-radius: var(--cg-radius-sm);
    transition: all var(--cg-transition-base);
    box-shadow: 0 0 12px var(--cg-accent-muted);
}
.cyber-float-btn:hover {
    background: var(--cg-focus-ring);
    box-shadow: 0 0 20px var(--cg-accent);
}

/* ---- Sidebar Header Layout ---- */
.cyber-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0.75rem 1rem 1rem;
    position: relative;
}

/* ---- Sidebar Toggle Button (Chevron) ---- */
.cyber-sidebar-toggle {
    position: relative;
    z-index: 51;
    background: var(--cg-accent-muted);
    border: 1px solid var(--cg-focus-ring);
    color: var(--cg-text-2);
    border-radius: var(--cg-radius-sm);
    width: 32px;
    height: 32px;
    padding: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cyber-sidebar-toggle:hover {
    background: var(--cg-accent-muted);
    border-color: var(--cg-accent-hover);
    color: var(--cg-accent);
    box-shadow: 0 0 16px var(--cg-focus-ring);
}

.cyber-sidebar-toggle:focus {
    outline: 2px solid var(--cg-focus-ring);
    outline-offset: 2px;
}

.cyber-sidebar-toggle:active {
    transform: scale(0.92);
}

/* ---- Chevron Icon Rotation Animation ---- */
.cyber-chevron-icon {
    transition: transform 0.3s ease-in-out;
    display: block;
}

/* When sidebar is collapsed, rotate chevron to point right */
.cyber-chevron-icon.chevron-rotated {
    transform: rotate(180deg);
}

/* ---- Collapsed: Show toggle button as a floating edge tab ---- */
.cyber-sidebar.sidebar-collapsed .cyber-sidebar-header {
    opacity: 0;
    pointer-events: none;
}

/* When sidebar is collapsed, show toggle as a fixed edge button */
.cyber-sidebar.sidebar-collapsed ~ .cyber-sidebar-toggle-collapsed {
    display: flex;
}

/* Floating toggle that appears when sidebar is collapsed */
.cyber-sidebar-toggle-float {
    position: fixed;
    top: 1rem;
    left: 0.75rem;
    z-index: 51;
    background: var(--cg-accent-muted);
    border: 1px solid var(--cg-accent);
    color: var(--cg-text-2);
    border-radius: var(--cg-radius-sm);
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    display: none; /* Shown via JS when collapsed */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 12px var(--cg-accent-muted);
}

.cyber-sidebar-toggle-float:hover {
    background: var(--cg-accent-muted);
    border-color: var(--cg-accent-hover);
    color: var(--cg-accent);
    box-shadow: 0 0 20px var(--cg-accent);
}

.cyber-sidebar-toggle-float:focus {
    outline: 2px solid var(--cg-focus-ring);
    outline-offset: 2px;
}

/* ---- Sidebar Overlay (Mobile Drawer Mode) ---- */
.cyber-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--cg-overlay);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.cyber-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ---- Mobile Responsive Behavior (Task 2.2) ---- */
/* Mobile drawer mode (< 768px) */
@media (max-width: 767px) {
    .cyber-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 40;
        transform: translateX(-100%);
    }

    .cyber-sidebar:not(.sidebar-collapsed) {
        transform: translateX(0);
    }

    /* Main content doesn't shift on mobile - overlay mode */
    main {
        margin-left: 0 !important;
    }
}

/* ---- Cards ---- */
.cyber-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: var(--cg-shadow-sm);
    transition: border-color var(--cg-transition-base);
}
.cyber-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

/* ---- Modal ---- */
.cyber-modal {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

/* ---- Tab Bar ---- */
.cyber-tab-bar {
    background: var(--cg-bg-base);
    border: 1px solid var(--cg-border);
}
.cyber-tab {
    color: var(--cg-text-3);
    transition: all var(--cg-transition-base);
    border: 1px solid transparent;
}
.cyber-tab:hover {
    color: var(--cg-text-2);
    background: rgba(255, 255, 255, 0.04);
}
.cyber-tab.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cg-text-1);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Override old tab-button styles for new theme */
.tab-button.active {
    color: var(--cg-accent) !important;
    border-color: transparent !important;
}

/* ---- Inputs ---- */
.cyber-input {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fafafa;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    outline: none;
    font-family: var(--cg-font-mono);
}
.cyber-input::placeholder {
    color: var(--cg-text-3);
}
.cyber-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: #0a0a0a;
    box-shadow: none;
}
select.cyber-input option {
    background: var(--cg-bg-surface);
    color: var(--cg-text-1);
}

/* ---- Buttons ---- */
.cyber-btn-primary {
    background: #fafafa;
    color: #09090b;
    border: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    cursor: pointer;
    text-decoration: none;
}
.cyber-btn-primary:hover {
    background: #e4e4e7;
    box-shadow: none;
}

.cyber-btn-red {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-weight: 500;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    cursor: pointer;
    text-decoration: none;
}

.cyber-btn-red:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    box-shadow: none;
}

.cyber-btn-glow {
    background: #fafafa;
    color: #09090b;
    border: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    cursor: pointer;
}
.cyber-btn-glow:hover {
    background: #e4e4e7;
    box-shadow: none;
}

.cyber-btn-ghost {
    background: transparent;
    color: #a1a1aa;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-weight: 500;
    transition: all var(--cg-transition-base);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cyber-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fafafa;
}

/* ---- Standardized Cancel Button ---- */
/* Use .btn-cancel on every "Cancel" button in modals / panels across all pages. */
/* Appearance-only — never changes onclick or functionality. */
.btn-cancel {
    background: transparent;
    color: #a1a1aa;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-weight: 500;
    font-family: var(--cg-font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-cancel:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fafafa;
    box-shadow: none;
}
.btn-cancel:active {
    background: transparent;
}

.cyber-btn-danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    font-weight: 500;
    transition: all var(--cg-transition-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.cyber-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    box-shadow: none;
}

/* ---- Scoped Ghost Button: Logout ---- */
/* Ghost/outline danger style — replaces the old solid-red danger button */
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    font-family: var(--cg-font-sans);
    text-align: left;
}
.btn-logout:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: none;
}
.btn-logout:active {
    background: rgba(239, 68, 68, 0.12);
}

/* ---- Scoped Ghost Button: Clear History ---- */
/* Muted ghost style — turns danger-red on hover as a soft warning */
.btn-clear-history {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--cg-text-2);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--cg-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn-clear-history:hover {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.06);
    color: #f87171;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}
.btn-clear-history:active {
    transform: scale(0.97);
    background: rgba(239, 68, 68, 0.1);
}

/* Clear Filters Button */
#wa-clear-filters-btn {
    background: transparent;
    border: none;
    color: var(--cg-text-3);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#wa-clear-filters-btn:hover {
    color: var(--cg-text-1);
    background: rgba(255, 255, 255, 0.04);
}
#wa-clear-filters-btn:active {
    transform: scale(0.97);
}

/* ---- Shared Icon Sizing (Logout & Clear History) ---- */
/* SVG and icon elements inside these buttons stay crisp and vertically aligned */
.btn-logout svg,
.btn-clear-history svg,
.btn-logout i,
.btn-clear-history i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.cyber-btn-warning {
    background: #fafafa;
    color: #09090b;
    border: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    cursor: pointer;
}
.cyber-btn-warning:hover {
    background: #e4e4e7;
    box-shadow: none;
}

.cyber-btn-success {
    background: #fafafa;
    color: #09090b;
    border: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    cursor: pointer;
}
.cyber-btn-success:hover {
    background: #e4e4e7;
    box-shadow: none;
}

.cyber-btn-purple {
    background: #fafafa;
    color: #09090b;
    border: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all var(--cg-transition-base);
    cursor: pointer;
}
.cyber-btn-purple:hover {
    background: #e4e4e7;
    box-shadow: none;
}

/* ---- Gauge (Conic Gradient) ---- */
.cyber-gauge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Task 8.1: Risk gauge SVG rotation */
.cyber-gauge-svg {
    transform: rotate(-90deg);
}

/* Task 8.1: Risk gauge arc transition */
.cyber-gauge-arc {
    transition:
        stroke-dashoffset 0.05s linear,
        stroke 0.4s ease,
        filter 0.4s ease;
}

/* Task 8.1: Risk gauge inner content positioning */
.cyber-gauge-content {
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Task 8.1: Risk gauge score value styling */
.cyber-gauge-score {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: var(--cg-font-mono);
}

/* Task 8.1: Risk gauge label styling */
.cyber-gauge-status {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cg-text-3);
    margin-top: 2px;
}

/* Task 8.1: Threat intel search input max-width */
.cyber-search-constrained {
    max-width: 600px;
}
.cyber-gauge {
    --pct: 75;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(
        var(--cg-danger) 0%,
        var(--cg-warning) calc(var(--pct) * 0.5%),
        var(--cg-danger) calc(var(--pct) * 1%),
        rgba(255, 255, 255, 0.06) calc(var(--pct) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    position: relative;
}
.cyber-gauge::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--cg-bg-surface);
}
.cyber-gauge-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cyber-gauge-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    font-family: var(--cg-font-mono);
}
.cyber-gauge-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cg-danger);
    margin-top: 2px;
}

/* ---- Stat Cards ---- */
.cyber-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--cg-border);
    transition: all var(--cg-transition-base);
}
.cyber-stat-threat {
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: none;
}
.cyber-stat-safe {
    border-color: rgba(34, 197, 94, 0.3) !important;
    box-shadow: none;
}
.cyber-stat-warning {
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: none;
}

/* ---- Meta Items ---- */
.cyber-meta-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--cg-border);
}

/* ---- Tool Cards ---- */
.cyber-tool-card {
    background: var(--cg-bg-surface);
    border: 1px solid var(--cg-border);
    transition: all var(--cg-transition-slow);
    cursor: pointer;
}
.cyber-tool-card:hover {
    border-color: var(--cg-accent);
    box-shadow:
        0 0 24px var(--cg-accent-muted),
        var(--cg-shadow-lg);
    transform: scale(1.02);
}

/* Selection state styles */
.cyber-tool-card[data-selected="true"] {
    box-shadow: 0 0 20px var(--cg-accent);
    border: 2px solid var(--cg-accent);
    background: var(--cg-accent-muted);
}

/* Selection indicator (checkmark) */
.selection-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: var(--cg-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--cg-transition-base);
    z-index: 10;
}

.cyber-tool-card[data-selected="true"] .selection-indicator {
    opacity: 1;
}

.cyber-tool-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--cg-accent-muted);
    border: 1px solid var(--cg-focus-ring);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px var(--cg-accent-muted);
}
.cyber-tool-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cg-accent);
    background: var(--cg-accent-muted);
    border: 1px solid var(--cg-focus-ring);
    padding: 2px 7px;
    border-radius: var(--cg-radius-full);
}
.cyber-tool-link {
    color: var(--cg-accent);
    cursor: pointer;
    transition:
        color var(--cg-transition-base),
        text-shadow var(--cg-transition-base);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.cyber-tool-link:hover {
    color: var(--cg-info);
    text-shadow: none;
}

/* ---- Status Badges ---- */
.cyber-badge-threat {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--cg-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.cyber-badge-warning {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--cg-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.cyber-badge-safe {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--cg-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(34, 197, 94, 0.08);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.cyber-badge-info {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--cg-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ---- Severity Badges (Professional Security Reports) ---- */
.severity-badge {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.severity-critical {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.severity-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.severity-info {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ---- Stat Pills ---- */
.cyber-stat-pill-safe {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.cyber-stat-pill-warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
}
.cyber-stat-pill-threat {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

/* ---- Filter Pills (Professional Security Reports) ---- */
.filter-pill {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cg-border);
    color: var(--cg-text-2);
    padding: 0.5rem 1rem;
    border-radius: var(--cg-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.filter-pill:hover {
    background: var(--cg-bg-elevated);
    border-color: var(--cg-border-subtle);
    color: var(--cg-text-1);
    transform: translateY(-1px);
}

.filter-pill.active-critical,
.filter-pill.active-warning,
.filter-pill.active-info,
.filter-pill.active-success {
    background: rgba(59, 130, 246, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #60a5fa !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15),
                inset 0 1px 1px rgba(255, 255, 255, 0.03) !important;
    transform: translateY(0) !important;
}

.filter-pill.active-critical:hover,
.filter-pill.active-warning:hover,
.filter-pill.active-info:hover,
.filter-pill.active-success:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.25) !important;
}

/* ---- Accordion Items (Professional Security Reports) ---- */
.accordion-header {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accordion-header:active {
    background: var(--cg-border);
}

.accordion-header:hover .accordion-icon {
    color: var(--cg-accent);
}

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

.accordion-content.hidden {
    max-height: 0;
    opacity: 0;
}

.accordion-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--cg-text-2);
}

.result-accordion-item.expanded .accordion-icon {
    transform: rotate(180deg);
}

/* ---- Evidence Box (Professional Security Reports) ---- */
.evidence-box {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    padding: 1rem;
    font-family: var(--cg-font-mono);
    font-size: 0.75rem;
    color: var(--cg-success);
    overflow-x: auto;
    line-height: 1.6;
}

.evidence-box pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ---- Results Table ---- */
.cyber-results-table-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--cg-border-subtle);
}

/* ---- Result Row (injected by JS) ---- */
.cyber-result-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
    align-items: center;
}
.cyber-result-row:hover {
    background: rgba(59, 130, 246, 0.05);
}
.cyber-result-row:last-child {
    border-bottom: none;
}

.cyber-result-tool-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cg-text-1);
}
.cyber-result-target {
    font-size: 0.7rem;
    color: var(--cg-text-3);
    font-family: var(--cg-font-mono);
}
.cyber-result-text {
    font-size: 0.75rem;
    color: var(--cg-text-2);
    font-family: var(--cg-font-mono);
    line-height: 1.5;
}
.cyber-result-confidence {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cg-accent);
    font-family: var(--cg-font-mono);
    text-align: right;
}

/* ---- Toggle Group ---- */
.cyber-toggle-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cg-border);
}

/* ---- Guest Notice ---- */
.cyber-guest-notice {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ---- Email Verification Banner ---- */
.cyber-verification-banner {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ---- Info Box ---- */
.cyber-info-box {
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ---- Icon Boxes ---- */
.cyber-icon-box-purple {
    width: 2rem;
    height: 2rem;
    background: var(--cg-accent-muted);
    border: 1px solid var(--cg-accent);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-icon-box-red {
    width: 2rem;
    height: 2rem;
    background: rgba(248, 113, 113, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-icon-box-amber {
    width: 2rem;
    height: 2rem;
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-icon-box-green {
    width: 2rem;
    height: 2rem;
    background: rgba(52, 211, 153, 0.2);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-icon-box-blue {
    width: 2rem;
    height: 2rem;
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Link Badges ---- */
.cyber-link-badge-red {
    background: rgba(248, 113, 113, 0.15);
    color: var(--cg-danger);
    border: 1px solid rgba(248, 113, 113, 0.3);
    text-decoration: none;
    transition: all var(--cg-transition-base);
}
.cyber-link-badge-amber {
    background: rgba(251, 191, 36, 0.15);
    color: var(--cg-warning);
    border: 1px solid rgba(251, 191, 36, 0.3);
    text-decoration: none;
    transition: all var(--cg-transition-base);
}
.cyber-link-badge-green {
    background: rgba(52, 211, 153, 0.15);
    color: var(--cg-success);
    border: 1px solid rgba(52, 211, 153, 0.3);
    text-decoration: none;
    transition: all var(--cg-transition-base);
}
.cyber-link-badge-purple {
    background: var(--cg-accent-muted);
    color: var(--cg-accent);
    border: 1px solid var(--cg-focus-ring);
    text-decoration: none;
    transition: all var(--cg-transition-base);
}
.cyber-link-badge-red:hover {
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.3);
}
.cyber-link-badge-amber:hover {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
.cyber-link-badge-green:hover {
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}
.cyber-link-badge-purple:hover {
    box-shadow: 0 0 12px var(--cg-focus-ring);
}

/* ---- Footer ---- */
.cyber-footer {
    background: var(--cg-bg-base);
    border-top: 1px solid var(--cg-border);
}

/* ---- Empty State ---- */
.cyber-empty-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cg-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ---- Result Cards (overrides for dark theme) ---- */
.result-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--cg-border) !important;
    border-radius: var(--cg-radius-md) !important;
    color: var(--cg-text-1) !important;
}
.result-card:hover {
    background: var(--cg-accent-muted) !important;
    border-color: var(--cg-focus-ring) !important;
    box-shadow: 0 0 20px var(--cg-accent-muted) !important;
    transform: translateY(-1px) !important;
}
.result-card.safe {
    border-left: 3px solid var(--cg-success) !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.1) !important;
}
.result-card.warning {
    border-left: 3px solid var(--cg-warning) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.1) !important;
}
.result-card.threat {
    border-left: 3px solid var(--cg-danger) !important;
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.1) !important;
}
.result-card.system {
    border-left: 3px solid var(--cg-accent-hover) !important;
    box-shadow: 0 0 12px var(--cg-accent-muted) !important;
}

.result-tool {
    background: var(--cg-bg-elevated) !important;
    color: var(--cg-text-2) !important;
}
.result-message {
    color: var(--cg-text-1) !important;
    font-family: var(--cg-font-mono) !important;
    font-size: 0.8rem !important;
}
.result-time {
    color: var(--cg-text-3) !important;
}

.result-status.safe {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--cg-success) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.25) !important;
}
.result-status.warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: var(--cg-warning) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.25) !important;
}
.result-status.threat {
    background: rgba(248, 113, 113, 0.15) !important;
    color: var(--cg-danger) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.25) !important;
}
.result-status.system {
    background: var(--cg-accent-muted) !important;
    color: var(--cg-accent) !important;
    border: 1px solid var(--cg-accent) !important;
    box-shadow: 0 0 8px var(--cg-accent-muted) !important;
}

.result-action-btn,
.result-expand-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--cg-border) !important;
    color: var(--cg-text-2) !important;
}
.result-action-btn:hover,
.result-expand-btn:hover {
    background: var(--cg-accent-muted) !important;
    border-color: var(--cg-accent) !important;
    color: var(--cg-accent) !important;
}

/* ---- Session Modal (dark) ---- */
.fixed .bg-white {
    background: var(--cg-bg-surface) !important;
}
.fixed .border-slate-200 {
    border-color: var(--cg-border) !important;
}
.fixed .text-slate-800 {
    color: var(--cg-text-1) !important;
}
.fixed .text-slate-500 {
    color: var(--cg-text-2) !important;
}
.fixed .hover\:bg-slate-50:hover {
    background: var(--cg-bg-elevated) !important;
}
.fixed .border-slate-600 {
    border-color: var(--cg-border) !important;
}

/* ---- Progress Bar ---- */
#progress-bar {
    background: var(--cg-bg-elevated) !important;
}
.progress-bar-indeterminate div {
    background: linear-gradient(
        90deg,
        transparent,
        var(--cg-accent-hover),
        transparent
    );
    background-size: 200% 100%;
    animation: progress-indeterminate 1.5s infinite linear;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--cg-border-subtle);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--cg-accent);
}

/* ---- Sidebar hidden state ---- */
#sidebar.hidden {
    transform: translateX(-100%);
    opacity: 0;
    width: 0;
    min-width: 0;
}

/* ---- Main padding override ---- */
main {
    padding-top: 0 !important;
}

/* ---- API Keys modal override ---- */
#api-keys-modal:not(.hidden) {
    display: flex !important;
}
#api-keys-modal.hidden {
    display: none !important;
}

/* ---- Welcome modal override ---- */
#welcome-modal:not(.hidden) {
    display: flex !important;
}
#welcome-modal.hidden {
    display: none !important;
}

/* ---- Guest notice static ---- */
#guest-notice {
    position: static !important;
    transform: none !important;
    will-change: auto !important;
}
body.authenticated #guest-notice {
    display: none !important;
}

/* ---- AI Chat (inherit existing styles, just override colors) ---- */
.ai-chat-wrapper {
    background: var(--cg-bg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    overflow: hidden;
}
.ai-chat-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--cg-border);
}
.ai-messages {
    background: var(--cg-bg-base);
}
.ai-input-area {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--cg-border);
}
.ai-input-container {
    background: rgba(24, 24, 27, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--cg-radius-lg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ai-input-container:focus-within {
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(17, 17, 17, 0.65) !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.12),
                inset 0 1px 1px rgba(255, 255, 255, 0.03) !important;
}
.ai-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    color: var(--cg-text-1) !important;
}
.ai-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.ai-send-btn {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}
.ai-send-btn.ai-stop-active {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.ai-send-btn.ai-stop-active:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.45) !important;
}
.ai-send-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.35) !important;
    transform: translateY(-1px) scale(1.04) !important;
}
.ai-send-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.96) !important;
}
.ai-send-btn:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--cg-text-3) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    transform: none !important;
    box-shadow: none !important;
}
.ai-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--cg-text-1) !important;
}
.ai-chip:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* ---- Responsive Design Adjustments (Professional Security Reports) ---- */
@media (max-width: 640px) {
    /* Smaller severity badges on mobile */
    .severity-badge {
        padding: 3px 10px;
        font-size: 0.6rem;
    }

    /* Smaller filter pills on mobile */
    .filter-pill {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    /* Adjust accordion header spacing on mobile */
    .accordion-header {
        padding: 12px;
    }

    /* Reduce accordion content padding on mobile */
    .accordion-content {
        padding: 12px;
        padding-top: 0;
    }

    /* Smaller evidence box on mobile */
    .evidence-box {
        padding: 12px;
        font-size: 0.7rem;
    }

    /* Stack summary metrics vertically on very small screens */
    .summary-metric {
        min-width: 80px;
    }

    /* Adjust activity log font size on mobile */
    .live-activity-feed {
        font-size: 0.7rem;
    }

    /* Make export buttons full width on mobile */
    .export-controls button {
        width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .severity-badge {
        padding: 3px 11px;
        font-size: 0.625rem;
    }

    .filter-pill {
        padding: 7px 14px;
    }
}

/* Smooth transitions for responsive changes */
.summary-bar,
.filter-controls,
.export-controls {
    transition: all 0.3s ease;
}

/* ---- Material Symbols Icons ---- */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   CyberNotify Modal System
   Tasks 2.1 & 2.2 — Layout, Backdrop, Dialog
   ============================================= */

/* 2.1 — Modal layout */
#cyber-notify-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#cyber-notify-modal:not(.hidden) {
    display: flex;
}

/* 2.1 — Backdrop */
#cyber-notify-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s;
}

.cyber-notify-open #cyber-notify-backdrop {
    opacity: 1;
}

/* 2.2 — Dialog container (glassmorphism) */
#cyber-notify-dialog {
    position: relative;
    z-index: 1;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
    font-family: var(--cg-font-sans);
    padding: 2rem;
    border-radius: var(--cg-radius-lg);
    min-width: 320px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.cyber-notify-open #cyber-notify-dialog {
    opacity: 1;
    transform: scale(1);
}

/* 2.2 — Icon */
#cyber-notify-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}

/* 2.2 — Message */
#cyber-notify-message {
    color: var(--cg-text-1);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* 2.2 — Action buttons row */
#cyber-notify-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* 2.2 — Button base styles */
#cyber-notify-confirm-btn,
#cyber-notify-cancel-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* =============================================
   Loading Indicators (Task 19.1)
   Cyber-themed loading spinners and overlays
   ============================================= */

/* Base spinner with cyber-themed styling */
.cyber-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--cg-accent-muted);
    border-top-color: var(--cg-accent-hover);
    border-radius: 50%;
    animation: cyber-spin 0.8s linear infinite;
    margin: 0 auto;
}

/* Small spinner variant */
.cyber-spinner-sm {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--cg-accent-muted);
    border-top-color: var(--cg-accent-hover);
    border-radius: 50%;
    animation: cyber-spin 0.8s linear infinite;
}

/* Large spinner variant */
.cyber-spinner-lg {
    width: 4rem;
    height: 4rem;
    border: 4px solid var(--cg-accent-muted);
    border-top-color: var(--cg-accent-hover);
    border-radius: 50%;
    animation: cyber-spin 0.8s linear infinite;
}

/* Cyan variant for contrast */
.cyber-spinner-cyan {
    border-color: rgba(56, 189, 248, 0.2);
    border-top-color: var(--cg-info);
}

/* Loading overlay for full-screen operations */
.cyber-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--cg-bg-surface);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cg-transition-slow);
}

.cyber-loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Loading text below spinner */
.cyber-loading-text {
    color: var(--cg-accent);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 1rem;
    text-align: center;
    letter-spacing: 0.05em;
}

/* Inline loading indicator (for buttons, cards, etc.) */
.cyber-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cg-text-2);
    font-size: 0.875rem;
}

/* Pulsing animation for loading states */
@keyframes cyber-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.cyber-loading-pulse {
    animation: cyber-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spin animation */
@keyframes cyber-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading dots animation */
.cyber-loading-dots::after {
    content: "";
    animation: cyber-dots 1.5s steps(4, end) infinite;
}

@keyframes cyber-dots {
    0%,
    20% {
        content: "";
    }
    40% {
        content: ".";
    }
    60% {
        content: "..";
    }
    80%,
    100% {
        content: "...";
    }
}

/* ============================================================
   Guest Mode Lock Icons
   Shows lock icons on auth-required elements when not authenticated
   ============================================================ */

/* Lock icon for API Keys sidebar item (guest mode only) */
body.guest #api-keys-toggle::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="rgb(248, 113, 113)"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

/* Lock icon for Initialize Engine buttons (guest mode only) */
body.guest [data-auth-required].cyber-tool-link::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 0.375rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="rgb(248, 113, 113)"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    vertical-align: middle;
}

/* Hide lock icons when authenticated */
body.authenticated #api-keys-toggle::after,
body.authenticated [data-auth-required].cyber-tool-link::after {
    display: none;
}

/* ============================================================
   Threat Intel Hub Specific Styles
   ============================================================ */

/* Loading Spinner Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    animation: spin 0.8s linear infinite;
}

/* Verdict Card Styles */
.verdict-malicious {
    color: var(--cg-danger);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.verdict-clear {
    color: var(--cg-info);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Source Card Status Indicators */
.source-status-clean {
    color: var(--cg-success);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-status-threat {
    color: var(--cg-danger);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Source Details Expansion */
.source-details {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    padding: 1rem;
    margin-top: 1rem;
    font-family: var(--cg-font-mono);
    font-size: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

/* Recent Search Items */
.recent-search-item {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all var(--cg-transition-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cg-bg-elevated);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    backdrop-filter: blur(12px);
}

.recent-search-item:hover {
    background: var(--cg-accent-muted);
    border-color: var(--cg-focus-ring);
}

.recent-search-input {
    font-family: var(--cg-font-mono);
    font-size: 0.875rem;
    color: var(--cg-text-1);
}

.recent-search-timestamp {
    font-size: 0.75rem;
    color: var(--cg-text-3);
}

/* Threat Intel Search Input */
.threat-intel-search-input {
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
    width: 100%;
    max-width: 600px;
    font-family: var(--cg-font-mono);
}

/* Verdict Card */
.verdict-card {
    padding: 2rem;
    text-align: center;
}

/* Source Card */
.source-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Responsive Design for Threat Intel */
@media (max-width: 768px) {
    /* Reduce font sizes on mobile */
    .threat-intel-search-input {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }

    .verdict-malicious,
    .verdict-clear {
        font-size: 1.5rem;
    }

    /* Stack source cards vertically on mobile */
    #threat-intel-source-cards {
        grid-template-columns: 1fr;
    }

    /* Ensure touch-friendly button sizes (minimum 44x44px touch target) */
    #threat-intel-search-btn {
        padding: 0.875rem 2rem;
        min-height: 44px;
    }

    #threat-intel-clear-history-btn {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    /* Touch-friendly filter pills */
    .filter-pill {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    /* Touch-friendly buttons in source cards */
    .cyber-btn-ghost,
    .cyber-btn-danger {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
}

/* Cyan Button and Icon Box Styles for URLScan */
.cyber-btn-cyan {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: var(--cg-info);
    transition: all var(--cg-transition-base);
}

.cyber-btn-cyan:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: none;
}

.cyber-icon-box-cyan {
    width: 2rem;
    height: 2rem;
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: var(--cg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.cyber-link-badge-cyan {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--cg-info);
    transition: all var(--cg-transition-base);
}

.cyber-link-badge-cyan:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.5);
}

/* ============================================================
   API Key Configuration Modal — Unified Style System
   All components use a single --cg-accent (violet) palette.
   No per-service colors — consistent, professional, minimal.
   ============================================================ */

/* ---- Service Cards ---- */
.api-service-card {
    background: var(--cg-bg-elevated);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    padding: 16px;
    transition: border-color 0.2s ease;
}
.api-service-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

/* ---- Icon Boxes (all 5 services — same muted accent style) ---- */
.api-icon-box {
    width: 36px;
    height: 36px;
    border-radius: var(--cg-radius-sm);
    background: var(--cg-accent-muted);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-accent);
    flex-shrink: 0;
}

/* ---- API Key Input ---- */
.api-key-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--cg-bg-base);
    border: 1px solid var(--cg-border-subtle);
    border-radius: var(--cg-radius-sm);
    color: var(--cg-text-1);
    font-size: 13px;
    font-family: var(--cg-font-mono);
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.api-key-input::placeholder {
    color: var(--cg-text-3);
}
.api-key-input:focus {
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 2px var(--cg-focus-ring);
}

/* ---- Save Key Buttons (all 5 services — same accent style) ---- */
.api-save-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--cg-accent-muted);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--cg-radius-md);
    color: var(--cg-accent);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--cg-font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
    /* Reset any inherited button styles from color-specific classes */
    background-image: none;
    box-shadow: none;
    text-align: center;
}
.api-save-btn:hover {
    background: var(--cg-accent);
    color: #ffffff;
    border-color: var(--cg-accent);
}

/* ---- Provider Tag Links (bottom "Get Your API Keys" section) ---- */
.api-provider-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--cg-bg-elevated);
    border: 1px solid var(--cg-border-subtle);
    border-radius: 20px;
    color: var(--cg-text-2);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.api-provider-tag:hover {
    border-color: var(--cg-accent);
    color: var(--cg-accent);
    background: var(--cg-accent-muted);
}

/* ---- Clear All Keys — danger ghost style ---- */
.btn-clear-all-keys {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: var(--cg-radius-md);
    color: var(--cg-danger);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--cg-font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-clear-all-keys:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: var(--cg-danger);
}
.btn-clear-all-keys svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.2s ease;
}

.btn-clear-all-keys:hover svg {
    transform: scale(1.1);
}

/* ================================================================
   PROFESSIONAL GROUPED RESULTS VIEW
   Replaces the per-item accordion with tool-group cards.
   ================================================================ */

/* ---- Summary Stats Bar ---- */
.results-summary-bar {
    padding: 12px 16px;
    background: var(--cg-bg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    margin-bottom: 8px;
}

.summary-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}

.stat-total {
    color: var(--cg-text-1);
    font-weight: 600;
}

.stat.critical {
    color: var(--cg-danger);
    font-weight: 600;
}
.stat.warning {
    color: var(--cg-warning);
    font-weight: 600;
}
.stat.info {
    color: var(--cg-text-3);
    font-weight: 600;
}

/* ---- Tool Result Group ---- */
.tool-result-group {
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    margin-bottom: 8px;
    overflow: hidden;
}

.tool-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--cg-bg-surface);
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
    gap: 12px;
}

.tool-group-header:hover {
    background: var(--cg-bg-elevated);
}

.tool-group-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.tool-group-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--cg-radius-sm);
    background: var(--cg-accent-muted);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-accent);
    flex-shrink: 0;
}

.tool-group-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tool-group-name {
    color: var(--cg-text-1);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-group-count {
    color: var(--cg-text-3);
    font-size: 12px;
    line-height: 1.4;
}

.open-count {
    color: var(--cg-success);
}
.timeout-count {
    color: var(--cg-warning);
}
.closed-count {
    color: var(--cg-text-3);
}

.tool-group-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tool-group-chevron {
    color: var(--cg-text-3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.tool-group-content {
    display: none;
    border-top: 1px solid var(--cg-border);
    background: var(--cg-bg-base);
}

.tool-group-content.visible {
    display: block;
}

/* ---- Port Scan Table ---- */
.port-table-wrapper {
    overflow-x: auto;
}

.port-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.port-results-table thead tr {
    background: var(--cg-bg-elevated);
}

.port-results-table th {
    padding: 10px 16px;
    text-align: left;
    color: var(--cg-text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cg-border);
}

.port-results-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    color: var(--cg-text-2);
    vertical-align: middle;
}

.port-results-table tr:last-child td {
    border-bottom: none;
}

.port-results-table tr:hover td {
    background: var(--cg-bg-elevated);
}

.port-number {
    font-family: var(--cg-font-mono, monospace);
    color: var(--cg-text-1);
    font-weight: 600;
    font-size: 13px;
}

.port-service {
    color: var(--cg-text-2);
    font-size: 13px;
}

.port-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-open {
    background: rgba(52, 211, 153, 0.12);
    color: var(--cg-success);
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.status-timeout {
    background: rgba(251, 191, 36, 0.12);
    color: var(--cg-warning);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.status-closed,
.status-filtered {
    background: rgba(100, 116, 139, 0.12);
    color: var(--cg-text-3);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.response-time {
    font-family: var(--cg-font-mono, monospace);
    font-size: 12px;
    color: var(--cg-info);
}

/* ---- Finding Rows (non-port results) ---- */
.finding-row {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
}

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

.finding-row-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

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

.severity-dot.severity-critical {
    background: var(--cg-danger);
}
.severity-dot.severity-warning {
    background: var(--cg-warning);
}
.severity-dot.severity-info {
    background: var(--cg-text-3);
}

.finding-row-title {
    color: var(--cg-text-1);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
}

.finding-row-desc {
    color: var(--cg-text-2);
    font-size: 12px;
    margin-top: 6px;
    padding-left: 18px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Scan Report / Summary Detail ---- */
.summary-detail-section {
    padding: 12px 16px;
    border-top: 1px solid var(--cg-border);
}

.summary-detail-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cg-text-3);
    margin-bottom: 8px;
}

.summary-detail-pre {
    font-family: var(--cg-font-mono, monospace);
    font-size: 11px;
    color: var(--cg-text-2);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    padding: 12px;
    margin: 0;
    overflow-x: auto;
}

/* ---- Responsive adjustments ---- */
@media (max-width: 640px) {
    .tool-group-header {
        padding: 12px;
    }

    .tool-group-right .severity-badge {
        display: none;
    }

    .port-results-table th,
    .port-results-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .results-summary-bar .summary-stats {
        gap: 10px;
        font-size: 12px;
    }
}

/* ================================================================
   LIVE ACTIVITY FEED — Professional real-time event log
   ================================================================ */

/* ---- Section wrapper ---- */
.live-activity-section {
    border-top: 1px solid var(--cg-border);
}

/* ---- Header bar ---- */
.live-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--cg-bg-surface);
    border-bottom: 1px solid var(--cg-border);
}

.live-dot-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cg-success);
    animation: live-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.85);
    }
}

.live-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cg-text-2);
    text-transform: uppercase;
}

.live-activity-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--cg-text-3);
}

.btn-clear-activity {
    background: transparent;
    border: 1px solid var(--cg-border-subtle);
    border-radius: var(--cg-radius-sm);
    color: var(--cg-text-3);
    font-size: 11px;
    font-family: var(--cg-font-sans);
    padding: 3px 8px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}

.btn-clear-activity:hover {
    border-color: var(--cg-danger);
    color: var(--cg-danger);
}

/* ---- Scrollable feed container ---- */
.live-activity-feed {
    min-height: 160px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--cg-bg-base);
    font-family:
        "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
    font-size: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--cg-border-subtle) transparent;
}

/* ---- Empty state ---- */
.activity-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--cg-text-3);
    font-size: 13px;
    font-family: var(--cg-font-sans);
}

/* ---- Individual event row ---- */
.activity-entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 16px;
    border-bottom: 1px solid rgba(31, 41, 55, 0.25);
    transition: background 0.15s ease;
}

.activity-entry:hover {
    background: var(--cg-bg-elevated);
}

/* ---- Time column ---- */
.activity-time {
    color: var(--cg-text-3);
    font-size: 11px;
    min-width: 64px;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

/* ---- Scanner tag ---- */
.activity-scanner {
    color: var(--cg-accent);
    font-size: 11px;
    min-width: 110px;
    flex-shrink: 0;
    font-weight: 600;
}

/* ---- Message ---- */
.activity-message {
    color: var(--cg-text-1);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Right-aligned detail ---- */
.activity-detail {
    color: var(--cg-text-3);
    font-size: 11px;
    flex-shrink: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Status indicator dot ---- */
.activity-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 1px;
    align-self: center;
}

/* Per-type indicator colors */
.activity-entry.activity-info .activity-indicator {
    background: var(--cg-info);
}
.activity-entry.activity-success .activity-indicator {
    background: var(--cg-success);
}
.activity-entry.activity-warning .activity-indicator {
    background: var(--cg-warning);
}
.activity-entry.activity-error .activity-indicator {
    background: var(--cg-danger);
}
.activity-entry.activity-system .activity-indicator {
    background: var(--cg-text-3);
}

/* Per-type message coloring */
.activity-entry.activity-success .activity-message {
    color: var(--cg-success);
}
.activity-entry.activity-warning .activity-message {
    color: var(--cg-warning);
}
.activity-entry.activity-error .activity-message {
    color: var(--cg-danger);
}
.activity-entry.activity-system .activity-message {
    color: var(--cg-text-2);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .live-activity-header {
        padding: 8px 12px;
    }

    .live-activity-feed {
        font-size: 11px;
    }

    .activity-entry {
        padding: 4px 12px;
        gap: 6px;
    }

    .activity-scanner {
        min-width: 80px;
        font-size: 10px;
    }

    .activity-time {
        min-width: 54px;
        font-size: 10px;
    }

    .activity-detail {
        display: none;
    }
}


/* ================================================================
   SCAN TERMINAL
   macOS-style terminal pane rendered inside the live scan panel.
   ASCII art alignment requires: white-space:pre, line-height:1,
   letter-spacing:0, and a true fixed-width font.
   ================================================================ */

/* ── Wrapper ────────────────────────────────────────────── */
.scan-terminal-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0a0a0f;
}

/* ── Header bar (traffic lights) ───────────────────────── */
.terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #111118;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-dots   { display: flex; gap: 6px; align-items: center; }
.dot             { width: 12px; height: 12px; border-radius: 50%; }
.dot-red         { background: #ff5f57; }
.dot-yellow      { background: #ffbd2e; }
.dot-green       { background: #28c840; }

.terminal-title  {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #4b5563;
    text-transform: uppercase;
    /* Use a system monospace so the title stays readable */
    font-family: ui-monospace, monospace;
}

.terminal-clear-btn {
    font-size: 11px;
    color: #4b5563;
    background: transparent;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.terminal-clear-btn:hover { color: #9ca3af; border-color: #6b7280; }

/* ── Scrollable terminal body ───────────────────────────── */
.scan-terminal {
    /* CRITICAL layout properties for ASCII art alignment */
    font-family: Consolas, 'Courier New', 'Lucida Console',
                 'DejaVu Sans Mono', monospace;
    font-size: 12.5px;
    line-height: 1;           /* exactly 1 — no gap between art rows */
    letter-spacing: 0;        /* exactly 0 — no gap between art columns */
    white-space: pre;         /* preserve every space, never wrap */
    overflow-x: auto;         /* scroll horizontally if banner is wide */
    overflow-y: auto;

    height: 280px;
    padding: 14px 16px;
    color: #d1fae5;           /* soft green — matches reference screenshot */
    background: #0a0a0f;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #1f2937 transparent;
}

.scan-terminal::-webkit-scrollbar       { width: 4px; height: 4px; }
.scan-terminal::-webkit-scrollbar-track { background: transparent; }
.scan-terminal::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; }

/* ── Per-line colour classes ────────────────────────────── */
.terminal-line {
    display: block;
    /* Inherit font, size, spacing, white-space from .scan-terminal */
    min-height: 1em;
    line-height: 1.5;        /* comfortable spacing for regular log lines */
}

/* ASCII art lines — bright green, ambient glow only (no tight shadow that blurs glyphs) */
.terminal-ascii {
    color: #4ade80;                    /* bright green */
    line-height: 1;                    /* flush rows for box-drawing art */
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.3),
                 0 0 20px rgba(74, 222, 128, 0.1); /* soft ambient glow */
    font-size: 13.5px;                 /* slightly larger than log text */
}

/* Subtitle line inside the banner — visual separation from art */
.terminal-ascii-subtitle {
    margin-top: 6px;                   /* gap between art letters and subtitle */
    text-shadow: none;                 /* no glow on subtitle text */
    font-size: 12.5px;                 /* match regular terminal size */
    color: #86efac;                    /* softer green for subtitle */
}

/* Standard log types */
.terminal-default { color: #d1fae5; }
.terminal-info    { color: #60a5fa; }   /* blue  */
.terminal-live    { color: #34d399; }   /* green */
.terminal-wait    { color: #fbbf24; }   /* amber */
.terminal-warn    { color: #fb923c; }   /* orange */
.terminal-error   { color: #f87171; }   /* red   */
.terminal-system  {
    color: #64748b;
    font-style: italic;
    opacity: 0.8;
}

/* ================================================================
   FINDING FLASH ANIMATION
   New finding rows animate from a green tint to transparent.
   ================================================================ */

@keyframes findingFlash {
    0% {
        background: rgba(52, 211, 153, 0.15);
    }
    100% {
        background: transparent;
    }
}

.finding-row-new {
    animation: findingFlash 1s ease-out forwards;
}

.finding-flash {
    animation: findingFlash 1s ease-out forwards;
}

/* ================================================================
   PROJECTS TAB ENHANCEMENTS
   Stats bar, search/filter, project card extras
   ================================================================ */

/* --- Projects Stats Bar --- */
.projects-stat-card {
    background: var(--cg-bg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    transition:
        border-color var(--cg-transition-base),
        box-shadow var(--cg-transition-base),
        transform var(--cg-transition-fast);
}
.projects-stat-card:hover {
    border-color: var(--cg-focus-ring);
    box-shadow: none;
    transform: translateY(-2px);
}
.projects-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--cg-radius-md);
    background: var(--cg-accent-muted);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-accent);
    margin-bottom: 0.25rem;
}
.projects-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--cg-text-1);
    font-family: var(--cg-font-mono);
    line-height: 1;
}
.projects-stat-label {
    font-size: 0.7rem;
    color: var(--cg-text-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Projects Filter Pills --- */
.projects-filter-pill {
    padding: 0.3rem 0.75rem;
    border-radius: var(--cg-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--cg-border);
    color: var(--cg-text-3);
    background: transparent;
    cursor: pointer;
    transition: all var(--cg-transition-fast);
}
.projects-filter-pill:hover {
    border-color: var(--cg-accent);
    color: var(--cg-accent);
    background: var(--cg-accent-muted);
}
.projects-filter-pill.active {
    background: var(--cg-accent-muted);
    border-color: var(--cg-accent);
    color: var(--cg-accent);
}

/* --- Project Progress Bar (inside project cards) --- */
.project-progress-track {
    width: 100%;
    height: 5px;
    background: var(--cg-bg-elevated);
    border-radius: var(--cg-radius-full);
    overflow: hidden;
}
.project-progress-fill {
    height: 100%;
    border-radius: var(--cg-radius-full);
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ================================================================
   PROJECT DETAIL — OVERVIEW TAB ENHANCEMENTS
   ================================================================ */

/* --- Overview Quick Stat Icon --- */
.ov-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--cg-radius-md);
    background: var(--cg-accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-accent);
    flex-shrink: 0;
}

/* --- Project Timeline Bar --- */
.ov-timeline-track {
    width: 100%;
    height: 8px;
    background: var(--cg-bg-elevated);
    border-radius: var(--cg-radius-full);
    overflow: visible;
}
.ov-timeline-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cg-accent-hover), var(--cg-accent));
    border-radius: var(--cg-radius-full);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov-timeline-today {
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov-timeline-today-line {
    width: 2px;
    height: 16px;
    background: var(--cg-warning);
    border-radius: 1px;
    opacity: 0.8;
}
.ov-timeline-today-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cg-warning);
    box-shadow: 0 0 6px var(--cg-warning);
}

/* --- Activity Feed --- */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    transition: background var(--cg-transition-fast);
}
.activity-item:hover {
    background: var(--cg-bg-elevated);
}
.activity-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--cg-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.activity-icon.scan   { background: rgba(59, 130, 246, 0.12); color: var(--cg-accent); }
.activity-icon.find   { background: rgba(248, 113, 113, 0.12); color: var(--cg-danger); }
.activity-icon.target { background: rgba(56, 189, 248, 0.12);  color: var(--cg-info); }
.activity-icon.team   { background: rgba(52, 211, 153, 0.12);  color: var(--cg-success); }
.activity-icon.update { background: rgba(251, 191, 36, 0.12);  color: var(--cg-warning); }
.activity-body {
    flex: 1;
    min-width: 0;
}
.activity-title {
    font-size: 0.8125rem;
    color: var(--cg-text-1);
    font-weight: 500;
}
.activity-time {
    font-size: 0.7rem;
    color: var(--cg-text-3);
    margin-top: 1px;
}

/* ================================================================
   PROJECT DETAIL — TEAM TAB ENHANCEMENTS
   ================================================================ */

/* --- Permissions Table --- */
.perm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--cg-radius-sm);
    background: rgba(52, 211, 153, 0.12);
    color: var(--cg-success);
    font-weight: 700;
    font-size: 0.8rem;
}
.perm-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--cg-radius-sm);
    background: rgba(248, 113, 113, 0.08);
    color: var(--cg-text-3);
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Team Member Card Online Indicator --- */
.team-member-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cg-success);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
    border: 1.5px solid var(--cg-bg-surface);
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

/* Count-up number animation */
@keyframes numberPop {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.07); }
    100% { transform: scale(1); opacity: 1; }
}
.stat-number-animate {
    animation: numberPop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade-in-up for new cards */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.project-card-item {
    animation: fadeInUp 0.35s ease both;
}

/* ================================================================
   PROJECTS WORKSPACE
   ================================================================ */

.tab-pane.projects-workspace:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.projects-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: 12px;
    background:
        radial-gradient(circle at 12% 0%, rgba(59, 130, 246, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
        rgba(8, 12, 18, 0.78);
}

.projects-hero-copy {
    min-width: 0;
}

.projects-kicker {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--cg-font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cg-accent);
}

.projects-hero h2 {
    margin: 0;
    color: var(--cg-text-1);
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: 0;
}

.projects-hero p {
    margin: 0.5rem 0 0;
    max-width: 48rem;
    color: var(--cg-text-3);
    font-size: 0.9rem;
}

.projects-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.55rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: #f8fafc;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 750;
    white-space: nowrap;
    transition: transform var(--cg-transition-fast), box-shadow var(--cg-transition-fast), background var(--cg-transition-fast);
}

.projects-primary-action:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.38);
}

.projects-command-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.projects-stat {
    min-height: 5rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent),
        rgba(255, 255, 255, 0.025);
}

.projects-stat-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cg-text-3);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.projects-stat strong {
    color: var(--cg-text-1);
    font-family: var(--cg-font-mono);
    font-size: 1.65rem;
    line-height: 1;
}

.projects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.projects-tab-switcher {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.projects-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    color: var(--cg-text-3);
    font-size: 0.85rem;
    font-weight: 750;
}

.projects-tab-button.active {
    color: var(--cg-text-1);
    background: rgba(255, 255, 255, 0.065);
}

.projects-tab-count {
    min-width: 1.35rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
    font-family: var(--cg-font-mono);
    font-size: 0.72rem;
    text-align: center;
}

.projects-pane {
    min-width: 0;
}

.projects-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
    gap: 1rem;
}

.project-card-item {
    position: relative;
    min-height: 18rem;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background:
        radial-gradient(circle at 14% 0%, rgba(59, 130, 246, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(12, 16, 22, 0.86);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    transition: transform var(--cg-transition-fast), border-color var(--cg-transition-fast), box-shadow var(--cg-transition-fast);
}

.project-card-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(96, 165, 250, 0.12), transparent 24%),
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: auto, 100% 34px;
    opacity: 0.55;
}

.project-card-item:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 38px rgba(59, 130, 246, 0.08);
}

.project-card-head,
.project-card-meta,
.project-metric-grid,
.project-risk-panel,
.project-card-footer {
    position: relative;
    z-index: 1;
}

.project-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.project-avatar {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.11);
    color: #bfdbfe;
    font-family: var(--cg-font-mono);
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: inset 0 0 18px rgba(96, 165, 250, 0.06);
}

.project-title-block {
    min-width: 0;
    flex: 1;
}

.project-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.project-title-row h3 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    color: var(--cg-text-1);
    font-size: 1rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-title-block p {
    display: -webkit-box;
    margin: 0.35rem 0 0;
    overflow: hidden;
    color: var(--cg-text-3);
    font-size: 0.78rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-status-pill,
.project-role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.15rem 0.5rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.project-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-height: 2rem;
    margin-top: 0.95rem;
    color: var(--cg-text-3);
    font-size: 0.75rem;
}

.project-date-range,
.project-date-range span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.project-date-range svg {
    width: 0.8rem;
    height: 0.8rem;
    color: #93c5fd;
}

.project-date-arrow,
.project-date-muted {
    color: var(--cg-text-4);
}

.project-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.95rem;
}

.project-metric {
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.026);
}

.project-metric-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--cg-text-4);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-metric strong {
    color: var(--cg-text-1);
    font-family: var(--cg-font-mono);
    font-size: 1.05rem;
}

.project-risk-panel {
    margin-top: 0.95rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.16);
}

.project-risk-topline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    color: var(--cg-text-3);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-risk-level {
    color: var(--cg-text-2);
}

.project-progress-track {
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.project-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1), background var(--cg-transition-fast);
}

.project-risk-score-value {
    display: inline-flex;
    align-items: center;
    margin-top: 0.65rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid;
    border-radius: 7px;
    font-family: var(--cg-font-mono);
    font-size: 0.76rem;
    font-weight: 900;
}

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.95rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.project-created {
    color: var(--cg-text-4);
    font-size: 0.74rem;
}

.project-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* cg-ignore */
}

.project-action,
.project-actions .cyber-btn-ghost,
.project-actions .btn-clear-history {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem; /* cg-ignore */
    min-height: 2.25rem; /* cg-ignore */
    padding: 0.45rem 0.8rem; /* cg-ignore */
    border: 1px solid rgba(255, 255, 255, 0.08); /* cg-ignore */
    border-radius: 8px; /* cg-ignore */
    background: rgba(255, 255, 255, 0.02); /* cg-ignore */
    color: var(--cg-text-2);
    font-size: 0.78rem; /* cg-ignore */
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: 
        background var(--cg-transition-fast), 
        color var(--cg-transition-fast), 
        border-color var(--cg-transition-fast),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-action:active,
.project-actions .cyber-btn-ghost:active,
.project-actions .btn-clear-history:active {
    transform: scale(0.96);
}

/* Primary "Open" Button styling */
.project-action.primary {
    border-color: rgba(59, 130, 246, 0.3); /* cg-ignore */
    color: #e0f2fe; /* cg-ignore */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(29, 78, 216, 0.05)); /* cg-ignore */
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* cg-ignore */
}

.project-action.primary:hover {
    border-color: rgba(96, 165, 250, 0.6); /* cg-ignore */
    color: #ffffff; /* cg-ignore */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(29, 78, 216, 0.14)); /* cg-ignore */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.12), /* cg-ignore */
        0 0 16px rgba(59, 130, 246, 0.3); /* cg-ignore */
    transform: translateY(-1px);
}

/* Micro-animation for Open icon */
.project-action.primary svg {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-action.primary:hover svg {
    transform: translate(2px, -2px);
}

/* Edit Button styling */
.project-actions .cyber-btn-ghost {
    color: var(--cg-text-2);
    background: rgba(255, 255, 255, 0.02); /* cg-ignore */
    border: 1px solid rgba(255, 255, 255, 0.08); /* cg-ignore */
}

.project-actions .cyber-btn-ghost:hover {
    border-color: rgba(56, 189, 248, 0.45); /* cg-ignore */
    color: #e0f2fe; /* cg-ignore */
    background: rgba(56, 189, 248, 0.08); /* cg-ignore */
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.2); /* cg-ignore */
    transform: translateY(-1px);
}

/* Micro-animation for Edit icon */
.project-actions .cyber-btn-ghost svg {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-actions .cyber-btn-ghost:hover svg {
    transform: rotate(15deg) scale(1.05);
}

/* Delete Button styling */
.project-actions .btn-clear-history {
    color: var(--cg-text-2);
    background: rgba(255, 255, 255, 0.02); /* cg-ignore */
    border: 1px solid rgba(255, 255, 255, 0.08); /* cg-ignore */
}

.project-actions .btn-clear-history:hover {
    border-color: rgba(248, 113, 113, 0.45); /* cg-ignore */
    color: #fee2e2; /* cg-ignore */
    background: rgba(248, 113, 113, 0.08); /* cg-ignore */
    box-shadow: 0 0 14px rgba(248, 113, 113, 0.2); /* cg-ignore */
    transform: translateY(-1px);
}

/* Micro-animation for Delete icon */
.project-actions .btn-clear-history svg {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-actions .btn-clear-history:hover svg {
    transform: scale(1.1);
}

@media (max-width: 900px) {
    .projects-hero {
        flex-direction: column;
    }

    .projects-command-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .projects-command-strip,
    .project-metric-grid {
        grid-template-columns: 1fr;
    }

    .projects-toolbar,
    .project-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .projects-tab-switcher,
    .projects-primary-action,
    .project-action.primary {
        width: 100%;
    }
}

/* ================================================================
   JWT DEBUGGER & EDITOR STYLES
   ================================================================ */

.jwt-token-display {
    width: 100%;
    min-height: 80px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    color: var(--cg-text-1);
    padding: var(--cg-space-4);
    font-family: var(--cg-font-mono);
    font-size: 14px;
    box-sizing: border-box;
    word-break: break-all;
    white-space: pre-wrap;
    overflow-y: auto;
    outline: none;
    transition: border-color var(--cg-transition-fast);
}

.jwt-token-display:focus {
    border-color: var(--cg-accent);
}

.jwt-token-display:empty:before {
    content: attr(placeholder);
    color: var(--cg-text-3);
    font-style: normal;
}

/* JWT Parts Token Colors */
.jwt-part-header {
    color: var(--cg-danger);
    transition: all var(--cg-transition-fast);
    padding: 2px 0;
}

.jwt-part-payload {
    color: var(--cg-accent);
    transition: all var(--cg-transition-fast);
    padding: 2px 0;
}

.jwt-part-signature {
    color: var(--cg-info);
    transition: all var(--cg-transition-fast);
    padding: 2px 0;
}

.jwt-part-dot {
    color: var(--cg-text-1);
}

/* Active highlight styling */
.jwt-highlight-active {
    background-color: rgba(251, 191, 36, 0.15) !important;
    box-shadow: 0 0 0 2px var(--cg-warning);
    border-radius: 4px;
    color: #ffffff !important;
}

/* Custom Toggle Switch for secret encoding */
.switch .slider {
    background-color: var(--cg-border-subtle);
    border-radius: 9999px;
    transition: var(--cg-transition-fast);
}

.switch .slider:before {
    background-color: #ffffff;
    border-radius: 50%;
    transition: var(--cg-transition-fast);
}
    height: 16px;
    background: var(--cg-warning);
    border-radius: 1px;
    opacity: 0.8;
}
.ov-timeline-today-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cg-warning);
    box-shadow: 0 0 6px var(--cg-warning);
}

/* --- Activity Feed --- */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    transition: background var(--cg-transition-fast);
}
.activity-item:hover {
    background: var(--cg-bg-elevated);
}
.activity-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--cg-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.activity-icon.scan   { background: rgba(59, 130, 246, 0.12); color: var(--cg-accent); }
.activity-icon.find   { background: rgba(248, 113, 113, 0.12); color: var(--cg-danger); }
.activity-icon.target { background: rgba(56, 189, 248, 0.12);  color: var(--cg-info); }
.activity-icon.team   { background: rgba(52, 211, 153, 0.12);  color: var(--cg-success); }
.activity-icon.update { background: rgba(251, 191, 36, 0.12);  color: var(--cg-warning); }
.activity-body {
    flex: 1;
    min-width: 0;
}
.activity-title {
    font-size: 0.8125rem;
    color: var(--cg-text-1);
    font-weight: 500;
}
.activity-time {
    font-size: 0.7rem;
    color: var(--cg-text-3);
    margin-top: 1px;
}

/* ================================================================
   PROJECT DETAIL — TEAM TAB ENHANCEMENTS
   ================================================================ */

/* --- Permissions Table --- */
.perm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--cg-radius-sm);
    background: rgba(52, 211, 153, 0.12);
    color: var(--cg-success);
    font-weight: 700;
    font-size: 0.8rem;
}
.perm-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--cg-radius-sm);
    background: rgba(248, 113, 113, 0.08);
    color: var(--cg-text-3);
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Team Member Card Online Indicator --- */
.team-member-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cg-success);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
    border: 1.5px solid var(--cg-bg-surface);
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

/* Count-up number animation */
@keyframes numberPop {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.07); }
    100% { transform: scale(1); opacity: 1; }
}
.stat-number-animate {
    animation: numberPop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade-in-up for new cards */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.project-card-item {
    animation: fadeInUp 0.35s ease both;
}

/* ================================================================
   JWT DEBUGGER & EDITOR STYLES
   ================================================================ */

.jwt-token-display {
    width: 100%;
    min-height: 80px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    color: var(--cg-text-1);
    padding: var(--cg-space-4);
    font-family: var(--cg-font-mono);
    font-size: 14px;
    box-sizing: border-box;
    word-break: break-all;
    white-space: pre-wrap;
    overflow-y: auto;
    outline: none;
    transition: border-color var(--cg-transition-fast);
}

.jwt-token-display:focus {
    border-color: var(--cg-accent);
}

.jwt-token-display:empty:before {
    content: attr(placeholder);
    color: var(--cg-text-3);
    font-style: normal;
}

/* JWT Parts Token Colors */
.jwt-part-header {
    color: var(--cg-danger);
    transition: all var(--cg-transition-fast);
    padding: 2px 0;
}

.jwt-part-payload {
    color: var(--cg-accent);
    transition: all var(--cg-transition-fast);
    padding: 2px 0;
}

.jwt-part-signature {
    color: var(--cg-info);
    transition: all var(--cg-transition-fast);
    padding: 2px 0;
}

.jwt-part-dot {
    color: var(--cg-text-1);
}

/* Active highlight styling */
.jwt-highlight-active {
    background-color: rgba(251, 191, 36, 0.15) !important;
    box-shadow: 0 0 0 2px var(--cg-warning);
    border-radius: 4px;
    color: #ffffff !important;
}

/* Custom Toggle Switch for secret encoding */
.switch .slider {
    background-color: var(--cg-border-subtle);
    border-radius: 9999px;
    transition: var(--cg-transition-fast);
}

.switch .slider:before {
    background-color: #ffffff;
    border-radius: 50%;
    transition: var(--cg-transition-fast);
}

.switch input:checked + .slider {
    background-color: var(--cg-accent);
}

.switch input:checked + .slider:before {
    transform: translateX(16px); /* Modified to align with the toggle dimensions */
}

/* ================================================================
   STANDALONE JWT DEBUGGER ADDITIONAL STYLES
   ================================================================ */

.jwt-pill-active {
    background-color: var(--cg-accent-muted) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--cg-accent) !important;
}

.jwt-token-display span {
    transition: all var(--cg-transition-fast);
}

/* Precise color coding inspired by jwt.io */
.jwt-color-header {
    color: #ffa657 !important; /* Orange */
}

.jwt-color-payload {
    color: #3b82f6 !important; /* Purple */
}

.jwt-color-signature {
    color: #22d3ee !important; /* Cyan */
}

.jwt-color-dot {
    color: var(--cg-text-1) !important;
}

/* Claims table styling */
.claims-table {
    width: 100%;
    border-collapse: collapse;
}

.claims-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--cg-text-3);
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--cg-border);
}

.claims-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-family: var(--cg-font-sans);
}

.claims-key {
    font-family: var(--cg-font-mono);
    color: var(--cg-accent);
    font-weight: 600;
}

.claims-val {
    font-family: var(--cg-font-mono);
    color: var(--cg-text-1);
    word-break: break-all;
}

.claims-desc {
    color: var(--cg-text-2);
}

/* Custom Dropdown Animation & Glow States */
#jwt-dropdown-options.show {
    display: flex !important;
    transform: scaleY(1) !important;
    opacity: 1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

.jwt-dropdown-caret-rotate {
    transform: rotate(180deg);
    color: var(--cg-accent) !important;
}

/* ================================================================
   AI ASSISTANT — Settings, Wizards & Rich Content
   Layout lives in Style.css; tokens only here.
   ================================================================ */

.ai-settings-panel {
    flex-shrink: 0;
    padding: var(--cg-space-4) var(--cg-space-6);
    background: var(--cg-bg-base);
    border-bottom: 1px solid var(--cg-border);
    transition: all var(--cg-transition-base);
}

.ai-settings-panel.hidden {
    display: none !important;
}

.ai-settings-title {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.ai-settings-label {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: var(--cg-text-3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.ai-select,
.ai-custom-input,
.ai-custom-textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--cg-bg-elevated);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    color: var(--cg-text-1);
    font-size: 0.8rem;
    transition: border-color var(--cg-transition-fast), background var(--cg-transition-fast);
}

.ai-select:focus,
.ai-custom-input:focus,
.ai-custom-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.22);
    background: var(--cg-bg-surface);
}

.ai-custom-textarea {
    resize: vertical;
    min-height: 48px;
}

.ai-code-block {
    margin: 12px 0;
    overflow: hidden;
    background: var(--cg-bg-base);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-sm);
}

.ai-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cg-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--cg-font-sans);
}

.ai-code-copy {
    background: none;
    border: none;
    color: var(--cg-text-3);
    cursor: pointer;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
    font-weight: 700;
}

.ai-code-copy:hover {
    color: #ffffff;
}

.ai-code-pre {
    padding: 12px 14px;
    margin: 0;
    overflow-x: auto;
    font-size: 0.8rem;
    color: #cbd5e1;
    line-height: 1.5;
    font-family: var(--cg-font-mono) !important;
}

/* Code highlight syntax elements */
.ai-code-keyword { color: #f472b6; font-weight: 600; }
.ai-code-string { color: #34d399; }
.ai-code-number { color: #fbbf24; }
.ai-code-comment { color: #64748b; font-style: italic; }
.ai-code-function { color: #60a5fa; }
.ai-code-operator { color: #f87171; }

.ai-wizard-card {
    margin: 10px 0;
    padding: var(--cg-space-4);
    background: var(--cg-bg-surface);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-sm);
}

.ai-wizard-header {
    display: flex;
    align-items: center;
    gap: var(--cg-space-2);
    margin-bottom: var(--cg-space-2);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cg-text-1);
}

.ai-wizard-body {
    margin-bottom: var(--cg-space-3);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--cg-text-2);
}

.ai-wizard-options {
    display: flex;
    flex-direction: column;
    gap: var(--cg-space-2);
}

.ai-wizard-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--cg-bg-elevated);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    color: var(--cg-text-1);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--cg-transition-fast), border-color var(--cg-transition-fast);
}

.ai-wizard-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}

.ai-wizard-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--cg-radius-sm);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-autopilot-toast {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--cg-space-2);
    padding: 8px 16px;
    background: var(--cg-bg-elevated);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    color: var(--cg-text-1);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: var(--cg-shadow-lg);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all var(--cg-transition-base);
}

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

.ai-autopilot-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--cg-radius-full);
    background: var(--cg-info);
    animation: autopilot-pulse 1.2s ease-in-out infinite;
}

@keyframes autopilot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* ─── AI rich-content end — layout in Style.css ─── */

/* ─── PREMIUM CYBERPUNK GLASSMORPHIC TABLES ──────────────────────── */
.cyber-body .cyber-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 14px 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    background: rgba(13, 17, 33, 0.45) !important;
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 1px rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cyber-body .cyber-markdown-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.cyber-body .cyber-markdown-table th {
    background: rgba(22, 28, 54, 0.75) !important;
    color: #3b82f6 !important; /* Premium glowing light purple */
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.45) !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    box-shadow: inset 0 -1px 0 rgba(59, 130, 246, 0.1);
}

.cyber-body .cyber-markdown-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    vertical-align: middle;
    line-height: 1.5;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cyber-body .cyber-markdown-table tbody tr:nth-child(even) {
    background: rgba(59, 130, 246, 0.02) !important;
}

.cyber-body .cyber-markdown-table tbody tr:hover td {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #ffffff !important;
}

.cyber-body .cyber-markdown-table tbody tr:last-child td {
    border-bottom: none !important;
}





/* =================================================================
   RESPONSIVE DESIGN FOUNDATION & OVERFLOW FIXES
   ================================================================= */

/* Ensure box-sizing is consistent everywhere */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Make images responsive by default */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ── OVERFLOW & LAYOUT SCALING FIXES ──────────────────────── */

.content-area,
.tab-content,
.panel-content,
.tab-pane {
  overflow-x: hidden;
  min-width: 0;
}

/* Code/monospace text blocks scroll horizontally rather than overflow */
.code-block,
pre,
code,
.jwt-encoded-textarea,
.jwt-editor-textarea {
  overflow-x: auto !important;
  white-space: pre !important;
  word-break: normal !important;
}

/* Text ellipsis for long URLs/targets */
.url-text,
.target-url,
.finding-title,
.project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Button & interactive touch target enhancement for mobile devices */
@media (max-width: 768px) {
  .cyber-btn-primary,
  .cyber-btn-ghost,
  .cyber-btn-danger,
  .cyber-btn-red,
  .cyber-btn-glow,
  .btn-logout,
  .btn-cancel,
  .settings-nav-item,
  .cyber-nav-item {
    min-height: 44px;         /* Touch target compliance */
  }
}

/* Button groups wrap naturally */
.button-group, .flex-gap-2, .flex-gap-3 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── RESPONSIVE UTILITY HELPER CLASSES ─────────────────────── */

@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .show-mobile-only { display: block !important; }
  .full-width-mobile {
    width: 100% !important;
    max-width: none !important;
  }
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .text-left-mobile { text-align: left !important; }
  .text-center-mobile { text-align: center !important; }
  
  /* Make all primary buttons full width on small phones */
  .btn-full-mobile {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

@media (max-width: 1280px) {
  .hide-laptop { display: none !important; }
}

@media (min-width: 641px) {
  .show-mobile-only { display: none !important; }
}


/* ── SIDEBAR VERTICAL SCROLLBAR STYLING ─────────────────────── */

.cyber-sidebar::-webkit-scrollbar,
#sidebar::-webkit-scrollbar {
  width: 4px;
}

.cyber-sidebar::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.cyber-sidebar::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.cyber-sidebar::-webkit-scrollbar-thumb:hover,
#sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── SIDEBAR VIEWPORT HEIGHT FIXES ───────────────────────────── */

/* For 15.6-inch laptops at 768px height */
@media (max-height: 800px) {
  .cyber-sidebar {
    overflow-y: auto;   /* Force scroll */
  }
  
  /* Reduce spacing between nav items to fit more */
  .cyber-nav-item {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 13px !important;
  }
  
  /* Reduce logo area height */
  .cyber-sidebar-header {
    padding: 10px 8px !important;
  }
  
  /* Reduce separators and section margins */
  .cyber-divider {
    margin-bottom: 4px !important;
  }
  
  .cyber-sidebar nav .space-y-1 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  
  .cyber-sidebar nav .space-y-1 .px-3 {
    margin-bottom: 2px !important;
  }
  
  .cyber-sidebar nav .space-y-1 .px-3 span {
    font-size: 10px !important;
  }
  
  /* Compact the System & Scans metrics */
  #sidebar-system-health {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
    margin-top: 8px !important;
  }
  
  #sidebar-system-health .space-y-3 {
    margin-top: 4px !important;
  }
  
  #sidebar-system-health .space-y-3 > div {
    margin-bottom: 6px !important;
  }
  
  /* Compact Current Plan card */
  #subscription-card-container {
    margin-top: 8px !important;
  }
  
  #subscription-card {
    padding: 8px 12px !important;
  }
  
  /* Hide plan feature list on short screens */
  #subscription-card ul {
    display: none !important;
  }
  
  /* Add view details hint */
  #subscription-card::after {
    content: 'View Details →';
    display: block;
    font-size: 10px;
    color: var(--cg-accent);
    margin-top: 4px;
    cursor: pointer;
    text-align: left;
  }
}

/* For very short viewports (< 700px height) */
@media (max-height: 700px) {
  .cyber-nav-item {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 12px !important;
  }
  
  /* Icon sizes */
  .cyber-nav-item svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Compact the System & Scans metrics further */
  #sidebar-system-health {
    display: none !important; /* Hide health meters to prioritize nav on tiny viewports */
  }
}

/* Interactivity & hover states for the subscription card */
#subscription-card {
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#subscription-card:hover {
  background: rgba(30, 41, 59, 0.75) !important;
  border-color: var(--cg-accent) !important;
  transform: translateY(-1px);
}

#subscription-card:active {
  transform: translateY(0);
}

/* ================================================================
   STUNNING MODAL ANIMATION SYSTEM
   ================================================================ */

@keyframes modalBackdropFadeIn {
    from { opacity: 0; backdrop-filter: blur(0px); } /* cg-ignore */
    to { opacity: 1; backdrop-filter: blur(4px); } /* cg-ignore */
}

@keyframes modalContentSlideIn {
    from { transform: scale(0.94) translateY(24px); opacity: 0; } /* cg-ignore */
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Apply fade-in to modal backdrop overlays when they are open */
#create-project-modal:not(.hidden),
#edit-project-modal:not(.hidden),
#invite-collaborator-modal:not(.hidden),
#delete-project-modal:not(.hidden) {
    animation: modalBackdropFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Apply slide-up and scale-up to actual modal cards inside */
#create-project-modal:not(.hidden) .cyber-modal,
#edit-project-modal:not(.hidden) .cyber-modal,
#invite-collaborator-modal:not(.hidden) .cyber-modal,
#delete-project-modal:not(.hidden) .cyber-modal {
    animation: modalContentSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}