/* ----- CSS Variables ----- */
:root {
    --bg-color: #040914;
    /* Deep obsidian navy */
    --text-primary: #f8fafc;
    /* Crisp off-white */
    --text-secondary: #94a3b8;
    /* Cool steel-blue slate */
    --accent-blue: #cca43b;
    /* Premium primary gold */
    --accent-purple: #92753b;
    /* Metallic bronze/secondary gold */
    --glass-bg: rgba(10, 20, 42, 0.55);
    /* Deep navy glass backdrop */
    --glass-border: rgba(204, 164, 59, 0.15);
    /* Gold-tinted border lines */
    --glow-shadow: 0 0 25px rgba(204, 164, 59, 0.2);
    /* Brushed gold glow */
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
}

select option {
    background-color: #081026 !important;
    color: #f8fafc !important;
}

#vanta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

.ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow-y: auto;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 2rem;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.8) 0%, rgba(3, 7, 18, 0) 100%);
}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.brand:hover {
    transform: scale(1.02);
}

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

/* Animated Tech Icon */
.logo-icon-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer-ring {
    font-size: 2.2rem;
    color: var(--accent-blue);
    opacity: 0.2;
    position: absolute;
}

.inner-icon {
    font-size: 1.3rem;
    color: var(--accent-purple);
    filter: drop-shadow(0 0 8px var(--accent-purple));
    z-index: 2;
}

/* Typography & Tagline */
.logo-typography {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.logo-text .dot {
    color: var(--accent-blue);
    animation: blink 2s infinite;
    display: inline-block;
}

.logo-text .io {
    color: var(--text-primary);
    font-weight: 300;
    opacity: 0.9;
}

.logo-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-top: 3px;
    opacity: 0.85;
    text-shadow: 0 0 5px var(--accent-blue);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        text-shadow: 0 0 15px var(--accent-blue);
        transform: scale(1.2);
    }
}

nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--text-primary);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.btn-login {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid var(--accent-blue);
    color: var(--text-primary);
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.1);
}

.btn-login:hover {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
}

/* --- Redesigned compact horizontal navigation panels (Option C-3) --- */
#main-nav {
    gap: 0.8rem;
}

.btn-nav-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-nav-panel i {
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.btn-nav-panel:hover {
    transform: translateY(-2px);
}

.btn-nav-panel:hover i {
    transform: scale(1.1);
}

/* Home button (Gray/White neon) */
.btn-nav-panel.nav-btn-home:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

/* Settings, Handbook, Command Center (Purple neon) */
.btn-nav-panel.nav-btn-settings:hover,
.btn-nav-panel.nav-btn-handbook:hover,
.btn-nav-panel.nav-btn-dashboard:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.35);
}

/* Help, Login, Logout (Blue neon) */
.btn-nav-panel.nav-btn-help:hover,
.btn-nav-panel.nav-btn-login:hover,
.btn-nav-panel.nav-btn-logout:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.35);
}

/* Strategic Sector (Gold/Yellow neon) */
.btn-nav-panel.nav-btn-ssi:hover {
    border-color: var(--ssi-gold, #eab308);
    color: var(--ssi-gold, #eab308);
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.35);
}

/* Shaheen X (Red neon) */
.btn-nav-panel.nav-btn-osint:hover {
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.35);
}

.search-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
}

#search-portal {
    min-height: auto;
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.search-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #fff, #9ca3af);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.search-header p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 0.5rem 1rem;
    width: 100%;
    max-width: 700px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.search-box:focus-within {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: var(--glow-shadow), 0 10px 30px rgba(0, 0, 0, 0.5);
    background: rgba(15, 23, 42, 0.6);
}

.search-icon {
    color: var(--accent-purple);
    font-size: 1.5rem;
    margin: 0 1rem;
    filter: drop-shadow(0 0 8px var(--accent-purple));
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Space Grotesk', sans-serif;
    padding: 1rem 0;
}

.search-box input[type="search"]::-webkit-search-decoration,
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-results-button,
.search-box input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.search-box input::placeholder {
    color: rgba(156, 163, 175, 0.5);
}

.btn-search {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-search:hover {
    color: var(--accent-blue);
    filter: drop-shadow(0 0 8px var(--accent-blue));
}

.quick-tags {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.quick-tags>span {
    color: var(--text-secondary);
}

.tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.tag:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.4);
    color: var(--accent-blue);
}

.tag i.fa-fire {
    color: #ef4444;
}

/* Search Results Container */
.results-container {
    margin-top: 4rem;
    width: 100%;
    max-width: 800px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: left;
    transition: all 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}

.results-container.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.cve-card h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cve-card .cvss-score {
    font-size: 1rem;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 700;
}

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

.cvss-high {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
    border: 1px solid #f97316;
}

.cvss-medium {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
    border: 1px solid #eab308;
}

.cvss-low {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid #22c55e;
}

.cvss-na {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border: 1px solid #9ca3af;
}

.cve-card .published-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cve-card .summary {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.error-message {
    color: #ef4444;
    text-align: center;
    font-size: 1rem;
    padding: 1rem;
}

/* --- Actionable Intelligence UI --- */
.actionable-intel {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.actionable-intel h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #eab308;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.intel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

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

.intel-section h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.cwe-text {
    font-size: 1.1rem;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}

.affected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.affected-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.intel-action-card {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(14, 165, 233, 0.3);
    padding: 1.5rem;
    border-radius: 12px;
}

.intel-action-card h4 {
    color: var(--accent-blue);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.intel-action-card p {
    color: var(--text-primary);
    line-height: 1.5;
}

.bottom-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 2rem;
    background: linear-gradient(0deg, rgba(3, 7, 18, 0.9) 0%, rgba(3, 7, 18, 0) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.stat .label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat .value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}

/* --- Actor Graph UI --- */
#cy {
    width: 100%;
    height: 400px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-top: 1rem;
}

.actor-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.glow {
    color: var(--accent-blue);
    text-shadow: 0 0 10px var(--accent-blue);
}

.orange {
    color: #f97316;
    text-shadow: 0 0 10px #f97316;
}

.green {
    color: #22c55e;
    text-shadow: 0 0 10px #22c55e;
}

/* --- Comprehensive Report Template Styles --- */
.comprehensive-report {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.report-section {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.report-section:hover {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(14, 165, 233, 0.3);
}

.report-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent-blue);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
    padding-bottom: 0.5rem;
}

.report-section ul {
    list-style-type: none;
    padding-left: 0.5rem;
}

.report-section ul li {
    margin-bottom: 0.8rem;
    line-height: 1.5;
    position: relative;
    padding-left: 1.5rem;
}

.report-section ul li::before {
    content: '►';
    position: absolute;
    left: 0;
    color: var(--accent-purple);
    font-size: 0.8rem;
    top: 3px;
}

.report-section p {
    line-height: 1.6;
    color: var(--text-primary);
}

/* BLUF Grid */
.bluf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.bluf-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
    line-height: 1.5;
}

.highlight-critical {
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Compliance Gaps */
.gap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.gap-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gap-item strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #f97316;
    /* Orange for gaps */
}

/* Action Cards */
.action-card {
    padding: 1.2rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.primary-fix {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.primary-fix strong {
    color: #22c55e;
}

.comp-control {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #eab308;
}

.comp-control strong {
    color: #eab308;
}

.appendix {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* --- Marketing & Branding Section --- */
.marketing-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 700px;
    animation: fadeIn 1s ease-out;
    text-align: left;
}

.marketing-header {
    margin-bottom: 0.6rem;
}

.marketing-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.marketing-header h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-blue), transparent);
    opacity: 0.3;
}

.marketing-header p {
    color: var(--text-secondary);
    font-size: 0.68rem;
    margin-bottom: 0.6rem;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.value-card {
    position: relative;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.8rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-left: 2px solid transparent;
}

.value-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-blue);
    background: rgba(14, 165, 233, 0.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.card-icon {
    font-size: 1rem;
    color: var(--accent-blue);
    margin-bottom: 0.2rem;
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.3));
    opacity: 0.8;
}

.value-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
}

.value-card p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--accent-blue);
    font-size: 8px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.value-card:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.3);
    border-left-color: var(--accent-blue);
    transform: translateX(5px);
}

.value-card:hover .card-badge {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.why-different {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.diff-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diff-tag i {
    font-size: 0.85rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Analytics Dashboard Styles --- */
.analytics-container {
    margin-top: 4rem;
    width: 100%;
    max-width: 1000px;
    animation: fadeIn 0.8s ease-out;
}

.analytics-header {
    text-align: center;
    margin-bottom: 3rem;
}

.analytics-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.chart-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.chart-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    text-align: center;
    font-size: 1.1rem;
}

.tour-highlight {
    position: relative;
    z-index: 10001 !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    border-width: 2px !important;
    pointer-events: auto !important;
}

/* Hide marketing when results are shown */
.results-container:not(.hidden)~.marketing-section {
    display: none;
}

@media (max-width: 768px) {
    .marketing-section {
        margin-top: 1rem;
    }

    .why-different {
        flex-direction: column;
        gap: 0.5rem;
        border-radius: 12px;
    }
}

/* --- Tiny Footer Disclaimer --- */
.disclaimer-footer {
    width: 100%;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: auto;
    line-height: 1.6;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.disclaimer-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.disclaimer-footer a:hover {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    opacity: 1;
}

/* --- Distro Switcher Styling --- */
.distro-switcher {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--glass-border);
}

.btn-distro {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-distro:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-distro.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px var(--accent-blue);
}

/* --- Intel Advisory Side Tabs (Premium Redesign) --- */
.side-tabs-left,
.side-tabs-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 1000;
    /* Ensure high z-index */
    max-height: 95vh;
    justify-content: flex-start;
    /* Better for scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    scrollbar-width: none;
    /* Hide scrollbar for clean look */
}

.side-tabs-left::-webkit-scrollbar,
.side-tabs-right::-webkit-scrollbar {
    display: none;
}

/* Ensure centering if items don't overflow */
@media (min-height: 750px) {

    .side-tabs-left,
    .side-tabs-right {
        justify-content: center;
    }
}

.side-tabs-left {
    left: 0;
}

.side-tabs-right {
    right: 0;
}

.side-tab-item {
    position: relative;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    color: var(--text-secondary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    width: 60px;
    height: 60px;
    white-space: nowrap;
}

.side-tabs-left .side-tab-item {
    border-left: none;
    border-radius: 0 30px 30px 0;
    margin-left: -5px;
    border-right: 3px solid var(--tab-accent);
}

.side-tabs-right .side-tab-item {
    border-right: none;
    border-radius: 30px 0 0 30px;
    margin-right: -5px;
    border-left: 3px solid var(--tab-accent);
    flex-direction: row-reverse;
}

.side-tabs-left .side-tab-item:hover {
    width: 220px;
    transform: translateX(0);
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 20px 0 50px var(--tab-glow);
}

.side-tabs-right .side-tab-item:hover {
    width: 260px;
    transform: translateX(0);
    background: rgba(15, 23, 42, 0.9);
    box-shadow: -20px 0 50px var(--tab-glow);
}

/* Glow & Accent Colors for each Brand */

.tab-pro {
    --tab-accent: var(--accent-blue);
    --tab-glow: rgba(14, 165, 233, 0.5);
}

.tab-senior {
    --tab-accent: #10b981;
    --tab-glow: rgba(16, 185, 129, 0.5);
}

.tab-kids {
    --tab-accent: #f59e0b;
    --tab-glow: rgba(245, 158, 11, 0.5);
}

.tab-whatsapp {
    --tab-accent: #25d366;
    --tab-glow: rgba(37, 211, 102, 0.5);
}

.tab-microsoft {
    --tab-accent: #00a4ef;
    --tab-glow: rgba(0, 164, 239, 0.5);
}

.tab-apple {
    --tab-accent: #ffffff;
    --tab-glow: rgba(255, 255, 255, 0.4);
}

.tab-linux {
    --tab-accent: #facc15;
    --tab-glow: rgba(250, 204, 21, 0.5);
}

.tab-ot-iot {
    --tab-accent: #ef4444;
    --tab-glow: rgba(239, 68, 68, 0.5);
}

.tab-unified {
    --tab-accent: #10b981;
    --tab-glow: rgba(16, 185, 129, 0.5);
}

.tab-otx {
    --tab-accent: #f59e0b;
    --tab-glow: rgba(245, 158, 11, 0.5);
}

.tab-abuseipdb {
    --tab-accent: #ef4444;
    --tab-glow: rgba(239, 68, 68, 0.5);
}

.tab-saved {
    --tab-accent: #8b5cf6;
    --tab-glow: rgba(139, 92, 246, 0.5);
}

.tab-cisco {
    --tab-accent: #1BA0D7;
    --tab-glow: rgba(27, 160, 215, 0.5);
}

.tab-fortinet {
    --tab-accent: #EE3124;
    --tab-glow: rgba(238, 49, 36, 0.5);
}

.tab-vmware {
    --tab-accent: #607078;
    --tab-glow: rgba(96, 112, 120, 0.5);
}

.tab-juniper {
    --tab-accent: #84B135;
    --tab-glow: rgba(132, 177, 53, 0.5);
}

.tab-adobe {
    --tab-accent: #FF0000;
    --tab-glow: rgba(255, 0, 0, 0.5);
}

.tab-paloalto {
    --tab-accent: #FA582D;
    --tab-glow: rgba(250, 88, 45, 0.5);
}

.tab-f5 {
    --tab-accent: #E4002B;
    --tab-glow: rgba(228, 0, 43, 0.5);
}

.tab-sap {
    --tab-accent: #008FD3;
    --tab-glow: rgba(0, 143, 211, 0.5);
}

.tab-google {
    --tab-accent: #4285F4;
    --tab-glow: rgba(66, 133, 244, 0.5);
}

.tab-oracle {
    --tab-accent: #F80000;
    --tab-glow: rgba(248, 0, 0, 0.5);
}

.tab-universal-cyber-academy {
    --tab-accent: #f59e0b;
    --tab-glow: rgba(245, 158, 11, 0.5);
}

/* Animated Border-Pulse Effect on Hover */
.side-tab-item::after {
    content: '';
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--tab-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.side-tabs-left .side-tab-item::after {
    left: 0;
    box-shadow: 2px 0 10px var(--tab-accent);
}

.side-tabs-right .side-tab-item::after {
    right: 0;
    box-shadow: -2px 0 10px var(--tab-accent);
}

.side-tab-item:hover::after {
    opacity: 1;
}

/* Icon & Text Styling */
.tab-icon-top,
.tab-icon-bottom {
    font-size: 1.4rem;
    min-width: 24px;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
}

.side-tab-item:hover .tab-icon-top {
    color: var(--tab-accent);
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 0 15px var(--tab-accent));
}

.tab-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease;
    flex: 1;
}

.side-tabs-right .tab-content-wrapper {
    transform: translateX(20px);
    text-align: right;
}

.side-tab-item:hover .tab-content-wrapper {
    opacity: 1;
    transform: translateX(0);
}

.tab-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-primary);
    transition: all 0.3s ease;
    user-select: none;
}

.tab-tagline {
    font-size: 0.7rem;
    color: var(--tab-accent);
    opacity: 0.8;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.side-tab-item:hover .tab-text {
    color: var(--tab-accent);
    text-shadow: 0 0 15px var(--tab-glow);
}

/* Status Indicators (Live Dots) */
.side-tab-item::before {
    content: '';
    position: absolute;
    top: 15px;
    width: 8px;
    height: 8px;
    background: var(--tab-accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--tab-accent);
    animation: livePulse 1.5s infinite;
}

.side-tabs-left .side-tab-item::before {
    right: 8px;
}

.side-tabs-right .side-tab-item::before {
    left: 12px;
}

@keyframes livePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Central Dashboards Hub Cockpit --- */
.central-dashboards-row .side-tab-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.central-dashboards-row .side-tab-item .tab-content-wrapper {
    opacity: 1;
    transform: none;
}

.central-dashboards-row .side-tab-item:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(14, 165, 233, 0.2);
}

.central-dashboards-row .tab-war-room:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(139, 92, 246, 0.25);
}

.central-dashboards-row .tab-ai-hub:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(14, 165, 233, 0.3);
}

.central-dashboards-row .tab-unified:hover {
    border-color: #10b981;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(16, 185, 129, 0.25);
}

/* --- Sliding Intel Panels --- */
.intel-panel {
    position: fixed;
    top: 0;
    width: 450px;
    height: 100vh;
    background: rgba(3, 7, 18, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    z-index: 1050;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    padding: 2rem;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.intel-panel-left {
    left: 0;
    transform: translateX(-100%);
    border-left: none;
}

.intel-panel-right {
    right: 0;
    transform: translateX(100%);
    border-right: none;
}

.intel-panel.open {
    transform: translateX(0);
}

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

.panel-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-close-panel {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-close-panel:hover {
    color: #ef4444;
}

.feed-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.feed-container::-webkit-scrollbar {
    width: 4px;
}

.feed-container::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 10px;
}

/* --- Advisory Feed Items --- */
.advisory-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.advisory-item:hover {
    background: rgba(14, 165, 233, 0.05);
    border-color: rgba(14, 165, 233, 0.3);
    transform: scale(1.02);
}

.advisory-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.severity-badge {
    padding: 2px 8px;
    border-radius: 4px;
}

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

.severity-high {
    color: #f97316;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid #f97316;
}

.severity-medium {
    color: #eab308;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid #eab308;
}

.advisory-title {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

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

/* --- Auth Modal & SaaS UI --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 7, 18, 0.9);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.auth-modal {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    width: 100%;
    max-width: 500px;
    /* Slightly wider for better grid layout */
    max-height: 95vh;
    /* Keep within viewport */
    overflow-y: auto;
    padding: 1.5rem 1.5rem 3rem 1.5rem;
    /* Further reduced padding */
    border-radius: 24px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), var(--glow-shadow);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}

.auth-modal::-webkit-scrollbar {
    width: 6px;
}

.auth-modal::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 10px;
}

.modal-overlay.active .auth-modal {
    transform: scale(1);
}

/* Allow NUUN-Bot to stay visible in front of all modal overlays with top z-index */
.modal-overlay.active~#nuun-bot-container,
.modal-overlay:not(.hidden)~#nuun-bot-container,
body.modal-open #nuun-bot-container {
    z-index: 2147483647 !important;
}

.auth-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    /* Reduced margin */
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1rem;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 0.8rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.auth-tab.active {
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* Further reduced gap */
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* Tiny gap */
}

.form-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 0.8rem 1rem;
    /* Reduced vertical padding */
    border-radius: 12px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    border-color: var(--accent-blue);
}

.btn-auth-submit {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    padding: 1rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.btn-auth-submit:hover {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
    transform: translateY(-2px);
}

.close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #ef4444;
}

/* --- AI Intelligence Hub Section --- */
.ai-hub-container {
    margin-top: 4rem;
    width: 100%;
    max-width: 1000px;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.ai-hub-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ai-hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.ai-hub-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    color: #fff;
}

.ai-hub-title i {
    color: var(--accent-purple);
    animation: pulse 2s infinite;
}

.ai-search-box {
    display: flex;
    gap: 1rem;
}

.ai-search-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 1.2rem;
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.btn-ai-search {
    background: var(--accent-purple);
    color: #fff;
    border: none;
    padding: 0 2rem;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ai-search:hover {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.gated-feature {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

.upgrade-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    text-align: center;
    background: var(--glass-bg);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--accent-blue);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.hidden {
    display: none !important;
}

/* --- Phase 3 Specific Styles --- */
.side-tab-item.tab-otx:hover i {
    color: #f97316;
}

.side-tab-item.tab-abuseipdb:hover i {
    color: #ef4444;
}

.side-tab-item.tab-saved:hover i {
    color: var(--accent-purple);
}

.severity-info {
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
}

.severity-active-pulse {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid #f97316;
}

.ai-search-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
}

.advisory-item button:hover {
    background: var(--accent-blue) !important;
    color: white !important;
}

/* Custom styles for AbuseIPDB results */
#ip-check-results .cve-card {
    margin-top: 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 1.5rem;
    animation: fadeIn 0.5s ease-out;
}

/* --- Phase 5: Operations Command Center Styles --- */
.local-priority-alert {
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(14, 165, 233, 0.4);
    font-weight: 700;
}

.brand-glow-alert {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.12);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(244, 114, 182, 0.4);
    font-weight: 700;
}

.threat-ticker-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    display: flex;
    align-items: center;
    padding: 0.5rem 2rem;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    z-index: 100;
}

.ticker-label {
    color: var(--accent-blue);
    font-weight: 800;
    margin-right: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
}

.actor-ticker-label {
    color: var(--accent-purple) !important;
}

.ticker-wrapper {
    flex: 1;
    overflow: hidden;
}

.ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: ticker 240s linear infinite;
}

.ticker-content>span {
    margin-right: 4rem;
    color: var(--text-secondary);
}

.ticker-content strong {
    color: var(--accent-blue);
    margin-right: 5px;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

#settings-modal-overlay.active {
    display: flex;
}

#settings-form input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

#settings-form input:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

/* --- Phase 6: Nuun-Bot & Onboarding --- */
#nuun-bot-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    z-index: 2147483647 !important;
    animation: botSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bot-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
    position: relative;
}

.bot-status-ring {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--accent-blue);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.bot-bubble {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 20px 20px 0 20px;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.bot-bubble p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.bot-actions {
    display: flex;
    gap: 0.2rem;
}

.bot-actions button {
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

#bot-next {
    background: var(--accent-blue);
    color: white;
    border: none;
}

#bot-skip {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

/* Tour Highlighting */
#tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 900;
}

.tour-highlight {
    position: relative;
    z-index: 950 !important;
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0.4), 0 0 40px rgba(14, 165, 233, 0.6) !important;
    pointer-events: none;
    border-color: var(--accent-blue) !important;
}

@keyframes botSlideIn {
    from {
        transform: translateX(100px) scale(0.5);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes ping {

    75%,
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* --- Phase 7: Global Threat Map --- */
#threat-map-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
}

#map-canvas {
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.ping {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #ef4444;
    z-index: 5;
}

.ping::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid #ef4444;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pingExpand 2s ease-out infinite;
}

.ping-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #ef4444;
    font-size: 0.65rem;
    font-family: monospace;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

@keyframes pingExpand {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    100% {
        width: 500%;
        height: 500%;
        opacity: 0;
    }
}

/* Enhancing UI panels for War Room feel */
.ui-overlay {
    background: radial-gradient(circle at center, transparent 0%, rgba(3, 7, 18, 0.4) 100%);
}

.ui-overlay {
    background: radial-gradient(circle at center, transparent 0%, rgba(3, 7, 18, 0.4) 100%);
}

.results-container,
.cve-card,
.report-section {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* --- AI Hub Expert Domains & Terminal Redesign --- */
.ai-hub-container {
    width: 100%;
    max-width: 1000px;
    margin-top: 3rem;
    animation: fadeIn 0.8s ease-out;
}

.ai-hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.ai-hub-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ai-hub-title h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.ai-badge {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.ai-terminal-input-wrapper {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.5rem 1.5rem;
    backdrop-filter: blur(10px);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    overflow: visible;
}

.ai-search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    align-items: center;
    overflow: visible;
}

.ai-search-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    color: white;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}

.ai-search-input:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.btn-ai-search {
    background: linear-gradient(135deg, var(--accent-purple), #6d28d9);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-ai-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
}

.ai-domains-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.domains-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.domain-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.domain-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* --- Intelligence Terminal Viewport --- */
.ai-terminal-viewport {
    position: relative;
    background: rgba(3, 7, 18, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    height: 500px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(139, 92, 246, 0.05);
    animation: terminalOpen 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes terminalOpen {
    from {
        height: 0;
        opacity: 0;
    }

    to {
        height: 500px;
        opacity: 1;
    }
}

.terminal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
    z-index: 10;
}

.terminal-content {
    height: 100%;
    overflow-y: auto;
    padding: 2.5rem;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
}

/* Scrollbar for Terminal */
.terminal-content::-webkit-scrollbar {
    width: 6px;
}

.terminal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.terminal-content::-webkit-scrollbar-thumb {
    background: var(--accent-purple);
    border-radius: 10px;
}

/* Markdown Rendering Inside Terminal */
.terminal-content h2 {
    color: var(--accent-blue);
    font-family: 'Space Grotesk', sans-serif;
    margin: 2rem 0 1rem 0;
    font-size: 1.4rem;
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
    padding-bottom: 0.5rem;
}

.terminal-content h3 {
    color: var(--accent-purple);
    font-family: 'Space Grotesk', sans-serif;
    margin: 1.5rem 0 0.8rem 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.terminal-content strong {
    color: white;
    font-weight: 700;
}

.terminal-content code {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-purple);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'monospace';
    font-size: 0.9rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.terminal-content br {
    content: "";
    display: block;
    margin-bottom: 1rem;
}

/* Neural Scanning Animation */
.scanning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 7, 18, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(5px);
}

.scan-line {
    width: 80%;
    height: 2px;
    background: var(--accent-purple);
    box-shadow: 0 0 15px var(--accent-purple);
    position: absolute;
    top: 0;
    animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
    0% {
        top: 0%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.scanning-text {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent-purple);
    letter-spacing: 4px;
    font-weight: 800;
    margin-top: 1rem;
    text-shadow: 0 0 10px var(--accent-purple);
}

/* Satisfaction & Refinement Tweaks */
.satisfaction-check {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 12px;
}

.refinement-area {
    border-left: 2px solid var(--accent-purple);
    background: rgba(139, 92, 246, 0.03);
}

/* AI Badge and Pro Tip Tooltip */
.ai-badge {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 2px 10px;
    border-radius: 30px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-left: 10px;
    position: relative;
    cursor: help;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.ai-badge:hover {
    background: var(--accent-purple);
    color: #fff;
    box-shadow: 0 0 15px var(--accent-purple);
}

/* Pro Tip Tooltip */
.ai-badge::after {
    content: "PRO TIP: Nuun's Neural Link uses Gemini AI to turn complex CVE data into simple patch guides & compliance reports.";
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e1b4b;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.6rem;
    width: 260px;
    text-align: center;
    line-height: 1.5;
    border: 1px solid var(--accent-purple);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    /* Keep text as is */
}

.ai-badge:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: 160%;
}

/* --- Side Tab Categories --- */
.side-tab-item.tab-pro {
    border-color: var(--accent-blue);
}

.side-tab-item.tab-pro:hover,
.side-tab-item.tab-pro.active {
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-blue);
}

/* --- Hub Side Tab Styles --- */
.side-tab-item.tab-senior {
    border-color: #10b981;
}

.side-tab-item.tab-senior:hover,
.side-tab-item.tab-senior.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.side-tab-item.tab-kids {
    border-color: #f59e0b;
}

.side-tab-item.tab-kids:hover,
.side-tab-item.tab-kids.active {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.side-tab-item.tab-whatsapp {
    border-color: #25d366;
}

.side-tab-item.tab-whatsapp:hover,
.side-tab-item.tab-whatsapp.active {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.side-tab-divider {
    width: 60%;
    margin: 15px auto;
    background: rgba(255, 255, 255, 0.1);
    height: 1px;
}

/* Satisfaction & Refinement Feedback Enhancements */
.satisfaction-check {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    transition: all 0.4s ease;
}

.satisfaction-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.rate-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-secondary);
}

.rate-btn.active-up {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.rate-btn.active-down {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.refine-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.refine-btn:hover {
    background: var(--accent-purple);
    color: white;
}

.pulse-highlight {
    animation: satisfyPulse 2s infinite;
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

@keyframes satisfyPulse {
    0% {
        transform: scale(1);
        border-color: var(--glass-border);
    }

    50% {
        transform: scale(1.02);
        border-color: var(--accent-purple);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
    }

    100% {
        transform: scale(1);
        border-color: var(--glass-border);
    }
}

.refinement-area {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--accent-purple);
    animation: slideDown 0.4s ease-out;
}

.refinement-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    margin-bottom: 1rem;
    outline: none;
}

.refinement-input:focus {
    border-color: var(--accent-purple);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.refinement-area {
    border-left: 2px solid var(--accent-purple);
    background: rgba(139, 92, 246, 0.03);
}

/* AI Badge and Pro Tip Tooltip */
.ai-badge {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 2px 10px;
    border-radius: 30px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-left: 10px;
    position: relative;
    cursor: help;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.ai-badge:hover {
    background: var(--accent-purple);
    color: #fff;
    box-shadow: 0 0 15px var(--accent-purple);
}

/* Pro Tip Tooltip */
.ai-badge::after {
    content: "PRO TIP: Nuun's Neural Link uses Gemini AI to turn complex CVE data into simple patch guides & compliance reports.";
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e1b4b;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.6rem;
    width: 260px;
    text-align: center;
    line-height: 1.5;
    border: 1px solid var(--accent-purple);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    /* Keep text as is */
}

.ai-badge:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: 160%;
}

/* --- Side Tab Categories --- */
.side-tab-item.tab-pro {
    border-color: var(--accent-blue);
}

.side-tab-item.tab-pro:hover,
.side-tab-item.tab-pro.active {
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-blue);
}

/* --- Hub Side Tab Styles --- */
.side-tab-item.tab-senior {
    border-color: #10b981;
}

.side-tab-item.tab-senior:hover,
.side-tab-item.tab-senior.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.side-tab-item.tab-kids {
    border-color: #f59e0b;
}

.side-tab-item.tab-kids:hover,
.side-tab-item.tab-kids.active {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.side-tab-item.tab-whatsapp {
    border-color: #25d366;
}

.side-tab-item.tab-whatsapp:hover,
.side-tab-item.tab-whatsapp.active {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.side-tab-divider {
    width: 60%;
    margin: 15px auto;
    background: rgba(255, 255, 255, 0.1);
    height: 1px;
}

/* Satisfaction & Refinement Feedback Enhancements */
.satisfaction-check {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    transition: all 0.4s ease;
}

.satisfaction-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.rate-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-secondary);
}

.rate-btn.active-up {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.rate-btn.active-down {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.refine-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.refine-btn:hover {
    background: var(--accent-purple);
    color: white;
}

.pulse-highlight {
    animation: satisfyPulse 2s infinite;
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

@keyframes satisfyPulse {
    0% {
        transform: scale(1);
        border-color: var(--glass-border);
    }

    50% {
        transform: scale(1.02);
        border-color: var(--accent-purple);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
    }

    100% {
        transform: scale(1);
        border-color: var(--glass-border);
    }
}

.refinement-area {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--accent-purple);
    animation: slideDown 0.4s ease-out;
}

.refinement-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    margin-bottom: 1rem;
    outline: none;
}

.refinement-input:focus {
    border-color: var(--accent-purple);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Visibility Control */
.app-tab.hidden,
.landing-tab.hidden {
    display: none !important;
}

.tab-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.45rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
    margin-left: 10px;
    position: relative;
    cursor: help;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.ai-badge:hover {
    background: var(--accent-purple);
    color: #fff;
    box-shadow: 0 0 15px var(--accent-purple);
}

/* Pro Tip Tooltip */
.ai-badge::after {
    content: "PRO TIP: Nuun's Neural Link uses Gemini AI to turn complex CVE data into simple patch guides & compliance reports.";
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e1b4b;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.6rem;
    width: 260px;
    text-align: center;
    line-height: 1.5;
    border: 1px solid var(--accent-purple);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    /* Keep text as is */
}

.ai-badge:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: 160%;
}

/* --- Side Tab Categories --- */
.side-tab-item.tab-pro {
    border-color: var(--accent-blue);
}

.side-tab-item.tab-pro:hover,
.side-tab-item.tab-pro.active {
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-blue);
}

/* --- Hub Side Tab Styles --- */
.side-tab-item.tab-senior {
    border-color: #10b981;
}

.side-tab-item.tab-senior:hover,
.side-tab-item.tab-senior.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.side-tab-item.tab-kids {
    border-color: #f59e0b;
}

.side-tab-item.tab-kids:hover,
.side-tab-item.tab-kids.active {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.side-tab-item.tab-whatsapp {
    border-color: #25d366;
}

.side-tab-item.tab-whatsapp:hover,
.side-tab-item.tab-whatsapp.active {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.side-tab-divider {
    width: 60%;
    margin: 15px auto;
    background: rgba(255, 255, 255, 0.1);
    height: 1px;
}

/* Satisfaction & Refinement Feedback Enhancements */
.satisfaction-check {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    transition: all 0.4s ease;
}

.satisfaction-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.rate-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-secondary);
}

.rate-btn.active-up {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.rate-btn.active-down {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.refine-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.refine-btn:hover {
    background: var(--accent-purple);
    color: white;
}

.pulse-highlight {
    animation: satisfyPulse 2s infinite;
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

@keyframes satisfyPulse {
    0% {
        transform: scale(1);
        border-color: var(--glass-border);
    }

    50% {
        transform: scale(1.02);
        border-color: var(--accent-purple);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
    }

    100% {
        transform: scale(1);
        border-color: var(--glass-border);
    }
}

.refinement-area {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--accent-purple);
    animation: slideDown 0.4s ease-out;
}

.refinement-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    margin-bottom: 1rem;
    outline: none;
}

.refinement-input:focus {
    border-color: var(--accent-purple);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Visibility Control */
.app-tab.hidden,
.landing-tab.hidden {
    display: none !important;
}

/* Universal Cyber Academy Dashboard Styles */
.universal-cyber-academy-container {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 20px;
    animation: fadeIn 0.8s ease-out;
    border-top: 4px solid #f59e0b;
    padding-top: 2rem;
}

.universal-cyber-academy-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
}

.universal-cyber-academy-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    color: #f59e0b;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.universal-cyber-academy-header .header-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-close-dashboard {
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-dashboard:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
    transform: translateY(-2px);
}

/* Academy Split Layout styling */
.academy-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}

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

.academy-sidebar {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.academy-user-stats {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 14px;
}

.academy-user-stats .stats-title {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.academy-user-stats .stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.academy-user-stats .stats-row strong {
    color: #f59e0b;
}

.academy-nav-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.academy-tab-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 12px 16px;
    border-radius: 10px;
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.academy-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--text-primary);
}

.academy-tab-btn.active {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

/* ─── Unified Academy Search — Level Selector Pills ─────────────────── */
.academy-lvl-pill {
    padding: 7px 16px;
    border-radius: 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.academy-lvl-pill:hover {
    border-color: var(--pill-color, #0ea5e9);
    color: var(--pill-color, #0ea5e9);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.academy-lvl-pill.active {
    border-color: var(--pill-color, #34d399);
    color: var(--pill-color, #34d399);
    background: color-mix(in srgb, var(--pill-color, #34d399) 12%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--pill-color, #34d399) 30%, transparent);
    transform: translateY(-2px);
}


.academy-sub-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
    border-left: 2px solid rgba(245, 158, 11, 0.2);
    margin: 4px 0 8px 10px;
}

.academy-sub-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    text-align: left;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.academy-sub-btn.active {
    color: #f59e0b;
    font-weight: 600;
}

.academy-workbench {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 500px;
}

/* Sizing Controls */
.sizing-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    align-items: center;
}

.sizing-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 8px 18px;
    font-size: 0.82rem;
    border-radius: 24px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
}

.sizing-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
    transform: translateY(-1.5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.sizing-btn:active {
    transform: translateY(0);
}

.sizing-btn.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.08) 100%) !important;
    border-color: var(--accent-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.4), inset 0 0 4px rgba(14, 165, 233, 0.2) !important;
    font-weight: 700;
}

.sizing-btn.sub-btn {
    padding: 5px 12px;
    font-size: 0.76rem;
}

.academy-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.academy-search-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
}

.academy-search-input:focus {
    border-color: var(--accent-blue);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.25);
}

/* Q&A / Terminal View */
.academy-terminal {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: #10b981;
    min-height: 250px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.academy-terminal-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 14px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    outline: none;
}

.academy-terminal-input:focus {
    border-color: #f59e0b;
}

.academy-disclaimer-banner {
    background: rgba(234, 179, 8, 0.05);
    border: 1px solid rgba(234, 179, 8, 0.2);
    color: #eab308;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.72rem;
    line-height: 1.4;
    margin-top: 1.5rem;
}

.oracle-search-container {
    width: 100%;
    max-width: 750px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.oracle-search-title {
    color: var(--accent-purple);
    font-size: 1.25rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.oracle-search-input-wrapper {
    display: flex;
    width: 100%;
    gap: 10px;
}

.oracle-search-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.oracle-search-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.btn-ask-oracle-submit {
    background: linear-gradient(135deg, var(--accent-purple), #a78bfa);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-ask-oracle-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    filter: brightness(1.1);
}

.universal-cyber-academy-oracle .oracle-chat-viewport {
    height: 380px;
    flex: 1;
}

.universal-cyber-academy-container .academy-panel-container {
    height: auto;
    overflow-y: visible;
    padding-right: 0;
}

.comm-link-card {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.comm-link-card h3 {
    color: #f59e0b;
    margin-bottom: 0.5rem;
    font-family: 'Space Grotesk', sans-serif;
}

.comm-link-card input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.8rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    outline: none;
}

.academy-feed-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.briefing-card {
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid #f59e0b;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.briefing-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
    border-color: rgba(245, 158, 11, 0.3);
}

.fa-fade {
    animation: fa-fade 1s infinite alternate;
}

@keyframes fa-fade {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

.briefing-card:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.05);
}

.briefing-topic {
    color: #f59e0b;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.briefing-section {
    margin-top: 0.75rem;
}

.briefing-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    opacity: 0.6;
    margin-bottom: 2px;
}

.briefing-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* =========================================
   Nuun-Bot: Elite AI Assistant Overlay
   ========================================= */

#nuun-bot-master-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    pointer-events: none;
    /* Allow clicks through to dashboard when bot is idle */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

#nuun-bot-master-container * {
    pointer-events: auto;
    /* Re-enable for bot elements */
}

/* The Robot Object */
#nuun-bot {
    width: 60px;
    height: 60px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.4));
}

.bot-core {
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid var(--accent-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: var(--accent-blue);
    position: relative;
    z-index: 2;
}

.bot-eye-glow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    top: 35%;
    box-shadow: 0 0 10px #fff, 0 0 20px var(--accent-blue);
    animation: bot-eye-blink 4s infinite;
}

.bot-hover-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid var(--accent-blue);
    border-radius: 50%;
    opacity: 0.3;
    animation: bot-ring-pulse 2s infinite;
}

.bot-thruster {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 15px;
    background: radial-gradient(ellipse at top, var(--accent-blue), transparent);
    opacity: 0.6;
    filter: blur(4px);
    animation: bot-thrust 0.2s infinite alternate;
}

/* Bot States & Animations */
.nuun-bot-idle {
    animation: bot-float 3s ease-in-out infinite;
}

@keyframes bot-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes bot-ring-pulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.1;
    }

    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

@keyframes bot-eye-blink {

    0%,
    90%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0);
    }
}

@keyframes bot-thrust {
    from {
        height: 10px;
        opacity: 0.4;
    }

    to {
        height: 18px;
        opacity: 0.8;
    }
}

/* Speech Bubble */
.bot-bubble {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    margin-right: 10px;
    animation: bubble-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bot-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 25px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(15, 23, 42, 0.9);
}

.bot-bubble-content {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.bot-bubble-controls {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
    justify-content: flex-end;
}

.bot-control-btn {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.bot-control-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

.btn-skip {
    border-color: var(--glass-border);
    color: var(--text-secondary);
    background: transparent;
}

@keyframes bubble-pop {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Neural Chat Window */
.bot-neural-window {
    width: 350px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--accent-blue);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    animation: neural-slide 0.5s ease-out;
}

.neural-header {
    background: rgba(14, 165, 233, 0.1);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
}

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

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-blue);
    animation: status-pulse 1.5s infinite;
}

.status-text {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent-blue);
}

#bot-neural-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
}

.neural-messages {
    height: 300px;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bot-msg {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.8rem 1rem;
    border-radius: 12px 12px 12px 0;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 85%;
    border-left: 3px solid var(--accent-blue);
}

.user-msg {
    align-self: flex-end;
    background: var(--accent-blue);
    color: #fff;
    padding: 0.8rem 1rem;
    border-radius: 12px 12px 0 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 85%;
}

.neural-input-wrapper {
    padding: 1rem;
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
}

#bot-neural-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.8rem;
    color: #fff;
    outline: none;
    font-size: 0.9rem;
}

#bot-neural-send {
    background: var(--accent-blue);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes neural-slide {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes status-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}


/* =============================================
   NUUN.IO — UTILITIES & GLOBALS
   ============================================= */

.hidden {
    display: none !important;
}

/* --- Strategic War Room UI --- */
#war-room-panel {
    width: 850px;
    max-width: 90vw;
    background: rgba(6, 4, 14, 0.96);
    /* Deeper, richer violet-tinted background */
    border-right: 1px solid rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 80px rgba(139, 92, 246, 0.15);
}

#war-room-panel h2 {
    background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
}

.war-room-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
    padding: 20px;
    height: calc(100vh - 110px);
    overflow: hidden;
}

.war-room-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 5px;
}

.war-room-left-col::-webkit-scrollbar {
    width: 4px;
}

.war-room-left-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.war-room-info-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-left: 4px solid #8b5cf6;
    padding: 18px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.war-room-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.stat-box:hover {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.stat-box small {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    color: #e2e8f0;
}

.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--accent-purple);
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.pulse-text {
    animation: war-room-pulse 2s infinite;
}

@keyframes war-room-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.war-room-right-col {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.war-room-log-header {
    background: rgba(139, 92, 246, 0.12);
    padding: 14px 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent-purple);
    border-bottom: 1px solid rgba(139, 92, 246, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
}

.war-room-log {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.log-entry {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(139, 92, 246, 0.08);
    border-left: 3px solid var(--accent-purple);
    padding: 14px 18px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    animation: log-slide-in 0.3s ease-out;
}

.log-entry:hover {
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.03);
    transform: translateX(2px);
}

@keyframes log-slide-in {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.log-time {
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.log-msg {
    color: #f1f5f9;
    line-height: 1.5;
    font-size: 0.82rem;
}

.log-meta {
    margin-top: 10px;
    font-size: 0.72rem;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #94a3b8;
}

.log-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-meta i {
    color: #38bdf8;
}

.ssi-input:focus {
    border-color: var(--ssi-gold, #eab308);
}

/* --- Strategic Sector Intelligence (SSI) --- */
:root {
    --ssi-gold: #eab308;
}

.ssi-container {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 20px;
    animation: fadeIn 0.8s ease-out;
}

.ssi-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(234, 179, 8, 0.2);
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
}

.ssi-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    color: var(--ssi-gold);
    margin: 0;
}

.ssi-search-box {
    display: flex;
    gap: 15px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.ssi-input {
    flex: 1;
    min-width: 250px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.ssi-input:focus {
    border-color: var(--ssi-gold);
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
}

.ssi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 4rem;
}

.intel-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 4px solid var(--ssi-gold);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.intel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(234, 179, 8, 0.3);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.confidence-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid;
}

/* --- GTDC 5-Phase Defense & Remediation Roadmap Styling --- */
.gtdc-roadmap-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-top: 5px solid var(--ssi-gold);
    border-radius: 14px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(234, 179, 8, 0.1);
    margin-bottom: 2rem;
    animation: fadeIn 0.5s ease-out;
}

.gtdc-phase-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.gtdc-phase-box {
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.gtdc-phase-box:hover {
    transform: translateX(4px);
}

.gtdc-phase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.gtdc-phase-containment {
    background: rgba(239, 68, 68, 0.06);
    border-left: 4px solid #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left-width: 4px;
}

.gtdc-phase-containment .gtdc-phase-header {
    color: #f87171;
}

.gtdc-phase-patching {
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid #3b82f6;
}

.gtdc-phase-patching .gtdc-phase-header {
    color: #60a5fa;
}

.gtdc-phase-verification {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 4px solid #10b981;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.gtdc-phase-verification .gtdc-phase-header {
    color: #34d399;
}

.gtdc-phase-audit {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left: 4px solid #f59e0b;
}

.gtdc-phase-audit .gtdc-phase-header {
    color: #fbbf24;
}

.gtdc-phase-compliance {
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-left: 4px solid #8b5cf6;
}

.gtdc-phase-compliance .gtdc-phase-header {
    color: #c084fc;
}

/* --- GTDC Authentic Forensic Artifacts Styling --- */
.gtdc-forensic-box {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-left: 4px solid #3b82f6 !important;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gtdc-forensic-box:hover {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 0 25px rgba(59, 130, 246, 0.1);
}

.btn-copy-forensics {
    transition: all 0.2s ease;
}

.btn-copy-forensics:hover {
    background: rgba(59, 130, 246, 0.35) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* ==========================================================================
   NUUN-Bot Interactive Mascot Styling
   ========================================================================== */
#nuun-bot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 2147483647 !important;
    background: rgba(8, 12, 22, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(14, 165, 233, 0.15);
    backdrop-filter: blur(20px);
    max-width: 400px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.3s ease,
        left 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        top 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        bottom 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        right 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Flying Flight State */
#nuun-bot-container.nuun-bot-flying {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.4);
}

#nuun-bot-container.nuun-bot-flying .nuun-bot-svg,
#nuun-bot-container.nuun-bot-flying .nuun-bot-img {
    transform: rotate(8deg) scale(1.1);
}

#nuun-bot-container.nuun-bot-flying .bot-thruster {
    animation: thrusterFly 0.1s infinite alternate !important;
    fill: #8b5cf6 !important;
}

/* Minimized Floating Mascot State */
#nuun-bot-container.nuun-bot-minimized {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    cursor: pointer;
}

#nuun-bot-container.nuun-bot-minimized .nuun-bot-bubble {
    display: none;
}

#nuun-bot-container.nuun-bot-minimized .nuun-bot-avatar-wrapper {
    background: rgba(8, 12, 22, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(14, 165, 233, 0.2);
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#nuun-bot-container.nuun-bot-minimized .nuun-bot-avatar-wrapper:hover {
    transform: translateY(-5px) scale(1.08);
    border-color: var(--accent-blue);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(14, 165, 233, 0.4);
}

#nuun-bot-container.nuun-bot-minimized::after {
    content: "!";
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--accent-blue);
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px var(--accent-blue);
    animation: bounceNotification 1s infinite alternate;
}

/* Avatar Elements & Animations */
.nuun-bot-avatar-wrapper {
    flex-shrink: 0;
    user-select: none;
    cursor: pointer;
}

.nuun-bot-svg,
.nuun-bot-img {
    transition: transform 0.5s ease;
}

.bot-head-group {
    animation: floatHead 3s infinite ease-in-out;
}

.bot-body-group {
    animation: floatBody 3s infinite ease-in-out;
}

.bot-thruster {
    animation: thrusterPulse 0.15s infinite alternate;
    transform-origin: top center;
}

.bot-visor {
    animation: visorScan 4s infinite ease-in-out;
}

/* Speech Bubble */
.nuun-bot-bubble {
    position: relative;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    z-index: 2147483647 !important;
}

.nuun-bot-close {
    position: absolute;
    top: -5px;
    right: -5px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.2s;
}

.nuun-bot-close:hover {
    color: #ef4444;
}

.nuun-bot-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#nuun-bot-text {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 12px 0;
    opacity: 0.9;
    padding-right: 15px;
}

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

.bot-btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), #8b5cf6);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: 0.2s;
}

.bot-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

.bot-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px stroke rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.bot-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Pulse highlight overlay during tour steps */
.bot-highlight-target {
    position: relative !important;
    z-index: 2147483645 !important;
    outline: 3px solid var(--accent-blue) !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.8) !important;
    animation: pulseHighlightTarget 1.5s infinite alternate !important;
    transition: all 0.3s ease !important;
}

/* Animations */
@keyframes floatHead {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(-1deg);
    }
}

@keyframes floatBody {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-2px);
    }
}

@keyframes thrusterPulse {
    0% {
        transform: scaleY(1) scaleX(1);
        opacity: 0.9;
    }

    100% {
        transform: scaleY(1.3) scaleX(0.9);
        opacity: 0.7;
    }
}

@keyframes thrusterFly {
    0% {
        transform: scaleY(1.5) scaleX(1.1);
        opacity: 1;
        filter: drop-shadow(0 0 5px #8b5cf6);
    }

    100% {
        transform: scaleY(1.8) scaleX(1.0);
        opacity: 0.8;
        filter: drop-shadow(0 0 8px #8b5cf6);
    }
}

@keyframes visorScan {

    0%,
    100% {
        fill: url(#visorGlow);
        opacity: 1;
    }

    45%,
    55% {
        opacity: 0.9;
    }

    50% {
        fill: #a855f7;
        opacity: 1;
    }
}

@keyframes bounceNotification {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-3px) scale(1.1);
    }
}

@keyframes pulseHighlightTarget {
    0% {
        outline-color: rgba(14, 165, 233, 0.4);
        box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
    }

    100% {
        outline-color: rgba(14, 165, 233, 0.9);
        box-shadow: 0 0 30px rgba(14, 165, 233, 0.7);
    }
}

/* =========================================
   Nuun Cyber Academy & Gamified Hub Styles
   ========================================= */

.academy-panel-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 5px;
    gap: 1.5rem;
}

/* XP & Rank Tracker */
.academy-stats-bar {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.academy-level-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-purple) 0%, rgba(139, 92, 246, 0.6) 100%);
    border: 2px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    box-shadow: 0 0 15px var(--accent-purple);
}

.academy-level-badge .num {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.academy-level-badge .lbl {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.academy-xp-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.academy-xp-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.academy-xp-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.academy-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    width: 0%;
    transition: width 0.8s cubic-bezier(0.1, 1, 0.1, 1);
    box-shadow: 0 0 10px var(--accent-purple);
}

/* Tab Switcher */
.academy-mode-switcher {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 5px;
}

.academy-mode-btn {
    border: none;
    background: transparent;
    padding: 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.academy-mode-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.academy-mode-btn.mode-junior.active {
    border-bottom: 2px solid #10b981;
    color: #10b981;
}

.academy-mode-btn.mode-teen.active {
    border-bottom: 2px solid var(--accent-blue);
    color: var(--accent-blue);
}

.academy-mode-btn.mode-guardian.active {
    border-bottom: 2px solid #f59e0b;
    color: #f59e0b;
}

/* Modules Grid */
.academy-module-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.academy-module-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

/* Card Swiper Game */
.swiper-game-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 1rem 0;
}

.swipe-deck {
    width: 100%;
    max-width: 380px;
    height: 240px;
    position: relative;
    perspective: 1000px;
}

.swipe-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0d1117;
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    user-select: none;
    cursor: grab;
}

.swipe-card:active {
    cursor: grabbing;
}

.swipe-card-badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.swipe-card-content {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 10px 0;
    overflow-y: auto;
    flex: 1;
}

.swipe-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.btn-swipe {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-swipe-spam {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

.btn-swipe-spam:hover {
    background: #ef4444;
    color: white;
}

.btn-swipe-safe {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
}

.btn-swipe-safe:hover {
    background: #22c55e;
    color: white;
}

/* Password Defense Game */
.password-game-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.castle-viewport {
    height: 180px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.castle-gate {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 80px;
    background: #2d3748;
    border: 4px solid #4a5568;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.castle-gate-shield {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.2);
    border: 2px solid var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    font-size: 1.1rem;
    box-shadow: 0 0 15px var(--accent-blue);
    transition: all 0.3s ease;
}

.gate-shield-pulse {
    animation: shieldPulse 1s infinite alternate;
}

@keyframes shieldPulse {
    from {
        transform: scale(1);
        box-shadow: 0 0 10px var(--accent-blue);
    }

    to {
        transform: scale(1.15);
        box-shadow: 0 0 25px #0ea5e9, 0 0 40px #0ea5e9;
    }
}

.cyber-attacker {
    position: absolute;
    top: -20px;
    font-family: monospace;
    font-size: 0.7rem;
    color: #ef4444;
    animation: attackerFall 3s linear infinite;
    text-shadow: 0 0 5px #ef4444;
    white-space: nowrap;
}

@keyframes attackerFall {
    0% {
        top: -20px;
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 120px;
        opacity: 0;
    }
}

.castle-status-text {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Chat Oracle 2.0 */
.oracle-chat-viewport {
    height: 280px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 10px;
}

.oracle-msg-bubble {
    padding: 1.2rem 1.6rem;
    border-radius: 14px;
    font-size: 1.05rem;
    /* Larger, professional font size */
    line-height: 1.6;
    /* Improved readability */
    max-width: 92%;
    word-wrap: break-word;
    font-family: 'Inter', sans-serif;
}

.oracle-msg-bubble.bot {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-left: 4px solid var(--accent-purple);
    color: var(--text-primary);
    align-self: flex-start;
    border-radius: 12px 12px 12px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.oracle-msg-bubble.user {
    background: var(--accent-purple);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    align-self: flex-end;
    border-radius: 12px 12px 0 12px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

/* Styled headings and lists inside chat advisor */
.oracle-concept-heading {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent-blue) !important;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 4px;
}

.oracle-concept-heading:first-of-type {
    margin-top: 0;
}

.oracle-bullet-item {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
    list-style-type: square;
    color: var(--text-primary);
}

/* Advisor feedback widget styling */
.oracle-feedback-widget {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-prompt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.feedback-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-feedback {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
}

.btn-feedback:hover {
    color: white;
    transform: translateY(-1px);
}

.btn-feedback.satisfied:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #4ade80;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

.btn-feedback.neutral:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.btn-feedback.unsatisfied:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #f87171;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

.oracle-quick-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.btn-quick-query {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-query:hover {
    background: rgba(139, 92, 246, 0.2);
    color: white;
    border-color: var(--accent-purple);
}

/* Badges Showcase Grid */
.badges-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.badge-show-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 5px;
    text-align: center;
    opacity: 0.3;
    filter: grayscale(1);
    transition: all 0.5s ease;
}

.badge-show-item.unlocked {
    opacity: 1;
    filter: none;
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.badge-show-item.unlocked.badge-junior {
    background: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
}

.badge-show-item.unlocked.badge-teen {
    background: rgba(14, 165, 233, 0.08);
    border-color: var(--accent-blue);
}

.badge-show-item.unlocked.badge-guardian {
    background: rgba(245, 158, 11, 0.08);
    border-color: #f59e0b;
}

.badge-show-item i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.badge-show-item div {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Leaderboard */
.leaderboard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.leaderboard-row.highlight {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--accent-purple);
}

/* Shaking animation on wrong answer */
.shake-element {
    animation: shakeAnim 0.4s ease;
}

@keyframes shakeAnim {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Celebrate/Level up modal */
.level-up-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: #0f172a;
    border: 2px solid #a855f7;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.6);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.level-up-flash.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ==========================================================================
   Universal Cyber Academy Full-Page Panel Styles
   ========================================================================== */

.universal-cyber-academy-container {
    width: 100%;
    max-width: 1450px;
    margin: 4rem auto 0;
    padding: 0 20px;
    animation: fadeIn 0.8s ease-out;
}

/* --- Horizontal Academy Navigation Bar --- */
.academy-nav-tabs-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 1.5rem 0 2rem 0;
    flex-wrap: wrap;
}

.academy-nav-tabs-horizontal .academy-tab-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #94a3b8);
    padding: 10px 24px;
    border-radius: 30px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.academy-nav-tabs-horizontal .academy-tab-btn:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    transform: translateY(-2px);
}

.academy-nav-tabs-horizontal .academy-tab-btn.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border: 1px solid #f59e0b;
    color: #f59e0b;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.academy-workbench-full {
    width: 100%;
}

.universal-cyber-academy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 15px;
}

.universal-cyber-academy-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    color: #f59e0b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-close-dashboard {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-dashboard:hover {
    background: #f59e0b;
    color: #000;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* --- Oracle Centered Search --- */
.universal-cyber-academy-oracle-search-section {
    width: 100%;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
}

.oracle-search-container {
    width: 100%;
    max-width: 100%;
    background: rgba(8, 12, 24, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 5px solid #f59e0b;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(245, 158, 11, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.oracle-search-container:hover {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: #f59e0b;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7),
        0 0 45px rgba(245, 158, 11, 0.15);
    transform: translateY(-3px);
}

.oracle-search-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    color: #f59e0b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.oracle-search-input-wrapper {
    display: flex;
    width: 100%;
    gap: 15px;
    max-width: 980px;
}

.oracle-search-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 1.05rem;
    outline: none;
    transition: all 0.3s ease;
}

.oracle-search-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
    background: rgba(0, 0, 0, 0.75);
}

.btn-ask-oracle-submit {
    background: #f59e0b;
    color: #000;
    border: none;
    padding: 0 24px;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ask-oracle-submit:hover {
    background: #fbbf24;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* --- Stats & Badges Row (Directly below Oracle Search) --- */
.universal-cyber-academy-stats-badges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

.academy-stats-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Main Layout Grid (Simulator Content + Leaderboard) --- */
.universal-cyber-academy-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 4rem;
}

.universal-cyber-academy-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.universal-cyber-academy-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Fade-in & layout transition keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjust */
@media (max-width: 992px) {
    .universal-cyber-academy-stats-badges-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .universal-cyber-academy-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

/* Live Threat Blinking Alert Styles */
@keyframes alert-blink {
    0% {
        opacity: 0.5;
        text-shadow: 0 0 2px rgba(239, 68, 68, 0.4);
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(239, 68, 68, 1), 0 0 20px rgba(239, 68, 68, 0.6);
    }
}

.blink-alert {
    color: #ef4444 !important;
    animation: alert-blink 0.8s ease-in-out infinite alternate;
    font-weight: 800;
}

.new-badge {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    border: 1px solid #ef4444;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.65rem;
    margin-right: 8px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    animation: alert-blink 0.8s ease-in-out infinite alternate;
}

/* --- Guest Restrictions & Blurring --- */
.guest-restricted .threat-actor-chapter>*:not(h3),
.guest-restricted .operations-chapter>*:not(h3),
.guest-restricted .defense-remediation-chapter>*:not(h3) {
    filter: blur(6px) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Screenshot Protection: Blur on Focus Loss */
body.window-blurred #search-results {
    filter: blur(15px) !important;
    transition: filter 0.1s ease;
}

/* Print Suppression for Guests */
@media print {
    .guest-restricted {
        display: none !important;
    }
}

/* --- All-in-One Frame Explorer --- */
.blueprint-explorer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    margin-top: 0.6rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    width: 100%;
    overflow: hidden;
}

.blueprint-left-pane {
    padding: 0.6rem 0.8rem;
    border-right: 1px solid var(--glass-border);
    text-align: left;
}

.blueprint-right-pane {
    padding: 0.6rem 0.8rem;
    text-align: left;
}

.blueprint-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.blueprint-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.blueprint-item {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--accent-blue);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.blueprint-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(3px);
    border-color: rgba(255, 255, 255, 0.08);
}

.blueprint-item h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    margin: 0 0 0.1rem 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blueprint-item p {
    font-size: 0.64rem;
    color: var(--text-secondary);
    line-height: 1.3;
    margin: 0;
}

.blueprint-item .card-badge {
    position: relative;
    top: auto;
    right: auto;
    font-size: 6.5px;
    padding: 1px 4px;
    border-radius: 3px;
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .blueprint-explorer-container {
        grid-template-columns: 1fr;
    }

    .blueprint-left-pane {
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }
}

/* ==========================================================================
   Sentinel Elite Custom Mascot & Laser Onboarding Styles
   ========================================================================== */
@keyframes mascotFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(1.2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.nuun-bot-avatar-wrapper {
    position: relative;
    animation: mascotFloat 3.5s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Jet Thruster Flame */
.bot-thruster-flame {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 32px;
    background: linear-gradient(to bottom, var(--accent-blue) 0%, rgba(139, 92, 246, 0.8) 50%, transparent 100%);
    clip-path: polygon(50% 100%, 15% 0, 85% 0);
    opacity: 0.75;
    animation: thrusterPulse 0.15s infinite alternate;
    pointer-events: none;
    z-index: -1;
    filter: blur(1.5px);
    transition: all 0.3s ease;
}

#nuun-bot-container.nuun-bot-flying .bot-thruster-flame {
    height: 48px;
    width: 28px;
    background: linear-gradient(to bottom, #ef4444 0%, #f97316 60%, transparent 100%);
    animation: thrusterFly 0.08s infinite alternate;
    filter: blur(1px);
}

@keyframes thrusterPulse {
    0% {
        transform: translateX(-50%) scaleY(0.9) skewX(-2deg);
        opacity: 0.65;
    }

    100% {
        transform: translateX(-50%) scaleY(1.15) skewX(2deg);
        opacity: 0.85;
    }
}

@keyframes thrusterFly {
    0% {
        transform: translateX(-50%) scale(1.15, 0.8) skewX(-4deg);
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) scale(1.35, 1.25) skewX(4deg);
        opacity: 1;
    }
}

/* Laser Eye Emitters */
.laser-eye {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-blue);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-blue), 0 0 15px rgba(14, 165, 233, 0.6);
    opacity: 0.9;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.laser-eye-left {
    top: 22px;
    left: 34px;
}

.laser-eye-right {
    top: 22px;
    left: 46px;
}

#vanta-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

#nuun-bot-container.laser-firing .laser-eye {
    background: #ef4444 !important;
    box-shadow: 0 0 12px #ef4444, 0 0 25px #ef4444 !important;
    transform: scale(1.2);
}

/* Laser Beam Overlay for NuunBot Module Indicator */
.laser-beam-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2147483646 !important;
}

.laser-beam-line {
    stroke: #ef4444;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px #ef4444);
    stroke-dasharray: 8 4;
    animation: laserDash 0.4s linear infinite;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.laser-beam-line.active {
    opacity: 0.95;
}

@keyframes laserDash {
    to {
        stroke-dashoffset: -12;
    }
}

/* Highlight Target Scanner - Clean Cyber Glow (No red spinning dashed lines) */
.bot-highlight-target {
    position: relative !important;
    z-index: 2147483645 !important;
    outline: 2px solid var(--accent-blue) !important;
    outline-offset: 4px;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4) !important;
    transition: all 0.3s ease;
}

/* Transformers Robot Animations */
.robot-visor-plate {
    transition: fill 0.3s ease, filter 0.3s ease;
}

#nuun-bot-container.laser-firing .robot-visor-plate {
    fill: url(#visorActiveGrad) !important;
}

/* Wing expansion on flight */
#nuun-bot-container.nuun-bot-flying .robot-left-wing {
    transform: rotate(-35deg) translate(-2px, 2px);
}

#nuun-bot-container.nuun-bot-flying .robot-right-wing {
    transform: rotate(35deg) translate(2px, 2px);
}

/* Arms tucking in on flight (Aerodynamic Flight Mode) */
#nuun-bot-container.nuun-bot-flying .robot-left-arm {
    transform: rotate(20deg) scaleY(0.85);
}

#nuun-bot-container.nuun-bot-flying .robot-right-arm {
    transform: rotate(-20deg) scaleY(0.85);
}

/* Arm pointing on laser-firing */
#nuun-bot-container.laser-firing .robot-right-arm {
    transform: rotate(-100deg) translate(-4px, -12px);
}

/* Idle animations */
.robot-head {
    animation: headFloat 4s ease-in-out infinite;
}

.robot-chest-reactor {
    animation: reactorPulse 2s ease-in-out infinite alternate;
}

.robot-left-arm {
    animation: armSwayLeft 3s ease-in-out infinite alternate;
}

.robot-right-arm {
    animation: armSwayRight 3.2s ease-in-out infinite alternate;
}

@keyframes headFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-1.5px) rotate(0.5deg);
    }
}

@keyframes reactorPulse {
    0% {
        opacity: 0.6;
        filter: drop-shadow(0 0 2px #8b5cf6);
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 0 10px #8b5cf6) drop-shadow(0 0 15px #8b5cf6);
    }
}

@keyframes armSwayLeft {
    0% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(3deg);
    }
}

@keyframes armSwayRight {
    0% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

/* ==========================================================================
   Nuun.io Client Handbook Dashboard Styling
   ========================================================================== */
.handbook-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: start;
    width: 100%;
}

.handbook-toc {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.handbook-toc-header {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-blue);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.85rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.toc-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(14, 165, 233, 0.4);
    color: var(--text-primary);
    transform: translateX(4px);
}

.toc-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.15);
}

.toc-chapter-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toc-chapter-icon {
    font-size: 1.05rem;
    color: var(--text-secondary);
    transition: color 0.25s;
}

.toc-item:hover .toc-chapter-icon {
    color: var(--accent-blue);
}

.toc-item.active .toc-chapter-icon {
    color: var(--accent-blue);
    filter: drop-shadow(0 0 5px var(--accent-blue));
}

.toc-item-badge {
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.toc-item.active .toc-item-badge {
    background: rgba(14, 165, 233, 0.2);
    color: var(--accent-blue);
    border-color: rgba(14, 165, 233, 0.3);
}

.handbook-viewer {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 2.5rem;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.handbook-viewer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
}

.handbook-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
}

.handbook-chapter-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.handbook-chapter-num {
    font-size: 0.72rem;
    color: var(--accent-blue);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.handbook-chapter-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.handbook-page-body {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.handbook-page-body h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-primary);
    font-size: 1.2rem;
    margin: 1.75rem 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 6px;
}

.handbook-page-body h3 i {
    color: var(--accent-blue);
}

.handbook-page-body p {
    margin-bottom: 1.25rem;
}

.handbook-page-body ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.handbook-page-body li {
    margin-bottom: 0.65rem;
    list-style-type: square;
    color: var(--text-secondary);
}

.handbook-page-body li strong {
    color: var(--text-primary);
}

.handbook-page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.handbook-page-num {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
}

.handbook-nav-btns {
    display: flex;
    gap: 10px;
}

.btn-handbook-nav {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-handbook-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
}

.btn-handbook-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Handbook Cover Page (PDF Export) --- */
.handbook-cover-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    height: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    background: #030712;
}

.handbook-cover-logo-wrapper {
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.4));
}

.handbook-cover-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.handbook-cover-title span {
    color: var(--accent-blue);
}

.handbook-cover-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.handbook-cover-toc {
    width: 100%;
    max-width: 550px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 2rem;
    text-align: left;
    margin-bottom: 4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.handbook-cover-toc h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent-blue);
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    letter-spacing: 1px;
}

.handbook-cover-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.handbook-cover-toc-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding-bottom: 0.35rem;
}

.handbook-cover-toc-item span:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.handbook-cover-toc-item span:last-child {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--accent-purple);
}

.handbook-cover-footer {
    position: absolute;
    bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pdf-page-break {
    page-break-after: always !important;
    break-after: page !important;
}

/* --- Handbook Header Action Buttons --- */
.btn-handbook-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-handbook-action:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* --- Premium OT/IoT Icon Custom Styling --- */
.ot-iot-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ot-iot-icon-wrapper .ot-icon {
    font-size: 1.25rem;
    color: #ef4444;
    transition: all 0.4s ease;
}

.ot-iot-icon-wrapper .iot-icon {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 0.6rem;
    color: #ffffff;
    background: #030712;
    border: 1px solid #ef4444;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    transition: all 0.4s ease;
    animation: iotPulse 2.2s infinite ease-in-out;
}

/* Hover effects */
.side-tab-item:hover .ot-iot-icon-wrapper {
    transform: scale(1.22) rotate(-6deg);
}

.side-tab-item:hover .ot-iot-icon-wrapper .ot-icon {
    color: #ff3c3c;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.9));
}

.side-tab-item:hover .ot-iot-icon-wrapper .iot-icon {
    color: #ef4444;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 12px #ef4444;
    animation: iotPulseFast 1.1s infinite ease-in-out;
}

@keyframes iotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 0 0 12px rgba(239, 68, 68, 1);
    }
}

@keyframes iotPulseFast {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
        filter: drop-shadow(0 0 5px #ef4444);
    }
}


/* --- Shaheen X OSINT Dashboard --- */
:root {
    --osint-accent: #ef4444;
}

.osint-container {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 20px;
    animation: fadeIn 0.8s ease-out;
}

.osint-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.osint-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    color: var(--osint-accent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.osint-search-panel {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.osint-target-box {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.osint-target-icon {
    color: var(--osint-accent);
    font-size: 1.2rem;
}

.osint-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.osint-input:focus {
    border-color: var(--osint-accent);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.btn-osint-scan {
    background: linear-gradient(135deg, var(--osint-accent), #b91c1c);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-osint-scan:hover {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.btn-osint-scan:disabled {
    background: #4b5563;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.osint-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
    margin-top: 5px;
}

.osint-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.osint-module-count {
    color: var(--text-secondary);
    font-weight: 600;
}

.osint-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-bottom: 4rem;
}

.osint-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 4px solid var(--osint-accent);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.osint-card h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.osint-card h3 i {
    color: var(--osint-accent);
}

.osint-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.osint-card-body {
    flex: 1;
}

.osint-feed-scroll {
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--osint-accent) transparent;
}

.osint-feed-scroll::-webkit-scrollbar {
    width: 6px;
}

.osint-feed-scroll::-webkit-scrollbar-thumb {
    background: var(--osint-accent);
    border-radius: 10px;
}

.osint-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 100px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

#btn-academy-materials.active {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: #0ea5e9 !important;
    color: #0ea5e9 !important;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.25) !important;
}

/* ==========================================================================
   Nuun.io Access Tiers Grid & Cards System CSS
   ========================================================================== */
.pricing-tiers-section {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 2rem;
    padding: 0 20px;
    animation: fadeIn 0.8s ease-out;
}

/* ==========================================================================
   Nuun.io Operational Ecosystem Layout CSS
   ========================================================================== */
.ecosystem-packages-container {
    animation: fadeIn 0.8s ease-out;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-top: 1.5rem;
}

@media (max-width: 992px) {
    .ecosystem-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.ecosystem-wheel-column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ecosystem-svg-container {
    width: 100%;
    max-width: 500px;
    position: relative;
    aspect-ratio: 2 / 1;
}

.ecosystem-svg {
    display: block;
    overflow: visible;
}

.ecosystem-segment {
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ecosystem-segment:hover {
    fill-opacity: 0.25;
    stroke-width: 3.5px;
}

.ecosystem-core-node:hover path {
    fill: rgba(30, 41, 59, 0.95);
    stroke: var(--accent-blue);
    stroke-width: 2.5px;
}

/* Concentric Pulse Rings Keyframes & Classes */
@keyframes ripple-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.ecosystem-pulse-ring {
    transform-origin: 300px 250px;
    animation: ripple-pulse 4s infinite cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.ecosystem-pulse-ring-1 {
    animation-delay: 0s;
}

.ecosystem-pulse-ring-2 {
    animation-delay: 1.33s;
}

.ecosystem-pulse-ring-3 {
    animation-delay: 2.66s;
}

/* Spinning Compass HUD Elements */
@keyframes spin-hud {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-hud-rev {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.hud-core-spinner {
    transform-origin: 300px 250px;
    animation: spin-hud 25s linear infinite;
    pointer-events: none;
}

.hud-core-spinner-rev {
    transform-origin: 300px 250px;
    animation: spin-hud-rev 15s linear infinite;
    pointer-events: none;
}

/* Compliance Scope Row Styles */
.details-compliance-row {
    margin-top: 0.8rem;
    padding: 0.75rem 1rem;
    background: rgba(3, 7, 18, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.6px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.details-compliance-row:hover {
    background: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.12);
}

.compliance-label,
.scope-label {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    margin-right: 4px;
}

.compliance-value {
    color: var(--text-secondary);
    font-weight: 600;
    transition: color 0.3s ease;
}

.scope-value {
    color: #0ea5e9;
    font-weight: 600;
    transition: color 0.3s ease;
}

.scope-separator {
    color: rgba(255, 255, 255, 0.12);
    font-weight: 300;
}

.ecosystem-details-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ecosystem-details-card {
    background: rgba(3, 7, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    min-height: 380px;
    justify-content: space-between;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.ecosystem-details-card.default-active {
    border-color: rgba(255, 255, 255, 0.08);
}

.details-panel-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.details-panel-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    font-size: 1.35rem;
    transition: all 0.3s ease;
}

.details-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    display: inline-block;
    margin-bottom: 4px;
}

.ecosystem-details-card h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}

.details-description {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.details-features-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.details-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: #cbd5e1;
}

.details-features-list li {
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.btn-details-cta {
    width: 100%;
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-details-cta:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

/* ==========================================================================
   Nuun.io 4-Column Access Tiers Grid & Cards System CSS
   ========================================================================== */
.pricing-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: stretch;
}

@media (min-width: 1200px) {
    .pricing-tiers-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pricing-tier-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(3, 7, 18, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.pricing-tier-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

/* Subtle glowing background orb for cards */
.tier-card-glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.pricing-tier-card:hover .tier-card-glow {
    opacity: 0.25;
}

/* Gold Theme (Free Tier) */
.pricing-tier-card.gold-theme {
    border-color: rgba(245, 158, 11, 0.15);
}

.pricing-tier-card.gold-theme:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 20px 45px rgba(245, 158, 11, 0.08), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.pricing-tier-card.gold-theme .tier-card-glow {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
}

/* Purple Theme (Pro Tier) */
.pricing-tier-card.pro-tier {
    border-color: rgba(139, 92, 246, 0.15);
}

.pricing-tier-card.pro-tier:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 45px rgba(139, 92, 246, 0.08), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.pricing-tier-card.pro-tier .tier-card-glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
}

/* Blue Theme (Enterprise Tier) */
.pricing-tier-card.enterprise-tier {
    border-color: rgba(14, 165, 233, 0.15);
}

.pricing-tier-card.enterprise-tier:hover {
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 20px 45px rgba(14, 165, 233, 0.08), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.pricing-tier-card.enterprise-tier .tier-card-glow {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, transparent 70%);
}

/* Red Theme (Incident Triage Tier) */
.pricing-tier-card.incident-tier {
    border-color: rgba(239, 68, 68, 0.15);
}

.pricing-tier-card.incident-tier:hover {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 20px 45px rgba(239, 68, 68, 0.08), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.pricing-tier-card.incident-tier .tier-card-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
}

/* Card Header with Top-Left Icon */
.tier-header-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

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

.tier-header-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.30rem;
    background: rgba(15, 23, 42, 0.7);
    transition: all 0.3s ease;
}

.pricing-tier-card.gold-theme .tier-header-icon-box {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.03);
    color: #fbbf24;
}

.pricing-tier-card.pro-tier .tier-header-icon-box {
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.03);
    color: #a78bfa;
}

.pricing-tier-card.enterprise-tier .tier-header-icon-box {
    border-color: rgba(14, 165, 233, 0.25);
    background: rgba(14, 165, 233, 0.03);
    color: #0ea5e9;
}

.pricing-tier-card.incident-tier .tier-header-icon-box {
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.03);
    color: #ef4444;
}

.pricing-tier-card:hover .tier-header-icon-box {
    transform: scale(1.08) rotate(-4deg);
}

.tier-badge {
    align-self: flex-start;
    font-size: 0.68rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.tier-badge.gold {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.tier-badge.purple {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.tier-badge.blue {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.tier-badge.red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Bold marked highlights in headers */
.tier-header-layout h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}

.tier-header-layout h3 mark {
    background: none;
    color: inherit;
    font-weight: 800;
    padding: 0 4px;
    border-radius: 4px;
}

.tier-header-layout h3 mark.gold {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.tier-header-layout h3 mark.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.tier-header-layout h3 mark.blue {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
}

.tier-header-layout h3 mark.red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tier-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 4px 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-suffix {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.tier-tagline {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.tier-features-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
    position: relative;
    z-index: 2;
}

.tier-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-icon {
    font-size: 0.95rem;
    margin-top: 3px;
    min-width: 18px;
    text-align: center;
}

.gold-text {
    color: #fbbf24;
}

.blue-text {
    color: #0ea5e9;
}

.purple-text {
    color: #a78bfa;
}

.red-text {
    color: #ef4444;
}

.feature-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-info strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #fff;
}

.feature-info p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}

.tier-cta-wrapper {
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.btn-tier-cta {
    width: 100%;
    padding: 0.8rem;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.btn-tier-cta.gold-bg {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
}

.btn-tier-cta.gold-bg:hover {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.btn-tier-cta.purple-bg {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}

.btn-tier-cta.purple-bg:hover {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.btn-tier-cta.blue-bg {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: #000;
    border: none;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.25);
}

.btn-tier-cta.blue-bg:hover {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
    transform: translateY(-1px);
}

.btn-tier-cta.red-bg {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}

.btn-tier-cta.red-bg:hover {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.btn-tier-cta:active {
    transform: translateY(0);
}

/* Glassmorphic Cyber Card Sections */
.card-glass-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.8rem;
    margin-bottom: 0.6rem;
}

.card-glass-section {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.02);
}

.card-glass-section:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.09);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* Track Terminal rotation micro-animations */
.track-terminal {
    transition: all 0.3s ease;
}

.track-terminal:hover circle {
    stroke-width: 2px;
}

.track-terminal:hover text {
    fill: #fff !important;
}

/* Rotating spin compass trims origin mapping */
.hud-core-spinner,
.hud-core-spinner-rev {
    transform-origin: 250px 250px !important;
}

.ecosystem-pulse-ring {
    transform-origin: 250px 250px !important;
}

/* --- Interactive Country Operations Dashboard --- */
.country-card {
    background: rgba(10, 20, 42, 0.45);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.country-card:hover {
    background: rgba(204, 164, 59, 0.08);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: var(--glow-shadow);
}

.country-card.active-card {
    background: rgba(204, 164, 59, 0.12);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(204, 164, 59, 0.3);
}

.country-card .country-flag {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.1));
}

.country-card .country-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.country-card .user-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: auto;
}

.country-card .pulse-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent;
}

.country-card.blinking-alert .pulse-indicator {
    background-color: #10b981;
    animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 8px 4px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.user-detail-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(204, 164, 59, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.btn-toggle-user-logs {
    transition: color 0.2s ease;
}

.btn-toggle-user-logs:hover {
    color: var(--text-primary) !important;
}

/* --- Symmetrical Monogram Widgets --- */
.search-operations-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    margin: 2rem 0;
}

.shortcut-monogram {
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    width: 260px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.03);
}

.shortcut-monogram:hover {
    background: rgba(204, 164, 59, 0.08);
    border-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: var(--glow-shadow);
}

.shortcut-monogram i {
    transition: transform 0.3s ease;
}

.shortcut-monogram:hover i {
    transform: scale(1.1);
}

/* Media query to stack monograms below the search on smaller screens */
@media (max-width: 1100px) {
    .search-operations-wrapper {
        flex-direction: column;
        gap: 1.5rem;
    }

    #search-portal {
        order: -1;
        /* Keep search engine on top when stacked */
        width: 100%;
    }

    .shortcut-monogram {
        width: 100%;
        max-width: 650px;
    }
}

/* Gated Monogram Styles (Premium access controls) */
.shortcut-monogram.gated {
    position: relative;
    opacity: 0.65;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shortcut-monogram.gated::after {
    content: "🔒 Premium";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 60, 60, 0.85);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 5px rgba(255, 60, 60, 0.4);
}

.shortcut-monogram.gated:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    border-color: rgba(255, 60, 60, 0.5);
    box-shadow: 0 0 15px rgba(255, 60, 60, 0.15);
}

.side-tab-item.gated {
    position: relative;
    opacity: 0.75;
    cursor: pointer;
}

.side-tab-item.gated::after {
    content: "🔒 Premium";
    position: absolute;
    top: -8px;
    right: 8px;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    z-index: 10;
}

/* Central Dashboards Row navigation styles */
#tab-war-room.side-tab-item {
    width: 250px !important;
    height: 56px !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
    border-radius: 12px !important;
    background: rgba(167, 139, 250, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.75rem 1.25rem !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    transform: none !important;
}

#tab-war-room.side-tab-item:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    border-color: rgba(167, 139, 250, 0.7) !important;
    box-shadow: 0 0 25px rgba(167, 139, 250, 0.35) !important;
    transform: translateY(-2px) !important;
}

#tab-war-room.side-tab-item:hover i {
    transform: scale(1.1);
}

#tab-unified.side-tab-item {
    width: 250px !important;
    height: 56px !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px !important;
    background: rgba(16, 185, 129, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.75rem 1.25rem !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    transform: none !important;
}

#tab-unified.side-tab-item:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.7) !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-2px) !important;
}

#tab-unified.side-tab-item:hover i {
    transform: scale(1.1);
}

#tab-ai-hub.side-tab-item,
#tab-financial-impact.side-tab-item {
    min-width: 290px !important;
    width: auto !important;
    height: 56px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.75rem 1.25rem !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    transform: none !important;
}

#tab-ai-hub.side-tab-item {
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
    background: rgba(14, 165, 233, 0.06) !important;
}

#tab-ai-hub.side-tab-item:hover {
    background: rgba(14, 165, 233, 0.16) !important;
    border-color: rgba(14, 165, 233, 0.8) !important;
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.35) !important;
    transform: translateY(-2px) !important;
}

#tab-financial-impact.side-tab-item {
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    background: rgba(245, 158, 11, 0.06) !important;
}

#tab-financial-impact.side-tab-item:hover {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.8) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.35) !important;
    transform: translateY(-2px) !important;
}

#tab-financial-impact.side-tab-item .tab-text {
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
}

.central-dashboards-row .side-tab-item::before,
.central-dashboards-row .side-tab-item::after {
    display: none !important;
}

#tab-war-room.side-tab-item .tab-content-wrapper,
#tab-unified.side-tab-item .tab-content-wrapper,
#tab-ai-hub.side-tab-item .tab-content-wrapper,
#tab-financial-impact.side-tab-item .tab-content-wrapper {
    opacity: 1 !important;
    transform: none !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* --- PDF Export & Print Page-Break & Layout Rules --- */
@page {
    size: A4 portrait;
    margin: 0 !important;
}

@media print {

    /* Reset Heights & Overflow to prevent horizontal/vertical truncation */
    html,
    body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: static !important;
        background: #040914 !important;
        color: #f8fafc !important;
    }

    .ui-overlay,
    #app,
    main,
    .main-content,
    .workspace-container,
    .modal,
    .modal-content,
    .cve-card,
    #search-results,
    #ai-hub,
    .report-wrap,
    .report-body,
    #cve-dossier-wrapper,
    #cve-report-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: static !important;
        background: transparent !important;
        color: #f8fafc !important;
    }

    /* Hide non-printable web UI elements */
    #vanta-bg,
    .threat-ticker-container,
    header,
    nav,
    .navbar,
    .top-bar,
    .side-tab-bar,
    .sidebar,
    .modal-close,
    .close-btn,
    button:not(.print-keep),
    .no-print,
    #open-auth-modal,
    .global-search-bar {
        display: none !important;
    }

    /* Force 100% Width on Report Containers and Reset Rigid Layouts */
    .report-wrap {
        padding: 10mm 12mm !important;
        background: #040914 !important;
    }

    .report-wrap,
    .report-body,
    .cve-card,
    #cve-dossier-wrapper,
    #cve-report-container,
    .intel-chapter,
    .dossier-chapter,
    .report-section,
    .grid,
    .grid-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .report-body *,
    .cve-card * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Responsive adjustment for side-by-side grid columns in print */
    .intel-chapter div[style*="grid-template-columns"],
    .cve-card div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Allow outer report containers and chapters to flow naturally across page boundaries */
    .intel-chapter,
    .dossier-chapter,
    .report-section,
    .cve-card,
    .report-wrap,
    .report-body {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Protect small individual leaf cards and advisory blocks from splitting awkwardly across pages */
    .intel-chapter>div,
    .intel-chapter div[style*="border"],
    .intel-chapter div[style*="background"],
    .siem-card,
    .sigma-block,
    .ssi-intel-card,
    .card,
    .code-block,
    .bluf-item,
    .action-card,
    .remediation-section-card,
    tr,
    pre,
    code,
    .siem-code {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Prevent orphan headers at bottom of page */
    h1,
    h2,
    h3,
    h4,
    .rpt-header,
    .intel-chapter h2,
    .intel-chapter h3 {
        page-break-after: avoid !important;
        break-after: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Code & Text Wrapping for Print */
    pre,
    code,
    .siem-code,
    .report-body pre,
    .report-body code,
    .report-body li,
    li {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
        overflow: visible !important;
    }
}

/* ==========================================================================
   NUUN STORY: THE PURSUIT OF CYBER WISDOM & PRECISION (UI STYLES)
   ========================================================================== */
.btn-nav-story {
    background: rgba(204, 164, 59, 0.08) !important;
    border: 1px solid rgba(204, 164, 59, 0.35) !important;
    color: #cca43b !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 12px rgba(204, 164, 59, 0.15) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.btn-nav-story:hover {
    background: rgba(204, 164, 59, 0.22) !important;
    border-color: #cca43b !important;
    box-shadow: 0 0 20px rgba(204, 164, 59, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.story-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 9, 20, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, backdrop-filter 0.35s ease;
}

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

.story-modal-container {
    background: linear-gradient(145deg, rgba(8, 16, 38, 0.95), rgba(4, 9, 20, 0.98));
    border: 1px solid rgba(204, 164, 59, 0.3);
    box-shadow: 0 0 40px rgba(204, 164, 59, 0.18), 0 20px 50px rgba(0, 0, 0, 0.8);
    border-radius: 18px;
    max-width: 920px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    padding: 2.5rem;
    color: #f1f5f9;
    font-family: 'Inter', sans-serif;
    transform: scale(0.96) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.story-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.story-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ffffff;
    transform: rotate(90deg);
}

.story-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    background: rgba(204, 164, 59, 0.12);
    border: 1px solid rgba(204, 164, 59, 0.4);
    color: #cca43b;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.story-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    background: linear-gradient(135deg, #ffffff 30%, #cca43b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-quote {
    font-style: italic;
    color: #cca43b;
    border-left: 3px solid #cca43b;
    padding-left: 1rem;
    margin: 1.25rem 0 2rem 0;
    font-size: 1.05rem;
    background: rgba(204, 164, 59, 0.04);
    padding: 0.8rem 1.2rem;
    border-radius: 0 8px 8px 0;
}

.story-section {
    margin-bottom: 2rem;
}

.story-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #6366f1;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-section p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.story-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem 0;
}

.story-pillar-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.35rem;
    transition: all 0.3s ease;
}

.story-pillar-card:hover {
    border-color: rgba(204, 164, 59, 0.4);
    background: rgba(204, 164, 59, 0.04);
    transform: translateY(-2px);
}

.story-pillar-num {
    font-size: 0.85rem;
    font-weight: 800;
    color: #cca43b;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.story-pillar-title {
    font-family: 'Space Grotesk', sans-serif;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.story-pillar-desc {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.55;
}

.story-footer-note {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(204, 164, 59, 0.1));
    border: 1px solid rgba(204, 164, 59, 0.25);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 2rem;
}

.story-footer-note h4 {
    font-family: 'Space Grotesk', sans-serif;
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.story-footer-note p {
    color: #cbd5e1;
    font-size: 0.95rem;
    margin: 0;
}

/* ==========================================================================
   CYBER RISK & FINANCIAL IMPACT INDEX (CRFI) — DEFENSE-GRADE STYLES
   ========================================================================== */

.financial-impact-container {
    width: 100%;
    max-width: 1320px;
    margin: 1rem auto 2.5rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Scenario Toolbar (Single-Row Modern Bar) */
.fi-scenario-toolbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
}

.fi-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    padding: 7px 12px;
    flex: 0 0 240px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.fi-search-box:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.fi-search-icon {
    color: #38bdf8;
    font-size: 0.88rem;
}

.fi-input-bare {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    width: 100%;
}

.fi-slider-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 280px;
}

.fi-slider-label {
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fi-slider-label strong {
    color: #f59e0b;
    font-weight: 800;
}

.fi-slider-bar {
    width: 100%;
    accent-color: #f59e0b;
    cursor: pointer;
    height: 5px;
}

.fi-actions-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-fi-recalc-action {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-fi-recalc-action:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.btn-fi-regional-action {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    white-space: nowrap;
}

.btn-fi-regional-action:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

.btn-fi-close-action {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-fi-close-action:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* ==============================================================================
   MAIN EXECUTIVE DOSSIER CARD (FORTUNE 500 BOARDROOM PRESENTATION)
   ============================================================================== */
.fi-dossier-card {
    background: rgba(10, 15, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(16px);
}

/* Top Masthead */
.fi-dossier-masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-wrap: wrap;
    gap: 12px;
}

.fi-masthead-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fi-brand-badge {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 1.15rem;
}

.fi-dossier-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    color: #f8fafc;
    margin: 0;
    letter-spacing: -0.3px;
}

.fi-dossier-sub {
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
}

.fi-cve-text-highlight {
    color: #38bdf8;
    font-weight: 800;
    font-family: monospace;
}

.fi-masthead-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fi-confidential-pill {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.fi-status-pill {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Grids & Cards */
.fi-grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.fi-grid-two-col-bottom {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 0.85rem;
}

.fi-reading-guideline-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(2, 6, 23, 0.7);
    border: 1px dashed rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    padding: 5px 10px;
    flex-wrap: wrap;
}

.fi-guide-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.fi-guide-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.fi-guide-step {
    font-size: 0.72rem;
    color: #cbd5e1;
}

.fi-guide-arrow {
    font-size: 0.6rem;
    color: #64748b;
}

.fi-block-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fi-target-system-pill {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.4);
    color: #38bdf8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

.fi-situation-brief-card {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.fi-situation-content {
    font-size: 0.84rem;
    line-height: 1.45;
    color: #e2e8f0;
    background: rgba(2, 6, 23, 0.6);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #38bdf8;
}

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

.fi-block-heading {
    font-size: 0.82rem;
    font-weight: 800;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.fi-block-subtag {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
}

/* Triple Metrics Grid (3 Side-by-Side Tiles) */
.fi-triple-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem;
}

.fi-metric-box {
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.6rem 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.fi-metric-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.metric-blue .fi-metric-num {
    color: #38bdf8;
}

.metric-amber .fi-metric-num {
    color: #f59e0b;
}

.metric-red .fi-metric-num {
    color: #f43f5e;
}

.fi-metric-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #cbd5e1;
}

.fi-metric-sub {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
}

/* Cost of Inaction Alert Box */
.fi-inaction-alert-box {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.fi-inaction-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fi-inaction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
}

.fi-inaction-card {
    background: rgba(2, 6, 23, 0.7);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    padding: 6px 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fi-inaction-card-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fcd34d;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fi-inaction-card-body {
    font-size: 0.72rem;
    color: #cbd5e1;
    line-height: 1.35;
}

/* 72-Hour Governance & Mitigation SLA Matrix */
.fi-sla-matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem;
}

.fi-sla-col-card {
    background: rgba(2, 6, 23, 0.75);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fi-sla-col-card.border-critical {
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.fi-sla-col-card.border-high {
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.fi-sla-col-header {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 5px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.badge-priority-crit {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-bottom: 1px solid rgba(239, 68, 68, 0.35);
}

.badge-priority-high {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
    border-bottom: 1px solid rgba(249, 115, 22, 0.35);
}

.fi-sla-col-body {
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.fi-sla-role-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.fi-sla-role-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fi-sla-role-header {
    font-size: 0.68rem;
    font-weight: 800;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}

.fi-sla-role-text {
    font-size: 0.73rem;
    color: #cbd5e1;
    line-height: 1.3;
}

/* Compliance Strip */
.fi-compliance-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 6px 12px;
    gap: 10px;
    flex-wrap: wrap;
}

.fi-compliance-badges-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fi-compliance-pill {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 5px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
}

.fi-comp-fw {
    font-weight: 800;
    color: #c084fc;
}

.fi-comp-cl {
    font-family: monospace;
    color: #e9d5ff;
    font-size: 0.68rem;
    font-weight: 700;
}

.fi-executive-seal {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px dashed rgba(16, 185, 129, 0.5);
    padding: 3px 8px;
    border-radius: 6px;
    color: #10b981;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
}

/* Dossier Footer Meta */
.fi-dossier-footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 8px;
}

/* One-Click Action Buttons */
.fi-bottom-actions-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 0.35rem;
}

.btn-fi-pdf-download {
    background: #0284c7;
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-fi-pdf-download:hover {
    background: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
}

/* ==============================================================================
   NUUN.IO 2-PAGE EXECUTIVE PORTRAIT DOSSIER ENGINE (TARGET LUXURY BOARDROOM SYSTEM)
   ============================================================================== */
.nuun-dossier-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    align-items: center;
}

.nuun-dossier-page {
    width: 100%;
    max-width: 820px;
    min-height: 1080px;
    background: #081120;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 10px;
    padding: 26px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(56, 189, 248, 0.04);
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.nuun-page-number-tag {
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'Space Grotesk', sans-serif;
}

/* ==============================================================================
   PAGE 1: COVER PAGE (EXACT TARGET LUXURY DESIGN)
   ============================================================================== */
.nuun-cover-page {
    background: radial-gradient(circle at 50% 14%, #112d4e 0%, #081427 45%, #040914 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 36px 24px 36px;
    position: relative;
}

/* High-Tech Corner Architectural Accents */
.nuun-cover-page::before,
.nuun-cover-page::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
}
.nuun-cover-page::before {
    top: 8px;
    left: 8px;
    border-top: 2px solid #eab308;
    border-left: 2px solid #eab308;
}
.nuun-cover-page::after {
    bottom: 8px;
    right: 8px;
    border-bottom: 2px solid #38bdf8;
    border-right: 2px solid #38bdf8;
}

.nuun-cover-brand-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    position: relative;
}

/* Floating Shield Emblem - Unboxed with screen blend */
.nuun-cover-shield-img {
    width: 175px;
    height: 175px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 25px rgba(245, 158, 11, 0.55)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.45));
    margin: 4px auto 8px auto;
    display: block;
}

/* Luxury Champagne-Gold Title Typography */
.nuun-cover-main-title {
    font-family: 'Cinzel', 'Space Grotesk', serif, sans-serif;
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #fef08a 52%, #eab308 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(234, 179, 8, 0.3));
    margin: 8px 0 4px 0;
}

.nuun-cover-subtitle {
    font-size: 0.94rem;
    color: #cbd5e1;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-align: center;
}

/* Cyber HUD Target Telemetry Box with Bracket Corners */
.nuun-cover-target-strip {
    position: relative;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 4px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.88rem;
    margin: 14px 0 10px 0;
    box-shadow: inset 0 0 15px rgba(56, 189, 248, 0.08), 0 4px 20px rgba(0, 0, 0, 0.5);
}
.nuun-cover-target-strip::before,
.nuun-cover-target-strip::after {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 8px;
    border-top: 2px solid #38bdf8;
    border-bottom: 2px solid #38bdf8;
    pointer-events: none;
}
.nuun-cover-target-strip::before {
    left: -2px;
    border-left: 2px solid #38bdf8;
}
.nuun-cover-target-strip::after {
    right: -2px;
    border-right: 2px solid #38bdf8;
}

.nuun-cover-target-bracket-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.nuun-target-prop {
    color: #94a3b8;
    font-weight: 600;
}

.nuun-cover-asset-pill {
    color: #38bdf8;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.nuun-cover-status-crit {
    color: #ef4444;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
}

/* Executive Financial Exposure Snapshot (Page 1) */
.nuun-cover-financial-snapshot {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.95fr;
    gap: 12px;
    margin: 10px 0 12px 0;
}

.nuun-cover-kpi-card {
    background: rgba(11, 23, 44, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: inset 0 0 14px rgba(56, 189, 248, 0.05), 0 4px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nuun-cover-kpi-blue {
    border-top: 2px solid #38bdf8;
}

.nuun-cover-kpi-amber {
    border-top: 2px solid #f59e0b;
}

.nuun-cover-kpi-crimson {
    border-top: 2px solid #ef4444;
}

.nuun-cover-kpi-title {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.nuun-cover-kpi-value {
    font-family: 'Space Grotesk', 'Inter', monospace, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.nuun-kpi-qar-val {
    font-size: 0.82rem;
    color: #f59e0b;
    font-weight: 700;
    margin-left: 4px;
}

.nuun-cover-kpi-sub {
    font-size: 0.70rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.25;
}

/* Services Container Block */
.nuun-cover-services-block {
    background: rgba(8, 18, 36, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 8px;
    padding: 16px 24px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Beveled Metallic Plaque / Banner */
.nuun-cover-services-header {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-top: 1px solid rgba(245, 158, 11, 0.65);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0% 50%);
    padding: 7px 26px;
    text-align: center;
    margin: 0 auto 6px auto;
    width: fit-content;
    font-size: 0.88rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.nuun-cover-services-intro {
    font-size: 0.84rem;
    color: #cbd5e1;
    margin: 2px 0 8px 0;
    text-align: center;
}

.nuun-cover-services-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nuun-cover-service-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: transparent;
    padding: 2px 0;
}

.nuun-service-idx {
    font-size: 0.88rem;
    font-weight: 800;
    color: #38bdf8;
    min-width: 16px;
}

.nuun-service-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.nuun-service-name {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fef08a;
    letter-spacing: 0.2px;
}

.nuun-service-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* Cover Page Footer Bar */
.nuun-cover-footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 12px;
}

.nuun-cover-footer-meta-line {
    color: #94a3b8;
}

.nuun-cover-footer-badge-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nuun-cover-class-badge {
    color: #f59e0b;
    font-weight: 700;
}

.nuun-cover-provenance {
    color: #10b981;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ==============================================================================
   PAGE 2: REPORT PAGE
   ============================================================================== */
.nuun-report-page {
    gap: 8px;
}

.nuun-mini-shield-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

.fi-critical-exploit-card {
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.06) !important;
}

.fi-financial-risk-card {
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

.metric-crimson .fi-metric-num {
    color: #ef4444;
}

/* Section 3: Chevron Process Timeline */
.fi-timeline-chevron-card {
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.fi-chevron-timeline-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.fi-chevron-step {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fi-chevron-arrow-body {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
    padding: 7px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.fi-chevron-time {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    color: #bae6fd;
    display: block;
}

.fi-chevron-harm {
    font-size: 0.71rem;
    font-weight: 700;
    color: #ffffff;
    display: block;
    margin-top: 2px;
    line-height: 1.22;
}

.fi-chevron-action-box {
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.7rem;
    color: #cbd5e1;
    line-height: 1.25;
}

.fi-chevron-action-box strong {
    color: #38bdf8;
}

/* PDF Page Break Handler */
.html2pdf__page-break {
    page-break-before: always !important;
    break-before: page !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Export Mode for Strict 2-Page Portrait A4 */
.pdf-portrait-2page-export {
    width: 790px !important;
    max-width: 790px !important;
    margin: 0 auto !important;
}

.pdf-portrait-2page-export .nuun-dossier-page {
    width: 790px !important;
    max-width: 790px !important;
    min-height: 1040px !important;
    max-height: 1055px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    background: #0a0f1e !important;
    box-shadow: none !important;
}

.pdf-portrait-2page-export .nuun-cover-shield-img {
    width: 140px !important;
    height: 140px !important;
}

.pdf-portrait-2page-export .nuun-cover-main-title {
    font-size: 1.55rem !important;
}

.pdf-portrait-2page-export .fi-dossier-title {
    font-size: 1.05rem !important;
}

.pdf-portrait-2page-export .fi-block-card {
    padding: 5px 9px !important;
    gap: 3px !important;
}

.pdf-portrait-2page-export .fi-situation-content {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 5px 9px !important;
}

.pdf-portrait-2page-export .fi-sla-col-body {
    padding: 5px 7px !important;
    gap: 3px !important;
}

.pdf-portrait-2page-export .fi-sla-role-text {
    font-size: 0.67rem !important;
    line-height: 1.2 !important;
}

/* Custom Modal Dialog Styles */
.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-dialog-custom {
    background: #0f172a;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop 0.25s ease-out;
}

@keyframes modalPop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.95);
}

.btn-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-modal-close:hover {
    color: #fff;
}

.modal-body-custom {
    padding: 20px;
    overflow-y: auto;
    max-height: 70vh;
}

.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.form-group-custom label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.4px;
}

.modal-input,
.modal-textarea {
    background: #020617;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #f8fafc;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input:focus,
.modal-textarea:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.modal-footer-custom {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.95);
}

.btn-modal-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.btn-modal-primary:hover {
    opacity: 0.9;
}

.btn-modal-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}

/* Print Optimization for Boardroom PDF */
@media print {
    body.printing-financial * {
        visibility: hidden;
    }

    body.printing-financial #financial-impact-dashboard,
    body.printing-financial #financial-impact-dashboard * {
        visibility: visible;
    }

    body.printing-financial #financial-impact-dashboard {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #fff !important;
        color: #000 !important;
    }

    body.printing-financial .financial-header,
    body.printing-financial .financial-scenario-bar,
    body.printing-financial .fi-bottom-actions,
    body.printing-financial .btn-close-dashboard {
        display: none !important;
    }

    body.printing-financial .fi-briefing-sheet {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    body.printing-financial .fi-section-block,
    body.printing-financial .fi-kpi-card,
    body.printing-financial .fi-milestone-card,
    body.printing-financial .fi-compliance-card {
        background: #f8fafc !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    body.printing-financial .fi-threat-text,
    body.printing-financial .fi-milestone-task,
    body.printing-financial .fi-compliance-title {
        color: #0f172a !important;
    }
}