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

/* Spinner animation for lazy loading */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

:root {
    /* Deep Obsidian — Premium Dark Theme (Default) */
    --bg-primary: #0a0a0f;
    --bg-secondary: #0f1117;
    --bg-tertiary: #161822;
    --bg-elevated: #1a1d2b;
    --text-primary: #e4e5ea;
    --text-secondary: #8b8fa3;
    --text-muted: #4e5263;
    --border-color: #1e2030;
    --border-subtle: rgba(255, 255, 255, 0.04);
    --accent-blue: #6c8aff;
    --accent-blue-hover: #5470e0;
    --accent-glow: rgba(108, 138, 255, 0.15);
    --input-bg: #0d0e14;
    --card-bg: #0f1117;
    --modal-bg: #0f1117;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --glass-bg: rgba(15, 17, 23, 0.72);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glow-primary: rgba(108, 138, 255, 0.08);
    --glow-accent: rgba(139, 92, 246, 0.06);
    /* Theme-aware interaction colors */
    --hover-bg: rgba(108, 138, 255, 0.06);
    --hover-border: rgba(108, 138, 255, 0.15);
    --hover-glow: rgba(108, 138, 255, 0.08);
    --focus-border: rgba(108, 138, 255, 0.3);
    --focus-glow: rgba(108, 138, 255, 0.08);
    --card-hover-border: rgba(108, 138, 255, 0.1);
    --card-hover-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 0 20px rgba(108, 138, 255, 0.04);
    --table-hover-bg: rgba(108, 138, 255, 0.03);
    --table-border: rgba(255, 255, 255, 0.03);
    --table-header-bg: rgba(255, 255, 255, 0.02);
    --accent-line: linear-gradient(90deg, transparent, rgba(108, 138, 255, 0.15), transparent);
    --nav-active-bg: linear-gradient(135deg, rgba(108, 138, 255, 0.15), rgba(139, 92, 246, 0.1));
    --nav-active-border: rgba(108, 138, 255, 0.2);
    --nav-active-bar: linear-gradient(180deg, #6c8aff, #8b5cf6);
    /* Status colors — refined for deep dark */
    --status-met: #34d399;
    --status-not-met: #f87171;
    --status-partial: #fbbf24;
    --status-not-assessed: #4e5263;
    --risk-low: #34d399;
    --risk-moderate: #fbbf24;
    --risk-high: #f87171;
}

/* Legacy bokeh animations (kept for potential fallback / other uses) */
@keyframes cyber-scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}
@keyframes subtle-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: transparent;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    position: relative;
    overflow-x: hidden;
}

/* Background handled by #purple-bg-canvas — pseudo-elements disabled */
body::before,
body::after {
    display: none;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: linear-gradient(180deg, rgba(15, 17, 23, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
    padding: 12px 16px 12px 56px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(135deg, var(--glow-primary), transparent);
}

.sidebar-header h1 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.sidebar-header p {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0;
    letter-spacing: -0.01em;
}

.sidebar-nav {
    padding: 16px;
    flex: 1;
}

.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 2px;
    position: relative;
}

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

.nav-btn.active {
    background: var(--nav-active-bg);
    border-color: var(--nav-active-border);
    color: var(--text-primary);
    box-shadow: 0 0 20px var(--hover-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--nav-active-bar);
    border-radius: 0 3px 3px 0;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--glass-border);
}

.export-btn, .save-btn, .load-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--glass-border);
    background: var(--hover-bg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
}

.export-btn:hover, .save-btn:hover, .load-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--hover-border);
    box-shadow: 0 0 16px var(--hover-glow);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 260px;
    padding: 16px 24px;
    overflow-y: auto;
    height: 100vh;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

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

.header-left h2 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

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

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

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 8px 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box:focus-within {
    border-color: var(--focus-border);
    box-shadow: 0 0 20px var(--focus-glow);
}

.search-box svg {
    color: var(--text-muted);
}

.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.83rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    width: 200px;
}

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

.filter-select {
    background: var(--glass-bg);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-size: 0.83rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    cursor: pointer;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-select:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 20px var(--focus-glow);
}

.filter-select option {
    background-color: var(--bg-secondary);
}

.filter-select.level-select {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border-color: rgba(245, 158, 11, 0.3);
    font-weight: 600;
    color: #fbbf24;
}

.filter-select.level-select:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

/* Revision Toggle (Rev 2 / Rev 3) */
.revision-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.revision-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.revision-toggle {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
}

.rev-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

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

.rev-btn.active {
    background: var(--nav-active-bg);
    color: var(--accent-blue);
}

.rev-btn.active[data-rev="r3"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15));
    color: #34d399;
    border-left: 1px solid rgba(16, 185, 129, 0.2);
}

/* Rev 3 Info Banner */
.r3-info-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.03));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.r3-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.r3-banner-icon {
    color: #34d399;
    flex-shrink: 0;
    margin-top: 2px;
}

.r3-banner-text strong {
    color: #34d399;
    font-size: 0.95rem;
}

.r3-banner-text p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
    line-height: 1.5;
}

.r3-banner-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.r3-migrate-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    cursor: pointer;
    transition: all 0.2s ease;
}

.r3-migrate-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Rev 3 Control Badges */
.rev3-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

.rev3-badge.new {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.rev3-badge.enhanced {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.rev3-badge.renumbered {
    background: rgba(124, 58, 237, 0.1);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

/* Rev2→Rev3 Transition Badges (Objective-Level) */
.rev3-transition-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 6px;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: 0.2px;
}
.rev3-transition-badge.withdrawn {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.25);
}
.rev3-transition-badge.enhanced {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.rev3-transition-badge.new-in-r3 {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.rev3-transition-badge.consolidated {
    background: rgba(108, 138, 255, 0.1);
    color: #8ba2ff;
    border: 1px solid rgba(108, 138, 255, 0.2);
}

/* ODP Display */
.odp-section {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    margin-bottom: 4px;
    backdrop-filter: saturate(130%) blur(8px);
    -webkit-backdrop-filter: saturate(130%) blur(8px);
}

.odp-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a78bfa;
    cursor: pointer;
    user-select: none;
}

.odp-section-header svg {
    transition: transform 0.2s ease;
}

.odp-section-header.expanded svg {
    transform: rotate(90deg);
}

.odp-list {
    margin-top: 8px;
    padding-left: 4px;
}

.odp-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.odp-item .odp-label {
    color: #a78bfa;
    font-weight: 500;
    white-space: nowrap;
}

/* Progress Bar */
.progress-bar-container {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.progress-stats span:first-child {
    color: var(--text-secondary);
}

.progress-stats span:last-child {
    font-weight: 600;
    color: #6c8aff;
}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}

.progress-met {
    background-color: var(--status-met);
    height: 100%;
    transition: width 0.3s;
}

.progress-partial {
    background-color: var(--status-partial);
    height: 100%;
    transition: width 0.3s;
}

.progress-not-met {
    background-color: var(--status-not-met);
    height: 100%;
    transition: width 0.3s;
}

/* Controls List */
.controls-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-family {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s;
}

.control-family:hover {
    border-color: var(--card-hover-border);
}

.family-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.015);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.family-title h3 {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.family-id {
    background: var(--nav-active-bg);
    color: var(--accent-blue);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--card-hover-border);
}

.family-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.stat-badge .count {
    font-weight: 600;
    min-width: 20px;
}

.stat-badge.met .count { color: var(--status-met); }
.stat-badge.partial .count { color: var(--status-partial); }
.stat-badge.not-met .count { color: var(--status-not-met); }

.family-chevron {
    transition: transform 0.2s;
}

.family-header.expanded .family-chevron {
    transform: rotate(180deg);
}

.family-controls {
    display: none;
    flex-direction: column;
    padding: 0;
}

.family-controls.expanded {
    display: flex;
    flex-direction: column;
}

/* Control Item */
.control-item {
    border-top: 1px solid var(--border-color);
    width: 100%;
    display: block;
}

.control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

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

.control-info {
    flex: 1;
}

.control-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 4px;
    line-height: 1.4;
}

.control-name {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.control-chevron {
    margin-left: 16px;
    transition: transform 0.2s;
    color: var(--text-muted);
}

.control-header.expanded .control-chevron {
    transform: rotate(180deg);
}

.control-objectives {
    display: none;
    background: rgba(10, 10, 15, 0.5);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
}

.control-objectives.expanded {
    display: block;
}

/* Objective Item */
.objective-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top: 1px solid var(--border-color);
}

.objective-main {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px 16px 12px;
    gap: 8px;
}

.objective-expand {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: transform 0.2s, color 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
}

.objective-expand:hover {
    color: var(--primary);
}

.objective-item.expanded .objective-expand {
    transform: rotate(180deg);
}

.objective-details {
    display: none;
    padding: 0 20px 0 40px;
    background: rgba(15, 17, 23, 0.6);
    border-top: 1px solid var(--glass-border);
}

.objective-item.expanded .objective-details {
    display: block;
    padding: 0 20px 16px 40px;
}

.detail-row {
    font-size: 0.8rem;
    padding: 8px 0;
    letter-spacing: -0.01em;
}

.detail-label {
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: monospace;
}

.objective-info {
    flex: 1;
}

.objective-id {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.objective-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 400;
}

.objective-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.status-btn {
    padding: 5px 14px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.status-btn:hover {
    border-color: var(--hover-border);
    background: var(--hover-bg);
    transform: translateY(-1px);
}

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

.status-btn.met {
    background: linear-gradient(135deg, #34d399, #10b981);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 12px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}

.status-btn.met:hover {
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

.status-btn.not-met {
    background: linear-gradient(135deg, #f87171, #ef4444);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 12px rgba(248, 113, 113, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}

.status-btn.not-met:hover {
    box-shadow: 0 4px 20px rgba(248, 113, 113, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

.status-btn.partial {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}

.status-btn.partial:hover {
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

.poam-link {
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.poam-link.visible {
    display: flex;
}

.poam-link:hover {
    border-color: var(--hover-border);
    color: var(--accent-blue);
    background: var(--hover-bg);
    transform: translateY(-1px);
}

.poam-link.has-data {
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.06);
}

/* ═══════════════════════════════════════════════
   POA&M VIEW — Modern Table + Empty State
   ═══════════════════════════════════════════════ */

.poam-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.poam-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.poam-empty::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-line);
}

.poam-empty svg {
    margin-bottom: 16px;
    color: var(--text-muted);
    opacity: 0.5;
}

.poam-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 48px var(--glow-primary);
}

.poam-table th,
.poam-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.poam-table th {
    background: rgba(255, 255, 255, 0.02);
    font-weight: 600;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    position: relative;
}

.poam-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-line);
}

.poam-table td {
    font-size: 0.82rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

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

.poam-table tr {
    transition: background 0.15s;
}

.poam-table tr:hover td {
    background: var(--table-hover-bg);
}

.risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.risk-badge.low {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #34d399;
}

.risk-badge.moderate {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.risk-badge.high {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.not-met {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-badge.partial {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.edit-poam-btn {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.edit-poam-btn:hover {
    border-color: var(--hover-border);
    color: var(--accent-blue);
    background: var(--hover-bg);
    transform: translateY(-1px);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover {
    background: var(--hover-bg);
    border-color: var(--hover-border);
    box-shadow: 0 0 16px var(--hover-glow);
}

.action-btn.warning {
    border-color: #dc3545;
    color: #dc3545;
}

.action-btn.warning:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Dashboard View */
.dashboard-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.dashboard-card {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-1px);
}

.dashboard-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-card h3.dashboard-family-link {
    cursor: pointer;
    transition: color 0.2s;
}

.dashboard-card h3.dashboard-family-link:hover {
    color: var(--primary);
}

.dashboard-card h3.dashboard-family-link:hover .family-id {
    color: var(--primary);
}

.dashboard-card .family-id {
    font-size: 0.6875rem;
}

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

.dashboard-stat {
    text-align: center;
}

.dashboard-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.dashboard-stat-value.met { color: var(--status-met); }
.dashboard-stat-value.partial { color: var(--status-partial); }
.dashboard-stat-value.not-met { color: var(--status-not-met); }
.dashboard-stat-value.not-assessed { color: var(--text-muted); }

.dashboard-stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 4px;
}

.dashboard-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
    display: flex;
}

/* ═══════════════════════════════════════════════
   DASHBOARD HERO — Progress Ring + Stats
   ═══════════════════════════════════════════════ */

.dash-hero {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.18), 0 0 48px var(--glow-primary);
    position: relative;
    overflow: hidden;
}

.dash-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-line);
}

.dash-hero-ring {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

.dash-ring-svg {
    width: 130px;
    height: 130px;
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

.dash-ring-progress {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dash-ring-pct {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.dash-ring-sub {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.dash-hero-stats {
    flex: 1;
    min-width: 0;
}

.dash-hero-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dash-hero-metric {
    text-align: center;
    padding: 14px 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-hero-metric:hover {
    background: var(--hover-bg);
    border-color: var(--card-hover-border);
    transform: translateY(-1px);
}

.dash-metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    display: block;
}

.dash-metric-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
    display: block;
}

.dash-hero-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}

.dash-bar-segment {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-bar-segment.met { background: var(--status-met); }
.dash-bar-segment.partial { background: var(--status-partial); }
.dash-bar-segment.not-met { background: var(--status-not-met); }

.dash-hero-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.dash-addressed {
    font-size: 0.72rem;
    color: var(--status-met);
    font-weight: 500;
}

.dash-remaining {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Dashboard Family Card — Mini Ring Header */
.dash-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-card-ring {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.dash-card-ring-pct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.dash-card-header h3 {
    margin-bottom: 0;
}

/* Legacy summary-stat compat */
.dashboard-content .summary-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.dashboard-content .summary-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

/* Modal Backdrop (used by enhancement modules) */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.active {
    display: flex;
}

.modal-content {
    background: rgba(15, 17, 23, 0.92);
    backdrop-filter: saturate(180%) blur(32px);
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.5), 0 0 40px var(--glow-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.01);
}

.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

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

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

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 20px var(--focus-glow);
    background: var(--hover-bg);
}

.form-group input[readonly] {
    opacity: 0.7;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.btn-cancel {
    padding: 10px 20px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn-save {
    padding: 10px 20px;
    border: none;
    background: linear-gradient(135deg, #6c8aff 0%, #8b5cf6 100%);
    color: white;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px var(--accent-glow);
}

.btn-save:hover {
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-1px);
}

/* Toast notification */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(15, 17, 23, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: var(--text-primary);
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 0.875rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow-primary);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    border-left: 4px solid var(--status-met);
}

.toast.error {
    border-left: 4px solid var(--status-not-met);
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.mobile-menu-toggle:hover {
    background: var(--hover-bg);
    border-color: var(--hover-border);
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.mobile-overlay.active {
    display: block;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .main-content {
        padding: 24px 20px;
    }
    
    .poam-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .dashboard-content {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Real-Time Collaboration Styles */
.presence-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.presence-avatars {
    display: flex;
    align-items: center;
    gap: -8px;
}

.presence-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.presence-avatar:hover {
    transform: scale(1.1);
    z-index: 10;
}

.presence-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presence-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.presence-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
}

.presence-status.online {
    background: var(--status-met);
}

.presence-status.idle {
    background: var(--status-partial);
}

.presence-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-primary);
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.editing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(97, 175, 239, 0.15);
    border: 1px solid rgba(97, 175, 239, 0.3);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--accent-blue);
    margin-left: 12px;
    animation: pulse-editing 2s ease-in-out infinite;
}

@keyframes pulse-editing {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.editing-indicator svg {
    width: 12px;
    height: 12px;
}

.updated-by-other {
    animation: highlight-update 2s ease-in-out;
}

@keyframes highlight-update {
    0%, 100% {
        background: transparent;
    }
    50% {
        background: rgba(97, 175, 239, 0.1);
    }
}

/* User Management Styles */
.user-management-modal .modal-content {
    max-width: 900px;
}

.user-management-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.user-management-header {
    display: flex;
    justify-content: flex-end;
}

.members-section h3,
.pending-invites-section h3,
.roles-info-section h3 {
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--text-primary);
}

.members-list,
.invites-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.member-card,
.invite-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
}

.member-info {
    flex: 1;
}

.member-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.you-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 8px;
}

.member-email {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.member-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.member-role {
    flex-shrink: 0;
}

.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.role-badge.role-owner {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.role-badge.role-lead {
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
}

.role-badge.role-assessor {
    background: rgba(152, 195, 121, 0.2);
    color: var(--status-met);
}

.role-badge.role-viewer {
    background: rgba(92, 99, 112, 0.2);
    color: var(--text-muted);
}

.role-badge.role-client {
    background: rgba(229, 192, 123, 0.2);
    color: var(--status-partial);
}

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

.btn-icon {
    padding: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

.btn-icon.btn-danger:hover {
    background: rgba(224, 108, 117, 0.2);
    border-color: var(--status-not-met);
    color: var(--status-not-met);
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.role-info-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

.role-info-card h4 {
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.role-info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.role-info-card li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    padding-left: 16px;
    position: relative;
}

.role-info-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--status-met);
}

/* Collaboration Mode Indicator */
.collab-mode-indicator {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.mode-badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-badge.local {
    background: rgba(229, 192, 123, 0.2);
    color: var(--status-partial);
    border: 1px solid rgba(229, 192, 123, 0.3);
}

.mode-badge.supabase {
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
    border: 1px solid rgba(97, 175, 239, 0.3);
}

.mode-badge:hover {
    transform: scale(1.05);
}

/* Activity Panel */
.activity-panel-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
}

.activity-panel {
    width: 400px;
    height: 100%;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-left: 1px solid var(--glass-border);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

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

.activity-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.panel-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

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

.activity-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.activity-panel-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
}

#activity-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-item:hover {
    background: var(--hover-bg);
    border-color: var(--card-hover-border);
}

.activity-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

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

.activity-description {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-wrap: break-word;
}

.activity-meta {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-user {
    font-weight: 600;
}

.activity-time {
    opacity: 0.7;
}

/* Edit History Modal */
.edit-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-history-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

.edit-timestamp {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.edit-user {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.edit-change {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.old-value {
    color: var(--status-not-met);
    text-decoration: line-through;
    opacity: 0.7;
}

.new-value {
    color: var(--status-met);
    font-weight: 600;
}

/* History Button */
.show-history-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.show-history-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.show-history-btn svg {
    width: 12px;
    height: 12px;
}

/* Gap Analysis Dashboard Styles */
.gap-analysis-modal .modal-content {
    max-width: 1200px;
}

.gap-analysis-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gap-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.gap-summary-cards .summary-card {
    padding: 20px;
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.card-icon {
    font-size: 2rem;
}

.card-content {
    flex: 1;
}

.card-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.gap-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.gap-section h3 {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.compliance-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-bar {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

.bar-segment.met {
    background: var(--status-met);
}

.bar-segment.partial {
    background: var(--status-partial);
}

.bar-segment.not-met {
    background: var(--status-not-met);
}

.chart-legend {
    display: flex;
    gap: 20px;
    font-size: 0.875rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.legend-color.met {
    background: var(--status-met);
}

.legend-color.partial {
    background: var(--status-partial);
}

.legend-color.not-met {
    background: var(--status-not-met);
}

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

.recommendation-card {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    border-radius: 8px;
}

.recommendation-card.critical {
    border-left-color: var(--status-not-met);
}

.recommendation-card.quick-win {
    border-left-color: var(--status-met);
}

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

.rec-icon {
    font-size: 1.25rem;
}

.rec-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.rec-description {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.rec-footer {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.actions-table {
    overflow-x: auto;
}

.actions-table table {
    width: 100%;
    border-collapse: collapse;
}

.actions-table th,
.actions-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.actions-table th {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.actions-table td {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.action-desc {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.severity-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.effort-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
}

.effort-card {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}

.effort-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 4px;
}

.effort-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.trends-summary {
    display: flex;
    gap: 24px;
    align-items: center;
}

.trend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.trend-item.positive {
    border-left: 4px solid var(--status-met);
}

.trend-item.negative {
    border-left: 4px solid var(--status-not-met);
}

.trend-icon {
    font-size: 1.5rem;
}

.trend-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trend-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.trend-value.positive {
    color: var(--status-met);
}

.trend-value.negative {
    color: var(--status-not-met);
}

.trend-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.loading-content {
    text-align: center;
    padding: 40px;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Document Parser Styles */
.document-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-secondary);
}

.document-drop-zone:hover,
.document-drop-zone.drag-over {
    border-color: var(--accent-blue);
    background: rgba(97, 175, 239, 0.05);
}

.document-drop-zone svg {
    margin-bottom: 16px;
    color: var(--text-muted);
}

.document-drop-zone h3 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.document-drop-zone p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.uploaded-file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.file-icon {
    font-size: 1.5rem;
}

.file-info {
    flex: 1;
}

.file-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 2px;
}

.file-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.parsing-results {
    margin-top: 24px;
}

.parsing-loading {
    text-align: center;
    padding: 40px;
}

.parsing-results-header {
    margin-bottom: 20px;
}

.parsing-results-header h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.parsing-results-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-card {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.result-card.error {
    border-left: 4px solid var(--status-not-met);
}

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

.result-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.file-type-badge {
    padding: 4px 8px;
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

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

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.detected-controls,
.extracted-evidence,
.recommendations {
    margin-top: 16px;
}

.detected-controls h5,
.extracted-evidence h5 {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

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

.control-tag {
    padding: 6px 12px;
    background: rgba(152, 195, 121, 0.2);
    color: var(--status-met);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
}

.evidence-item {
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.evidence-type {
    padding: 2px 8px;
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.evidence-snippet {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.recommendation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(229, 192, 123, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.rec-icon {
    font-size: 1rem;
}

/* Evidence Library Styles */
.evidence-library-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.library-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: 1;
}

.stat-card {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}

.stat-card .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 4px;
}

.stat-card .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

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

.evidence-card {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    gap: 12px;
    transition: all 0.2s;
}

.evidence-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.evidence-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

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

.evidence-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evidence-description {
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evidence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.7rem;
}

.evidence-type {
    padding: 2px 8px;
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
    border-radius: 8px;
    font-weight: 600;
}

.linked-count {
    color: var(--text-muted);
}

.evidence-date {
    color: var(--text-muted);
}

.evidence-actions {
    display: flex;
    gap: 4px;
}

.btn-icon {
    padding: 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.btn-icon svg {
    color: var(--text-muted);
}

.btn-icon:hover svg {
    color: var(--accent-blue);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state svg {
    color: var(--text-muted);
    margin-bottom: 20px;
}

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

.empty-state p {
    margin: 0 0 24px 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.evidence-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-row {
    display: flex;
    gap: 12px;
}

.detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 120px;
}

.detail-value {
    color: var(--text-primary);
    flex: 1;
}

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

.detail-value a:hover {
    text-decoration: underline;
}

.linked-controls-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.control-badge {
    padding: 4px 8px;
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Executive Dashboard Styles */
.executive-dashboard-modal .modal-content {
    max-width: 1400px;
}

.executive-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kpi-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.kpi-card {
    padding: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border-color);
}

.kpi-card.primary {
    background: linear-gradient(135deg, rgba(152, 195, 121, 0.1) 0%, rgba(152, 195, 121, 0.05) 100%);
    border-color: rgba(152, 195, 121, 0.3);
}

.kpi-card.accent {
    background: linear-gradient(135deg, rgba(97, 175, 239, 0.1) 0%, rgba(97, 175, 239, 0.05) 100%);
    border-color: rgba(97, 175, 239, 0.3);
}

.kpi-card.warning {
    background: linear-gradient(135deg, rgba(229, 192, 123, 0.1) 0%, rgba(229, 192, 123, 0.05) 100%);
    border-color: rgba(229, 192, 123, 0.3);
}

.kpi-card.success {
    background: linear-gradient(135deg, rgba(152, 195, 121, 0.1) 0%, rgba(152, 195, 121, 0.05) 100%);
    border-color: rgba(152, 195, 121, 0.3);
}

.kpi-card.info {
    background: linear-gradient(135deg, rgba(97, 175, 239, 0.1) 0%, rgba(97, 175, 239, 0.05) 100%);
    border-color: rgba(97, 175, 239, 0.3);
}

.kpi-icon {
    font-size: 2.5rem;
}

.kpi-content {
    flex: 1;
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
}

.kpi-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
}

.kpi-sublabel {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.executive-dashboard .dashboard-card {
    padding: 24px;
    background: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    border: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
    border-radius: 12px;
}

.executive-dashboard .dashboard-card h3 {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.family-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.family-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.family-info {
    flex: 1;
}

.family-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 2px;
}

.family-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.family-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 140px;
}

.progress-bar-mini {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    transition: width 0.3s;
}

.progress-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}

.risk-card {
    border-left: 4px solid var(--status-not-met);
}

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

.risk-area-item {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--status-partial);
}

.risk-area-item.critical {
    border-left-color: var(--status-not-met);
}

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

.risk-family {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.risk-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-badge.critical {
    background: rgba(224, 108, 117, 0.2);
    color: var(--status-not-met);
}

.risk-badge.high {
    background: rgba(229, 192, 123, 0.2);
    color: var(--status-partial);
}

.risk-details {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.exec-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exec-rec-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
}

.exec-rec-item.high {
    border-left-color: var(--status-not-met);
}

.exec-rec-item.medium {
    border-left-color: var(--status-partial);
}

.rec-priority-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.rec-priority-badge.high {
    background: rgba(224, 108, 117, 0.2);
    color: var(--status-not-met);
}

.rec-priority-badge.medium {
    background: rgba(229, 192, 123, 0.2);
    color: var(--status-partial);
}

.rec-content h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.rec-description {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.rec-impact {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.timeline-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.timeline-stat {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    text-align: center;
}

.timeline-stat.positive {
    border-left: 4px solid var(--status-met);
}

.timeline-stat.negative {
    border-left: 4px solid var(--status-not-met);
}

.timeline-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.timeline-stat.positive .timeline-value {
    color: var(--status-met);
}

.timeline-stat.negative .timeline-value {
    color: var(--status-not-met);
}

.timeline-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.readiness-card {
    border-left: 4px solid var(--accent-blue);
}

.readiness-content {
    text-align: center;
}

.readiness-level {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 8px;
}

.readiness-level.ready {
    background: rgba(152, 195, 121, 0.2);
    color: var(--status-met);
}

.readiness-level.near-ready {
    background: rgba(97, 175, 239, 0.2);
    color: var(--accent-blue);
}

.readiness-level.in-progress {
    background: rgba(229, 192, 123, 0.2);
    color: var(--status-partial);
}

.readiness-level.early-stage {
    background: rgba(224, 108, 117, 0.2);
    color: var(--status-not-met);
}

.readiness-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

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

.cost-warning strong {
    color: var(--status-partial);
}

/* Assessment Enhancements Styles */
.impl-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.evidence-count-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #3b82f6;
    color: white;
    margin-left: 8px;
}

.link-evidence-btn,
.open-impl-details-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.link-evidence-btn:hover,
.open-impl-details-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.evidence-selection-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
}

.evidence-selection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.evidence-selection-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.evidence-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.evidence-item-info {
    flex: 1;
}

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

.evidence-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
}

.evidence-type-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
}

.evidence-type-badge.policy { background: #8b5cf6; color: white; }
.evidence-type-badge.procedure { background: #3b82f6; color: white; }
.evidence-type-badge.screenshot { background: #10b981; color: white; }
.evidence-type-badge.config { background: #f59e0b; color: white; }
.evidence-type-badge.configuration { background: #f59e0b; color: white; }
.evidence-type-badge.log { background: #6b7280; color: white; }
.evidence-type-badge.audit { background: #ef4444; color: white; }
.evidence-type-badge.document { background: #3b82f6; color: white; }
.evidence-type-badge.certificate { background: #10b981; color: white; }
.evidence-type-badge.report { background: #8b5cf6; color: white; }
.evidence-type-badge.other { background: #6b7280; color: white; }

.evidence-date {
    color: var(--text-muted);
}

/* Evidence Management Modal Styles */
.evidence-summary {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.evidence-count {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.evidence-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.evidence-add-section {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.evidence-add-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--text-primary);
}

.evidence-list-section h3 {
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--text-primary);
}

.evidence-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 3px solid var(--accent-blue);
}

.evidence-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.evidence-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

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

.evidence-file-ref {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
    font-family: monospace;
}

.evidence-meta {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.delete-evidence-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.delete-evidence-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.evidence-count-badge {
    display: none;
    padding: 2px 8px;
    background: var(--accent-blue);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 8px;
}

.markdown-badge {
    display: inline-block;
    padding: 2px 6px;
    background: #10b981;
    color: white;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 8px;
}

.evidence-document-info {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
}

.markdown-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.impl-details-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.impl-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

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

.impl-tab-content {
    display: none;
}

.impl-tab-content.active {
    display: block;
}

/* Bulk Upload & API Integration Styles */
.bulk-upload-instructions,
.boundary-instructions {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.upload-format-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.format-tab {
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.format-tab.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.format-example {
    display: none;
}

.format-example.active {
    display: block;
}

.format-example pre {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
}

.bulk-upload-preview {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.upload-summary {
    margin-top: 16px;
}

.summary-stats {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}

.stat-item {
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
}

.stat-item.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-item.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.upload-errors {
    margin: 16px 0;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
}

.upload-errors ul {
    margin: 8px 0;
    padding-left: 20px;
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.preview-table th,
.preview-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.preview-table th {
    background: var(--bg-primary);
    font-weight: 600;
}

.boundary-summary {
    margin-top: 16px;
}

.boundary-stats {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}

.boundary-stat {
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.boundary-stat.inside {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.boundary-stat.dmz {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.boundary-stat.outside {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.boundary-preview-list {
    margin-top: 16px;
}

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

.boundary-group h5 {
    margin-bottom: 8px;
    font-weight: 600;
}

.boundary-group ul {
    list-style: none;
    padding-left: 0;
}

.boundary-group li {
    padding: 4px 0;
}

/* API Integrations Styles */
.integrations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.integration-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;
}

.integration-card:hover {
    border-color: var(--accent-blue);
}

.integration-card.configured {
    border-color: #10b981;
}

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

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

.integration-info h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
}

.integration-status {
    font-size: 0.85rem;
    font-weight: 600;
}

.integration-status.active {
    color: #10b981;
}

.integration-status.inactive {
    color: #6b7280;
}

.integration-details {
    margin-top: 12px;
}

.integration-stat {
    margin: 8px 0;
    font-size: 0.9rem;
}

.integration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.integration-actions button {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.integration-description {
    color: var(--text-secondary);
    margin: 12px 0;
}

.platform-selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.platform-option {
    padding: 20px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

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

.platform-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 8px;
}

.platform-name {
    font-weight: 600;
}

.oauth-info {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.oauth-info h4 {
    margin-top: 0;
}

.oauth-info code {
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9rem;
}

.connection-status {
    margin-top: 16px;
}

.status-message {
    padding: 12px;
    border-radius: 6px;
    margin: 8px 0;
}

.status-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-left: 3px solid #10b981;
}

.status-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left: 3px solid #ef4444;
}

.status-message.info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-left: 3px solid #3b82f6;
}

.integration-info-section {
    margin-top: 32px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.info-item {
    padding: 16px;
    background: var(--bg-primary);
    border-radius: 6px;
}

.info-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-blue);
}

.sync-logs {
    max-height: 400px;
    overflow-y: auto;
}

.log-entry {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    border-left: 3px solid;
}

.log-entry.success {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

.log-time {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.log-message {
    font-size: 0.9rem;
}

.log-message ul {
    margin: 8px 0;
    padding-left: 20px;
}

.impl-notes-textarea,
.assessor-notes-textarea,
.impl-notes-modal-textarea,
.assessor-notes-modal-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
}

.impl-status-select,
.impl-status-modal-select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.linked-evidence-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.linked-evidence-item {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--bg-secondary);
}

.impl-meta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* System Inventory Styles */
.inventory-modal {
    max-width: 1200px !important;
    width: 95vw;
}

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.inventory-stat-card {
    padding: 20px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.inventory-stat-card.cui {
    border-color: #3b82f6;
}

.inventory-stat-card.critical {
    border-color: #ef4444;
}

.inventory-stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
}

.inventory-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inventory-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.inventory-controls .form-control {
    flex: 1;
    min-width: 200px;
}

.inventory-filters {
    display: flex;
    gap: 8px;
}

.inventory-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.inventory-filter-btn:hover {
    background: var(--bg-tertiary);
}

.inventory-filter-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.inventory-list {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
}

.inventory-table th {
    background: var(--bg-secondary);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.inventory-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.inventory-table tr:hover {
    background: var(--bg-tertiary);
}

.asset-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

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

.asset-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.cui-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #10b981;
    color: white;
}

.no-cui-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #6b7280;
    color: white;
}

.boundary-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.boundary-badge.inside { background: #10b981; }
.boundary-badge.outside { background: #6b7280; }
.boundary-badge.dmz { background: #f59e0b; }

.criticality-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.criticality-badge.high { background: #ef4444; }
.criticality-badge.medium { background: #f59e0b; }
.criticality-badge.low { background: #10b981; }

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

.icon-btn {
    padding: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.icon-btn svg {
    stroke: var(--text-primary);
}

.empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.asset-details .detail-row {
    display: flex;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.asset-details .detail-row:last-child {
    border-bottom: none;
}

.asset-details .detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 150px;
}

.asset-details .detail-value {
    color: var(--text-primary);
    flex: 1;
}

/* AI Assistant Styles */
.ai-cost-warning {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ai-cost-warning svg {
    stroke: #f59e0b;
    flex-shrink: 0;
}

.ai-cost-warning strong {
    color: #92400e;
}

.ai-cost-warning p {
    margin: 4px 0 0 0;
    color: #78350f;
    font-size: 0.9rem;
}

.ai-current-config {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.ai-current-config h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.config-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.config-details strong {
    color: var(--text-secondary);
    min-width: 100px;
    display: inline-block;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.success {
    background: #10b981;
    color: white;
}

.status-badge.warning {
    background: #f59e0b;
    color: white;
}

.usage-stats {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ai-setup-instructions {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.ai-setup-instructions h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.ai-setup-instructions ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.8;
}

.ai-setup-instructions a {
    color: var(--accent-blue);
    text-decoration: none;
}

.ai-setup-instructions a:hover {
    text-decoration: underline;
}

.analyze-objective-btn {
    padding: 6px 12px;
    border: 1px solid #8b5cf6;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-weight: 600;
}

.analyze-objective-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* =========================================================================
   AI Assess Button (contextual, per-objective)
   ========================================================================= */
.ai-assess-btn {
    padding: 4px 8px;
    border: 1px solid #8b5cf6;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.ai-assess-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.ai-assess-btn svg {
    flex-shrink: 0;
}

/* =========================================================================
   Inheritance Badges (inline in objective rows)
   ========================================================================= */
.inheritance-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
    transition: transform 0.15s;
}

.inheritance-badge-sm:hover {
    transform: scale(1.2);
}

/* Inheritance detail row in objective details */
.inheritance-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inheritance-detail .detail-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inheritance-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.inheritance-csp-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}

.inheritance-notes {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inheritance-srm-source {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: #3b82f620;
    color: #3b82f6;
    border: 1px solid #3b82f640;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inheritance-not-set {
    color: var(--text-tertiary);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

.set-inheritance-btn-inline {
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
}

.set-inheritance-btn-inline:hover {
    background: var(--bg-tertiary);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* =========================================================================
   SRM Upload Modal
   ========================================================================= */
.srm-modal {
    max-width: 640px;
    width: 90vw;
}

.srm-upload-section {
    margin-bottom: 24px;
}

.srm-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.srm-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-secondary);
}

.srm-upload-area:hover,
.srm-upload-area.drag-over {
    border-color: #8b5cf6;
    background: #8b5cf620;
}

.srm-upload-area svg {
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.srm-upload-area p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.srm-esp-name-group {
    margin-top: 16px;
}

.srm-esp-name-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.srm-esp-name-group .form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.srm-parse-status {
    margin-top: 16px;
}

.srm-parsing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #3b82f610;
    border: 1px solid #3b82f630;
    border-radius: 8px;
    color: #3b82f6;
    font-size: 0.85rem;
}

.srm-parsing .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #3b82f640;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.srm-success {
    padding: 12px 16px;
    background: #10b98110;
    border: 1px solid #10b98130;
    border-radius: 8px;
    color: #10b981;
    font-size: 0.85rem;
    line-height: 1.6;
}

.srm-error {
    padding: 12px 16px;
    background: #ef444410;
    border: 1px solid #ef444430;
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.85rem;
}

.srm-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.srm-apply-btn {
    margin-top: 12px;
}

/* ESP Profile Cards */
.srm-profiles-section h4 {
    margin-bottom: 12px;
    font-size: 0.9rem;
}

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

.esp-empty {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 16px;
    text-align: center;
}

.esp-profile-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    gap: 12px;
}

.esp-profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.esp-profile-info strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.esp-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.esp-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.esp-stat {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.esp-stat.inherited {
    background: #10b98115;
    color: #10b981;
}

.esp-stat.shared {
    background: #3b82f615;
    color: #3b82f6;
}

.esp-stat.customer {
    background: #f59e0b15;
    color: #f59e0b;
}

.esp-profile-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-sm.btn-primary {
    background: #3b82f6;
    color: white;
}

.btn-sm.btn-primary:hover {
    background: #2563eb;
}

.btn-sm.btn-danger {
    background: #ef444420;
    color: #ef4444;
    border: 1px solid #ef444440;
}

.btn-sm.btn-danger:hover {
    background: #ef444430;
}

.view-analysis-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.view-analysis-btn:hover {
    background: var(--bg-tertiary);
    border-color: #8b5cf6;
}

.analysis-summary {
    margin-bottom: 24px;
}

.analysis-score-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
}

.score-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        #10b981 0deg,
        #10b981 calc(var(--score, 0) * 3.6deg),
        var(--bg-tertiary) calc(var(--score, 0) * 3.6deg)
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.score-ring::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--bg-primary);
}

.score-value {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.score-label {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.analysis-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sufficiency-badge,
.confidence-badge,
.risk-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sufficiency-badge.sufficient { background: #10b981; color: white; }
.sufficiency-badge.partial { background: #f59e0b; color: white; }
.sufficiency-badge.insufficient { background: #ef4444; color: white; }

.confidence-badge.high { background: #10b981; color: white; }
.confidence-badge.medium { background: #f59e0b; color: white; }
.confidence-badge.low { background: #ef4444; color: white; }

.risk-badge.low { background: #10b981; color: white; }
.risk-badge.medium { background: #f59e0b; color: white; }
.risk-badge.high { background: #ef4444; color: white; }

.analysis-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.analysis-section {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.analysis-section h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.analysis-section ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.analysis-section p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.analysis-meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* POA&M Enhancements Styles */
.poam-dashboard-modal {
    max-width: 1400px !important;
    width: 95vw;
}

.poam-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.poam-stat-card {
    padding: 20px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.poam-stat-card.high-risk {
    border-color: #ef4444;
}

.poam-controls {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
}

.poam-items-table {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.poam-table {
    width: 100%;
    border-collapse: collapse;
}

.poam-table th {
    background: var(--bg-secondary);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.poam-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.poam-table tr:hover {
    background: var(--bg-tertiary);
}

.risk-score-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.risk-score-badge.high { background: #ef4444; }
.risk-score-badge.medium { background: #f59e0b; }
.risk-score-badge.low { background: #10b981; }

.progress-bar-container {
    position: relative;
    width: 100%;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

.risk-score-preview {
    padding: 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    margin: 16px 0;
    text-align: center;
}

.risk-score-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.risk-score-value {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
}

.risk-score-value.high {
    background: #ef4444;
    color: white;
}

.risk-score-value.medium {
    background: #f59e0b;
    color: white;
}

.risk-score-value.low {
    background: #10b981;
    color: white;
}

.cost-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.cost-table th,
.cost-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.cost-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cost-table tfoot td {
    font-weight: 600;
    background: var(--bg-secondary);
}

.current-costs h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Planner Enhancements Styles */
.planner-dashboard-modal {
    max-width: 1200px !important;
    width: 95vw;
}

.planner-progress-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.overall-progress {
    text-align: center;
}

.overall-progress h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.progress-ring-large {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.progress-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

.stat-item {
    text-align: center;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.stat-item .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
}

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

.planner-controls {
    margin-bottom: 24px;
}

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

.phase-progress-card {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.phase-header {
    margin-bottom: 12px;
}

.phase-header h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

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

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

.task-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.task-row.completed,
.planner-task.completed {
    opacity: 0.6;
    text-decoration: line-through;
}

.task-note-item {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 12px;
}

.note-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.note-content {
    color: var(--text-primary);
    line-height: 1.6;
}

.time-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.time-stat {
    text-align: center;
}

.time-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.time-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.time-value.over {
    color: #ef4444;
}

.time-value.under {
    color: #10b981;
}

.time-logs {
    margin-bottom: 20px;
}

.time-logs h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.time-log-table {
    width: 100%;
    border-collapse: collapse;
}

.time-log-table th,
.time-log-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.time-log-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.task-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.detail-section {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.detail-section.full-width {
    grid-column: 1 / -1;
}

.detail-section h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    margin-bottom: 12px;
}

.status-badge.not-started { background: #6b7280; }
.status-badge.in-progress { background: #3b82f6; }
.status-badge.completed { background: #10b981; }
.status-badge.blocked { background: #ef4444; }
.status-badge.deferred { background: #f59e0b; }

.timeline-info,
.time-tracking-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

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

.note-preview {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.existing-notes {
    margin-bottom: 20px;
}

.existing-notes h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Readiness Scorecard Styles */
.scorecard-modal {
    max-width: 1200px !important;
    width: 95vw;
}

.scorecard-hero {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 32px;
    padding: 32px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 32px;
}

.score-display {
    text-align: center;
}

.score-circle {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.score-grade {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.score-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.readiness-badge {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.breakdown-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.breakdown-value {
    font-weight: 700;
}

.breakdown-value.met { color: #10b981; }
.breakdown-value.partial { color: #f59e0b; }
.breakdown-value.not-met { color: #ef4444; }

.scorecard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.metric-card {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.metric-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.metric-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    transition: width 0.3s ease;
}

.family-breakdown {
    margin-bottom: 32px;
}

.family-breakdown h3 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

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

.family-card {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

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

.family-name {
    font-weight: 600;
    color: var(--text-primary);
}

.family-score {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
}

.family-score.excellent { background: #10b981; color: white; }
.family-score.good { background: #3b82f6; color: white; }
.family-score.fair { background: #f59e0b; color: white; }
.family-score.poor { background: #ef4444; color: white; }

.family-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.family-stats {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
}

.family-stats .met { color: #10b981; }
.family-stats .partial { color: #f59e0b; }
.family-stats .not-met { color: #ef4444; }

.gap-analysis {
    margin-bottom: 32px;
}

.gap-analysis h3 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.gaps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gap-item {
    padding: 16px;
    border-left: 4px solid;
    border-radius: 8px;
    background: var(--bg-secondary);
}

.gap-item.high { border-color: #ef4444; }
.gap-item.medium { border-color: #f59e0b; }
.gap-item.low { border-color: #3b82f6; }

.gap-header {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.gap-severity {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
}

.gap-item.high .gap-severity { background: #ef4444; }
.gap-item.medium .gap-severity { background: #f59e0b; }
.gap-item.low .gap-severity { background: #3b82f6; }

.gap-type {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.gap-description {
    margin-bottom: 8px;
    color: var(--text-primary);
    line-height: 1.6;
}

.gap-recommendation {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.trend-analysis {
    margin-bottom: 32px;
}

.trend-analysis h3 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.trend-chart {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
}

.trend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

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

.scorecard-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Skeleton Loader Styles */
.skeleton-card,
.skeleton-family,
.skeleton-table {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

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

.skeleton-header,
.skeleton-title,
.skeleton-badge,
.skeleton-stat,
.skeleton-progress,
.skeleton-family-header,
.skeleton-family-title,
.skeleton-family-stats,
.skeleton-cell,
.skeleton-generic {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-card {
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

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

.skeleton-title {
    height: 24px;
    width: 60%;
}

.skeleton-badge {
    height: 20px;
    width: 60px;
}

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

.skeleton-stat {
    height: 40px;
    flex: 1;
}

.skeleton-progress {
    height: 8px;
    width: 100%;
}

.skeleton-family {
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
}

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

.skeleton-family-title {
    height: 28px;
    width: 40%;
}

.skeleton-family-stats {
    height: 24px;
    width: 30%;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-row {
    display: flex;
    gap: 12px;
}

.skeleton-cell {
    height: 40px;
    flex: 1;
}

.skeleton-generic {
    height: 200px;
    width: 100%;
    margin: 20px 0;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .sidebar {
        position: fixed;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .main-content {
        margin-left: 0;
        padding: 80px 16px 24px;
    }
    
    .view-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-left h2 {
        font-size: 1.25rem;
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .filter-select {
        width: 100%;
    }
    
    /* Control Families */
    .family-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .family-stats {
        width: 100%;
        justify-content: flex-start;
        gap: 12px;
    }
    
    .control-header {
        padding: 12px 16px;
    }
    
    /* Objectives */
    .objective-main {
        flex-wrap: wrap;
        padding: 12px 16px;
    }
    
    .objective-info {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .objective-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    /* Dashboard Cards */
    .dashboard-content {
        grid-template-columns: 1fr;
    }
    
    .family-card {
        padding: 16px;
    }
    
    /* Modals */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 20px auto;
        max-height: 90vh;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
    
    /* Action Buttons */
    .action-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
    
    .action-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* Tables */
    .poam-table th,
    .poam-table td {
        padding: 8px;
        font-size: 0.8rem;
    }
    
    /* Hamburger Menu */
    .hamburger-dropdown {
        width: 280px;
    }
    
    .status-btn {
        flex: 1;
        min-width: 60px;
        text-align: center;
    }
    
    /* Dashboard */
    .dashboard-content {
        grid-template-columns: 1fr;
    }
    
    .dashboard-card-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-content .summary-card {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .summary-stat-value {
        font-size: 1.5rem;
    }
    
    /* POA&M Tables */
    .poam-table {
        font-size: 0.8125rem;
    }
    
    .poam-table th,
    .poam-table td {
        padding: 10px 12px;
    }
    
    .poam-table:not(.deficiency-table) td:nth-child(4),
    .deficiency-table td:nth-child(3) {
        min-width: 150px;
        max-width: 200px;
    }
    
    /* Modal */
    .modal-content {
        margin: 16px;
        max-height: calc(100vh - 32px);
        width: calc(100% - 32px);
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-cancel,
    .btn-save {
        width: 100%;
        justify-content: center;
    }
    
    /* Conditional Status Banner */
    .conditional-status-body {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .score-current {
        font-size: 28px;
    }
    
    .conditional-message {
        min-width: auto;
    }
    
    /* Organization Cards */
    .org-info-section {
        padding: 12px;
    }
    
    /* Progress Bar */
    .progress-bar-container {
        padding: 12px 16px;
    }
    
    /* Toast */
    .toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
    
    /* Action Buttons */
    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .main-content {
        padding: 70px 12px 20px;
    }
    
    .sidebar-header h1 {
        font-size: 1.1rem;
    }
    
    .family-title h3 {
        font-size: 0.9rem;
    }
    
    .control-name {
        font-size: 0.875rem;
    }
    
    .objective-text {
        font-size: 0.8125rem;
    }
    
    .status-btn {
        padding: 8px 10px;
        font-size: 0.6875rem;
    }
    
    .dashboard-card {
        padding: 16px;
    }
    
    .dashboard-stat-value {
        font-size: 1.25rem;
    }
    
    .summary-stat {
        padding: 16px;
    }
    
    .summary-stat-value {
        font-size: 1.25rem;
    }
    
    .poam-table th,
    .poam-table td {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    
    .section-title {
        font-size: 16px;
    }
    
    .conditional-status-header {
        font-size: 14px;
    }
    
    .score-current {
        font-size: 24px;
    }
    
    .score-separator,
    .score-required {
        font-size: 18px;
    }
}

/* SPRS Scoring Badges */
.sprs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
}

.sprs-badge.low {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.sprs-badge.medium {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.sprs-badge.high {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* POA&M Warnings on Controls */
.poam-warning {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.poam-caution {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    flex-shrink: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.control-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* POA&M Eligibility Warnings in Modal */
.poam-eligibility-warning {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.poam-eligibility-warning.critical {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.poam-eligibility-warning.high {
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.poam-eligibility-warning.info {
    background-color: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.poam-eligibility-warning.ok {
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

/* POA&M Table Status Indicators */
.poam-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.poam-status.poam-yes {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.poam-status.poam-no {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.poam-status.poam-never {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.poam-status.poam-fips {
    background-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* POA&M Table Row Highlighting */
.poam-table tr.row-critical {
    background-color: rgba(239, 68, 68, 0.08);
}

.poam-table tr.row-warning {
    background-color: rgba(245, 158, 11, 0.08);
}

/* POA&M Table Objective Column Word Wrap */
.poam-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* POA&M table objective column (4th column) */
.poam-table:not(.deficiency-table) td:nth-child(4) {
    min-width: 200px;
    max-width: 300px;
}

/* Deficiency table objective column (3rd column) */
.deficiency-table td:nth-child(3) {
    min-width: 200px;
    max-width: 300px;
}

/* Deficiency Section Styles */
.deficiency-section {
    margin-bottom: 32px;
}

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

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

.section-title.critical {
    color: #ef4444;
}

.section-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 12px;
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
}

.deficiency-table {
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.deficiency-table thead {
    background-color: rgba(239, 68, 68, 0.15);
}

/* Toast info style */
.toast.info {
    background-color: #3b82f6;
}

/* Implementation Link Button */
.impl-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.impl-link:hover {
    background-color: var(--accent-blue);
    color: white;
}

.impl-link.has-data {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.impl-link.has-data:hover {
    background-color: #22c55e;
    color: white;
}

/* Conditional Status Banner */
.conditional-status-banner {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 0;
}

.conditional-status-banner.eligible {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.conditional-status-banner.not-eligible {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.conditional-status-header {
    font-size: 0.75rem;
    margin-bottom: 6px;
}

.conditional-status-banner.eligible .conditional-status-header {
    color: #22c55e;
}

.conditional-status-banner.not-eligible .conditional-status-header {
    color: #f59e0b;
}

.conditional-status-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.conditional-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.score-current {
    font-size: 1.25rem;
    font-weight: 700;
}

.conditional-status-banner.eligible .score-current {
    color: #22c55e;
}

.conditional-status-banner.not-eligible .score-current {
    color: #f59e0b;
}

.score-separator {
    font-size: 1rem;
    color: var(--text-muted);
}

.score-required {
    font-size: 1rem;
    color: var(--text-secondary);
}

.score-label {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-left: 6px;
}

.conditional-message {
    flex: 1;
    min-width: 200px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.conditional-note {
    width: 100%;
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* Organization Info Section */
.org-info-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Organization Cards */
.org-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
}

.org-card-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.org-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.org-card-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: white;
    flex-shrink: 0;
}

.org-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Assessor Card */
.assessor-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

/* OSC Card */
.osc-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.2);
}

/* Shared Org Card Styles */
.org-card-header {
    margin-bottom: 8px;
}

.org-logo-display {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

.org-logo-large {
    width: 100%;
    max-height: 60px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-tertiary);
    padding: 8px;
}

.org-logo-placeholder-large {
    width: 100%;
    height: 60px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.org-logo-placeholder-large span {
    font-size: 10px;
}

.org-logo-display:hover .org-logo-placeholder-large {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.org-name-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}

.org-name-input:hover {
    border-color: var(--primary);
}

.org-name-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.org-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.org-url-row {
    display: flex;
    gap: 6px;
}

.org-url-input {
    flex: 1;
    padding: 6px 10px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.org-url-input:focus {
    outline: none;
    border-color: var(--primary);
}

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

.fetch-logo-btn {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fetch-logo-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

/* Cloud Guidance Section Styles */
.cloud-guidance-section {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cloud-provider-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 6px;
    width: fit-content;
}

.cloud-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.cloud-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

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

.cloud-btn.active[data-cloud="azure"] {
    background: #0078d4;
}

.cloud-btn.active[data-cloud="aws"] {
    background: #ff9900;
    color: #232f3e;
}

.cloud-btn.active[data-cloud="gcp"] {
    background: #4285f4;
}

.cloud-btn svg {
    flex-shrink: 0;
}

.cloud-btn span {
    white-space: nowrap;
}

.cloud-guidance-content {
    position: relative;
}

.cloud-guidance-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.cloud-guidance-panel.active {
    display: flex;
}

.cloud-guidance-panel[data-cloud="azure"] {
    border-left: 3px solid #0078d4;
    padding-left: 12px;
}

.cloud-guidance-panel[data-cloud="aws"] {
    border-left: 3px solid #ff9900;
    padding-left: 12px;
}

.cloud-guidance-panel[data-cloud="gcp"] {
    border-left: 3px solid #4285f4;
    padding-left: 12px;
}

.guidance-unavailable {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-style: italic;
    padding: 8px 0;
}

.guidance-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.guidance-value {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.guidance-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
    width: fit-content;
}

.guidance-doc-link:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.guidance-doc-link svg {
    flex-shrink: 0;
}

.guidance-doc-link.cui-training-link {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
    margin-left: 8px;
}

.guidance-doc-link.cui-training-link:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
    color: #c084fc;
}

/* Data Storage Notice Styles */
.data-storage-notice {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #1a2744 100%);
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

.data-storage-notice.visible {
    display: block;
}


@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.notice-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    color: var(--accent-blue);
}

.notice-text {
    flex: 1;
}

.notice-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

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

.acknowledge-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.acknowledge-btn:hover {
    background: var(--accent-blue-hover);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .notice-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .notice-icon {
        margin: 0 auto;
    }
    
    .acknowledge-btn {
        width: 100%;
    }
}

/* Assessor Cheat Sheet Styles - Now uses details/summary pattern */
.impl-summary.impl-cheatsheet {
    color: #8b5cf6;
}

.cheatsheet-details .cheat-sheet-content {
    padding: 14px;
}

/* Legacy toggle styles removed - now using unified details/summary pattern */

.cheat-sheet-subsection {
    margin-top: 12px;
}

.cheat-sheet-subsection.pitfall-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 0;
    margin-bottom: 12px;
}

.pitfall-warning .cheat-sheet-subtitle {
    color: #f59e0b;
    margin-bottom: 10px;
}

.pitfall-issue, .pitfall-impact, .pitfall-fix {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.pitfall-issue strong { color: #ef4444; }
.pitfall-impact strong { color: #f59e0b; }
.pitfall-fix strong { color: #10b981; }

.cheat-sheet-subsection.cca-tips {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.cca-tips .cheat-sheet-subtitle {
    color: #3b82f6;
}

.cca-tips .cheat-sheet-list li {
    color: var(--text-secondary);
    font-style: italic;
}

.cheat-sheet-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.cheat-sheet-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.cheat-sheet-list li {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 6px;
}

.cheat-sheet-services {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.fedramp-service-item a {
    font-size: 13px;
    font-weight: 500;
    color: var(--link-color);
    text-decoration: none;
}

.fedramp-service-item a:hover {
    text-decoration: underline;
}

.fedramp-level {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.fedramp-level.high {
    background: #dcfce7;
    color: #166534;
}

.fedramp-level.moderate {
    background: #fef3c7;
    color: #92400e;
}

.fedramp-level.low {
    background: #e0e7ff;
    color: #3730a3;
}

.fedramp-category {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

@media (max-width: 600px) {
    .fedramp-service-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .fedramp-category {
        margin-left: 0;
    }
}

/* Legacy styles removed - Now using unified details/summary pattern in "Unified Assessment Objective Dropdowns" section */

/* Cmd+K Search Modal Styles */
.search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.search-modal.active {
    display: block;
}

.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.search-modal-content {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 640px;
    background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.search-modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
}

.search-input-wrapper svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--text-primary);
}

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

.search-kbd {
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-family: inherit;
    color: var(--text-muted);
}

.search-modal-results {
    max-height: 400px;
    overflow-y: auto;
}

.search-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.search-empty-state p {
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.search-hints {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.75rem;
}

.search-hints span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-hints kbd {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.625rem;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--bg-tertiary);
}

.search-result-item.selected {
    background: rgba(59, 130, 246, 0.15);
}

.search-result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

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

.search-result-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.search-result-title mark {
    background: rgba(250, 204, 21, 0.3);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
}

.search-result-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.search-result-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
}

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

.search-no-results svg {
    margin-bottom: 12px;
    opacity: 0.5;
}

.search-section-header {
    padding: 8px 16px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* CLI Commands Styles */
.cli-section {
    margin-top: 8px;
}

.cli-commands {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.cli-command {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.cli-command code {
    flex: 1;
    font-size: 0.75rem;
    color: #7ee787;
    overflow-x: auto;
    white-space: nowrap;
}

.cli-copy-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #8b949e;
    cursor: pointer;
    transition: all 0.15s;
}

.cli-copy-btn:hover {
    background: #21262d;
    color: #c9d1d9;
    border-color: #8b949e;
}

/* Automation Scripts Styles */
.scripts-section {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.automation-scripts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.automation-script-item {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    overflow: hidden;
}

.script-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(136, 46, 224, 0.15), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid #30363d;
}

.script-name {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a371f7;
}

.script-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #8b949e;
    cursor: pointer;
    transition: all 0.15s;
}

.script-copy-btn:hover {
    background: #21262d;
    color: #c9d1d9;
    border-color: #8b949e;
}

.script-description {
    padding: 10px 12px;
    font-size: 0.75rem;
    color: #8b949e;
    line-height: 1.5;
}

.script-details {
    border-top: 1px solid #30363d;
}

.script-details summary {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #58a6ff;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.script-details summary:hover {
    background: rgba(88, 166, 255, 0.1);
}

.script-details[open] summary {
    border-bottom: 1px solid #30363d;
}

.script-code {
    margin: 0;
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.7rem;
    line-height: 1.6;
    color: #c9d1d9;
    background: #0d1117;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Framework Mappings Styles */
.framework-mappings-section {
    margin: 12px 0;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.framework-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.framework-row:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
}

.framework-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 120px;
    flex-shrink: 0;
}

.framework-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.framework-link {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
}

.framework-link.nist53 {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.framework-link.nist53:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

.framework-link.fedramp20x {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

.framework-link.fedramp20x:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
}

.ksi-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 3px;
    margin-left: 4px;
}

.ksi-level-badge.ksi-low {
    background: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.ksi-level-badge.ksi-mod {
    background: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.framework-na {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.fedramp-baselines {
    display: flex;
    gap: 4px;
}

.baseline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: default;
}

.baseline-badge.active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.baseline-badge.inactive {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    opacity: 0.5;
}

.cmmc-level {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 4px 0 0 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cmmc-level.cmmc-l1 {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.cmmc-level.cmmc-l2 {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: white;
}

.cmmc-practice {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: white;
    border-radius: 0;
    letter-spacing: 0.3px;
}

.cmmc-classification {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.3px;
}

.cmmc-classification.cmmc-basic {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cmmc-classification.cmmc-derived {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* SPRS Family Score Styles */
.sprs-family-score {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 2px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.72rem;
}

.sprs-label {
    color: var(--text-muted);
    font-weight: 500;
}

.sprs-value {
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--status-met);
}

.sprs-value.has-loss {
    color: var(--status-not-met);
}

.sprs-max {
    color: var(--text-muted);
    font-size: 0.6875rem;
}

/* Search Trigger Button */
.search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 180px;
}

.search-trigger:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
}

.search-trigger svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-placeholder {
    color: var(--text-muted);
    font-size: 0.875rem;
    flex: 1;
    text-align: left;
}

.search-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-muted);
    font-weight: 500;
}

/* Dashboard Scores Row */
.dashboard-scores-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.sprs-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 100px;
}

.sprs-score-card.positive {
    border-color: var(--status-met);
    background: rgba(16, 185, 129, 0.1);
}

.sprs-score-card.moderate {
    border-color: var(--status-partial);
    background: rgba(245, 158, 11, 0.1);
}

.sprs-score-card.critical {
    border-color: var(--status-not-met);
    background: rgba(239, 68, 68, 0.1);
}

.sprs-score-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.sprs-score-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    line-height: 1;
}

.sprs-score-card.positive .sprs-score-value {
    color: var(--status-met);
}

.sprs-score-card.moderate .sprs-score-value {
    color: var(--status-partial);
}

.sprs-score-card.critical .sprs-score-value {
    color: var(--status-not-met);
}

.sprs-score-range {
    font-size: 0.5625rem;
    color: var(--text-muted);
    margin-top: 4px;
}

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

    .dash-hero {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .dash-hero-ring {
        width: 100px;
        height: 100px;
    }

    .dash-ring-svg {
        width: 100px;
        height: 100px;
    }

    .dash-ring-pct {
        font-size: 1.4rem;
    }

    .dash-hero-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .dash-hero-metric {
        padding: 10px 6px;
    }

    .dash-metric-value {
        font-size: 1.2rem;
    }
}

/* Dashboard Header Scores Inline */
.dashboard-header-row {
    flex-wrap: wrap;
}

.dashboard-scores-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-score-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-score-badge.sprs {
    background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.dashboard-score-badge.sprs.positive {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--status-met);
    color: var(--status-met);
}

.dashboard-score-badge.sprs.moderate {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--status-partial);
    color: var(--status-partial);
}

.dashboard-score-badge.sprs.critical {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--status-not-met);
    color: var(--status-not-met);
}

.dashboard-score-badge.cmmc {
    background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.dashboard-score-badge.cmmc.eligible {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    color: #22c55e;
}

.dashboard-score-badge.cmmc.not-eligible {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #f59e0b;
}

.dashboard-score-badge.cmmc-l3 {
    background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.dashboard-score-badge.cmmc-l3.eligible {
    background: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
    color: #fbbf24;
}

.dashboard-score-badge.cmmc-l3.not-eligible {
    background: rgba(245, 158, 11, 0.08);
    border-color: #f59e0b;
    color: #f59e0b;
}

.score-badge-label {
    color: var(--text-muted);
    font-weight: 500;
}

.score-badge-value {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 700;
}

/* Project Plan Phase Styles */
.project-plan-phase {
    display: none;
}

.project-plan-phase.active {
    display: block;
}

.project-plan-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.project-plan-tab {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.project-plan-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.project-plan-tab.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.project-plan-tab .task-count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.project-plan-tab.active .task-count {
    background: rgba(255, 255, 255, 0.3);
}

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

.phase-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

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

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

/* Project Plan Table Styles */
.project-plan-table-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.project-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.project-plan-table th {
    background: var(--bg-tertiary);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.project-plan-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.project-plan-table tr:last-child td {
    border-bottom: none;
}

.project-plan-table tr.completed {
    opacity: 0.6;
    background: var(--bg-tertiary);
}

.project-plan-table tr.completed td {
    text-decoration: line-through;
}

.week-badge {
    background: var(--accent-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.task-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.task-controls {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.control-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.owner-badge {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

/* ═══════════════════════════════════════════════
   TOP HEADER BAR
   ═══════════════════════════════════════════════ */
.top-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 1000;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

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

.header-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--nav-active-bg);
    color: var(--accent-blue);
    border-radius: 6px;
    border: 1px solid var(--hover-border);
    box-shadow: 0 0 16px var(--hover-glow);
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.top-header-bar .header-theme-picker {
    margin-left: auto;
}

/* ═══════════════════════════════════════════════
   ANIMATED HAMBURGER TOGGLE (3-bar → X morph)
   ═══════════════════════════════════════════════ */
.hb-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hb-toggle:hover {
    border-color: var(--hover-border);
    background: var(--hover-bg);
    box-shadow: 0 0 12px var(--hover-glow);
}

.hb-toggle-bar {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: transform 0.3s cubic-bezier(.32,.72,0,1), opacity 0.2s, width 0.3s;
    transform-origin: center;
}

/* Morph to X when panel is open */
.hb-toggle.open .hb-toggle-bar:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
.hb-toggle.open .hb-toggle-bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.hb-toggle.open .hb-toggle-bar:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════
   GLASSMORPHISM OVERLAY
   ═══════════════════════════════════════════════ */
.hb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 1001;
}

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

/* ═══════════════════════════════════════════════
   SLIDE-OUT NAVIGATION PANEL
   ═══════════════════════════════════════════════ */
.hb-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: saturate(180%) blur(32px);
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.4), 0 0 60px var(--glow-primary);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(.32,.72,0,1);
    will-change: transform;
}

.hb-panel.active {
    transform: translateX(0);
}

/* Panel Header */
.hb-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--glow-primary), transparent);
}

.hb-panel-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--nav-active-bg);
    color: var(--accent-blue);
    border-radius: 5px;
    border: 1px solid var(--card-hover-border);
}

.hb-panel-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.hb-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hb-close:hover {
    background: rgba(248, 113, 113, 0.08);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.2);
}

/* Scrollable Content Area */
.hb-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.hb-scroll::-webkit-scrollbar { width: 4px; }
.hb-scroll::-webkit-scrollbar-track { background: transparent; }
.hb-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* Navigation Groups */
.hb-nav {
    padding: 0 8px;
}

.hb-group {
    padding: 2px 0;
}

.hb-group + .hb-group {
    border-top: 1px solid var(--glass-border);
    margin-top: 2px;
    padding-top: 6px;
}

/* Section Labels */
.hb-section-label {
    padding: 6px 10px 3px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    opacity: 0.65;
    user-select: none;
}

/* ═══════════════════════════════════════════════
   NAV BUTTONS (inside panel)
   ═══════════════════════════════════════════════ */
.hamburger-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
    position: relative;
}

.hamburger-nav-btn .hb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-nav-btn .hb-icon svg {
    width: 15px;
    height: 15px;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.hamburger-nav-btn .hb-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.hamburger-nav-btn:hover .hb-icon {
    background: var(--hover-bg);
}

.hamburger-nav-btn:hover .hb-icon svg {
    opacity: 0.85;
}

/* Active State */
.hamburger-nav-btn.active {
    background: var(--nav-active-bg);
    color: var(--accent-blue);
    font-weight: 500;
    border-left: 2px solid var(--accent-blue);
}

.hamburger-nav-btn.active .hb-icon {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
    box-shadow: 0 2px 10px var(--accent-glow);
}

.hamburger-nav-btn.active .hb-icon svg {
    opacity: 1;
    color: white;
}

/* Sub-items (indented) */
.hamburger-nav-btn.hb-sub {
    padding-left: 48px;
    font-size: 0.75rem;
}

.hamburger-nav-btn.hb-sub .hb-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════
   ORGANIZATION CARDS (inside panel)
   ═══════════════════════════════════════════════ */
.hb-org-section {
    padding: 10px 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    margin-top: 2px;
}

.hb-org-card {
    background: color-mix(in srgb, var(--bg-tertiary) 40%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
}

.hb-org-card:last-child {
    margin-bottom: 0;
}

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

.hb-org-logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.hb-org-logo:hover {
    border-color: var(--text-muted);
}

.hamburger-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hamburger-logo-placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.hb-org-info {
    flex: 1;
    min-width: 0;
}

.hb-org-tag {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 1px;
}

.hb-org-input {
    width: 100%;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 400;
    background: transparent;
    border: none;
    color: var(--text-primary);
    outline: none;
    letter-spacing: -0.01em;
}

.hb-org-input::placeholder {
    color: var(--text-muted);
    opacity: 0.4;
}

.hb-org-url-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hb-org-url {
    flex: 1;
    padding: 5px 8px;
    font-size: 0.6875rem;
    background: var(--bg-primary);
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 6px;
    color: var(--text-secondary);
    outline: none;
    transition: border-color 0.2s;
}

.hb-org-url:focus {
    border-color: var(--accent-blue);
}

.hb-fetch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

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

/* Panel Footer */
.hb-panel-footer {
    padding: 8px 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    flex-shrink: 0;
}

.hb-panel-footer:empty {
    display: none;
}

/* No Sidebar Layout */
.app-container.no-sidebar {
    display: block;
    padding-top: 48px;
}

.app-container.no-sidebar .main-content {
    margin-left: 0;
    width: 100%;
}

/* (Old hamburger-org styles removed - now using hb-org-* classes above) */

/* Implementation Guide Modal */
.impl-guide-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.impl-guide-modal.active {
    display: block;
}

.impl-guide-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.impl-guide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.impl-guide-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.impl-guide-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.impl-guide-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.impl-cloud-selector {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.impl-cloud-selector:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.impl-guide-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.impl-guide-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.impl-guide-close:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.impl-guide-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.impl-tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

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

.impl-tab.active {
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.impl-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.impl-guide-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.impl-export-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-blue);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.impl-export-btn:hover {
    background: #2563eb;
}

/* Implementation Guide Content Styles */
.impl-section {
    margin-bottom: 24px;
}

.impl-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.impl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.impl-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.impl-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: top;
    text-align: left;
}

.impl-table.compact th,
.impl-table.compact td {
    padding: 6px 10px;
    font-size: 0.65rem;
}

.impl-table tr:hover td {
    background: var(--bg-secondary);
}

.impl-phase-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.impl-phase-badge.foundation { background: rgba(59, 130, 246, 0.2); color: #60a5fa; box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
.impl-phase-badge.security { background: rgba(239, 68, 68, 0.2); color: #f87171; box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
.impl-phase-badge.workspace { background: rgba(236, 72, 153, 0.2); color: #f472b6; box-shadow: 0 0 8px rgba(236, 72, 153, 0.3); }
.impl-phase-badge.people { background: rgba(16, 185, 129, 0.2); color: #34d399; box-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }
.impl-phase-badge.governance { background: rgba(245, 158, 11, 0.2); color: #fbbf24; box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); }
.impl-phase-badge.audit { background: rgba(139, 92, 246, 0.2); color: #a78bfa; box-shadow: 0 0 8px rgba(139, 92, 246, 0.3); }

.impl-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    background: #0d1117;
    color: #7ee787;
    padding: 2px 6px;
    border-radius: 4px;
}

.impl-policy-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.impl-policy-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.05));
    border-bottom: 1px solid var(--border-color);
}

.impl-policy-header h4 {
    margin: 0 0 4px 0;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.impl-policy-header p {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.impl-policy-body {
    padding: 16px;
}

.impl-policy-section {
    margin-bottom: 12px;
}

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

.impl-policy-section h5 {
    margin: 0 0 8px 0;
    font-size: 0.75rem;
    color: var(--accent-blue);
}

.impl-policy-section ul {
    margin: 0;
    padding-left: 20px;
}

.impl-policy-section li {
    font-size: 0.75rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.impl-ssp-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.impl-ssp-control {
    font-weight: 600;
    color: var(--accent-blue);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.impl-ssp-text {
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.impl-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    margin-top: 8px;
}

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

/* Implementation Notes Section (in Assessment Tab) */
.impl-notes-section {
    margin-top: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
}

.impl-notes-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 10px;
}

.impl-notes-steps {
    margin: 0;
    padding-left: 24px;
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.8;
}

.impl-notes-steps li {
    margin-bottom: 4px;
}

.impl-notes-steps li::marker {
    color: #10b981;
    font-weight: 600;
}

.impl-quick-win {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.impl-quick-win strong {
    color: #f59e0b;
}

.impl-evidence-artifact {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.impl-evidence-artifact code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #60a5fa;
}

/* Collapsible Implementation Details */
.impl-details {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.impl-details[open] {
    background: var(--bg-secondary);
}

.impl-summary {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.impl-summary::-webkit-details-marker {
    display: none;
}

.impl-summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.impl-details[open] .impl-summary::before {
    transform: rotate(90deg);
}

.impl-summary.impl-human {
    color: #a855f7;
}

.impl-summary.impl-policy {
    color: #f59e0b;
}

.impl-summary.impl-manual {
    color: #ec4899;
}

.impl-summary.impl-methodology {
    color: #06b6d4;
}

.impl-notes-list {
    margin: 0;
    padding: 10px 12px 10px 28px;
    font-size: 0.7rem;
    color: var(--text-primary);
    line-height: 1.7;
}

.impl-notes-list li {
    margin-bottom: 4px;
}

.impl-methodology-text {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.7rem;
    color: var(--text-primary);
    line-height: 1.7;
    font-style: italic;
}

/* Cloud Console Quick Links */
.cloud-console-links {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.console-links-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.console-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.console-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

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

.console-link-btn svg {
    flex-shrink: 0;
}

/* PowerShell/CLI Connection Section */
.ps-connect-section {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ps-connect-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    background: var(--bg-secondary);
    cursor: pointer;
    list-style: none;
}

.ps-connect-summary::-webkit-details-marker {
    display: none;
}

.ps-connect-summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.ps-connect-section[open] .ps-connect-summary::before {
    transform: rotate(90deg);
}

.ps-copy-all-btn {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ps-copy-all-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.ps-connect-code {
    margin: 0;
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.65rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    overflow-x: auto;
    white-space: pre;
}

/* Services by Control Family */
.service-families-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-family-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.service-family-card[open] {
    border-color: var(--accent-blue);
}

.service-family-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary);
    cursor: pointer;
    list-style: none;
}

.service-family-header::-webkit-details-marker {
    display: none;
}

.service-family-header::before {
    content: '▶';
    font-size: 0.6rem;
    margin-right: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.service-family-card[open] .service-family-header::before {
    transform: rotate(90deg);
    color: var(--accent-blue);
}

.family-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.family-counts {
    display: flex;
    gap: 8px;
}

.native-count, .thirdparty-count {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 12px;
}

.native-count {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.thirdparty-count {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.service-family-content {
    padding: 12px;
    background: var(--bg-primary);
}

.services-subheader {
    font-size: 0.7rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.native-header {
    color: #10b981;
}

.thirdparty-header {
    color: #3b82f6;
}

.native-services-section {
    margin-bottom: 16px;
}

.thirdparty-services-section {
    margin-top: 12px;
}

.impl-table.compact {
    font-size: 0.65rem;
}

.impl-table.compact th,
.impl-table.compact td {
    padding: 6px 8px;
}

.service-type-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: 500;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.service-type-badge.native {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.fedramp-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 4px;
}

.fedramp-badge.high {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.fedramp-badge.moderate {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.fedramp-badge.na {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.asset-type-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.55rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.asset-type-badge.cui-asset {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.asset-type-badge.security-protection-asset {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.asset-type-badge.contractor-risk-managed-asset {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.asset-type-badge.specialized-asset {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.asset-type-badge.out-of-scope {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* CUI Regex Patterns Section */
.regex-patterns-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.regex-category-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.regex-category-card[open] {
    border-color: var(--accent-blue);
}

.regex-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    cursor: pointer;
    list-style: none;
}

.regex-category-header::-webkit-details-marker {
    display: none;
}

.regex-category-header::before {
    content: '▶';
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.regex-category-card[open] .regex-category-header::before {
    transform: rotate(90deg);
    color: var(--accent-blue);
}

.regex-category-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.regex-category-badge.cui-basic {
    background: rgba(255, 185, 0, 0.2);
    color: #FFB900;
}

.regex-category-badge.cui-specified {
    background: rgba(255, 140, 0, 0.2);
    color: #FF8C00;
}

.regex-category-badge.fouo--legacy- {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.regex-category-badge.distribution {
    background: rgba(16, 124, 16, 0.2);
    color: #107C10;
}

.regex-category-badge.itar {
    background: rgba(232, 17, 35, 0.2);
    color: #E81123;
}

.regex-category-badge.ear {
    background: rgba(209, 52, 56, 0.2);
    color: #D13438;
}

.regex-category-badge.itar-ear {
    background: rgba(232, 17, 35, 0.15);
    color: #E81123;
}

.regex-count {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.regex-code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.55rem;
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    max-width: 280px;
    overflow-x: auto;
    white-space: nowrap;
    color: #22c55e;
}

.regex-copy-btn {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 0.55rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle;
}

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

/* Purview Sensitivity Labels Grid */
.purview-labels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.purview-label-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.purview-label-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-left: 4px solid;
}

.purview-label-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.purview-label-id {
    font-size: 0.6rem;
    font-family: 'SF Mono', monospace;
    color: var(--text-muted);
}

.purview-label-body {
    padding: 12px;
}

.purview-label-tooltip {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0 0 10px 0;
    font-style: italic;
}

.purview-label-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.purview-setting {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
}

.setting-label {
    color: var(--text-muted);
}

.setting-value {
    font-weight: 500;
    color: var(--text-primary);
}

.setting-value.enabled {
    color: #22c55e;
}

.setting-value.disabled {
    color: #ef4444;
}

.purview-content-marking {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.marking-item {
    font-size: 0.65rem;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.marking-item strong {
    color: var(--text-muted);
}

.purview-auto-labeling {
    font-size: 0.65rem;
    color: var(--text-primary);
}

.purview-auto-labeling strong {
    color: var(--text-muted);
}

/* PowerShell Deployment Section */
.ps-deploy-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ps-deploy-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    background: var(--bg-secondary);
    cursor: pointer;
    list-style: none;
}

.ps-deploy-summary::-webkit-details-marker {
    display: none;
}

.ps-deploy-summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.ps-deploy-section[open] .ps-deploy-summary::before {
    transform: rotate(90deg);
}

.ps-deploy-code {
    margin: 0;
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.6rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    overflow-x: auto;
    white-space: pre;
}

/* DFARS 7012 Section */
.dfars-section {
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.05);
}

.dfars-section .impl-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ef4444;
}

.dfars-subheader {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 16px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.portal-link {
    color: #60a5fa;
    text-decoration: none;
    font-size: 0.65rem;
}

.portal-link:hover {
    text-decoration: underline;
}

/* Tabletop Exercises Section */
.ttx-section {
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 16px;
    background: rgba(245, 158, 11, 0.05);
}

.ttx-section .impl-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
}

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

.ttx-scenario-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ttx-scenario-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.ttx-scenario-id {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: monospace;
}

.ttx-scenario-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.ttx-difficulty {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ttx-difficulty.high {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.ttx-difficulty.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.ttx-difficulty.low {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.ttx-duration {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.ttx-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
}

.ttx-participant {
    font-size: 0.55rem;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 3px;
    color: #60a5fa;
}

.ttx-scenario-body {
    padding: 12px 14px;
}

.ttx-scenario-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.ttx-details {
    margin-bottom: 8px;
}

.ttx-details summary {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 0;
}

.ttx-details summary:hover {
    color: #f59e0b;
}

.ttx-injects,
.ttx-questions,
.ttx-actions {
    margin: 8px 0 0 0;
    padding-left: 20px;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.ttx-injects li,
.ttx-questions li,
.ttx-actions li {
    margin-bottom: 4px;
}

/* Lessons Learned Section */
.ll-section-container {
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 16px;
    background: rgba(34, 197, 94, 0.05);
}

.ll-section-container .impl-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #22c55e;
}

.ll-template-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ll-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.ll-header-field {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.ll-header-field strong {
    color: var(--text-primary);
}

.ll-sections {
    padding: 12px 14px;
}

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

.ll-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ll-section h5 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.ll-prompts {
    margin: 0;
    padding-left: 16px;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.ll-prompts li {
    margin-bottom: 4px;
}

.ll-table {
    margin-top: 8px;
}

.ll-priority {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.ll-priority.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.ll-priority.high {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.ll-priority.medium {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.ll-priority.low {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.ll-approvals {
    margin-top: 8px;
}

.ll-approval-row {
    display: flex;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--border-color);
    font-size: 0.65rem;
}

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

.ll-role {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.ll-sig,
.ll-date {
    color: var(--text-muted);
}

.ll-best-practices {
    margin-top: 16px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
}

.ll-best-practices h5 {
    font-size: 0.7rem;
    font-weight: 600;
    color: #22c55e;
    margin: 0 0 8px 0;
}

.ll-best-practices ul {
    margin: 0;
    padding-left: 16px;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.ll-best-practices li {
    margin-bottom: 4px;
}

/* Cloud Selector for Impl Guide View */
.cloud-selector {
    display: flex;
    gap: 6px;
}

.cloud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.6;
}

.cloud-btn:hover {
    opacity: 1;
    border-color: var(--text-muted);
}

.cloud-btn.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(59, 130, 246, 0.6);
    opacity: 1;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.cloud-btn svg {
    flex-shrink: 0;
    display: block;
}

/* Impl Guide View Content */
#impl-guide-view.active {
    display: block;
}

#impl-guide-view .impl-guide-content {
    display: block;
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: none;
    border-radius: 0;
}

.impl-guide-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.impl-guide-view-header .impl-guide-tabs {
    padding: 0;
    border-bottom: none;
}

#impl-guide-view .impl-guide-body {
    padding: 20px 24px;
}

/* Disclaimer Banner */
.disclaimer-banner {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2942 100%);
    border-bottom: 2px solid #f59e0b;
    padding: 8px 16px;
}

.disclaimer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: #e2e8f0;
}

.disclaimer-content svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.disclaimer-content span {
    flex: 1;
    line-height: 1.4;
}

.disclaimer-content strong {
    color: #fbbf24;
}

.disclaimer-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.disclaimer-close:hover {
    color: #f59e0b;
}


/* Global Text Alignment Fixes */
.impl-section p,
.impl-section ul,
.impl-section ol,
.impl-section li {
    text-align: left;
}

.ttx-scenario-text,
.dfars-section p {
    text-align: left;
}

/* Ensure all list items align left */
ul, ol {
    text-align: left;
}

li {
    text-align: left;
}

/* Form inputs should align left */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea,
select {
    text-align: left;
}

/* Table content alignment */
table th,
table td {
    text-align: left;
}

/* Badge and tag centering */
.badge,
.tag,
.status-badge,
.ttx-difficulty,
.ll-priority {
    text-align: center;
}

/* Card headers */
.card-header,
.modal-header,
.impl-section-title {
    text-align: left;
}

/* Descriptions and body text */
.description,
.guidance-value,
.impl-notes-steps li,
.ttx-injects li,
.ttx-questions li,
.ttx-actions li {
    text-align: left;
}

/* (Old hamburger-org-url and hamburger-fetch-btn removed - now using hb-org-url and hb-fetch-btn) */

/* Dashboard Hero Title */
.dashboard-hero {
    text-align: center;
    padding: 24px 24px 16px;
    margin-bottom: 4px;
}

.hero-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: white;
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -1px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--text-primary) 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* VDI Tech Details Expandable Section */
.impl-tech-details {
    display: none;
}

.impl-tech-details.expanded {
    display: block;
}

.control-link-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

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

/* Permanent Footer Disclaimer */
.site-footer-disclaimer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2942 100%);
    border-top: 2px solid #f59e0b;
    padding: 10px 16px;
    z-index: 99999;
}

.footer-disclaimer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: center;
}

.footer-disclaimer-content svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.footer-disclaimer-content strong {
    color: #f59e0b;
}

.footer-oss-notice {
    max-width: 1400px;
    margin: 4px auto 0;
    text-align: center;
    font-size: 0.6rem;
    color: #64748b;
    letter-spacing: 0.01em;
}

.footer-oss-notice a {
    color: #94a3b8;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.footer-oss-notice a:hover {
    color: #e2e8f0;
}

/* Add bottom padding to main content to account for fixed footer */
.main-content {
    padding-bottom: 60px;
}

/* Small Organization Guidance Styling */
.small-org-guidance {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
}

.small-org-guidance .guidance-label {
    color: var(--status-met);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.small-org-guidance .guidance-label::before {
    content: "🏢";
    font-size: 0.9em;
}

.small-org-guidance .guidance-value {
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Mobile Footer Disclaimer */
@media (max-width: 768px) {
    .site-footer-disclaimer {
        padding: 8px 12px;
    }
    
    .footer-disclaimer-content {
        font-size: 0.6rem;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .footer-disclaimer-content svg {
        width: 12px;
        height: 12px;
    }
    
    .footer-oss-notice {
        font-size: 0.5rem;
    }
    
    .main-content {
        padding-bottom: 70px;
    }
}

@media (max-width: 480px) {
    .footer-disclaimer-content {
        font-size: 0.55rem;
    }
    
    .footer-oss-notice {
        font-size: 0.45rem;
    }
    
    .main-content {
        padding-bottom: 70px;
    }
}

/* =============================================
   COMMAND SEARCH MODAL (Cmd+K)
   ============================================= */
.command-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.command-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.command-search-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    padding: 16px;
    z-index: 1000000;
}

.command-search-box {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.command-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.command-search-header svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

#command-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--text-primary);
}

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

.command-search-kbd {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: inherit;
}

.command-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.command-filter-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.command-filter-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.command-search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.command-search-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.command-search-group {
    margin-bottom: 8px;
}

.command-search-group-title {
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.command-search-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.command-search-item:hover,
.command-search-item.selected {
    background: var(--bg-tertiary);
}

.command-search-item.selected {
    background: var(--accent-blue);
}

.command-search-item.selected .command-item-title,
.command-search-item.selected .command-item-desc,
.command-search-item.selected .command-item-id {
    color: white;
}

.command-item-id {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-blue);
    flex-shrink: 0;
    min-width: 80px;
}

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

.command-item-title {
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-item-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-item-badges {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.command-item-badge {
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.command-item-badge.cmmc {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.command-item-badge.l1 {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55a;
}

.command-item-badge.l2 {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.command-item-badge.view {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.command-item-badge.guide {
    background: rgba(20, 184, 166, 0.2);
    color: #14b8a6;
}

.command-search-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.command-footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.command-footer-hint kbd {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.65rem;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .command-search-container {
        padding: 12px;
        max-width: calc(100% - 24px);
    }
    
    .command-search-results {
        max-height: 50vh;
    }
    
    .command-search-footer {
        gap: 12px;
        flex-wrap: wrap;
    }
}

/* ==================== CMMC L3 Assessment Styles ==================== */
.l3-info-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.l3-banner-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.l3-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
}

.l3-banner-text strong {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.l3-banner-text p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.l3-family .family-id.l3 {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1a1a1a;
}

.l3-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

.l3-enhanced-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    margin-left: 8px;
}

.l3-control .control-header {
    border-left: 3px solid rgba(245, 158, 11, 0.5);
}

.l3-control .control-header.expanded {
    border-left-color: #f59e0b;
}

.l3-discussion {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.l3-discussion h4 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.l3-discussion p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.l3-guidance {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.l3-guidance h4 {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.l3-guidance .guidance-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.l3-guidance .guidance-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px;
}

.l3-guidance .guidance-section h5 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.l3-guidance .guidance-section ul {
    margin: 0;
    padding-left: 16px;
}

.l3-guidance .guidance-section li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.4;
}

.l3-evidence {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.l3-evidence h4 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.l3-evidence ul {
    margin: 0;
    padding-left: 16px;
}

.l3-evidence li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.l3-objective {
    border-left: 2px solid rgba(245, 158, 11, 0.3);
}

.l3-objective .objective-id {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.l3-status-buttons .status-btn {
    font-size: 0.7rem;
    padding: 6px 10px;
}

/* L3 Quick Access and Implementation Guide Styles */
.l3-objective .quick-access-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.l3-objective .quick-access-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.l3-objective .quick-access-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.l3-objective .quick-access-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--accent-blue);
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
}

.l3-objective .quick-access-link:hover {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.l3-objective .guidance-steps {
    margin-bottom: 16px;
}

.l3-objective .guidance-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.l3-objective .guidance-list {
    margin: 0;
    padding-left: 20px;
}

.l3-objective .guidance-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.5;
}

.impl-guide-collapsible {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}

.impl-guide-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.impl-guide-toggle:hover {
    background: rgba(139, 92, 246, 0.1);
}

.impl-guide-toggle svg {
    color: var(--accent-blue);
}

.impl-guide-content {
    display: none;
    padding: 16px;
}

.impl-guide-collapsible.expanded .impl-guide-content {
    display: block;
}

.impl-section {
    margin-bottom: 16px;
}

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

.impl-section h5 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
}

.impl-section ol,
.impl-section ul {
    margin: 0;
    padding-left: 20px;
}

.impl-section li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.5;
}

/* ==================== Unified Assessment Objective Dropdowns ==================== */
/* Details/Summary pattern for ITAR, Related, Cloud, Cheat Sheet across all levels */

.impl-details {
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    overflow: visible;
}

.impl-details > .impl-summary {
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
    transition: background 0.15s;
}

.impl-details > .impl-summary::-webkit-details-marker {
    display: none;
}

.impl-details > .impl-summary::after {
    content: '';
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform 0.2s;
}

.impl-details[open] > .impl-summary::after {
    transform: rotate(180deg);
}

.impl-details > .impl-summary:hover {
    background: var(--bg-tertiary);
}

.impl-details[open] > .impl-summary {
    border-bottom: 1px solid var(--border-color);
}

/* ITAR Dropdown */
.impl-summary.impl-itar {
    color: #ef4444;
}

.impl-summary.impl-itar .itar-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.impl-summary.impl-itar .itar-severity-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.itar-content {
    padding: 14px;
}

.itar-subsection {
    margin-bottom: 14px;
}

.itar-subsection:last-child {
    margin-bottom: 0;
}

.itar-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.itar-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.itar-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}

.itar-guidance-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Related Objectives Dropdown */
.impl-summary.impl-related {
    color: var(--primary);
}

.related-content {
    padding: 14px;
}

.related-group {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}

.related-group:last-child {
    margin-bottom: 0;
}

.related-group-header {
    margin-bottom: 8px;
}

.related-group-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.related-group-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}

.related-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.related-controls-label,
.related-evidence-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.related-control-link {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    text-decoration: none;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
}

.related-control-link:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.evidence-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease;
}

.evidence-tag:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.related-evidence-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.related-evidence-list li {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease;
}

.related-evidence-list li:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Cloud Implementation Dropdown */
.impl-summary.impl-cloud {
    color: #06b6d4;
}

.cloud-details .cloud-guidance-section {
    margin: 0;
}

.cloud-provider-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.cloud-select-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-right: 4px;
}

.cloud-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

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

.cloud-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.cloud-btn svg {
    width: 16px;
    height: 16px;
}

.cloud-guidance-content {
    padding: 0;
}

.cloud-select-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    background: var(--bg-primary);
}

.cloud-guidance-panel {
    display: none;
}

.cloud-guidance-panel.active {
    display: block;
}

/* L3 Assessment Objective Styles */
.l3-objective .impl-details {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
}

.l3-objective .impl-details > .impl-summary {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.l3-objective .impl-details[open] > .impl-summary {
    border-bottom: 1px solid var(--border-color);
}

.l3-objective .impl-details > div,
.l3-objective .impl-details > .itar-content,
.l3-objective .impl-details > .related-content,
.l3-objective .impl-details > .cheat-sheet-content {
    padding: 12px;
}

.l3-objective .impl-summary.impl-itar {
    color: var(--status-not-met);
}

.l3-objective .impl-summary.impl-related {
    color: var(--primary);
}

.l3-objective .impl-summary.impl-cheatsheet {
    color: var(--status-met);
}

.l3-objective .itar-badge {
    background: var(--status-not-met);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 4px;
}

.l3-objective .itar-section,
.l3-objective .cheat-section {
    margin-bottom: 12px;
}

.l3-objective .itar-section:last-child,
.l3-objective .cheat-section:last-child {
    margin-bottom: 0;
}

.l3-objective .itar-section strong,
.l3-objective .cheat-section strong {
    display: block;
    font-size: 0.75rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.l3-objective .itar-section p,
.l3-objective .cheat-section p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* L3 Cloud Section */
.l3-cloud-section {
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.l3-cloud-section .arch-cloud-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.l3-cloud-section .cloud-select-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-right: 4px;
}

.l3-cloud-section .cloud-guidance-content {
    padding: 0;
}

.l3-cloud-section .cloud-select-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.l3-cloud-section .cloud-guidance-panel {
    display: none;
}

.l3-cloud-section .cloud-guidance-panel.active {
    display: block;
}

.l3-cloud-section .cloud-guidance-panel.active ~ .cloud-select-prompt,
.l3-cloud-section .arch-cloud-btn.active ~ .cloud-guidance-content .cloud-select-prompt {
    display: none;
}

.l3-cloud-section .impl-notes-section {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* CCA Interview Questions Styles */
.interview-section {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
    overflow: visible;
}

.interview-responsible {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--primary);
}

.interview-category {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    overflow: visible;
}

.interview-category-header {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.interview-category-header::-webkit-details-marker {
    display: none;
}

.interview-category-header::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.interview-category[open] > .interview-category-header::before {
    transform: rotate(90deg);
}

.interview-questions-list {
    list-style: none;
    padding: 0 12px 12px;
    margin: 0;
    overflow: visible;
}

.interview-question {
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
    overflow: visible;
}

.interview-question:last-child {
    margin-bottom: 0;
}

.question-text {
    display: block;
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 6px;
}

.question-followup {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding-left: 12px;
}

.screenshare-section {
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid var(--primary);
    border-radius: 6px;
}

.screenshare-section .cheat-sheet-subtitle {
    color: var(--primary);
}

/* ==================== CMMC L3 Assessment Modal Dropdown Styles ==================== */
.l3-assessment-modal .l3-family-section {
    margin-bottom: 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.l3-assessment-modal .family-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(97, 175, 239, 0.1) 100%);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.l3-assessment-modal .family-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--text-primary);
}

.l3-assessment-modal .family-header .family-id {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

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

.l3-assessment-modal .family-header .control-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.l3-assessment-modal .family-header .family-chevron {
    transition: transform 0.2s;
    color: var(--text-muted);
}

.l3-assessment-modal .family-header.expanded .family-chevron {
    transform: rotate(180deg);
}

.l3-assessment-modal .family-controls {
    display: none;
    padding: 16px;
    flex-direction: column;
    gap: 12px;
}

.l3-assessment-modal .family-controls.expanded {
    display: flex;
}

.l3-assessment-modal .l3-control-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.l3-assessment-modal .control-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
}

.l3-assessment-modal .control-id-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.l3-assessment-modal .control-id-title .control-id {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.l3-assessment-modal .control-id-title .control-title {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.l3-assessment-modal .control-objectives-list {
    border-top: 1px solid var(--border-color);
}

.l3-assessment-modal .l3-objective-item {
    border-bottom: 1px solid var(--border-color);
}

.l3-assessment-modal .l3-objective-item:last-child {
    border-bottom: none;
}

.l3-assessment-modal .objective-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: background 0.2s;
}

.l3-assessment-modal .objective-header:hover {
    background: var(--bg-tertiary);
}

.l3-assessment-modal .objective-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.l3-assessment-modal .obj-marker {
    font-family: monospace;
    font-size: 0.7rem;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
}

.l3-assessment-modal .objective-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.l3-assessment-modal .objective-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.l3-assessment-modal .objective-header.expanded .objective-chevron {
    transform: rotate(180deg);
}

.l3-assessment-modal .objective-guidance {
    padding: 16px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

.l3-assessment-modal .objective-guidance.collapsed {
    display: none;
}

.l3-assessment-modal .guidance-section {
    margin-bottom: 16px;
}

.l3-assessment-modal .guidance-section:last-child {
    margin-bottom: 0;
}

.l3-assessment-modal .guidance-section h6 {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.l3-assessment-modal .tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .l3-assessment-modal .tech-grid {
        grid-template-columns: 1fr;
    }
}

.l3-assessment-modal .tech-provider {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 10px;
}

.l3-assessment-modal .provider-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.l3-assessment-modal .tech-provider ul {
    margin: 0;
    padding-left: 16px;
}

.l3-assessment-modal .tech-provider li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.l3-assessment-modal .automation-tags,
.l3-assessment-modal .evidence-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.l3-assessment-modal .auto-tag,
.l3-assessment-modal .evidence-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
}

.l3-assessment-modal .auto-tag {
    background: rgba(97, 175, 239, 0.1);
    border-color: rgba(97, 175, 239, 0.3);
    color: #61afef;
}

.l3-assessment-modal .evidence-tag {
    background: rgba(152, 195, 121, 0.1);
    border-color: rgba(152, 195, 121, 0.3);
    color: #98c379;
}

/* ==================== Responsive Styles for Assessment Dropdowns ==================== */
@media (max-width: 768px) {
    .impl-details > .impl-summary {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .cloud-provider-toggle {
        padding: 10px 12px;
        gap: 6px;
    }
    
    .cloud-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    
    .cloud-btn span {
        display: none;
    }
    
    .cloud-select-label {
        display: none;
    }
    
    .itar-content,
    .related-content {
        padding: 12px;
    }
    
    .related-group {
        padding: 10px;
    }
    
    .objective-details {
        padding: 0 12px 12px 12px !important;
    }
}

@media (max-width: 480px) {
    .impl-details {
        margin-top: 8px;
        border-radius: 6px;
    }
    
    .impl-details > .impl-summary {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .cloud-btn {
        padding: 6px 8px;
    }
    
    .cloud-guidance-content {
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════
   REV 3 ACTIVE — EMERALD GREEN EASTER EGG
   ═══════════════════════════════════════════════ */
body.rev3-active .header-badge,
body.rev3-active .hb-panel-badge {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2));
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.15);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.12);
    transition: all 0.4s ease;
}

body.rev3-active .top-header-bar {
    border-bottom-color: rgba(16, 185, 129, 0.1);
}

body.rev3-active .hb-panel {
    background: rgba(10, 10, 15, 0.96);
    border-right-color: rgba(16, 185, 129, 0.08);
}

body.rev3-active .hb-panel-header {
    border-bottom-color: rgba(16, 185, 129, 0.15);
}

body.rev3-active .hb-toggle:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

body.rev3-active .hamburger-nav-btn:hover {
    background: rgba(16, 185, 129, 0.08);
}

body.rev3-active .hamburger-nav-btn:hover .hb-icon {
    background: rgba(16, 185, 129, 0.15);
}

body.rev3-active .hamburger-nav-btn:hover .hb-icon svg {
    color: #34d399;
}

body.rev3-active .hamburger-nav-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.10));
    color: #34d399;
}

body.rev3-active .hamburger-nav-btn.active .hb-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

body.rev3-active .hamburger-nav-btn.active {
    border-left-color: #10b981;
}

body.rev3-active .hb-section-label {
    color: rgba(52, 211, 153, 0.5);
}

body.rev3-active .hb-org-section {
    border-top-color: rgba(16, 185, 129, 0.12);
}

body.rev3-active .hb-close:hover {
    color: #34d399;
}

body.rev3-active .hero-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

body.rev3-active .hero-title {
    background: linear-gradient(135deg, var(--text-primary) 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════
   CMVP EXPLORER PANEL
   ═══════════════════════════════════════════════ */
.cmvp-explorer {
    padding: 20px;
}

.cmvp-header {
    margin-bottom: 20px;
}

.cmvp-header p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
    line-height: 1.5;
}

.cmvp-stats-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cmvp-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    flex: 1;
    min-width: 140px;
}

.cmvp-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #8ba2ff;
}

.cmvp-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.cmvp-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cmvp-search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmvp-search-input:focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 20px var(--focus-glow);
}

.cmvp-filter-select {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.8rem;
    min-width: 120px;
}

.cmvp-search-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #6c8aff, #8b5cf6);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cmvp-search-btn:hover {
    opacity: 0.9;
}

.cmvp-results-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.cmvp-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.cmvp-module-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.2s;
}

.cmvp-module-card:hover {
    border-color: #7c3aed;
}

.cmvp-module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.cmvp-module-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    flex: 1;
    margin-right: 8px;
}

.cmvp-cert-num {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    white-space: nowrap;
}

.cmvp-module-vendor {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.cmvp-module-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cmvp-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cmvp-tag.fips3 {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.cmvp-tag.fips2 {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.cmvp-tag.active {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

.cmvp-tag.revoked {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.cmvp-tag.level {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24;
}

.cmvp-tag.type {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.cmvp-module-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.6;
}

.cmvp-module-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.cmvp-link {
    font-size: 0.75rem;
    color: #a78bfa;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}

.cmvp-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.cmvp-save-btn {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--hover-bg);
    border: 1px solid var(--hover-border);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    margin-left: auto;
}
.cmvp-save-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--focus-border);
}
.cmvp-save-btn.saved {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.08);
    cursor: default;
}

.cmvp-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.cmvp-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.cmvp-toast.success { border-left: 3px solid #34d399; }
.cmvp-toast.info { border-left: 3px solid #6c8aff; }

/* FIPS cert control-linking in OSC Inventory */
.fips-linked-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.fips-control-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--hover-bg);
    color: var(--accent-blue);
    border: 1px solid var(--hover-border);
}
.fips-link-btn {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--hover-bg);
    color: var(--text-secondary);
    border: 1px dashed var(--hover-border);
    cursor: pointer;
    transition: all 0.15s;
}
.fips-link-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--focus-border);
}

/* FIPS control-linking modal */
.fips-link-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fips-link-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.fips-link-modal h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--text-primary);
}
.fips-link-modal .fips-link-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.fips-link-control-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.fips-link-control-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
}
.fips-link-control-item:hover {
    background: rgba(108, 138, 255, 0.06);
    border-color: rgba(108, 138, 255, 0.2);
}
.fips-link-control-item.selected {
    background: rgba(108, 138, 255, 0.1);
    border-color: rgba(108, 138, 255, 0.3);
}
.fips-link-control-item input[type="checkbox"] {
    accent-color: #6c8aff;
}
.fips-link-control-item .ctrl-id {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #8ba2ff;
    min-width: 60px;
}
.fips-link-control-item .ctrl-name {
    font-size: 0.8rem;
    color: var(--text-primary);
}
.fips-link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.fips-link-actions button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.fips-link-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.fips-link-cancel:hover { background: var(--bg-primary); }
.fips-link-save {
    background: rgba(108, 138, 255, 0.15);
    border: 1px solid rgba(108, 138, 255, 0.3);
    color: #8ba2ff;
}
.fips-link-save:hover {
    background: rgba(108, 138, 255, 0.25);
}

.cmvp-loading, .cmvp-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cmvp-loading svg {
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

.cmvp-context-note {
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.cmvp-context-note strong {
    color: #a78bfa;
}

/* ═══════════════════════════════════════════════
   FEDRAMP REFERENCE PANEL
   ═══════════════════════════════════════════════ */
.fedramp-reference {
    padding: 20px;
}

.fedramp-ref-header {
    margin-bottom: 20px;
}

.fedramp-ref-header p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
    line-height: 1.5;
}

.fedramp-ref-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-color);
}

.fedramp-ref-tab {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.fedramp-ref-tab:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--text-primary);
}

.fedramp-ref-tab.active {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
}

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

.fedramp-ksi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.2s;
}

.fedramp-ksi-card:hover {
    border-color: #7c3aed;
}

.fedramp-ksi-id {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    display: inline-block;
    margin-bottom: 8px;
}

.fedramp-ksi-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.fedramp-ksi-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}

.fedramp-ksi-controls {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.fedramp-ksi-controls strong {
    color: var(--text-secondary);
}

.fedramp-external-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.fedramp-ext-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
}

.fedramp-ext-link:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.04);
}

.fedramp-ext-link .ext-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #a78bfa;
}

.fedramp-ext-link .ext-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.fedramp-ext-link .ext-info p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.fedramp-ext-link .ext-arrow {
    margin-left: auto;
    color: var(--text-muted);
    flex-shrink: 0;
    align-self: center;
}

/* ═══════════════════════════════════════════════
   AWS RSC IMPLEMENTATION CARDS
   ═══════════════════════════════════════════════ */

.rsc-category-heading {
    margin: 24px 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.02em;
}

.rsc-cat-icon {
    font-size: 1.1rem;
}

.rsc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rsc-action-btn.primary {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.25);
}

.rsc-action-btn.primary:hover {
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

.rsc-action-btn.secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    backdrop-filter: saturate(180%) blur(20px);
}

.rsc-action-btn.secondary:hover {
    border-color: rgba(124, 58, 237, 0.3);
    background: rgba(124, 58, 237, 0.06);
}

.rsc-impl-card {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rsc-impl-card:hover {
    border-color: rgba(245, 158, 11, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.rsc-impl-card.expanded {
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 24px rgba(245, 158, 11, 0.04);
}

.rsc-impl-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rsc-impl-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.rsc-impl-header-left .fedramp-ksi-id {
    margin-bottom: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.rsc-impl-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.rsc-impl-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.rsc-expand-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.rsc-expand-btn:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.rsc-impl-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
    animation: rscFadeIn 0.25s ease-out;
}

@keyframes rscFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.rsc-detail-section {
    margin-bottom: 18px;
}

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

.rsc-detail-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rsc-detail-label svg {
    color: #fbbf24;
}

.rsc-overview-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.04);
    border-left: 3px solid rgba(245, 158, 11, 0.3);
    border-radius: 0 8px 8px 0;
    margin: 0;
}

.rsc-steps-list {
    margin: 0;
    padding-left: 20px;
    list-style: none;
    counter-reset: rsc-step;
}

.rsc-steps-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 6px 0 6px 8px;
    position: relative;
    counter-increment: rsc-step;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.rsc-steps-list li:last-child {
    border-bottom: none;
}

.rsc-steps-list li::before {
    content: counter(rsc-step);
    position: absolute;
    left: -20px;
    top: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsc-cli-examples {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsc-cli-block {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    overflow: hidden;
}

.rsc-cli-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    letter-spacing: 0.3px;
}

.rsc-cli-code {
    margin: 0;
    padding: 12px 14px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    color: #34d399;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.rsc-cli-code code {
    font-family: inherit;
    color: inherit;
}

.rsc-verification-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsc-verification-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 8px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    transition: background 0.15s;
}

.rsc-verification-list li:hover {
    background: rgba(52, 211, 153, 0.04);
}

.rsc-check-icon {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.rsc-arch-notes {
    background: rgba(108, 138, 255, 0.03);
    border: 1px solid rgba(108, 138, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
}

.rsc-arch-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* ═══════════════════════════════════════════════
   FEDRAMP IMPLEMENTATION GUIDE
   ═══════════════════════════════════════════════ */

.impl-guide-family-heading {
    margin: 20px 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.impl-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.impl-guide-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.impl-guide-card:hover {
    border-color: rgba(79, 70, 229, 0.4);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

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

.impl-guide-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.impl-guide-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}

.impl-guide-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.impl-guide-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
}

.impl-guide-badge.blue {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.impl-guide-drill {
    font-size: 0.75rem;
    color: var(--accent-blue);
    margin-left: auto;
    font-weight: 500;
}

/* Detail Panel */
.impl-detail-panel {
    animation: implFadeIn 0.2s ease;
}

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

.impl-detail-back {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background 0.15s, color 0.15s;
}

.impl-detail-back:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

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

.impl-detail-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.impl-detail-family {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.impl-detail-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid rgba(79, 70, 229, 0.4);
}

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

.impl-detail-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.impl-detail-section-title svg {
    color: var(--accent-blue);
    flex-shrink: 0;
}

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

/* 800-171 Control Cards with Status */
.impl-detail-171-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.impl-171-card {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    transition: border-color 0.15s;
}

.impl-171-card.met {
    border-left: 3px solid #10b981;
}

.impl-171-card.partial {
    border-left: 3px solid #f59e0b;
}

.impl-171-card.not-met {
    border-left: 3px solid #ef4444;
}

.impl-171-card.not-assessed {
    border-left: 3px solid rgba(148, 163, 184, 0.4);
}

.impl-171-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}

.impl-171-id {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-blue);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.impl-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.impl-status-badge.met {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.impl-status-badge.partial {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.impl-status-badge.not-met {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.impl-status-badge.not-assessed {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

.impl-171-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.impl-171-practice {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Evidence List */
.impl-evidence-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.impl-evidence-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 6px 0 6px 20px;
    position: relative;
    line-height: 1.5;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
}

.impl-evidence-list li:last-child {
    border-bottom: none;
}

.impl-evidence-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
    font-size: 0.75rem;
}

.impl-evidence-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 10px 0 0;
    font-style: italic;
}

/* MCP Server Section */
.impl-mcp-section {
    border-color: rgba(79, 70, 229, 0.2);
    background: linear-gradient(135deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary) 95%, #4f46e5));
}

.impl-mcp-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.5;
}

.impl-mcp-queries {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.impl-mcp-query {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.impl-mcp-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 130px;
}

.impl-mcp-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.3);
    color: #a78bfa;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    word-break: break-all;
}

.impl-mcp-code:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(167, 139, 250, 0.3);
}

.impl-mcp-install {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
}

/* ═══════════════════════════════════════════════
   SITE-WIDE PURPLE ACCENT POLISH
   ═══════════════════════════════════════════════ */

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

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.5);
}

/* Search box focus */
.search-box:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Filter select focus */
.filter-select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Sidebar export/save/load hover */
.export-btn:hover, .save-btn:hover, .load-btn:hover {
    border-color: rgba(124, 58, 237, 0.4);
}

/* Control ID purple accent */
.control-id {
    color: #a78bfa;
}

/* Hamburger panel badge default purple */
.hb-panel-badge {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35);
}

/* ═══════════════════════════════════════════════
   TERMINAL UI COMPONENT
   ═══════════════════════════════════════════════ */
.terminal-container {
    background: #0a0a0f;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #111118;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

.terminal-header-dots {
    display: flex;
    gap: 6px;
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-dot.red { background: #ef4444; }
.terminal-dot.yellow { background: #f59e0b; }
.terminal-dot.green { background: #10b981; }

.terminal-header-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
}

.terminal-header-actions {
    display: flex;
    gap: 6px;
}

.terminal-copy-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 6px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s;
}

.terminal-copy-btn:hover {
    border-color: #7c3aed;
    color: #a78bfa;
}

.terminal-output {
    padding: 16px;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.terminal-output::-webkit-scrollbar {
    width: 6px;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 3px;
}

.terminal-line {
    white-space: pre-wrap;
    word-break: break-word;
    color: #d4d4d8;
    min-height: 1.2em;
}

.terminal-cmd {
    color: #e4e4e7;
}

.terminal-cmd .terminal-prompt {
    color: #a78bfa;
    font-weight: 600;
}

.terminal-info { color: #60a5fa; }
.terminal-success { color: #34d399; }
.terminal-warning { color: #fbbf24; }
.terminal-error { color: #f87171; }
.terminal-cyan { color: #22d3ee; }

.terminal-section-title {
    color: #a78bfa;
    font-weight: 600;
}

.terminal-table-header {
    color: #7c3aed;
}

.terminal-table-row {
    color: #d4d4d8;
}

.terminal-input-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
    background: #08080d;
}

.terminal-input-row .terminal-prompt {
    color: #a78bfa;
    font-weight: 600;
    margin-right: 8px;
    white-space: nowrap;
    font-family: inherit;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e4e4e7;
    font-family: inherit;
    font-size: inherit;
    caret-color: #a78bfa;
}

.terminal-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Terminal mode toggle button */
.terminal-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.terminal-mode-toggle:hover {
    background: rgba(108, 138, 255, 0.12);
    border-color: rgba(108, 138, 255, 0.3);
}

.terminal-mode-toggle.active {
    background: linear-gradient(135deg, #6c8aff, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(108, 138, 255, 0.2);
}

.terminal-mode-toggle svg {
    width: 14px;
    height: 14px;
}

/* ═══════════════════════════════════════════════
   GLOBAL SCROLLBAR — OBSIDIAN THEME
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(108, 138, 255, 0.12);
    border-radius: 3px;
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 138, 255, 0.25);
}

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

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 138, 255, 0.12) transparent;
}

/* ═══════════════════════════════════════════════
   CYBER GRID OVERLAY — SUBTLE BACKGROUND TEXTURE
   ═══════════════════════════════════════════════ */
.main-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(108, 138, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 138, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
}

/* No-sidebar layout grid offset */
.no-sidebar .main-content::before {
    left: 0;
}

/* ═══════════════════════════════════════════════
   SELECTION & FOCUS GLOW
   ═══════════════════════════════════════════════ */
::selection {
    background: rgba(108, 138, 255, 0.25);
    color: #e4e5ea;
}

:focus-visible {
    outline: 2px solid rgba(108, 138, 255, 0.4);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   GLOW ACCENTS ON KEY INTERACTIVE ELEMENTS
   ═══════════════════════════════════════════════ */
a {
    color: #6c8aff;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #8ba2ff;
}

code, .impl-code {
    background: rgba(108, 138, 255, 0.08);
    border: 1px solid rgba(108, 138, 255, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
    color: #8ba2ff;
}

/* Animated glow ring for primary action buttons */
@keyframes glow-ring {
    0%, 100% { box-shadow: 0 0 8px rgba(108, 138, 255, 0.1); }
    50% { box-shadow: 0 0 20px rgba(108, 138, 255, 0.2); }
}

/* ═══════════════════════════════════════════════
   POLAR WHITE — LIGHT THEME OVERRIDES
   Stark white premium theme: override hardcoded
   dark colors that CSS variables alone can't reach.
   ═══════════════════════════════════════════════ */

/* --- Scrollbars --- */
.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(87, 70, 184, 0.16);
}
.light-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(87, 70, 184, 0.28);
}
.light-theme ::-webkit-scrollbar-track {
    background: rgba(248, 247, 252, 0.6);
}
.light-theme * {
    scrollbar-color: rgba(87, 70, 184, 0.16) rgba(248, 247, 252, 0.6);
}

/* --- Links --- */
.light-theme a {
    color: #5746b8;
}
.light-theme a:hover {
    color: #4636a0;
}

/* --- Code / inline code --- */
.light-theme code,
.light-theme .impl-code {
    background: rgba(87, 70, 184, 0.06);
    border-color: rgba(87, 70, 184, 0.12);
    color: #4636a0;
}

/* --- Selection --- */
.light-theme ::selection {
    background: rgba(87, 70, 184, 0.18);
    color: #1b1530;
}

/* --- Focus ring --- */
.light-theme :focus-visible {
    outline-color: rgba(87, 70, 184, 0.50);
}

/* --- Cyber grid overlay: soften for white bg --- */
.light-theme .main-content::before {
    background-image:
        linear-gradient(rgba(87, 70, 184, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87, 70, 184, 0.025) 1px, transparent 1px);
}

/* --- Glow ring keyframes override --- */
.light-theme .glow-ring,
.light-theme [style*="glow-ring"] {
    animation: glow-ring-light 3s ease-in-out infinite;
}
@keyframes glow-ring-light {
    0%, 100% { box-shadow: 0 0 6px rgba(87, 70, 184, 0.08); }
    50% { box-shadow: 0 0 14px rgba(87, 70, 184, 0.14); }
}

/* --- Header bar: frosted glass over purple canvas --- */
.light-theme .top-header-bar {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(87, 70, 184, 0.10);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.light-theme .header-badge {
    background: linear-gradient(135deg, #5746b8, #8b5cf6);
    color: #fff;
}
.light-theme .header-title {
    color: #1b1530;
}

/* --- Hamburger nav panel: frosted glass --- */
.light-theme .hb-panel {
    background: rgba(255, 255, 255, 0.85);
    border-right-color: rgba(87, 70, 184, 0.10);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.light-theme .hb-panel-header {
    border-bottom-color: rgba(87, 70, 184, 0.06);
}
.light-theme .hamburger-nav-btn {
    color: #44395e;
}
.light-theme .hamburger-nav-btn:hover {
    background: rgba(87, 70, 184, 0.06);
    color: #1b1530;
}
.light-theme .hamburger-nav-btn.active {
    background: rgba(87, 70, 184, 0.08);
    color: #5746b8;
}
.light-theme .hb-overlay {
    background: rgba(27, 21, 48, 0.12);
}

/* --- Cards & panels: frosted glass with violet tint --- */
.light-theme .card,
.light-theme .panel,
.light-theme .assessment-card,
.light-theme .control-card,
.light-theme .family-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(87, 70, 184, 0.06), 0 0 0 1px rgba(87, 70, 184, 0.06);
}

/* --- Status badges: WCAG AA contrast on white (4.5:1+) --- */
.light-theme .status-met { background: #0d9668; color: #fff; }
.light-theme .status-partial { background: #c27800; color: #fff; }
.light-theme .status-not-met { background: #dc2626; color: #fff; }
.light-theme .status-not-assessed { background: #6e6488; color: #fff; }

/* --- Modals: frosted glass --- */
.light-theme .modal-overlay,
.light-theme .command-search-backdrop {
    background: rgba(27, 21, 48, 0.18);
}
.light-theme .modal-content {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 8px 40px rgba(87, 70, 184, 0.12), 0 0 0 1px rgba(87, 70, 184, 0.08);
}

/* --- Terminal output --- */
.light-theme .terminal-output {
    background: rgba(241, 240, 247, 0.8);
    scrollbar-color: rgba(87, 70, 184, 0.16) transparent;
}
.light-theme .terminal-output::-webkit-scrollbar-thumb {
    background: rgba(87, 70, 184, 0.16);
}

/* --- Theme picker dropdown --- */
.light-theme .header-theme-menu {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(87, 70, 184, 0.10);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 8px 30px rgba(87, 70, 184, 0.10);
}
.light-theme .header-theme-option:hover {
    background: rgba(87, 70, 184, 0.05);
}
.light-theme .header-theme-category {
    color: #6e6488;
}

/* --- Inputs & selects --- */
.light-theme input,
.light-theme select,
.light-theme textarea {
    color: #1b1530;
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(87, 70, 184, 0.12);
}
.light-theme input:focus,
.light-theme select:focus,
.light-theme textarea:focus {
    border-color: rgba(87, 70, 184, 0.35);
    box-shadow: 0 0 0 3px rgba(87, 70, 184, 0.08);
}
.light-theme input::placeholder,
.light-theme textarea::placeholder {
    color: #6e6488;
}

/* --- Tables --- */
.light-theme th {
    background: rgba(87, 70, 184, 0.03);
    color: #44395e;
}
.light-theme tr:hover td {
    background: rgba(87, 70, 184, 0.04);
}

/* --- Buttons --- */
.light-theme .btn-primary,
.light-theme button[class*="primary"] {
    background: linear-gradient(135deg, #5746b8, #6c5ce7);
    color: #fff;
    border-color: transparent;
}
.light-theme .btn-primary:hover,
.light-theme button[class*="primary"]:hover {
    background: linear-gradient(135deg, #4636a0, #5b4bd5);
}

/* --- Dashboard score badges --- */
.light-theme .dashboard-score-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Main content area: semi-transparent for canvas bleed-through --- */
.light-theme .main-content {
    background: rgba(248, 247, 252, 0.65);
}