/* =====================================================
   Solaria — Design System
   ===================================================== */

/* CSS Variables */
:root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 56px;

    /* Light theme */
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-2: #f1f5f9;
    --color-border: #e2e8f0;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-info: #06b6d4;
    --color-sidebar-bg: #1e293b;
    --color-sidebar-text: #94a3b8;
    --color-sidebar-text-hover: #ffffff;
    --color-sidebar-active-bg: rgba(59, 130, 246, 0.15);
    --color-sidebar-active-text: #60a5fa;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --radius: 8px;
    --radius-sm: 4px;
    --transition: 0.2s ease;
}

[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-2: #243044;
    --color-border: #334155;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-danger: #f87171;
    --color-danger-hover: #ef4444;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-info: #22d3ee;
    --color-sidebar-bg: #0f172a;
    --color-sidebar-text: #64748b;
    --color-sidebar-text-hover: #f1f5f9;
    --color-sidebar-active-bg: rgba(96, 165, 250, 0.15);
    --color-sidebar-active-text: #60a5fa;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

html { font-size: 16px; scroll-behavior: smooth; border: none; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    transition: background var(--transition), color var(--transition);
    border: none;
    padding-top: env(safe-area-inset-top);
}

/* ===== Layout ===== */
.app-layout {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
    width: var(--sidebar-collapsed-width);
    background: var(--color-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: width 0.25s ease;
    overflow: hidden;
}

.sidebar:hover {
    width: var(--sidebar-width);
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 16px;
    padding-left: 18px;
    height: var(--topbar-height);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
}

.logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #60a5fa;
}

.sidebar-logo-text {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar:hover .sidebar-logo-text {
    opacity: 1;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 18px;
    color: var(--color-sidebar-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    font-size: 0.875rem;
    font-family: inherit;
    margin-bottom: 2px;
}

.nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--color-sidebar-text-hover);
}

.nav-item.active {
    background: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-active-text);
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-item span {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar:hover .nav-item span {
    opacity: 1;
}

.sidebar-footer {
    padding: 12px 8px;
}

.nav-item.logout:hover {
    background: rgba(239,68,68,0.1);
    color: #f87171;
}

/* Theme toggle icons */
[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* ===== Main wrapper ===== */
.main-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-collapsed-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    border: none;
}

/* ===== Topbar ===== */
.topbar {
    height: var(--topbar-height);
    background: var(--color-bg);
    border-bottom: none;
    display: none;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: none;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
}
.mobile-menu-btn svg { width: 20px; height: 20px; }

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 24px 0;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.context-help-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: background var(--transition), color var(--transition);
}
.context-help-btn:hover {
    background: var(--color-surface-2);
    color: var(--color-primary);
}
.context-help-btn svg { width: 20px; height: 20px; }

/* ===== Risk score bar ===== */
.risk-score-bar {
    width: 100%;
    height: 8px;
    background: var(--color-surface-2);
    border-radius: 4px;
    overflow: hidden;
}

.risk-score-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-warning) 50%, var(--color-danger) 100%);
    transition: width 0.6s ease;
}

.risk-score-label {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ===== Detail grid ===== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.detail-value {
    font-size: 0.9rem;
    color: var(--color-text);
}

.form-context {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* ===== Main content ===== */
.main-content {
    flex: 1;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
    border: none;
}

/* ===== Context panel ===== */
.context-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    transform: translateX(100%);
    transition: transform var(--transition);
    display: flex;
    flex-direction: column;
}

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

.context-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

.context-panel-header h3 { font-size: 1rem; }

#context-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--color-text-muted);
    line-height: 1;
}

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

/* ===== Alerts ===== */
.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

[data-theme="dark"] .alert-success { background: #052e16; color: #86efac; border-color: #166534; }
[data-theme="dark"] .alert-error { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .alert-warning { background: #431407; color: #fcd34d; border-color: #92400e; }
[data-theme="dark"] .alert-info { background: #172554; color: #93c5fd; border-color: #1e40af; }

.alert-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
}
.alert-close:hover { opacity: 1; }

/* ===== Toast Notifications ===== */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 400px;
    width: calc(100% - 32px);
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    position: relative;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.35s ease;
}

.toast.toast-enter {
    transform: translateX(0);
    opacity: 1;
}

.toast.toast-exit {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.06, 0.71, 0.55, 1), opacity 0.25s ease;
}

.toast-accent {
    width: 4px;
    flex-shrink: 0;
}

.toast-success .toast-accent { background: var(--color-success); }
.toast-error .toast-accent { background: var(--color-danger); }
.toast-warning .toast-accent { background: var(--color-warning); }
.toast-info .toast-accent { background: var(--color-info); }

.toast-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-info .toast-icon { color: var(--color-info); }

.toast-message {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
    word-break: break-word;
}

.toast-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    flex-shrink: 0;
}

.toast-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    padding: 0;
}

.toast-btn:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.toast-btn svg {
    width: 14px;
    height: 14px;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 4px;
    right: 0;
    height: 2px;
    background: var(--color-border);
    overflow: hidden;
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: none;
}

.toast-progress-bar.running {
    transition: transform linear;
}

.toast-success .toast-progress-bar { background: var(--color-success); }
.toast-error .toast-progress-bar { background: var(--color-danger); }
.toast-warning .toast-progress-bar { background: var(--color-warning); }
.toast-info .toast-progress-bar { background: var(--color-info); }

@media (max-width: 640px) {
    .toast-container {
        top: 8px;
        right: 8px;
        left: 8px;
        max-width: none;
        width: auto;
    }
}

/* ===== Cards ===== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

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

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

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

.card-body { padding: 20px; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
    font-family: inherit;
}

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

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-2); }

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger-hover); }

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-xs { padding: 4px 8px; font-size: 0.75rem; }
.btn-full { width: 100%; justify-content: center; }

/* ===== Page actions ===== */
.page-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

/* ===== Tables ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-surface-2); }
.row-muted { opacity: 0.5; }

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success, .badge-active, .badge-published { background: #dcfce7; color: #166534; }
.badge-error, .badge-critical { background: #fee2e2; color: #991b1b; }
.badge-warning, .badge-high { background: #fef3c7; color: #92400e; }
.badge-info, .badge-medium { background: #dbeafe; color: #1e40af; }
.badge-low { background: #e0e7ff; color: #3730a3; }
.badge-draft { background: #f1f5f9; color: #475569; }
.badge-archived, .badge-paused { background: #f1f5f9; color: #64748b; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-running { background: #dbeafe; color: #1e40af; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-source { background: var(--color-surface-2); color: var(--color-text-muted); }
.badge-debug { background: #f1f5f9; color: #475569; }

/* Opportunity pipeline badges */
.badge-detected { background: #dbeafe; color: #1e40af; }
.badge-evaluating { background: #fef3c7; color: #92400e; }
.badge-evaluated { background: #e0e7ff; color: #3730a3; }
.badge-applying { background: #fae8ff; color: #86198f; }
.badge-submitted { background: #cffafe; color: #155e75; }
.badge-awarded { background: #dcfce7; color: #166534; }
.badge-not_awarded { background: #fee2e2; color: #991b1b; }
.badge-discarded { background: #f1f5f9; color: #64748b; }

[data-theme="dark"] .badge-detected { background: #172554; color: #93c5fd; }
[data-theme="dark"] .badge-evaluating { background: #431407; color: #fcd34d; }
[data-theme="dark"] .badge-evaluated { background: #1e1b4b; color: #a5b4fc; }
[data-theme="dark"] .badge-applying { background: #4a044e; color: #f0abfc; }
[data-theme="dark"] .badge-submitted { background: #083344; color: #67e8f9; }
[data-theme="dark"] .badge-awarded { background: #052e16; color: #86efac; }
[data-theme="dark"] .badge-not_awarded { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .badge-discarded { background: #1e293b; color: #94a3b8; }

/* ─── Score Ring ─── */
.score-ring-container { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.score-ring { position: relative; width: 100px; height: 100px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-bg { fill: none; stroke: var(--color-surface-2); stroke-width: 8; }
.score-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.score-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.score-ring-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ─── Opportunity Detail Layout ─── */
.opp-header { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
.opp-header-info { flex: 1; min-width: 0; }
.opp-header-title { font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin: 0 0 8px 0; line-height: 1.4; }
.opp-header-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.opp-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.opp-meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }

.opp-two-col { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 1024px) { .opp-two-col { grid-template-columns: 1fr; } }

.opp-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* ─── Info Sections ─── */
.info-section { margin-bottom: 8px; }
.info-section-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.info-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.85rem; }
.info-row + .info-row { border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent); }
.info-row-label { color: var(--color-text-muted); }
.info-row-value { color: var(--color-text); font-weight: 500; text-align: right; max-width: 60%; }

/* ─── Keyword Tags ─── */
.keyword-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.keyword-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.keyword-tag-weight { font-size: 0.65rem; opacity: 0.6; }

/* ─── Pipeline Steps ─── */
.pipeline-steps { display: flex; gap: 2px; margin: 12px 0; }
.pipeline-step { flex: 1; height: 6px; border-radius: 3px; background: var(--color-surface-2); transition: background 0.2s; }
.pipeline-step.active { background: var(--color-primary); }
.pipeline-step.completed { background: var(--color-success); }

/* ─── Analysis Cards ─── */
.analysis-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; background: var(--color-surface); transition: border-color 0.2s; }
.analysis-card:hover { border-color: var(--color-primary); }
.analysis-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.analysis-card-model { font-weight: 600; font-size: 0.9rem; }
.analysis-card-body { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; }
.analysis-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-text-muted); }
.analysis-fit-score { display: flex; align-items: center; gap: 6px; }
.analysis-fit-bar { width: 60px; height: 6px; border-radius: 3px; background: var(--color-surface-2); overflow: hidden; }
.analysis-fit-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

/* ─── Analysis Detail Hero ─── */
.analysis-hero { display: flex; gap: 24px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; }
.analysis-hero-left { flex-shrink: 0; }
.analysis-hero-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.analysis-hero-model { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 700; color: var(--color-text); }
.analysis-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.analysis-hero-opportunity { margin-top: 2px; }
.analysis-hero-right { flex-shrink: 0; min-width: 180px; }
.analysis-hero-stats { display: flex; flex-direction: column; gap: 12px; }
.analysis-hero-stat { display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); }
.analysis-hero-stat > div { display: flex; flex-direction: column; }
.analysis-stat-value { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.analysis-stat-label { font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
    .analysis-hero { flex-direction: column; align-items: center; text-align: center; }
    .analysis-hero-center { align-items: center; }
    .analysis-hero-meta { justify-content: center; }
    .analysis-hero-right { width: 100%; min-width: 0; }
    .analysis-hero-stats { flex-direction: row; justify-content: center; gap: 20px; }
}

/* ─── Analysis Verdict Badge ─── */
.analysis-verdict { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.analysis-verdict-success { background: #dcfce7; color: #166534; }
.analysis-verdict-warning { background: #fef3c7; color: #92400e; }
.analysis-verdict-draft { background: #f1f5f9; color: #475569; }
[data-theme="dark"] .analysis-verdict-success { background: #052e16; color: #86efac; }
[data-theme="dark"] .analysis-verdict-warning { background: #431407; color: #fcd34d; }
[data-theme="dark"] .analysis-verdict-draft { background: #1e293b; color: #94a3b8; }

/* ─── Analysis Prose (markdown output) ─── */
.analysis-prose { font-size: 0.9rem; line-height: 1.75; color: var(--color-text); }
.analysis-prose h1, .analysis-prose h2, .analysis-prose h3, .analysis-prose h4 { margin: 1.5em 0 0.5em; color: var(--color-text); font-weight: 600; }
.analysis-prose h1 { font-size: 1.3rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
.analysis-prose h2 { font-size: 1.15rem; padding-bottom: 0.2em; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent); }
.analysis-prose h3 { font-size: 1rem; }
.analysis-prose p { margin: 0.75em 0; }
.analysis-prose ul, .analysis-prose ol { margin: 0.75em 0; padding-left: 1.5em; }
.analysis-prose li { margin: 0.3em 0; }
.analysis-prose li::marker { color: var(--color-text-muted); }
.analysis-prose strong { color: var(--color-text); font-weight: 600; }
.analysis-prose blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 3px solid var(--color-primary); background: var(--color-surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-muted); }
.analysis-prose code { font-size: 0.85em; padding: 2px 6px; background: var(--color-surface-2); border-radius: var(--radius-sm); color: var(--color-primary); }
.analysis-prose pre { margin: 1em 0; padding: 16px; background: var(--color-surface-2); border-radius: var(--radius); overflow-x: auto; }
.analysis-prose pre code { background: none; padding: 0; color: var(--color-text); }
.analysis-prose table { width: 100%; margin: 1em 0; border-collapse: collapse; }
.analysis-prose th, .analysis-prose td { padding: 8px 12px; border: 1px solid var(--color-border); text-align: left; font-size: 0.85rem; }
.analysis-prose th { background: var(--color-surface-2); font-weight: 600; }
.analysis-prose hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5em 0; }

/* ─── Analysis Rendered Sections ─── */
.analysis-summary { margin-bottom: 20px; }
.analysis-summary p { font-size: 0.95rem; line-height: 1.7; color: var(--color-text); margin: 0; }

.analysis-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 640px) { .analysis-swot { grid-template-columns: 1fr; } }
.analysis-swot-col { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; background: var(--color-surface); }
.analysis-swot-strengths { border-left: 3px solid var(--color-success); }
.analysis-swot-weaknesses { border-left: 3px solid var(--color-warning); }
.analysis-swot-header { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.analysis-swot-strengths .analysis-swot-header { color: var(--color-success); }
.analysis-swot-weaknesses .analysis-swot-header { color: var(--color-warning); }
.analysis-swot-list { margin: 0; padding-left: 18px; }
.analysis-swot-list li { font-size: 0.85rem; line-height: 1.6; color: var(--color-text); margin-bottom: 6px; }
.analysis-swot-list li::marker { color: var(--color-text-muted); }

.analysis-section { margin-bottom: 20px; }
.analysis-section-header { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 8px; }
.analysis-strategy { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; background: var(--color-surface); border-left: 3px solid var(--color-primary); }
.analysis-strategy p { font-size: 0.85rem; line-height: 1.6; color: var(--color-text); margin: 0; }

.analysis-effort { display: flex; align-items: center; gap: 8px; }
.analysis-effort-label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); }

[data-theme="dark"] .analysis-swot-col { background: var(--color-surface-2); }
[data-theme="dark"] .analysis-strategy { background: var(--color-surface-2); }

[data-theme="dark"] .badge-success, [data-theme="dark"] .badge-active, [data-theme="dark"] .badge-published { background: #052e16; color: #86efac; }
[data-theme="dark"] .badge-error, [data-theme="dark"] .badge-critical { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .badge-warning, [data-theme="dark"] .badge-high { background: #431407; color: #fcd34d; }
[data-theme="dark"] .badge-info, [data-theme="dark"] .badge-medium { background: #172554; color: #93c5fd; }
[data-theme="dark"] .badge-draft { background: #1e293b; color: #94a3b8; }
[data-theme="dark"] .badge-source { background: #243044; color: #94a3b8; }

/* ===== Forms ===== */
.form-group {
    margin-bottom: 16px;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 400 !important;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    accent-color: var(--color-primary);
}

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* ===== Filters form ===== */
.filters-form .filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* ===== Dashboard ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.widget-header svg { width: 18px; height: 18px; }

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

.widget-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.widget-link {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
}
.widget-link:hover { text-decoration: underline; }

/* ===== Quick actions ===== */
.quick-actions h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-text);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background var(--transition), border-color var(--transition);
}

.quick-action:hover {
    background: var(--color-surface-2);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.quick-action svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== Docs grid ===== */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.doc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.doc-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

.doc-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
}
.doc-card-icon svg { width: 20px; height: 20px; }

.doc-card-body {
    flex: 1;
    min-width: 0;
}
.doc-card-body h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.doc-card-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.doc-card-arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color var(--transition), transform var(--transition);
}
.doc-card-arrow svg { width: 16px; height: 16px; }
.doc-card:hover .doc-card-arrow { color: var(--color-primary); transform: translateX(2px); }

/* ===== Doc preview (rendered markdown) ===== */
.doc-preview {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text);
    overflow-wrap: break-word;
}
.doc-preview h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.doc-preview h2 { font-size: 1.25rem; font-weight: 600; margin: 24px 0 12px; }
.doc-preview h3 { font-size: 1.1rem; font-weight: 600; margin: 20px 0 8px; }
.doc-preview h4 { font-size: 1rem; font-weight: 600; margin: 16px 0 8px; }
.doc-preview p { margin: 0 0 12px; }
.doc-preview ul, .doc-preview ol { margin: 0 0 12px; padding-left: 24px; }
.doc-preview li { margin-bottom: 4px; }
.doc-preview a { color: var(--color-primary); text-decoration: none; }
.doc-preview a:hover { text-decoration: underline; }
.doc-preview code {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.doc-preview pre {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
}
.doc-preview pre code {
    padding: 0;
    border: none;
    background: none;
}
.doc-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 0.85rem;
}
.doc-preview th, .doc-preview td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
}
.doc-preview th { background: var(--color-surface-2); font-weight: 600; }
.doc-preview blockquote {
    margin: 0 0 12px;
    padding: 8px 16px;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc-preview hr { border: none; border-top: 1px solid var(--color-border); margin: 24px 0; }
.doc-preview-loading { color: var(--color-text-muted); font-size: 0.875rem; }

/* ===== Doc editor ===== */
.doc-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1024px) {
    .doc-editor-layout { grid-template-columns: 1fr; }
}

.doc-editor-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.doc-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.doc-editor-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-editor-filename { font-family: monospace; }

.doc-editor-textarea {
    flex: 1;
    min-height: 500px;
    padding: 16px;
    border: none;
    resize: vertical;
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
    tab-size: 2;
}
.doc-editor-textarea:focus { outline: none; }

.doc-editor-preview {
    flex: 1;
    min-height: 500px;
    padding: 16px;
    overflow-y: auto;
}

.doc-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== Entries grid ===== */
.entries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.entry-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entry-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.entry-card-header h3 { font-size: 0.9rem; font-weight: 600; }
.entry-card-header h3 a { color: var(--color-text); text-decoration: none; }
.entry-card-header h3 a:hover { color: var(--color-primary); }

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

.entry-excerpt {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    flex: 1;
}

.entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.entry-date { font-size: 0.75rem; color: var(--color-text-muted); }
.entry-actions { display: flex; gap: 4px; }

/* ===== Entry meta ===== */
.entry-meta, .entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.tag {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* ===== Logs ===== */
.log-row td { vertical-align: top; }
.log-message { max-width: 400px; word-break: break-word; }
.log-context { margin-top: 4px; }
.log-context summary { font-size: 0.75rem; color: var(--color-primary); cursor: pointer; }
.log-context pre { font-size: 0.7rem; margin-top: 4px; background: var(--color-surface-2); padding: 8px; border-radius: 4px; overflow-x: auto; }

/* ===== Login page ===== */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 24px;
}

.login-brand {
    text-align: center;
    margin-bottom: 32px;
    color: var(--color-text);
}

.brand-icon {
    width: 48px;
    height: 48px;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.login-brand h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-brand p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
}

.login-form .form-group label { color: var(--color-text-muted); }
.login-form input {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text);
}
.login-form input:focus { border-color: var(--color-primary); }

.login-form .forgot-link {
    color: var(--color-primary);
    font-size: 0.875rem;
    text-decoration: none;
}
.login-form .forgot-link:hover { text-decoration: underline; }

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.form-check label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.form-check input { width: auto; }

/* ===== Project meta ===== */
.project-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.project-meta a { color: var(--color-primary); font-size: 0.875rem; }
.project-description { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 12px; }
.project-stats { display: flex; gap: 16px; font-size: 0.75rem; color: var(--color-text-muted); }

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-muted);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    opacity: 0.4;
}

.empty-state p {
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* ===== Scripts — Log viewer ===== */
.log-viewer {
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8rem;
    max-height: 600px;
    overflow-y: auto;
    padding: 16px;
    line-height: 1.6;
}

.log-viewer pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
}

.log-viewer pre mark {
    background: #fbbf24;
    color: #0f172a;
    padding: 1px 2px;
    border-radius: 2px;
}

.log-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
    gap: 12px;
    flex-wrap: wrap;
}

.log-viewer-search {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: #0f172a;
}

.log-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #334155;
    border-radius: var(--radius-sm);
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.8rem;
    font-family: inherit;
}

.log-search:focus {
    outline: none;
    border-color: var(--color-primary);
}

.log-search::placeholder {
    color: #64748b;
}

/* ===== Scripts — Info grid ===== */
.script-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.script-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.script-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.script-info-item code {
    font-size: 0.8rem;
    word-break: break-all;
}

/* ===== Scripts — Execution status badges ===== */
.badge-timeout { background: #fef3c7; color: #92400e; }

[data-theme="dark"] .badge-timeout { background: #431407; color: #fcd34d; }
[data-theme="dark"] .badge-running { background: #172554; color: #93c5fd; }
[data-theme="dark"] .badge-archived, [data-theme="dark"] .badge-paused { background: #1e293b; color: #94a3b8; }

@media (max-width: 640px) {
    .script-info-grid { grid-template-columns: 1fr; }
    .log-viewer-header { flex-direction: column; align-items: flex-start; }
}

/* ===== Legal — Risk gauge ===== */
.risk-gauge { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.risk-gauge-bar { flex: 1; height: 12px; background: var(--color-surface-2); border-radius: 6px; overflow: hidden; }
.risk-gauge-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.risk-gauge-critical { background: var(--color-danger); }
.risk-gauge-high { background: var(--color-warning); }
.risk-gauge-medium { background: var(--color-info); }
.risk-gauge-low { background: #6366f1; }
.risk-gauge-info { background: var(--color-success); }
.risk-gauge-unknown { background: var(--color-text-muted); }
.risk-gauge-value { font-weight: 700; white-space: nowrap; }

/* ===== Legal — Risk distribution bars ===== */
.risk-distribution { display: flex; flex-direction: column; gap: 10px; }
.risk-bar-row { display: flex; align-items: center; gap: 12px; }
.risk-bar-label { width: 60px; font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-align: right; }
.risk-bar-track { flex: 1; height: 20px; background: var(--color-surface-2); border-radius: 4px; overflow: hidden; }
.risk-bar-fill { height: 100%; border-radius: 4px; min-width: 2px; }
.risk-bar-critical { background: var(--color-danger); }
.risk-bar-high { background: var(--color-warning); }
.risk-bar-medium { background: var(--color-info); }
.risk-bar-low { background: #6366f1; }
.risk-bar-info { background: var(--color-success); }
.risk-bar-count { width: 30px; font-size: 0.8rem; font-weight: 600; color: var(--color-text); }

/* ===== Legal — Executive Summary ===== */
.audit-summary { display: flex; gap: 16px; padding: 20px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.audit-summary-icon { flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }
.audit-summary-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; }
.audit-summary-text { font-size: 0.9rem; line-height: 1.7; color: var(--color-text); font-style: italic; }

/* ===== Legal — Severity Overview Bar ===== */
.severity-overview-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.severity-overview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.severity-overview-title { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.severity-bar-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--color-surface-2); gap: 2px; }
.severity-bar-segment { height: 100%; min-width: 8px; transition: width 0.4s ease; }
.severity-bar-segment:first-child { border-radius: 7px 0 0 7px; }
.severity-bar-segment:last-child { border-radius: 0 7px 7px 0; }
.severity-bar-segment:only-child { border-radius: 7px; }
.severity-bar-critical { background: var(--color-danger); }
.severity-bar-high { background: var(--color-warning); }
.severity-bar-medium { background: var(--color-info); }
.severity-bar-low { background: #6366f1; }
.severity-bar-info { background: var(--color-success); }
.severity-bar-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.severity-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--color-text-muted); }
.severity-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.severity-dot-critical { background: var(--color-danger); }
.severity-dot-high { background: var(--color-warning); }
.severity-dot-medium { background: var(--color-info); }
.severity-dot-low { background: #6366f1; }
.severity-dot-info { background: var(--color-success); }

/* ===== Legal — Severity Mini Badges ===== */
.severity-mini-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.severity-mini-badge { font-size: 0.7rem; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--color-surface-2); color: var(--color-text); white-space: nowrap; }

/* ===== Legal — Findings ===== */
.findings-group { margin-bottom: 24px; }
.findings-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.9rem; }
.finding-card { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.finding-card[open] { box-shadow: var(--shadow); }
.finding-critical { border-left: 4px solid var(--color-danger); }
.finding-high { border-left: 4px solid var(--color-warning); }
.finding-medium { border-left: 4px solid var(--color-info); }
.finding-low { border-left: 4px solid #6366f1; }
.finding-info { border-left: 4px solid var(--color-success); }
.finding-critical[open] { background: rgba(239, 68, 68, 0.05); }
.finding-high[open] { background: rgba(245, 158, 11, 0.05); }
.finding-medium[open] { background: rgba(6, 182, 212, 0.05); }
.finding-low[open] { background: rgba(99, 102, 241, 0.05); }
.finding-info[open] { background: rgba(34, 197, 94, 0.05); }
.finding-summary { padding: 14px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.875rem; list-style: none; }
.finding-summary::-webkit-details-marker { display: none; }
.finding-summary::after { content: '\25B6'; font-size: 0.65rem; color: var(--color-text-muted); transition: transform 0.2s; flex-shrink: 0; }
.finding-card[open] .finding-summary::after { transform: rotate(90deg); }
.finding-summary:hover { background: var(--color-surface-2); }
.finding-summary-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.finding-severity-icon { flex-shrink: 0; font-size: 0.85rem; }
.finding-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.finding-summary-badges { display: flex; gap: 6px; flex-shrink: 0; }
.finding-body { padding: 4px 16px 20px; }
.finding-section { margin-bottom: 16px; }
.finding-section:last-child { margin-bottom: 0; }
.finding-section-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 6px; }
.finding-clause { margin: 0; padding: 10px 14px; border-left: 3px solid var(--color-border); background: var(--color-surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.85rem; line-height: 1.6; color: var(--color-text); font-style: italic; }
.finding-analysis { font-size: 0.85rem; line-height: 1.7; color: var(--color-text); }
.finding-recommendation { display: flex; gap: 10px; padding: 12px 14px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: var(--radius-sm); font-size: 0.85rem; line-height: 1.6; color: var(--color-text); }
[data-theme="dark"] .finding-recommendation { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.15); }
.finding-recommendation-icon { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }

/* ===== Legal — Audit Meta Compact ===== */
.audit-meta-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.audit-meta-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; }
.audit-meta-item svg { flex-shrink: 0; color: var(--color-text-muted); margin-top: 2px; }
.audit-meta-item > div { display: flex; flex-direction: column; gap: 2px; }
.audit-meta-label { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

@media (max-width: 640px) {
    .audit-meta-compact { grid-template-columns: 1fr 1fr; gap: 12px; }
    .severity-mini-badges { gap: 4px; }
    .finding-summary { flex-wrap: wrap; }
    .finding-summary-badges { flex-wrap: wrap; }
}

/* ===== Legal — Finding decisions ===== */
.finding-decision { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.decision-toggle-group { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.decision-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 2px solid var(--color-border); border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all var(--transition); background: var(--color-surface); color: var(--color-text); user-select: none; }
.decision-btn input[type="radio"] { display: none; }
.decision-btn:hover { border-color: var(--color-text-muted); }
.decision-btn-accepted.active { border-color: #22c55e; background: rgba(34,197,94,0.1); color: #16a34a; }
.decision-btn-edited.active { border-color: #3b82f6; background: rgba(59,130,246,0.1); color: #2563eb; }
.decision-btn-rejected.active { border-color: #dc2626; background: rgba(220,38,38,0.1); color: #dc2626; }
[data-theme="dark"] .decision-btn-accepted.active { color: #4ade80; }
[data-theme="dark"] .decision-btn-edited.active { color: #60a5fa; }
[data-theme="dark"] .decision-btn-rejected.active { color: #f87171; }
.decision-note-wrapper { margin-bottom: 10px; transition: all 0.2s ease; }
.decision-note-hidden { display: none; }
.decision-note { width: 100%; padding: 8px 12px; font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); resize: vertical; font-family: inherit; }
.decision-note:focus { outline: none; border-color: var(--color-primary); }
.decision-form-hidden { display: none; }
.decision-status { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 14px; }
.decision-status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.decision-status-accepted { background: rgba(34,197,94,0.15); color: #16a34a; }
.decision-status-edited { background: rgba(59,130,246,0.15); color: #2563eb; }
.decision-status-rejected { background: rgba(220,38,38,0.15); color: #dc2626; }
[data-theme="dark"] .decision-status-accepted { color: #4ade80; }
[data-theme="dark"] .decision-status-edited { color: #60a5fa; }
[data-theme="dark"] .decision-status-rejected { color: #f87171; }
.decision-status-note { margin-top: 6px; font-size: 0.85rem; color: var(--color-text); background: var(--color-surface); padding: 6px 10px; border-radius: var(--radius); border-left: 3px solid var(--color-primary); }
.decision-status-meta { margin-top: 4px; font-size: 0.75rem; color: var(--color-text-muted); }
.decision-change-btn { margin-top: 8px; }

/* ===== Legal — Decision progress ===== */
.decision-progress { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.decision-progress-header { margin-bottom: 8px; }
.decision-progress-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.decision-progress-bar { height: 8px; background: var(--color-surface-2); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.decision-progress-fill { height: 100%; background: var(--color-primary); border-radius: 4px; transition: width 0.3s ease; }
.decision-progress-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; }
.decision-stat { font-weight: 500; }
.decision-stat-accepted { color: #16a34a; }
.decision-stat-edited { color: #2563eb; }
.decision-stat-rejected { color: #dc2626; }
.decision-stat-pending { color: var(--color-text-muted); }
[data-theme="dark"] .decision-stat-accepted { color: #4ade80; }
[data-theme="dark"] .decision-stat-edited { color: #60a5fa; }
[data-theme="dark"] .decision-stat-rejected { color: #f87171; }

/* ===== Legal — Export buttons ===== */
.export-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Legal — Decision badges in finding summary ===== */
.badge-decision-accepted { background: rgba(34,197,94,0.15); color: #16a34a; }
.badge-decision-edited { background: rgba(59,130,246,0.15); color: #2563eb; }
.badge-decision-rejected { background: rgba(220,38,38,0.15); color: #dc2626; }
[data-theme="dark"] .badge-decision-accepted { color: #4ade80; }
[data-theme="dark"] .badge-decision-edited { color: #60a5fa; }
[data-theme="dark"] .badge-decision-rejected { color: #f87171; }

/* ===== Legal — Contract meta ===== */
.contract-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.875rem; }
.contract-notes { margin-bottom: 12px; font-size: 0.875rem; }
.contract-notes strong { display: block; margin-bottom: 4px; }
.contract-text-preview { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; font-size: 0.8rem; line-height: 1.7; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.contract-preview h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; }

/* ===== Legal — Upload zone ===== */
.upload-zone { position: relative; }
.upload-zone input[type="file"] { padding: 20px; border: 2px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); cursor: pointer; transition: border-color var(--transition); }
.upload-zone input[type="file"]:hover { border-color: var(--color-primary); }
.upload-hint { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 6px; }

/* ===== Legal — Prompt editor ===== */
.prompt-editor { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace !important; font-size: 0.8rem !important; line-height: 1.6 !important; }
.prompt-placeholders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.prompt-placeholders code { font-size: 0.75rem; padding: 2px 6px; background: var(--color-primary); color: #fff; border-radius: 3px; }

/* ===== Utilities ===== */
.mt-4 { margin-top: 24px; }
.text-muted { color: var(--color-text-muted); }
code { font-family: monospace; background: var(--color-surface-2); padding: 2px 4px; border-radius: 3px; font-size: 0.85em; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .main-wrapper { margin-left: var(--sidebar-collapsed-width); }
    .sidebar { width: var(--sidebar-collapsed-width); }
    .sidebar:hover { width: var(--sidebar-width); }
}

@media (max-width: 640px) {
    .sidebar { width: var(--sidebar-collapsed-width); }
    .sidebar:hover { width: var(--sidebar-width); z-index: 1000; }
    .main-wrapper { margin-left: var(--sidebar-collapsed-width); }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .entries-grid { grid-template-columns: 1fr; }
    .main-content { padding: 16px; }
}

/* ===== PenTest Findings list ===== */
.findings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finding-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.finding-card[open] {
    border-color: var(--color-text-muted);
}

.finding-card.finding-critical { border-left: 3px solid var(--color-danger); }
.finding-card.finding-high { border-left: 3px solid #f97316; }
.finding-card.finding-medium { border-left: 3px solid var(--color-warning); }
.finding-card.finding-low { border-left: 3px solid var(--color-info); }
.finding-card.finding-info { border-left: 3px solid var(--color-text-muted); }

.finding-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.finding-summary::-webkit-details-marker { display: none; }
.finding-summary::marker { content: ''; }

.finding-title {
    flex: 1;
    font-weight: 500;
}

.finding-detail {
    padding: 0 14px 14px;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.finding-section {
    margin-top: 12px;
}

.finding-section strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.finding-section p {
    margin: 0;
    line-height: 1.5;
}

.finding-evidence {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin: 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

.finding-actions {
    margin-top: 12px;
    display: flex;
    gap: 6px;
}

/* ===== PenTest Scan log ===== */
.scan-log {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
}

.log-line {
    display: flex;
    gap: 10px;
}

.log-time {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.log-msg { color: var(--color-text); }
.log-warn { color: var(--color-warning); }
.log-ok { color: var(--color-success); }
.log-section { color: var(--color-primary); font-weight: 600; }

/* ===== Findings Filter Bar ===== */
.findings-filter-bar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.findings-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.findings-search-icon {
    position: absolute;
    left: 10px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.findings-search {
    width: 100%;
    padding: 8px 32px 8px 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color var(--transition);
}
.findings-search:focus {
    outline: none;
    border-color: var(--color-primary);
}
.findings-search::placeholder { color: var(--color-text-muted); }
.findings-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.findings-search-clear:hover { color: var(--color-text); }

.findings-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.findings-filter-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 2px;
}
.findings-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.findings-chip-group + .findings-chip-group {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--color-border);
}
.filter-chip {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    opacity: 0.5;
}
.filter-chip.active {
    opacity: 1;
    color: var(--color-text);
    border-color: var(--color-text-muted);
}
.filter-chip-critical.active { background: rgba(239, 68, 68, 0.15); border-color: var(--color-danger); color: var(--color-danger); }
.filter-chip-high.active { background: rgba(249, 115, 22, 0.15); border-color: #f97316; color: #f97316; }
.filter-chip-medium.active { background: rgba(245, 158, 11, 0.15); border-color: var(--color-warning); color: var(--color-warning); }
.filter-chip-low.active { background: rgba(6, 182, 212, 0.15); border-color: var(--color-info); color: var(--color-info); }
.filter-chip-info.active { background: rgba(34, 197, 94, 0.15); border-color: var(--color-success); color: var(--color-success); }
.filter-chip-accepted.active { background: rgba(34, 197, 94, 0.15); border-color: var(--color-success); color: var(--color-success); }
.filter-chip-rejected.active { background: rgba(239, 68, 68, 0.15); border-color: var(--color-danger); color: var(--color-danger); }
.filter-chip-pending.active { background: rgba(100, 116, 139, 0.15); border-color: var(--color-text-muted); color: var(--color-text-muted); }
.filter-chip-category.active { background: rgba(139, 92, 246, 0.12); border-color: #8b5cf6; color: #8b5cf6; }

.findings-filter-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.finding-hidden { display: none !important; }

/* ===== Confirm Modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    backdrop-filter: blur(2px);
}
.modal-overlay--active { opacity: 1; pointer-events: auto; }
.modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 440px;
    animation: modal-in 0.2s ease;
}
@keyframes modal-in {
    from { transform: scale(0.95) translateY(-10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color var(--transition);
}
.modal-close:hover { color: var(--color-text); }
.modal-body {
    padding: 20px;
}
.modal-body p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
}

/* ── API key display ── */
.api-key-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.api-key-display code {
    flex: 1;
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--color-text);
    user-select: all;
}
.api-key-display .btn svg {
    width: 16px;
    height: 16px;
}

/* ── Audit processing spinner ── */
.audit-processing-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: audit-spin 1s linear infinite;
}
@keyframes audit-spin {
    to { transform: rotate(360deg); }
}
.audit-processing-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.breadcrumbs a:hover {
    color: var(--color-primary);
}
.breadcrumbs .breadcrumb-sep {
    font-size: 0.65rem;
    opacity: 0.5;
    user-select: none;
}
.breadcrumbs .breadcrumb-current {
    color: var(--color-text);
    font-weight: 500;
}

/* Development module */
.dev-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.dev-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Multi-select dropdown */
.multi-select {
    position: relative;
    min-width: 180px;
}
.multi-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.multi-select-toggle:hover {
    border-color: var(--color-primary);
}
.multi-select.open .multi-select-toggle {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.multi-select-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform var(--transition);
}
.multi-select.open .multi-select-toggle svg {
    transform: rotate(180deg);
}
.multi-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    padding: 0.25rem;
}
.multi-select.open .multi-select-dropdown {
    display: block;
}
.multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-text);
    transition: background var(--transition);
    white-space: nowrap;
}
.multi-select-option:hover {
    background: var(--color-surface-2);
}
.multi-select-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.dev-actions {
    display: flex;
    gap: 0.5rem;
}
.dev-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}
.actions-cell {
    white-space: nowrap;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Status badges */
.badge-backlog { background: rgba(148, 163, 184, 0.15); color: var(--color-text-muted); }
.badge-accepted { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
.badge-todo { background: rgba(59, 130, 246, 0.15); color: var(--color-primary); }
.badge-in-progress { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.badge-in-review { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
[data-theme="dark"] .badge-in-review { color: #a78bfa; }
.badge-done { background: rgba(34, 197, 94, 0.25); color: var(--color-success); font-weight: 600; }
.badge-rejected { background: rgba(239, 68, 68, 0.15); color: var(--color-danger); }
.badge-deleted { background: var(--color-surface-2); color: var(--color-text-muted); }
.badge-blocked { background: rgba(239, 68, 68, 0.25); color: var(--color-danger); font-weight: 600; }

/* Type badges */
.badge-type-feature { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
.badge-type-bug { background: rgba(239, 68, 68, 0.15); color: var(--color-danger); }
.badge-type-task { background: rgba(59, 130, 246, 0.15); color: var(--color-primary); }
.badge-type-improvement { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.badge-type-epic { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
[data-theme="dark"] .badge-type-epic { color: #a78bfa; }

/* Priority badges */
.badge-priority-critical { background: rgba(239, 68, 68, 0.15); color: var(--color-danger); font-weight: 600; }
.badge-priority-high { background: rgba(249, 115, 22, 0.15); color: #f97316; }
[data-theme="dark"] .badge-priority-high { color: #fb923c; }
.badge-priority-medium { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.badge-priority-low { background: rgba(6, 182, 212, 0.15); color: var(--color-info); }

/* Modal form variant (wider) */
.modal-form { max-width: 540px; }
.modal-form .form-group { margin-bottom: 1rem; }
.modal-form label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
}
.modal-form input[type="text"],
.modal-form input[type="date"],
.modal-form textarea,
.modal-form select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
}
.modal-form textarea { resize: vertical; }
.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Large modal variant */
.modal-lg { max-width: 720px; }
.modal-lg .modal-body { max-height: calc(100vh - 200px); overflow-y: auto; padding: 24px; }
.modal-lg .modal-header { padding: 16px 24px; }
.modal-lg .modal-header h3 { font-size: 1.05rem; }
.modal-lg .modal-footer { padding: 14px 24px; }

/* Form row (2-column grid) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Form divider */
.form-divider { margin: 1.25rem 0; border: none; border-top: 1px solid var(--color-border); }

/* Label hint */
.label-hint { font-weight: 400; font-size: 0.75rem; color: var(--color-text-muted); margin-left: 0.35rem; }

/* Muted text helper */
.text-muted { color: var(--color-text-muted); font-weight: 400; }

/* Success button */
.btn-success {
    background: var(--color-success);
    color: #fff;
    border: none;
}
.btn-success:hover { opacity: 0.9; }
.btn-warning {
    background: var(--color-warning);
    color: #1e293b;
    border: none;
}
.btn-warning:hover { opacity: 0.9; }

/* Activity log */
.activity-log { padding: 0; }
.activity-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.activity-item:last-child { border-bottom: none; }
.activity-actor { font-weight: 600; white-space: nowrap; }
.activity-action { flex: 1; color: var(--color-text-muted); }
.activity-action strong { color: var(--color-text); font-weight: 500; }
.activity-action code { font-size: 0.75rem; padding: 0.125rem 0.375rem; background: var(--color-surface-2); border-radius: var(--radius-sm); }
.activity-date { white-space: nowrap; color: var(--color-text-muted); font-size: 0.75rem; }

/* Prose (markdown-rendered content) */
.prose { line-height: 1.7; color: var(--color-text); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.25em 0 0.5em; font-weight: 600; line-height: 1.3; }
.prose h1 { font-size: 1.4em; }
.prose h2 { font-size: 1.2em; }
.prose h3 { font-size: 1.05em; }
.prose p { margin: 0.6em 0; }
.prose ul, .prose ol { margin: 0.6em 0; padding-left: 1.5em; }
.prose li { margin: 0.25em 0; }
.prose li > ul, .prose li > ol { margin: 0.15em 0; }
.prose code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.88em; padding: 0.15em 0.35em; background: var(--color-bg); border-radius: var(--radius-sm); }
.prose pre { margin: 0.8em 0; padding: 0.8em 1em; background: var(--color-bg); border-radius: var(--radius); overflow-x: auto; }
.prose pre code { padding: 0; background: none; font-size: 0.85em; }
.prose blockquote { margin: 0.8em 0; padding: 0.4em 1em; border-left: 3px solid var(--color-primary); background: var(--color-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose strong { font-weight: 600; }
.prose hr { margin: 1em 0; border: none; border-top: 1px solid var(--color-border); }
.prose table { width: 100%; border-collapse: collapse; margin: 0.8em 0; }
.prose th, .prose td { padding: 0.4em 0.6em; border: 1px solid var(--color-border); text-align: left; }
.prose th { background: var(--color-bg); font-weight: 600; }

/* =====================================================
   DataTables — Solaria Design System Overrides
   ===================================================== */

/* Container */
.dt-container {
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--color-text);
    width: 100%;
    overflow-x: auto;
}

/* Top / bottom layout rows */
.dt-container .dt-layout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.dt-container .dt-layout-row:first-child {
    margin-bottom: 1rem;
    padding: 0 15px;
}
.dt-container .dt-layout-row:last-child {
    margin-top: 1rem;
    padding: 0.75rem 15px 0;
    border-top: 1px solid var(--color-border);
}

/* Length selector */
.dt-container .dt-length {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.dt-container .dt-length select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8125rem;
    margin: 0 0.25rem;
}

/* Search input */
.dt-container .dt-search {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.dt-container .dt-search input {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8125rem;
    outline: none;
    margin-left: 0.25rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.dt-container .dt-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Info text */
.dt-container .dt-info {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* Pagination */
.dt-container .dt-paging {
    display: flex;
    gap: 0.125rem;
    flex-wrap: wrap;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.dt-container .dt-paging .dt-paging-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    background: var(--color-surface-2);
    color: var(--color-text);
}
.dt-container .dt-paging .dt-paging-button.current {
    background: var(--color-surface-2);
    color: var(--color-text);
    font-weight: 600;
}
.dt-container .dt-paging .dt-paging-button.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
    color: var(--color-text-muted);
}

/* Table core overrides */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 0.875rem;
}
table.dataTable thead th,
table.dataTable thead td {
    padding: 10px 16px !important;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border) !important;
    background: var(--color-surface-2) !important;
    white-space: nowrap;
}
table.dataTable tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--color-border) !important;
    vertical-align: middle;
    background: transparent !important;
}
table.dataTable tbody tr:hover td {
    background: var(--color-surface-2) !important;
}
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Sorting arrows */
table.dataTable thead th.dt-orderable-asc span.dt-column-order,
table.dataTable thead th.dt-orderable-desc span.dt-column-order {
    color: var(--color-text-muted);
    opacity: 0.5;
}
table.dataTable thead th.dt-ordering-asc span.dt-column-order,
table.dataTable thead th.dt-ordering-desc span.dt-column-order {
    color: var(--color-primary) !important;
    opacity: 1;
}

/* Empty table message */
table.dataTable td.dt-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem 1rem !important;
    font-style: italic;
}

/* Table links */
table.dataTable a,
.table a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
table.dataTable a:hover,
.table a:hover {
    color: var(--color-primary);
}

/* Responsive extension */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--color-primary) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50%;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dtr-control::before {
    background-color: var(--color-danger) !important;
}

/* Responsive child row */
table.dataTable > tbody > tr.dt-hasChild + tr > td {
    padding: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
}
table.dataTable > tbody > tr.dt-hasChild + tr ul.dtr-details {
    display: block;
    padding: 0.5rem 1rem;
    list-style: none;
}
table.dataTable > tbody > tr.dt-hasChild + tr ul.dtr-details li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.8125rem;
}
table.dataTable > tbody > tr.dt-hasChild + tr ul.dtr-details li:last-child {
    border-bottom: none;
}
table.dataTable > tbody > tr.dt-hasChild + tr .dtr-title {
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 80px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
table.dataTable > tbody > tr.dt-hasChild + tr .dtr-data {
    color: var(--color-text);
}

/* Remove DataTables default stripe/hover that may conflict */
table.dataTable.stripe > tbody > tr.odd > * { box-shadow: none !important; }
table.dataTable.hover > tbody > tr:hover > * { box-shadow: none !important; }

/* Actions cell in DataTables */
table.dataTable .actions-cell,
table.dataTable td:last-child:has(.btn-icon) {
    white-space: nowrap;
}

/* Icon-only action buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.btn-icon + .btn-icon {
    margin-left: 4px;
}
.btn-icon svg {
    width: 15px;
    height: 15px;
}
.btn-icon:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}
.btn-icon.btn-icon-success:hover { color: var(--color-success); border-color: var(--color-success); }
.btn-icon.btn-icon-danger:hover { color: var(--color-danger); border-color: var(--color-danger); }
.btn-icon.btn-icon-warning:hover { color: var(--color-warning); border-color: var(--color-warning); }
.btn-icon.btn-icon-secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Tooltip for icon buttons */
.btn-icon[title] {
    position: relative;
}

/* Relative date styling */
.date-relative {
    cursor: default;
    border-bottom: 1px dotted var(--color-text-muted);
}

/* Responsive: mobile adjustments */
@media (max-width: 640px) {
    .dt-container .dt-layout-row {
        flex-direction: column;
        align-items: stretch;
    }
    .dt-container .dt-search input {
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
    }
    .dt-container .dt-paging {
        justify-content: center;
    }
    .dt-container .dt-info {
        text-align: center;
    }
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 8px 10px !important;
        font-size: 0.8125rem;
    }
    .dev-header {
        flex-direction: column;
        align-items: stretch;
    }
    .multi-select {
        min-width: 0;
        flex: 1 1 0;
    }
    .multi-select-dropdown {
        min-width: 200px;
    }
    .page-actions {
        flex-wrap: wrap;
    }
    .page-actions .btn {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ═══ Audit Comparison ═══ */
.compare-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-header-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.compare-header-card.compare-header-a { border-left: 3px solid var(--color-primary); }
.compare-header-card.compare-header-b { border-left: 3px solid var(--color-info); }
.compare-header-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; }
.compare-header-model { margin-bottom: 4px; }
.compare-header-meta { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 8px; }

.compare-summary-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.compare-summary-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; text-align: center; }
.compare-summary-count { display: block; font-size: 1.5rem; font-weight: 700; }
.compare-summary-label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; }
.compare-summary-consensus { border-top: 3px solid var(--color-success); }
.compare-summary-consensus .compare-summary-count { color: var(--color-success); }
.compare-summary-conflict { border-top: 3px solid var(--color-warning); }
.compare-summary-conflict .compare-summary-count { color: var(--color-warning); }
.compare-summary-exclusive-a { border-top: 3px solid var(--color-primary); }
.compare-summary-exclusive-a .compare-summary-count { color: var(--color-primary); }
.compare-summary-exclusive-b { border-top: 3px solid var(--color-info); }
.compare-summary-exclusive-b .compare-summary-count { color: var(--color-info); }

.compare-finding { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: var(--color-surface); }
.compare-finding-consensus { border-left: 3px solid var(--color-success); }
.compare-finding-conflict { border-left: 3px solid var(--color-warning); }
.compare-finding-exclusive-a { border-left: 3px solid var(--color-primary); }
.compare-finding-exclusive-b { border-left: 3px solid var(--color-info); }
.compare-finding-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.compare-finding-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-finding-col { padding: 12px; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.compare-col-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; }
.compare-col-a { border-top: 2px solid var(--color-primary); }
.compare-col-b { border-top: 2px solid var(--color-info); }
.compare-finding-clause { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 6px; }
.compare-finding p { font-size: 0.9rem; margin: 0; line-height: 1.5; }

.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }

@media (max-width: 768px) {
    .compare-select-grid,
    .compare-header-grid,
    .compare-finding-columns { grid-template-columns: 1fr; }
    .compare-summary-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Módulo Insurance (Seguros Chile)
   ============================================================ */

/* Dashboard */
.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.widget--warning { border-color: var(--color-warning); }
.widget--warning .widget-value { color: var(--color-warning); }

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Matrix filters — toolbar */
.mx-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mx-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.mx-toolbar-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mx-toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
}

.mx-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mx-toolbar-label svg {
    opacity: 0.5;
}

.mx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mx-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.mx-chip input {
    display: none;
}

.mx-chip-text {
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    transition: all var(--transition);
}

.mx-chip input:checked + .mx-chip-text {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

.mx-chip:hover .mx-chip-text {
    border-color: var(--color-primary);
}

/* Legend */
.mx-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 4px;
}

.mx-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.mx-legend-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.mx-legend-dot--yes {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    color: var(--color-success);
}

.mx-legend-dot--yes::after {
    content: '✓';
    font-size: 0.7rem;
}

.mx-legend-dot--no {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.mx-legend-dot--no::after {
    content: '—';
}

.mx-legend-dot--multi {
    background: var(--color-success);
    color: #fff;
}

/* Matrix table */
.mx-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.mx-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 800px;
    font-size: 11px;
}

.mx-table th,
.mx-table td {
    border: 1px solid var(--color-border);
    padding: 4px 5px;
    text-align: center;
    vertical-align: middle;
}

/* Category column header */
.mx-th-cat {
    text-align: left;
    width: 130px;
    min-width: 130px;
    background: var(--color-surface);
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    left: 0;
    z-index: 2;
}

.mx-th-cat svg {
    opacity: 0.4;
    vertical-align: -3px;
    margin-right: 4px;
}

/* Type header row */
.mx-th-type {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 10.5px;
    padding: 5px 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Institution header — debe ser ≤ ancho de columna de categorías */
.mx-th-inst {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    color: var(--color-text);
    font-weight: 500;
    font-size: 9.5px;
    line-height: 1.15;
    padding: 4px 3px;
    width: 75px;
    max-width: 75px;
    min-width: 75px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mx-inst-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* Group separator row */
.mx-tr-group td {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
    color: #fff;
    font-weight: 600;
    font-size: 0.85em;
    padding: 8px 12px;
    text-align: left;
}

.mx-tr-group td svg {
    vertical-align: -2px;
    margin-right: 6px;
    opacity: 0.7;
}

/* Category cells — alineados con el ancho de la columna de header */
.mx-td-cat {
    text-align: left;
    width: 130px;
    min-width: 130px;
    font-size: 11.5px;
    font-weight: 500;
    background: var(--color-surface);
    position: sticky;
    left: 0;
    z-index: 1;
    line-height: 1.2;
}

/* Yes/No cells */
.mx-cell-yes {
    background: color-mix(in srgb, var(--color-success) 6%, transparent);
    cursor: pointer;
    transition: background var(--transition);
}

.mx-cell-yes:hover {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
}

.mx-cell-no {
    background: transparent;
    color: var(--color-text-muted);
}

.mx-cell-link,
.mx-cell-multi {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-success);
}

.mx-cell-link:hover,
.mx-cell-multi:hover {
    color: color-mix(in srgb, var(--color-success) 80%, #000);
}

.mx-cell-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    color: #fff;
    border-radius: 8px;
    font-size: 0.65em;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 1px;
}

.mx-cell-empty {
    color: var(--color-text-muted);
    opacity: 0.4;
}

/* Expansion: clickable category row */
.mx-td-cat {
    cursor: pointer;
    user-select: none;
}
.mx-td-cat-toggle {
    display: inline-block;
    width: 1em;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.mx-tr-cat--open .mx-td-cat-toggle {
    transform: rotate(90deg);
    color: var(--color-primary);
}

/* Expansion row content
 * La fila <tr.mx-tr-expand> tiene un único <td> con colspan que cubre toda la matriz.
 * Para que el contenido (tabla comparativa) NO afecte los anchos de la matriz, el td
 * usa overflow: hidden y un wrapper interno con scroll-x propio. Combinado con
 * `table-layout: fixed` en .mx-table, las columnas de la matriz quedan fijas.
 */
.mx-tr-expand > td {
    padding: 0;
    background: var(--color-surface-alt, #f8f9fb);
    border-top: none;
    overflow: hidden;
    max-width: 0; /* truco para que el contenido no expanda al colspan-td */
}
.mx-expand {
    padding: 12px 16px;
}
.mx-expand-loading,
.mx-expand-error,
.mx-expand-empty {
    padding: 12px 0;
    color: var(--color-text-muted);
    font-style: italic;
}
.mx-expand-error { color: var(--color-error, #c0392b); font-style: normal; }

.mx-expand-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    /* fuerza un nuevo contexto de scroll que aísla los sticky de adentro */
    position: relative;
}
.mx-expand-table {
    border-collapse: separate; /* separate para que sticky funcione consistentemente */
    border-spacing: 0;
    font-size: 9px;
    line-height: 1.25;
    width: max-content;
    min-width: 100%;
}
.mx-expand-table th,
.mx-expand-table td {
    padding: 3px 4px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    text-align: left;
}
.mx-expand-table thead th {
    border-top: 1px solid var(--color-border);
}
.mx-expand-table th:first-child,
.mx-expand-table td:first-child {
    border-left: 1px solid var(--color-border);
}
.mx-expand-table--compare thead .mx-expand-th-inst {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    text-align: center;
    border-bottom: 2px solid var(--color-primary);
    min-width: 70px;
    font-size: 9.5px;
}
.mx-expand-table--compare thead .mx-expand-th-prod {
    background: var(--color-surface-alt, #f3f4f6);
    font-weight: 500;
    width: 75px;
    min-width: 75px;
    max-width: 95px;
    font-size: 9px;
}
.mx-expand-table--compare tbody td {
    width: 75px;
    min-width: 75px;
    max-width: 95px;
}
/* Primera columna sticky en la tabla de expansión: corner del header + labels del body */
.mx-expand-corner,
.mx-expand-table tbody .mx-expand-label {
    position: sticky;
    left: 0;
    background: var(--color-surface-alt, #f3f4f6);
    z-index: 2;
    box-shadow: 1px 0 0 0 var(--color-border); /* línea de borde derecha al hacer scroll */
}
.mx-expand-corner {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}
.mx-expand-inst-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 9.5px;
}
.mx-expand-inst-type {
    margin-top: 1px;
    font-size: 8px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: normal;
}
.mx-expand-table tbody .mx-expand-label {
    font-weight: 600;
    color: var(--color-text);
    width: 95px;
    min-width: 95px;
    max-width: 95px;
    text-transform: uppercase;
    font-size: 8.5px;
    letter-spacing: 0.03em;
}
.mx-expand-list { padding-left: 12px; margin: 0; }
.mx-expand-list li { margin-bottom: 1px; }
.mx-expand-prod-name { font-size: 9.5px; line-height: 1.2; }
.mx-expand-prod-badge { font-size: 8.5px; padding: 1px 3px; }
.mx-expand-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--color-surface-alt, #f3f4f6) 35%, var(--color-surface)); }
.mx-expand-prod-name a {
    color: var(--color-primary);
    text-decoration: none;
}
.mx-expand-prod-name a:hover { text-decoration: underline; }
.mx-expand-prod-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: normal;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 3px;
}
.mx-expand-list {
    margin: 0;
    padding-left: 18px;
}
.mx-expand-list li { margin-bottom: 2px; }
.mx-expand-empty-cell { color: var(--color-text-muted); opacity: 0.6; }

/* Dark theme */
[data-theme="dark"] .mx-th-inst {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

[data-theme="dark"] .mx-table th,
[data-theme="dark"] .mx-table td {
    border-color: var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
    .mx-table-wrap::before {
        content: '← desliza para ver más →';
        display: block;
        font-size: 0.72em;
        color: var(--color-text-muted);
        text-align: center;
        padding: 6px 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }

    .mx-table {
        font-size: 0.76em;
    }

    .mx-table th,
    .mx-table td {
        padding: 4px 5px;
    }

    .mx-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .mx-toolbar-divider {
        width: 100%;
        height: 1px;
    }

    .mx-legend {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* Review page */
.review-page {
    max-width: 1100px;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.review-stats {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.review-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 120px;
    text-align: center;
}

.review-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.review-stat-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.review-stat--danger .review-stat-number { color: var(--color-danger); }
.review-stat--danger { border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.review-stat--warning .review-stat-number { color: var(--color-warning); }
.review-stat--warning { border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.review-stat--success .review-stat-number { color: var(--color-primary); }
.review-stat--success { border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }

/* Tabs */
.review-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
}

.review-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

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

.review-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.review-tab svg {
    opacity: 0.6;
}

.review-tab--active svg {
    opacity: 1;
}

.review-tab-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    color: #fff;
}

.review-tab-count--danger { background: var(--color-danger); }
.review-tab-count--warning { background: var(--color-warning); color: #1a1a1a; }

/* Panels */
.review-panel {
    display: none;
}

.review-panel--active {
    display: block;
    animation: reviewFadeIn 0.2s ease;
}

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

/* Card grid */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 1rem;
}

/* Individual review card */
.review-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
    border-left: 3px solid var(--color-danger);
}

.review-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    box-shadow: var(--shadow);
}

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

.review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.review-card-institution {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.review-card-institution svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.review-card-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.review-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.review-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.review-card-title a {
    color: var(--color-text);
    text-decoration: none;
}

.review-card-title a:hover {
    color: var(--color-primary);
}

.review-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    opacity: 0.6;
    transition: opacity var(--transition), color var(--transition);
}

.review-link:hover {
    opacity: 1;
    color: var(--color-primary);
}

.review-card-justification {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 6px 10px;
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    border-radius: var(--radius-sm);
    font-style: italic;
    line-height: 1.4;
}

.review-card-justification svg {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.5;
}

.review-card-coverage {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Form inside card */
.review-card-form {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.review-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.review-form-select-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 3px;
}

.review-form-select-group select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color var(--transition);
}

.review-form-select-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.review-form-bottom {
    display: flex;
    gap: 8px;
    align-items: center;
}

.review-form-bottom input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color var(--transition);
}

.review-form-bottom input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.review-form-bottom .btn {
    flex-shrink: 0;
}

/* Empty state */
.review-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--color-text-muted);
}

.review-empty svg {
    opacity: 0.3;
    margin-bottom: 16px;
}

.review-empty p {
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 640px) {
    .review-stats {
        flex-direction: column;
        width: 100%;
    }

    .review-stat {
        flex-direction: row;
        gap: 8px;
        min-width: auto;
        padding: 8px 12px;
    }

    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-form-fields {
        grid-template-columns: 1fr;
    }

    .review-form-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .review-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* Product detail page */
.pd {
    max-width: 1100px;
}

/* Hero card */
.pd-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.pd-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pd-hero-badges {
    display: flex;
    gap: 6px;
}

.pd-hero-body {
    margin-bottom: 20px;
}

.pd-hero-institution {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.pd-hero-institution svg {
    opacity: 0.5;
}

.pd-hero-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
    color: var(--color-text);
}

.pd-hero-url {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
    word-break: break-all;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.pd-hero-url:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Meta grid */
.pd-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.pd-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pd-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.pd-meta-value {
    font-size: 0.875rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Two-column layout */
.pd-columns {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

.pd-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.pd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Coverage text (origen del scrapeo, colapsable via <details>) */
.pd-coverage-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.pd-coverage-card[open] {
    box-shadow: var(--shadow-sm);
}

.pd-coverage-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pd-coverage-summary::-webkit-details-marker {
    display: none;
}

.pd-coverage-summary-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.pd-coverage-summary h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.pd-coverage {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.pd-coverage::-webkit-scrollbar {
    width: 6px;
}

.pd-coverage::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* Ficha de categoría (.cf-*): hero + análisis IA + comparativa */
.cf {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

.cf-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.cf-hero-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cf-hero-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

/* Análisis IA */
.cf-analysis .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cf-analysis-resumen {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
}

.cf-destacados {
    margin-bottom: 1.5rem;
}

.cf-destacados-title {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.cf-destacados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.cf-destacado {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.cf-destacado-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.4rem;
}

.cf-destacado-inst {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.cf-destacado-prod {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
}

.cf-destacado-razon {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text);
}

.cf-secciones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px dashed var(--color-border);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
}

.cf-seccion-title {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.cf-seccion-content {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
}

.cf-analysis-footnote {
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--color-border);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cf-analysis-time {
    width: 100%;
}

.cf-analysis--pending .card-body {
    color: var(--color-text-muted);
}

.cf-analysis-pending {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.cf-analysis-pending code {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* Comparativa de la categoría: reusa estilos .mx-expand-* del expand de matriz */
.cf-compare-card .card-body {
    padding: 0;
}

.cf-compare-scroll {
    border: 0;
}

.cf-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .cf-hero {
        padding: 1rem;
    }
    .cf-hero-title {
        font-size: 1.2rem;
    }
}

/* Narrativa del producto (descripción + asegurados + vigencia + FAQ libre) */
.pd-narrative .card-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.pd-narrative-intro {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
}

.pd-narrative-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.pd-narrative-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pd-narrative-meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.pd-narrative-meta-value {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text);
}

.pd-narrative-bullets {
    margin: 0;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text);
}

.pd-narrative-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pd-narrative-faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition: var(--transition);
}

.pd-narrative-faq-item[open] {
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.pd-narrative-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    user-select: none;
}

.pd-narrative-faq-item summary::-webkit-details-marker {
    display: none;
}

.pd-narrative-faq-item summary::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--color-text-muted);
    transition: var(--transition);
}

.pd-narrative-faq-item[open] summary::after {
    content: '−';
    color: var(--color-primary);
}

.pd-narrative-faq-content {
    padding: 0 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    padding-top: 0.85rem;
}

/* Ficha estructurada (enriched_data) */
.pd-ficha .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pd-ficha-highlight {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-left: 3px solid var(--color-primary);
}

.pd-ficha-highlight-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pd-ficha-highlight-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

.pd-ficha-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pd-ficha-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
}

.pd-ficha-row:first-child {
    border-top: none;
    padding-top: 0;
}

.pd-ficha-row dt {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0;
    padding-top: 0.15rem;
}

.pd-ficha-row dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
}

.pd-ficha-row--accent dd {
    color: var(--color-success, #16a34a);
    font-weight: 500;
}

.pd-ficha-bullets {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pd-ficha-bullets li {
    line-height: 1.45;
}

.pd-ficha-footnote {
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--color-border);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pd-ficha-footnote svg {
    margin-top: 2px;
    flex-shrink: 0;
}

.pd-ficha-footnote a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pd-ficha-time {
    width: 100%;
    color: var(--color-text-muted);
    opacity: 0.85;
}

.pd-ficha--empty .card-body {
    color: var(--color-text-muted);
}

.pd-ficha-pending {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.pd-ficha-pending p {
    margin: 0 0 0.5rem;
}

.pd-ficha-pending a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .pd-ficha-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .pd-ficha-row dt {
        font-size: 0.72rem;
    }
}

/* Justification */
.pd-justification {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
}

/* Correction card */
.pd-correction-card {
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

/* Timeline */
.pd-timeline {
    padding: 16px 20px;
}

.pd-timeline-item {
    position: relative;
    padding-left: 24px;
    padding-bottom: 20px;
}

.pd-timeline-item:last-child {
    padding-bottom: 0;
}

.pd-timeline-item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}

.pd-timeline-item:last-child::before {
    display: none;
}

.pd-timeline-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.pd-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.pd-timeline-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.pd-timeline-text {
    font-size: 0.82rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

.pd-timeline-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.pd-timeline-author svg {
    opacity: 0.5;
}

/* Card header icons */
.pd .card-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd .card-header h3 svg {
    opacity: 0.5;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .pd-columns {
        grid-template-columns: 1fr;
    }

    .pd-sidebar {
        order: -1;
    }
}

@media (max-width: 640px) {
    .pd-hero {
        padding: 16px;
    }

    .pd-hero-title {
        font-size: 1.1rem;
    }

    .pd-meta-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Insurance Dashboard */
.ins-dash {
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* KPI row */
.ins-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.ins-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ins-kpi:hover {
    box-shadow: var(--shadow);
}

.ins-kpi--alert {
    border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger) 4%, var(--color-surface));
}

.ins-kpi--warn {
    border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 4%, var(--color-surface));
}

.ins-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.ins-kpi-icon--primary { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.ins-kpi-icon--info { background: color-mix(in srgb, var(--color-info) 12%, transparent); color: var(--color-info); }
.ins-kpi-icon--success { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.ins-kpi-icon--danger { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.ins-kpi-icon--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }

.ins-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ins-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.ins-kpi--alert .ins-kpi-value { color: var(--color-danger); }
.ins-kpi--warn .ins-kpi-value { color: var(--color-warning); }

.ins-kpi-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 3px;
}

/* Progress card */
.ins-progress-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
}

.ins-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ins-progress-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.ins-progress-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
}

.ins-progress-bar {
    height: 8px;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
    border-radius: 4px;
    overflow: hidden;
}

.ins-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.ins-progress-fill--complete {
    background: var(--color-success);
}

.ins-progress-detail {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}

.ins-progress-detail a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

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

/* Nav cards */
.ins-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ins-nav-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.ins-nav-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.ins-nav-card--attention {
    border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

.ins-nav-card--attention:hover {
    border-color: var(--color-warning);
}

.ins-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ins-nav-icon--primary { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.ins-nav-icon--info { background: color-mix(in srgb, var(--color-info) 10%, transparent); color: var(--color-info); }
.ins-nav-icon--warning { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); }
.ins-nav-icon--success { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }

.ins-nav-body {
    flex: 1;
    min-width: 0;
}

.ins-nav-body h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 2px 0;
}

.ins-nav-body p {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.3;
}

.ins-nav-arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
}

.ins-nav-card:hover .ins-nav-arrow {
    opacity: 0.6;
    transform: translateX(2px);
}

/* Admin bar */
.ins-admin-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 12px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-text-muted);
}

.ins-admin-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ins-admin-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Split-button: action + provider selector visually attached */
.ins-op {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--transition);
}

.ins-op:hover {
    border-color: var(--color-text-muted);
}

.ins-op .ins-op-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ins-op .ins-op-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.ins-op-provider {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 6px;
    margin: 0;
    border-left: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-text-muted) 6%, transparent);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition);
}

.ins-op-provider:hover {
    background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
}

.ins-op-provider svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.ins-op-provider select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0 14px 0 0;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px 10px;
}

.ins-op-provider select:focus {
    outline: none;
}

/* Recent products list */
.ins-recent-list {
    display: flex;
    flex-direction: column;
}

.ins-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition);
}

.ins-recent-item:last-child {
    border-bottom: none;
}

.ins-recent-item:hover {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.ins-recent-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ins-recent-institution {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ins-recent-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ins-recent-meta {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ins-dash .card-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ins-dash .card-header h3 svg {
    opacity: 0.5;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .ins-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ins-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .ins-nav-grid {
        grid-template-columns: 1fr;
    }

    .ins-admin-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

    .ins-kpi {
        padding: 12px 14px;
    }
}

/* ===== MCP Tools Catalog ===== */
.mcp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.mcp-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.mcp-search {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.mcp-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.mcp-search input {
    width: 100%;
    padding: 8px 32px 8px 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--transition);
}

.mcp-search input:focus {
    border-color: var(--color-primary);
}

.mcp-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.mcp-search-clear:hover {
    color: var(--color-text);
    background: var(--color-surface-2);
}

.mcp-empty-search {
    text-align: center;
    padding: 48px 20px;
    color: var(--color-text-muted);
}

.mcp-empty-search svg {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    opacity: 0.4;
}

.mcp-empty-search p {
    margin: 0;
    font-size: 0.875rem;
}

.mcp-group {
    margin-bottom: 24px;
}

.mcp-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.mcp-group-header svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.mcp-tool {
    border-bottom: 1px solid var(--color-border);
}

.mcp-tool:last-child {
    border-bottom: none;
}

.mcp-tool-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mcp-tool-summary::-webkit-details-marker {
    display: none;
}

.mcp-tool-summary code {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
}

.mcp-tool-hint {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mcp-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-muted);
    transition: transform var(--transition);
}

.mcp-tool[open] .mcp-chevron {
    transform: rotate(90deg);
}

.mcp-tool-detail {
    padding: 4px 4px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcp-param {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.mcp-param code {
    font-weight: 500;
    font-size: 0.8rem;
}

.mcp-param .badge {
    font-size: 0.65rem;
    padding: 1px 5px;
}

.mcp-param-desc {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

@media (max-width: 640px) {
    .mcp-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mcp-search {
        max-width: none;
    }

    .mcp-toolbar-meta {
        justify-content: space-between;
    }

    .mcp-tool-hint {
        display: none;
    }
}