/* ============================================================
   Telegram Audio Bot — The Control Room
   ============================================================
   Dark-field admin UI. Operational Amber primary. Tonal layering.
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* impeccable-disable-line overused-font */

/* --- Reset & Base ------------------------------------------- */

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

:root {
    --color-bg:             oklch(0.16 0.000 0);
    --color-surface:        oklch(0.20 0.000 0);
    --color-surface-raised: oklch(0.25 0.000 0);
    --color-text:           oklch(0.96 0.004 30);
    --color-text-muted:     oklch(0.52 0.006 30);
    --color-primary:        oklch(0.68 0.17 38);
    --color-primary-hover:  oklch(0.58 0.18 35);
    --color-error:          oklch(0.60 0.22 25);
    --color-success:        oklch(0.68 0.16 155);
    --color-warn:           oklch(0.72 0.13 60);
    --color-accent:         oklch(0.72 0.13 195);
    --color-border:         oklch(0.32 0.000 0);
    --radius:               6px;
    --radius-lg:            10px;
    --shadow:               0 4px 16px oklch(0 0 0 / 0.5);
    --font:                 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --focus-ring:           0 0 0 3px oklch(0.68 0.17 38 / 0.30);
    --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
    --color-bg:             oklch(0.96 0.002 60);
    --color-surface:        oklch(1.00 0.000 0);
    --color-surface-raised: oklch(0.94 0.003 60);
    --color-text:           oklch(0.18 0.004 30);
    --color-text-muted:     oklch(0.50 0.006 30);
    --color-primary:        oklch(0.52 0.17 38);
    --color-primary-hover:  oklch(0.44 0.18 35);
    --color-error:          oklch(0.46 0.22 25);
    --color-success:        oklch(0.44 0.16 155);
    --color-warn:           oklch(0.50 0.14 60);
    --color-accent:         oklch(0.48 0.13 195);
    --color-border:         oklch(0.86 0.003 60);
    --shadow:               0 4px 16px oklch(0 0 0 / 0.10);
    --focus-ring:           0 0 0 3px oklch(0.52 0.17 38 / 0.25);
}

html {
    font-size: 16px;
    transition: background-color 200ms, color 200ms;
}

body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: oklch(0.78 0.17 38);
    text-decoration: none;
}

code, pre, .font-mono {
    font-family: var(--font-mono);
    font-size: 0.8125em;
    color: oklch(0.82 0.006 30);
}

code {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.125em 0.375em;
}

/* --- Container ---------------------------------------------- */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --- Navbar ------------------------------------------------- */

.navbar {
    background: oklch(0.14 0.000 0);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
}

.navbar-brand {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.navbar-nav a {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
}

.navbar-nav a:hover {
    color: var(--color-text);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.navbar-nav a.active {
    color: var(--color-primary);
}

/* --- Main content ------------------------------------------- */

main.container {
    flex: 1;
    padding-top: 1.75rem;
    padding-bottom: 3.5rem;
}

/* --- Page shell --------------------------------------------- */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-wrap: balance;
    margin-bottom: 0.25rem;
}

.page-kicker {
    display: none;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-top: 4px;
}

.surface-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.section-header p,
.section-copy {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.empty-state {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    padding: 1.25rem;
    text-align: center;
}

.empty-state.compact {
    padding: 0.875rem;
    text-align: left;
}

.notice-inline {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: oklch(0.70 0.006 30);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
}

@media (max-width: 720px) {
    .page-header,
    .section-header {
        display: block;
    }

    .page-actions {
        margin-top: 0.875rem;
    }
}

/* --- Cards -------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card-narrow {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.lead {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.55;
}

/* --- Status cards ------------------------------------------- */

.status-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .status-cards {
        grid-template-columns: 1fr;
    }
}

.status-card h3 {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 1rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

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

.status-ok .status-dot {
    background: var(--color-success);
    box-shadow: 0 0 0 3px oklch(0.68 0.16 155 / 0.2);
}

.status-warn .status-dot {
    background: var(--color-warn);
    box-shadow: 0 0 0 3px oklch(0.72 0.13 60 / 0.2);
}

.status-error .status-dot,
.status-stopped .status-dot {
    background: var(--color-error);
    box-shadow: 0 0 0 3px oklch(0.60 0.22 25 / 0.2);
}

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

.status-ok .status-dot {
    animation: pulse 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .status-ok .status-dot { animation: none; }
}

.status-desc,
.status-action {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.status-action {
    margin-top: 0.25rem;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* --- Forms -------------------------------------------------- */

.form-group {
    margin-bottom: 1.25rem;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-family: var(--font);
    color: var(--color-text);
    transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

.form-group select option {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: oklch(0.40 0.006 30);
}

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

.form-group input[type="password"] {
    font-family: var(--font);
    letter-spacing: 0.05em;
}

.form-help {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    line-height: 1.5;
}

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.form-inline {
    display: inline;
}

.inline-form {
    display: inline;
}

/* --- Buttons ------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out), color 150ms;
    white-space: nowrap;
}

.btn:hover {
    background: oklch(0.26 0 0);
    border-color: oklch(0.34 0 0);
    text-decoration: none;
}

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

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

.btn-primary {
    background: var(--color-primary);
    color: oklch(0.10 0 0);
    border-color: var(--color-primary);
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: oklch(0.10 0 0);
    transform: translateY(-1px);
}

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

.btn-secondary:hover {
    background: oklch(0.26 0 0);
    border-color: oklch(0.34 0 0);
}

.btn-danger {
    background: var(--color-error);
    color: var(--color-text);
    border-color: var(--color-error);
}

.btn-danger:hover {
    background: oklch(0.50 0.22 25);
    border-color: oklch(0.50 0.22 25);
    color: var(--color-text);
    transform: translateY(-1px);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: color 150ms, background 150ms;
}

.btn-link:hover {
    color: var(--color-text);
    background: var(--color-surface-raised);
    text-decoration: none;
}

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

/* --- Alerts ------------------------------------------------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.alert a {
    font-weight: 600;
    text-decoration: underline;
}

.alert-error {
    background: oklch(0.60 0.22 25 / 0.12);
    border: 1px solid oklch(0.60 0.22 25 / 0.3);
    color: oklch(0.80 0.18 25);
}

.alert-success {
    background: oklch(0.68 0.16 155 / 0.12);
    border: 1px solid oklch(0.68 0.16 155 / 0.3);
    color: oklch(0.82 0.14 155);
}

.alert-warn {
    background: oklch(0.72 0.13 60 / 0.12);
    border: 1px solid oklch(0.72 0.13 60 / 0.3);
    color: oklch(0.84 0.11 60);
}

.alert-warn a {
    color: oklch(0.84 0.11 60);
}

/* --- Wizard (W2 — guided onboarding) ------------------------- */

.wizard {
    max-width: 720px;
    margin: 0 auto;
}

.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    position: relative;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    z-index: 1;
    opacity: 0.35;
    transition: opacity 250ms var(--ease-out);
}

.progress-step.active,
.progress-step.completed {
    opacity: 1;
}

.progress-step.completed .progress-dot {
    background: var(--color-success);
    border-color: var(--color-success);
    color: oklch(0.10 0 0);
}

.progress-step.active .progress-dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: oklch(0.10 0 0);
    box-shadow: 0 0 0 4px oklch(0.68 0.17 38 / 0.25);
}

.progress-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-surface-raised);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 250ms var(--ease-out);
}

.progress-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
    animation: fadeSlideIn 250ms var(--ease-out) both;
}

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

@media (prefers-reduced-motion: reduce) {
    .wizard-step.active { animation: none; }
}

.input-lg {
    padding: 0.75rem 1rem !important;
    font-size: 1.0625rem !important;
}

.btn-lg {
    padding: 0.625rem 1.5rem !important;
    font-size: 0.9375rem !important;
}

/* --- Misc utils --------------------------------------------- */

.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.25rem; }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

/* --- Test result inline ------------------------------------ */

.test-result {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.test-result.success { color: oklch(0.82 0.14 155); }
.test-result.error   { color: oklch(0.80 0.18 25); }

.test-details {
    margin: 0.75rem 0 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.test-warnings { margin-top: 0.75rem; }

.test-warnings .alert {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.cap-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* --- Info callout (pipeline page) --------------------------- */

.card-note {
    background: oklch(0.72 0.13 60 / 0.08);
    border: 1px solid oklch(0.72 0.13 60 / 0.25);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.card-note h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
    color: oklch(0.84 0.11 60);
}

.note-list {
    list-style: none;
    padding: 0;
    font-size: 0.8125rem;
    color: oklch(0.70 0.006 30);
    display: grid;
    gap: 0.375rem;
}

.note-list li {
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}

.note-list li::before {
    content: '–';
    position: absolute;
    left: 0.375rem;
    color: oklch(0.72 0.13 60 / 0.6);
}

.note-list code {
    background: oklch(0.72 0.13 60 / 0.12);
    border: none;
    color: oklch(0.84 0.11 60);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

/* --- Badges ------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-success {
    background: oklch(0.68 0.16 155 / 0.15);
    color: oklch(0.80 0.14 155);
    border: 1px solid oklch(0.68 0.16 155 / 0.25);
}

.badge-error {
    background: oklch(0.60 0.22 25 / 0.15);
    color: oklch(0.78 0.18 25);
    border: 1px solid oklch(0.60 0.22 25 / 0.25);
}

.badge-warn {
    background: oklch(0.72 0.13 60 / 0.15);
    color: oklch(0.82 0.11 60);
    border: 1px solid oklch(0.72 0.13 60 / 0.25);
}

.badge-info {
    background: oklch(0.72 0.13 195 / 0.15);
    color: oklch(0.82 0.12 195);
    border: 1px solid oklch(0.72 0.13 195 / 0.25);
}

.cap-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.cap-badge.badge-success { background: oklch(0.68 0.16 155 / 0.15); color: oklch(0.80 0.14 155); }
.cap-badge.badge-error   { background: oklch(0.60 0.22 25 / 0.15);  color: oklch(0.78 0.18 25); }

/* --- Capability grid (setup wizard) ------------------------- */

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

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

.capability-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-surface-raised);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

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

.cap-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.875rem;
}

/* --- Model list badges ------------------------------------- */

.model-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.model-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    color: oklch(0.82 0.006 30);
}

/* --- Curated shortlist (OpenRouter) ------------------------- */

.curated-shortlist-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface-raised, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

.curated-shortlist-info {
    flex: 1 1 20rem;
}

.curated-shortlist-info p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.catalog-expander {
    margin-bottom: 1.25rem;
}

.catalog-expander > summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.375rem 0;
    user-select: none;
    list-style: none;
}

.catalog-expander > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
}

.catalog-expander[open] > summary::before {
    transform: rotate(90deg);
}

/* --- Provider catalog (OpenRouter) -------------------------- */

.discovery-panel {
    display: grid;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    margin-top: 1rem;
}

.discovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

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

.discovery-search label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--color-text);
}

.discovery-search input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-family: var(--font);
    color: var(--color-text);
    transition: border-color 150ms, box-shadow 150ms;
}

.discovery-search input::placeholder { color: oklch(0.40 0.006 30); }

.discovery-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.catalog-results {
    display: grid;
    gap: 0.75rem;
}

.catalog-model {
    align-items: start;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem auto;
    gap: 1rem;
    padding: 1rem;
    transition: border-color 150ms;
}

.catalog-model:hover {
    border-color: oklch(0.34 0 0);
}

.catalog-model-title {
    display: grid;
    gap: 0.125rem;
}

.catalog-model-main strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--color-text);
}

.catalog-model-main code,
.model-name-cell code {
    background: none;
    border: none;
    color: var(--color-text-muted);
    display: block;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
    padding: 0;
}

.catalog-model-desc {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 0.5rem;
}

.catalog-badges,
.capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
}

.catalog-model-meta {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: center;
}

.catalog-model-meta span {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.75rem;
    padding: 0.5rem;
}

.catalog-model-meta b {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.catalog-model-action {
    display: flex;
    justify-content: flex-end;
    align-self: center;
}

.catalog-error { color: oklch(0.78 0.18 25); }

@media (max-width: 900px) {
    .catalog-model { grid-template-columns: 1fr; }
    .catalog-model-action { justify-content: flex-start; }
    .catalog-model-meta { grid-template-columns: repeat(3, auto); }
}

/* --- Pipeline help (collapsible) ---------------------------- */

.pipeline-help {
    background: oklch(0.72 0.13 60 / 0.08);
    border: 1px solid oklch(0.72 0.13 60 / 0.25);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    padding: 0;
    overflow: hidden;
    transition: border-color 150ms var(--ease-out);
}

.pipeline-help[open] {
    border-color: oklch(0.72 0.13 60 / 0.4);
}

.pipeline-help summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.84 0.11 60);
    padding: 0.625rem 0.875rem;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pipeline-help summary::-webkit-details-marker {
    display: none;
}

.pipeline-help summary::before {
    content: '▶';
    display: inline-block;
    font-size: 0.6rem;
    color: oklch(0.72 0.13 60 / 0.7);
    transition: transform 150ms var(--ease-out);
    line-height: 1;
}

.pipeline-help[open] summary::before {
    transform: rotate(90deg);
}

.pipeline-help-list {
    list-style: none;
    padding: 0 0.875rem 0.75rem;
    font-size: 0.8125rem;
    color: oklch(0.70 0.006 30);
    display: grid;
    gap: 0.375rem;
    margin: 0;
}

.pipeline-help-list li {
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}

.pipeline-help-list li::before {
    content: '–';
    position: absolute;
    left: 0.375rem;
    color: oklch(0.72 0.13 60 / 0.6);
}

.pipeline-help-list code {
    background: oklch(0.72 0.13 60 / 0.12);
    border: none;
    color: oklch(0.84 0.11 60);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: inherit;
}

/* --- Pipeline summary -------------------------------------- */

.pipeline-summary {
    margin-bottom: 1.25rem;
}

.pipeline-summary .section-header {
    margin-bottom: 0.75rem;
}

.pipeline-summary-body {
    display: grid;
    gap: 0;
}

.pipeline-summary-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
    min-height: 2.25rem;
}

.pipeline-summary-row:last-of-type {
    border-bottom: none;
}

.pipeline-summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    justify-self: end;
}

.pipeline-summary-dot--ok {
    background: var(--color-success);
    box-shadow: 0 0 0 3px oklch(0.68 0.16 155 / 0.2);
}

.pipeline-summary-dot--active {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(0.68 0.17 38 / 0.25);
}

.pipeline-summary-label {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pipeline-summary-value {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pipeline-summary-value em {
    color: var(--color-text-muted);
    font-style: italic;
}

.pipeline-summary-empty {
    padding: 0.75rem 0;
    margin: 0;
}

/* --- Pipeline flow ----------------------------------------- */

.pipeline-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0 0.5rem;
    font-size: 0.8125rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
}

.pipeline-flow-dot {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.pipeline-flow-arrow::after {
    content: '→';
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.pipeline-flow-model {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;
    color: oklch(0.82 0.006 30);
}

.pipeline-flow-missing {
    color: var(--color-warn);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pipeline-fallback-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    line-height: 1;
}

/* --- Pipeline mode selection ------------------------------- */

.pipeline-mode-section {
    margin-bottom: 1rem;
}

.pipeline-mode-section .section-header {
    margin-bottom: 0.875rem;
}

/* --- Pipeline stage config --------------------------------- */

.pipeline-stage-section {
    margin-bottom: 1rem;
}

.pipeline-stage-section .section-header {
    margin-bottom: 0.875rem;
}

.pipeline-stage-section .section-copy {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.pipeline-stage-section .section-copy code {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.125rem 0.375rem;
    font-size: inherit;
}

.pipeline-stage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .pipeline-stage-grid {
        grid-template-columns: 1fr;
    }
}

.pipeline-stage-card {
    padding: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    transition: border-color 200ms var(--ease-out);
}

.pipeline-stage-card:hover {
    border-color: oklch(0.34 0 0);
}

.pipeline-stage-card h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pipeline-stage-card .form-help {
    margin-bottom: 0.75rem;
}

.pipeline-stage-card .form-group {
    margin-bottom: 0.5rem;
}

.pipeline-stage-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    display: inline-block;
    margin-top: 0.375rem;
}

.pipeline-stage-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.pipeline-ref-optional {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1.4;
}

.pipeline-ref-optional input {
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* --- Pipeline action bar ----------------------------------- */

.pipeline-action-bar {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* --- Express setup (W9/W10) -------------------------------- */

.express-setup {
    max-width: 980px;
}

.express-section {
    padding: 1.125rem;
}

.express-grid,
.express-model-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.express-grid .form-group,
.express-model-tools .form-group {
    margin-bottom: 0;
}

.express-mode-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.express-mode {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    padding: 1rem;
    transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.express-mode:hover {
    border-color: oklch(0.42 0.10 38);
}

.express-mode.selected {
    background: oklch(0.68 0.17 38 / 0.08);
    border-color: var(--color-primary);
}

.express-mode input {
    accent-color: var(--color-primary);
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.express-mode strong,
.locked-model strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.express-mode small,
.locked-model span {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}

.locked-model {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    padding: 0.875rem;
}

.manual-model-row {
    display: flex;
    gap: 0.5rem;
}

.manual-model-row input {
    min-width: 0;
}

.api-key-row {
    display: flex;
    gap: 0.5rem;
    align-items: start;
}

.api-key-row input {
    flex: 1;
    min-width: 0;
}

.api-key-row .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.model-picker-toolbar {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 1rem;
}

.model-picker-sort {
    flex: 0 1 190px;
    margin-bottom: 0;
}

.model-picker-filters {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    min-height: 2.75rem;
    padding: 0.45rem 0.625rem;
}

.model-picker-filters legend {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0 0.25rem;
}

.model-picker-filters label {
    align-items: center;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8125rem;
    gap: 0.375rem;
    line-height: 1.2;
    padding: 0.35rem 0.5rem;
    transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}

.model-picker-filters label:has(input:checked) {
    background: oklch(0.68 0.17 38 / 0.08);
    border-color: oklch(0.68 0.17 38 / 0.45);
}

.model-picker-filters input {
    accent-color: var(--color-primary);
}

.model-picker-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.model-picker-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    cursor: pointer;
    display: grid;
    gap: 0.625rem;
    min-height: 168px;
    padding: 1rem;
    text-align: left;
    transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}

.model-picker-card:hover {
    border-color: oklch(0.42 0.10 38);
    transform: translateY(-1px);
}

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

.model-picker-card.selected {
    background: oklch(0.68 0.17 38 / 0.08);
    border-color: var(--color-primary);
}

.model-picker-card.manual {
    background: oklch(0.72 0.13 195 / 0.07);
    border-color: oklch(0.72 0.13 195 / 0.28);
}

.model-card-top {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.model-card-top strong {
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.model-card-top .model-card-badge {
    background: oklch(0.68 0.17 38 / 0.16);
    border-radius: var(--radius);
    color: var(--color-primary);
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
}

.model-card-top .tag-custom {
    background: oklch(0.72 0.13 195 / 0.15);
    color: var(--color-accent);
}

.model-card-provider,
.model-card-meta,
.model-card-signals {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.model-card-meta {
    font-family: var(--font-mono);
}

.model-card-meta b {
    color: oklch(0.72 0.006 30);
    font-family: var(--font);
    font-weight: 600;
}

.model-card-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.model-card-signals span {
    background: var(--color-surface);
    border-radius: var(--radius);
    color: oklch(0.74 0.006 30);
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
}

.sig-speed, .sig-quality {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.sig-speed::before {
    content: "⚡";
    font-size: 0.7rem;
}

.sig-quality::before {
    content: "★";
    font-size: 0.7rem;
    color: oklch(0.7 0.1 80);
}

.sig-speed.speed-fast {
    background: oklch(0.9 0.06 145);
    color: oklch(0.3 0.06 145);
}

.sig-speed.speed-slow {
    background: oklch(0.92 0.03 60);
    color: oklch(0.35 0.05 60);
}

.sig-quality.quality-high {
    background: oklch(0.9 0.06 145);
    color: oklch(0.3 0.06 145);
}

.notice-success {
    border-color: oklch(0.68 0.16 155 / 0.35);
}

.notice-warn {
    border-color: oklch(0.72 0.13 60 / 0.35);
}

.notice-error {
    border-color: oklch(0.60 0.22 25 / 0.38);
}

.express-actions {
    margin-bottom: 1.5rem;
}

#express-submit-status.alert > p {
    margin-top: 0.5rem;
}

#express-submit-status.alert > .alert-actions {
    margin-top: 0.75rem;
}

#express-submit-status.alert > .alert-ftnote {
    margin-top: 0.5rem;
    font-size: 0.9em;
    opacity: 0.7;
}

@media (max-width: 760px) {
    .express-grid,
    .express-model-tools,
    .express-mode-group {
        grid-template-columns: 1fr;
    }

    .manual-model-row {
        display: grid;
    }
}

/* --- Verify grid (setup wizard step 7) --------------------- */

.verify-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.verify-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface-raised);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.verify-item strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}

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

.verify-status {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* --- Done card (setup wizard step 8) ----------------------- */

.card-done {
    text-align: center;
    padding: 3rem 2rem;
}

.done-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

/* --- Loading spinner --------------------------------------- */

.loading {
    text-align: center;
    padding: 2rem;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 2.5px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 1rem;
}

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

/* --- Provider detail page ---------------------------------- */

.provider-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.provider-meta-item {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    min-width: 0;
    padding: 0.875rem;
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.provider-meta-item strong {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.settings-form {
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.settings-grid .form-group { margin-bottom: 0; }

.toggle-row {
    align-items: center;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.875rem;
    transition: border-color 150ms;
}

.toggle-row:hover { border-color: oklch(0.34 0 0); }

.toggle-row input { width: auto; flex-shrink: 0; accent-color: var(--color-primary); }

.toggle-row strong,
.toggle-row small { display: block; }

.toggle-row strong { font-size: 0.9375rem; }

.toggle-row small {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

/* Model discovery */
.discover-models-btn { margin-bottom: 0; }

.registered-models-header {
    align-items: end;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.registered-models-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.registered-models-header p {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.model-table-wrap { overflow-x: auto; }

.model-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.model-table th,
.model-table td {
    padding: 0.75rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.model-table th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
    background: var(--color-surface-raised);
}

.model-table tr:hover > td {
    background: var(--color-surface-raised);
}

.model-name-cell { min-width: 16rem; }

.table-action-cell { text-align: right; }

/* Cap pills */
.cap-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.cap-on { color: var(--color-success); }
.cap-off { color: var(--color-text-muted); }

.cap-pill {
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    background: var(--color-surface-raised);
    font-family: inherit;
    line-height: inherit;
}

button.cap-pill {
    cursor: pointer;
    transition: opacity 0.1s;
}

button.cap-pill:hover {
    opacity: 0.75;
}

button.cap-pill:disabled {
    opacity: 0.4;
    cursor: wait;
}

.cap-pill.is-on {
    background: oklch(0.68 0.16 155 / 0.15);
    border-color: oklch(0.68 0.16 155 / 0.3);
    color: oklch(0.80 0.14 155);
}

.cap-pill.is-off {
    background: var(--color-surface-raised);
    color: oklch(0.38 0.004 30);
}

.manual-model-form { max-width: 760px; }

.manual-model-row {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.manual-model-row .form-group { margin-bottom: 0; }

/* Provider list */
.btn-small {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}

.provider-list { display: grid; gap: 0.75rem; }

.provider-list-row {
    align-items: center;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    transition: border-color 150ms;
}

.provider-list-row:hover { border-color: oklch(0.34 0 0); }

.provider-list-name {
    color: var(--color-text);
    display: inline-block;
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.provider-list-name:hover { color: var(--color-primary); }

.provider-list-meta {
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-family: var(--font-mono);
}

.provider-list-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

/* Pipeline status rows (legacy — remove when old templates migrate) */

/* --- Responsive --------------------------------------------- */

@media (max-width: 900px) {
    .provider-meta,
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .provider-meta,
    .settings-grid,
    .manual-model-row {
        grid-template-columns: 1fr;
    }

    .provider-list-row,
    .provider-list-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .pipeline-summary-row {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .pipeline-flow {
        gap: 0.375rem;
    }

    .pipeline-stage-section .section-header {
        display: block;
    }

}

/* --- Footer ------------------------------------------------- */

.footer {
    text-align: center;
    font-size: 0.8125rem;
    color: oklch(0.35 0.004 30);
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
}