/* Hydra UI: neutral foundation and geometry follow LC 88522f9 exactly. */
:root,
.theme-dark {
    color-scheme: dark;
    --background: #080808;
    --foreground: #e7e5e4;
    --muted: #151515;
    --muted-foreground: #a1a1aa;
    --card: #111111;
    --card-foreground: #e7e5e4;
    --border: #292929;
    --input: #3a3a3a;
    --secondary: #181818;
    --secondary-foreground: #d4d4d8;
    --accent: #242424;
    --accent-foreground: #f4f4f5;
    --primary: #e7e5e4;
    --primary-foreground: #0a0a0a;
    --ai-accent: #4ade80;
    --ai-accent-hover: #86efac;
    --ai-accent-soft: rgba(74, 222, 128, .10);
    --ai-accent-border: rgba(74, 222, 128, .28);
    --ai-accent-text: #86efac;
    --ai-accent-foreground: #052e16;
    --focus-ring: rgba(244, 244, 245, .10);
    --success: #86efac;
    --success-soft: rgba(134, 239, 172, .10);
    --warning: #fcd34d;
    --warning-soft: rgba(252, 211, 77, .11);
    --danger: #fda4af;
    --danger-soft: rgba(253, 164, 175, .12);
    --attention: #fb923c;
    --attention-soft: rgba(251, 146, 60, .12);
    --review: #c4b5fd;
    --review-soft: rgba(196, 181, 253, .12);
    --info: #93c5fd;
    --info-soft: rgba(147, 197, 253, .11);
    --radius: .625rem;
    --shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --scrollbar-size: 10px;
    --scrollbar-track: rgba(255, 255, 255, .04);
    --scrollbar-thumb: rgba(255, 255, 255, .16);
    --scrollbar-thumb-hover: rgba(255, 255, 255, .28);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

.theme-light {
    color-scheme: light;
    --background: #f8fafc;
    --foreground: #0f172a;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --card: #fff;
    --card-foreground: #0f172a;
    --border: #e2e8f0;
    --input: #cbd5e1;
    --secondary: #f1f5f9;
    --secondary-foreground: #0f172a;
    --accent: #dbeafe;
    --accent-foreground: #1e3a8a;
    --primary: #2563eb;
    --primary-foreground: #fff;
    --ai-accent: #16a34a;
    --ai-accent-hover: #15803d;
    --ai-accent-soft: rgba(22, 163, 74, .09);
    --ai-accent-border: rgba(22, 163, 74, .26);
    --ai-accent-text: #15803d;
    --ai-accent-foreground: #052e16;
    --focus-ring: rgba(37, 99, 235, .16);
    --attention: #ea580c;
    --attention-soft: rgba(234, 88, 12, .10);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, .10);
    --shadow: 0 18px 48px rgba(15, 23, 42, .12);
    --scrollbar-track: rgba(15, 23, 42, .06);
    --scrollbar-thumb: rgba(15, 23, 42, .22);
    --scrollbar-thumb-hover: rgba(15, 23, 42, .36);
}

* { box-sizing: border-box; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; }
*::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(circle at top right, rgba(244, 244, 245, .035), transparent 34rem), var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 1.45; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
code, pre { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-foreground); }

/* Shell */
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.app-main { min-width: 0; }
.app-sidebar { align-self: start; background: rgba(14, 14, 14, .92); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; max-height: 100vh; overflow-y: auto; padding: 16px; position: sticky; top: 0; }
.sidebar-brand { align-items: center; border-bottom: 1px solid var(--border); display: flex; min-height: 44px; padding: 0 6px 12px; }
.brand { align-items: center; display: inline-flex; }
.brand-logo { display: block; height: 30px; max-width: 150px; object-fit: contain; }
.brand-logo-dark { display: none; }
.theme-dark .brand-logo-default { display: none; }
.theme-dark .brand-logo-dark { display: block; }
.sidebar-nav { display: flex; flex: 1; flex-direction: column; gap: 12px; padding-top: 12px; }
.nav-section { display: grid; gap: 4px; min-width: 0; }
.nav-section + .nav-section { border-top: 1px solid var(--border); padding-top: 12px; }
.nav-section-bottom { margin-top: auto; }
.nav-section-title { color: var(--muted-foreground); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 0 10px 3px; text-transform: uppercase; }
.nav-item { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--muted-foreground); display: flex; font-weight: 500; gap: 9px; min-height: 34px; padding: 0 10px; position: relative; transition: background-color 120ms ease, color 120ms ease; }
.nav-item:hover { background: var(--muted); color: var(--foreground); }
.nav-item-primary { background: var(--primary); color: var(--primary-foreground); }
.nav-item-primary:hover { background: var(--primary); color: var(--primary-foreground); filter: brightness(.94); }
.nav-item-active { background: rgba(244, 244, 245, .075); color: var(--foreground); }
.nav-item-active::before { background: var(--foreground); border-radius: 999px; content: ""; height: 16px; left: 0; opacity: .86; position: absolute; width: 2px; }
.nav-item-icon { align-items: center; display: inline-flex; height: 18px; justify-content: center; width: 18px; }
.nav-item-icon svg { height: 18px; width: 18px; }
.app-topbar { align-items: center; background: rgba(8, 8, 8, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; gap: 16px; justify-content: space-between; min-height: 64px; padding: 0 24px; position: sticky; top: 0; z-index: 20; }
.topbar-left, .topbar-right { align-items: center; display: flex; gap: 12px; min-width: 0; }
.topbar-product { color: var(--muted-foreground); font-size: 13px; font-weight: 600; }
.project-switcher { align-items: center; display: flex; gap: 8px; min-width: 0; }
.project-switcher-label { color: var(--muted-foreground); flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.project-switcher-select { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--foreground); cursor: pointer; font-size: 13px; font-weight: 700; max-width: min(42vw, 360px); min-height: 36px; overflow: hidden; padding: 7px 30px 7px 10px; text-overflow: ellipsis; }
.project-switcher-select:hover { background: rgba(244, 244, 245, .06); }
.project-switcher-select:focus-visible { border-color: rgba(244, 244, 245, .34); outline: none; }
.project-switcher::after { border-bottom: 1.5px solid var(--muted-foreground); border-right: 1.5px solid var(--muted-foreground); content: ""; height: 6px; margin-left: -26px; pointer-events: none; transform: rotate(45deg) translateY(-2px); width: 6px; }
.account-link { align-items: center; border-radius: var(--radius); display: flex; gap: 9px; padding: 5px 8px; }
.account-link:hover { background: var(--muted); }
.account-avatar { align-items: center; background: var(--accent); border: 1px solid var(--border); border-radius: 50%; color: var(--foreground); display: inline-flex; font-size: 12px; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
.account-name { font-weight: 600; }
.app-content { display: flex; flex-direction: column; gap: 16px; margin: 0 auto; max-width: 1180px; padding: 24px; width: 100%; }
.app-content > section { display: grid; gap: 16px; }

/* Page structure */
.page-header { display: grid; gap: 6px; margin-bottom: 0; }
.page-header-main { align-items: flex-end; display: flex; gap: 20px; justify-content: space-between; }
.page-header h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; }
.page-header p { color: var(--muted-foreground); margin: 0; max-width: 760px; }
.breadcrumbs { color: var(--muted-foreground); font-size: 12px; font-weight: 600; }
.breadcrumb-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb-item { align-items: center; display: inline-flex; gap: 6px; }
.breadcrumb-item:not(.breadcrumb-current)::after { color: var(--border); content: "/"; }
.breadcrumb-list a:hover { color: var(--foreground); }
.breadcrumb-current { color: var(--foreground); }
.page-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: -54px 0 0; }
.card { background: rgba(17, 17, 17, .86); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 0; min-width: 0; overflow: hidden; }
.card-header { align-items: flex-start; border-bottom: 1px solid var(--border); display: flex; gap: 16px; justify-content: space-between; padding: 15px 16px 12px; }
.card-title { font-size: 16px; font-weight: 650; line-height: 1.3; margin: 0; }
.card-description { color: var(--muted-foreground); font-size: 13px; margin: 4px 0 0; }
.card-content { padding: 16px; }
.card-content-flush { padding: 0; }
.card-footer { align-items: center; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; }
.responsive-grid { display: grid; gap: 20px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: 16px; }

/* Controls */
.btn { align-items: center; appearance: none; background: transparent; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); cursor: pointer; display: inline-flex; font-weight: 500; gap: 8px; justify-content: center; min-height: 36px; padding: 8px 14px; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease; }
.btn:hover { transform: translateY(-.5px); }
.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 10px 24px rgba(244, 244, 245, .10); color: var(--primary-foreground); }
.btn-primary:hover { filter: brightness(.94); }
.btn-ai { background: var(--ai-accent); border-color: var(--ai-accent); box-shadow: 0 10px 24px var(--ai-accent-soft); color: var(--ai-accent-foreground); }
.btn-ai:hover { background: var(--ai-accent-hover); border-color: var(--ai-accent-hover); color: var(--ai-accent-foreground); }
.btn-ai-outline { background: var(--ai-accent-soft); border-color: var(--ai-accent-border); color: var(--ai-accent-text); }
.btn-ai-outline:hover { background: var(--ai-accent); border-color: var(--ai-accent); color: var(--ai-accent-foreground); }
.btn-secondary { background: var(--secondary); border-color: var(--border); color: var(--secondary-foreground); }
.btn-secondary:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #1f1114; }
.btn-small { font-size: 12px; min-height: 31px; padding: 5px 9px; }
.btn-icon { height: 34px; min-height: 34px; padding: 7px; width: 34px; }
.btn-icon svg { height: 18px; width: 18px; }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.form-field { display: grid; gap: 7px; min-width: 0; }
.form-label { color: var(--foreground); font-size: 13px; font-weight: 700; }
.form-hint { color: var(--muted-foreground); font-size: 12px; }
.form-error, .text-danger, .health-error { color: var(--danger); }
.input, .textarea, .select { appearance: none; background: rgba(8, 8, 8, .72); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); color: var(--foreground); min-height: 36px; padding: .55rem .75rem; width: 100%; }
.input:disabled { background: var(--muted); color: var(--muted-foreground); }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); opacity: .72; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
.textarea { line-height: 1.55; min-height: 120px; resize: vertical; }
.select { background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-repeat: no-repeat; background-size: 5px 5px; padding-right: 32px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Semantic feedback */
.badge { align-items: center; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 800; gap: 6px; line-height: 1rem; padding: 3px 8px; text-transform: uppercase; white-space: nowrap; width: fit-content; }
.status-new, .status-pending, .status-draft, .status-pending-original, .status-queued { background: var(--info-soft); border-color: rgba(147, 197, 253, .24); color: var(--info); }
.status-processing, .status-running, .status-ingesting { background: var(--warning-soft); border-color: rgba(245, 158, 11, .28); color: var(--warning); }
.status-completed, .status-ok, .status-ready, .status-sealed, .status-original-stored, .status-succeeded { background: var(--success-soft); border-color: rgba(34, 197, 94, .28); color: var(--success); }
.status-failed, .status-misconfigured, .status-stale, .status-blocked { background: var(--danger-soft); border-color: rgba(239, 68, 68, .28); color: var(--danger); }
.status-partial { background: var(--attention-soft); border-color: rgba(234, 88, 12, .28); color: var(--attention); }
.status-current, .status-available { background: var(--success-soft); border-color: rgba(34, 197, 94, .28); color: var(--success); }
.status-building { background: var(--warning-soft); border-color: rgba(245, 158, 11, .28); color: var(--warning); }
.status-unavailable, .status-not-present, .status-not-requested { background: var(--muted); color: var(--muted-foreground); }
.alert { border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 3px; margin: 0 0 16px; padding: 12px 14px; }
.alert-success { background: var(--success-soft); border-color: rgba(34, 197, 94, .28); color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: rgba(245, 158, 11, .28); color: #fbbf24; }
.alert-danger { background: var(--danger-soft); border-color: rgba(239, 68, 68, .28); color: #fca5a5; }
.alert-info { background: var(--info-soft); border-color: rgba(147, 197, 253, .24); color: var(--info); }
.toast { box-shadow: var(--shadow); margin-left: auto; max-width: 560px; }

/* Navigation, lists and content */
.tabs { border-bottom: 1px solid var(--border); display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; }
.tab { border-bottom: 2px solid transparent; color: var(--muted-foreground); font-weight: 700; padding: 10px 13px; }
.tab:hover { color: var(--foreground); }
.tab-active { border-bottom-color: var(--primary); color: var(--foreground); }
.list-panel { display: grid; }
.list-row, .workspace-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 14px; min-width: 0; padding: 14px 18px; transition: background-color 140ms ease; }
.list-row { grid-template-columns: auto auto minmax(0, 1fr); }
.workspace-row { grid-template-columns: auto minmax(0, 1fr); }
.member-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto minmax(220px, auto) auto; padding: 14px 18px; }
.member-row:first-child { border-top: 0; }
.inline-form { align-items: center; display: flex; gap: 8px; }
.inline-form .select { min-width: 110px; }
.project-facts { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-facts > div { display: grid; gap: 5px; }
.list-row:first-child, .workspace-row:first-child { border-top: 0; }
.list-row:hover, .workspace-row:hover { background: var(--muted); }
.row-main { min-width: 0; }
.package-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secondary-text { color: var(--muted-foreground); }
.empty-state { color: var(--muted-foreground); padding: 42px 22px; text-align: center; }
.empty-state.compact { padding: 28px 20px; }
.empty-state h2 { color: var(--foreground); font-size: 15px; margin: 0 0 5px; }
.empty-state p { margin: 0 auto; max-width: 560px; }
.source-meta-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.source-meta-grid > div { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 7px; padding: 13px; }
.section-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.section-heading h2, .section-heading h3 { font-size: 14px; margin: 0; }
.copy-actions { align-items: center; display: flex; gap: 7px; }
.copy-feedback-label { color: var(--success); font-size: 12px; min-height: 1em; }
.code-block { background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); color: var(--card-foreground); margin: 0; max-height: 38rem; overflow: auto; padding: 14px; white-space: pre-wrap; word-break: break-word; }
.generated-surface { border-color: var(--ai-accent-border); box-shadow: inset 2px 0 0 var(--ai-accent-border); }
.generated-surface .card-header { border-bottom-color: var(--ai-accent-border); }
.ai-badge { background: var(--ai-accent-soft); border-color: var(--ai-accent-border); color: var(--ai-accent-text); }
.ai-heading { color: var(--ai-accent-text); }
.stage-list { display: grid; }
.stage-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: minmax(120px, .8fr) auto minmax(170px, 1.2fr) minmax(110px, .8fr) auto auto; padding: 14px 18px; }
.stage-row:first-child { border-top: 0; }
.stage-row .text-danger, .stage-row .health-error { grid-column: 1 / -1; }
.health-actions { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 20px; }
.health-result { text-transform: none; }

/* Dialog and recorder */
.modal-dialog { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--foreground); max-height: min(760px, calc(100vh - 40px)); max-width: min(920px, calc(100vw - 40px)); padding: 0; width: 100%; }
.modal-dialog::backdrop { background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px); }
.modal-header { align-items: flex-start; border-bottom: 1px solid var(--border); display: flex; gap: 16px; justify-content: space-between; padding: 18px 20px; }
.modal-header h2 { font-size: 17px; margin: 0; }
.modal-header p { color: var(--muted-foreground); margin: 4px 0 0; }
.modal-content { max-height: calc(100vh - 190px); overflow: auto; padding: 20px; }
.modal-footer { border-top: 1px solid var(--border); display: flex; justify-content: flex-end; padding: 14px 20px; }
.provider-diagnostics-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.provider-diagnostics-grid section { display: grid; gap: 10px; min-width: 0; }
.recorder { align-items: center; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
.record-button { align-items: center; background: var(--secondary); border: 1px solid var(--border); border-radius: 50%; color: var(--foreground); cursor: pointer; display: inline-flex; height: 46px; justify-content: center; width: 46px; }
.record-button:hover { background: var(--accent); }
.record-button:disabled { cursor: not-allowed; opacity: .55; }
.record-button.recording { animation: record-pulse 1.6s ease-in-out infinite; background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.record-mic { height: 22px; position: relative; width: 16px; }
.record-mic-head { border: 2px solid currentColor; border-radius: 8px; height: 13px; left: 4px; position: absolute; top: 0; width: 8px; }
.record-mic-stem { border: 2px solid currentColor; border-top: 0; border-radius: 0 0 8px 8px; height: 10px; left: 1px; position: absolute; top: 7px; width: 14px; }
.record-mic-stem::after { background: currentColor; bottom: -5px; content: ""; height: 5px; left: 5px; position: absolute; width: 2px; }
.recording-panel { align-items: center; display: grid; gap: 9px; grid-template-columns: minmax(100px, 1fr) auto auto; }
.recording-track { background: var(--border); border-radius: 999px; height: 7px; overflow: hidden; }
.recording-progress { background: var(--danger); height: 100%; width: 0; }
.recording-timer { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 12px; }
.voice-meter { align-items: center; display: flex; gap: 2px; height: 20px; }
.voice-meter span { background: var(--muted-foreground); border-radius: 999px; height: 5px; transition: height 80ms ease, background-color 80ms ease; width: 3px; }
.voice-meter span.active { background: var(--info); height: 17px; }
.recorder-status { grid-column: 2; }
.composer-tools { display: grid; gap: 18px; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); }
.package-entry-options { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package-entry-option { align-content: space-between; border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 16px; min-width: 0; padding: 16px; }
.package-entry-option h3 { font-size: 15px; margin: 0 0 5px; }
.package-entry-option p { margin: 0; }
.package-entry-option .btn { justify-self: start; }
.package-row-main { display: grid; gap: 6px; min-width: 0; }
.package-processing-summary { align-items: center; color: var(--muted-foreground); display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px 10px; }
.package-processing-summary > span { align-items: center; display: inline-flex; gap: 6px; min-width: 0; }
.package-summary-compact { align-items: center; color: var(--muted-foreground); display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px 9px; min-width: 0; }
.summary-level { color: var(--foreground); font-weight: 650; }
.summary-content { display: grid; gap: 16px; }
.summary-content > .alert { margin-bottom: 0; }
.summary-factual { display: grid; gap: 10px; }
.summary-facts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.summary-facts > div { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 5px; min-width: 0; padding: 11px 12px; }
.summary-facts strong { overflow-wrap: anywhere; }
.summary-levels { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: grid; overflow: hidden; }
.summary-level-row { align-items: center; border-top: 1px solid var(--border); color: inherit; display: grid; gap: 10px; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1.4fr) auto; min-width: 0; padding: 10px 12px; text-decoration: none; }
.summary-level-row:first-child { border-top: 0; }
.summary-level-row:hover { background: var(--muted); }
.summary-level-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); outline: none; }
.summary-generated { border: 1px solid var(--ai-accent-border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 10px; padding: 13px 14px; }
.summary-generated-copy { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.summary-actions { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; }
.composer-file-button { width: fit-content; }
.composer-file-button.disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }
.composer-tool-copy { margin: 3px 0 0; }
.package-recorder { min-width: 0; }
.package-recorder .recording-panel { grid-column: 2; }
.composer-source-list { display: grid; min-width: 0; }
.composer-source-row, .source-original-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 14px 16px; }
.composer-source-main, .source-original-main { display: grid; gap: 4px; min-width: 0; }
.composer-source-name, .source-original-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.composer-source-meta { color: var(--muted-foreground); font-size: 12px; overflow-wrap: anywhere; }
.composer-source-status { border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 11px; font-weight: 800; padding: 3px 8px; text-transform: uppercase; white-space: nowrap; }
.composer-source-status[data-state="uploading"], .composer-source-status[data-state="preparing"] { background: var(--warning-soft); color: var(--warning); }
.composer-source-status[data-state="stored"] { background: var(--muted); color: var(--foreground); }
.composer-source-status[data-state="failed"], .composer-source-status[data-state="rejected"] { background: var(--danger-soft); color: var(--danger); }
.composer-progress { background: var(--border); border-radius: 999px; grid-column: 1 / -1; height: 5px; overflow: hidden; }
.composer-progress-bar { background: var(--info); height: 100%; width: 0; }
.source-item { border-top: 1px solid var(--border); display: grid; }
.source-item:first-child { border-top: 0; }
.source-item .source-original-row { border-top: 0; }
.source-summary-link { color: inherit; text-decoration: none; }
.source-summary-link:hover { background: var(--accent); }
.source-summary-link:focus-visible { border-radius: var(--radius); outline: 2px solid var(--ring); outline-offset: -2px; }
.source-detail-section + .source-detail-section { margin-top: 16px; }
.source-result-foundation { display: grid; gap: 4px; }
.text-source-evidence { background: var(--muted); border-top: 1px solid var(--border); display: grid; gap: 12px; padding: 14px 16px 16px; }
.text-source-original, .text-normalized-surface { display: grid; gap: 10px; min-width: 0; }
.text-normalized-surface { border: 1px solid var(--ai-accent-border); border-radius: calc(var(--radius) - 2px); padding: 14px; }
.text-source-content { max-height: 28rem; }
.text-provenance-details { border-top: 1px solid var(--border); padding-top: 8px; }
.text-provenance-details summary { color: var(--muted-foreground); cursor: pointer; font-size: 12px; font-weight: 600; }
.text-provenance-details summary:hover { color: var(--foreground); }
.text-provenance-grid, .text-draft-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.text-provenance-grid span, .text-draft-meta span { overflow-wrap: anywhere; }
.text-source-editor { min-height: 19rem; }
.text-draft-next-step { margin-top: 18px; }
.audio-source-experience { border-top: 1px solid var(--ai-accent-border); display: grid; gap: 14px; min-width: 0; padding: 16px; }
.audio-source-player { display: block; max-width: 100%; width: 100%; }
.audio-timeline-content { display: grid; gap: 14px; min-width: 0; }
.audio-timeline-meta { display: flex; flex-wrap: wrap; font-size: 12px; gap: 8px 18px; }
.audio-cue-section { border: 1px solid var(--ai-accent-border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 10px; min-width: 0; padding: 14px; }
.audio-cue-section h4 { font-size: 14px; margin: 0; }
.audio-cue-section p { margin: 3px 0 0; }
.audio-cue-list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.audio-cue { align-items: start; border-top: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px 0; }
.audio-cue:first-child { border-top: 0; }
.audio-cue-time { background: transparent; border: 0; color: var(--info); cursor: pointer; font-family: var(--font-mono); font-size: 12px; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }
.audio-cue-time:hover, .audio-cue-time:focus-visible { color: var(--foreground); }
.audio-cue-text { min-width: 0; overflow-wrap: anywhere; }
.audio-failed-segment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.audio-correction-details { border-top: 1px solid var(--border); padding-top: 10px; }
.audio-correction-details summary { color: var(--ai-accent-text); cursor: pointer; font-size: 12px; font-weight: 700; }
.audio-correction-form { margin-top: 12px; }
.image-source-experience { min-width: 0; }
.image-preview-panel, .image-result-panel { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); min-width: 0; overflow: hidden; }
.image-original-heading, .image-results-heading { padding: 12px; }
.image-preview-toolbar { align-items: center; background: var(--muted); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.image-preview-toolbar .secondary-text { margin-left: auto; }
.image-preview-toolbar [aria-pressed="true"] { border-color: var(--foreground); color: var(--foreground); }
.image-preview-viewport { background: #050505; max-height: 38rem; overflow: auto; padding: 10px; }
.image-preview-canvas { margin: auto; max-width: none; position: relative; width: 100%; }
.image-original-preview { display: block; height: auto; max-width: none; width: 100%; }
.image-region-overlay { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; }
.image-region-shape { fill: rgba(37, 99, 235, .12); pointer-events: auto; stroke: var(--info); stroke-width: 3500; }
.image-region-shape:hover, .image-region-shape:focus-visible { fill: rgba(37, 99, 235, .24); outline: none; stroke-width: 6000; }
.image-region-shape.is-selected { fill: var(--info-soft); stroke: var(--info); stroke-width: 7000; }
.image-result-panel { display: grid; }
.image-result-status { padding: 10px 12px 0; }
.image-result-tabs { border-bottom: 1px solid var(--border); display: flex; gap: 4px; padding: 8px 10px 0; }
.image-result-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted-foreground); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px; }
.image-result-tab[aria-selected="true"] { border-bottom-color: var(--foreground); color: var(--foreground); }
.image-result-content { display: grid; gap: 12px; min-width: 0; padding: 12px; }
.image-ocr-text { max-height: 16rem; user-select: text; white-space: pre-wrap; }
.image-region-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.image-region-button { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); color: var(--foreground); cursor: pointer; display: grid; gap: 3px; padding: 9px 10px; text-align: left; width: 100%; }
.image-region-button[aria-selected="true"] { border-color: var(--info); box-shadow: inset 3px 0 0 var(--info); }
.image-region-button .secondary-text { font-size: 11px; }
.image-description { overflow-wrap: anywhere; white-space: pre-wrap; }
.image-result-meta { display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px 14px; }
.document-source-experience { min-width: 0; }
.document-results-surface { display: grid; gap: 14px; min-width: 0; }
.document-workspace { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(112px, .55fr) minmax(280px, 2fr) minmax(280px, 1.4fr); min-width: 0; }
.document-page-rail, .document-preview-panel, .document-result-panel { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); min-width: 0; overflow: hidden; }
.document-page-rail { max-height: 42rem; overflow-y: auto; padding: 8px; }
.document-page-list { display: grid; gap: 6px; }
.document-page-button { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); color: var(--foreground); cursor: pointer; display: grid; font: inherit; gap: 3px; padding: 9px; text-align: left; width: 100%; }
.document-page-button[aria-current="page"] { border-color: var(--ai-accent); box-shadow: inset 3px 0 0 var(--ai-accent); }
.document-page-button .secondary-text { font-size: 11px; }
.document-page-toolbar { align-items: center; background: var(--muted); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 10px; }
.document-preview-viewport { background: #303238; max-height: 42rem; overflow: auto; padding: 12px; }
.document-preview-canvas { aspect-ratio: var(--document-page-ratio, 0.7727); background: #fff; color: #222; margin: auto; max-width: 100%; position: relative; width: min(100%, 42rem); }
.document-page-preview { display: block; height: 100%; object-fit: contain; width: 100%; }
.document-page-placeholder { align-items: center; display: flex; height: 100%; justify-content: center; padding: 24px; text-align: center; }
.document-region-overlay { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; }
.document-region-shape { fill: rgba(37, 99, 235, .10); pointer-events: auto; stroke: var(--info); stroke-width: 3500; }
.document-region-shape:hover, .document-region-shape:focus-visible { fill: rgba(37, 99, 235, .23); outline: none; stroke-width: 6000; }
.document-region-shape.is-selected { fill: var(--info-soft); stroke: var(--info); stroke-width: 7000; }
.document-result-panel { display: grid; }
.document-page-status { padding: 10px 12px 0; }
.document-method-summary { border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.document-result-content { display: grid; gap: 14px; min-width: 0; padding: 12px; }
.document-result-level { display: grid; gap: 8px; min-width: 0; }
.document-result-level + .document-result-level { border-top: 1px solid var(--border); padding-top: 12px; }
.document-block-list, .document-image-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.document-block-button { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); color: var(--foreground); cursor: pointer; display: grid; font: inherit; gap: 4px; overflow-wrap: anywhere; padding: 9px 10px; text-align: left; width: 100%; }
.document-block-button[aria-selected="true"] { border-color: var(--info); box-shadow: inset 3px 0 0 var(--info); }
.document-block-meta { color: var(--muted-foreground); font-size: 11px; }
.document-image-link { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }
.document-table-note { border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); color: var(--muted-foreground); font-size: 12px; padding: 9px 10px; }
.document-retry-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.presentation-source-experience { min-width: 0; }
.presentation-results-surface { display: grid; gap: 14px; min-width: 0; }
.presentation-workspace { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(124px, .6fr) minmax(300px, 2fr) minmax(300px, 1.45fr); min-width: 0; }
.presentation-slide-rail, .presentation-preview-panel, .presentation-result-panel { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); min-width: 0; overflow: hidden; }
.presentation-slide-rail { max-height: 42rem; overflow-y: auto; padding: 8px; }
.presentation-slide-list { display: grid; gap: 6px; }
.presentation-slide-button { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); color: var(--foreground); cursor: pointer; display: grid; font: inherit; gap: 3px; padding: 9px; text-align: left; width: 100%; }
.presentation-slide-button[aria-current="page"] { border-color: var(--ai-accent); box-shadow: inset 3px 0 0 var(--ai-accent); }
.presentation-slide-button .secondary-text { font-size: 11px; }
.presentation-slide-toolbar { align-items: center; background: var(--muted); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 10px; }
.presentation-preview-viewport { background: #303238; max-height: 42rem; overflow: auto; padding: 12px; }
.presentation-preview-canvas { aspect-ratio: var(--presentation-slide-ratio, 16 / 9); background: #fff; color: #222; margin: auto; max-width: 100%; position: relative; width: min(100%, 48rem); }
.presentation-slide-preview { display: block; height: 100%; object-fit: contain; width: 100%; }
.presentation-preview-placeholder { align-items: center; display: flex; height: 100%; justify-content: center; padding: 24px; text-align: center; }
.presentation-region-overlay { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; }
.presentation-region-shape { fill: rgba(37, 99, 235, .10); pointer-events: auto; stroke: var(--info); stroke-width: 3500; }
.presentation-region-shape:hover, .presentation-region-shape:focus-visible { fill: rgba(37, 99, 235, .23); outline: none; stroke-width: 6000; }
.presentation-region-shape.is-selected { fill: var(--info-soft); stroke: var(--info); stroke-width: 7000; }
.presentation-result-panel { display: grid; }
.presentation-slide-status { padding: 10px 12px 0; }
.presentation-result-content { display: grid; gap: 14px; min-width: 0; padding: 12px; }
.presentation-result-level { display: grid; gap: 9px; min-width: 0; }
.presentation-result-level + .presentation-result-level { border-top: 1px solid var(--border); padding-top: 12px; }
.presentation-object-list, .presentation-image-list, .presentation-notes-list, .presentation-diagnostic-list { display: grid; gap: 7px; margin: 0; padding-left: 22px; }
.presentation-object-button { background: var(--muted); border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); color: var(--foreground); cursor: pointer; display: grid; font: inherit; gap: 4px; overflow-wrap: anywhere; padding: 8px; text-align: left; width: 100%; }
.presentation-object-button[aria-selected="true"] { border-color: var(--info); box-shadow: inset 3px 0 0 var(--info); }
.presentation-object-text, .presentation-generated-text, .presentation-note, .presentation-diagnostic-list { overflow-wrap: anywhere; white-space: pre-wrap; }
.presentation-image-list { list-style: none; padding-left: 0; }
.presentation-retry-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.video-source-experience { min-width: 0; }
.video-original-preview, .video-results-surface { display: grid; gap: 14px; min-width: 0; }
.video-source-player { background: #050505; display: block; max-height: 70vh; max-width: 100%; width: 100%; }
.video-branch-status, .video-range-controls, .video-page-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.video-branch-badge, .video-frame-state { background: var(--muted); border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 11px; font-weight: 800; padding: 4px 8px; }
.video-branch-badge[data-status="FAILED"], .video-branch-badge[data-status="BLOCKED"], .video-frame-state[data-status="FAILED"], .video-frame-state[data-status="BLOCKED"] { background: var(--danger-soft); color: var(--danger); }
.video-branch-badge[data-status="RUNNING"], .video-branch-badge[data-status="PENDING"] { background: var(--warning-soft); color: var(--warning); }
.video-range-label { flex: 1 1 150px; text-align: center; }
.video-timeline-content { display: grid; gap: 14px; min-width: 0; }
.video-cue-section, .video-frame-section { border: 1px solid var(--ai-accent-border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 10px; min-width: 0; padding: 14px; }
.video-cue-section h4, .video-frame-section h4 { font-size: 14px; margin: 0; }
.video-cue-list, .video-frame-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.video-cue { align-items: start; border-top: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px 0; }
.video-cue:first-child { border-top: 0; }
.video-cue-time { background: transparent; border: 0; color: var(--info); cursor: pointer; font-family: var(--font-mono); font-size: 12px; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }
.video-cue-time:hover, .video-cue-time:focus-visible { color: var(--foreground); }
.video-cue-copy, .video-frame-copy, .video-frame-description { min-width: 0; overflow-wrap: anywhere; }
.video-cue-type { color: var(--muted-foreground); font-size: 11px; }
.video-cue[aria-current="true"], .video-frame-card[aria-current="true"] { box-shadow: inset 3px 0 0 var(--info); }
.video-frame-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.video-frame-card { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); min-width: 0; overflow: hidden; }
.video-frame-image { aspect-ratio: 16 / 9; background: #050505; display: block; object-fit: contain; width: 100%; }
.video-frame-body { display: grid; gap: 8px; min-width: 0; padding: 11px; }
.video-frame-heading { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.video-frame-description { color: var(--ai-accent-text); }
.video-page-controls { justify-content: space-between; }
.processing-meta-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.processing-meta-main { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.processing-recovery { display: grid; gap: 8px; }
.processing-failed-parts { border: 1px solid var(--danger); border-radius: calc(var(--radius) - 2px); display: grid; overflow: hidden; }
.processing-diagnostics { align-items: center; color: var(--muted-foreground); display: flex; flex-wrap: wrap; font-size: 12px; gap: 14px; }
.processing-diagnostics strong { color: var(--foreground); }
.processing-parts-list { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: grid; overflow: hidden; }
.processing-generated-list { border-color: var(--ai-accent-border); }
.processing-part-row { align-items: center; background: var(--muted); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 10px 14px; }
.processing-part-row:first-child { border-top: 0; }
.processing-part-main { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.processing-part-key { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.processing-retry-form { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.processing-retry-scope { color: var(--muted-foreground); flex: 1 1 180px; font-size: 12px; }
.processing-technical-details, .processing-history-details { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.processing-technical-details summary, .processing-history-details summary { color: var(--muted-foreground); cursor: pointer; font-size: 12px; font-weight: 600; }
.processing-technical-details summary:hover, .processing-history-details summary:hover { color: var(--foreground); }
.processing-attempts-list { display: grid; gap: 6px; margin-top: 8px; }
.processing-attempt-row { align-items: center; display: flex; flex-wrap: wrap; font-size: 12px; gap: 10px; padding: 4px 0; }
.processing-history-run { display: grid; gap: 8px; margin-top: 12px; }
.processing-settings { display: grid; gap: 16px; }
.processing-configuration-card + .processing-configuration-card { margin-top: 0; }
.processing-configuration-fields { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.processing-configuration-toggles, .processing-configuration-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.processing-checkbox { align-items: center; display: inline-flex; gap: 8px; }
.processing-checkbox input { accent-color: var(--ai-accent); height: 16px; width: 16px; }
.processing-resolved-diagnostic, .processing-health-diagnostic { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: flex; flex-wrap: wrap; font-size: 12px; gap: 8px 16px; min-height: 42px; padding: 10px 12px; }
.processing-health-diagnostic:empty { display: none; }
.processing-unavailable-card { margin-top: 16px; }
.project-settings-tabs { scrollbar-width: thin; }
.settings-field-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-secondary-card { margin-top: 16px; }
.integration-feedback { min-height: 1.25rem; }
.token-list, .http-channel-list { min-width: 0; }
.token-row, .http-channel-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 14px 16px; }
.token-row:first-child, .http-channel-row:first-child { border-top: 0; }
.token-row .row-main, .http-channel-row .row-main { display: grid; gap: 4px; overflow-wrap: anywhere; }
.token-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.token-secret-value { min-height: 86px; overflow-wrap: anywhere; }
.code-field { font-family: var(--font-mono); font-size: 12px; min-height: 150px; tab-size: 2; }
.integration-layout { grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); }
.trigger-fieldset { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 10px; margin: 0; padding: 12px; }
.trigger-option span { overflow-wrap: anywhere; }
.http-test-result { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); display: grid; gap: 5px; padding: 12px; }
.http-test-result[hidden], .token-secret-panel[hidden], .mcp-config-panel[hidden] { display: none; }

/* Public shell */
.auth-page { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 28px; }
.auth-card { box-shadow: var(--shadow); margin: 0; max-width: 420px; width: 100%; }
.auth-brand { border-bottom: 1px solid var(--border); display: flex; justify-content: center; padding: 24px 20px 18px; }
.brand-auth .brand-logo { height: 46px; max-width: 190px; }
.auth-card .card-header { display: block; text-align: center; }
.auth-card .btn-primary { width: 100%; }
.error-code { color: var(--foreground); font-size: clamp(2.25rem, 10vw, 4rem); font-weight: 800; letter-spacing: -.055em; line-height: 1; margin: 0 0 12px; }
.auth-card .secondary-text { margin: 0; overflow-wrap: anywhere; text-align: center; }

@keyframes record-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--danger-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }

@media (max-width: 1024px) {
    .stage-row { grid-template-columns: minmax(110px, 1fr) auto minmax(160px, 1.5fr); }
}

@media (max-width: 860px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-sidebar { border-bottom: 1px solid var(--border); border-right: 0; height: auto; max-height: none; padding: 10px 14px; position: static; }
    .sidebar-brand { border-bottom: 0; min-height: 34px; padding: 0 4px 8px; }
    .brand-logo { height: 25px; }
    .sidebar-nav { display: grid; gap: 8px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); padding: 0; }
    .nav-section { display: flex; overflow-x: auto; }
    .nav-section + .nav-section { border-left: 1px solid var(--border); border-top: 0; padding-left: 8px; padding-top: 0; }
    .nav-section-bottom { margin: 0; }
    .nav-section-title { display: none; }
    .nav-item { flex: 0 0 auto; }
    .nav-item-active::before { bottom: -1px; height: 3px; left: 10px; width: calc(100% - 20px); }
    .app-topbar { min-height: 54px; padding: 0 18px; }
    .project-switcher-select { max-width: min(52vw, 320px); }
    .app-content { padding: 26px 20px 44px; }
    .two-columns, .provider-diagnostics-grid, .composer-tools, .package-entry-options, .document-workspace, .presentation-workspace, .processing-configuration-fields, .integration-layout { grid-template-columns: minmax(0, 1fr); }
    .member-row { grid-template-columns: minmax(0, 1fr) auto; }
    .member-row > form { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .image-preview-toolbar .secondary-text { flex-basis: 100%; margin-left: 0; }
    .image-preview-viewport { max-height: 28rem; padding: 6px; }
    .document-page-rail { max-height: none; overflow-x: auto; padding: 6px; }
    .document-page-list { display: flex; min-width: max-content; }
    .document-page-button { min-width: 104px; }
    .document-preview-viewport { max-height: 32rem; padding: 6px; }
    .presentation-slide-rail { max-height: none; overflow-x: auto; padding: 6px; }
    .presentation-slide-list { display: flex; min-width: max-content; }
    .presentation-slide-button { min-width: 112px; }
    .presentation-preview-viewport { max-height: 32rem; padding: 6px; }
}

@media (max-width: 600px) {
    .sidebar-brand { display: none; }
    .sidebar-nav { grid-template-columns: minmax(0, 1fr); }
    .nav-section + .nav-section { border-left: 0; padding-left: 0; }
    .nav-item { flex: 1; justify-content: center; min-width: 44px; padding: 8px; }
    .nav-item > span:last-child { display: none; }
    .nav-item-icon, .nav-item-icon svg { height: 20px; width: 20px; }
    .account-name { display: none; }
    .project-switcher-label { display: none; }
    .project-switcher-select { max-width: calc(100vw - 104px); }
    .app-content { padding: 22px 14px 36px; }
    .page-header-main { align-items: flex-start; flex-direction: column; }
    .page-actions { justify-content: stretch; margin: 0 0 18px; }
    .page-actions .btn { width: 100%; }
    .card-header, .card-content { padding: 16px; }
    .list-row, .workspace-row { gap: 9px; grid-template-columns: auto minmax(0, 1fr); padding: 13px 14px; }
    .list-row .secondary-text { grid-column: 2; grid-row: 2; }
    .package-preview { white-space: normal; }
    .package-summary-compact { grid-column: 1 / -1; }
    .summary-level-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; }
    .summary-level-row .secondary-text { grid-column: 1 / -1; grid-row: auto; }
    .summary-actions { align-items: stretch; flex-direction: column; }
    .summary-actions .btn { width: 100%; }
    .source-meta-grid { grid-template-columns: minmax(0, 1fr); }
    .project-facts { grid-template-columns: minmax(0, 1fr); }
    .settings-field-grid { grid-template-columns: minmax(0, 1fr); }
    .token-row, .http-channel-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; }
    .token-actions { grid-column: 1 / -1; justify-content: stretch; }
    .token-actions .btn { flex: 1; }
    .stage-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; }
    .stage-row > :nth-child(n + 3) { grid-column: 1 / -1; }
    .recording-panel { grid-template-columns: minmax(80px, 1fr) auto; }
    .composer-source-row, .source-original-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; }
    .composer-source-row .btn, .source-original-row .btn { grid-column: 1 / -1; width: 100%; }
    .audio-cue { grid-template-columns: auto minmax(0, 1fr); }
    .audio-cue > .secondary-text { grid-column: 2; }
    .video-cue { grid-template-columns: auto minmax(0, 1fr); }
    .video-cue-type { grid-column: 2; }
    .video-frame-list { grid-template-columns: minmax(0, 1fr); }
    .video-range-controls .btn, .video-page-controls .btn { flex: 1 1 auto; }
    .voice-meter { display: none; }
    .form-actions { flex-direction: column; }
.form-actions .btn { width: 100%; }
    .modal-dialog { max-height: calc(100vh - 20px); max-width: calc(100vw - 20px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}