/* Skip-to-content link (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--ds-blue-600, #2563eb);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
}
.skip-link:focus { top: 16px; }

:root {
    /* =========================================================================
       TUCUVI DESIGN SYSTEM (TDS)
       Official Tucuvi company design system: teal-branded, warm, professional
       ========================================================================= */

    /* Canvas & Background */
    --ds-background-100: #ffffff;
    --ds-background-200: #f9fafb;  /* 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: #f9fafb;
    --ds-gray-100: #f3f4f6;   /* Subtle backgrounds */
    --ds-gray-150: #eaeaea;   /* Ultra-fine borders */
    --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: Tucuvi Teal
       Used sparingly for primary actions & active states
       ========================================================================= */
    --ds-blue-50: #f0fdfa;
    --ds-blue-100: #ccfbf1;
    --ds-blue-200: #99f6e4;
    --ds-blue-400: #2dd4bf;
    --ds-blue-500: #14b8a6;
    --ds-blue-600: #0b7f74;   /* PRIMARY - Tucuvi Teal (WCAG AA compliant) */
    --ds-blue-700: #0f766e;
    --ds-blue-800: #115e59;

    /* 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: #dc2626;
    --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: #b45309;
    --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: #047857;
    --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: #c2410c;
    --ds-orange-600: #ea580c;
    --ds-orange-700: #c2410c;

    /* Teal - legacy */
    --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: #1f2937;    /* Warm 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 */

    /* Primary action tokens */
    --primary: var(--ds-blue-600);
    --primary-light: var(--ds-blue-100);
    --accent: var(--ds-blue-600);

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

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

    /* =========================================================================
       TYPOGRAPHY - Tucuvi
       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.015em;  /* Headings - warm professional 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.02),
        0 0 0 1px rgba(0,0,0,0.03);
    --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(13, 148, 136, 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%, #f0fdf8 100%);
    --gradient-success: linear-gradient(135deg, var(--ds-green-50) 0%, #f0fdf8 100%);
    --gradient-highlight: linear-gradient(135deg, #fefefe 0%, #fafafa 50%, #f0fdf8 100%);
    --gradient-hero: linear-gradient(145deg,
        rgba(13, 148, 136, 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);
    --bg-secondary: var(--ds-gray-50);
    --bg-tertiary: var(--ds-gray-100);
    --border-primary: var(--ds-gray-200);
    --border-secondary: var(--ds-gray-300);

    /* 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: #5eead4;
    --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 {
    letter-spacing: -0.02em;
}

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

/* ============================================================================
   SHARED: Section Intro Cards (collapsible)
   Reusable pattern for "How does X work?" educational cards
   ============================================================================ */
.section-intro {
    display: flex;
    gap: 16px;
    padding: 20px;
    padding-right: 40px;
    background: var(--ds-blue-50, #f0fdfa);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    border-radius: var(--radius-lg);
    position: relative;
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease-out;
}
.section-intro-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-blue-400);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: all 0.15s ease;
}
.section-intro-toggle:hover {
    background: var(--ds-blue-100);
    color: var(--ds-blue-600);
}
.section-intro-chevron {
    transition: transform 0.2s ease;
}
.section-intro.collapsed .section-intro-chevron {
    transform: rotate(-90deg);
}
.section-intro.collapsed .section-intro-icon,
.section-intro.collapsed .section-intro-content p,
.section-intro.collapsed .section-intro-tips {
    display: none;
}
.section-intro.collapsed {
    padding: 12px 40px 12px 20px;
    gap: 0;
}
.section-intro.collapsed .section-intro-content h2 {
    margin: 0;
    cursor: pointer;
}
.section-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500, #14b8a6);
    margin-top: 2px;
}
.section-intro-content h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.section-intro-content > p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: var(--text-small);
}
.section-intro-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.section-intro-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.section-tip-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--ds-blue-100, #ccfbf1);
    color: var(--ds-blue-600);
}
.section-intro-tip div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.section-intro-tip strong {
    font-size: var(--text-small);
    color: var(--text-primary);
}
.section-intro-tip span {
    font-size: var(--text-small);
    color: var(--text-secondary);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .section-intro {
        flex-direction: column;
        padding-right: 40px;
    }
}

/* ============================================================================
   SHARED: Welcome Banner (first-visit onboarding)
   ============================================================================ */
.welcome-banner {
    padding: 28px 32px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--ds-blue-50) 0%, #ffffff 60%);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    border-radius: var(--radius-lg);
    animation: fadeIn 0.4s ease-out;
}
.welcome-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.welcome-banner-header h2 {
    margin: 0;
    font-size: var(--text-display);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.welcome-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-xs);
    transition: all 0.15s;
}
.welcome-banner-dismiss:hover {
    background: var(--ds-blue-100);
    color: var(--text-secondary);
}
.welcome-banner > p {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.5;
}
.welcome-banner-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.welcome-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--ds-background-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.welcome-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--ds-blue-600, #0b7f74);
    font-size: 14px;
    font-weight: 700;
    border: 2px solid var(--ds-blue-500, #14b8a6);
}
.welcome-step strong {
    font-size: var(--text-small);
    color: var(--text-primary);
}
.welcome-step span {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    line-height: 1.4;
}
.welcome-banner-action {
    display: flex;
    justify-content: center;
}
@keyframes welcomeFadeOut {
    to { opacity: 0; transform: translateY(-8px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
}
.welcome-banner.dismissing {
    animation: welcomeFadeOut 0.35s ease forwards;
}
@media (max-width: 768px) {
    .welcome-banner { padding: 20px; }
    .welcome-banner-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .welcome-banner-steps { grid-template-columns: 1fr; }
}

/* Pulse highlight for onboarding guidance */
@keyframes pulseHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
.pulse-highlight {
    animation: pulseHighlight 0.6s ease 3;
}

/* ============================================================================
   SHARED: Workflow Nudges (contextual next-step hints)
   ============================================================================ */
.workflow-nudge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--ds-blue-50, #f0fdfa);
    border-left: 3px solid var(--ds-blue-500, #14b8a6);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-small);
    color: var(--text-secondary);
    line-height: 1.5;
    animation: nudgeSlideIn 0.3s ease-out;
}
@keyframes nudgeSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.workflow-nudge svg { flex-shrink: 0; color: var(--ds-blue-500); }
.workflow-nudge strong { color: var(--text-primary); }
.workflow-nudge-dismiss { margin-left: auto; flex-shrink: 0; }

/* ============================================================================
   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(13, 148, 136, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(13, 148, 136, 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: 64px 1fr;
    grid-template-rows: 48px 1fr;
    height: 100%;
}

/* --- Sidebar (Light Icon Rail) --- */
.sidebar {
    background: #ffffff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 8px;
    grid-row: 1 / -1;
    grid-column: 1;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 16px;
}

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

.brand-name {
    display: none;
}

.nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    width: 100%;
    padding: 0 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ds-gray-400);
    font-size: 0;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    position: relative;
}

.nav-item:hover {
    background: var(--ds-gray-100);
    color: var(--ds-gray-600);
}

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

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

/* CSS-only tooltips for icon rail */
.nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1000;
}

.nav-item:hover::after {
    opacity: 1;
}

.nav-spacer { flex: 1; }
.nav-divider { width: 24px; height: 1px; background: var(--border); margin: 4px 0; }

.sidebar-footer {
    padding: 8px;
    font-size: var(--text-small);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border);
    margin-top: 0;
    width: 100%;
}

.nav-shortcut-hint {
    text-align: center;
    font-size: 10px;
    color: var(--text-tertiary);
    padding: 4px 0;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-shortcut-hint kbd {
    display: inline-block;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: 0 1px 0 var(--border);
}

/* System Status Indicator */

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

/* Background Import Indicator (compact for icon rail) */
.bg-import-indicator {
    background: var(--ds-blue-50);
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    margin: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 56px;
    overflow: hidden;
}

.bg-import-indicator.hidden {
    display: none;
}
.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-progress {
    color: var(--ds-blue-500);
    font-size: 10px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bg-import-actions {
    display: flex;
    gap: 2px;
    width: 100%;
}
.bg-import-bar {
    height: 3px;
    background: var(--ds-gray-200);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

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

/* --- Top Navigation Bar --- */
.top-bar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--bg-root);
    border-bottom: 1px solid var(--border);
    height: 48px;
    min-height: 48px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body);
    font-weight: 500;
}

.breadcrumb-app {
    color: var(--text-tertiary);
}

.breadcrumb-sep {
    color: var(--ds-gray-300);
    font-weight: 400;
}

.breadcrumb-page {
    color: var(--text-primary);
    font-weight: 600;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar .version-info {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    text-align: right;
}

.top-bar .auth-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-top: none;
}

.top-bar .auth-user-name {
    font-size: var(--text-small);
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-bar .auth-logout-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.top-bar .auth-logout-btn:hover {
    background: var(--ds-gray-alpha-200);
    color: var(--text-primary);
}

/* --- Work-unit selector (top bar): two design system Comboboxes, client then work unit --- */
.work-unit-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 500px;
    max-width: 44vw;
}

.work-unit-selector-step {
    flex: 1 1 0;
    min-width: 0;
}

.work-unit-selector-separator {
    flex: none;
    color: var(--ds-gray-300);
    font-size: var(--text-body);
}

.work-unit-selector-option-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--text-tertiary);
}

.work-unit-selector-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.work-unit-selector-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: var(--text-tertiary);
}

/* Role badge */
.auth-role-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    line-height: 1.6;
}
.auth-role-badge.role-admin {
    background: var(--ds-blue-alpha-200);
    color: var(--ds-blue-900);
}
.auth-role-badge.role-user {
    display: none;
}

/* --- Role-based UI: hide action buttons for regular users --- */
body[data-role="user"] .nav-admin-only,
/* Settings: save/reset buttons */
body[data-role="user"] #btn-save-settings,
body[data-role="user"] .settings-save-bar,
body[data-role="user"] #btn-reset-settings,
body[data-role="user"] .settings-action-bar,
/* Evaluators: add, reset, actions, bulk */
body[data-role="user"] #btn-add-evaluator,
body[data-role="user"] #btn-reset-evaluators,
body[data-role="user"] .ev-col-actions,
body[data-role="user"] .ev-detail-actions,
body[data-role="user"] .evaluator-bulk-checkbox,
/* Categories: manage button */
body[data-role="user"] #btn-manage-categories,
/* Framework prompt: save bar */
body[data-role="user"] .framework-actions,
/* Scoring scale: save, reset */
body[data-role="user"] .scoring-actions,
body[data-role="user"] #btn-reset-scoring {
    display: none !important;
}

/* --- Role-based UI: disable controls for regular users (visible but non-interactive) --- */
body[data-role="user"] .settings-card-body {
    pointer-events: none;
    opacity: 0.7;
}
body[data-role="user"] #segmented-eval-language {
    pointer-events: none;
    opacity: 0.5;
}

/* Evaluators: the design-system controls carry no ids, so the admin-only ones
   are hidden by class and the row switches are frozen by their cell. */
body[data-role="user"] .evaluators-admin-only {
    display: none !important;
}
body[data-role="user"] .ev-col-status {
    pointer-events: none;
    opacity: 0.6;
}
/* Prompt Template: entire section body disabled */
body[data-role="user"] #evaluators-framework-section .evaluators-advanced-body {
    pointer-events: none;
    opacity: 0.7;
}
body[data-role="user"] .scoring-levels-list input {
    pointer-events: none;
    opacity: 0.7;
}
/* Language toggles: keep clickable so users can view prompts in both languages */
body[data-role="user"] .lang-toggle {
    pointer-events: auto;
    opacity: 1;
}
/* Profiles: visible but non-interactive */
body[data-role="user"] #evaluators-profiles-section .evaluators-advanced-body,
body[data-role="user"] #evaluators-profile-dropdown {
    pointer-events: none;
    opacity: 0.5;
}

/* --- Role-based info banners (visible only for normal users) --- */
.role-readonly-banner {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: var(--radius-md, 8px);
    color: var(--ds-blue-700, #1d4ed8);
    font-size: var(--text-small, 0.8125rem);
    font-weight: 500;
    line-height: 1.4;
}
.role-readonly-banner svg {
    flex-shrink: 0;
    stroke: var(--ds-blue-500, #3b82f6);
}
body[data-role="user"] .role-readonly-banner {
    display: flex;
}

.btn-danger {
    background: var(--ds-red-600);
    color: white;
    border: none;
}
.btn-danger:hover {
    background: var(--ds-red-700);
}

/* --- Main Content Area --- */
.content {
    grid-column: 2;
    grid-row: 2;
    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.025em;
    margin: 0 0 8px 0;
}

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

/* Dashboard greeting - personalized warm heading */
.dashboard-greeting {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dashboard-header .view-subtitle {
    font-size: var(--text-body-lg);
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Evaluators View Styles */
#view-evaluators .settings-section {
    margin-bottom: 20px;
}

/* --- Components: Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    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 svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-primary {
    background: var(--ds-blue-600);
    color: #fff;
    border: 1px solid var(--ds-blue-600);
}

.btn-primary:hover:not(:disabled) {
    background: var(--ds-blue-700);
    border-color: var(--ds-blue-700);
}

.btn-secondary {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--ds-gray-100);
    border-color: var(--ds-gray-300);
}

.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(13, 148, 136, 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;
}
/* --- 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;
    position: relative;
}

.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-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);
}

/* Filter bar dropdown wrappers */
.filter-dropdown-wrapper {
    position: relative;
    display: inline-block;
}
.filter-dropdown-wrapper .text-input {
    width: 100%;
}

/* 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;
}

/* Tag input dropdown suggestions */
.tag-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ds-gray-300);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.tag-dropdown.open {
    display: block;
}

.tag-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.1s ease;
}

.tag-dropdown-item:hover {
    background: var(--ds-gray-50);
}

.tag-dropdown-item .item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.tag-dropdown-item .item-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 6px;
}

.tag-name {
    font-weight: 500;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
}

.tag .tag-id {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.65;
}

.tag-dropdown-item.selected {
    opacity: 0.4;
    pointer-events: none;
}

.tag-dropdown-empty {
    padding: 8px 12px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.tag-dropdown-loading {
    padding: 8px 12px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-style: italic;
}

/* 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: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.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: var(--shadow-sm);
}

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

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

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

.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(--bg-root);
}

/* --- 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: var(--shadow-md);
}

.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(13, 148, 136, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(13, 148, 136, 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-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-cluster + .filter-cluster {
    margin-left: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--border-subtle, var(--ds-gray-200, #e5e7eb));
}

.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.active::before {
    content: '\2713';
    font-size: 11px;
    font-weight: 700;
    margin-right: -2px;
}

.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);
}
/* Secondary filter row */
.filter-row-secondary {
    padding-top: 10px;
    border-top: 1px solid var(--ds-gray-100);
    margin-top: 4px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ds-teal-600, #0d9488);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 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-clear-all {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: var(--text-micro);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.active-filter-clear-all:hover {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

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

.batch-summary {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    margin-bottom: 20px;
    background: var(--bg-root);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

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

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

.summary-expand-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.summary-expand-chevron {
    transition: transform 0.2s;
}

.summary-expand-btn.expanded .summary-expand-chevron {
    transform: rotate(180deg);
}

.summary-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

/* Summary Stats */
.summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.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);
}

/* Quality tier labels */
.stat-subtitle {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.quality-excellent { color: var(--ds-green-600) !important; }
.quality-good { color: #0d9488 !important; }
.quality-needs-work { color: var(--ds-amber-600) !important; }
.quality-poor { color: var(--ds-red-600) !important; }

/* Circular stat icons */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
}

.stat-icon-conversations {
    background: var(--ds-blue-100);
    color: var(--ds-blue-600);
}

.stat-icon-score {
    background: var(--ds-amber-100);
    color: var(--ds-amber-600);
}

.stat-icon-range {
    background: var(--ds-gray-100);
    color: var(--ds-gray-600);
}

.stat-icon-pass {
    background: var(--ds-green-100);
    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;
}

/* Quality Distribution Stacked Bar */
.summary-quality-distribution {
    padding: 0 16px;
}

.quality-stacked-bar {
    display: flex;
    height: 20px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--ds-gray-100);
    margin-bottom: 10px;
}

.quality-segment {
    transition: width 0.5s ease;
    min-width: 0;
}
.quality-segment.pass { background: var(--ds-green-500); }
.quality-segment.minor { background: var(--ds-amber-500); }
.quality-segment.major { background: var(--ds-red-500); }
.quality-segment.critical { background: var(--ds-red-700); }

.quality-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: var(--text-caption);
    color: var(--text-secondary);
}

.quality-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quality-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.quality-legend-dot.pass { background: var(--ds-green-500); }
.quality-legend-dot.minor { background: var(--ds-amber-500); }
.quality-legend-dot.major { background: var(--ds-red-500); }
.quality-legend-dot.critical { background: var(--ds-red-700); }

/* Responsive */
@media (max-width: 900px) {
    .summary-headline {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-stats {
        justify-content: center;
    }

    .summary-details {
        grid-template-columns: 1fr;
    }

    .summary-quality-distribution {
        padding-left: 0;
    }
}

/* 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;
}
.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-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    position: relative;
    margin-top: 20px;
}

/* ── Column Visibility Toggle ── */

.table-toolbar-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.table-column-settings {
    position: relative;
}

.column-settings-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 8px 0;
    max-height: 400px;
    overflow-y: auto;
}

.column-settings-dropdown.open {
    display: block;
}

.column-settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: var(--text-small);
    color: var(--text-secondary);
    transition: background 0.1s;
}

.column-settings-item:hover {
    background: var(--ds-gray-50);
}
/* Column hiding via CSS classes on <table>: nth-child(N) for each column.
   N is the column's position in TABLE_COLUMNS (views/conversations/conversation-ratings.js);
   adding or removing a column means renumbering every rule below it. */
.conversations-table.hide-col-status       th:nth-child(2),  .conversations-table.hide-col-status       td:nth-child(2)  { display: none; }
.conversations-table.hide-col-clientName   th:nth-child(3),  .conversations-table.hide-col-clientName   td:nth-child(3)  { display: none; }
.conversations-table.hide-col-protocolName th:nth-child(4),  .conversations-table.hide-col-protocolName td:nth-child(4)  { display: none; }
.conversations-table.hide-col-workUnit     th:nth-child(5),  .conversations-table.hide-col-workUnit     td:nth-child(5)  { display: none; }
.conversations-table.hide-col-type         th:nth-child(6),  .conversations-table.hide-col-type         td:nth-child(6)  { display: none; }
.conversations-table.hide-col-callStatus   th:nth-child(7),  .conversations-table.hide-col-callStatus   td:nth-child(7)  { display: none; }
.conversations-table.hide-col-convDate     th:nth-child(8),  .conversations-table.hide-col-convDate     td:nth-child(8)  { display: none; }
.conversations-table.hide-col-imported     th:nth-child(9),  .conversations-table.hide-col-imported     td:nth-child(9)  { display: none; }
.conversations-table.hide-col-analyzed     th:nth-child(10), .conversations-table.hide-col-analyzed     td:nth-child(10) { display: none; }
.conversations-table.hide-col-duration     th:nth-child(11), .conversations-table.hide-col-duration     td:nth-child(11) { display: none; }
.conversations-table.hide-col-issues       th:nth-child(12), .conversations-table.hide-col-issues       td:nth-child(12) { display: none; }
.conversations-table.hide-col-reviews      th:nth-child(13), .conversations-table.hide-col-reviews      td:nth-child(13) { display: none; }
.conversations-table.hide-col-audio        th:nth-child(14), .conversations-table.hide-col-audio        td:nth-child(14) { display: none; }

/* 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.conversations-table {
    min-width: 1100px;
}

.data-table th {
    text-align: left;
    padding: 12px 12px;
    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.95);
}

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

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

/* 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: var(--ds-teal-50) !important;
    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: var(--ds-gray-100);
}
.data-table th .sort-icon::after {
    content: '';
    margin-left: 4px;
    opacity: 0.4;
    font-size: var(--text-micro);
}
.data-table th.sort-asc .sort-icon::after {
    content: '\25B2';
    opacity: 1;
}
.data-table th.sort-desc .sort-icon::after {
    content: '\25BC';
    opacity: 1;
}
.data-table th.sort-asc,
.data-table th.sort-desc {
    background: var(--ds-indigo-50);
}

/* 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,
.data-table td.conv-id-cell {
    white-space: nowrap;
}

.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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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);
}

/* Conversations Empty State */
.conversations-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.conversations-empty-state.compact {
    padding: 32px 16px;
}

.conversations-empty-state .empty-state-icon {
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.conversations-empty-state h3 {
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.conversations-empty-state p {
    margin: 0 0 20px 0;
    max-width: 400px;
    font-size: var(--text-sm);
}

/* Inline retry button for failed conversations */
.retry-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--ds-red-500);
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
    vertical-align: middle;
    margin-left: 4px;
    border-radius: var(--radius-sm);
}
/* 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;
}
/* Checkbox column for row selection */
.checkbox-col {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    text-align: center;
    padding: 4px !important;
}

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

/* Sticky checkbox column for horizontal scroll */
.data-table.conversations-table th.sticky-col-checkbox,
.data-table.conversations-table td.sticky-col-checkbox {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ds-background-200);
}

.data-table.conversations-table th.sticky-col-checkbox {
    z-index: 3;
    background: rgba(249, 250, 251, 0.95);
}

.data-table.conversations-table tr:hover td.sticky-col-checkbox {
    background: var(--ds-teal-50) !important;
}

.data-table.conversations-table tbody tr.selected td.sticky-col-checkbox,
.data-table.conversations-table tbody tr.selected:hover td.sticky-col-checkbox,
#results-tbody tr.selected td.issue-bar-cell,
#results-tbody tr.selected:hover td.issue-bar-cell {
    background: var(--ds-indigo-50) !important;
}

#results-tbody tr.row-focused td.sticky-col-checkbox,
#results-tbody tr.row-focused:hover td.sticky-col-checkbox,
#results-tbody tr.row-focused td.issue-bar-cell,
#results-tbody tr.row-focused:hover td.issue-bar-cell {
    background: var(--ds-blue-50, #f0fdfa) !important;
}

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

/* Left indicator on the sticky checkbox cell so it's not hidden by z-index */
.data-table.conversations-table tbody tr.selected td.sticky-col-checkbox {
    box-shadow: inset 3px 0 0 var(--ds-indigo-500);
}

.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: 64px;
}

.profile-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 2px auto 0;
}

/* 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);
}

.data-table .conv-id-text {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    vertical-align: middle;
}

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

.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: 100px;
    position: relative;
    overflow: hidden;
    padding: 8px;
}

/* Issue cell tooltip */
.data-table .issue-bar-cell.has-issue-tooltip {
    cursor: help;
}
/* Issue bar tooltip now handled by JS body-level popup (see app.js _showTip) */

/* ── Reusable Info Tip (JS-positioned tooltip on body) ── */
.info-tip {
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: var(--text-tertiary);
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
}
.info-tip svg {
    opacity: 0.4;
    transition: opacity 0.15s ease;
}
.info-tip:hover svg {
    opacity: 0.85;
}
/* Tooltip popup (appended to document.body via JS) */
.info-tip-popup {
    position: fixed;
    z-index: 10000;
    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.65;
    min-width: 220px;
    max-width: 320px;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    text-align: left;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.info-tip-popup.visible {
    opacity: 1;
}
.info-tip-popup::before {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
}
.info-tip-popup.arrow-down::before {
    bottom: -12px;
    border-top-color: var(--ds-gray-900);
}
.info-tip-popup.arrow-up::before {
    top: -12px;
    border-bottom-color: var(--ds-gray-900);
}

.issue-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ds-gray-100);
    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);
    font-weight: 600;
}
.issue-summary-pass { color: var(--ds-green-700); }
.issue-summary-minor { color: var(--ds-amber-700); }
.issue-summary-severe { color: var(--ds-red-700); }
.issue-summary-none { color: var(--text-tertiary); font-weight: 400; }

/* Review column: manual review badge */
.data-table th.review-col,
.data-table td.review-col {
    text-align: center;
    min-width: 36px;
    overflow: hidden;
}

/* Audio column: ensure minimum width for controls */
.data-table td.audio-cell {
    min-width: 110px;
}

/* 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;
    display: none;
    pointer-events: none;
}

.data-table tr:hover .quick-preview {
    display: block;
}

/* 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-primary);
    font-size: 13px;
    font-weight: 500;
    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(--ds-gray-50);
    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;
}

/* Touch device: larger targets for conversations */
@media (hover: none) {
    .pagination-btn { min-width: 36px; min-height: 36px; padding: 8px; }
    .data-table .copy-btn { width: 28px; height: 28px; opacity: 0.6; }
    .filter-chip { padding: 8px 14px; }
    .retry-btn-inline { width: 28px; height: 28px; }
    .copy-btn-inline { opacity: 0.6; }
}

/* 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 td {
    background: var(--ds-yellow-50, #fef9c3) !important;
}

/* Audio cell with play button */
.data-table td.audio-cell {
    white-space: nowrap;
}
/* Playing state animation */
.play-btn.playing {
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}

/* ── Responsive: suppress quick-preview at medium widths ── */
@media (max-width: 1800px) {
    .quick-preview {
        display: none !important;
    }
}

/* ── Responsive: MacBook Air (1440–1710px) table density ── */
@media (max-width: 1710px) {
    .data-table.conversations-table th {
        padding: 8px 4px;
        font-size: 0.6875rem;
        letter-spacing: 0.03em;
    }

    .data-table.conversations-table td {
        padding: 8px 4px;
    }

    .data-table.conversations-table .score-cell {
        padding: 6px 4px;
    }

    .data-table.conversations-table .protocol-id-text {
        max-width: 70px;
    }

    .data-table.conversations-table .download-btn {
        display: none;
    }
}

/* 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-secondary);
}

.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: -4px;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    background: transparent;
    z-index: 20;
    transition: background 0.15s ease;
}

.drawer-resize-handle::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 40px;
    background: var(--ds-gray-300);
    border-radius: 2px;
    opacity: 0.4;
    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.04);
}

.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;
}

/* Tabbed Drawer Layout */
.drawer-tabs-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.drawer-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ds-gray-200, #e5e5e5);
    padding: 0 24px;
    background: var(--ds-background-100, #fff);
    position: sticky;
    top: 0;
    z-index: 5;
    flex-shrink: 0;
}

.drawer-tab-btn {
    padding: 10px 18px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-gray-500, #737373);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.drawer-tab-btn:hover {
    color: var(--ds-gray-800, #262626);
}

.drawer-tab-btn.active {
    color: var(--ds-blue-700, #0f766e);
    border-bottom-color: var(--ds-blue-600, #0d9488);
    font-weight: 600;
}

.drawer-tab-content {
    display: none;
    overflow-y: auto;
    padding: 24px 28px;
    flex: 1;
}

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

/* Legacy Split Pane Layout (kept for compatibility) */
.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(--bg-root);
}

.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: full-width drawer on narrow desktops */
@media (max-width: 1100px) {
    .drawer {
        width: 100vw;
    }
    .drawer-split {
        grid-template-columns: 1fr;
    }
    .drawer-pane-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

.drawer-header {
    padding: 16px 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.92);
}

/* The conversation drawer is a design-system Sheet whose own close button is
   absolutely positioned at the panel's top right. A sticky header with a
   z-index and a backdrop blur sits in the same paint layer, later in DOM
   order, and covers that button (see the same fix on .evaluator-drawer). The
   tab panels scroll on their own, so the header can be a plain block. */
#detail-drawer .drawer-header {
    position: static;
    z-index: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
}

.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); }

/* Cross-navigation banner (shown when drawer opened from Reports) */
.drawer-cross-nav-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--ds-blue-50);
    border-bottom: 1px solid var(--ds-blue-200);
    color: var(--ds-blue-700);
    font-size: var(--text-small);
    cursor: pointer;
    flex-shrink: 0;
}

.drawer-cross-nav-banner:hover {
    background: var(--ds-blue-100);
}

.drawer-cross-nav-banner.hidden {
    display: none;
}

/* Metadata strip for drawer header */
.drawer-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.drawer-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--ds-gray-100);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

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

.drawer-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.drawer-nav-position {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 44px;
    max-width: 260px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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: var(--shadow-sm);
}

.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;
}
.speed-controls {
    display: flex;
    gap: 4px;
}
.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);
    touch-action: none;
}

.waveform-container:active {
    cursor: grabbing;
}

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

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

.waveform-progress.dragging {
    transition: none;
}

.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(13, 148, 136, 0.4);
}

.waveform-cursor.dragging {
    transition: none;
}

.waveform-cursor::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 14px;
    height: 14px;
    background: var(--ds-indigo-600);
    border-radius: 50%;
    box-shadow: 0 0 0 2px white, var(--shadow-indigo);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.waveform-cursor.dragging::before {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(79, 70, 229, 0.2);
}

.waveform-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-top: none;
    background: transparent;
}
.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 (the drawer's Analysis tab, React) --- */
.needs-attention-section {
    animation: fadeInUp 0.3s ease-out;
}

.analysis-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}
.analysis-group-icon-issue { background: var(--ds-red-100); color: var(--ds-red-700); }
.analysis-group-icon-pass { width: 24px; height: 24px; background: var(--ds-green-100); color: var(--ds-green-700); }
.analysis-group-icon-na { width: 24px; height: 24px; background: var(--ds-gray-100); color: var(--text-tertiary); }

.analysis-issue-card {
    background: var(--ds-background-100);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    padding: 16px;
    border-left: 4px solid var(--ds-red-700);
    box-shadow: var(--shadow-xs);
}
.analysis-issue-card-minor { border-left-color: var(--ds-amber-700); }

.analysis-rationale {
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.analysis-rationale-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.analysis-rationale-major { background: var(--ds-red-100); }
.analysis-rationale-major .analysis-rationale-label { color: var(--ds-red-700); }
.analysis-rationale-minor { background: var(--ds-amber-100); }
.analysis-rationale-minor .analysis-rationale-label { color: var(--ds-amber-700); }
.analysis-rationale-pass { background: var(--ds-green-50); border: 1px solid var(--ds-green-100); font-size: 0.85rem; margin-bottom: 6px; }
.analysis-rationale-pass .analysis-rationale-label { color: var(--ds-green-700); }

.analysis-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.analysis-list-item {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
}

.analysis-panel {
    background: var(--bg-panel);
    padding: 12px;
    border-radius: var(--radius-md);
}

.analysis-pass-check { color: var(--ds-green-700); flex-shrink: 0; margin-top: 2px; display: inline-flex; }

.analysis-na-list { border-top: 1px solid var(--border); padding: 12px 16px; }
.analysis-na-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.analysis-na-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-gray-400); flex-shrink: 0; }

.evidence-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    background: var(--ds-indigo-50);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--ds-indigo-100);
    transition: all 0.15s ease;
}
.evidence-turn { color: var(--ds-indigo-600); font-family: var(--font-mono); font-weight: 500; }
.evidence-excerpt { color: var(--text-secondary); margin-left: 8px; }
.evidence-hint { color: var(--ds-indigo-400); font-size: 0.75rem; flex-shrink: 0; }

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

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

.passes-accordion summary {
    list-style: none;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.passes-list { max-height: 400px; overflow-y: auto; }

.pass-item { border-bottom: 1px solid var(--border); padding: 10px 12px; }

.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);
}

.accordion-chevron { color: var(--text-tertiary); transition: transform 0.2s; display: inline-flex; }
.passes-accordion[open] .accordion-chevron {
    transform: rotate(180deg);
}

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

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

/* Evaluator highlight when scrolled-to from Reports */
.evaluator-highlight {
    animation: evaluator-highlight-flash 1.5s ease-out;
}

@keyframes evaluator-highlight-flash {
    0% {
        box-shadow: 0 0 0 3px var(--ds-indigo-400);
        background-color: var(--ds-indigo-50);
    }
    40% {
        box-shadow: 0 0 0 3px var(--ds-indigo-300);
        background-color: var(--ds-indigo-50);
    }
    100% {
        box-shadow: none;
        background-color: transparent;
    }
}

/* 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 Audio Bar */
.transcript-audio-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 12px 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.transcript-audio-bar.visible {
    display: flex;
}.transcript-audio-progress {
    flex: 1;
}
.segment-label,
.audio-controls,
.retry-inline,
.more-filters,
.issue-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* The issue chips carry their severity as a dot before the label. */
.issue-chip button::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background: currentColor;
    flex-shrink: 0;
}
.issue-chip .issue-chip-critical::before { background: var(--ds-red-600); }
.issue-chip .issue-chip-error::before { background: var(--ds-orange-600); }
.issue-chip .issue-chip-warning::before { background: var(--ds-amber-600); }
.issue-chip .is-active::before { background: currentColor; }
.segment-label { gap: 6px; }
.temperature-slider { flex: 1; min-width: 160px; }
.import-hide-unanswered,
.import-evaluate-toggle { display: inline-flex; align-items: center; gap: 8px; }
.transcript-audio-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}
.transcript-audio-speeds {
    display: flex;
    gap: 2px;
}
/* Transcription quality label widget: matches .transcript-audio-bar sizing */
.transcription-label-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 12px 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.transcription-label-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
}
.transcription-label-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.transcription-label-meta {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.transcription-label-buttons {
    display: flex;
    gap: 4px;
}.transcription-label-icon {
    font-size: 12px;
}
.transcription-label-note-container {
    flex-basis: 100%;
    margin-top: 2px;
}
.transcription-label-note {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: inherit;
    resize: vertical;
    min-height: 32px;
    background: transparent;
}
.transcription-label-note:focus {
    outline: none;
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 2px var(--ds-blue-100);
}

/* 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);
}

/* --- Transcript Editing --- */
.pane-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}.transcript-edited-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.transcript-container.editing .transcript-turn {
    border: 1px solid var(--border-subtle);
    background: var(--ds-gray-50);
}
.turn-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.turn-edit-speaker {
    width: 140px;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    font-weight: 600;
    background: #fff;
}
.turn-edit-speaker:focus {
    outline: none;
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 2px var(--ds-blue-100);
}
.turn-edit-text {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    min-height: 48px;
    background: #fff;
}
.turn-edit-text:focus {
    outline: none;
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 2px var(--ds-blue-100);
}
.turn-edit-system {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    font-style: italic;
    background: #fff;
}
.turn-edit-system:focus {
    outline: none;
    border-color: var(--ds-blue-500);
    box-shadow: 0 0 0 2px var(--ds-blue-100);
}.transcript-edit-add-turn {
    display: flex;
    justify-content: center;
    padding: 12px 0;
    border-top: 1px dashed var(--border-subtle);
}
.btn-add-turn {
    color: var(--ds-blue-600);
    border-color: var(--ds-blue-200);
}
.btn-add-turn:hover {
    background: var(--ds-blue-50);
}
.transcript-edit-toolbar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 10;
}

/* --- 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: var(--shadow-md);
    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 Intro Card --- */
.settings-intro {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--ds-blue-50, #eff6ff);
    border: 1px solid var(--ds-blue-200, #bfdbfe);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.settings-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500);
    margin-top: 2px;
}

.settings-intro-content h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-intro-content > p {
    margin: 0 0 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: var(--text-small);
}

.settings-intro-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-intro-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.settings-tip-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--ds-blue-100, #dbeafe);
    color: var(--ds-blue-600);
}

.settings-intro-tip div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-intro-tip strong {
    font-size: 13px;
    color: var(--text-primary);
}

.settings-intro-tip span {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* --- Inline Prompt Editor (transcription prompt) --- */
.prompt-inline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

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

.inline-prompt-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #1e1e1e;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.inline-editor-body {
    position: relative;
    min-height: 320px;
}

.inline-prompt-textarea {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: 20px;
    font-family: 'Geist Mono', var(--font-mono, monospace);
    font-size: 13px;
    line-height: 1.7;
    color: transparent;
    caret-color: #d4d4d4;
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    z-index: 2;
    white-space: pre-wrap;
    word-wrap: break-word;
}

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

.inline-prompt-textarea:focus {
    caret-color: #fff;
}

.inline-editor-body .prompt-highlight {
    font-size: 13px;
    padding: 20px;
}

.inline-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: #252525;
    border-top: 1px solid #333;
    font-size: var(--text-caption);
    color: #888;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.inline-editor-footer code {
    background: rgba(255,255,255,0.08);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    color: #aaa;
}

.inline-editor-footer .prompt-chip {
    background: rgba(255,255,255,0.08);
    color: #888;
}

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

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

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

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

/* --- Settings Cards (stacked layout) --- */
.settings-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.15s ease;
}

.settings-card:hover {
    box-shadow: var(--shadow-sm);
}

.settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    gap: 16px;
    transition: background 0.1s ease;
    font-family: inherit;
    border-radius: var(--radius-lg);
}

.settings-card-header[aria-expanded="true"] {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.settings-card-header:hover {
    background: var(--ds-gray-50);
}

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

.settings-card-header[aria-expanded="false"] + .settings-card-body {
    display: none;
}

.settings-card-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-card-title-group h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
}

.settings-card-title-group p {
    margin: 4px 0 0;
    font-size: var(--text-small);
    color: var(--text-tertiary);
    text-align: left;
}

.settings-card-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.settings-card-summary {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    font-family: var(--font-mono, 'Geist Mono', monospace);
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.settings-card-header[aria-expanded="true"] .settings-card-summary,
.settings-card-header[aria-expanded="true"] .settings-card-badge {
    opacity: 0;
    pointer-events: none;
}

.settings-card-badge {
    display: inline-flex;
    padding: 2px 10px;
    font-size: var(--text-caption);
    font-weight: 600;
    border-radius: 999px;
    background: var(--ds-gray-100);
    color: var(--text-secondary);
    transition: opacity 0.15s ease;
}

.settings-card-badge.active {
    background: var(--ds-green-50, #f0fdf4);
    color: var(--ds-green-700, #15803d);
    border: 1px solid var(--ds-green-300, #86efac);
}

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

.settings-card-header[aria-expanded="true"] .settings-card-chevron {
    transform: rotate(180deg);
}

.settings-card-dirty-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-amber-500);
    flex-shrink: 0;
    animation: pulse-unsaved 2s ease-in-out infinite;
}

.settings-card-dirty-dot.visible {
    display: block;
}

.settings-card-body {
    border-top: 1px solid var(--border);
    animation: subtabFadeIn 0.15s ease;
}

/* Section icon color overrides for settings cards */
.section-icon-model {
    background: linear-gradient(135deg, var(--ds-blue-100) 0%, var(--ds-blue-200) 100%);
    color: var(--ds-blue-700);
}

.section-icon-batch {
    background: linear-gradient(135deg, var(--ds-gray-100) 0%, var(--ds-gray-200) 100%);
    color: var(--text-secondary);
}

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

.section-icon-costs {
    background: #dcfce7;
    color: #16a34a;
}

/* Model Costs table */
.model-costs-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.model-costs-header {
    display: grid;
    grid-template-columns: 1fr 130px 130px;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ds-surface-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-secondary);
}
.model-costs-row {
    display: grid;
    grid-template-columns: 1fr 130px 130px;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
    border-top: 1px solid var(--ds-border);
}
.model-costs-row:first-of-type {
    border-top: none;
}
.model-costs-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text-primary);
}
.model-costs-name .model-badge {
    margin-left: 6px;
}
.model-costs-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--ds-font-mono, monospace);
    background: var(--ds-surface-primary);
    color: var(--ds-text-primary);
    text-align: right;
}
.model-costs-input:focus {
    outline: none;
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.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,
.setting-row.setting-row-vertical: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-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;
}
/* Setting hint below controls */
.setting-hint {
    margin-top: 8px;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

/* Active language banner inside Transcription card */
.transcription-active-lang-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 0 0 4px;
    font-size: var(--text-caption);
    color: var(--text-secondary);
    background: var(--ds-blue-50);
    border-radius: var(--radius-sm);
}
.transcription-active-lang-banner .active-lang-icon {
    flex-shrink: 0;
    opacity: 0.6;
}
.transcription-active-lang-banner .active-lang-text strong {
    color: var(--text-primary);
}
.transcription-active-lang-banner .active-lang-hint {
    opacity: 0.7;
}
.transcription-active-lang-banner .active-lang-hint a {
    color: var(--ds-blue-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.transcription-active-lang-banner .active-lang-hint a:hover {
    color: var(--ds-blue-700);
}
.setting-row-highlight {
    animation: settingHighlight 1.5s ease-out;
}
@keyframes settingHighlight {
    0%, 20% { background: var(--ds-blue-50); }
    100% { background: transparent; }
}

/* Transcription section icon color (now via .section-icon-transcription) */

/* 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;
    align-items: stretch;
    gap: 12px;
    padding: 24px 0 0;
    border-bottom: 1px solid var(--border);
}

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

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

.setting-row-vertical .inline-prompt-editor {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

/* 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: var(--focus-ring);
}

.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 settings on narrow desktops */
@media (max-width: 1000px) {
    .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-action-bar {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .settings-intro {
        flex-direction: column;
    }

    .settings-card-header {
        padding: 16px;
    }

    .settings-card-summary {
        display: none;
    }
}

/* --- 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(13, 148, 136, 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: var(--shadow-md);
}

.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-selected {
    display: flex;
    align-items: center;
    gap: 10px;
}

.model-name {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-primary);
}
/* 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: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}
/* Model Option */
.model-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}
.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;
}
/* 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: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 16px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}

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

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

.kbd-hint {
    display: inline-block;
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 11px;
    padding: 1px 6px;
    margin-left: 6px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
}

.btn:disabled .kbd-hint {
    opacity: 0.5;
}

.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-warning {
    background: var(--ds-amber-600, #d97706);
    color: #fff;
    border-color: var(--ds-amber-600, #d97706);
}

.btn-warning:hover:not(:disabled) {
    background: var(--ds-amber-500, #f59e0b);
    border-color: var(--ds-amber-500, #f59e0b);
}

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #dc2626;
    border: 1px solid #dc2626;
}

.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-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;
}
@keyframes pulse-save {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(13, 148, 136, 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-body);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.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: var(--focus-ring);
}

.evaluators-search-input::placeholder {
    color: var(--text-tertiary);
}

.evaluators-filter {
    flex-shrink: 0;
}

.evaluators-filter-select.has-active-filter {
    border-color: var(--ds-indigo-400);
    background-color: var(--ds-indigo-50);
    font-weight: 500;
}

.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, #f0fdfa);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    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 h2 {
    margin: 0;
    font-size: 14px;
    color: var(--ds-blue-600);
    cursor: pointer;
}

.criteria-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500, #14b8a6);
    margin-top: 2px;
}

.criteria-intro-content h2 {
    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: #ccfbf1;
}

.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; }
}

/* Recently saved highlight */
.evaluator-item.just-saved {
    animation: savedHighlight 1.5s ease;
}

@keyframes savedHighlight {
    0% { background: var(--ds-green-100); box-shadow: 0 0 0 2px var(--ds-green-200); }
    100% { background: transparent; box-shadow: none; }
}

/* 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;
    transition: background-color 0.3s ease;
}

.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;
}

.bulk-select-checkbox:focus-visible {
    outline: 2px solid var(--ds-blue-400);
    outline-offset: 2px;
}

.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;
}

.evaluator-name mark,
.evaluator-description mark {
    background: var(--ds-amber-200);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* 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: var(--shadow-sm);
}

.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);
}

.evaluators-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.evaluators-empty-state svg {
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

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

.evaluators-empty-state p {
    margin: 0 0 24px 0;
    max-width: 400px;
}

/* 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-sm);
    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.active {
    color: var(--ds-blue-700);
    border-bottom-color: var(--ds-blue-600);
    background: #fff;
}

/* Tab completion indicators */

/* 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, #f0fdfa);
    border: 1px solid var(--ds-blue-100, #ccfbf1);
}

.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, #f0fdfa);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--ds-blue-700, #0f766e);
    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);
}

.flatpickr-clear-btn {
    display: block;
    width: 100%;
    padding: 6px 0;
    border: none;
    border-top: 1px solid var(--border-secondary, #e2e8f0);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--font-primary);
}

.flatpickr-clear-btn:hover {
    color: var(--text-primary);
    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 scoring definitions';
    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-hint {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-top: 6px;
}

.rubric-char-count {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
    padding: 2px 0;
    min-height: 16px;
}

.rubric-char-count.warning {
    color: var(--ds-amber-600);
    font-weight: 500;
}

/* 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;
    line-height: 1.5;
}

.fields-info svg {
    flex-shrink: 0;
    margin-top: 2px;
}

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

/* --- Standard fields block --- */
.output-fields-core {
    background: var(--ds-gray-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
}

.output-fields-core-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.output-fields-core-header svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.output-fields-core-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    background: var(--ds-gray-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.output-fields-core-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.output-fields-core-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--text-caption);
    line-height: 1.4;
}

.output-fields-core-name {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--ds-gray-100);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    flex-shrink: 0;
}

.output-fields-core-desc {
    color: var(--text-secondary);
}

/* --- Custom fields section --- */
.output-fields-custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

.output-fields-custom-header > span {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-secondary);
}

.output-fields-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-caption);
    line-height: 1.5;
    background: var(--ds-gray-50);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

.output-fields-empty-title {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.output-fields-empty-desc {
    margin-bottom: 12px;
}

.output-fields-examples {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.output-fields-example-icon {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--ds-blue-100);
    padding: 1px 5px;
    border-radius: 3px;
}

/* --- Custom field cards --- */
.output-field-item {
    padding: 12px;
    background: var(--ds-gray-50);
    border: 1px solid var(--border-subtle);
    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: 110px;
}

.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-description {
    margin-top: 8px;
    width: 100%;
}

.output-field-enum-values {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.output-field-enum-values .output-field-enum-input {
    flex: 1;
}

.output-field-aggregatable {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-caption);
    color: var(--text-secondary);
    white-space: nowrap;
}

.output-field-aggregatable input {
    margin: 0;
}

.output-field-enum-input {
    width: 100%;
}

.output-field-item .text-input,
.output-field-item .select-input {
    font-size: var(--text-caption);
    padding: 6px 8px;
}

/* --- JSON preview --- */
/* Type hint below field header */
.output-field-type-hint {
    margin-top: 6px;
}

/* Description field label */
.output-field-desc-group {
    margin-top: 8px;
}

.output-field-desc-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

/* Preview table */
.output-fields-preview {
    margin-top: 4px;
}

.output-fields-preview summary {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
}

.output-fields-preview summary:hover {
    color: var(--text-secondary);
}

.output-fields-preview-table {
    width: 100%;
    margin: 8px 0 0;
    font-size: 11px;
    border-collapse: collapse;
}

.output-fields-preview-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.output-fields-preview-table td {
    padding: 5px 8px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--ds-gray-100);
}

.output-fields-preview-table code {
    font-family: var(--font-mono, monospace);
    background: var(--ds-gray-100);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

.output-fields-preview-example {
    color: var(--text-tertiary);
    font-style: italic;
}

.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-tertiary);
    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, #2dd4bf);
    background: var(--ds-blue-50, #f0fdfa);
    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 Search Bar */

.preview-search-count {
    font-size: 11px;
    color: #94a3b8;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.preview-search-count:empty {
    display: none;
}

.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-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;
}

.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;
}

svg.spinner {
    width: 14px;
    height: 14px;
    border: none;
    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 */

.bulk-mode .evaluator-bulk-checkbox {
    display: flex;
}

/* 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;
}

.bulk-mode {
    background: var(--ds-blue-50);
    border-left: 3px solid var(--ds-blue-400);
    border-radius: var(--radius-md);
    padding-left: 8px;
    transition: all 0.2s ease;
}

/* ========================================
   CATEGORIES MODAL
   ======================================== */

.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-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;
}

/* ========================================
   EVALUATORS DASHBOARD REDESIGN
   ======================================== */

/* --- Toolbar --- */
.evaluators-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.evaluators-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

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

/* Profile info tooltip button */

/* --- Category Segmented Tabs --- */
.evaluators-category-tabs {
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.evaluators-category-tabs .segment-count {
    font-size: 11px;
    font-weight: 600;
    margin-left: 2px;
    color: var(--text-secondary);
}

/* --- Unified Evaluators Table --- */
.evaluators-table-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    margin-bottom: 24px;
}

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

.evaluators-table thead th {
    padding: 10px 12px;
    font-size: var(--text-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    position: sticky;
    top: 0;
    z-index: 1;
    user-select: none;
}

.ev-col-expand { width: 36px; }
.ev-col-color { width: 4px; padding: 0 !important; }
.ev-col-category { width: 120px; }
.ev-col-status { width: 60px; text-align: center; }
.ev-col-actions { width: 80px; text-align: right; }

.evaluators-table-row {
    cursor: pointer;
    transition: background 0.1s ease;
}

.evaluators-table-row:hover {
    background: var(--ds-gray-50);
}

.evaluators-table-row td {
    padding: 10px 12px;
    font-size: var(--text-body);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}

.evaluators-table-row.disabled {
    opacity: 0.55;
}

.evaluators-table-row.disabled:hover {
    opacity: 0.75;
}

/* Expand chevron */

.evaluators-table-row.expanded .ev-row-expand {
    transform: rotate(90deg);
}

/* Color bar cell */
.ev-row-color-bar {
    width: 4px;
    min-height: 40px;
    border-radius: 2px;
}

/* Name cell */
.ev-name-primary {
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ev-name-desc {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    margin-top: 2px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Actions cell */
.ev-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.ev-action-btn.danger:hover {
    background: var(--ds-red-50);
    color: var(--ds-red-600);
}

/* Expanded detail row */
.evaluators-detail-row {
    display: none;
}

.evaluators-detail-row.visible {
    display: table-row;
}

.evaluators-detail-cell {
    padding: 0 16px 16px 52px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    background: var(--ds-gray-50);
}

.ev-detail-panel {
    padding: 12px 0;
}

.ev-detail-description {
    font-size: var(--text-body);
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}

.ev-detail-rubric {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.ev-rubric-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    background: #fff;
    border: 1px solid var(--border-subtle);
}

.ev-rubric-chip-label {
    font-weight: 600;
    white-space: nowrap;
}

.ev-rubric-chip-text {
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    font-size: var(--text-small);
}

.ev-detail-scope {
    font-size: var(--text-small);
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.ev-detail-outcome-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ev-detail-outcome-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.ev-outcome-field {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--border-subtle);
    font-size: var(--text-small);
}

.ev-outcome-field-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ev-outcome-field-type {
    color: var(--text-tertiary);
}

.ev-outcome-field-agg {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--ds-green-50, #f0fdf4);
    color: var(--ds-green-700, #15803d);
    border: 1px solid var(--ds-green-200, #bbf7d0);
}

.ev-outcome-field-values {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--text-secondary);
}

.ev-outcome-field-values code {
    font-size: 11px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: var(--ds-gray-100);
    border: 1px solid var(--ds-gray-200);
}

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

/* --- Pagination --- */
.evaluators-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-small);
    color: var(--text-secondary);
}

.evaluators-pagination:empty {
    display: none;
}

.evaluators-pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.evaluators-pagination-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: var(--text-small);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.evaluators-pagination-controls button:hover:not(:disabled) {
    background: var(--ds-gray-100);
    color: var(--text-primary);
    border-color: var(--ds-gray-300);
}

.evaluators-pagination-controls button:disabled {
    opacity: 0.4;
    cursor: default;
}

.evaluators-pagination-controls button.active {
    background: var(--ds-blue-600);
    color: #fff;
    border-color: var(--ds-blue-600);
    font-weight: 600;
}

.evaluators-pagination-controls .pagination-ellipsis {
    padding: 0 4px;
    color: var(--text-tertiary);
}

.evaluators-page-size-select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    color: var(--text-secondary);
    background: #fff;
    cursor: pointer;
}

/* --- Collapsible Advanced Sections --- */
.evaluators-advanced-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    background: #fff;
}

.evaluators-advanced-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    color: var(--text-primary);
    list-style: none;
}

.evaluators-advanced-summary::-webkit-details-marker {
    display: none;
}

.evaluators-advanced-summary::before {
    content: '\25B6';
    font-size: 9px;
    transition: transform 0.2s ease;
    color: var(--text-tertiary);
}

.evaluators-advanced-section[open] > .evaluators-advanced-summary::before {
    transform: rotate(90deg);
}

.evaluators-advanced-summary svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.evaluators-advanced-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--border-subtle);
}

/* Criteria list collapsible: edge-to-edge content, no padding */
.evaluators-criteria-body {
    border-top: 1px solid var(--border-subtle);
}
.evaluators-criteria-section .evaluators-table-container {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}
.evaluators-criteria-section .evaluators-toolbar {
    padding: 12px 16px;
}
.evaluators-criteria-section .evaluators-category-tabs {
    margin: 0 16px 12px;
}
.evaluators-criteria-section .evaluators-bulk-bar {
    margin: 0 16px;
}
.evaluators-criteria-section .evaluators-pagination {
    border-top: 1px solid var(--border-subtle);
}

/* --- Evaluator Drawer (narrower) --- */
.evaluator-drawer {
    width: min(720px, 90vw);
}
/* The Sheet's own close button is absolutely positioned at the panel's top
   right. The shared header is sticky with a z-index and a backdrop blur, and
   either one puts it in the paint layer the button lives in, later in DOM
   order, so it would cover the button and swallow the click. The body scrolls
   on its own here, so the header can be a plain block. */
.evaluator-drawer .drawer-header {
    position: static;
    z-index: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
}

.evaluator-drawer .evaluator-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.evaluator-drawer .evaluator-modal-footer {
    padding: 12px 24px;
}

.evaluator-drawer .evaluator-modal-tabs {
    padding: 0 24px;
}

/* --- Footer --- */
.evaluators-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}

/* --- Loading & Empty States --- */
.evaluators-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 20px;
    color: var(--text-tertiary);
}

.evaluators-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-tertiary);
}

/* Toggle in table */

@media (max-width: 768px) {
    .evaluators-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .evaluators-toolbar-left,
    .evaluators-toolbar-right {
        flex-wrap: wrap;
    }
    .evaluators-category-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .ev-col-category { display: none; }
}

/* ========================================
   EVALUATORS SUB-NAVIGATION (deprecated - kept for reference)
   ======================================== */

/* deprecated: .evaluators-subnav is no longer used */
.evaluators-subnav {
    display: none;
}

.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: var(--shadow-xs);
}

.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: #1e1e1e;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.framework-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #252525;
    border-bottom: 1px solid #333;
    gap: 12px;
}

.framework-editor-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #999;
}

.framework-char-count {
    font-family: var(--font-mono);
}

.framework-evaluator-count {
    font-size: 11px;
    color: #888;
    padding: 2px 8px;
    background: rgba(255,255,255,0.08);
    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: rgba(78, 201, 176, 0.15);
    color: #4ec9b0;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.framework-placeholder-status.error {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.framework-editor-wrapper {
    position: relative;
    min-height: 400px;
}

.framework-editor-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    pointer-events: none;
    color: #d4d4d4;
}

.framework-editor {
    width: 100%;
    min-height: 400px;
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    border: none;
    resize: vertical;
    background: transparent;
    color: transparent;
    caret-color: #d4d4d4;
    position: relative;
    z-index: 1;
}

.framework-editor::placeholder {
    color: #555;
}

.framework-editor:focus {
    outline: none;
    caret-color: #fff;
}

/* Syntax highlighting for placeholders */
.framework-editor-highlight .placeholder {
    background: rgba(78, 201, 176, 0.15);
    color: #4ec9b0;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* Scrollbar for framework editor (dark theme) */
.framework-editor-wrapper::-webkit-scrollbar,
.framework-editor::-webkit-scrollbar,
.framework-editor-highlight::-webkit-scrollbar {
    width: 10px;
}

.framework-editor-wrapper::-webkit-scrollbar-track,
.framework-editor::-webkit-scrollbar-track,
.framework-editor-highlight::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.framework-editor-wrapper::-webkit-scrollbar-thumb,
.framework-editor::-webkit-scrollbar-thumb,
.framework-editor-highlight::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 5px;
    border: 2px solid #1e1e1e;
}

.framework-editor-wrapper::-webkit-scrollbar-thumb:hover,
.framework-editor::-webkit-scrollbar-thumb:hover,
.framework-editor-highlight::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.framework-editor-help {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #252525;
    border-top: 1px solid #333;
    font-size: 12px;
    color: #888;
}

.framework-editor-help code {
    background: rgba(78, 201, 176, 0.15);
    color: #4ec9b0;
    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-order-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-amber-600);
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--ds-amber-50);
    border-radius: var(--radius-md);
}

.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, #f0fdfa);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    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 h2 {
    margin: 0;
    font-size: 14px;
    color: var(--ds-blue-600);
    cursor: pointer;
}

.profiles-intro-icon {
    flex-shrink: 0;
    color: var(--ds-blue-500, #14b8a6);
    margin-top: 2px;
}

.profiles-intro-content h2 {
    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-item.save-flash {
    background: var(--ds-green-50) !important;
    border-color: var(--ds-green-300) !important;
    transition: all 0.3s ease;
}

.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-name .profile-stale-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--cat-compliance-accent, var(--ds-amber-500));
    color: #fff;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    cursor: help;
}

.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.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;
}

/* ========================================
   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 – EVALUATORS PANEL & KPI COVERAGE
   ======================================== */

.profile-evaluators-chevron {
    transition: transform 0.15s ease;
}

.profile-evaluators-panel {
    margin: 0 12px 8px 60px;
    padding: 8px 12px;
    background: var(--ds-gray-50);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--radius-md);
    max-height: 320px;
    overflow-y: auto;
}

.profile-evaluators-panel[hidden] {
    display: none;
}

.profile-evaluators-panel-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 0 6px;
}

.profile-evaluators-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 4px 0;
}

.profile-evaluator-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.profile-evaluator-row:hover {
    background: var(--ds-gray-100);
}

.profile-evaluator-row.stale {
    color: var(--ds-amber-700);
}

.profile-evaluator-name {
    font-weight: 500;
}

.profile-evaluator-key {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--text-tertiary);
}

.profile-evaluator-stale-note {
    font-size: 10px;
    font-style: italic;
}

.profile-evaluator-kpi-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--ds-blue-100);
    color: var(--ds-blue-700);
    white-space: nowrap;
    cursor: help;
}

.profile-evaluator-kpi-badge.missing {
    background: var(--ds-amber-100);
    color: var(--ds-amber-700);
}

.profile-kpi-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--ds-amber-50);
    border: 1px solid var(--ds-amber-200);
    border-radius: var(--radius-sm);
    color: var(--ds-amber-700);
    font-size: 11px;
}

.profile-kpi-warning svg {
    flex-shrink: 0;
    color: var(--ds-amber-600);
    margin-top: 1px;
}

.profile-kpi-warning-item {
    padding: 1px 0;
}

.profile-kpi-warning-item code {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    background: var(--ds-amber-100);
    padding: 0 3px;
    border-radius: 3px;
}

/* ========================================
   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-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-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 – 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-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 Create Modal – Binding Rules Section */
.profile-modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.profile-create-bindings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: 16px;
    background: var(--ds-gray-50);
}

.profile-create-bindings-section[open] {
    background: #fff;
}

.profile-create-bindings-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.profile-create-bindings-summary::-webkit-details-marker {
    display: none;
}

.profile-create-bindings-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;
}

.profile-create-bindings-section[open] .profile-create-bindings-summary::before {
    transform: rotate(90deg);
}

.profile-create-bindings-summary:hover {
    color: var(--text-primary);
}

.profile-create-bindings-summary svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.profile-create-bindings-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-left: 2px;
}

.profile-create-bindings-body {
    padding: 0 14px 14px;
}

/* ========================================
   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-advanced-divider {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.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;
}

.eval-meta-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

/* =========================================================================
   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: #b45309;
}

.status-text.done {
    color: #047857;
}

.status-text.failed {
    color: #dc2626;
}

.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-bottom: 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;
}

.btn-cancel-analysis {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

@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);
}

.transcription-warning-panel {
    background: var(--ds-amber-50);
    border: 1px solid var(--ds-amber-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 8px 12px;
}

.transcription-warning-summary {
    font-size: 0.85rem;
    color: var(--ds-amber-800);
    font-weight: 600;
    margin-bottom: 6px;
}

.transcription-warning-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.transcription-warning-list li {
    margin-bottom: 2px;
}

.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, #ccfbf1);
    color: var(--ds-blue-700, #0f766e);
    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;
}

/* The design system controls of the review row: the rating first, the notes widest */
.manual-review-fields > [data-slot="select-trigger"],
.manual-review-fields > button[role="combobox"] { min-width: 150px; flex: 0 0 auto; }
.manual-review-fields > div:has(> input[data-testid$="-reviewer"]) { flex: 0 1 140px; min-width: 100px; }
.manual-review-fields > div:has(> input[data-testid$="-notes"]) { flex: 2 1 240px; min-width: 120px; }


.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%;
    }
}

/* Global comment / Reviewer Notes */
.global-comment-section {
    margin-top: 16px;
}
.global-comment-section > [data-slot="textarea"],
.global-comment-section > div:has(> textarea) { margin-bottom: 8px; }
.global-comment-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.global-comment-footer > div:has(> input) { flex: 0 1 180px; min-width: 120px; }
.global-comment-saved {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-left: auto;
}
@media (max-width: 600px) {
    .global-comment-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .global-comment-saved {
        margin-left: 0;
    }
}

@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: var(--radius-lg);
    width: 90%;
    max-width: 900px;
    max-height: 92vh;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    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: 14px;
}

.import-modal-header .modal-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.modal-subtitle {
    margin: 2px 0 0 0;
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

.section-icon-import {
    background: linear-gradient(135deg, var(--ds-blue-100) 0%, var(--ds-blue-200) 100%);
    color: var(--ds-blue-700);
}
.import-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Import Steps */
.import-step {
    display: none;
}

.import-step.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    animation: subtabFadeIn 0.15s ease;
}

/* Lightweight step headers (stepper bar provides context) */
.import-step-header-light {
    margin-bottom: 16px;
}

.import-step-header-light h4 {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.import-step-header-light p {
    margin: 0;
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

/* Legacy step header (kept for backwards compat) */
.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: var(--text-body);
    color: var(--text-secondary);
}

.import-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.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-filter-summary {
    padding: 10px 14px;
    background: var(--ds-blue-50);
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--ds-blue-800);
    line-height: 1.5;
}

.import-filter-summary.hidden {
    display: none;
}

.import-filter-summary strong {
    font-weight: 600;
}

.date-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

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

@keyframes hintPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.import-confirm-warning {
    padding: 10px 16px;
    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: 16px;
    width: 100%;
}

/* Scope line ("Importing for X / Y") */
.import-scope-line {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.import-scope-line strong {
    color: var(--text-primary);
}

/* Live count panel (single-panel filters flow) */
.import-count-panel {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.selection-action-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.selection-action-bar.hidden {
    display: none;
}

.selection-action-status {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary, #0f766e);
    white-space: nowrap;
}

.selection-action-status:empty {
    display: none;
}

.selection-action-count {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.import-count-hint {
    font-size: 13px;
    color: var(--text-secondary);
}

.spinner-inline {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.import-count-results {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.import-count-number {
    font-size: 26px;
    font-weight: 700;
    color: var(--ds-blue-700);
    font-variant-numeric: tabular-nums;
}

.import-count-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Hide unanswered toggle row */
.import-hide-unanswered {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}
.import-hide-unanswered-label {
    font-size: 13px;
    color: var(--text-tertiary);
}

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

/* The guided import: the step indicator, the "how many" pickers, the
   finding step's figures */
.import-steps {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 12px 20px 0;
    list-style: none;
    font-size: 13px;
    color: var(--text-tertiary);
}
.import-steps-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.import-steps-item.is-current {
    color: var(--text-primary);
    font-weight: 600;
}
.import-steps-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
}
.import-steps-item.is-current .import-steps-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.import-how-many-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.import-how-many-custom {
    width: 140px;
}
.import-finding-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0;
}
.import-finding-stat dt {
    font-size: 12px;
    color: var(--text-tertiary);
}
.import-finding-stat dd {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Import Error State */
.import-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ds-red-50);
    border: 1px solid var(--ds-red-200);
    border-radius: var(--radius-md);
    color: var(--ds-red-700);
    font-size: var(--text-body);
}

.import-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--ds-red-100);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.import-error-icon svg {
    color: var(--ds-red-600);
}

/* Simplified Import UI */
.import-filters-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.import-filters-row + .form-hint + .import-filters-row,
.import-filters-row + .form-hint + .workflow-nudge + .import-filters-row {
    margin-top: 8px;
}

.form-group-flex {
    flex: 1;
    min-width: 0;
}

.form-group-small {
    flex: 0 0 120px;
}

/* Filter mode disabled until a client + work unit is selected in the header */
.import-scope-fields-disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Non-blocking catalog/protocol warnings (partial access) */
.import-protocol-warnings {
    margin-top: 4px;
    color: var(--ds-amber-600, #d97706);
}

.form-hint-prominent {
    display: block;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--ds-blue-50, #f0fdfa);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    border-radius: 6px;
    color: var(--ds-blue-700, #0f766e);
    font-size: 13px;
}

/* Import Count Banner (compact inline summary for auto-loaded large datasets) */
/* .import-restored-hint replaced by .workflow-nudge */

.input-inline {
    width: 80px;
    padding: 6px 10px;
    font-size: 14px;
}

.select-inline {
    padding: 6px 10px;
    font-size: 13px;
}

.input-compact {
    width: 90px;
}

.select-compact {
    min-width: 140px;
}

/* Import Progress */
.import-progress-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.import-analysis-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--ds-blue-50);
    border: 1px solid var(--ds-blue-200);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--ds-blue-700);
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 34px;
    flex-wrap: wrap;
}

.import-analysis-banner.hidden {
    display: none;
}

.import-analysis-banner .progress-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ds-blue-200);
    border-top-color: var(--ds-blue-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.import-progress-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -12px;
}

.import-progress-label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ds-blue-700);
    font-variant-numeric: tabular-nums;
}

.import-progress-bar {
    height: 12px;
    background: var(--ds-gray-100);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.import-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ds-blue-500), var(--ds-blue-600));
    width: 0%;
    transition: width 0.3s ease;
    border-radius: var(--radius-xs);
}

.import-progress-log {
    height: 200px;
    overflow-y: auto;
    background: var(--ds-gray-900);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--ds-gray-300);
    line-height: 1.5;
    border-top: 3px solid var(--ds-blue-600);
}

/* Import Modal Footer */
.import-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--ds-gray-50);
    gap: 12px;
}

.import-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.import-modal-buttons {
    display: flex;
    gap: 8px;
}

/* Toggle switch for evaluate after import */
.import-evaluate-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
/* Legacy evaluate option (backwards compat) */
.import-evaluate-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: var(--text-body);
    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;
}

/* ========================================
   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, #f0fdfa);
    border: 1px solid var(--ds-blue-200, #99f6e4);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.ready-detail-icon {
    color: var(--ds-blue-400, #2dd4bf);
    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;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Detail section title: uppercase label for drawer subsections */
.detail-section-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

/* 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;
}

/* ── Dashboard Toolbar (filters + actions on same row) ── */
.dashboard-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.dashboard-toolbar .issues-report-filters {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

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

/* ── Hero Metrics (3 cards side by side) ── */
.dashboard-hero-metrics {
    margin-bottom: 20px;
}

.dashboard-hero-heading {
    font-size: var(--text-heading);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dashboard-hero-subtitle {
    margin-bottom: 16px;
}

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

.hero-metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--bg-root);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

.hero-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-metric-label {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.hero-metric-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.hero-distribution-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin: 6px 0 4px 0;
}

.issues-empty {
    text-align: center;
    color: var(--text-tertiary);
    padding: 24px;
}

.hero-metric-card.hero-metric-alert {
    border-color: var(--ds-red-200);
    background: var(--ds-red-50);
}

.hero-metric-card.hero-metric-alert .hero-metric-value {
    color: var(--ds-red-600);
}

.hero-metric-card.hero-metric-warn {
    border-color: var(--ds-amber-200);
    background: var(--ds-amber-50);
}

.hero-metric-card.hero-metric-warn .hero-metric-value {
    color: var(--ds-amber-600);
}

.hero-metric-card.hero-metric-clean {
    border-left: 3px solid var(--ds-green-400, #4ade80);
}
.hero-metric-card.hero-metric-clean .hero-metric-value {
    color: var(--ds-green-600, #16a34a);
}

/* ── Meta line (date) ── */
.dashboard-meta-line {
    margin-bottom: 20px;
}
.report-scope {
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.report-scope-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--text-small);
}
.report-scope-label {
    color: var(--text-tertiary);
    min-width: 72px;
    flex-shrink: 0;
}
.report-scope-value {
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}
.report-scope-value a {
    color: var(--ds-blue-600);
    text-decoration: none;
}
.report-scope-value a:hover {
    text-decoration: underline;
}
.report-scope-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 8px;
    background: var(--ds-gray-100);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
}
.report-scope-tag .scope-count {
    color: var(--text-tertiary);
    font-size: 0.7rem;
}
.report-scope-overflow {
    color: var(--text-tertiary);
    font-size: var(--text-small);
}

/* ── Key Takeaways ── */
.dashboard-takeaways {
    margin-bottom: 24px;
}

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

.dashboard-takeaways-content {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--text-primary);
    padding: 16px 20px;
    background: var(--ds-blue-50);
    border: 1px solid var(--ds-blue-200);
    border-radius: var(--radius-md);
}

/* ── Report Charts Row (Donut + Ranking) ── */
.report-charts-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

.report-chart-panel {
    background: var(--bg-root);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
}

/* Donut Chart */
.donut-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 16px auto;
}

.donut-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* The hole of the ring: the panel colour over the gradient's centre */
.donut-ring::after {
    content: '';
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: var(--bg-root);
}

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

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

.donut-center-label {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.donut-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    font-size: var(--text-caption);
    color: var(--text-secondary);
}

.donut-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Ranking Bars */
.ranking-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 12px;
}

.ranking-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-bar-name {
    width: 160px;
    min-width: 160px;
    font-size: var(--text-small);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-bar-track {
    flex: 1;
    height: 14px;
    background: var(--ds-gray-100);
    border-radius: 7px;
    overflow: hidden;
}

.ranking-bar-fill {
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--ds-green-400), var(--ds-green-600));
    transition: width 0.4s ease;
}

.ranking-bar-value {
    min-width: 44px;
    text-align: right;
    font-size: var(--text-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ranking-bar-abs {
    font-weight: 400;
    color: var(--text-secondary);
}

/* ── Report Detail Sections (collapsible cards) ── */
.report-detail-section {
    background: var(--bg-root);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.report-detail-section > summary {
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-detail-section > summary::-webkit-details-marker { display: none; }

.report-detail-section[open] > summary {
    border-bottom: 1px solid var(--border-subtle);
}

.report-detail-section > summary::before {
    content: '\25B6';
    font-size: 9px;
    transition: transform 0.2s ease;
    color: var(--text-tertiary);
}

.report-detail-section[open] > summary::before {
    transform: rotate(90deg);
}

.report-detail-section-body {
    padding: 20px;
}

#issues-report-charts-section > .report-detail-section-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-section-count {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    font-weight: 400;
}

/* ── Quality Tables (Protocol/Client) ── */
.quality-table-title { display: inline; }
.quality-table-subtitle { display: inline; margin-left: 8px; }
.quality-breakdown-table .quality-stacked-bar { height: 8px; margin-bottom: 0; }

.quality-table-section + .quality-table-section {
    margin-top: 12px;
}

.quality-table-details {
    background: var(--bg-root);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.quality-table-summary {
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.quality-table-summary::-webkit-details-marker {
    display: none;
}

.quality-table-details[open] .quality-table-summary {
    border-bottom: 1px solid var(--border-subtle);
}

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

.quality-breakdown-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-panel);
}

.quality-breakdown-table td {
    padding: 10px 12px;
    font-size: var(--text-small);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

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

.quality-table-id {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--text-small);
}

.quality-table-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 500;
}

.quality-table-rate {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rate-good { color: var(--ds-green-700); }
.rate-warn { color: var(--ds-amber-700); }
.rate-bad { color: var(--ds-red-700); }

/* Responsive: stack charts on narrow desktops */
@media (max-width: 1000px) {
    .report-charts-row {
        grid-template-columns: 1fr;
    }

    .ranking-bar-name {
        width: 100px;
        min-width: 100px;
    }

    .quality-table-name {
        max-width: 160px;
    }
}

/* ── Issues card list ── */
.issues-unified-list {
    margin-bottom: 16px;
}

.issue-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Sort bar */
.issues-sort-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.issues-sort-label {
    font-size: var(--text-small, 0.8125rem);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.issues-sort-control .segment {
    padding: 4px 12px;
    font-size: var(--text-small, 0.8125rem);
}

/* Line-clamp utilities */
.line-clamp-1, .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }

/* ── Dashboard Report Footer (export buttons) ── */
.dashboard-report-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .dashboard-hero-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-toolbar-actions {
        justify-content: flex-end;
    }
}

/* 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-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.dashboard-error p {
    font-size: 0.9rem;
    color: var(--ds-red-600, #dc2626);
    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;
}

/* Report generation progress bar */
.report-progress {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.report-progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: 3px;
    overflow: hidden;
}

.report-progress-bar {
    height: 100%;
    background: var(--ds-blue-500, #14b8a6);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

.report-progress-text {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
}

/* ── Reports Catalog ── */

.dashboard-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard-catalog-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-generate-panel {
    background: var(--bg-root);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 16px;
    margin-bottom: 16px;
}

.dashboard-generate-panel .issues-report-filters {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

.dashboard-generate-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.reports-catalog-table tbody tr {
    cursor: pointer;
}

.reports-catalog-table .catalog-filters-cell {
    max-width: 260px;
}

.dashboard-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.dashboard-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.catalog-pass-rate {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.catalog-pass-rate.rate-good { color: var(--ds-teal-600, #0d9488); }
.catalog-pass-rate.rate-warn { color: var(--ds-amber-600, #d97706); }
.catalog-pass-rate.rate-bad  { color: var(--ds-red-600, #dc2626); }

.catalog-critical-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.catalog-critical-count.has-critical {
    color: var(--ds-red-600, #dc2626);
}

.catalog-filter-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: 4px;
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-secondary);
    white-space: nowrap;
}

.catalog-actions-cell {
    white-space: nowrap;
}

.catalog-actions-cell .btn {
    vertical-align: middle;
}

.catalog-delete-btn {
    color: var(--text-tertiary);
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}

.catalog-row:hover .catalog-delete-btn {
    opacity: 1;
}

.catalog-delete-btn:hover {
    color: var(--ds-red-600, #dc2626) !important;
    opacity: 1;
}

.catalog-filter-all {
    color: var(--text-tertiary);
    font-style: italic;
}

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

.catalog-id {
    font-size: var(--text-small, 0.8125rem);
    font-family: var(--font-mono, 'Geist Mono', monospace);
    color: var(--text-tertiary);
}

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

    .dashboard-generate-panel .issues-report-filters {
        flex-direction: column;
    }
}

/* 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);
}

.issues-report-filters .filter-date-group {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-left: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--border-subtle);
}

.issues-report-filters .date-input {
    width: 130px;
}

.issues-report-filters .filter-group-date-type {
    flex-shrink: 0;
}

/* Issue Card */
.issue-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 16px 20px;
    background: var(--bg-primary);
    border-left: 4px solid var(--ds-gray-300, #d1d5db);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

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

.issue-card.severity-critical {
    border-left-color: var(--ds-red-500, #ef4444);
}

.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);
}

/* Card header: badge + title on one line */
.issue-card-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.issue-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.35;
}

/* Card body: description + freq + recommendation stacked with consistent spacing */
.issue-card-description {
    margin: 4px 0 0;
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Frequency (card variant: larger bar) */
.issue-frequency-bar-lg {
    height: 6px;
    border-radius: 3px;
}

.issue-card-freq {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.issue-card-freq .issue-frequency-bar {
    flex: 1;
    max-width: 200px;
}

.issue-card-freq-text {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-secondary);
    white-space: nowrap;
}

.issue-card-freq-text strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Recommendation snippet on card face */
.issue-card-recommendation {
    font-size: var(--text-small, 0.8125rem);
    color: var(--ds-green-700, #15803d);
    margin: 10px 0 0;
    padding: 6px 10px;
    background: var(--ds-green-50, #f0fdf4);
    border-radius: var(--radius-sm, 6px);
    line-height: 1.5;
}

/* Protocol tags */
.issue-card-protocols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.issue-protocol-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: 10px;
    white-space: nowrap;
}

.issue-protocol-overflow {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Card footer: review button left, details toggle right */
.issue-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

/* Card actions row */
.issue-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Expandable details (<details>/<summary>) */
.issue-card-details[open] {
    flex-basis: 100%;
    margin-top: 8px;
}
.issue-card-details[open] > .issue-card-details-toggle {
    text-align: right;
}

.issue-card-details-toggle {
    font-size: var(--text-small, 0.8125rem);
    color: var(--text-tertiary);
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 2px 0;
}

.issue-card-details-toggle:hover {
    color: var(--text-secondary);
}

.issue-card-details-toggle::-webkit-details-marker { display: none; }

.issue-card-details-toggle::before {
    content: '\25B6';
    display: inline-block;
    font-size: 9px;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.issue-card-details[open] > .issue-card-details-toggle::before {
    transform: rotate(90deg);
}

.issue-card-details-body {
    padding-top: 12px;
}

.issue-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.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);
}

/* 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, #0d9488);
    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);
}

/* ── Severity filter tabs ── */
.issues-severity-filter {
    margin-bottom: 16px;
}

/* Shared severity background classes */
.severity-bg-critical { background: #dc2626; }
.severity-bg-major_issue { background: #f97316; }
.severity-bg-minor_issue { background: #f59e0b; }
.severity-bg-pass { background: #22c55e; }
.severity-bg-not_applicable { background: #9ca3af; }
.severity-bg-unknown { background: #9ca3af; }

/* Count-by-severity breakdown bar */
.cbs-breakdown {
    margin-bottom: 12px;
}

.cbs-bar {
    height: 6px;
    border-radius: 3px;
    display: flex;
    overflow: hidden;
    margin-bottom: 6px;
    background: var(--ds-gray-100, #f3f4f6);
}

.cbs-bar-segment {
    min-width: 2px;
    transition: width 0.3s ease;
}

.cbs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cbs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

/* ---------------------------------------------------------------------------
   Settings UX: Active summary, temperature labels, tab badge dots
   --------------------------------------------------------------------------- */

.settings-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--ds-background-100, #f9fafb);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: help;
}

.summary-chip svg {
    flex-shrink: 0;
    opacity: 0.55;
}

.summary-chip.chip-active {
    background: var(--ds-green-50, #f0fdf4);
    border-color: var(--ds-green-300, #86efac);
    color: var(--ds-green-700, #15803d);
}

.summary-chip.chip-active svg {
    opacity: 0.8;
    stroke: var(--ds-green-600, #16a34a);
}

.summary-unsaved-badge {
    background: var(--ds-amber-50, #fffbeb);
    border-color: var(--ds-amber-300, #fcd34d);
    color: var(--ds-amber-700, #b45309);
    animation: pulse-unsaved 2s ease-in-out infinite;
}

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

.temperature-presets {
    display: flex;
    gap: 8px;
    max-width: 320px;
    margin-bottom: 8px;
}
/* Segmented Controls */
.segmented-control {
    display: inline-flex;
    background: var(--ds-gray-100, #f3f4f6);
    border-radius: var(--radius-sm, 6px);
    padding: 3px;
    gap: 2px;
}

/* Settings tab-dot removed - replaced by .settings-card-dirty-dot */

/* ===================================================================
   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: var(--shadow-md);
    max-width: 380px;
    width: 100%;
}

.login-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ds-blue-600, #0d9488);
}

.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, #0d9488);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-btn:hover {
    background: var(--ds-blue-700, #0f766e);
}

.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;
}

/* ===================================================================
   Context Menu (right-click on table rows)
   =================================================================== */

.context-menu {
    position: fixed;
    z-index: 1100;
    min-width: 180px;
    background: var(--ds-background-100, #fff);
    border: 1px solid var(--ds-gray-200, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
    padding: 4px;
    font-size: 0.8125rem;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 5px;
    cursor: pointer;
    color: var(--ds-gray-800, #262626);
    text-align: left;
    font-size: 0.8125rem;
    transition: background .1s;
}

.context-menu-item:hover {
    background: var(--ds-gray-100, #f3f4f6);
}

.context-menu-item svg {
    flex-shrink: 0;
    color: var(--ds-gray-500, #737373);
}

.context-menu-item:hover svg {
    color: var(--ds-gray-700, #404040);
}

.context-menu-danger {
    color: var(--ds-red-600, #dc2626);
}

.context-menu-danger:hover {
    background: var(--ds-red-50, #fff5f5);
}

.context-menu-danger svg {
    color: var(--ds-red-400, #f87171);
}

.context-menu-danger:hover svg {
    color: var(--ds-red-600, #dc2626);
}

.context-menu-divider {
    height: 1px;
    background: var(--ds-gray-150, #eaeaea);
    margin: 4px 6px;
}

/* ===================================================================
   Keyboard Row Focus (table navigation)
   =================================================================== */

#results-tbody tr.row-focused {
    outline: 2px solid var(--ds-blue-500, #14b8a6);
    outline-offset: -2px;
}

#results-tbody tr.row-focused td {
    background: var(--ds-blue-50, #f0fdfa) !important;
}

/* Conversations row highlight hard override:
   ensure sticky checkbox + Issues column visually match all other cells */
#results-tbody > tr.row-focused > td,
#results-tbody > tr.row-focused:hover > td {
    background: var(--ds-blue-50, #f0fdfa) !important;
}

#results-tbody > tr.selected > td,
#results-tbody > tr.selected:hover > td {
    background: var(--ds-indigo-50) !important;
}

#results-tbody > tr.row-focused > td.sticky-col-checkbox,
#results-tbody > tr.row-focused:hover > td.sticky-col-checkbox {
    background: var(--ds-blue-50, #f0fdfa) !important;
}

#results-tbody > tr.selected > td.sticky-col-checkbox,
#results-tbody > tr.selected:hover > td.sticky-col-checkbox {
    background: var(--ds-indigo-50) !important;
}

#results-tbody > tr.row-focused > td.issue-bar-cell,
#results-tbody > tr.row-focused:hover > td.issue-bar-cell {
    background: var(--ds-blue-50, #f0fdfa) !important;
}

#results-tbody > tr.selected > td.issue-bar-cell,
#results-tbody > tr.selected:hover > td.issue-bar-cell {
    background: var(--ds-indigo-50) !important;
}

/* JS-driven focus class on each cell */
#results-tbody > tr > td.row-focused-cell {
    background-color: #ccfbf1 !important;
}

/* ── Language pill toggle ── */
.lang-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--ds-gray-200, #e5e7eb);
    border-radius: 6px;
    padding: 2px;
    flex-shrink: 0;
}
/* Rubric tab header with lang toggle */
.rubric-tab-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rubric-tab-header .tab-help-text {
    margin-bottom: 0;
}

/* Framework toolbar lang toggle positioning */
.framework-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Transcription prompt lang toggle */
#transcription-lang-toggle {
    margin-right: 4px;
}

/* ── Accessibility ─────────────────────────────────────────────────── */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Disabled interactive elements */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

button:disabled:hover,
button:disabled:focus-visible {
    box-shadow: none;
}

/* =============================================================================
   PROJECTS VIEW
   Tucuvi Data visual language via --tds-* tokens (style-tokens.css): clean
   cards, uppercase section labels with a brand tick, teal accents: mirrors
   data-typescript dashboard composition for the future React migration.
   ============================================================================= */

.projects-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* --- List panel --- */
.projects-list-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.projects-card {
    text-align: left;
    background: var(--tds-surface-white);
    border: 1px solid var(--tds-surface-border);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.projects-card:hover {
    border-color: var(--tds-brand-400);
    box-shadow: var(--tds-shadow-compact);
}

.projects-card.active {
    border-color: var(--tds-brand-700);
    box-shadow: inset 3px 0 0 0 var(--tds-brand-700);
}

/* The unsaved draft: a dashed border says "not stored yet" without needing a
   word, and cursor:default because there is nothing to click through to. */
.projects-card-draft {
    border-style: dashed;
    cursor: default;
    background: var(--tds-surface-muted);
}

.projects-card-draft:hover {
    box-shadow: none;
}

.projects-chip-draft {
    background: var(--tds-brand-100, var(--tds-surface-white));
    color: var(--tds-brand-700);
    font-weight: 600;
}

/* Project names and client ids are free text: a single long token used to
   run straight out of the card and paint over the form beside it. */
.projects-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--tds-slate-900);
    overflow-wrap: anywhere;
}

.projects-card-client {
    font-size: 0.75rem;
    color: var(--tds-slate-500);
    overflow-wrap: anywhere;
}

.projects-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.projects-chip {
    background: var(--tds-surface-muted);
    color: var(--tds-slate-600);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
}

.projects-chip-kpi {
    background: var(--tds-surface-teal-subtle);
    color: var(--tds-brand-900);
}

.projects-chip-kpi.projects-chip-muted {
    background: var(--tds-surface-muted);
    color: var(--tds-slate-400);
}

.projects-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--tds-slate-500);
    border: 1px dashed var(--tds-surface-border);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--tds-surface-canvas);
}

.projects-empty-detail {
    padding: 64px 24px;
}

/* --- Detail form --- */
.projects-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.projects-form-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.projects-form-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tds-slate-900);
}

.projects-form-id {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: var(--tds-slate-400);
}

.projects-form-section {
    background: var(--tds-surface-white);
    border: 1px solid var(--tds-surface-border);
    border-radius: 12px;
    padding: 18px 20px;
}

.projects-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tds-slate-500);
    padding-left: 9px;
    border-left: 3px solid var(--tds-brand-500);
    margin-bottom: 14px;
}

.projects-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.projects-field:last-child {
    margin-bottom: 0;
}

.projects-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tds-slate-700);
}

.projects-hint {
    font-size: 0.72rem;
    color: var(--tds-slate-400);
}

.projects-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}

/* The judge sampling fields: a switch out of "use global", then the control. */
.projects-judge-override {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.projects-field-grid:last-child {
    margin-bottom: 0;
}

.projects-field-grid .projects-field {
    margin-bottom: 0;
}

/* --- KPI success value chips --- */
.projects-kpi-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.projects-kpi-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--tds-surface-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    background: var(--tds-surface-white);
    color: var(--tds-slate-600);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.projects-kpi-value:has(input:checked) {
    background: var(--tds-surface-teal-subtle);
    border-color: var(--tds-brand-500);
    color: var(--tds-brand-900);
    font-weight: 600;
}

.projects-kpi-value input {
    accent-color: var(--tds-brand-800);
}

.projects-kpi-values-empty {
    font-size: 0.78rem;
    color: var(--tds-slate-400);
}

/* --- Autonomous import selection --- */
.projects-import-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) 110px 110px;
    align-items: end;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tds-surface-border);
}

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

.projects-import-consequence {
    grid-column: 1 / -1;
}

.projects-import-row:not(:has(.projects-import-enabled:checked)) .projects-import-percent,
.projects-import-row:not(:has(.projects-import-enabled:checked)) .projects-import-cap {
    opacity: 0.5;
}

.projects-import-empty {
    font-size: 0.78rem;
    color: var(--tds-slate-400);
}

/* --- Scope pickers (client, work units, protocols) --- */
.projects-scope-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tds-slate-700);
}

.projects-scope-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid var(--tds-slate-200);
    border-radius: 6px;
    background: var(--tds-white);
}

.projects-scope-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.projects-scope-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tds-slate-400);
}

.projects-scope-error {
    font-size: 0.78rem;
    color: var(--tds-red-600, #b91c1c);
}

/* --- Checkboxes --- */
.projects-checkbox-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.projects-checkbox {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tds-slate-700);
    cursor: pointer;
}

.projects-checkbox input {
    accent-color: var(--tds-brand-800);
}

/* --- Feedback history --- */
.projects-feedback-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.projects-feedback-note {
    border-left: 3px solid var(--tds-brand-300);
    background: var(--tds-surface-canvas);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projects-feedback-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tds-slate-400);
}

.projects-feedback-text {
    font-size: 0.85rem;
    color: var(--tds-slate-700);
    white-space: pre-wrap;
}

.projects-feedback-empty {
    font-size: 0.8rem;
    color: var(--tds-slate-400);
}

.projects-feedback-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* --- Saved cohorts --- */
.projects-cohorts-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.projects-cohort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--tds-surface-border);
    background: var(--tds-surface-canvas);
    border-radius: 8px;
    padding: 8px 12px;
}

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

.projects-cohort-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tds-slate-800);
}

.projects-cohort-definition {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: var(--tds-slate-500);
    overflow-wrap: anywhere;
}

.projects-cohorts-empty {
    font-size: 0.8rem;
    color: var(--tds-slate-400);
    margin-bottom: 8px;
}

.projects-feedback-add .text-input {
    flex: 1;
}

/* --- Actions & role gating --- */
.projects-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

body[data-role="user"] .projects-admin-only {
    display: none !important;
}

/* --- Change confirmation and history --- */
.projects-detail-tabs {
    margin-bottom: 14px;
}

.projects-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.projects-dialog-reason {
    margin-top: 14px;
}

.projects-changes-intro {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--tds-slate-600);
}

.projects-changes-table {
    max-height: 40vh;
    overflow: auto;
}

.projects-change-field {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tds-slate-700);
}

.projects-change-value {
    display: block;
    max-width: 28rem;
    font-size: 0.78rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.projects-change-old {
    color: var(--tds-slate-500);
}

.projects-change-new {
    color: var(--tds-slate-800);
}

.projects-changes-empty,
.projects-history-hint {
    font-size: 0.8rem;
    color: var(--tds-slate-400);
    margin: 0 0 12px;
}

.projects-history-loading {
    display: flex;
    justify-content: center;
    padding: 12px;
}

.projects-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.projects-revision {
    border: 1px solid var(--tds-surface-border);
    background: var(--tds-surface-canvas);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.projects-revision-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.projects-revision-number {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tds-slate-700);
}

.projects-revision-meta {
    font-size: 0.72rem;
    color: var(--tds-slate-400);
}

.projects-revision-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.projects-revision-reason {
    font-size: 0.85rem;
    color: var(--tds-slate-700);
    white-space: pre-wrap;
}

.projects-revision-changes {
    font-size: 0.75rem;
    color: var(--tds-slate-500);
    overflow-wrap: anywhere;
}

.projects-revision-detail {
    margin-top: 8px;
}

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

    .projects-field-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   PROJECT REPORTS + VALIDATION RUNS
   Tucuvi Data visual language via --tds-* tokens (style-tokens.css).
   The .pr-* classes are shared with the standalone HTML export, which inlines
   equivalent token values (see views/dashboard-project-report.js).
   ============================================================================= */

/* --- Reports catalog: report type badge --- */
.catalog-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.catalog-type-issues {
    background: var(--tds-surface-muted);
    color: var(--tds-slate-600);
}
.catalog-type-project {
    background: var(--tds-surface-teal-subtle);
    color: var(--tds-brand-900);
}

/* --- Project report detail view --- */
.project-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.project-report-title {
    margin: 0;
    font-size: 20px;
    color: var(--tds-slate-900);
}
.project-report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.project-report-body .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
}
.pr-meta {
    color: var(--tds-slate-500);
    font-size: 13px;
    margin: 0 0 16px 0;
}
.pr-warnings {
    background: var(--tds-surface-amber-subtle);
    border: 1px solid var(--tds-accent-amber-fg);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.pr-warning {
    color: var(--tds-accent-amber-fg);
    font-size: 13px;
    margin: 2px 0;
}
.pr-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.pr-stat-card {
    background: var(--tds-surface-white);
    border: 1px solid var(--tds-surface-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--tds-shadow-compact);
}
.pr-stat-brand {
    border-top: 3px solid var(--tds-brand-700);
}
.pr-stat-unknown {
    border-top: 3px dashed var(--tds-slate-500);
}
.pr-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--tds-brand-900);
}
.pr-stat-unknown .pr-stat-value {
    font-size: 19px;
    color: var(--tds-slate-500);
}
.pr-kpi-notice {
    background: var(--tds-surface-amber-subtle);
    border: 1px dashed var(--tds-accent-amber-fg);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px 0;
}
.pr-kpi-notice p {
    margin: 2px 0;
    font-size: 13px;
    color: var(--tds-accent-amber-fg);
}
.pr-kpi-notice-title {
    font-weight: 700;
}
.pr-sampling-notice {
    background: var(--tds-surface-amber-subtle);
    border: 1px dashed var(--tds-accent-amber-fg);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px 0;
}
.pr-sampling-notice p {
    margin: 2px 0;
    font-size: 13px;
    color: var(--tds-accent-amber-fg);
}
.pr-sampling-notice-title {
    font-weight: 700;
}
.pr-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tds-slate-900);
}
.pr-stat-hint {
    font-size: 12px;
    color: var(--tds-slate-500);
}
.pr-section {
    background: var(--tds-surface-white);
    border: 1px solid var(--tds-surface-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.pr-section-title {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--tds-slate-900);
}
.pr-verdict {
    margin: 0 0 10px 0;
    color: var(--tds-slate-700);
}
.pr-narrative-heading {
    margin: 12px 0 4px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tds-slate-500);
}
.pr-narrative-list {
    margin: 0;
    padding-left: 20px;
    color: var(--tds-slate-700);
}
.pr-narrative-list li { margin: 3px 0; }
.pr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.pr-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tds-slate-500);
    padding: 6px 10px;
    border-bottom: 1px solid var(--tds-surface-border);
}
.pr-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--tds-surface-border);
    color: var(--tds-slate-700);
}
.pr-row-immature td { color: var(--tds-slate-400); }
.pr-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.pr-badge-mature {
    background: var(--tds-surface-teal-subtle);
    color: var(--tds-brand-900);
}
.pr-badge-open {
    background: transparent;
    border: 1px dashed var(--tds-orange-800);
    color: var(--tds-orange-1000);
}
.pr-footnote,
.pr-inline-stats,
.pr-cube-line {
    font-size: 13px;
    color: var(--tds-slate-500);
    margin: 10px 0 0 0;
}
.pr-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pr-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--tds-slate-700);
}
.pr-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-bar-track {
    height: 6px;
    border-radius: 3px;
    background: var(--tds-surface-muted);
    overflow: hidden;
}
.pr-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--tds-brand-500);
}
.pr-bar-value {
    color: var(--tds-slate-500);
    white-space: nowrap;
}
.pr-dist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.pr-dist-evaluator { margin: 0 0 6px 0; font-size: 13px; color: var(--tds-slate-900); }
.pr-dist-field { margin-bottom: 10px; }
.pr-dist-field-name {
    display: block;
    font-size: 12px;
    color: var(--tds-slate-500);
    margin-bottom: 4px;
}
.pr-evidence {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pr-quote {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid var(--tds-brand-500);
    background: var(--tds-surface-teal-subtle);
    border-radius: 0 8px 8px 0;
}
.pr-quote-text {
    margin: 0 0 6px 0;
    font-style: italic;
    color: var(--tds-slate-700);
}
.pr-quote-meta {
    font-size: 12px;
    color: var(--tds-slate-500);
}
.pr-evidence-open { color: var(--tds-brand-800); }

/* --- Evaluators: validation runs --- */
.validation-intro {
    font-size: 13px;
    color: var(--tds-slate-500);
    margin: 0 0 14px 0;
}
.validation-new-run {
    background: var(--tds-surface-canvas);
    border: 1px solid var(--tds-surface-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.validation-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.validation-form-row .projects-field { margin: 0; }
.validation-note-field { flex: 1; min-width: 200px; }
.validation-runs-table .validation-run-row { cursor: pointer; }
.validation-note-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.validation-dist-row {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}
.validation-dist-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--tds-slate-500);
}
.validation-dist-overflow {
    font-size: 11px;
    color: var(--tds-slate-400);
}
.validation-minibar {
    display: flex;
    height: 6px;
    min-width: 60px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--tds-surface-muted);
}
.validation-minibar-segment { height: 100%; }
.validation-loading,
.validation-empty {
    font-size: 13px;
    color: var(--tds-slate-500);
    padding: 12px 0;
}
.validation-run-detail {
    margin-top: 16px;
    border-top: 1px solid var(--tds-surface-border);
    padding-top: 14px;
}
.validation-detail-title { margin: 0 0 4px 0; font-size: 14px; }
.validation-detail-meta {
    font-size: 12px;
    color: var(--tds-slate-500);
    margin: 0 0 4px 0;
}
.validation-detail-agreement {
    font-size: 13px;
    font-weight: 600;
    color: var(--tds-brand-900);
    margin: 0 0 8px 0;
}
.validation-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    margin: 1px 2px;
    border-radius: 999px;
    border: 1px solid var(--tds-surface-border);
    font-size: 11px;
    color: var(--tds-slate-600);
}
.validation-rating-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.validation-chips-cell { max-width: 480px; }
.validation-open-conv { color: var(--tds-brand-800); }

/* =============================================================================
   Cohort drill-down: clickable report metrics + slide-in panel
   ============================================================================= */

/* Any members-backed metric in the project report is drillable */
.pr-drillable { cursor: pointer; }
.pr-drillable:hover,
.pr-drillable:focus-visible {
    background: var(--tds-surface-teal-subtle);
    outline: none;
}
tr.pr-drillable:hover td { background: var(--tds-surface-teal-subtle); }
.pr-bar-row.pr-drillable { border-radius: 6px; }
.pr-stat-card.pr-drillable:hover { border-color: var(--tds-brand-500); }
/* The React renderer marks drillable metrics up as real <button>s (keyboard
   and screen readers for free); neutralize the UA button styles so they keep
   rendering exactly like the former divs. */
button.pr-stat-card {
    font: inherit;
    text-align: left;
}
button.pr-bar-row,
button.pr-finding-header {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
}
button.pr-bar-row { font-size: 13px; color: var(--tds-slate-700); }

/* Quality findings section */
.pr-findings { display: flex; flex-direction: column; gap: 14px; }
.pr-finding-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 4px;
    border-radius: 6px;
}
.pr-finding-title { font-weight: 600; }
.pr-finding-freq { font-size: 12px; color: var(--tds-slate-500); }
.pr-finding-breakdown {
    margin: 4px 0 6px 0;
    font-size: 12px;
    color: var(--tds-slate-500);
}
.pr-quote-rationale { margin: 0 0 6px 0; font-size: 13px; color: var(--tds-slate-500); }
.pr-severity-critical { background: var(--ds-red-100, #fee2e2); color: var(--ds-red-700, #b91c1c); }
.pr-severity-major_issue { background: var(--ds-orange-100, #ffedd5); color: var(--ds-orange-700, #c2410c); }
.pr-severity-minor_issue { background: var(--ds-amber-100, #fef3c7); color: var(--ds-amber-700, #b45309); }
.pr-severity-pass { background: var(--tds-surface-teal-subtle); color: var(--tds-brand-900); }
.pr-severity-not_applicable,
.pr-severity-unknown {
    background: transparent;
    border: 1px solid var(--tds-surface-border);
    color: var(--tds-slate-500);
}

/* Saved cohorts trend */
.pr-trend { white-space: nowrap; }
.pr-trend-up { color: var(--ds-red-600, #dc2626); }
.pr-trend-down { color: var(--tds-brand-800); }
.pr-trend-flat,
.pr-trend-none { color: var(--tds-slate-400); }

/* Slide-in panel (sits below the conversation drawer: overlay 97 / panel 98) */
.cohort-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 97;
}
.cohort-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.cohort-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(440px, 92vw);
    background: var(--tds-surface-card, #fff);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl), -4px 0 24px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 98;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 10px;
}
.cohort-panel.open { transform: translateX(0); }
.cohort-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.cohort-panel-heading { min-width: 0; }
.cohort-panel-title {
    margin: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.cohort-panel-count {
    font-size: 12px;
    color: var(--tds-slate-500);
}
.cohort-panel-close { font-size: 16px; line-height: 1; }
.cohort-panel-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cohort-save-form {
    display: flex;
    gap: 6px;
}
.cohort-save-form .text-input { flex: 1; }
.cohort-panel-note {
    margin: 0;
    font-size: 12px;
    color: var(--tds-slate-500);
}
.cohort-panel-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cohort-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.cohort-row:hover { background: var(--tds-surface-teal-subtle); }
.cohort-row-conv { font-size: 12px; overflow-wrap: anywhere; }
.cohort-row-client {
    font-size: 11px;
    color: var(--tds-slate-400);
    white-space: nowrap;
}
.cohort-show-all { margin-top: 6px; align-self: center; }

/* Custom date range in the conversations filter row */
.filter-date-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.filter-date-custom input[type="date"] {
    min-width: 8.5rem;
}
.filter-date-sep {
    color: var(--tds-slate-400, #94a3b8);
    font-size: 0.85em;
}