:root {
    /* =========================================================================
       ELECTRIC INDUSTRIAL DESIGN SYSTEM
       Precision-engineered workspace aesthetic (Vercel/Linear inspired)
       ========================================================================= */

    /* Canvas & Background */
    --ds-background-100: #ffffff;
    --ds-background-200: #fafafa;  /* Off-white canvas */
    --ds-gray-alpha-200: rgba(0, 0, 0, 0.04); /* Subtle hover state */

    /* Neutral Scale - Deep charcoal to pure white */
    --ds-gray-50: #fafafa;
    --ds-gray-100: #f5f5f5;   /* Subtle backgrounds */
    --ds-gray-150: #eaeaea;   /* Ultra-fine borders (Electric Industrial) */
    --ds-gray-200: #e5e5e5;   /* Standard borders */
    --ds-gray-300: #d4d4d4;   /* Hover borders */
    --ds-gray-400: #a3a3a3;
    --ds-gray-500: #737373;
    --ds-gray-600: #525252;
    --ds-gray-700: #404040;
    --ds-gray-800: #262626;
    --ds-gray-900: #171717;   /* Deep charcoal - Primary Text */
    --ds-gray-1000: #0a0a0a;  /* Pure black */

    /* =========================================================================
       BRAND ACCENT: Inter Blue / Digital Violet
       Used sparingly for primary actions & active states
       ========================================================================= */
    --ds-blue-50: #eff6ff;
    --ds-blue-100: #dbeafe;
    --ds-blue-200: #bfdbfe;
    --ds-blue-400: #60a5fa;
    --ds-blue-500: #3b82f6;
    --ds-blue-600: #2563eb;   /* PRIMARY - Inter Blue */
    --ds-blue-700: #1d4ed8;
    --ds-blue-800: #1e40af;

    /* Legacy indigo aliases (for compatibility) */
    --ds-indigo-50: var(--ds-blue-50);
    --ds-indigo-100: var(--ds-blue-100);
    --ds-indigo-200: var(--ds-blue-200);
    --ds-indigo-400: var(--ds-blue-400);
    --ds-indigo-500: var(--ds-blue-500);
    --ds-indigo-600: var(--ds-blue-600);
    --ds-indigo-700: var(--ds-blue-700);
    --ds-indigo-800: var(--ds-blue-800);

    /* Semantic: Coral Red - softer, warmer error state */
    --ds-red-50: #fff5f5;
    --ds-red-100: #ffe3e3;
    --ds-red-200: #ffc9c9;
    --ds-red-400: #ff8787;
    --ds-red-500: #ff6b6b;
    --ds-red-600: #fa5252;
    --ds-red-700: #f03e3e;      /* Primary error */
    --ds-red-800: #e03131;

    /* Semantic: Amber/Warning - warm, attention-grabbing */
    --ds-amber-50: #fffbeb;
    --ds-amber-100: #fef3c7;
    --ds-amber-200: #fde68a;
    --ds-amber-300: #fcd34d;
    --ds-amber-400: #fbbf24;
    --ds-amber-500: #f59e0b;
    --ds-amber-600: #d97706;
    --ds-amber-700: #b45309;

    /* Semantic: Emerald - fresh, modern success */
    --ds-green-50: #ecfdf5;
    --ds-green-100: #d1fae5;
    --ds-green-200: #a7f3d0;
    --ds-green-400: #34d399;
    --ds-green-500: #10b981;
    --ds-green-600: #059669;
    --ds-green-700: #047857;    /* Primary success */
    --ds-green-800: #065f46;

    /* Orange - for major issues */
    --ds-orange-50: #fff7ed;
    --ds-orange-100: #ffedd5;
    --ds-orange-500: #f97316;
    --ds-orange-600: #ea580c;
    --ds-orange-700: #c2410c;

    /* Teal - for Cohort B identity */
    --ds-teal-50: #f0fdfa;
    --ds-teal-100: #ccfbf1;
    --ds-teal-200: #99f6e4;
    --ds-teal-400: #2dd4bf;
    --ds-teal-500: #14b8a6;
    --ds-teal-600: #0d9488;
    --ds-teal-700: #0f766e;
    --ds-teal-800: #115e59;

    /* Unknown/Neutral - warmer grey */
    --ds-neutral-100: #f5f5f4;
    --ds-neutral-500: #78716c;
    --ds-neutral-600: #57534e;

    /* =========================================================================
       SEMANTIC TOKENS
       ========================================================================= */

    /* Surface Colors */
    --bg-root: var(--ds-background-100);
    --bg-panel: var(--ds-background-200);
    --border: var(--ds-gray-150);           /* Ultra-fine borders */
    --border-strong: var(--ds-gray-200);    /* Emphasized borders */

    /* Text Colors - High contrast for readability */
    --text-primary: #171717;    /* Deep charcoal */
    --text-secondary: #525252;  /* Darker secondary for better contrast */
    --text-tertiary: #737373;   /* Muted, for hints/placeholders */
    --text-on-color: #FFFFFF;   /* White text on colored backgrounds */

    --focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-blue-600);

    /* Border Radius - Squircle Scale */
    --radius-xs: 4px;         /* Small pills, tags */
    --radius-sm: 6px;         /* Buttons, inputs */
    --radius-md: 8px;         /* Cards, dropdowns */
    --radius-lg: 12px;        /* Modals, panels */
    --radius-xl: 16px;        /* Large containers */
    --radius-full: 9999px;    /* Fully rounded */

    /* =========================================================================
       TYPOGRAPHY - Electric Industrial
       Geist font with tight tracking for technical precision
       ========================================================================= */

    /* Font Families */
    --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

    /* Letter Spacing */
    --tracking-tight: -0.02em;   /* Headings - tight, technical feel */
    --tracking-normal: 0;        /* Body text */
    --tracking-wide: 0.01em;     /* Uppercase labels */

    /* Type Scale - 13px base for high-density views */
    --text-display: 1.5rem;     /* 24px - Page titles */
    --text-heading: 1rem;       /* 16px - Section headings */
    --text-body: 0.8125rem;     /* 13px - DEFAULT for high-density (tables, lists) */
    --text-body-lg: 0.875rem;   /* 14px - Long-form text (transcripts, descriptions) */
    --text-small: 0.75rem;      /* 12px - Secondary info, timestamps */
    --text-caption: 0.75rem;    /* 12px - Timestamps, hints */
    --text-micro: 0.6875rem;    /* 11px - Badges, tags (minimum size) */

    /* Layered Shadows - Ambient + Direct Light for floating effect */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm:
        0 1px 2px rgba(0,0,0,0.03),
        0 2px 4px rgba(0,0,0,0.03),
        0 0 0 1px rgba(0,0,0,0.02);
    --shadow-md:
        0 2px 4px rgba(0,0,0,0.02),
        0 4px 8px rgba(0,0,0,0.04),
        0 8px 16px rgba(0,0,0,0.04),
        0 0 0 1px rgba(0,0,0,0.02);
    --shadow-lg:
        0 4px 8px rgba(0,0,0,0.03),
        0 8px 16px rgba(0,0,0,0.05),
        0 16px 32px rgba(0,0,0,0.05),
        0 32px 64px rgba(0,0,0,0.03);
    --shadow-xl:
        0 8px 16px rgba(0,0,0,0.04),
        0 16px 32px rgba(0,0,0,0.06),
        0 32px 64px rgba(0,0,0,0.08),
        0 48px 96px rgba(0,0,0,0.04);

    /* Colored shadows for emphasis */
    --shadow-indigo: 0 4px 14px rgba(79, 70, 229, 0.25);
    --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.2);
    --shadow-error: 0 4px 14px rgba(240, 62, 62, 0.2);

    /* Gradient backgrounds for high-value cards */
    --gradient-subtle: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    --gradient-indigo: linear-gradient(135deg, var(--ds-indigo-50) 0%, #f8f7ff 100%);
    --gradient-success: linear-gradient(135deg, var(--ds-green-50) 0%, #f0fdf8 100%);
    --gradient-highlight: linear-gradient(135deg, #fefefe 0%, #fafafa 50%, #f8f7ff 100%);
    --gradient-hero: linear-gradient(145deg,
        rgba(79, 70, 229, 0.03) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(16, 185, 129, 0.02) 100%);

    /* Noise texture overlay (for adding depth) */
    --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

    /* Smooth borders */
    --border-subtle: rgba(0, 0, 0, 0.06);

    /* Semantic Surface Colors */
    --bg-primary: var(--ds-background-100);
    --bg-elevated: var(--ds-gray-50);

    /* Purple Scale - for analysis/log phase styling */
    --ds-purple-50: #faf5ff;
    --ds-purple-100: #f3e8ff;
    --ds-purple-600: #9333ea;
    --ds-purple-700: #7e22ce;

    /* Missing intermediate color stops */
    --ds-blue-300: #93c5fd;
    --ds-red-300: #fca5a5;
    --ds-green-300: #6ee7b7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg-root);
    color: var(--text-primary);
    font-family: var(--font-sans);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 13px;           /* Electric Industrial: 13px base for high-density */
    line-height: 1.5;
    letter-spacing: var(--tracking-normal);
}

/* Tabular nums for aligned numbers */
.data-table,
.stat-value,
.score-value,
.time-display,
.stats-card,
.waveform-time,
[data-numeric] {
    font-variant-numeric: tabular-nums;
}

/* Heading typography - tight letter-spacing */
h1, h2, .view-header h1, .drawer-title, .card-title {
    letter-spacing: -0.025em;
}

/* Uppercase labels/overlines - wider letter-spacing */
.data-table th,
.label-overline,
.input-label,
.section-subtitle,
[data-overline] {
    letter-spacing: 0.05em;
}

/* ============================================================================
   SKELETON LOADERS
   Shimmer animation for loading states
   ============================================================================ */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--ds-gray-100) 0%,
        var(--ds-gray-50) 50%,
        var(--ds-gray-100) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 100%; }

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Table row skeleton */
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.skeleton-row .skeleton-cell {
    height: 16px;
    flex: 1;
}

.skeleton-row .skeleton-cell:first-child { flex: 0.5; }
.skeleton-row .skeleton-cell:last-child { flex: 0.3; }

/* Skeleton table */
.skeleton-table {
    width: 100%;
}

.skeleton-table-header {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--ds-gray-50);
    border-bottom: 1px solid var(--border);
}

.skeleton-table-header .skeleton-cell {
    height: 12px;
    flex: 1;
    opacity: 0.5;
}

/* ============================================================================
   PULSE ANIMATIONS
   Electric pulse for active/processing states
   ============================================================================ */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

.pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    animation: pulse-ring 1.5s ease-out infinite;
}

/* Active state pulse for buttons */
.btn.processing {
    position: relative;
    pointer-events: none;
}

.btn.processing::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: transparent;
    border: 2px solid var(--ds-blue-500);
    animation: pulse-ring 1.5s ease-out infinite;
}

/* Pipeline step active pulse */
.progress-step.active .step-icon {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* --- Layout Grid --- */
.layout {
    display: grid;
    grid-template-columns: 180px 1fr;  /* Compact sidebar: 180px */
    height: 100%;
}

/* --- Sidebar --- */
.sidebar {
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 12px 8px;  /* Tighter padding */
}

.brand {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    margin-bottom: 20px;
}

.brand-logo {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--ds-blue-600) 0%, var(--ds-blue-700) 100%);
    border-radius: var(--radius-sm);
    /* Abstract triangle logo */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.brand-name {
    font-weight: 600;
    font-size: var(--text-heading);
    letter-spacing: var(--tracking-tight);
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    text-align: left;
}

.nav-item:hover {
    background: var(--ds-gray-alpha-200);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--ds-indigo-50);
    color: var(--ds-indigo-700);
    font-weight: 600;
}

.nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
    opacity: 0.7;
}

.nav-spacer { flex: 1; }

.sidebar-footer {
    padding: 10px;
    font-size: var(--text-small);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border);
    margin-top: 12px;
}

/* System Status Indicator */

.version-info {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
}

/* Background Import Indicator */
.bg-import-indicator {
    background: var(--ds-blue-50);
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 10px;
}

.bg-import-indicator.hidden {
    display: none;
}

.bg-import-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bg-import-icon {
    color: var(--ds-blue-600);
    display: flex;
    align-items: center;
    animation: importPulse 1.5s ease-in-out infinite;
}

@keyframes importPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.bg-import-text {
    flex: 1;
    min-width: 0;
}

.bg-import-label {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--ds-blue-700);
    display: block;
}

.bg-import-progress {
    font-size: 11px;
    color: var(--ds-blue-600);
    font-variant-numeric: tabular-nums;
}

.bg-import-actions {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.bg-import-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--ds-blue-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bg-import-btn:hover {
    background: var(--ds-blue-100);
    border-color: var(--ds-blue-300);
}

.bg-import-btn.bg-import-cancel {
    color: var(--ds-red-600);
    border-color: var(--ds-red-200);
}

.bg-import-btn.bg-import-cancel:hover {
    background: var(--ds-red-50);
    border-color: var(--ds-red-300);
}

.bg-import-bar {
    height: 4px;
    background: var(--ds-blue-100);
    border-radius: 2px;
    overflow: hidden;
}

.bg-import-bar-fill {
    height: 100%;
    background: var(--ds-blue-500);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

/* --- Main Content Area --- */
.content {
    background: var(--bg-root);
    overflow-y: auto;
    position: relative;
    scrollbar-gutter: stable;
}

.view {
    display: none;
    padding: 32px 24px;
    max-width: none;  /* Use full available width */
    margin: 0;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.view.active { display: block; }

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

.view-header {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.view-header h1 {
    font-size: var(--text-display);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0 0 8px 0;
}

.view-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-heading);
}

/* Evaluators View Styles */
#view-evaluators .evaluators-view-card {
    max-width: 100%;
}

#view-evaluators .evaluators-view-body {
    padding: 0;
}

#view-evaluators .evaluators-subnav {
    border-radius: 12px 12px 0 0;
}

#view-evaluators .evaluators-subtab-content {
    padding: 24px;
}

#view-evaluators .settings-section {
    margin-bottom: 20px;
}

/* --- Components: Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    user-select: none;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.btn-primary {
    background: linear-gradient(180deg, #222 0%, var(--ds-gray-1000) 100%);
    color: var(--ds-background-100);
    border: 1px solid var(--ds-gray-1000);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border-color: #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), var(--shadow-md);
}

.btn-secondary {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--ds-gray-300);
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), var(--shadow-md);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-sm { height: 32px; padding: 0 12px; font-size: var(--text-small); }
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
}

/* --- Components: Inputs --- */
.input-wrapper {
    margin-bottom: 20px;
}

.input-label {
    display: block;
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.text-input, .select-input, .textarea-input {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--text-body);
    font-family: var(--font-sans);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.text-input:hover, .select-input:hover, .textarea-input:hover {
    border-color: var(--ds-gray-300);
}

.text-input:focus, .select-input:focus, .textarea-input:focus {
    border-color: var(--ds-indigo-500);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02), 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.input-hint {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    margin-top: 6px;
}

/* --- Segmented Control --- */
.segmented-control {
    display: inline-flex;
    background: var(--ds-gray-100);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}

.segmented-control .segment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-body);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.segmented-control .segment:hover {
    color: var(--text-primary);
}

.segmented-control .segment.active {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.segmented-control .segment svg {
    opacity: 0.6;
}

.segmented-control .segment.active svg {
    opacity: 1;
}

/* --- Tag Input --- */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    min-height: 44px;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tag-input-container:hover {
    border-color: var(--ds-gray-400);
}

.tag-input-container:focus-within {
    border-color: var(--ds-gray-1000);
    box-shadow: 0 0 0 1px var(--ds-gray-1000);
}

.tag-input-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-input-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
    border-radius: 16px;
    font-size: var(--text-micro);
    font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: tagIn 0.15s ease;
}

@keyframes tagIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tag-input-tag .tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--ds-blue-700);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    font-size: var(--text-heading);
    line-height: 1;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.tag-input-tag .tag-remove:hover {
    opacity: 1;
    background: rgba(0, 112, 243, 0.2);
}

.tag-input-field {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: var(--text-body);
    padding: 4px 0;
    background: transparent;
    font-family: var(--font-mono);
}

.tag-input-field::placeholder {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
}

/* Token validation states */
.tag-input-tag.validating {
    background: var(--ds-gray-100);
    color: var(--ds-gray-500);
    position: relative;
}

.tag-input-tag.validating::after {
    content: '';
    position: absolute;
    right: 8px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--ds-gray-300);
    border-top-color: transparent;
    border-radius: 50%;
    animation: tagSpin 0.6s linear infinite;
}

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

.tag-input-tag.valid {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}

.tag-input-tag.valid .tag-remove {
    color: var(--ds-green-700);
}

.tag-input-tag.valid .tag-remove:hover {
    background: rgba(34, 197, 94, 0.2);
}

.tag-input-tag.valid::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-green-500);
    margin-right: 2px;
}

.tag-input-tag.invalid {
    background: var(--ds-red-100);
    color: var(--ds-red-700);
}

.tag-input-tag.invalid .tag-remove {
    color: var(--ds-red-700);
}

.tag-input-tag.invalid .tag-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}

.tag-input-tag.invalid::before {
    content: '!';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ds-red-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
}

/* Run Configuration Card */
.run-config-card {
    background: linear-gradient(135deg, var(--ds-gray-50) 0%, #fff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.run-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.run-config-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
}

.run-config-title svg {
    width: 18px;
    height: 18px;
    color: var(--ds-indigo-500);
}

.run-config-badge {
    font-size: var(--text-micro);
    padding: 4px 8px;
    background: var(--ds-indigo-100);
    color: var(--ds-indigo-700);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.validation-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--ds-gray-100);
    border-radius: var(--radius-md);
    font-size: var(--text-caption);
    color: var(--text-secondary);
    margin-top: 12px;
}

.validation-summary.all-valid {
    background: var(--ds-green-50);
    color: var(--ds-green-700);
}

.validation-summary.has-invalid {
    background: var(--ds-red-50);
    color: var(--ds-red-700);
}

.validation-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-weight: 600;
}

/* --- Dual-Point Range Slider --- */
.range-slider-container {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
}

.range-slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--ds-gray-200);
    border-radius: 3px;
}

.range-slider-fill {
    position: absolute;
    height: 100%;
    background: var(--ds-blue-700);
    border-radius: 3px;
    pointer-events: none;
}

.range-slider-input {
    position: absolute;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}

.range-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--ds-blue-700);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.range-slider-input::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.range-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--ds-blue-700);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- Cards & Panels --- */
.card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

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

.card-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--gradient-subtle);
}

/* --- Pipeline Action Button --- */
.btn-pipeline {
    width: 100%;
    height: 48px;
    font-size: var(--text-heading);
    font-weight: 600;
    gap: 10px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.btn-pipeline:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-pipeline:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.btn-pipeline .icon-play,
.btn-pipeline .icon-stop {
    transition: transform 0.2s ease;
}

.btn-pipeline:hover .icon-play {
    transform: scale(1.1);
}

/* Running/Abort State */
.btn-pipeline.running {
    background: var(--ds-red-700);
    border-color: var(--ds-red-700);
}

.btn-pipeline.running:hover:not(:disabled) {
    background: var(--ds-red-600);
    border-color: var(--ds-red-600);
}

.btn-pipeline.running .icon-play {
    display: none;
}

.btn-pipeline.running .icon-stop {
    display: block;
    animation: pulse-icon 1.5s ease-in-out infinite;
}

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

.btn-pipeline.running .btn-text {
    position: relative;
}

/* Disabled state during abort */
.btn-pipeline.aborting {
    background: var(--ds-gray-400);
    border-color: var(--ds-gray-400);
    cursor: wait;
}

.btn-pipeline.aborting .icon-stop {
    animation: spin 1s linear infinite;
}

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

/* --- Dashboard Two-Column Layout --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.dashboard-config {
    min-width: 0;
}

.dashboard-config .card {
    margin-bottom: 0;
}

.dashboard-activity {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --- Activity Log --- */
.activity-log {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 600px;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--ds-gray-100);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.activity-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.activity-title svg {
    color: var(--text-tertiary);
}

.activity-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-stream {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: 1.7;
    background: #fafafa;
    min-height: 300px;
}

.activity-stream pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.activity-stream .log-line {
    padding: 2px 0;
}

.activity-stream .log-line.success {
    color: var(--ds-green-700);
}

.activity-stream .log-line.error {
    color: var(--ds-red-700);
}

.activity-stream .log-line.info {
    color: var(--text-tertiary);
}

.activity-stream .log-line.highlight {
    background: var(--ds-blue-100);
    padding: 2px 6px;
    margin: 0 -6px;
    border-radius: 3px;
}

/* Activity Empty State */
.activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
    min-height: 200px;
}

.activity-empty svg {
    margin-bottom: 16px;
    opacity: 0.4;
}

.activity-empty p {
    margin: 0;
    font-size: var(--text-body);
    font-family: var(--font-sans);
}

.activity-empty .hint {
    font-size: var(--text-small);
    margin-top: 4px;
    opacity: 0.7;
}

/* Pulse Animation for Running Indicator */
.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--ds-amber-700);
    border-radius: 50%;
    animation: pulse-ring 1.5s ease-in-out infinite;
}

/* pulse-ring keyframe defined in shared animations above (line ~314) */

/* --- Visual Progress Tracker --- */
/* ============================================================================
   GLASS BOX PROGRESS TRACKER - Phase 2 Enhancement
   ============================================================================ */

.pipeline-progress {
    display: flex;
    flex-direction: column;
    background: var(--gradient-highlight);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

.progress-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 32px 16px;
}

.progress-stage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.stage-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ds-gray-100);
    border: 2px solid var(--ds-gray-200);
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

.stage-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.stage-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stage-label {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.stage-status {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    transition: color 0.3s ease;
}

/* Connector between stages */
.progress-connector {
    display: flex;
    align-items: center;
    width: 48px;
    transition: all 0.3s ease;
}

.connector-line {
    flex: 1;
    height: 2px;
    background: var(--ds-gray-200);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

.connector-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--ds-green-500);
    transition: width 0.5s ease;
}

/* Progress Stats Bar */
.progress-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 32px 16px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.4);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-label {
    font-size: var(--text-micro);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: var(--text-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
}

/* Completed stage */
.progress-stage.completed {
    background: var(--ds-green-50);
    border-color: var(--ds-green-200);
}

.progress-stage.completed .stage-icon {
    background: var(--ds-green-500);
    border-color: var(--ds-green-500);
    color: white;
}

.progress-stage.completed .stage-icon > svg:first-child {
    opacity: 0;
    transform: scale(0.5);
}

.progress-stage.completed .stage-check {
    opacity: 1;
    transform: scale(1);
}

.progress-stage.completed .stage-label {
    color: var(--ds-green-700);
}

.progress-stage.completed .stage-status {
    color: var(--ds-green-600);
}

.progress-connector.completed .connector-line::after {
    width: 100%;
}

/* Active stage */
.progress-stage.active {
    background: var(--ds-indigo-50);
    border-color: var(--ds-indigo-200);
    box-shadow: var(--shadow-indigo);
}

.progress-stage.active .stage-icon {
    background: var(--ds-indigo-100);
    border-color: var(--ds-indigo-500);
    color: var(--ds-indigo-600);
    animation: stage-pulse 2s ease-in-out infinite;
}

.progress-stage.active .stage-label {
    color: var(--ds-indigo-700);
}

.progress-stage.active .stage-status {
    color: var(--ds-indigo-600);
}

@keyframes stage-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
    }
}

/* Active stage icon animation */
.progress-stage.active .stage-icon > svg:first-child {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

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

/* All complete state */
.pipeline-progress.all-complete {
    background: linear-gradient(135deg, var(--ds-green-50) 0%, #f0fdf8 100%);
}

.pipeline-progress.all-complete .progress-stage .stage-icon {
    background: var(--ds-green-500);
    border-color: var(--ds-green-500);
    color: white;
    animation: none;
}

.pipeline-progress.all-complete .progress-stage .stage-icon > svg:first-child {
    opacity: 0;
}

.pipeline-progress.all-complete .progress-stage .stage-check {
    opacity: 1;
    transform: scale(1);
}

.pipeline-progress.all-complete .progress-stage .stage-label {
    color: var(--ds-green-700);
}

.pipeline-progress.all-complete .connector-line::after {
    width: 100%;
}

/* ============================================================================
   TAB-BASED ACTIVITY LOG
   ============================================================================ */

.activity-log-tabbed {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Tab bar */
.log-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    background: var(--ds-gray-50);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.log-tab {
    padding: 8px 16px;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.log-tab:hover {
    color: var(--text-primary);
    background: var(--ds-gray-100);
}

.log-tab.active {
    color: var(--ds-indigo-600);
    border-bottom-color: var(--ds-indigo-600);
    background: white;
}

/* Tab badge for log count */
.log-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--ds-gray-200);
    border-radius: 9px;
}

.log-tab.active .tab-count {
    color: white;
    background: var(--ds-indigo-600);
}

/* Active phase indicator on tab */
.log-tab.phase-active::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    background: var(--ds-indigo-500);
    border-radius: 50%;
    animation: tab-pulse 1.5s ease-in-out infinite;
}

@keyframes tab-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Log content area */
.log-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: white;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: 1.7;
}

/* Empty state */
.log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-tertiary);
    text-align: center;
}

.log-empty svg {
    margin-bottom: 12px;
    opacity: 0.5;
}

.log-empty p {
    margin: 4px 0;
}

.log-empty .hint {
    font-size: var(--text-micro);
    opacity: 0.7;
}

/* Log entries */
.log-entry {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--ds-gray-100);
}

.log-entry:last-child {
    border-bottom: none;
}

/* Phase badge */
.log-phase {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    min-width: 70px;
    text-align: center;
}

.log-phase.extraction {
    color: var(--ds-blue-700);
    background: var(--ds-blue-100);
}

.log-phase.analysis {
    color: var(--ds-purple-700);
    background: var(--ds-purple-100);
}

.log-phase.export {
    color: var(--ds-green-700);
    background: var(--ds-green-100);
}

.log-phase.system {
    color: var(--ds-gray-600);
    background: var(--ds-gray-200);
}

/* Log message */
.log-message {
    flex: 1;
    color: var(--text-secondary);
    word-break: break-word;
}

.log-entry.success .log-message {
    color: var(--ds-green-700);
}

.log-entry.error .log-message {
    color: var(--ds-red-700);
}

.log-entry.highlight .log-message {
    color: var(--ds-indigo-700);
    font-weight: 500;
}

/* Phase separator in All view */
.log-phase-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 8px;
    padding: 8px 0;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--text-tertiary);
}

.log-phase-separator:first-child {
    margin-top: 0;
}

.log-phase-separator::before,
.log-phase-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.log-phase-separator.extraction {
    color: var(--ds-blue-600);
}

.log-phase-separator.analysis {
    color: var(--ds-purple-600);
}

.log-phase-separator.export {
    color: var(--ds-green-600);
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1100px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .activity-log {
        max-height: 500px;
        flex: none;
    }

    .pipeline-progress {
        padding: 16px;
        gap: 4px;
    }

    .progress-stage {
        padding: 8px 10px;
    }

    .stage-icon {
        width: 36px;
        height: 36px;
    }

    .stage-icon svg {
        width: 16px;
        height: 16px;
    }

    .stage-label {
        font-size: var(--text-micro);
    }

    .connector-line {
        width: 16px;
    }
}

/* --- Terminal Output (Legacy - keeping for compatibility) --- */
.terminal {
    background: #000;
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--text-body);
    padding: 20px;
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.6;
}

.terminal-line { margin: 0; }
.terminal-line.success { color: #50e3c2; }
.terminal-line.error { color: #ff0033; }
.terminal-line.info { color: #aaa; }

/* --- Filter Ribbon --- */
.filter-ribbon {
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    color: var(--text-secondary);
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-chip:hover {
    border-color: var(--ds-gray-400);
    background: var(--ds-gray-100);
}

.filter-chip.active {
    background: var(--ds-gray-900);
    border-color: var(--ds-gray-900);
    color: #fff;
}

.filter-chip .chip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.filter-chip .chip-dot.critical {
    background: #7f1d1d;
}

.filter-chip .chip-dot.error {
    background: var(--ds-red-700);
}

.filter-chip .chip-dot.warning {
    background: var(--ds-amber-700);
}

.filter-chip.active .chip-dot.critical {
    background: #fecaca;
}

.filter-chip.active .chip-dot.error {
    background: var(--ds-red-100);
}

.filter-chip.active .chip-dot.warning {
    background: var(--ds-amber-100);
}

.filter-chip.group-toggle {
    gap: 8px;
}

.filter-chip.group-toggle svg {
    opacity: 0.6;
}

.filter-chip.group-toggle.active svg {
    opacity: 1;
}

.select-input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-primary);
    font-size: var(--text-body);
    cursor: pointer;
    min-width: 140px;
}

.select-input:focus {
    outline: none;
    border-color: var(--ds-gray-400);
}

.active-filters {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.active-filters:empty {
    display: none;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
    border-radius: 4px;
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.active-filter-tag button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: var(--text-small);
    line-height: 1;
    opacity: 0.7;
}

.active-filter-tag button:hover {
    opacity: 1;
}

/* ============================================================================
   BATCH SUMMARY BAR - Results Overview with Charts
   ============================================================================ */

.batch-summary {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 24px;
    padding: 20px;
    margin-bottom: 20px;
    background: var(--gradient-highlight);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.batch-summary.hidden {
    display: none;
}

/* Summary Stats */
.summary-stats {
    display: flex;
    gap: 24px;
    padding-right: 32px;
    border-right: 1px solid var(--border);
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

.summary-stat .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1;
}

.summary-stat .stat-label {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-stat.success .stat-value {
    color: var(--ds-green-600);
}

/* Chart Title */
.chart-title {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.chart-subtitle {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    opacity: 0.8;
}

/* Score Histogram */
.summary-chart {
    padding: 0 16px;
}

.score-histogram {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 80px;
}

.histogram-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.histogram-bar .bar-fill {
    width: 100%;
    min-height: 4px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.5s ease;
    position: absolute;
    bottom: 24px;
}

.histogram-bar .bar-fill.pass {
    background: linear-gradient(180deg, var(--ds-green-400) 0%, var(--ds-green-500) 100%);
}

.histogram-bar .bar-fill.minor {
    background: linear-gradient(180deg, var(--ds-amber-400) 0%, var(--ds-amber-500) 100%);
}

.histogram-bar .bar-fill.major {
    background: linear-gradient(180deg, #ff8787 0%, var(--ds-red-500) 100%);
}

.histogram-bar .bar-fill.critical {
    background: linear-gradient(180deg, var(--ds-red-500) 0%, var(--ds-red-700) 100%);
}

.histogram-bar .bar-label {
    position: absolute;
    bottom: 0;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-secondary);
}

.histogram-bar .bar-count {
    position: absolute;
    bottom: 28px;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-tertiary);
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.2s ease;
}

.histogram-bar:hover .bar-count {
    opacity: 1;
    transform: translateY(0);
}

/* Issue Breakdown */
.summary-issues {
    padding-left: 16px;
}

.summary-calibration {
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.calibration-metrics {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.calibration-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 70px;
}

.calibration-metric .metric-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.calibration-metric .metric-label {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.calibration-note {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.issues-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issue-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.issue-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 70px;
    font-size: var(--text-small);
    color: var(--text-secondary);
}

.issue-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.issue-dot.pass { background: var(--ds-green-500); }
.issue-dot.minor { background: var(--ds-amber-500); }
.issue-dot.major { background: var(--ds-red-500); }
.issue-dot.critical { background: var(--ds-red-700); }

.issue-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--ds-gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.issue-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.issue-bar.pass { background: var(--ds-green-500); }
.issue-bar.minor { background: var(--ds-amber-500); }
.issue-bar.major { background: var(--ds-red-500); }
.issue-bar.critical { background: var(--ds-red-700); }

.issue-count {
    width: 40px;
    font-size: var(--text-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    text-align: right;
}

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

    .summary-stats {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 20px;
        justify-content: center;
    }

    .summary-chart,
    .summary-issues,
    .summary-calibration {
        padding-left: 0;
    }

    .summary-calibration {
        border-left: none;
    }
}

/* Client Group Header */
.client-group-header {
    background: var(--ds-gray-100);
    cursor: default;
}

.client-group-header td {
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.client-group-header:hover td {
    background: var(--ds-gray-200);
}

.group-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.group-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.group-toggle-btn .chevron {
    transition: transform 0.2s ease;
}

.client-group-header.collapsed .group-toggle-btn .chevron {
    transform: rotate(-90deg);
}

.group-client-id {
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: 600;
}

.group-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: var(--text-small);
}

.group-stats .group-count {
    color: var(--text-tertiary);
}

.group-stats .group-score {
    font-family: var(--font-mono);
}

.group-stats .group-issues {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.client-group-row.hidden {
    display: none;
}

/* Indent grouped rows */
.client-group-row td:first-child {
    position: relative;
}

.client-group-row td:first-child::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 1px;
    background: var(--ds-gray-300);
}

/* --- Tables --- */
.table-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
    position: relative;
    margin-top: 20px;
}

/* Wrapper to allow tooltip overflow */
.table-wrapper {
    padding-top: 120px;
    margin-top: -120px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
    line-height: 1.5;
}

.data-table th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(249, 250, 251, 0.85);
}

.data-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
    white-space: nowrap;
    font-size: var(--text-small);
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    box-sizing: border-box;
}

.data-table tr {
    height: 68px;
}

/* Monospace styling for IDs and timestamps */
.data-table td.mono {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--text-secondary);
}

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

.data-table tbody tr {
    transition: all 0.15s ease;
    position: relative;
}

.data-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.015);
    cursor: pointer;
}

.data-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--ds-blue-700);
}

.data-table tr {
    transition: background-color 0.15s ease;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}
.data-table th.sortable:hover {
    background: #f3f4f6;
}
.data-table th .sort-icon::after {
    content: '';
    margin-left: 4px;
    opacity: 0.3;
    font-size: var(--text-micro);
}
.data-table th.sort-asc .sort-icon::after {
    content: '\25B2';
    opacity: 0.7;
}
.data-table th.sort-desc .sort-icon::after {
    content: '\25BC';
    opacity: 0.7;
}

/* Table cell helpers */
.data-table td.text-muted {
    color: var(--text-secondary);
}

/* Text truncation for long values */
.data-table td.text-truncate {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Protocol ID cell with copy button */
.data-table td.protocol-id-cell {
    max-width: 140px;
}

.data-table td.protocol-id-cell > span,
.data-table td.conv-id-cell > span {
    vertical-align: middle;
}

.data-table .protocol-id-text {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.data-table .copy-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.4;
    transition: opacity 0.15s ease, transform 0.15s ease;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-left: 4px;
}

.data-table .copy-btn:hover {
    opacity: 1;
    background: var(--ds-gray-100);
}

.data-table .copy-btn:active {
    transform: scale(0.9);
}

.data-table .copy-btn.copied {
    opacity: 1;
    color: var(--ds-green-600);
}

/* Download button in table */
.data-table .download-btn {
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--ds-gray-200);
    background: var(--ds-gray-50);
    cursor: pointer;
    font-size: 14px;
    opacity: 0.8;
    transition: all 0.15s ease;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-left: 4px;
}

.data-table .download-btn:hover {
    opacity: 1;
    background: var(--ds-blue-50);
    border-color: var(--ds-blue-300);
}

.data-table .download-btn:active {
    transform: scale(0.9);
}

.data-table .download-btn.downloaded {
    opacity: 1;
    color: var(--ds-green-600);
}

/* Checkbox column for row selection */
.checkbox-col {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 8px !important;
}

.checkbox-col input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--ds-indigo-600);
}

.data-table tbody tr.selected {
    background: var(--ds-indigo-50) !important;
}

.data-table tbody tr.selected td {
    background: var(--ds-indigo-50) !important;
}

/* Export dropdown button */
.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-dropdown.hidden {
    display: none;
}

.export-dropdown .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.export-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
}

.export-dropdown:hover .export-menu,
.export-dropdown:focus-within .export-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.export-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: none;
    background: none;
    font-size: var(--text-small);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.export-option:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.export-option:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.export-option:hover {
    background: var(--ds-gray-100);
}

/* Analysis status column (Ready/Analyzed/Failed) */
.data-table th.analysis-status-col,
.data-table td.analysis-status-col {
    text-align: center;
    width: 80px;
}

/* Status badges (Answered/Completed) */
.data-table .status-cell {
    white-space: nowrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 2px;
}

.status-badge.status-answered {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}

.status-badge.status-completed {
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
}

/* Conversation ID cell with copy button */
.data-table .conv-id-cell {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    min-width: 100px;
    white-space: nowrap;
}

.data-table .conv-id-text {
    color: var(--text-secondary);
    vertical-align: middle;
}

/* Score Ring - Radial Progress Indicator */
.data-table .score-cell {
    padding: 8px 16px;
}

.score-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.score-ring svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring .ring-bg {
    fill: none;
    stroke: var(--ds-gray-150);
    stroke-width: 3;
}

.score-ring .ring-progress {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

/* Score-based ring colors */
.score-ring.score-high .ring-progress {
    stroke: var(--ds-green-500);
}
.score-ring.score-medium .ring-progress {
    stroke: var(--ds-amber-500);
}
.score-ring.score-low .ring-progress {
    stroke: var(--ds-red-500);
}
.score-ring.score-unknown .ring-progress {
    stroke: var(--ds-gray-400);
}

.score-ring .score-value {
    font-size: var(--text-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

/* Score value colors */
.score-ring.score-high .score-value {
    color: var(--ds-green-700);
}
.score-ring.score-medium .score-value {
    color: var(--ds-amber-700);
}
.score-ring.score-low .score-value {
    color: var(--ds-red-700);
}
.score-ring.score-unknown .score-value {
    color: var(--ds-gray-500);
}

/* Issue Micro-Bar Chart */
.data-table .issue-bar-cell {
    min-width: 120px;
    position: relative;
}

/* Issue cell tooltip */
.data-table .issue-bar-cell.has-issue-tooltip {
    cursor: help;
}
.data-table .issue-bar-cell.has-issue-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ds-gray-900);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: var(--text-caption);
    font-weight: 400;
    white-space: pre-line;
    line-height: 1.7;
    min-width: 200px;
    max-width: 300px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    text-align: left;
}
.data-table .issue-bar-cell.has-issue-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ds-gray-900);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1001;
}
.data-table .issue-bar-cell.has-issue-tooltip:hover::after,
.data-table .issue-bar-cell.has-issue-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}
.issue-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f4f6;
    margin-bottom: 4px;
}
.issue-bar-pass {
    background: var(--ds-green-600);
    transition: width 0.3s ease;
}
.issue-bar-minor {
    background: var(--ds-amber-700);
    transition: width 0.3s ease;
}
.issue-bar-major {
    background: var(--ds-red-700);
    transition: width 0.3s ease;
}
.issue-bar-label {
    font-size: var(--text-caption);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* Quick Preview Tooltip - hover card for conversation summary */
.data-table tr {
    position: relative;
}

.quick-preview {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    width: 320px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.data-table tr:hover .quick-preview {
    opacity: 1;
    visibility: visible;
}

/* Arrow pointing left */
.quick-preview::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: var(--border);
}
.quick-preview::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -1px;
    border: 7px solid transparent;
    border-right-color: #fff;
}

.quick-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.quick-preview-title {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--text-primary);
}

.quick-preview-badge {
    font-size: var(--text-caption);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-weight: 500;
}
.quick-preview-badge.success {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}
.quick-preview-badge.warning {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
}
.quick-preview-badge.error {
    background: var(--ds-red-100);
    color: var(--ds-red-700);
}

.quick-preview-summary {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quick-preview-meta {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.quick-preview-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* Legacy issue counts - keeping for reference */
.data-table .issue-counts {
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.count-pass { color: #047857 !important; font-weight: 600; }
.count-minor { color: #b45309 !important; font-weight: 600; }
.count-major { color: #f03e3e !important; font-weight: 600; }
.data-table .count-sep {
    color: var(--ds-gray-300);
    margin: 0 2px;
}

/* --- Pagination Bar --- */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-top: 16px;
    border-top: 1px solid var(--ds-gray-200);
    gap: 16px;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 13px;
    min-width: 150px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    padding: 6px 8px !important;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn svg {
    flex-shrink: 0;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.page-input {
    width: 50px;
    padding: 4px 8px;
    border: 1px solid var(--ds-gray-300);
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.page-input:focus {
    outline: none;
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 2px var(--ds-blue-100);
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-input[type=number] {
    -moz-appearance: textfield;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-size .select-input {
    width: 70px;
    padding: 4px 8px;
    font-size: 13px;
}

/* Clickable row for analyzed conversations */
.data-table tr.clickable-row {
    cursor: pointer;
}

.data-table tr.clickable-row:hover {
    background-color: var(--ds-blue-50);
}

/* Analyzing row - clickable but shows info toast */
.data-table tr.analyzing-row {
    cursor: pointer;
}

.data-table tr.analyzing-row:hover {
    background-color: var(--ds-yellow-50, #fef9c3);
}

/* Issue count tooltips */
.data-table .has-tooltip {
    position: relative;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.data-table .has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ds-gray-900);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: var(--text-caption);
    font-weight: 400;
    white-space: pre-line;
    line-height: 1.6;
    min-width: 180px;
    max-width: 280px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: left;
}

.data-table .has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ds-gray-900);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1001;
}

.data-table .has-tooltip:hover::after,
.data-table .has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Audio cell with play button */
.data-table td.audio-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 72px;
    box-sizing: border-box;
}

.play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.play-btn.success {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}
.play-btn.success:hover,
.play-btn.success.playing {
    background: var(--ds-green-700);
    color: white;
}

.play-btn.warning {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
}
.play-btn.warning:hover,
.play-btn.warning.playing {
    background: var(--ds-amber-700);
    color: white;
}

.play-btn:hover {
    transform: scale(1.1);
}

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

/* Playing state animation */
.play-btn.playing {
    animation: pulse 1.5s ease-in-out infinite;
}

.play-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

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

/* Status Badges - Surface style */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge.success {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    border: 1px solid var(--ds-green-200);
}
.badge.error {
    background: var(--ds-red-100);
    color: var(--ds-red-700);
    border: 1px solid var(--ds-red-200);
}
.badge.warning {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
    border: 1px solid var(--ds-amber-200);
}
.badge.neutral {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.badge.info {
    background: var(--ds-indigo-50);
    color: var(--ds-indigo-700);
    border: 1px solid var(--ds-indigo-200);
}
.badge.na {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid rgba(100,116,139,0.2);
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ============================================================================
   COMMAND PALETTE (Cmd+K)
   ============================================================================ */
.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.cmd-palette-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cmd-palette {
    width: 560px;
    max-width: 90vw;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
    overflow: hidden;
    transform: scale(0.96) translateY(-10px);
    transition: transform 0.15s ease;
}

.cmd-palette-overlay.open .cmd-palette {
    transform: scale(1) translateY(0);
}

.cmd-palette-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.cmd-palette-header svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.cmd-palette-header input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--text-body-lg);
    color: var(--text-primary);
    background: transparent;
}

.cmd-palette-header input::placeholder {
    color: var(--text-tertiary);
}

.cmd-palette-header .cmd-shortcut {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--ds-gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-tertiary);
}

.cmd-palette-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.cmd-palette-group {
    margin-bottom: 8px;
}

.cmd-palette-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px 4px;
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s ease;
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
    background: var(--ds-gray-100);
}

.cmd-palette-item.active {
    background: var(--ds-blue-50);
}

.cmd-palette-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-gray-100);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cmd-palette-item.active .cmd-palette-item-icon {
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
}

.cmd-palette-item-content {
    flex: 1;
    min-width: 0;
}

.cmd-palette-item-title {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-primary);
}

.cmd-palette-item-desc {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-shortcut {
    display: flex;
    gap: 4px;
}

.cmd-palette-item-shortcut kbd {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--ds-gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.cmd-palette-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-tertiary);
}

.cmd-palette-empty svg {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.cmd-palette-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
    font-size: 11px;
    color: var(--text-tertiary);
}

.cmd-palette-footer kbd {
    display: inline-block;
    padding: 1px 5px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    margin: 0 2px;
}


/* --- Drawer (Sheet) --- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
}

.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(1200px, 90vw);
    background: #fff;
    box-shadow: var(--shadow-xl), -4px 0 24px rgba(0,0,0,0.08);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}

.drawer.open { transform: translateX(0); }

/* Drawer Resize Handle */
.drawer-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}

.drawer-resize-handle::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background: var(--ds-gray-300);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.drawer-resize-handle:hover::before,
.drawer.resizing .drawer-resize-handle::before {
    opacity: 1;
}

.drawer-resize-handle:hover {
    background: rgba(0, 0, 0, 0.03);
}

.drawer.resizing {
    transition: none;
    user-select: none;
}

.drawer.resizing .drawer-content {
    pointer-events: none;
}

/* Prevent text selection while resizing */
body.drawer-resizing {
    cursor: ew-resize !important;
    user-select: none;
}

body.drawer-resizing * {
    cursor: ew-resize !important;
}

/* Split Pane Layout */
.drawer-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.drawer-pane {
    overflow-y: auto;
    padding: 28px;
}

.drawer-pane-left {
    border-right: 1px solid var(--border);
}

.drawer-pane-right {
    background: var(--gradient-subtle);
}

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

.pane-title {
    font-size: var(--text-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
    .drawer {
        width: 100vw;
    }
    .drawer-split {
        grid-template-columns: 1fr;
    }
    .drawer-pane-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

.drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.85);
}

.drawer-title h2 { margin: 0 0 6px 0; font-size: var(--text-heading); letter-spacing: -0.02em; }
.drawer-title p { margin: 0; color: var(--text-secondary); font-size: var(--text-body); }
.drawer-title-label { color: var(--text-secondary); font-weight: 400; font-size: var(--text-body); }

.drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-close {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ds-gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.drawer-close:hover {
    background: var(--ds-gray-200);
    color: var(--text-primary);
    border-color: var(--ds-gray-300);
}

.drawer-close .close-icon {
    font-size: var(--text-heading);
    line-height: 1;
}

.drawer-close .esc-hint {
    font-size: var(--text-caption);
    padding: 2px 5px;
    background: var(--ds-gray-200);
    border-radius: 3px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.drawer-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.drawer-section { margin-bottom: 32px; }
.drawer-section h3 {
    font-size: var(--text-body);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.raw-json {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    overflow: hidden;
}

.raw-json summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 500;
    color: var(--text-secondary);
    list-style: none;
}

.raw-json summary::-webkit-details-marker {
    display: none;
}

.raw-json pre {
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-root);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--text-secondary);
    white-space: pre-wrap;
    max-height: 320px;
    overflow: auto;
}

/* --- Transcription Panel --- */
.transcription-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    overflow: hidden;
    margin-bottom: 24px;
}

.transcription-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-root);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.transcription-header:hover {
    background: var(--ds-gray-100);
}

.transcription-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.transcription-header-left svg {
    color: var(--text-tertiary);
}

.transcription-header h4 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
}

.transcription-header .chevron {
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.transcription-panel.open .transcription-header .chevron {
    transform: rotate(180deg);
}

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

.transcription-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.transcription-copy-btn:hover {
    background: var(--ds-gray-100);
    border-color: var(--ds-gray-300);
    color: var(--text-primary);
}

.transcription-copy-btn.copied {
    background: var(--ds-green-100);
    border-color: var(--ds-green-700);
    color: var(--ds-green-700);
}

.transcription-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.transcription-panel.open .transcription-body {
    max-height: 500px;
}

.transcription-content {
    padding: 18px;
    max-height: 400px;
    overflow-y: auto;
    font-size: var(--text-small);
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.transcription-empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-small);
}

.transcription-empty svg {
    display: block;
    margin: 0 auto 12px;
    opacity: 0.4;
}

/* --- Criterion Cards --- */
.criterion-card {
    border: 1px solid var(--border-subtle);
    transition: border-color 0.15s;
}

.criterion-card[open] {
    border-color: var(--border);
}

.criterion-card summary {
    list-style: none;
}

.criterion-card summary::-webkit-details-marker {
    display: none;
}

.criterion-card summary:hover {
    background: var(--bg-elevated);
}

.prompt-text {
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--text-secondary);
    white-space: pre-wrap;
    max-height: 320px;
    overflow: auto;
}

/* --- At-a-Glance Stats Bar --- */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}

.stat-card:hover {
    border-color: var(--ds-gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

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

.stat-label {
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.stat-value {
    font-size: var(--text-heading);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-unit {
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--text-tertiary);
}

/* --- Metadata Info Bar (Modal) --- */
.metadata-info-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    padding: 16px 20px;
    background: var(--ds-gray-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metadata-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.metadata-value {
    font-size: var(--text-small);
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

.metadata-value.mono {
    font-family: var(--font-mono);
    font-size: 11px;
}


/* Responsive: 1 column on very small screens */
@media (max-width: 500px) {
    .metadata-info-bar {
        grid-template-columns: 1fr;
    }
}

/* --- Waveform Audio Player --- */
.waveform-player {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.waveform-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: none;
    background: transparent;
}

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

.audio-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.8);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.audio-download-btn:hover {
    border-color: var(--ds-blue-300);
    background: var(--ds-blue-50);
    color: var(--ds-blue-700);
}

.audio-download-btn:active {
    transform: scale(0.98);
}

.audio-download-btn.downloaded {
    border-color: var(--ds-green-300);
    background: var(--ds-green-50);
    color: var(--ds-green-700);
}

.speed-controls {
    display: flex;
    gap: 4px;
}

.speed-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: rgba(255,255,255,0.8);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.speed-btn:hover {
    border-color: var(--ds-gray-300);
    background: #fff;
}

.speed-btn.active {
    background: var(--ds-gray-900);
    border-color: var(--ds-gray-900);
    color: #fff;
    box-shadow: none;
}

.waveform-container {
    position: relative;
    height: 80px;
    padding: 10px 16px;
    cursor: pointer;
    background: rgba(255,255,255,0.6);
    margin: 0 12px;
    border-radius: var(--radius-md);
}

.waveform-canvas {
    width: 100%;
    height: 60px;
    display: block;
}

.waveform-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: rgba(79, 70, 229, 0.05);
    pointer-events: none;
    transition: width 0.05s linear;
}

.waveform-cursor {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 2px;
    height: 60px;
    background: var(--ds-indigo-600);
    pointer-events: none;
    transition: left 0.05s linear;
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

.waveform-cursor::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: var(--ds-indigo-600);
    border-radius: 50%;
    box-shadow: 0 0 0 2px white, var(--shadow-indigo);
}

.waveform-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-top: none;
    background: transparent;
}

.play-pause-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #333 0%, var(--ds-gray-900) 100%);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), var(--shadow-md);
}

.play-pause-btn:hover {
    background: var(--ds-gray-1000);
    transform: scale(1.05);
}

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

.time-display {
    font-family: var(--font-mono);
    font-size: var(--text-body);
    color: var(--text-secondary);
}

.time-display .current-time {
    color: var(--text-primary);
    font-weight: 500;
}

.time-display .time-separator {
    margin: 0 4px;
    color: var(--text-tertiary);
}

/* --- Criteria Severity Sections --- */
.needs-attention-section {
    animation: fadeInUp 0.3s ease-out;
}

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

.issue-card {
    transition: box-shadow 0.15s ease;
}

.issue-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.passes-accordion summary {
    list-style: none;
}

.passes-accordion summary::-webkit-details-marker {
    display: none;
}

.passes-accordion summary:hover {
    background: var(--ds-gray-100);
}

.passes-accordion[open] summary {
    border-bottom: 1px solid var(--border);
}

.passes-accordion[open] .accordion-chevron {
    transform: rotate(180deg);
}

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

.pass-item:hover {
    background: var(--ds-gray-100);
}

/* Category Pills */
.category-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
    font-size: var(--text-caption);
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.category-pill.small {
    padding: 2px 8px;
    font-size: var(--text-micro);
    border-radius: 10px;
}

/* Sentiment Sparkline */
.sentiment-sparkline {
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
}

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

.sparkline-title {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.sparkline-legend {
    display: flex;
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-micro);
    color: var(--text-tertiary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.positive { background: var(--ds-green-500); }
.legend-dot.neutral { background: var(--ds-gray-400); }
.legend-dot.negative { background: var(--ds-red-500); }

.sparkline-canvas {
    width: 100%;
    height: 48px;
    display: block;
}

.sparkline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* --- Transcript View --- */
.transcript-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transcript-turn {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: #fff;
    transition: background 0.15s ease;
}

.transcript-turn:hover {
    background: var(--ds-gray-100);
}

.transcript-turn.active {
    background: var(--ds-indigo-50);
    box-shadow: 0 0 0 2px var(--ds-indigo-500);
}

.transcript-turn.highlighted {
    background: var(--ds-indigo-100);
    border-left: 3px solid var(--ds-indigo-500);
    box-shadow: var(--shadow-indigo);
}

@keyframes highlight-flash {
    0% {
        background: var(--ds-indigo-200);
        transform: scale(1.01);
    }
    50% {
        background: var(--ds-indigo-100);
    }
    100% {
        background: var(--ds-indigo-50);
        transform: scale(1);
    }
}


.turn-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-caption);
    font-weight: 600;
    flex-shrink: 0;
}

.turn-avatar.agent {
    background: var(--ds-indigo-100);
    color: var(--ds-indigo-700);
}

.turn-avatar.patient {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}

.turn-avatar.system {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
}

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

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

.turn-speaker {
    font-weight: 600;
    font-size: var(--text-body);
    color: var(--text-primary);
}

.turn-timestamp {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.turn-text {
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--text-secondary);
}

.turn-text em {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Transcript Search */
.transcript-search {
    position: relative;
    margin-bottom: 16px;
}

.transcript-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    background: #fff;
}

.transcript-search input:focus {
    outline: none;
    border-color: var(--ds-gray-400);
}

.transcript-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
}

/* No Transcript State */
.no-transcript {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
}

.no-transcript svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-transcript p {
    margin: 0;
    font-size: var(--text-body);
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 200;
    pointer-events: none; /* Allow clicking through container */
}

.toast {
    background: #fff;
    border: 1px solid var(--border);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    pointer-events: auto;
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: var(--text-body);
}

.toast.error { border-left: 4px solid var(--ds-red-700); }
.toast.success { border-left: 4px solid var(--ds-blue-700); }

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

/* --- Utilities --- */
.flex-row { display: flex; gap: 16px; }
.flex-fill { flex: 1; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-gray-200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-gray-300); }

/* Range Slider Customization (for settings temperature slider) */
input[type=range]:not(.range-slider-input) {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]:not(.range-slider-input)::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--ds-gray-1000);
    cursor: pointer;
    margin-top: -6px;
}
input[type=range]:not(.range-slider-input)::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--ds-gray-200);
    border-radius: 2px;
}

/* --- Settings Split Layout --- */
.settings-body {
    padding: 0;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(200px, 240px) 1fr;
    gap: 20px;
    align-items: start;
}

.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 24px;
    padding-right: 16px;
    border-right: 1px solid var(--border);
}

.settings-tab {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    width: 100%;
    appearance: none;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--ds-gray-50);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.settings-tab:hover {
    border-color: var(--ds-gray-300);
    background: #fff;
}

.settings-tab.active {
    border-color: var(--ds-gray-300);
    color: var(--text-primary);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.settings-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.settings-tab-title {
    font-size: var(--text-body);
    font-weight: 600;
}

.settings-tab-desc {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.settings-panels {
    width: 100%;
    padding-bottom: 90px;
    min-width: 0;
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.prompt-summary-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--ds-gray-50);
}

.prompt-summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.prompt-summary-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prompt-summary-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
}

.prompt-summary-sub {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

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

.prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ds-gray-200);
    font-size: var(--text-caption);
    color: var(--text-secondary);
}

.settings-hidden-fields {
    display: none;
}

.settings-hidden-input {
    display: none;
}

.setting-row {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 24px;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    align-items: start;
}

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

.setting-row.hidden {
    display: none !important;
}

.setting-info {
    padding-right: 16px;
}

.setting-label {
    display: block;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.setting-help {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--text-tertiary);
}

.setting-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setting-control .select-input,
.setting-control .text-input {
    max-width: 320px;
}

.setting-control .textarea-input {
    width: 100%;
    min-height: 240px;
    resize: vertical;
}

/* Temperature slider with badge */
.temperature-control {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 320px;
}

.temperature-control input[type="range"] {
    flex: 1;
}

.temperature-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 12px;
    background: var(--ds-gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    cursor: pointer;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ds-gray-200);
    transition: all 0.2s ease;
    border-radius: 26px;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.2s ease;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--ds-blue-700);
}

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

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.2);
}

/* Setting hint below controls */
.setting-hint {
    margin-top: 8px;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

/* Transcription section icon color */
.section-icon.transcription-icon {
    background: #fef3c7;
    color: #d97706;
}

/* Tall setting row for system prompt */
.setting-row-tall {
    align-items: flex-start;
}

.setting-row-tall .setting-info {
    position: sticky;
    top: 24px;
}

/* Vertical setting row for transcription prompt */
.setting-row-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.setting-row-vertical .setting-info {
    padding-right: 0;
}

.setting-row-vertical .setting-control-full {
    width: 100%;
}

/* Settings Textarea (for transcription prompt) */
.settings-textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px 16px;
    font-family: 'Geist Mono', 'SF Mono', 'Consolas', monospace;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-textarea:focus {
    outline: none;
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.settings-textarea::placeholder {
    color: var(--text-tertiary);
}

.settings-textarea-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.settings-textarea-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .setting-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .setting-info {
        padding-right: 0;
    }

    .setting-control .select-input,
    .setting-control .text-input,
    .temperature-control {
        max-width: 100%;
    }

    .setting-row-tall .setting-info {
        position: static;
    }
}

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

    .settings-sidebar {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
        padding-right: 0;
        border-right: none;
    }

    .settings-tab {
        min-width: 180px;
        flex: 0 0 auto;
    }

    .settings-action-bar {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* --- Code Editor for System Prompt --- */
.prompt-tips {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--ds-blue-100);
    border-radius: var(--radius-md);
    font-size: var(--text-caption);
    color: var(--ds-blue-700);
}

.prompt-tips .tip-label {
    font-weight: 600;
}

.prompt-tips code {
    background: rgba(0, 112, 243, 0.15);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Geist Mono', var(--font-mono);
    font-size: var(--text-caption);
}

.code-editor {
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #1e1e1e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.code-editor-compact .code-editor-body {
    min-height: 200px;
    max-height: 360px;
}

.code-editor-compact .prompt-textarea {
    min-height: 200px;
}

.code-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #2d2d2d;
    border-bottom: 1px solid #3d3d3d;
}

.editor-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-small);
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.editor-label svg {
    opacity: 0.6;
}

.editor-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #444;
    border-radius: var(--radius-sm);
    color: #aaa;
    font-size: var(--text-caption);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.editor-action:hover {
    background: #3d3d3d;
    border-color: #555;
    color: #fff;
}

.editor-action svg {
    opacity: 0.7;
}

.editor-action:hover svg {
    opacity: 1;
}

.code-editor-body {
    position: relative;
    min-height: 300px;
    max-height: 500px;
}

/* Syntax highlighting overlay */
.prompt-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    font-family: 'Geist Mono', var(--font-mono);
    font-size: var(--text-body);
    line-height: 1.7;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.prompt-highlight .var {
    color: #4ec9b0;
    background: rgba(78, 201, 176, 0.15);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.prompt-textarea {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: 16px;
    font-family: 'Geist Mono', var(--font-mono);
    font-size: var(--text-body);
    line-height: 1.7;
    color: transparent;
    caret-color: #fff;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    z-index: 2;
    overflow-y: auto;
}

.prompt-textarea::placeholder {
    color: #555;
}

.prompt-textarea:focus {
    outline: none;
}

/* Auto-resize behavior */
.code-editor-body.auto-resize {
    max-height: none;
}

.code-editor-body.auto-resize .prompt-textarea {
    overflow: hidden;
}

/* --- Prompt Editor Modal --- */
.prompt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

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

.prompt-modal {
    width: 100%;
    max-width: 1000px;
    height: calc(100vh - 80px);
    max-height: 800px;
    background: #1e1e1e;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 24px 48px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.prompt-modal-overlay.open .prompt-modal {
    transform: scale(1) translateY(0);
}

.prompt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #2d2d2d;
    border-bottom: 1px solid #3d3d3d;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-shrink: 0;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d4d4d4;
}

.modal-title svg {
    color: #888;
}

.modal-title h3 {
    margin: 0;
    font-size: var(--text-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-hint {
    font-size: var(--text-caption);
    color: #666;
}

.modal-hint code {
    color: #4ec9b0;
    background: rgba(78, 201, 176, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Geist Mono', var(--font-mono);
}

.esc-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 6px;
    background: var(--ds-gray-200);
    border-radius: 3px;
    font-size: var(--text-micro);
    font-family: var(--font-mono);
    color: var(--text-tertiary);
}

.prompt-modal-body {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.prompt-modal-body .prompt-highlight,
.prompt-modal-body .prompt-textarea {
    min-height: 100%;
    height: 100%;
    padding: 24px;
}

.prompt-modal-body .prompt-highlight {
    overflow-y: auto;
}

.prompt-modal-body .prompt-textarea {
    position: absolute;
    top: 0;
    left: 0;
}

/* Scrollbar for dark editor */
.code-editor-body::-webkit-scrollbar,
.prompt-textarea::-webkit-scrollbar,
.prompt-highlight::-webkit-scrollbar,
.prompt-modal-body::-webkit-scrollbar {
    width: 10px;
}

.code-editor-body::-webkit-scrollbar-track,
.prompt-textarea::-webkit-scrollbar-track,
.prompt-highlight::-webkit-scrollbar-track,
.prompt-modal-body::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.code-editor-body::-webkit-scrollbar-thumb,
.prompt-textarea::-webkit-scrollbar-thumb,
.prompt-highlight::-webkit-scrollbar-thumb,
.prompt-modal-body::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 5px;
    border: 2px solid #1e1e1e;
}

.code-editor-body::-webkit-scrollbar-thumb:hover,
.prompt-textarea::-webkit-scrollbar-thumb:hover,
.prompt-highlight::-webkit-scrollbar-thumb:hover,
.prompt-modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prompt-modal {
        max-height: none;
        height: calc(100vh - 48px);
        border-radius: var(--radius-md);
    }

    .prompt-modal-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .modal-hint {
        display: none;
    }
}

/* --- Custom Model Selector --- */
.model-selector {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.model-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.model-selector-trigger:hover {
    border-color: var(--ds-gray-400);
}

.model-selector-trigger:focus {
    outline: none;
    border-color: var(--ds-gray-1000);
    box-shadow: 0 0 0 1px var(--ds-gray-1000);
}

.model-selector.open .model-selector-trigger {
    border-color: var(--ds-gray-1000);
    box-shadow: 0 0 0 1px var(--ds-gray-1000);
}

.model-selected {
    display: flex;
    align-items: center;
    gap: 10px;
}

.model-name {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-primary);
}

.gemini-icon {
    color: var(--ds-blue-700);
    flex-shrink: 0;
}

.dropdown-chevron {
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.model-selector.open .dropdown-chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.model-selector-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.model-selector.open .model-selector-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Model Option */
.model-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.model-option:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.model-option:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.model-option:hover {
    background: var(--ds-gray-100);
}

.model-option.selected {
    background: var(--ds-blue-100);
}

.model-option .gemini-icon {
    color: var(--ds-blue-700);
}

.model-option-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.model-option-name {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-primary);
}

.model-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.model-badge.preview {
    background: #f3e8ff;
    color: #7c3aed;
}

.check-icon {
    color: var(--ds-blue-700);
    opacity: 0;
    flex-shrink: 0;
}

.model-option.selected .check-icon {
    opacity: 1;
}

/* Capability Tags */
.model-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.cap-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--ds-gray-100);
    border: 1px solid var(--ds-gray-200);
    border-radius: 12px;
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.cap-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-gray-400);
}

/* Capability-specific colors */
.cap-tag[data-cap="fast"]::before {
    background: var(--ds-green-600);
}

.cap-tag[data-cap="cost-effective"]::before {
    background: var(--ds-green-600);
}

.cap-tag[data-cap="high-reasoning"]::before {
    background: var(--ds-blue-700);
}

.cap-tag[data-cap="long-context"]::before {
    background: var(--ds-blue-700);
}

.cap-tag[data-cap="next-gen"]::before {
    background: #7c3aed;
}

/* Animation for capability tags */
.cap-tag {
    animation: tagFadeIn 0.2s ease;
}

@keyframes tagFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .model-selector {
        max-width: 100%;
    }
}

/* --- Settings Action Bar & Danger Button --- */
.settings-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

.settings-action-hint {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

.settings-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.btn-danger:hover:not(:disabled) {
    background: var(--ds-red-600);
    border-color: var(--ds-red-600);
}

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--ds-red-700);
    border: 1px solid var(--ds-red-700);
}

.btn-danger-outline:hover:not(:disabled) {
    background: var(--ds-red-100);
}

.btn-danger-outline svg {
    opacity: 0.8;
}

/* Editor actions group */
.editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}



/* --- Confirmation Modal --- */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

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

.confirm-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-xl), 0 24px 48px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-subtle);
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-modal-overlay.open .confirm-modal {
    transform: scale(1);
}

.confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.confirm-icon.warning {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
}

.confirm-icon.danger {
    background: var(--ds-red-100);
    color: var(--ds-red-700);
}

.confirm-modal h3 {
    margin: 0 0 12px 0;
    font-size: var(--text-heading);
    font-weight: 600;
    color: var(--text-primary);
}

.confirm-modal p {
    margin: 0 0 24px 0;
    font-size: var(--text-body);
    color: var(--text-secondary);
    line-height: 1.6;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-actions .btn {
    min-width: 120px;
}

.confirm-actions.three-buttons {
    flex-wrap: wrap;
}

.confirm-actions.three-buttons .btn {
    min-width: 100px;
}

.confirm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--ds-gray-50);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.confirm-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.confirm-checkbox label {
    cursor: pointer;
}

/* --- Save Button Dirty State --- */
.btn-save-settings {
    transition: all 0.2s ease;
}

.btn-save-settings:disabled {
    background: var(--ds-gray-200);
    border-color: var(--ds-gray-200);
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-save-settings:not(:disabled) {
    animation: pulse-save 2s ease-in-out infinite;
}

@keyframes pulse-save {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(0, 112, 243, 0);
    }
}

/* Unsaved indicator dot */
.settings-header .view-title {
    position: relative;
}

.unsaved-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ds-amber-500);
    border-radius: 50%;
    margin-left: 8px;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* --- Settings Section Headers --- */
.settings-section {
    padding: 20px 24px 8px;
    border-bottom: none;
}

.settings-section:not(:first-child) {
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--ds-gray-100) 0%, var(--ds-gray-200) 100%);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.section-title h3 {
    margin: 0;
    font-size: var(--text-heading);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.section-title p {
    margin: 4px 0 0 0;
    font-size: var(--text-small);
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* Section-specific icon colors */
.settings-section:nth-child(1) .section-icon {
    background: linear-gradient(135deg, var(--ds-blue-100) 0%, var(--ds-blue-200) 100%);
    color: var(--ds-blue-700);
}

.settings-section:nth-child(5) .section-icon {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c3aed;
}

.settings-section:nth-child(7) .section-icon {
    background: linear-gradient(135deg, var(--ds-gray-100) 0%, var(--ds-gray-200) 100%);
    color: var(--text-tertiary);
}

/* Empty section placeholder */
.setting-row-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    border-bottom: none;
}

.empty-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-tertiary);
}

.empty-section-content svg {
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-section-content p {
    margin: 0;
    font-size: var(--text-body);
    max-width: 400px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-section {
        padding: 16px 16px 8px;
    }

    .section-icon {
        width: 36px;
        height: 36px;
    }

    .section-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================================
   EVALUATORS SECTION - Redesigned with Category Color System
   ============================================================================ */

/* Category Color System - Electric Minimalist */
:root {
    /* Safety - Coral Red (Critical importance) */
    --cat-safety-bg: var(--ds-red-50);
    --cat-safety-border: var(--ds-red-200);
    --cat-safety-accent: var(--ds-red-600);
    --cat-safety-text: #991b1b;
    --cat-safety-icon-bg: linear-gradient(135deg, var(--ds-red-100) 0%, var(--ds-red-200) 100%);

    /* Compliance - Amber (Important policies) */
    --cat-compliance-bg: var(--ds-amber-50);
    --cat-compliance-border: var(--ds-amber-200);
    --cat-compliance-accent: var(--ds-amber-600);
    --cat-compliance-text: #92400e;
    --cat-compliance-icon-bg: linear-gradient(135deg, var(--ds-amber-100) 0%, var(--ds-amber-200) 100%);

    /* Quality - Electric Indigo (Call quality metrics) */
    --cat-quality-bg: var(--ds-indigo-50);
    --cat-quality-border: var(--ds-indigo-200);
    --cat-quality-accent: var(--ds-indigo-600);
    --cat-quality-text: var(--ds-indigo-800);
    --cat-quality-icon-bg: linear-gradient(135deg, var(--ds-indigo-100) 0%, var(--ds-indigo-200) 100%);

    /* Experience - Purple (Patient experience) */
    --cat-experience-bg: #f5f3ff;
    --cat-experience-border: #ddd6fe;
    --cat-experience-accent: #7c3aed;
    --cat-experience-text: #5b21b6;
    --cat-experience-icon-bg: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);

    /* Meta - Slate (General assessment) */
    --cat-meta-bg: #f8fafc;
    --cat-meta-border: #e2e8f0;
    --cat-meta-accent: #475569;
    --cat-meta-text: #334155;
    --cat-meta-icon-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);

    /* Custom - Teal (User-created) */
    --cat-custom-bg: #f0fdfa;
    --cat-custom-border: #99f6e4;
    --cat-custom-accent: #0d9488;
    --cat-custom-text: #115e59;
    --cat-custom-icon-bg: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
}

.evaluators-icon {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

/* Stats Header Bar - Two Row Layout */
.evaluators-header {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    border-bottom: 1px solid var(--border);
}

.evaluators-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ds-gray-100, #f3f4f6);
    gap: 16px;
}

.evaluators-controls-row {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 10px;
}

.evaluators-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-small);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.evaluators-stats-main {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text-primary);
}

.evaluators-stats-main .stat-number {
    font-variant-numeric: tabular-nums;
}

/* Category Mini Badges in Stats */
.evaluators-category-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.category-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.category-mini-badge:hover {
    transform: translateY(-1px);
}

.category-mini-badge .badge-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.category-mini-badge[data-category="safety"] {
    background: var(--cat-safety-bg);
    color: var(--cat-safety-text);
    border-color: var(--cat-safety-border);
}

.category-mini-badge[data-category="compliance"] {
    background: var(--cat-compliance-bg);
    color: var(--cat-compliance-text);
    border-color: var(--cat-compliance-border);
}

.category-mini-badge[data-category="quality"] {
    background: var(--cat-quality-bg);
    color: var(--cat-quality-text);
    border-color: var(--cat-quality-border);
}

.category-mini-badge[data-category="experience"] {
    background: var(--cat-experience-bg);
    color: var(--cat-experience-text);
    border-color: var(--cat-experience-border);
}

.category-mini-badge[data-category="meta"] {
    background: var(--cat-meta-bg);
    color: var(--cat-meta-text);
    border-color: var(--cat-meta-border);
}

.category-mini-badge[data-category="custom"] {
    background: var(--cat-custom-bg);
    color: var(--cat-custom-text);
    border-color: var(--cat-custom-border);
}

/* Search Input in Header */
.evaluators-search {
    position: relative;
    flex: 1;
    max-width: 280px;
}

.evaluators-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    background: #fff;
    transition: all 0.15s ease;
}

.evaluators-search-input:focus {
    outline: none;
    border-color: var(--ds-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.evaluators-search-input::placeholder {
    color: var(--text-tertiary);
}

.evaluators-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.evaluators-filter {
    flex-shrink: 0;
}

.evaluators-filter-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary);
}

.evaluators-filter-select:hover {
    border-color: var(--ds-gray-400);
}

.evaluators-filter-select:focus {
    outline: none;
    border-color: var(--ds-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

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

/* Criteria Intro Explainer (collapsible) */
.criteria-intro {
    display: flex;
    gap: 16px;
    padding: 20px;
    padding-right: 40px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    position: relative;
    margin-bottom: 16px;
}

.criteria-intro-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ds-blue-400);
    cursor: pointer;
    transition: all 0.15s ease;
}

.criteria-intro-toggle:hover {
    background: var(--ds-blue-100);
    color: var(--ds-blue-600);
}

.criteria-intro-chevron {
    transition: transform 0.2s ease;
}

.criteria-intro.collapsed .criteria-intro-chevron {
    transform: rotate(-90deg);
}

.criteria-intro.collapsed .criteria-intro-icon,
.criteria-intro.collapsed .criteria-intro-content p,
.criteria-intro.collapsed .criteria-intro-list {
    display: none;
}

.criteria-intro.collapsed {
    padding: 12px 40px 12px 20px;
    gap: 0;
}

.criteria-intro.collapsed .criteria-intro-content h3 {
    margin: 0;
    font-size: 14px;
    color: var(--ds-blue-600);
    cursor: pointer;
}

.criteria-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500, #3b82f6);
    margin-top: 2px;
}

.criteria-intro-content h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.criteria-intro-content p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 13px;
}

.criteria-intro-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.criteria-intro-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.criteria-intro-list li svg {
    flex-shrink: 0;
    color: var(--ds-blue-400);
}

.criteria-intro-list li strong {
    color: var(--text-primary);
}

/* List Container */
.evaluators-list-container {
    max-height: 560px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}

.evaluators-list {
    display: flex;
    flex-direction: column;
}

.evaluators-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--text-tertiary);
}


/* ============================================================================
   CATEGORY SECTIONS - Color Coded
   ============================================================================ */

.evaluator-category {
    border-bottom: 1px solid var(--border);
}

.evaluator-category:last-child {
    border-bottom: none;
}

/* Empty Category State */
.evaluator-category-empty {
    opacity: 0.7;
}

.evaluator-category-empty .evaluator-category-header {
    cursor: default;
}

.evaluator-category-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 20px;
    color: var(--text-tertiary);
    font-size: var(--text-small);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    margin: 12px 16px 16px;
    background: var(--ds-gray-50);
}

.evaluator-category-empty-state svg {
    opacity: 0.5;
}

/* Category Header - Enhanced with Color Coding */
.evaluator-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--ds-gray-50);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    border-left: 4px solid transparent;
}

.evaluator-category-header:hover {
    background: var(--ds-gray-100);
}

/* Category Color Variants */
.evaluator-category[data-category="safety"] .evaluator-category-header {
    border-left-color: var(--cat-safety-accent);
    background: var(--cat-safety-bg);
}
.evaluator-category[data-category="safety"] .evaluator-category-header:hover {
    background: #fee2e2;
}

.evaluator-category[data-category="compliance"] .evaluator-category-header {
    border-left-color: var(--cat-compliance-accent);
    background: var(--cat-compliance-bg);
}
.evaluator-category[data-category="compliance"] .evaluator-category-header:hover {
    background: #fef3c7;
}

.evaluator-category[data-category="quality"] .evaluator-category-header {
    border-left-color: var(--cat-quality-accent);
    background: var(--cat-quality-bg);
}
.evaluator-category[data-category="quality"] .evaluator-category-header:hover {
    background: #dbeafe;
}

.evaluator-category[data-category="experience"] .evaluator-category-header {
    border-left-color: var(--cat-experience-accent);
    background: var(--cat-experience-bg);
}
.evaluator-category[data-category="experience"] .evaluator-category-header:hover {
    background: #ede9fe;
}

.evaluator-category[data-category="meta"] .evaluator-category-header {
    border-left-color: var(--cat-meta-accent);
    background: var(--cat-meta-bg);
}
.evaluator-category[data-category="meta"] .evaluator-category-header:hover {
    background: #f1f5f9;
}

.evaluator-category[data-category="custom"] .evaluator-category-header {
    border-left-color: var(--cat-custom-accent);
    background: var(--cat-custom-bg);
}
.evaluator-category[data-category="custom"] .evaluator-category-header:hover {
    background: #ccfbf1;
}

/* Category Icon */
.evaluator-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.evaluator-category[data-category="safety"] .evaluator-category-icon {
    background: var(--cat-safety-icon-bg);
    color: var(--cat-safety-accent);
}

.evaluator-category[data-category="compliance"] .evaluator-category-icon {
    background: var(--cat-compliance-icon-bg);
    color: var(--cat-compliance-accent);
}

.evaluator-category[data-category="quality"] .evaluator-category-icon {
    background: var(--cat-quality-icon-bg);
    color: var(--cat-quality-accent);
}

.evaluator-category[data-category="experience"] .evaluator-category-icon {
    background: var(--cat-experience-icon-bg);
    color: var(--cat-experience-accent);
}

.evaluator-category[data-category="meta"] .evaluator-category-icon {
    background: var(--cat-meta-icon-bg);
    color: var(--cat-meta-accent);
}

.evaluator-category[data-category="custom"] .evaluator-category-icon {
    background: var(--cat-custom-icon-bg);
    color: var(--cat-custom-accent);
}

/* Category Title Section */
.evaluator-category-info {
    flex: 1;
    min-width: 0;
}

.evaluator-category-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.evaluator-category-subtitle {
    font-size: var(--text-caption);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Category Count Badge */
.evaluator-category-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-caption);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

.evaluator-category-count .count-enabled {
    font-weight: 600;
    color: var(--text-primary);
}

/* Category Toggle Actions */
.evaluator-category-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-toggle-all {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.4;
}

.evaluator-category-header:hover .category-toggle-all {
    opacity: 1;
}

@media (hover: none) {
    .category-toggle-all {
        opacity: 1;
    }
}

.category-toggle-all:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
    border-color: var(--ds-gray-300);
}

/* Collapse/Expand Toggle */
.evaluator-category-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.evaluator-category-header:hover .evaluator-category-toggle {
    background: rgba(0, 0, 0, 0.06);
}

.evaluator-category.collapsed .evaluator-category-toggle {
    transform: rotate(-90deg);
}

.evaluator-category-items {
    animation: slideDown 0.2s ease;
}

.evaluator-category.collapsed .evaluator-category-items {
    display: none;
}

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

/* ============================================================================
   EVALUATOR ITEM CARDS - Enhanced Design
   ============================================================================ */

.evaluator-category-items {
    background: #fff;
}

.evaluator-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.15s ease;
    position: relative;
}

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

/* Delete slide-out animation */
.evaluator-item.removing {
    animation: itemSlideOut 0.25s ease forwards;
    pointer-events: none;
}

@keyframes itemSlideOut {
    to { opacity: 0; transform: translateX(-20px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* Save flash animation for buttons */
.btn.save-flash {
    background: var(--ds-green-500, #22c55e) !important;
    border-color: var(--ds-green-500, #22c55e) !important;
    color: #fff !important;
    transition: all 0.15s ease;
}

/* Category Color Indicator Bar */
.evaluator-color-bar {
    width: 4px;
    flex-shrink: 0;
    transition: width 0.15s ease;
}

.evaluator-category[data-category="safety"] .evaluator-color-bar {
    background: var(--cat-safety-accent);
}
.evaluator-category[data-category="compliance"] .evaluator-color-bar {
    background: var(--cat-compliance-accent);
}
.evaluator-category[data-category="quality"] .evaluator-color-bar {
    background: var(--cat-quality-accent);
}
.evaluator-category[data-category="experience"] .evaluator-color-bar {
    background: var(--cat-experience-accent);
}
.evaluator-category[data-category="meta"] .evaluator-color-bar {
    background: var(--cat-meta-accent);
}
.evaluator-category[data-category="custom"] .evaluator-color-bar {
    background: var(--cat-custom-accent);
}

.evaluator-item.disabled .evaluator-color-bar {
    background: var(--ds-gray-300) !important;
}

/* Item Content Wrapper */
.evaluator-item-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 14px 16px;
    min-width: 0;
}

.evaluator-item:hover {
    background: var(--ds-gray-50);
}

.evaluator-item:focus {
    outline: none;
    background: var(--ds-blue-50);
    box-shadow: inset 0 0 0 2px var(--ds-blue-200);
}

.evaluator-item:focus .evaluator-color-bar {
    width: 6px;
}

.evaluator-item:hover .evaluator-color-bar {
    width: 6px;
}

.evaluator-item.dragging {
    opacity: 0.5;
    background: var(--ds-blue-50);
}

.evaluator-item.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--ds-blue-500);
}

.evaluator-item.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--ds-blue-500);
}

.evaluator-item.disabled {
    background: var(--ds-gray-50);
}

.evaluator-item.disabled .evaluator-info {
    opacity: 0.5;
}

/* Drag Handle */
.evaluator-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--text-tertiary);
    padding: 4px;
    opacity: 0.35;
    transition: opacity 0.15s ease;
    font-size: 14px;
    flex-shrink: 0;
}

.evaluator-item:hover .evaluator-drag-handle {
    opacity: 0.6;
}

.evaluator-item:hover .evaluator-drag-handle:hover {
    opacity: 1;
}

.evaluator-drag-handle:active {
    cursor: grabbing;
}

/* Info Section */
.evaluator-info {
    flex: 1;
    min-width: 0;
}

.evaluator-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Rubric Completeness Indicator */
.evaluator-rubric-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: help;
}

.evaluator-rubric-dot.complete {
    background: var(--ds-green-500, #22c55e);
}

.evaluator-rubric-dot.partial {
    background: var(--ds-amber-400, #fbbf24);
}

.evaluator-rubric-dot.empty {
    background: var(--ds-red-400, #f87171);
}

.evaluator-item.disabled .evaluator-rubric-dot {
    opacity: 0.4;
}

.evaluator-description {
    font-size: var(--text-caption);
    color: var(--text-secondary);
    display: block;
    margin-top: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badges */
.evaluator-custom-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--cat-custom-bg);
    color: var(--cat-custom-accent);
    border: 1px solid var(--cat-custom-border);
    border-radius: 4px;
    text-transform: uppercase;
}

.evaluator-custom-badge svg {
    flex-shrink: 0;
}

/* Scope badges */
.evaluator-scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-xs, 3px);
    cursor: help;
    white-space: nowrap;
}

.evaluator-scope-badge.global {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    border: 1px solid var(--ds-green-200);
    padding: 3px 5px;
}

.evaluator-scope-badge.global svg {
    display: block;
}

.evaluator-scope-badge.protocol {
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
    border: 1px solid var(--ds-blue-200);
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

.scope-extra-count {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 2px;
}

.evaluator-builtin-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    background: var(--ds-gray-100);
    color: var(--text-tertiary);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Actions Section */
.evaluator-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Toggle Switch - Enhanced */
.evaluator-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 24px;
    min-height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.evaluator-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.evaluator-toggle .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 44px;
    height: 24px;
    background-color: #d1d5db;
    transition: all 0.2s ease;
    border-radius: 24px;
}

.evaluator-toggle .toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: white;
    transition: all 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.evaluator-toggle input:checked + .toggle-slider {
    background-color: #10b981;
}

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

/* Toggle pulse animation */
.evaluator-toggle.pulse .toggle-slider {
    animation: togglePulse 0.3s ease;
}

@keyframes togglePulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Action Buttons */
.evaluator-edit-btn,
.evaluator-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.4;
}

.evaluator-item:hover .evaluator-edit-btn,
.evaluator-item:hover .evaluator-delete-btn {
    opacity: 1;
}

.evaluator-edit-btn:hover {
    background: var(--ds-blue-50);
    border-color: var(--ds-blue-200);
    color: var(--ds-blue-600);
}

.evaluator-delete-btn:hover {
    background: var(--ds-red-100);
    border-color: var(--ds-red-200);
    color: var(--ds-red-600);
}

@media (hover: none) {
    .evaluator-edit-btn,
    .evaluator-delete-btn,
    .evaluator-preview-toggle {
        opacity: 1;
    }
    .evaluator-drag-handle {
        opacity: 0.6;
    }
}

/* Empty State */
.evaluators-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
}

.evaluators-empty svg {
    margin-bottom: 12px;
    opacity: 0.5;
}

.evaluators-empty p {
    margin: 0;
    font-size: var(--text-body);
}

.evaluators-empty .hint {
    font-size: var(--text-caption);
    margin-top: 4px;
}

/* Search No Results */
.evaluators-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.evaluators-no-results svg {
    margin-bottom: 8px;
    color: var(--text-tertiary);
}

/* Generic Icon Button */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
}

.btn-icon.danger:hover {
    background: var(--ds-red-50);
    border-color: var(--ds-red-200);
    color: var(--ds-red-700);
}

/* ============================================================================
   EVALUATOR EDIT MODAL
   ============================================================================ */

.evaluator-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

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

.evaluator-modal {
    width: 700px;
    max-width: 92vw;
    max-height: 85vh;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.evaluator-modal-overlay.open .evaluator-modal {
    transform: scale(1);
}

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

.evaluator-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.evaluator-modal-header .modal-title h3 {
    margin: 0;
    font-size: var(--text-heading);
    font-weight: 600;
}

.evaluator-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--ds-gray-50);
}

.eval-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.eval-tab:hover {
    color: var(--text-primary);
    background: var(--ds-gray-100);
}

.eval-tab.active {
    color: var(--ds-blue-700);
    border-bottom-color: var(--ds-blue-600);
    background: #fff;
}

/* Tab completion dots */
.eval-tab::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.eval-tab[data-completion="complete"]::after {
    background: var(--ds-green-500, #22c55e);
    opacity: 1;
}

.eval-tab[data-completion="partial"]::after {
    background: var(--ds-amber-400, #fbbf24);
    opacity: 1;
}

/* Unsaved changes indicator on Save button */
.btn-save-evaluator.has-changes,
#btn-save-evaluator.has-changes {
    position: relative;
}

#btn-save-evaluator.has-changes::before {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-amber-400, #fbbf24);
    border: 2px solid #fff;
}

.evaluator-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.eval-tab-panel {
    display: none;
}

.eval-tab-panel.active {
    display: block;
}

/* General tab visual sections */
.eval-section {
    padding: 14px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.eval-section.identity {
    background: var(--ds-gray-50);
    border: 1px solid var(--border-subtle, var(--border));
}

.eval-section.classification {
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-100, #dbeafe);
}

.eval-section-header {
    margin-bottom: 12px;
}

.eval-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.eval-section .eval-form-group:last-child {
    margin-bottom: 0;
}

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

.eval-form-group:last-child {
    margin-bottom: 0;
}

.tab-help-text {
    font-size: var(--text-small);
    color: var(--text-secondary);
    background: var(--ds-gray-50);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    line-height: 1.5;
    border-left: 3px solid var(--ds-blue-400);
}

.eval-form-group label {
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    cursor: help;
}

.form-hint {
    display: block;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Tag Input Component */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    min-height: 38px;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tag-input-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.tag-input-tags {
    display: contents;
}

.tag-input-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--ds-blue-700, #1d4ed8);
    white-space: nowrap;
    animation: tagIn 0.15s ease;
}

.tag-input-tag .tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--ds-blue-400);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: all 0.1s ease;
}

.tag-input-tag .tag-remove:hover {
    background: var(--ds-blue-200);
    color: var(--ds-blue-700);
}

.tag-input-field {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: var(--font-mono);
    padding: 2px 4px;
    background: transparent;
}

.tag-input-field::placeholder {
    color: var(--text-tertiary);
    font-family: var(--font-primary);
}

/* Flatpickr custom styling */
.flatpickr-input {
    cursor: pointer;
}

.flatpickr-input.active + .flatpickr-input {
    border-color: var(--ds-blue-500);
}

.flatpickr-calendar {
    font-family: var(--font-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--ds-blue-500);
    border-color: var(--ds-blue-500);
}

.flatpickr-day:hover {
    background: var(--bg-tertiary);
}

/* Promoted magic wand for new evaluators */
.eval-magic-wand.promoted {
    order: -1;
    margin-bottom: 20px;
}

.eval-magic-wand.promoted .magic-wand-card {
    border: 2px solid var(--ds-blue-300);
    background: linear-gradient(135deg, var(--ds-blue-50) 0%, #eef2ff 100%);
    padding: 16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.eval-magic-wand.promoted .magic-wand-title span {
    font-size: 14px;
}

.eval-magic-wand.promoted .magic-wand-label {
    display: none;
}

/* Compact magic wand for existing evaluators */
.eval-magic-wand.compact .magic-wand-card {
    border: 1px solid var(--border);
    background: transparent;
    padding: 8px 12px;
}

.eval-magic-wand.compact .magic-wand-text,
.eval-magic-wand.compact .form-hint {
    display: none;
}

.eval-magic-wand.compact .magic-wand-header {
    margin-bottom: 0;
}

.eval-magic-wand.compact .magic-wand-title span {
    font-size: 12px;
}

.eval-magic-wand.compact .magic-wand-title span::after {
    content: ' — regenerate rubric and fields';
    font-weight: 400;
    color: var(--text-tertiary);
}

.eval-magic-wand.compact .magic-wand-badge {
    display: none;
}

.eval-magic-wand.compact textarea {
    display: none;
}

.eval-magic-wand.compact .magic-wand-actions {
    margin-top: 0;
}

.eval-magic-wand.compact .magic-wand-label {
    display: none;
}

/* Expand compact on click */
.eval-magic-wand.compact.expanded .magic-wand-text,
.eval-magic-wand.compact.expanded textarea {
    display: block;
}

.eval-magic-wand.compact.expanded .magic-wand-header {
    margin-bottom: 6px;
}

.eval-magic-wand.compact.expanded .magic-wand-card {
    background: var(--ds-blue-50);
    border-color: var(--ds-blue-200);
}

.eval-magic-wand .magic-wand-card {
    border: 1px dashed var(--ds-blue-200);
    background: var(--ds-blue-50);
    padding: 12px;
    border-radius: var(--radius-md);
}

.magic-wand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.magic-wand-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ds-blue-700);
    font-size: var(--text-small);
}

.magic-wand-badge {
    background: var(--ds-blue-600);
    color: #fff;
    font-size: var(--text-caption);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.magic-wand-text {
    margin: 0 0 8px 0;
    color: var(--text-secondary);
    font-size: var(--text-caption);
    line-height: 1.4;
}

.magic-wand-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.magic-wand-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.magic-wand-status {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.magic-wand-status.error {
    color: var(--ds-red-600);
}

.magic-wand-status.success {
    color: var(--ds-green-600);
}

/* Rubric Form Group - Color Coded Containers */
.rubric-form-group {
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.15s ease;
}

.rubric-form-group:hover {
    box-shadow: var(--shadow-sm);
}

.rubric-form-group:last-child {
    margin-bottom: 0;
}

.rubric-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-weight: 500;
    font-size: var(--text-small);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rubric-header::-webkit-details-marker,
.rubric-header::marker {
    display: none;
    content: '';
}

/* Chevron indicator for collapsible rubric groups */
.rubric-header::after {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.35;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.2s ease, opacity 0.15s ease;
    transform: rotate(-90deg);
}

.rubric-form-group[open] > .rubric-header::after {
    transform: rotate(0deg);
}

.rubric-header:hover::after {
    opacity: 0.7;
}

/* Preview text shown when collapsed */
.rubric-preview-text {
    flex: 1;
    font-weight: 400;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.rubric-preview-text:empty {
    display: none;
}

.rubric-form-group[open] .rubric-preview-text {
    display: none;
}

/* Remove border-bottom on collapsed headers */
.rubric-form-group:not([open]) .rubric-header {
    border-bottom: none !important;
}

.rubric-header .rubric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

.rubric-header .rubric-title {
    flex-shrink: 0;
}

.rubric-header .rubric-score {
    font-size: var(--text-caption);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Pass - Green */
.rubric-form-group.pass .rubric-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-bottom: 1px solid #a7f3d0;
}
.rubric-form-group.pass .rubric-icon {
    background: #10b981;
    color: white;
}
.rubric-form-group.pass .rubric-score {
    background: #d1fae5;
    color: #047857;
}
.rubric-form-group.pass .rubric-textarea:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Minor - Yellow/Amber */
.rubric-form-group.minor .rubric-header {
    background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
    border-bottom: 1px solid #fde047;
}
.rubric-form-group.minor .rubric-icon {
    background: #eab308;
    color: white;
}
.rubric-form-group.minor .rubric-score {
    background: #fef08a;
    color: #a16207;
}
.rubric-form-group.minor .rubric-textarea:focus {
    border-color: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

/* Major - Orange */
.rubric-form-group.major .rubric-header {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border-bottom: 1px solid #fdba74;
}
.rubric-form-group.major .rubric-icon {
    background: #f97316;
    color: white;
}
.rubric-form-group.major .rubric-score {
    background: #fed7aa;
    color: #c2410c;
}
.rubric-form-group.major .rubric-textarea:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* Critical - Red */
.rubric-form-group.critical .rubric-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border-bottom: 1px solid #fca5a5;
}
.rubric-form-group.critical .rubric-icon {
    background: #dc2626;
    color: white;
}
.rubric-form-group.critical .rubric-score {
    background: #fecaca;
    color: #b91c1c;
}
.rubric-form-group.critical .rubric-textarea:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Unknown - Gray */
.rubric-form-group.unknown .rubric-header {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    border-bottom: 1px solid #d1d5db;
}
.rubric-form-group.unknown .rubric-icon {
    background: #6b7280;
    color: white;
}
.rubric-form-group.unknown .rubric-score {
    background: #e5e7eb;
    color: #4b5563;
}
.rubric-form-group.unknown .rubric-textarea:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15);
}

/* Not Applicable - Slate */
.rubric-form-group.na .rubric-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #cbd5e1;
}
.rubric-form-group.na .rubric-icon {
    background: #94a3b8;
    color: white;
}
.rubric-form-group.na .rubric-score {
    background: #e2e8f0;
    color: #475569;
}
.rubric-form-group.na .rubric-textarea:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.rubric-body {
    padding: 10px 12px;
    background: #fff;
    animation: rubricBodyReveal 0.15s ease;
}

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

.rubric-textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-small);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rubric-textarea:focus {
    outline: none;
}

.rubric-hint {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-top: 6px;
}

/* Legacy support for non-redesigned labels */
.rubric-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rubric-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rubric-label.pass::before { background: #10b981; }
.rubric-label.minor::before { background: #eab308; }
.rubric-label.major::before { background: #f97316; }
.rubric-label.critical::before { background: #dc2626; }
.rubric-label.unknown::before { background: #6b7280; }

/* Output Fields Tab */
.fields-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    background: var(--ds-blue-50);
    border-radius: var(--radius-md);
    font-size: var(--text-caption);
    color: var(--ds-blue-700);
    margin-bottom: 16px;
}

.fields-info svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.output-fields-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.output-field-item {
    padding: 10px 12px;
    background: var(--ds-gray-50);
    border-radius: var(--radius-md);
}

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

.output-field-name {
    flex: 1;
    min-width: 100px;
}

.output-field-type {
    width: 100px;
}

.output-field-required {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-caption);
    color: var(--text-secondary);
    white-space: nowrap;
}

.output-field-required input {
    margin: 0;
}

.output-field-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.output-field-remove:hover {
    background: var(--ds-red-50);
    color: var(--ds-red-600);
}

.output-field-enum-values {
    margin-top: 8px;
}

.output-field-enum-input {
    width: 100%;
}

.output-field-item input,
.output-field-item select {
    font-size: var(--text-caption);
    padding: 6px 8px;
}

.evaluator-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
}

.footer-left,
.footer-right {
    display: flex;
    gap: 8px;
}

/* Evaluator Playground / Test Mode */
.playground-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
    min-height: 400px;
}

.playground-input {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.playground-input .playground-label {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.playground-input textarea {
    flex: 1;
    min-height: 200px;
    resize: none;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: 1.6;
}

.playground-input .btn-run {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
}

.playground-results {
    display: flex;
    flex-direction: column;
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.playground-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--ds-gray-100);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-secondary);
}

.playground-results-body {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
}

.playground-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

.playground-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.playground-empty .empty-title {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.playground-empty .empty-hint {
    font-size: var(--text-small);
}

/* Playground Loading State */
.playground-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    gap: 16px;
}

.playground-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ds-gray-200);
    border-top-color: var(--ds-blue-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.playground-loading .loading-text {
    font-size: var(--text-small);
    color: var(--text-secondary);
}

/* Playground Result Card */
.playground-result {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.playground-result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.playground-result-score {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    font-size: var(--text-heading);
    font-weight: 700;
}

.playground-result-score.pass {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}

.playground-result-score.minor {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
}

.playground-result-score.major {
    background: var(--ds-orange-100);
    color: var(--ds-orange-700);
}

.playground-result-score.critical {
    background: var(--ds-red-100);
    color: var(--ds-red-700);
}
.playground-result-score.na {
    background: #f1f5f9;
    color: #64748b;
}

.playground-result-info {
    flex: 1;
}

.playground-result-rating {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.playground-result-time {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.playground-result-body {
    padding: 14px;
}

.playground-result-section {
    margin-bottom: 12px;
}

.playground-result-section:last-child {
    margin-bottom: 0;
}

.playground-result-section-title {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.playground-result-section p {
    margin: 0;
    font-size: var(--text-small);
    color: var(--text-primary);
    line-height: 1.5;
}

.playground-results-actions {
    display: flex;
    gap: 6px;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 11px;
    gap: 4px;
}

blockquote.playground-result-evidence {
    margin: 0 0 8px 0;
    padding: 10px 12px 10px 14px;
    border-left: 3px solid var(--ds-blue-400, #60a5fa);
    background: var(--ds-blue-50, #eff6ff);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-caption);
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
}

blockquote.playground-result-evidence:last-child {
    margin-bottom: 0;
}

.playground-result-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.playground-result-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--text-caption);
}

.playground-result-field .field-key {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.playground-result-field .field-key::after {
    content: ':';
}

.playground-result-field .field-value {
    color: var(--text-primary);
    word-break: break-word;
}

/* Playground Error State */
.playground-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    text-align: center;
}

.playground-error svg {
    width: 48px;
    height: 48px;
    color: var(--ds-red-500);
    margin-bottom: 12px;
}

.playground-error .error-title {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--ds-red-700);
    margin-bottom: 4px;
}

.playground-error .error-message {
    font-size: var(--text-small);
    color: var(--text-secondary);
    max-width: 300px;
}

/* ============================================================================
   PREVIEW MODAL
   ============================================================================ */

.preview-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

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

.preview-modal {
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.preview-modal-overlay.open .preview-modal {
    transform: scale(1);
}

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

.preview-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-modal-header .modal-title h3 {
    margin: 0;
    font-size: var(--text-heading);
    font-weight: 600;
}

.preview-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--ds-gray-50);
}

.preview-tab {
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.preview-tab:hover {
    color: var(--text-primary);
    background: var(--ds-gray-100);
}

.preview-tab.active {
    color: var(--ds-blue-700);
    border-bottom-color: var(--ds-blue-600);
    background: #fff;
}

/* Preview Search Bar */
.preview-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.preview-search-bar svg {
    color: #64748b;
    flex-shrink: 0;
}

.preview-search-bar input {
    flex: 1;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 12px;
    color: #e2e8f0;
    font-family: inherit;
    outline: none;
}

.preview-search-bar input:focus {
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.preview-search-bar input::placeholder {
    color: #475569;
}

.preview-search-count {
    font-size: 11px;
    color: #94a3b8;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.preview-search-count:empty {
    display: none;
}

.preview-search-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid #334155;
    border-radius: var(--radius-sm);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.1s ease;
}

.preview-search-nav:hover {
    background: #334155;
    color: #e2e8f0;
}

.preview-code mark {
    background: rgba(250, 204, 21, 0.35);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.preview-code mark.current {
    background: rgba(250, 204, 21, 0.7);
    outline: 1px solid #facc15;
}

.preview-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    background: #0f172a;
    display: flex;
}

.preview-toc {
    width: 200px;
    flex-shrink: 0;
    background: #1e293b;
    border-right: 1px solid #334155;
    overflow-y: auto;
    padding: 12px 0;
    font-size: 11px;
}

.preview-toc:empty {
    display: none;
}

.preview-toc-category {
    padding: 6px 12px 4px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    margin-top: 8px;
}

.preview-toc-category:first-child {
    margin-top: 0;
}

.preview-toc-item {
    display: block;
    padding: 4px 12px 4px 20px;
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 11px;
    font-family: inherit;
}

.preview-toc-item:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.preview-modal-body .preview-code {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

.preview-code {
    margin: 0;
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #e2e8f0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Syntax Highlighting for Preview */
.preview-code .section-header {
    color: #38bdf8;
    font-weight: 600;
}

.preview-code .keyword {
    color: #c084fc;
}

.preview-code .string {
    color: #4ade80;
}

.preview-code .number {
    color: #fb923c;
}

.preview-code .comment {
    color: #64748b;
    font-style: italic;
}

.preview-code .bracket {
    color: #fbbf24;
}

.preview-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
    gap: 16px;
}

.preview-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-small);
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.preview-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-stat-item svg {
    opacity: 0.6;
}

.preview-stat-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Token estimate bar */
.token-estimate {
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-bar {
    width: 80px;
    height: 6px;
    background: var(--ds-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.token-bar-fill {
    height: 100%;
    background: var(--ds-blue-500);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.token-bar-fill.warning {
    background: var(--ds-amber-500);
}

.token-bar-fill.danger {
    background: var(--ds-red-500);
}

.preview-stats-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
}

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

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--ds-blue-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================================================
   EVALUATOR QUICK PREVIEW (Expandable Panel)
   ============================================================================ */

.evaluator-preview-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    opacity: 0.4;
}

.evaluator-item:hover .evaluator-preview-toggle {
    opacity: 1;
}

.evaluator-preview-toggle:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
}

.evaluator-preview-toggle.expanded {
    opacity: 1;
    color: var(--ds-blue-600);
    background: var(--ds-blue-50);
}

.evaluator-preview-toggle svg {
    transition: transform 0.2s ease;
}

.evaluator-preview-toggle.expanded svg {
    transform: rotate(180deg);
}

/* Quick Preview Panel */
.evaluator-quick-preview {
    display: none;
    padding: 0 16px 16px 60px;
    background: var(--ds-gray-50);
    border-top: 1px solid var(--border-subtle);
    animation: slideDown 0.2s ease;
}

.evaluator-item.preview-open .evaluator-quick-preview {
    display: block;
}

.quick-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.quick-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

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

.quick-preview-item .rating-dot.pass { background: #10b981; }
.quick-preview-item .rating-dot.minor { background: #eab308; }
.quick-preview-item .rating-dot.major { background: #f97316; }
.quick-preview-item .rating-dot.critical { background: #dc2626; }
.quick-preview-item .rating-dot.unknown { background: #6b7280; }
.quick-preview-item .rating-dot.na { background: #94a3b8; }

.quick-preview-item .rating-content {
    flex: 1;
    min-width: 0;
}

.quick-preview-item .rating-label {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.quick-preview-item .rating-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quick Preview Summary Header */
.quick-preview-summary {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 12px 0 0 0;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Quick Preview Empty Rubric State */
.quick-preview-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-top: 8px;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: var(--text-caption);
}

.quick-preview-empty svg {
    flex-shrink: 0;
    opacity: 0.5;
}

/* ============================================================================
   SKELETON LOADERS
   ============================================================================ */

.skeleton {
    background: linear-gradient(90deg, var(--ds-gray-100) 25%, var(--ds-gray-200) 50%, var(--ds-gray-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Evaluator Item Skeleton */
.evaluator-item-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.evaluator-item-skeleton .skeleton-bar {
    width: 4px;
    height: 48px;
}

.evaluator-item-skeleton .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.evaluator-item-skeleton .skeleton-title {
    height: 14px;
    width: 60%;
}

.evaluator-item-skeleton .skeleton-desc {
    height: 12px;
    width: 80%;
}

.evaluator-item-skeleton .skeleton-toggle {
    width: 44px;
    height: 24px;
    border-radius: 24px;
}

/* Category Skeleton */
.evaluator-category-skeleton {
    border-bottom: 1px solid var(--border);
}

.evaluator-category-skeleton .skeleton-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--ds-gray-50);
}

.evaluator-category-skeleton .skeleton-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.evaluator-category-skeleton .skeleton-title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evaluator-category-skeleton .skeleton-cat-title {
    height: 14px;
    width: 120px;
}

.evaluator-category-skeleton .skeleton-cat-subtitle {
    height: 10px;
    width: 180px;
}

.evaluator-category-skeleton .skeleton-count {
    width: 40px;
    height: 22px;
    border-radius: 11px;
}

/* ============================================================================
   BULK OPERATIONS
   ============================================================================ */

/* Bulk Mode Header */
.evaluators-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--ds-blue-50) 0%, #e0f2fe 100%);
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    animation: slideDown 0.2s ease;
}

.evaluators-bulk-bar.visible {
    display: flex;
}

.bulk-bar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bulk-bar-count {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ds-blue-700);
}

.bulk-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-bar-actions .btn {
    height: 32px;
    padding: 0 12px;
    font-size: var(--text-caption);
}

/* Bulk Checkbox in Items */
.evaluator-bulk-checkbox {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.bulk-mode .evaluator-bulk-checkbox {
    display: flex;
}

.evaluator-bulk-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--ds-blue-600);
}

/* Bulk Select All in Category Header */
.category-bulk-checkbox {
    display: none;
    align-items: center;
    margin-right: 8px;
}

.bulk-mode .category-bulk-checkbox {
    display: flex;
}

.category-bulk-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--ds-blue-600);
}

/* Enter Bulk Mode Button */
.btn-bulk-mode {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-bulk-mode:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
    border-color: var(--ds-gray-300);
}

.btn-bulk-mode.active {
    background: var(--ds-blue-50);
    color: var(--ds-blue-700);
    border-color: var(--ds-blue-300);
}

/* Hide certain elements in bulk mode */
.bulk-mode .evaluator-drag-handle {
    display: none;
}

.bulk-mode .evaluator-preview-toggle {
    display: none;
}

/* ========================================
   CATEGORIES MODAL
   ======================================== */

.categories-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

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

.categories-modal {
    width: 500px;
    max-width: 95vw;
    max-height: 80vh;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.categories-modal-overlay.open .categories-modal {
    transform: scale(1);
}

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

.categories-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.categories-modal-header .modal-title h3 {
    margin: 0;
    font-size: var(--text-heading);
    font-weight: 600;
}

.categories-modal-help {
    padding: 12px 20px;
    font-size: var(--text-small);
    color: var(--text-secondary);
    background: var(--ds-blue-50);
    border-bottom: 1px solid var(--ds-blue-200);
}

.categories-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

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

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: all 0.15s ease;
}

.category-item:hover {
    border-color: var(--ds-blue-300);
    background: var(--ds-blue-50);
}

.category-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.category-item.drag-over {
    border-color: var(--ds-blue-500);
    background: var(--ds-blue-100);
}

.category-drag-handle {
    color: var(--text-tertiary);
    cursor: grab;
    font-size: 16px;
}

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

.category-name {
    font-weight: 500;
    color: var(--text-primary);
}

.category-key {
    font-size: var(--text-small);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.category-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--ds-gray-200);
    color: var(--text-secondary);
    border-radius: 4px;
    text-transform: uppercase;
}

.category-actions {
    display: flex;
    gap: 6px;
}

.category-edit-btn,
.category-delete-btn {
    padding: 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-edit-btn:hover {
    background: var(--ds-gray-100);
    color: var(--ds-blue-600);
}

.category-delete-btn:hover {
    background: var(--ds-red-50);
    color: var(--ds-red-600);
}

.categories-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
}

/* Category Edit Modal */
.category-edit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.category-edit-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.category-edit-modal {
    width: 400px;
    max-width: 95vw;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.category-edit-modal-overlay.open .category-edit-modal {
    transform: scale(1);
}

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

.category-edit-modal-header h3 {
    margin: 0;
    font-size: var(--text-heading);
    font-weight: 600;
}

.category-edit-modal-body {
    padding: 20px;
}

.category-edit-modal-body .form-group {
    margin-bottom: 16px;
}

.category-edit-modal-body .form-group:last-child {
    margin-bottom: 0;
}

.category-edit-modal-body label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.category-edit-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
}

.category-edit-modal-footer .footer-right {
    display: flex;
    gap: 8px;
}

/* ========================================
   EVALUATORS SUB-NAVIGATION
   ======================================== */

.evaluators-subnav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: var(--ds-gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.evaluators-subnav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.evaluators-subnav-tab:hover {
    background: var(--ds-gray-50);
    color: var(--text-primary);
}

.evaluators-subnav-tab.active {
    background: #fff;
    color: var(--primary);
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.evaluators-subnav-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.evaluators-subnav-tab.active svg {
    opacity: 1;
    color: var(--primary);
}

/* Primary tab (Criteria) is bolder */
.evaluators-subnav-tab.primary {
    font-weight: 600;
}

.evaluators-subnav-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Status badges on subtabs */
.subnav-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    line-height: 1.4;
}

.subnav-badge:empty {
    display: none;
}

.subnav-badge[data-status="count"] {
    background: var(--ds-gray-200);
    color: var(--text-secondary);
}

.subnav-badge[data-status="modified"] {
    background: var(--ds-amber-100, #fef3c7);
    color: var(--ds-amber-700, #a16207);
}

.evaluators-subnav-spacer {
    flex: 1;
}

.evaluators-subtab-content {
    display: none;
}

.evaluators-subtab-content.active {
    display: block;
    animation: subtabFadeIn 0.15s ease;
}

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

/* ========================================
   FRAMEWORK EDITOR
   ======================================== */

.framework-editor-container {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.framework-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--ds-gray-50);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.framework-editor-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.framework-char-count {
    font-family: var(--font-mono);
}

.framework-evaluator-count {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 2px 8px;
    background: var(--ds-gray-100);
    border-radius: var(--radius-full);
}

.framework-evaluator-count:empty {
    display: none;
}

.framework-placeholder-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    border-radius: var(--radius-full);
    font-weight: 500;
}

.framework-placeholder-status.error {
    background: #fee2e2;
    color: #dc2626;
}

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

.framework-editor-wrapper {
    position: relative;
    min-height: 400px;
}

.framework-editor-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    pointer-events: none;
    color: transparent;
}

.framework-editor {
    width: 100%;
    min-height: 400px;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    border: none;
    resize: vertical;
    background: transparent;
    position: relative;
    z-index: 1;
}

.framework-editor:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--primary-light);
}

/* Syntax highlighting for placeholders */
.framework-editor-highlight .placeholder {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.framework-editor-help {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ds-gray-50);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}

.framework-editor-help code {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}

.framework-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* ========================================
   SCORING SCALE
   ======================================== */

.scoring-scale-container {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.scoring-scale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--ds-gray-50);
    border-bottom: 1px solid var(--border);
}

.scoring-scale-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.scoring-scale-info strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* Visual Scale Bar */
.scoring-visual-bar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 16px 16px 12px;
}

.scoring-bar-segment {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.scoring-bar-fill {
    width: 100%;
    height: 28px;
    border-radius: var(--radius-sm);
    transition: opacity 0.15s ease, transform 0.15s ease;
    cursor: default;
}

.scoring-bar-segment:hover .scoring-bar-fill {
    opacity: 0.85;
    transform: scaleY(1.1);
}

.scoring-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.scoring-bar-score {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-tertiary);
}

.scoring-bar-segment.unknown .scoring-bar-fill {
    border: 2px dashed var(--border);
    background: transparent !important;
}

.scoring-levels-list {
    padding: 8px;
}

.scoring-level-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.scoring-level-item:hover {
    background: var(--ds-gray-50);
}

.scoring-level-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

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

.scoring-level-key {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.scoring-level-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.scoring-level-description {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.scoring-level-score {
    display: flex;
    align-items: center;
    gap: 4px;
}

.scoring-level-score input {
    width: 50px;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 14px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.scoring-level-score input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.scoring-level-score .score-null {
    padding: 6px 12px;
    background: var(--ds-gray-100);
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-style: italic;
}

.scoring-level-edit {
    display: flex;
    gap: 8px;
}

.scoring-level-edit input[type="text"] {
    width: 100px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.scoring-level-edit input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.scoring-scale-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ds-gray-50);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}

.scoring-scale-help svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.scoring-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* ========================================
   PROFILES – INTRO EXPLAINER
   ======================================== */

.profiles-intro {
    display: flex;
    gap: 16px;
    padding: 20px;
    padding-right: 40px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    position: relative;
    margin-bottom: 16px;
}

.profiles-intro-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ds-blue-400);
    cursor: pointer;
    transition: all 0.15s ease;
}

.profiles-intro-toggle:hover {
    background: var(--ds-blue-100);
    color: var(--ds-blue-600);
}

.profiles-intro-chevron {
    transition: transform 0.2s ease;
}

.profiles-intro.collapsed .profiles-intro-chevron {
    transform: rotate(-90deg);
}

.profiles-intro.collapsed .profiles-intro-icon,
.profiles-intro.collapsed .profiles-intro-content p,
.profiles-intro.collapsed .profiles-intro-columns {
    display: none;
}

.profiles-intro.collapsed {
    padding: 12px 40px 12px 20px;
    gap: 0;
}

.profiles-intro.collapsed .profiles-intro-content h3 {
    margin: 0;
    font-size: 14px;
    color: var(--ds-blue-600);
    cursor: pointer;
}

.profiles-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500, #3b82f6);
    margin-top: 2px;
}

.profiles-intro-content h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.profiles-intro-content p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 13px;
}

.profiles-intro-columns {
    display: flex;
    gap: 28px;
}

.profiles-intro-columns > div {
    flex: 1;
    min-width: 0;
}

.profiles-intro-saves-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.profiles-intro-saves-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profiles-intro-saves-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.profiles-intro-saves-list li svg {
    flex-shrink: 0;
    color: var(--ds-blue-500);
}

.profiles-intro-saves-list li strong {
    color: var(--text-primary);
}

.profiles-intro-steps {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.profiles-intro-steps li::marker {
    color: var(--ds-blue-500);
    font-weight: 600;
}

.profiles-intro-steps li strong {
    color: var(--text-primary);
}

/* ========================================
   PROFILES – CONTAINER
   ======================================== */

.profiles-container {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ========================================
   PROFILES – ACTIVE PROFILE BAR
   ======================================== */

.profiles-active-bar:empty {
    display: none;
}

.profiles-active-bar-inactive {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ds-gray-50);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}

.profiles-active-bar-inactive svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.profiles-active-bar-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ds-blue-50);
    border-bottom: 1px solid var(--ds-blue-200);
}

.profiles-active-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.profiles-active-bar-active-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.profiles-active-bar-active-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-blue-100);
    border-radius: var(--radius-md);
    color: var(--ds-blue-600);
    flex-shrink: 0;
}

.profiles-active-bar-active-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profiles-active-bar-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--ds-blue-500);
    color: #fff;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.profiles-active-bar-deactivate {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--ds-blue-300);
    border-radius: var(--radius-md);
    color: var(--ds-blue-700);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.profiles-active-bar-deactivate:hover {
    background: var(--ds-blue-100);
    border-color: var(--ds-blue-400);
}

/* ========================================
   PROFILES – HEADER (count + CTA)
   ======================================== */

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

.profiles-count {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========================================
   PROFILES – LIST
   ======================================== */

.profiles-list {
    padding: 8px;
    min-height: 80px;
}

/* ========================================
   PROFILES – EMPTY STATE
   ======================================== */

.profiles-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    color: var(--text-tertiary);
    text-align: center;
}

.profiles-empty-icon {
    margin-bottom: 16px;
    opacity: 0.3;
    color: var(--text-tertiary);
}

.profiles-empty h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 6px;
}

.profiles-empty p {
    font-size: 13px;
    color: var(--text-tertiary);
    max-width: 360px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.profiles-empty-what-saves {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.profiles-empty-save-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.profiles-empty-save-item svg {
    opacity: 0.45;
}

/* ========================================
   PROFILES – PROFILE CARD ITEMS
   ======================================== */

.profile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.profile-item:hover {
    background: var(--ds-gray-50);
}

.profile-item.removing {
    animation: itemSlideOut 0.25s ease forwards;
}

.profile-item.active {
    background: var(--ds-blue-50);
    border-color: var(--ds-blue-200);
}

.profile-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-gray-100);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.profile-item.active .profile-icon {
    background: var(--ds-blue-100);
    color: var(--ds-blue-600);
}

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

.profile-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-name .active-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--ds-blue-500);
    color: #fff;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.profile-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.profile-meta-sep {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.profile-category-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 2px;
}

.profile-category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.profile-category-dot[data-category="safety"] { background: var(--cat-safety-accent); }
.profile-category-dot[data-category="compliance"] { background: var(--cat-compliance-accent); }
.profile-category-dot[data-category="quality"] { background: var(--cat-quality-accent); }
.profile-category-dot[data-category="experience"] { background: var(--cat-experience-accent); }
.profile-category-dot[data-category="meta"] { background: var(--cat-meta-accent); }
.profile-category-dot[data-category="custom"] { background: var(--cat-custom-accent); }

/* Actions – always visible but subtle */
.profile-actions {
    display: flex;
    gap: 4px;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.profile-item:hover .profile-actions {
    opacity: 1;
}

@media (hover: none) {
    .profile-actions {
        opacity: 1;
    }
}

.profile-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-action-btn:hover {
    background: var(--ds-gray-200);
    color: var(--text-primary);
}

.profile-action-btn.activate {
    color: var(--ds-green-600);
}

.profile-action-btn.activate:hover {
    background: var(--ds-green-100);
}

.profile-action-btn.update {
    color: var(--ds-blue-600);
}

.profile-action-btn.update:hover {
    background: var(--ds-blue-100);
}

.profile-action-btn.duplicate {
    color: var(--text-tertiary);
}

.profile-action-btn.duplicate:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
}

.profile-action-btn.export {
    color: var(--text-tertiary);
}

.profile-action-btn.export:hover {
    background: var(--ds-gray-100);
    color: var(--text-primary);
}

.profile-action-btn.delete {
    color: var(--ds-red-500);
}

.profile-action-btn.delete:hover {
    background: var(--ds-red-100);
    color: var(--ds-red-600);
}

.profile-action-btn.set-default {
    color: var(--ds-amber-600);
}

.profile-action-btn.set-default:hover {
    background: var(--ds-amber-100);
}

/* ========================================
   PROFILES – DEFAULT BADGE
   ======================================== */

.profile-name .default-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--ds-blue-500);
    color: #fff;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.profiles-active-bar-hint {
    font-size: 12px;
    color: var(--ds-blue-600);
    opacity: 0.7;
}

/* ========================================
   PROFILES – BINDING CHIPS
   ======================================== */

.profile-bindings {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.binding-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    padding: 2px 7px;
    background: var(--ds-gray-100);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.binding-chip-none {
    font-style: italic;
    opacity: 0.6;
    border-style: dashed;
}

.binding-edit-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.binding-edit-btn:hover {
    opacity: 1;
    background: var(--ds-gray-100);
    color: var(--text-primary);
}

/* ========================================
   PROFILES – BINDING CONFLICT BANNER
   ======================================== */

.binding-conflict-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    background: var(--ds-amber-50);
    border-bottom: 1px solid var(--ds-amber-200);
    color: var(--ds-amber-700);
    font-size: 12px;
}

.binding-conflict-banner svg {
    flex-shrink: 0;
    color: var(--ds-amber-600);
    margin-top: 1px;
}

.binding-conflict-text strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.binding-conflict-item {
    color: var(--ds-amber-700);
    padding: 1px 0;
}

/* ========================================
   PROFILES – BINDING EDITOR MODAL
   ======================================== */

.binding-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.binding-editor-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.binding-editor-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 520px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

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

.binding-editor-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.binding-editor-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
}

.binding-editor-close:hover {
    background: var(--ds-gray-100);
}

.binding-editor-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.binding-editor-help {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.5;
}

.binding-rules-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.binding-rule-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ds-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.binding-rule-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.binding-rule-field label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.binding-rule-field select {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.binding-rule-field input {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.binding-rule-remove {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ds-red-500);
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
}

.binding-rule-remove:hover {
    background: var(--ds-red-100);
}

.binding-add-rule-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.binding-add-rule-btn:hover {
    border-color: var(--ds-blue-400);
    color: var(--ds-blue-600);
    background: var(--ds-blue-50);
}

.binding-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.binding-editor-footer .btn-secondary {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
}

.binding-editor-footer .btn-secondary:hover {
    background: var(--ds-gray-100);
}

.binding-editor-footer .btn-primary {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--ds-blue-500);
    border: 1px solid var(--ds-blue-600);
    border-radius: var(--radius-md);
    color: #fff;
    cursor: pointer;
}

.binding-editor-footer .btn-primary:hover {
    background: var(--ds-blue-600);
}

/* ========================================
   PROFILES – RESOLUTION MAP
   ======================================== */

.resolution-map-details {
    border-bottom: 1px solid var(--border);
}

.resolution-map-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    list-style: none;
}

.resolution-map-summary::-webkit-details-marker {
    display: none;
}

.resolution-map-summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--text-tertiary);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.resolution-map-details[open] > .resolution-map-summary::before {
    transform: rotate(90deg);
}

.resolution-map-summary:hover {
    background: var(--ds-gray-50);
    color: var(--text-primary);
}

.resolution-map-summary svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.resolution-map-content {
    padding: 0 16px 12px;
    animation: subtabFadeIn 0.15s ease;
}

.resolution-map-loading,
.resolution-map-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 12px 0;
}

.resolution-map-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.resolution-map-table th {
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}

.resolution-map-table td {
    padding: 7px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--ds-gray-100);
}

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

.resolution-map-table tr:hover td {
    background: var(--ds-gray-50);
}

.resolution-map-na {
    color: var(--text-tertiary);
}

.resolution-profile-tag {
    display: inline-block;
    padding: 1px 6px;
    background: var(--ds-blue-50);
    color: var(--ds-blue-700);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.resolution-match-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.resolution-match-badge.match-default {
    background: var(--ds-gray-100);
    color: var(--text-secondary);
}

.resolution-match-badge.match-client {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
}

.resolution-match-badge.match-protocol {
    background: var(--ds-indigo-100);
    color: var(--ds-indigo-700);
}

.resolution-match-badge.match-exact {
    background: var(--ds-green-100);
    color: var(--ds-green-700);
}

.resolution-group {
    margin-bottom: 12px;
}

.resolution-group:last-child {
    margin-bottom: 0;
}

.resolution-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.resolution-group-count {
    font-size: 11px;
    color: var(--text-tertiary);
}

.resolution-default-summary {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 0;
}

/* ========================================
   PROFILES – RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
    .profiles-intro {
        flex-direction: column;
    }

    .profiles-intro-columns {
        flex-direction: column;
        gap: 16px;
    }

    .profiles-empty-what-saves {
        gap: 12px;
    }

    .profiles-active-bar-active {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   PROFILE CREATE MODAL
   ======================================== */

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

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

.profile-modal {
    width: 450px;
    max-width: 95vw;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.profile-modal-overlay.open .profile-modal {
    transform: scale(1);
}

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

.profile-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.profile-modal-body {
    padding: 20px;
}

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

.profile-modal-body .form-group:last-child {
    margin-bottom: 0;
}

.profile-modal-body label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.profile-modal-body input[type="text"],
.profile-modal-body textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.profile-modal-body textarea {
    min-height: 80px;
    resize: vertical;
}

.profile-modal-snapshot {
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.profile-modal-snapshot-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.profile-modal-snapshot-label svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.profile-modal-snapshot-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-modal-snapshot-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
}

.profile-modal-snapshot-item svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
    width: 12px;
    height: 12px;
}

.profile-modal-snapshot-item .snapshot-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
}

/* ========================================
   EVALUATOR SETTINGS TAB
   ======================================== */

.eval-settings-section {
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.eval-settings-section:last-child {
    margin-bottom: 0;
}

.eval-settings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.eval-settings-title svg {
    color: var(--primary);
}

.eval-settings-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Collapsible Settings Sections (in General tab) */
.eval-settings-collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: 16px;
    background: var(--ds-gray-50);
}

.eval-settings-collapsible[open] {
    background: #fff;
}

.eval-settings-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.15s ease;
}

.eval-settings-summary::-webkit-details-marker {
    display: none;
}

.eval-settings-summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-tertiary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.eval-settings-collapsible[open] .eval-settings-summary::before {
    transform: rotate(90deg);
}

.eval-settings-summary:hover {
    color: var(--text-primary);
}

.eval-settings-summary svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.eval-settings-summary-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-left: auto;
}

.eval-settings-collapsible-body {
    padding: 0 16px 16px;
}

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

.eval-form-row .eval-form-group {
    margin-bottom: 0;
}

.checkbox-input {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--primary);
}

.eval-form-group label:has(.checkbox-input) {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.eval-form-group label:has(.checkbox-input) span {
    font-size: 14px;
}

/* =========================================================================
   STATUS BADGES - Conversation Analysis Status
   ========================================================================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-badge.ready {
    background: var(--ds-amber-50);
    color: var(--ds-amber-700);
    border: 1px solid var(--ds-amber-200);
}

.status-badge.done {
    background: var(--ds-green-50);
    color: var(--ds-green-700);
    border: 1px solid var(--ds-green-200);
}

.status-badge.failed {
    background: var(--ds-red-50);
    color: var(--ds-red-700);
    border: 1px solid var(--ds-red-200);
}

.status-badge.outdated {
    background: var(--ds-orange-50);
    color: var(--ds-orange-700);
    border: 1px solid var(--ds-orange-100);
}

.status-badge.analyzing,
.status-badge.downloading {
    background: var(--ds-blue-50);
    color: var(--ds-blue-700);
    border: 1px solid var(--ds-blue-200);
}

.status-badge.analyzing::before,
.status-badge.downloading::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: status-pulse 1.5s infinite;
}

.status-with-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

/* Status text - minimal colored status indicator */
.status-text {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-text.ready {
    color: var(--ds-amber-600);
}

.status-text.done {
    color: var(--ds-green-600);
}

.status-text.failed {
    color: var(--ds-red-600);
}

.status-text.outdated {
    color: var(--ds-orange-600);
}

.status-text.analyzing,
.status-text.downloading {
    color: var(--ds-blue-600);
}

.status-text.analyzing::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 4px;
    animation: status-text-pulse 1.5s infinite;
}

@keyframes status-text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* =========================================================================
   Analysis Progress Banner
   ========================================================================= */
.analysis-progress-banner {
    background: linear-gradient(135deg, var(--ds-blue-50) 0%, var(--ds-indigo-50) 100%);
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-md);
    margin: 0 16px 12px 16px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analysis-progress-banner.hidden {
    display: none;
}

.analysis-progress-banner .progress-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.analysis-progress-banner .progress-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ds-blue-200);
    border-top-color: var(--ds-blue-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.analysis-progress-banner .progress-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.analysis-progress-banner #progress-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-gray-900);
}

.analysis-progress-banner #progress-detail {
    font-size: 0.8rem;
    color: var(--ds-gray-600);
}

.analysis-progress-banner .progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--ds-blue-100);
    border-radius: 3px;
    overflow: hidden;
}

.analysis-progress-banner .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--ds-blue-500), var(--ds-blue-600));
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

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

.schema-warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    background: var(--ds-amber-50);
    color: var(--ds-amber-700);
    border: 1px solid var(--ds-amber-200);
}

.schema-warning-panel {
    background: var(--ds-amber-50);
    border: 1px solid var(--ds-amber-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.schema-warning-summary {
    font-size: 0.85rem;
    color: var(--ds-amber-800);
    margin-bottom: 8px;
}

.schema-warning-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.schema-warning-path {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ds-amber-800);
}

.review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--ds-blue-100, #dbeafe);
    color: var(--ds-blue-700, #1d4ed8);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 22px;
    vertical-align: middle;
    box-sizing: border-box;
}

.manual-review {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-panel);
}

.manual-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.manual-review-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.manual-review-saved {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.manual-review-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.manual-review .select-input {
    min-width: 130px;
    flex: 0 0 auto;
}

.manual-review .text-input.manual-review-reviewer {
    flex: 0 1 120px;
    min-width: 90px;
}

.manual-review .text-input.manual-review-notes {
    flex: 2 1 250px;
    min-width: 120px;
}

.manual-review-save {
    white-space: nowrap;
    flex-shrink: 0;
}

.manual-review-agree {
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--ds-gray-100);
    color: var(--ds-gray-700);
    border: 1px solid var(--ds-gray-200);
    font-weight: 500;
}
.manual-review-agree:hover {
    background: var(--ds-gray-200);
    color: var(--ds-gray-900);
}

.manual-review-description {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-style: italic;
    min-height: 1.2em;
}

.manual-review-rubric-ref {
    margin-top: 8px;
    font-size: 0.78rem;
}
.manual-review-rubric-ref summary {
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    user-select: none;
}
.manual-review-rubric-ref summary:hover {
    color: var(--text-secondary);
}
.manual-review-rubric-list {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.manual-review-rubric-list dt {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 6px;
    text-transform: capitalize;
}
.manual-review-rubric-list dt:first-child {
    margin-top: 0;
}
.manual-review-rubric-list dd {
    margin: 2px 0 0 0;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .manual-review-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .manual-review .select-input,
    .manual-review .text-input.manual-review-notes {
        flex: 1 1 auto;
        width: 100%;
    }
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* =========================================================================
   IMPORT MODAL STYLES
   ========================================================================= */

.import-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

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

.import-modal {
    background: var(--bg-root);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transform: scale(0.95);
    transition: transform 0.2s;
}

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

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

.import-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.import-modal-header .modal-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.import-modal-header .modal-title svg {
    color: var(--primary);
}

.import-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.import-step {
    display: none;
}

.import-step.active {
    display: block;
}

.import-step-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.import-step-header .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.import-step-header h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
}

.import-step-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.import-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.import-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.import-form .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.import-form .form-hint {
    font-size: 12px;
    color: var(--text-tertiary);
}

.import-form .form-row {
    display: flex;
    gap: 16px;
}

.import-form .form-row .form-group {
    flex: 1;
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range-inputs span {
    color: var(--text-tertiary);
    font-size: 13px;
}

.date-range-inputs input {
    flex: 1;
}

/* Import Loading State */
.import-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
}

.import-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.import-loading span {
    font-size: 14px;
    color: var(--text-secondary);
}

.import-loading-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-loading-timer {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 45px;
    text-align: center;
}

.import-loading-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Import Count Results */
.import-count-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--ds-blue-50) 0%, var(--ds-purple-50, #f3e8ff) 100%);
    border: 1px solid var(--ds-blue-200);
    border-radius: 12px;
    margin-bottom: 20px;
}

.import-count-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.import-count-icon svg {
    stroke: var(--ds-blue-600);
}

.import-count-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.import-count-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--ds-blue-700);
    font-variant-numeric: tabular-nums;
}

.import-count-label {
    font-size: 16px;
    color: var(--text-secondary);
}

.import-count-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.import-count-sep {
    color: var(--border-color);
}

/* Sample Size Selector */
.import-sample-selector {
    margin-bottom: 20px;
}

.import-sample-selector h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.import-sample-hint {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.import-sample-hint-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.import-sample-hint-list li {
    margin-bottom: 2px;
}

.import-sample-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.import-sample-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 80px;
}

.import-sample-btn:hover {
    border-color: var(--ds-blue-400);
    background: var(--ds-blue-50);
}

.import-sample-btn.selected {
    border-color: var(--ds-blue-500);
    background: var(--ds-blue-50);
    box-shadow: 0 0 0 3px var(--ds-blue-100);
}

.import-sample-btn.recommended {
    position: relative;
}

.import-sample-btn .sample-size {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.import-sample-btn .sample-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.import-sample-btn .sample-recommended {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 2px 6px;
    background: var(--ds-green-500);
    color: white;
    font-size: 9px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.import-sample-all {
    background: var(--ds-gray-50);
}

.import-sample-all .sample-time {
    color: var(--ds-orange-600);
}

.import-custom-sample {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.import-custom-sample input {
    width: 100px;
}

.import-count-actions {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.import-count-actions .btn {
    min-width: 160px;
}

/* Duration Filter */
.import-duration-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--ds-gray-50);
    border-radius: 6px;
    margin-bottom: 12px;
}

.import-duration-filter .filter-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.duration-filter-buttons {
    display: flex;
    gap: 4px;
}

.duration-filter-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-secondary);
}

.duration-filter-btn:hover {
    border-color: var(--ds-blue-400);
    color: var(--ds-blue-600);
}

.duration-filter-btn.active {
    background: var(--ds-blue-500);
    border-color: var(--ds-blue-500);
    color: white;
}

.duration-filter-count {
    font-size: 12px;
    color: var(--text-tertiary);
}

.import-duration-filter .btn-sm {
    margin-left: auto;
    padding: 4px 12px;
    font-size: 12px;
}

/* Import Error State */
.import-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: var(--ds-red-50);
    border: 1px solid var(--ds-red-200);
    border-radius: 8px;
    color: var(--ds-red-700);
}

/* Import Preview */
.import-preview-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--ds-gray-50);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.import-already-badge {
    color: var(--text-tertiary);
    font-weight: 400;
}

.import-random-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ds-blue-50, #dbeafe);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    color: var(--ds-blue-700, #1d4ed8);
}

.import-limit-warning {
    padding: 10px 12px;
    background: var(--ds-yellow-50, #fef3c7);
    border: 1px solid var(--ds-yellow-200, #fcd34d);
    border-radius: 6px;
    color: var(--ds-yellow-800, #92400e);
    font-size: 13px;
    margin-bottom: 12px;
}

.import-preview-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.import-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

.import-sampling-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.import-sampling-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.import-sampling-hint {
    font-size: 11px;
    color: var(--text-tertiary);
}

.import-strata-preview {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.import-strata-preview.hidden {
    display: none;
}

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

.import-strata-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.import-strata-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

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

.import-strata-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.import-strata-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 11px;
}

.import-strata-item .strata-name {
    color: var(--text-secondary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-strata-item .strata-count {
    font-weight: 600;
    color: var(--text-primary);
    background: var(--accent-color);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
}

.import-strata-summary {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-secondary);
}

/* Simplified Import UI */
.import-filters-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.form-group-flex {
    flex: 1;
    min-width: 0;
}

.form-group-small {
    flex: 0 0 120px;
}

.form-hint-prominent {
    display: block;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: 6px;
    color: var(--ds-blue-700, #1d4ed8);
    font-size: 13px;
}

.import-summary-card {
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 20px;
}

.import-summary-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.import-summary-number > span:first-child {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.import-summary-label {
    font-size: 16px;
    color: var(--text-secondary);
}

.import-summary-details {
    font-size: 14px;
    color: var(--text-tertiary);
}

.import-summary-sep {
    margin: 0 6px;
}

.import-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.import-selection-options {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.import-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.import-radio-option:hover {
    border-color: var(--accent-color);
}

.import-radio-option:has(input:checked) {
    border-color: var(--accent-color);
    background: var(--ds-blue-50, #eff6ff);
}

.import-radio-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.import-radio-label {
    font-size: 14px;
    color: var(--text-primary);
}

.import-radio-count {
    font-size: 14px;
    color: var(--text-tertiary);
}

.input-inline {
    width: 80px;
    padding: 6px 10px;
    font-size: 14px;
}

.select-inline {
    padding: 6px 10px;
    font-size: 13px;
}

.import-sampling-options {
    margin-left: 32px;
    padding: 8px 0;
}

.import-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.import-checkbox-option input {
    margin: 0;
}

.import-details-toggle {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.import-details-toggle summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
}

.import-details-toggle summary:hover {
    background: var(--bg-tertiary);
}

.import-details-toggle[open] summary {
    border-bottom: 1px solid var(--border);
}

.import-selected-badge {
    padding: 2px 10px;
    background: var(--accent-color);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.import-details-toggle > div,
.import-details-toggle > .import-preview-actions {
    padding: 12px 16px;
}

.import-details-toggle .import-preview-table-wrapper {
    margin: 0 16px 16px;
    max-height: 250px;
}

.input-compact {
    width: 90px;
}

.select-compact {
    min-width: 140px;
}

.import-preview-table-wrapper {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

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

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

.import-preview-table th {
    background: var(--ds-gray-50);
    font-weight: 500;
    position: sticky;
    top: 0;
}

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

.import-preview-table tr.already-imported {
    background: var(--ds-gray-50);
    color: var(--text-tertiary);
}

.import-preview-table tr.already-imported td {
    opacity: 0.7;
}

.import-preview-table .checkbox-col {
    width: 40px;
}

/* Import Progress */
.import-progress-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.import-progress-bar {
    height: 8px;
    background: var(--ds-gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.import-progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s;
}

.import-progress-log {
    height: 200px;
    overflow-y: auto;
    background: var(--ds-gray-900);
    border-radius: 8px;
    padding: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ds-gray-300);
    line-height: 1.5;
}

/* Import Modal Footer */
.import-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
}

.import-modal-buttons {
    display: flex;
    gap: 8px;
}

.import-evaluate-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.import-evaluate-option input[type="checkbox"] {
    accent-color: var(--ds-blue-500);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Button Variants */
.btn-success {
    background: var(--ds-green-600);
    color: white;
    border: none;
}

.btn-success:hover {
    background: var(--ds-green-700);
}

/* Analyze Selected Button Container */
#analyze-selected-container {
    display: inline-flex;
}

#analyze-selected-container.hidden {
    display: none;
}

/* Import Mode Sections */
.import-mode-section {
    margin-top: 16px;
}

.import-mode-section.hidden {
    display: none;
}

.pairs-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pairs-label-row label {
    margin-bottom: 0;
}

.btn-csv-upload {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--ds-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-csv-upload:hover {
    color: var(--text-primary);
    background: var(--ds-gray-100);
    border-color: var(--ds-gray-300);
}

/* Import Modal Segmented Control */
.import-form .segmented-control {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ds-gray-50);
}

.import-form .segmented-control .segment {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.import-form .segmented-control .segment:not(:last-child) {
    border-right: 1px solid var(--border);
}

.import-form .segmented-control .segment:hover:not(.active) {
    background: var(--ds-gray-100);
}

.import-form .segmented-control .segment.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.import-form .segmented-control .segment svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   CALIBRATION VIEW
   ======================================== */

.calibration-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1000px;
    position: relative;
}
.calibration-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.8);
    z-index: 10;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}
.calibration-loading.active {
    display: flex;
}

/* Introduction card */
.calibration-intro {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
}

.calibration-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500, #3b82f6);
}

.calibration-intro-content h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.calibration-intro-content p {
    margin: 0 0 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.calibration-intro-benefits {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.calibration-intro-benefits strong {
    color: var(--text-primary);
}

.calibration-intro-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.calibration-intro-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.calibration-step-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ds-blue-500, #3b82f6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}
.calibration-intro-step div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.calibration-intro-step strong {
    font-size: 13px;
    color: var(--text-primary);
}
.calibration-intro-step span {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.datasets-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
    line-height: 1.5;
}

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

.calibration-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    position: relative;
}

.calibration-card-primary {
    background: var(--ds-blue-50, #eff6ff);
    border-color: var(--ds-blue-200, #bfdbfe);
}

.calibration-card-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.calibration-card-primary .calibration-card-value {
    color: var(--ds-blue-600, #2563eb);
}
.calibration-card-warning {
    background: var(--ds-amber-50, #fffbeb);
    border-color: var(--ds-amber-200, #fde68a);
}
.calibration-card-warning .calibration-card-value {
    color: var(--ds-amber-600, #d97706);
}

.calibration-card-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.calibration-card-help {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--text-tertiary);
    cursor: help;
}

.calibration-card-tooltip {
    display: none;
    position: absolute;
    right: 0;
    top: 24px;
    width: 250px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: left;
    z-index: 100;
}

.calibration-card-help:hover .calibration-card-tooltip,
.calibration-card-help:focus-within .calibration-card-tooltip,
.calibration-card-help:focus .calibration-card-tooltip {
    display: block;
}

/* Protocol filter */
.cal-skipped-warning {
    padding: 10px 16px;
    background: var(--ds-amber-50, #fffbeb);
    border: 1px solid var(--ds-amber-200, #fde68a);
    border-radius: var(--radius-md);
    color: var(--ds-amber-700);
    font-size: 13px;
}
.calibration-filter {
    padding: 16px 20px;
}

.calibration-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calibration-filter-row label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.calibration-filter-row .select-input {
    max-width: 300px;
}

.calibration-filter-help {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Section headers with help */
.calibration-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.calibration-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.calibration-section-help {
    position: relative;
    color: var(--text-tertiary);
    cursor: help;
}

.calibration-section-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 24px;
    width: 320px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    z-index: 100;
}

.calibration-section-help:hover .calibration-section-tooltip,
.calibration-section-help:focus-within .calibration-section-tooltip,
.calibration-section-help:focus .calibration-section-tooltip {
    display: block;
}

.calibration-section-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.calibration-section-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-tertiary);
}
.select-input-sm {
    padding: 4px 8px;
    font-size: 12px;
    min-width: 0;
}

/* Evaluators card */
.calibration-evaluators {
    padding: 20px;
}

.calibration-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.calibration-empty p {
    margin: 0 0 8px;
}

.calibration-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Evaluators table */
.calibration-table-container {
    overflow-x: auto;
}

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

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

.calibration-table th {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calibration-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.calibration-table tbody tr:hover {
    background: var(--bg-secondary);
}

.calibration-table tbody tr.selected {
    background: var(--ds-blue-50, #eff6ff);
}

.calibration-evaluator-name {
    font-weight: 500;
    color: var(--text-primary);
}

.calibration-evaluator-warning {
    margin-left: 6px;
}

/* Agreement bar */
.calibration-agreement-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calibration-agreement-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    max-width: 150px;
}

.calibration-agreement-fill {
    height: 100%;
    background: var(--ds-green-500, #22c55e);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.calibration-agreement-fill.warning {
    background: var(--ds-amber-500, #f59e0b);
}

.calibration-agreement-value {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 45px;
}
.calibration-agreement-fill.low-data {
    background: var(--ds-gray-300, #d1d5db);
}
.calibration-low-data-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
    white-space: nowrap;
}

.calibration-table-legend {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-tertiary);
}

.calibration-legend-warning {
    margin-right: 4px;
}

/* Confusion Matrix card */
.calibration-matrix {
    padding: 20px;
}

.calibration-matrix-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.calibration-matrix-header label {
    font-weight: 500;
    color: var(--text-primary);
}

.calibration-matrix-header .select-input {
    max-width: 300px;
}

.calibration-matrix-grid {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.calibration-matrix-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.calibration-matrix-ylabel {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-right: 12px;
}

.calibration-matrix-table {
    border-collapse: collapse;
}

.calibration-matrix-table th,
.calibration-matrix-table td {
    width: 70px;
    height: 50px;
    text-align: center;
    border: 1px solid var(--border-primary);
    font-size: 13px;
}

.calibration-matrix-table th {
    background: var(--bg-secondary);
    font-weight: 500;
    color: var(--text-secondary);
}

.calibration-matrix-xlabel {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calibration-matrix-rowlabel {
    background: var(--bg-secondary);
    font-weight: 500;
    color: var(--text-secondary);
}

.calibration-matrix-table td:not(.calibration-matrix-rowlabel) {
    font-weight: 600;
    color: var(--text-primary);
}

/* Matrix cell coloring */
.calibration-matrix-cell-diag {
    background: var(--ds-green-100, #dcfce7) !important;
    color: var(--ds-green-700, #15803d) !important;
}

.calibration-matrix-cell-above {
    background: var(--ds-amber-50, #fffbeb);
}

.calibration-matrix-cell-below {
    background: var(--ds-blue-50, #eff6ff);
}

.calibration-matrix-cell-zero {
    color: var(--text-tertiary) !important;
    font-weight: 400 !important;
}
.calibration-matrix-total-header {
    font-weight: 600;
    color: var(--text-secondary);
}
.calibration-matrix-total-cell {
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f8fafc);
    border-left: 2px solid var(--border-primary);
}
.calibration-matrix-totals-row td {
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f8fafc);
    border-top: 2px solid var(--border-primary);
}
.calibration-matrix-grand-total {
    font-weight: 700;
}

/* Matrix legend */
.calibration-matrix-legend {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.calibration-matrix-legend h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.calibration-matrix-legend ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calibration-matrix-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.calibration-matrix-legend li:last-child {
    margin-bottom: 0;
}

.calibration-matrix-legend-diag,
.calibration-matrix-legend-above,
.calibration-matrix-legend-below {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--border-primary);
}

.calibration-matrix-legend-diag {
    background: var(--ds-green-100, #dcfce7);
}

.calibration-matrix-legend-above {
    background: var(--ds-amber-50, #fffbeb);
}

.calibration-matrix-legend-below {
    background: var(--ds-blue-50, #eff6ff);
}

/* Clickable matrix cells */
.matrix-cell-clickable {
    cursor: pointer;
    position: relative;
}
.matrix-cell-clickable:hover {
    outline: 2px solid var(--ds-blue-400);
    outline-offset: -2px;
    z-index: 1;
}

/* Drill-down panel */
.calibration-drilldown {
    margin-top: 16px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    overflow: hidden;
}
.calibration-drilldown-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    font-size: 13px;
    gap: 4px;
    flex-wrap: wrap;
}
.drilldown-rating {
    font-weight: 600;
    color: var(--text-primary);
}
.drilldown-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0 4px;
    line-height: 1;
}
.drilldown-close:hover {
    color: var(--text-primary);
}
.calibration-drilldown-list {
    max-height: 200px;
    overflow-y: auto;
}
.drilldown-conv {
    display: flex;
    gap: 12px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.1s;
}
.drilldown-conv:last-child {
    border-bottom: none;
}
.drilldown-conv:hover {
    background: var(--bg-hover);
}
.drilldown-client {
    color: var(--text-secondary);
    min-width: 120px;
}
.drilldown-convid {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ds-blue-600);
}

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

    .calibration-intro {
        flex-direction: column;
    }

    .calibration-matrix-table th,
    .calibration-matrix-table td {
        width: 60px;
        height: 45px;
        font-size: 12px;
    }
}

/* ========================================
   ARENA / DATASETS
   ======================================== */

.arena-view-card {
    border: none;
    box-shadow: none;
    background: transparent;
}
.arena-view-body {
    padding: 0;
}
.arena-subtab-content {
    display: none;
    padding: 24px;
}
.arena-subtab-content.active {
    display: block;
    animation: subtabFadeIn 0.15s ease;
}

/* Datasets empty state */
.datasets-empty {
    padding: 60px 20px;
    text-align: center;
}
.datasets-empty-icon {
    color: var(--text-tertiary);
    margin-bottom: 16px;
}
.datasets-empty h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
}
.datasets-empty p {
    color: var(--text-secondary);
    max-width: 460px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

/* Datasets list */
.datasets-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.datasets-list-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.datasets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Dataset card */
.dataset-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dataset-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dataset-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.dataset-card-name {
    font-weight: 600;
    font-size: 15px;
}
.dataset-card-time {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.dataset-card-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dataset-card-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}
.dataset-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Dataset progress bar */
.dataset-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.dataset-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 2px;
    overflow: hidden;
}
.dataset-progress-fill {
    height: 100%;
    background: var(--ds-indigo-500, #6366f1);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.dataset-progress-fill.complete {
    background: var(--ds-green-500, #22c55e);
}
.dataset-progress-fill.empty {
    background: transparent;
}
.dataset-progress-label {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Conversation picker filter additions */
.conv-picker-checkbox-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.conv-picker-score-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.conv-picker-score-filter label {
    margin: 0;
}
.conv-picker-score-input {
    width: 60px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
}

/* Dataset detail */
.dataset-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.dataset-detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.dataset-detail-back:hover {
    background: var(--ds-gray-100);
    border-color: var(--ds-gray-300);
}
.dataset-detail-title {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}
.dataset-detail-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.dataset-detail-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.dataset-detail-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dataset-detail-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--ds-gray-100);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.dataset-detail-stat-pill strong {
    color: var(--text-primary);
}

/* Dataset conversations table */
.dataset-conv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dataset-conv-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-primary);
}
.dataset-conv-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.04));
    color: var(--text-secondary);
}
.dataset-conv-table tr:hover td {
    background: var(--ds-gray-alpha-200);
}
.dataset-conv-table .sortable-th {
    cursor: pointer;
    user-select: none;
}
.dataset-conv-table .sortable-th:hover {
    color: var(--text-primary);
}
.dataset-conv-row {
    cursor: pointer;
}
.dataset-conv-row.selected {
    background: var(--ds-blue-50);
}
.dataset-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--ds-blue-50);
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--ds-blue-700);
}
.dataset-conv-check, .dataset-select-all {
    cursor: pointer;
    width: 15px;
    height: 15px;
}
.dataset-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.dataset-page-info {
    min-width: 140px;
    text-align: center;
}
.dataset-conv-remove {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    opacity: 0.4;
    transition: all 0.15s;
}
.dataset-conv-remove:hover {
    opacity: 1;
    color: var(--ds-red-600);
    background: var(--ds-red-50);
}

/* Conversation Picker Modal */
.conv-picker-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(0,0,0,0.15));
    width: 900px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.2s ease;
}
.conv-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
}
.conv-picker-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.conv-picker-filters {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.04));
    align-items: center;
    flex-wrap: wrap;
}
.conv-picker-search {
    flex: 1;
    min-width: 180px;
}
.conv-picker-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}
.conv-picker-truncation-warning {
    margin: 0 20px 8px;
    padding: 8px 12px;
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.4;
}
.conv-picker-select-all-banner {
    margin: 0 20px 8px;
    padding: 8px 12px;
    background: var(--ds-blue-50, #eff6ff);
    color: var(--ds-blue-700, #1d4ed8);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.conv-picker-select-all-banner a {
    color: var(--ds-blue-600, #2563eb);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.conv-picker-table-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}
.conv-picker-table tbody tr {
    cursor: pointer;
}
.conv-picker-table tbody tr:hover td {
    background: var(--ds-gray-alpha-200);
}
.conv-picker-table tbody tr.already-in td {
    opacity: 0.5;
}
.conv-picker-reviewed {
    color: var(--ds-green-600, #16a34a);
    font-weight: 600;
}
.conv-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary);
}

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

/* ========================================
   READY DETAIL VIEW (Not Yet Analyzed)
   ======================================== */

.ready-detail-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.ready-detail-icon {
    color: var(--ds-blue-400, #60a5fa);
    margin-bottom: 16px;
}

.ready-detail-notice h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.ready-detail-notice p {
    margin: 0 0 20px;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

.btn-analyze-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
}

.btn-analyze-now svg {
    animation: spin 2s linear infinite;
    animation-play-state: paused;
}

.btn-analyze-now:hover svg {
    animation-play-state: running;
}

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

/* Detail meta grid for ready view */
.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

.detail-meta-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-meta-value {
    font-size: 14px;
    color: var(--text-primary);
}

.detail-meta-value.mono {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ========================================
   FAILED DETAIL VIEW
   ======================================== */

.failed-detail-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: var(--ds-red-50, #fef2f2);
    border: 1px solid var(--ds-red-200, #fecaca);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.failed-detail-icon {
    color: var(--ds-red-400, #f87171);
    margin-bottom: 16px;
}

.failed-detail-notice h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ds-red-700, #b91c1c);
}

.failed-detail-error {
    background: white;
    border: 1px solid var(--ds-red-200, #fecaca);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    max-width: 100%;
    text-align: left;
}

.failed-detail-error strong {
    color: var(--ds-red-700, #b91c1c);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.failed-detail-error p {
    margin: 8px 0 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.failed-detail-hint {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 14px;
    max-width: 400px;
    line-height: 1.5;
}

.btn-retry-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    background: var(--ds-red-600, #dc2626);
    border-color: var(--ds-red-600, #dc2626);
}

.btn-retry-now:hover {
    background: var(--ds-red-700, #b91c1c);
    border-color: var(--ds-red-700, #b91c1c);
}

/* ========================================
   DASHBOARD VIEW
   ======================================== */

.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1000px;
}

.dashboard-widget.card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary);
}

.dashboard-widget .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.dashboard-widget .card-body {
    padding: 20px;
}

/* Empty + Loading states */
.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    color: var(--text-tertiary);
    text-align: center;
}

.dashboard-empty-hint {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
    max-width: 400px;
}

.dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    color: var(--text-secondary);
    text-align: center;
}

/* Filters */
.issues-report-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.issues-report-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.issues-report-filters label {
    font-size: var(--text-small, 0.8125rem);
    font-weight: 500;
    color: var(--text-secondary);
}

/* Summary box */
.issues-summary-box {
    font-size: var(--text-body, 0.875rem);
    line-height: 1.6;
    color: var(--text-primary);
    padding: 14px 16px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 16px;
}

/* Meta bar */
.issues-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
}

/* Issue Card */
.issue-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
    margin-bottom: 16px;
    background: var(--bg-primary);
    border-left: 4px solid var(--ds-gray-300, #d1d5db);
}

.issue-card.severity-critical {
    border-left-color: var(--ds-red-600, #dc2626);
}

.issue-card.severity-major_issue {
    border-left-color: var(--ds-orange-500, #f97316);
}

.issue-card.severity-minor_issue {
    border-left-color: var(--ds-amber-500, #f59e0b);
}

.issue-card.severity-pass {
    border-left-color: var(--ds-green-500, #22c55e);
}

.issue-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.issue-number {
    font-size: var(--text-small, 0.8125rem);
    font-weight: 600;
    color: var(--text-tertiary);
    font-family: var(--font-mono, monospace);
}

.issue-severity-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.issue-severity-badge.severity-critical {
    background: var(--ds-red-50, #fef2f2);
    color: var(--ds-red-700, #b91c1c);
}

.issue-severity-badge.severity-major_issue {
    background: var(--ds-orange-50, #fff7ed);
    color: var(--ds-orange-700, #c2410c);
}

.issue-severity-badge.severity-minor_issue {
    background: var(--ds-amber-50, #fffbeb);
    color: var(--ds-amber-700, #b45309);
}

.issue-severity-badge.severity-pass {
    background: var(--ds-green-50, #f0fdf4);
    color: var(--ds-green-700, #15803d);
}

.issue-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Frequency bar */
.issue-frequency {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.issue-frequency-bar {
    flex: 1;
    height: 6px;
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: 3px;
    overflow: hidden;
}

.issue-frequency-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.issue-frequency-fill.severity-critical {
    background: var(--ds-red-500, #ef4444);
}

.issue-frequency-fill.severity-major_issue {
    background: var(--ds-orange-400, #fb923c);
}

.issue-frequency-fill.severity-minor_issue {
    background: var(--ds-amber-400, #fbbf24);
}

.issue-frequency-fill.severity-pass {
    background: var(--ds-green-400, #4ade80);
}

.issue-frequency-text {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-secondary);
    white-space: nowrap;
    font-family: var(--font-mono, monospace);
}

/* Details grid */
.issue-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: var(--text-small, 0.8125rem);
}

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

.issue-detail-label {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

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

/* Examples */
.issue-examples {
    margin-bottom: 12px;
}

.issue-examples-label {
    font-size: var(--text-small, 0.8125rem);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.issue-example {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--ds-gray-50, #f9fafb);
    border-radius: var(--radius-sm, 6px);
    border-left: 2px solid var(--ds-gray-300, #d1d5db);
}

.issue-example-excerpt {
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 4px;
    font-size: var(--text-small, 0.8125rem);
}

.issue-example-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.issue-example-conv {
    font-family: var(--font-mono, monospace);
}
a.issue-example-conv {
    color: var(--ds-blue-600, #2563eb);
    text-decoration: none;
    cursor: pointer;
}
a.issue-example-conv:hover {
    text-decoration: underline;
}

/* Recommendation */
.issue-recommendation {
    font-size: var(--text-small, 0.8125rem);
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--ds-green-50, #f0fdf4);
    border: 1px solid var(--ds-green-200, #bbf7d0);
    border-radius: var(--radius-sm, 6px);
}

.issue-recommendation strong {
    color: var(--ds-green-700, #15803d);
}

/* Stale badge */
.badge-stale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--ds-amber-50, #fffbeb);
    color: var(--ds-amber-700, #b45309);
    border: 1px solid var(--ds-amber-200, #fde68a);
    white-space: nowrap;
}

/* Examples header — collapsible <details>/<summary> */
summary.issue-examples-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
summary.issue-examples-header::-webkit-details-marker {
    display: none;
}
summary.issue-examples-header .issue-examples-label::before {
    content: '▶';
    display: inline-block;
    font-size: 10px;
    margin-right: 6px;
    transition: transform 0.15s ease;
}
details.issue-examples[open] > summary .issue-examples-label::before {
    transform: rotate(90deg);
}

.issue-view-all-btn {
    font-size: 12px;
    color: var(--ds-blue-600, #2563eb);
}

/* Expanded examples list */
.issue-all-examples .issue-example {
    border-left-width: 3px;
}

.issue-all-examples .issue-example-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.issue-example-protocol {
    font-size: 11px;
    color: var(--text-tertiary);
}

.issue-examples-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.issue-examples-page-info {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
    flex: 1;
}

/* ── Severity filter tabs ── */
.issues-severity-filter {
    margin-bottom: 16px;
}
.issues-severity-tabs {
    width: 100%;
    display: flex;
}
.issues-severity-tabs .segment {
    flex: 1;
    justify-content: center;
}
.issues-severity-tabs .segment[data-severity="critical"].active {
    color: var(--ds-red-700, #b91c1c);
}
.issues-severity-tabs .segment[data-severity="major_issue"].active {
    color: var(--ds-orange-700, #c2410c);
}
.issues-severity-tabs .segment[data-severity="minor_issue"].active {
    color: var(--ds-amber-700, #b45309);
}
.issues-severity-tabs .segment[data-severity="pass"].active {
    color: var(--ds-green-700, #15803d);
}

/* ── Overview table ── */
.issues-overview-container {
    margin-top: 0;
    margin-bottom: 20px;
    max-height: 320px;
    overflow-y: auto;
}
.issues-overview tr {
    height: auto;
    cursor: pointer;
}
.issues-overview td {
    padding: 8px;
    height: auto;
    min-height: auto;
    max-height: none;
    font-size: var(--text-small, 0.8125rem);
}
.issues-overview-name {
    font-weight: 500;
    white-space: normal;
}
.issues-overview-desc {
    font-weight: 400;
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.issues-overview-freq {
    display: flex;
    align-items: center;
    gap: 8px;
}
.issues-overview-freq-bar {
    flex: 1;
    height: 6px;
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}
.issues-overview-protocols {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* ── Collapsible issue cards ── */
.issue-card-wrapper {
    margin-bottom: 12px;
}
details.issue-card-collapsible {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-primary, #fff);
    border-left: 4px solid var(--ds-gray-300, #d1d5db);
    transition: box-shadow 0.15s ease;
}
details.issue-card-collapsible:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
details.issue-card-collapsible.severity-critical {
    border-left-color: var(--ds-red-600, #dc2626);
}
details.issue-card-collapsible.severity-major_issue {
    border-left-color: var(--ds-orange-500, #f97316);
}
details.issue-card-collapsible.severity-minor_issue {
    border-left-color: var(--ds-amber-500, #f59e0b);
}
details.issue-card-collapsible.severity-pass {
    border-left-color: var(--ds-green-500, #22c55e);
}
/* Override flat .issue-card padding when used as details */
details.issue-card-collapsible.issue-card {
    padding: 0;
    margin-bottom: 0;
}

summary.issue-card-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
summary.issue-card-summary::-webkit-details-marker {
    display: none;
}
summary.issue-card-summary:hover {
    background: rgba(0, 0, 0, 0.015);
    border-radius: var(--radius-md, 8px);
}
summary.issue-card-summary .issue-title {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-frequency-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.issue-frequency-mini-bar {
    width: 60px;
    height: 4px;
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: 2px;
    overflow: hidden;
}

.issue-card-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.issue-card-chevron::after {
    content: '\25B6';
    font-size: 10px;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
    display: inline-block;
}
details.issue-card-collapsible[open] > summary .issue-card-chevron::after {
    transform: rotate(90deg);
}

.issue-card-body {
    padding: 4px 20px 20px;
    border-top: 1px solid var(--border-subtle);
}
.issue-card-description {
    margin: 8px 0 12px;
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Highlight animation when scrolling from overview table */
.issue-card-highlight {
    animation: issueHighlightPulse 1.5s ease;
}
@keyframes issueHighlightPulse {
    0%   { box-shadow: 0 0 0 3px var(--ds-blue-200, #bfdbfe); }
    100% { box-shadow: none; }
}

/* ===================================================================
   COMPARE COHORTS
   =================================================================== */

/* --- Notices & Warnings --- */
.compare-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-small, 0.8125rem);
    color: var(--ds-blue-800, #1e40af);
    line-height: 1.5;
}
.compare-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
    stroke: var(--ds-blue-500, #3b82f6);
}
.compare-warnings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.compare-warning-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-small, 0.8125rem);
    color: #92400e;
    line-height: 1.5;
}
.compare-warning-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #d97706;
}

/* --- Checkbox Dropdown Component (reusable) --- */
.checkbox-dropdown {
    position: relative;
}
.checkbox-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease;
    min-height: 36px;
}
.checkbox-dropdown-trigger:hover {
    border-color: var(--ds-blue-400, #60a5fa);
}
.checkbox-dropdown.open .checkbox-dropdown-trigger {
    border-color: var(--ds-blue-500, #3b82f6);
    box-shadow: 0 0 0 2px var(--ds-blue-100, #dbeafe);
}
.checkbox-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    max-height: 260px;
    display: flex;
    flex-direction: column;
}
.checkbox-dropdown.open .checkbox-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.checkbox-dropdown-actions {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
}
.checkbox-dropdown-action {
    color: var(--ds-blue-600, #2563eb);
    cursor: pointer;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}
.checkbox-dropdown-action:hover {
    text-decoration: underline;
}
.checkbox-dropdown-list {
    overflow-y: auto;
    padding: 4px 0;
    flex: 1;
}
.checkbox-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--text-small, 0.8125rem);
    transition: background-color 0.1s ease;
}
.checkbox-dropdown-item:hover {
    background: var(--bg-elevated);
}
.checkbox-dropdown-item input[type="checkbox"] {
    accent-color: var(--ds-blue-600, #2563eb);
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.checkbox-dropdown-item label {
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Filter Panels --- */
.compare-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.compare-cohort-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    position: relative;
}
.compare-cohort-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.compare-cohort-panel[data-cohort="a"]::before {
    background: var(--ds-blue-500, #3b82f6);
}
.compare-cohort-panel[data-cohort="b"]::before {
    background: var(--ds-teal-500, #14b8a6);
}
.compare-cohort-label {
    font-size: var(--text-base, 0.9375rem);
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.compare-cohort-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.compare-cohort-badge-a {
    background: var(--ds-blue-500, #3b82f6);
}
.compare-cohort-badge-b {
    background: var(--ds-teal-500, #14b8a6);
}
.compare-cohort-panel .form-group {
    margin-bottom: 12px;
}
.compare-cohort-panel .form-group:last-child {
    margin-bottom: 0;
}
.compare-cohort-panel .form-group > label {
    display: block;
    font-size: var(--text-small, 0.8125rem);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.compare-cohort-panel .form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.compare-cohort-panel .text-input {
    width: 100%;
}

/* --- Actions & Loading --- */
.compare-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.compare-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}
.compare-loading.active {
    display: flex;
}
.compare-loading-text {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-secondary);
}

/* --- Empty State --- */
.compare-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}
.compare-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
    opacity: 0.5;
}
.compare-empty-title {
    font-size: var(--text-base, 0.9375rem);
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}
.compare-empty-hint {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
    max-width: 400px;
    margin: 0;
}

/* --- Results animation --- */
@keyframes compareResultsIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.compare-results.visible {
    animation: compareResultsIn 0.35s ease-out;
}

/* --- Summary Metric Cards --- */
.compare-metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.compare-metric-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
    text-align: center;
}
.compare-metric-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compare-metric-values {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 10px;
}
.compare-metric-cohort {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.compare-metric-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.compare-metric-value-a {
    color: var(--ds-blue-600, #2563eb);
}
.compare-metric-value-b {
    color: var(--ds-teal-600, #0d9488);
}
.compare-metric-cohort-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.compare-metric-vs {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}
.compare-metric-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.compare-metric-delta.positive {
    background: var(--ds-green-50, #ecfdf5);
    color: var(--ds-green-700, #047857);
}
.compare-metric-delta.negative {
    background: var(--ds-red-50, #fff5f5);
    color: var(--ds-red-600, #fa5252);
}
.compare-metric-delta.neutral {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
}

/* --- Per-Evaluator Table --- */
.compare-evaluators-card {
    margin-top: 8px;
}
.compare-evaluators-table {
    width: 100%;
    border-collapse: collapse;
}
.compare-evaluators-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-caption, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: rgba(249, 250, 251, 0.85);
}
.compare-evaluators-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-small, 0.8125rem);
    vertical-align: middle;
}
.compare-evaluators-table tr:last-child td {
    border-bottom: none;
}
.compare-evaluators-table tbody tr {
    transition: background-color 0.15s ease;
}
.compare-evaluators-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}
.compare-evaluators-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--ds-blue-700);
}
.compare-ev-name {
    font-weight: 500;
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-ev-bars {
    min-width: 180px;
}
.compare-ev-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.compare-ev-bar-row + .compare-ev-bar-row {
    margin-top: 4px;
}
.compare-ev-bar-label {
    font-size: 10px;
    font-weight: 700;
    width: 14px;
    text-align: center;
    color: var(--text-tertiary);
}
.compare-ev-bar-track {
    flex: 1;
    height: 12px;
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}
.compare-ev-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}
.compare-ev-bar-fill-a {
    background: var(--ds-blue-500, #3b82f6);
}
.compare-ev-bar-fill-b {
    background: var(--ds-teal-500, #14b8a6);
}
.compare-ev-bar-value {
    font-size: var(--text-caption, 0.75rem);
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.compare-ev-score {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.compare-ev-score-a {
    color: var(--ds-blue-600, #2563eb);
    font-weight: 600;
}
.compare-ev-score-b {
    color: var(--ds-teal-600, #0d9488);
    font-weight: 600;
}
.compare-ev-samples {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}
.compare-ev-delta {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.compare-delta.positive {
    color: var(--ds-green-700, #047857);
}
.compare-delta.negative {
    color: var(--ds-red-600, #fa5252);
}
.compare-delta.neutral {
    color: var(--text-tertiary);
}
.compare-no-data {
    text-align: center;
    padding: 32px;
    color: var(--text-tertiary);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .compare-filters {
        grid-template-columns: 1fr;
    }
    .compare-evaluators-table {
        font-size: 12px;
    }
    .compare-ev-bars {
        min-width: 120px;
    }
}

/* ===================================================================
   Login Screen
   =================================================================== */

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-background-200, #fafafa);
}

.login-screen.hidden {
    display: none;
}

.login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 40px;
    background: var(--ds-background-100, #fff);
    border: 1px solid var(--ds-gray-200, #e5e5e5);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    max-width: 380px;
    width: 100%;
}

.login-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ds-blue-600, #2563eb);
}

.login-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ds-gray-1000, #0a0a0a);
    margin: 0;
}

.login-subtitle {
    font-size: 0.875rem;
    color: var(--ds-gray-600, #737373);
    margin: 0;
    text-align: center;
}

.login-btn {
    width: 100%;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: var(--ds-blue-600, #2563eb);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-btn:hover {
    background: var(--ds-blue-700, #1d4ed8);
}

.login-error {
    font-size: 0.8rem;
    color: var(--ds-red-600, #dc2626);
    margin: 0;
    text-align: center;
}

.login-error.hidden {
    display: none;
}

/* ===================================================================
   Auth User Info (sidebar footer)
   =================================================================== */

.auth-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--ds-gray-200, #e5e5e5);
    margin-bottom: 4px;
}

.auth-user-name {
    flex: 1;
    font-size: 0.75rem;
    color: var(--ds-gray-700, #525252);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-gray-500, #a3a3a3);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.auth-logout-btn:hover {
    background: var(--ds-gray-alpha-200, rgba(0, 0, 0, 0.04));
    color: var(--ds-gray-800, #262626);
}