:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --ink:#102e43; --muted:#5e7283; --brand:#08766d; --brand-dark:#064f58; --line:#dbe8eb; --surface:#fff; --wash:#f5fafb; --soft-brand:#e5f4f2; }
:root[data-theme="dark"] { color-scheme: dark; --ink:#e9f7f7; --muted:#b6ccce; --brand:#3bc6b7; --brand-dark:#8ae6dc; --line:#315c61; --surface:#102d33; --wash:#092126; --soft-brand:#153f42; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0,#e9f8f7,transparent 32rem),var(--wash); color: var(--ink); }
:root[data-theme="dark"] body { background:radial-gradient(circle at 80% 0,#154d50,transparent 32rem),var(--wash); }
.shell { max-width:100rem; margin:0 auto; padding:1rem 1.5rem 4rem 17rem; }
a { color:var(--brand); font-weight:650; text-decoration:none; }
.app-header { min-height:4.5rem; display:grid; grid-template-columns:auto minmax(18rem,1fr) auto; align-items:center; gap:1rem; padding:0 0 1.1rem; border-bottom:1px solid var(--line); }
.brand-lockup { display:inline-flex; align-items:center; gap:.6rem; min-width:max-content; color:var(--ink); font-size:1.08rem; font-weight:800; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; color:#fff; background:linear-gradient(135deg,#0f8b82,#064f58); box-shadow:0 7px 15px #08766d33; font-size:1.45rem; }
.appbar-search { display:grid; grid-template-columns:1fr auto; gap:0; max-width:43rem; width:100%; margin:0 auto; border:1px solid var(--line); border-radius:.8rem; background:var(--surface); overflow:hidden; }
.appbar-search input { border:0; min-width:0; background:transparent; }
.appbar-search input:focus { outline:0; }
.appbar-search .search-submit { width:2.75rem; padding:0; border:0; border-radius:0; color:var(--muted); background:transparent; font-size:1.25rem; }
.app-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:.55rem; }
.text-action, .signup-action { display:inline-flex; align-items:center; min-height:2.45rem; padding:0 .8rem; border-radius:.65rem; white-space:nowrap; }
.text-action { color:var(--ink); }
.signup-action { background:var(--brand); color:#fff; box-shadow:0 6px 14px #08766d2c; }
.header-control, .header-icon-button { width:auto; min-height:2.35rem; padding:.4rem .55rem; border:1px solid var(--line); border-radius:.65rem; background:var(--surface); color:var(--ink); }
.header-icon-button { cursor:pointer; font-size:1.1rem; }
.app-sidebar { position:fixed; top:1rem; bottom:1rem; left:max(1rem,calc((100vw - 100rem)/2)); z-index:2; width:14.25rem; display:flex; flex-direction:column; padding:1.15rem .75rem; border:1px solid var(--line); border-radius:1.15rem; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 14px 34px #12304414; backdrop-filter:blur(16px); }
.sidebar-label { display:block; margin:.25rem .65rem .55rem; color:var(--muted); font-size:.67rem; font-weight:800; letter-spacing:.09em; }
.app-sidebar nav { display:grid; gap:.25rem; }
.app-sidebar nav a { display:block; padding:.68rem .75rem; border-radius:.65rem; color:var(--ink); font-size:.9rem; }
.app-sidebar nav a[aria-current="page"] { color:var(--brand-dark); background:var(--soft-brand); }
.sidebar-plan { margin-top:auto; padding:1rem .85rem; border:1px solid var(--line); border-radius:.85rem; background:linear-gradient(145deg,var(--soft-brand),var(--surface)); }
.sidebar-plan .sidebar-label { margin:0 0 .35rem; }
.sidebar-plan strong { display:block; font-size:.84rem; }
.sidebar-plan p { margin:.35rem 0 .7rem; font-size:.76rem; }
.sidebar-upgrade { display:block; padding:.55rem .65rem; border-radius:.55rem; background:var(--brand-dark); color:#fff; text-align:center; font-size:.78rem; }
section { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); box-shadow: 0 8px 28px #102a4310; }
[data-app-status][data-phase="error"] { color:#b42318; background:#fff0ef; border:1px solid #fecdca; border-radius:.75rem; padding:.75rem 1rem; }
[data-app-status][data-phase="loading"] { color:var(--brand-dark); background:#e4f5f2; border-radius:.75rem; padding:.75rem 1rem; }
[data-app-boundary][data-phase="loading"] { cursor:progress; }
.app-loading-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1.5rem; background:rgba(5, 37, 37, .28); backdrop-filter:blur(3px); }
.app-loading-overlay[hidden] { display:none; }
.app-loading-card { display:grid; justify-items:center; gap:.75rem; min-width:min(19rem, 100%); padding:1.5rem 2rem; border:1px solid color-mix(in srgb, var(--tc-primary, #0f766e) 30%, #fff); border-radius:1rem; background:var(--tc-surface-card, #fff); box-shadow:0 20px 50px rgba(3, 43, 40, .28); color:var(--tc-on-surface, #102a2a); }
.app-loading-card p { margin:0; }
.app-loading-orbit { display:grid; place-items:center; width:3.25rem; height:3.25rem; border:4px solid color-mix(in srgb, var(--tc-primary, #0f766e) 22%, transparent); border-top-color:var(--tc-primary, #0f766e); border-radius:50%; animation:app-loading-spin .8s linear infinite; }
.app-loading-orbit span { width:.8rem; height:.8rem; border-radius:50%; background:var(--tc-primary, #0f766e); }
@keyframes app-loading-spin { to { transform:rotate(360deg); } }
.tool-directory { overflow:hidden; background:linear-gradient(135deg,#08766d,#064f58); color:#fff; }
.tool-directory h2 { font-size:clamp(1.6rem,3vw,2.5rem); margin:.25rem 0 .4rem; }
.tool-directory p { color:#d8f5f1; }
p { color:var(--muted); line-height:1.55; }
.tool-catalog { align-items:start; }
.dashboard-hero { grid-column:1/-1; padding:2rem; border-radius:1.1rem; color:#fff; background:linear-gradient(120deg,#08766d,#07515d); box-shadow:0 12px 26px #08766d35; }
.dashboard-hero h2 { margin:.1rem 0 .3rem; font-size:clamp(1.55rem,3vw,2.25rem); }
.dashboard-hero p { color:#d8f5f1; margin:.2rem 0 1.1rem; }
.hero-search { display:grid; grid-template-columns:1fr auto; max-width:42rem; gap:.5rem; }
.hero-search input { border:0; border-radius:.75rem; }
.hero-search button { background:#fff; color:var(--brand-dark); border-color:#fff; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.hero-primary-action, .hero-secondary-action { display:inline-flex; align-items:center; justify-content:center; min-height:2.55rem; padding:0 1rem; border-radius:.7rem; font-size:.88rem; }
.hero-primary-action { background:#fff; color:var(--brand-dark); }
.hero-secondary-action { border:1px solid #b7e5df; color:#fff; }
.catalog-heading { grid-column:1/-1; }
.catalog-heading h2 { margin-bottom:.25rem; }
.category-cards { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.8rem; }
.category-card { display:flex; flex-direction:column; gap:.35rem; padding:1rem; min-height:7.5rem; border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow:0 5px 15px #1230440d; color:var(--ink); }
.category-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px #08766d1c; }
.category-card span:last-child { color:var(--muted); font-size:.82rem; }
.category-icon { font-size:1.5rem; color:var(--brand); }
.category-surface { max-width:76rem; margin-left:auto; margin-right:auto; }
.category-hero { padding:2rem; border-radius:1rem; background:linear-gradient(135deg,#08766d,#064f58); color:#fff; }
.category-hero h2 { margin:.55rem 0 .25rem; font-size:clamp(1.65rem,3vw,2.5rem); }
.category-hero p { color:#d8f5f1; }
.back-link { color:#e7fbf8; font-size:.9rem; }
.category-tool-section { border:0; box-shadow:none; padding:1.5rem 0 0; background:transparent; }
.category-tool-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem; }
.category-tool-card { display:flex; min-height:8rem; flex-direction:column; justify-content:space-between; padding:1.15rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface); color:var(--ink); box-shadow:0 6px 16px #1230440d; }
.category-tool-card:hover { border-color:var(--brand); transform:translateY(-2px); }
.category-tool-card span { color:var(--brand); font-size:.88rem; font-weight:650; }
.tool-group { transition:transform .15s ease, box-shadow .15s ease; }
.tool-group:hover { transform:translateY(-2px); box-shadow:0 8px 18px #102a4315; }
.tool-workflow { max-width: 52rem; margin-left:auto; margin-right:auto; }
.tool-workflow > h2 { color:var(--brand-dark); font-size:1.6rem; }
.tool-workflow form[data-fastapi-operation="generate"] { background:linear-gradient(180deg,#ffffff,#f7fcfc); }
.tool-workflow form[data-fastapi-operation="generate"] > h3 { color:var(--brand-dark); font-size:1.45rem; margin:.25rem 0 0; }
.workflow-modes { display:flex; gap:.5rem; border-bottom:1px solid var(--line); padding-bottom:.7rem; }
.workflow-modes button { background:#e5f4f2; color:var(--brand-dark); border-color:#c4e5e1; }
.workflow-modes button[aria-selected="true"] { background:var(--brand-dark); color:#fff; }
.composer-preferences { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; padding:1rem; border:1px solid var(--line); border-radius:.9rem; background:#f7fafc; }
.composer-preferences label, [data-specific-preferences] label { margin-top:.25rem; font-size:.88rem; color:var(--muted); }
[data-specific-preferences] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; }
[data-specific-preferences] p { grid-column:1/-1; margin-bottom:0; }
.generated-result { max-width:52rem; margin-left:auto; margin-right:auto; }
.generated-result article, [data-api-output], [data-chat-output] { white-space:pre-wrap; overflow:auto; background:#f0fff4; padding:1rem; border-radius:.8rem; min-height:3rem; }
.data-shell, .chat-shell { max-width:52rem; margin-left:auto; margin-right:auto; }
.library-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.library-tabs button { flex:1 1 8rem; }
.library-tabs button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 .15rem rgba(11,107,87,.18); }
.account-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.appbar-search, form { display: grid; gap: .65rem; }
.appbar-search { grid-template-columns: 1fr auto; margin: 1rem 0; }
input, textarea, select, button { box-sizing: border-box; width: 100%; border: 1px solid #9fb3c8; border-radius: .65rem; padding: .75rem; font: inherit; }
.app-input, .app-textarea, .app-select { background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:inset 0 1px 2px #12304408; }
.app-input:focus, .app-textarea:focus, .app-select:focus { outline:3px solid #41c9ba55; outline-offset:1px; border-color:var(--brand); }
.app-button { min-height:2.8rem; padding:.7rem 1rem; border-radius:.7rem; font-weight:750; }
.app-button-primary { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); border-color:var(--brand-dark); color:#fff; box-shadow:0 8px 16px #08766d32; }
.app-inline-status { grid-column:1/-1; margin:0; }
textarea { resize: vertical; min-height: 8rem; }
.composer-input { position: relative; }
.composer-input textarea { padding-right: 3.4rem; }
[data-mic-target] { position: absolute; right: .6rem; bottom: .6rem; width: auto; padding: .45rem; border: 0; background: transparent; cursor: pointer; }
[data-mic-target].recording, textarea.recording { animation: composer-pulse 1s ease-in-out infinite; }
[data-image-preview] { color: var(--muted); font-size: .85rem; padding: .35rem 0; }
@keyframes composer-pulse { 50% { box-shadow: 0 0 0 .25rem rgba(39,153,137,.2), 0 0 .8rem rgba(39,153,137,.7); } }
button { width: auto; cursor: pointer; background: #0b6b57; color: #fff; border-color: #0b6b57; font-weight: 700; }
.tool-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tool-catalog > h2, .tool-catalog > p { grid-column: 1 / -1; }
.tool-group { padding: 1.15rem; border: 1px solid #d9e2ec; border-radius: 1rem; background: #fbfefe; }
.tool-group h3 { margin-top: 0; }
.tool-group ul { margin: 0; padding-left: 1.2rem; }
.tool-group li { margin: .35rem 0; }
.generated-result article { background: #f0fff4; padding: 1rem; border-radius: .7rem; }
@media (max-width:48rem) { .shell { padding:.7rem .75rem 5.8rem; } .app-header { grid-template-columns:1fr auto; gap:.65rem; padding-bottom:.8rem; } .appbar-search { grid-column:1/-1; grid-row:2; max-width:none; order:3; } .app-header-actions { gap:.35rem; } .text-action { display:none; } .signup-action { padding:0 .65rem; font-size:.82rem; } .app-sidebar { position:fixed; flex-direction:row; align-items:center; gap:.25rem; top:auto; bottom:.65rem; left:.65rem; right:.65rem; width:auto; height:4.4rem; padding:.4rem; border-radius:1rem; } .app-sidebar .sidebar-label, .sidebar-plan { display:none; } .app-sidebar nav { display:grid; grid-template-columns:repeat(4,1fr); width:100%; gap:.2rem; } .app-sidebar nav a { padding:.55rem .2rem; text-align:center; font-size:.72rem; white-space:nowrap; } .composer-preferences, [data-specific-preferences] { grid-template-columns:1fr; } section { padding:1rem; border-radius:1rem; } }

/* Flutter-aligned customer design system -------------------------------------------------
   These are the shared Material-3-like primitives used by every route.  They
   intentionally use the same Ocean Teal seed, 12px card language, 10px input
   radius, 48px touch targets, and 900px workspace breakpoint as the Flutter
   app rather than letting individual screens invent their own presentation. */
:root {
  --tc-primary: #0f766e;
  --tc-primary-strong: #075e59;
  --tc-on-primary: #ffffff;
  --tc-surface: #f6faf9;
  --tc-surface-card: #ffffff;
  --tc-surface-muted: #edf6f4;
  --tc-outline: #c8d8d5;
  --tc-on-surface: #102a2a;
  --tc-on-surface-muted: #5c6f6d;
  --tc-radius-card: .75rem;
  --tc-radius-input: .625rem;
  --tc-touch-target: 3rem;
  --tc-workspace-breakpoint: 900px;
}

:root[data-theme="dark"] {
  --tc-primary: #53d6c5;
  --tc-primary-strong: #9eece1;
  --tc-on-primary: #003733;
  --tc-surface: #101827;
  --tc-surface-card: #162331;
  --tc-surface-muted: #1c3036;
  --tc-outline: #435858;
  --tc-on-surface: #effaf8;
  --tc-on-surface-muted: #bacbc8;
}

body { background: var(--tc-surface); color: var(--tc-on-surface); }
body, input, textarea, select, button { font-family: Inter, "Open Sans", ui-sans-serif, system-ui, sans-serif; }
.shell { max-width: none; min-height: 100vh; margin: 0; padding: 0 2rem 3rem calc(236px + 2rem); }
.app-header { position: sticky; top: 0; z-index: 5; min-height: 72px; margin: 0 -2rem 0 calc(-236px - 2rem); padding: 0 2rem 0 calc(236px + 2rem); background: color-mix(in srgb, var(--tc-surface) 94%, transparent); border-bottom: 1px solid var(--tc-outline); backdrop-filter: blur(18px); }
.app-sidebar { top: 0; bottom: 0; left: 0; width: 236px; padding: 1rem .75rem; border: 0; border-right: 1px solid var(--tc-outline); border-radius: 0; background: var(--tc-surface-card); box-shadow: none; backdrop-filter: none; }
.app-sidebar nav a { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--tc-on-surface-muted); }
.app-sidebar nav a[aria-current="page"] { color: var(--tc-primary-strong); background: color-mix(in srgb, var(--tc-primary) 14%, transparent); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(145deg, var(--tc-primary), #064e4a); }
.brand-name, h1, h2, h3 { color: var(--tc-on-surface); }
.appbar-search { min-height: 44px; border-radius: 8px; border-color: var(--tc-outline); background: var(--tc-surface-card); }
.appbar-search input { min-height: 42px; color: var(--tc-on-surface); }
.header-control, .header-icon-button { border-color: var(--tc-outline); background: var(--tc-surface-card); color: var(--tc-on-surface); }
.signup-action { min-height: 40px; background: var(--tc-primary); color: var(--tc-on-primary); box-shadow: none; }
.text-action { color: var(--tc-on-surface); }

.tool-catalog, .category-surface, .tool-workflow, .workspace-screen { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.tool-catalog { max-width: 1440px; margin: 0 auto; padding: 2rem 0; }
.dashboard-hero, .category-hero { border-radius: var(--tc-radius-card); background: linear-gradient(118deg, #075e59, #0f766e 62%, #12847b); box-shadow: none; }
.dashboard-hero { min-height: 232px; display: flex; flex-direction: column; justify-content: center; }
.category-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.category-card, .category-tool-card { min-height: 152px; border-radius: var(--tc-radius-card); border-color: var(--tc-outline); background: var(--tc-surface-card); color: var(--tc-on-surface); box-shadow: 0 2px 8px rgba(12, 47, 44, .06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.category-card:hover, .category-tool-card:hover { transform: translateY(-3px); border-color: var(--tc-primary); box-shadow: 0 12px 24px rgba(12, 47, 44, .12); }
.category-card span:last-child, .category-tool-card span { color: var(--tc-on-surface-muted); }
.category-icon { color: var(--tc-primary); }
.tool-group { border-color: var(--tc-outline); border-radius: var(--tc-radius-card); background: var(--tc-surface-card); }

.tool-workflow { max-width: 1100px; padding: 2rem 0; }
.tool-workflow form[data-fastapi-operation="generate"], .workspace-card, .result-workspace, .chat-transcript { padding: 1.25rem; border: 1px solid var(--tc-outline); border-radius: var(--tc-radius-card); background: var(--tc-surface-card); box-shadow: 0 2px 8px rgba(12, 47, 44, .06); }
.tool-workflow form[data-fastapi-operation="generate"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: var(--tc-surface-card); }
.tool-workflow form[data-fastapi-operation="generate"] > h3, .tool-workflow form[data-fastapi-operation="generate"] > p, .workflow-modes, .composer-input, .composer-preferences, [data-specific-preferences], .tool-workflow form[data-fastapi-operation="generate"] > label, .tool-workflow form[data-fastapi-operation="generate"] > input, .tool-workflow form[data-fastapi-operation="generate"] > button, .tool-workflow form[data-fastapi-operation="generate"] > .app-inline-status { grid-column: 1 / -1; }
.workflow-modes { padding: .25rem; border: 1px solid var(--tc-outline); border-radius: 8px; background: var(--tc-surface-muted); }
.workflow-modes button { flex: 1; min-height: 40px; border: 0; color: var(--tc-on-surface-muted); background: transparent; }
.workflow-modes button[aria-selected="true"] { background: var(--tc-surface-card); color: var(--tc-primary-strong); box-shadow: 0 1px 4px rgba(12, 47, 44, .12); }
input, textarea, select, button { min-height: var(--tc-touch-target); border-radius: var(--tc-radius-input); border-color: var(--tc-outline); color: var(--tc-on-surface); background: var(--tc-surface-card); }
.app-input, .app-textarea, .app-select { border-color: var(--tc-outline); background: var(--tc-surface-card); color: var(--tc-on-surface); box-shadow: none; }
.app-input:focus, .app-textarea:focus, .app-select:focus { outline: 3px solid color-mix(in srgb, var(--tc-primary) 28%, transparent); border-color: var(--tc-primary); }
.app-button-primary, button { background: var(--tc-primary); border-color: var(--tc-primary); color: var(--tc-on-primary); box-shadow: none; }
.app-button-primary:hover, button:hover { background: var(--tc-primary-strong); }
.composer-preferences { background: var(--tc-surface-muted); border-color: var(--tc-outline); }
.recipe-guided-card { grid-column: 1 / -1; display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--tc-outline); border-radius: var(--tc-radius-card); background: linear-gradient(145deg, var(--tc-surface-muted), var(--tc-surface-card)); }
.recipe-guided-card[hidden] { display: none; }
.recipe-guided-heading h4 { margin: 0 0 .3rem; color: var(--tc-primary-strong); font-size: 1.15rem; }
.recipe-guided-heading p, .recipe-equipment p, .recipe-research-row p { margin: 0; color: var(--tc-on-surface-muted); font-size: .88rem; }
.recipe-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.recipe-field-grid > div { display: grid; gap: .45rem; }
.recipe-equipment { display: grid; gap: .45rem; }
.choice-chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-chip-group button { min-height: 38px; width: auto; padding: .45rem .7rem; color: var(--tc-on-surface); background: var(--tc-surface-card); border-color: var(--tc-outline); font-size: .84rem; }
.choice-chip-group button[aria-pressed="true"], .choice-chip-group button.selected { color: var(--tc-on-primary); background: var(--tc-primary); border-color: var(--tc-primary); }
.recipe-research-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--tc-outline); }
.recipe-research-row input { width: 1.15rem; min-height: 1.15rem; accent-color: var(--tc-primary); }
.recipe-research-row label { color: var(--tc-on-surface); font-size: .9rem; }
.composer-input textarea { padding-right: 3.75rem; }
.speech-mic-button { right: .55rem; bottom: .55rem; width: 2.3rem; min-height: 2.3rem; border: 0; border-radius: 50%; padding: 0; color: var(--tc-primary-strong); background: transparent; }
.speech-waveform { display: none; position: absolute; inset: .85rem 3.5rem .85rem 3rem; align-items: center; gap: 3px; pointer-events: none; }
.speech-waveform span { display: block; flex: 1; max-width: 4px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--tc-primary) 35%, transparent); animation: speech-wave 760ms ease-in-out infinite alternate; }
.speech-waveform span:nth-child(3n) { animation-delay: 130ms; }
.speech-waveform span:nth-child(4n) { animation-delay: 240ms; }
[data-speech-field][data-listening="true"] textarea { color: transparent; caret-color: transparent; border-color: var(--tc-primary); background: var(--tc-surface-muted); }
[data-speech-field][data-listening="true"] .speech-waveform { display: flex; }
[data-speech-field][data-listening="true"] .speech-mic-button { color: #b42318; }
@keyframes speech-wave { from { height: 4px; opacity: .45; } to { height: 26px; opacity: 1; } }

.workspace-screen { max-width: 1100px; margin: 0 auto; padding: 2.5rem 0; }
.screen-heading { max-width: 680px; margin-bottom: 1.5rem; }
.screen-heading h1 { margin: .35rem 0; font-size: clamp(1.75rem, 4vw, 2.45rem); letter-spacing: -.035em; }
.screen-heading p { margin: 0; color: var(--tc-on-surface-muted); }
.eyebrow { color: var(--tc-primary-strong); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.workspace-card { display: grid; gap: .7rem; max-width: 720px; }
.generated-screen, .data-shell, .chat-shell { max-width: 1100px; }
.result-workspace { min-height: 440px; max-width: none; }
.result-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--tc-outline); }
.result-toolbar button { width: 2.5rem; min-height: 2.5rem; padding: 0; background: var(--tc-surface-muted); color: var(--tc-on-surface); border-color: var(--tc-outline); }
.result-editor { min-height: 330px; padding: .5rem; color: var(--tc-on-surface); }
.result-actions, .account-actions, .chat-actions, .auth-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.result-actions a, .auth-links a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 .85rem; border: 1px solid var(--tc-outline); border-radius: 8px; color: var(--tc-primary-strong); background: var(--tc-surface-card); }
.api-output, .chat-transcript { min-height: 260px; max-width: none; white-space: pre-wrap; overflow: auto; background: var(--tc-surface-card); }
.library-tabs button, .account-actions button, .quiet-action { min-height: 42px; color: var(--tc-primary-strong); background: var(--tc-surface-muted); border-color: var(--tc-outline); }
.library-tabs button[aria-pressed="true"] { color: var(--tc-on-primary); background: var(--tc-primary); border-color: var(--tc-primary); box-shadow: none; }
.chat-composer { max-width: none; margin-top: 1rem; padding: 1rem; border: 1px solid var(--tc-outline); border-radius: var(--tc-radius-card); background: var(--tc-surface-card); }
.chat-actions { justify-content: flex-end; }
.chatgpt-style-shell { max-width: 960px; min-height: calc(100vh - 72px); display:flex; flex-direction:column; }
.chatgpt-style-shell .screen-heading { text-align:center; margin:2.5rem auto 1.25rem; }
.chatgpt-style-shell .screen-heading h1 { font-size:clamp(1.85rem, 4vw, 2.8rem); }
.chat-suggestions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.7rem; max-width:760px; width:100%; margin:0 auto 1rem; }
.chat-suggestions button { min-height:72px; padding:1rem; text-align:left; color:var(--tc-on-surface); background:var(--tc-surface-card); border-color:var(--tc-outline); font-weight:650; }
.chat-suggestions button:hover { color:var(--tc-primary-strong); border-color:var(--tc-primary); background:var(--tc-surface-muted); }
.chat-transcript { display:flex; flex-direction:column; gap:1rem; flex:1; min-height:340px; max-height:56vh; padding:1.25rem; background:transparent; border:0; box-shadow:none; }
.chat-empty-state { display:grid; place-items:center; align-content:center; gap:.55rem; flex:1; min-height:230px; text-align:center; color:var(--tc-on-surface); }
.chat-empty-state p { margin:0; }
.chat-empty-mark { display:grid; place-items:center; width:3.75rem; height:3.75rem; border-radius:1.25rem; background:linear-gradient(145deg, var(--tc-primary), #064e4a); color:#fff; font-size:2rem; box-shadow:0 12px 25px rgba(7, 94, 89, .22); }
.chat-message { display:grid; grid-template-columns:2rem minmax(0, 1fr); align-items:start; gap:.7rem; max-width:760px; width:100%; margin:0 auto; }
.chat-message-user { grid-template-columns:minmax(0, 1fr) 2rem; }
.chat-message-user .chat-message-avatar { grid-column:2; }
.chat-message-user .chat-message-bubble { grid-column:1; grid-row:1; justify-self:end; color:var(--tc-on-primary); background:var(--tc-primary); }
.chat-message-avatar { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; background:var(--tc-surface-muted); color:var(--tc-primary-strong); font-size:.7rem; font-weight:800; }
.chat-message-bubble { max-width:calc(100% - 1rem); padding:.8rem 1rem; border:1px solid var(--tc-outline); border-radius:.2rem .95rem .95rem .95rem; background:var(--tc-surface-card); color:var(--tc-on-surface); white-space:pre-wrap; line-height:1.55; }
.chat-message-user .chat-message-bubble { border-radius:.95rem .2rem .95rem .95rem; }
.chat-thinking { max-width:760px; width:100%; margin:0 auto; padding-left:2.75rem; color:var(--tc-on-surface-muted); }
.chat-composer { position:sticky; bottom:1rem; max-width:760px; width:100%; margin:0 auto 1rem; box-shadow:0 12px 28px rgba(12, 47, 44, .11); }
.chat-disclaimer { margin:0; text-align:center; font-size:.75rem; color:var(--tc-on-surface-muted); }
.file-selected-tool { color:var(--tc-primary-strong) !important; font-weight:700; }
:root[data-active-screen="auth"] body { background:linear-gradient(145deg, var(--tc-surface), color-mix(in srgb, var(--tc-primary) 12%, var(--tc-surface))); }
:root[data-active-screen="auth"] .app-header, :root[data-active-screen="auth"] .app-sidebar { display:none; }
:root[data-active-screen="auth"] .shell { display:grid; min-height:100vh; padding:1.5rem; place-items:center; }
.auth-shell { width:min(100%, 27rem); margin:0; padding:0; }
.auth-shell .screen-heading { margin:0; padding:1.75rem 1.75rem .9rem; text-align:center; }
.auth-shell .screen-heading h1 { font-size:1.9rem; }
.auth-shell > [data-auth-panel] { padding:0 1.75rem 1.75rem; border:1px solid var(--tc-outline); border-top:0; border-radius:0 0 var(--tc-radius-card) var(--tc-radius-card); background:var(--tc-surface-card); box-shadow:0 18px 48px rgba(12, 47, 44, .12); }
.auth-shell .screen-heading { border:1px solid var(--tc-outline); border-bottom:0; border-radius:var(--tc-radius-card) var(--tc-radius-card) 0 0; background:var(--tc-surface-card); box-shadow:0 18px 48px rgba(12, 47, 44, .12); }
.auth-shell .workspace-card { max-width:none; padding:0; border:0; box-shadow:none; }
.auth-shell .auth-links { display:grid; grid-template-columns:1fr; margin-top:1rem; text-align:center; }
.auth-shell .auth-links a { justify-content:center; }
.auth-shell .auth-links a:first-child { color:var(--tc-on-surface); }

@media (max-width: 899px) {
  .shell { padding: 0 .9rem 6.1rem; }
  .app-header { position: sticky; margin: 0 -.9rem; padding: .7rem .9rem; min-height: auto; }
  .app-sidebar { top: auto; bottom: .65rem; left: .65rem; right: .65rem; width: auto; height: 4.55rem; border: 1px solid var(--tc-outline); border-radius: 1rem; box-shadow: 0 12px 28px rgba(12, 47, 44, .18); }
  .tool-catalog, .tool-workflow, .workspace-screen { padding-top: 1.25rem; }
  .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-workflow form[data-fastapi-operation="generate"] { grid-template-columns: 1fr; }
  .tool-workflow form[data-fastapi-operation="generate"] > * { grid-column: 1 / -1; }
  .recipe-field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .category-cards, .category-tool-cards { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .category-card { min-height: 126px; padding: .8rem; }
  .dashboard-hero, .category-hero { padding: 1.25rem; }
  .dashboard-hero { min-height: 205px; }
  .workspace-screen { padding-bottom: 1.5rem; }
}