:root {
  --ink: #16211f;
  --muted: #71807b;
  --line: #dfe7e2;
  --paper: #f5f7f4;
  --card: #ffffff;
  --accent: #c4ed5b;
  --accent-dark: #244514;
  --dark: #19312b;
  --warning: #bd6b1b;
}

.account-page { max-width: 560px; margin: 40px auto; }
.account-page h1, .demo-hero h1 { overflow-wrap: anywhere; }
.account-page h1 { font-size: clamp(30px, 5vw, 46px); margin: 16px 0; }
.account-page h2 { font-size: 24px; margin: 22px 0 12px; }
.account-panel { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.account-panel form { display: grid; gap: 18px; }
.account-panel label { display: grid; gap: 7px; font-weight: 700; }
.account-panel input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.account-panel code { display: block; padding: 15px; background: var(--paper); overflow-wrap: anywhere; }
.account-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-panel .text-button.account-action-link { color: var(--accent-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .account-action-link:not(.button) { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-weight: 800; text-decoration: none; }
  .account-secondary-actions { display: grid; gap: 8px; }
  .account-secondary-actions .account-action-link { width: 100%; }
}
.account-help { margin: 0; color: var(--muted); font-size: 12px; }
.account-error { color: #a53024; }
.drawer-nav button, .text-button { border: 0; background: transparent; color: var(--ink); text-align: left; min-height: 44px; cursor: pointer; }
.drawer-nav button { font-weight: 700; }
@media (max-width: 480px) {
  .topbar .brand { margin-left: 8px; margin-right: auto; font-size: 16px; }
  .topbar .brand-mark { width: 25px; height: 25px; font-size: 19px; }
}

/* Public demo: a welcoming shop preview followed by three concrete tasks. */
.demo-header-badge { position: absolute; right: 0; padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 700; }
body.chat-route .demo-header-badge { display: none; }
.demo-home { padding: 52px 0 32px; }
.demo-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.demo-hero h1 { max-width: 680px; font-size: clamp(40px, 5.2vw, 70px); line-height: 1.05; }
.demo-hero h1 em { color: #527339; font-style: normal; }
.demo-intro { max-width: 430px; margin: 22px 0; color: #52635c; font-size: 17px; line-height: 1.6; }
.demo-primary { display: inline-flex; align-items: center; gap: 34px; min-height: 50px; text-decoration: none; }
.demo-footnote { max-width: 380px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.demo-shop-preview { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 18px 50px rgba(25,49,43,.06); }
.demo-shop-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.demo-shop-heading h2 { font-size: 25px; line-height: 1.15; }
.demo-live-label { border-radius: 7px; background: var(--accent); padding: 5px 9px; font-size: 11px; font-weight: 800; }
.demo-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.demo-summary strong { display: block; font-size: 28px; letter-spacing: -.04em; }
.demo-summary span { color: var(--muted); font-size: 11px; }
.demo-summary > p { grid-column: 1 / -1; }
.demo-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eff2ef; }
.demo-preview-row > div { min-width: 0; }
.demo-preview-row strong { display: block; overflow-wrap: anywhere; font-size: 13px; }
.demo-preview-row > div > span { display: block; color: var(--muted); font-size: 11px; }
.demo-stock-pill { flex-shrink: 0; border-radius: 16px; padding: 4px 9px; background: #edf4e9; color: #4d683b; font-size: 10px; font-weight: 700; }
.demo-stock-low { background: #fff2df; color: #8d5718; }
.demo-preview-link { display: flex; justify-content: space-between; padding-top: 18px; color: var(--dark); font-size: 12px; font-weight: 800; text-decoration: none; }
.demo-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.private-home-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-task { display: flex; flex-direction: column; align-items: start; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.demo-task:hover { transform: translateY(-3px); border-color: #95ac87; }
.demo-task-number { margin-bottom: 22px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.demo-task h2 { font-size: 23px; line-height: 1.1; }
.demo-task p { color: var(--muted); font-size: 13px; }
.demo-task-action { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 800; color: #527339; }
.demo-drawer-note { margin-bottom: 25px; padding: 16px; border-radius: 10px; background: #edf4e9; }
.demo-drawer-note p { margin: 6px 0 0; color: #52635c; font-size: 12px; }
.demo-loading { padding: 70px 0; }
.demo-loading h1 { font-size: clamp(32px, 5vw, 54px); }
@media (max-width: 760px) {
  .demo-home { padding-top: 28px; }
  .demo-hero { grid-template-columns: 1fr; gap: 30px; }
  .demo-hero h1 { font-size: clamp(38px, 8vw, 56px); }
  .demo-intro { font-size: 15px; margin: 18px 0; }
  .demo-shop-preview { padding: 20px; }
  .demo-tasks { grid-template-columns: 1fr; margin-top: 24px; gap: 12px; }
  .demo-task { padding: 20px; }
  .demo-task-number { margin-bottom: 12px; }
  .demo-header-badge { padding: 4px 7px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-task { transition: none; }
  .demo-task:hover { transform: none; }
}

.entry-route #menu-button, .entry-route #workspace-badge,
.entry-route #chat-model-picker, .entry-route footer { display: none; }
.entry-home { max-width: 650px; margin: 9vh auto; text-align: center; padding: 24px; }
.entry-home h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.12; }
.entry-actions { display: grid; gap: 16px; max-width: 350px; margin: 36px auto 0; }
.entry-actions a.button, .entry-actions button.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding-inline: 16px; text-align: center; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body.menu-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 0 32px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.topbar { position: relative; min-height: 78px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.menu-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font-size: 20px; line-height: 1; }
.menu-button:focus, .panel-toggle:focus, .drawer-link:focus, .workspace-card:focus, a:focus, input:focus, select:focus { outline: 3px solid #d8efa1; outline-offset: 2px; }
.brand { min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--accent); color: var(--accent-dark); font-size: 23px; font-weight: 900; }
.current-merchant { max-width: 180px; overflow: hidden; margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.topbar-meta { display: none; }
.topbar-left-control { display: none; }
.brand { margin: 0 auto; }
.topbar .chat-model-picker { display: none; position: absolute; right: 0; align-items: center; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 800; }
body.chat-route .topbar .chat-model-picker { display: grid; }
.topbar .chat-model-picker select { width: min(220px, 28vw); max-width: 220px; min-height: 38px; padding: 5px 25px 5px 8px; font-size: 11px; }
.topbar-left-control .merchant-control { min-width: 270px; }
.topbar-left-control .merchant-control label { margin-bottom: 4px; }
.topbar-left-control .control-help { display: none; }
.topbar-mode-switch { margin: 0 0 0 auto; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #55ae59; box-shadow: 0 0 0 4px #e2f1db; }
.hero { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding: 54px 0 34px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.055em; line-height: 1; }
h1[tabindex="-1"]:focus { outline: 0 !important; box-shadow: none !important; }
h1 { max-width: 560px; font-size: clamp(42px, 6vw, 76px); }
h2 { font-size: 25px; }
.hero-copy { max-width: 475px; margin: 18px 0 0; color: var(--muted); font-size: 17px; }
.merchant-control { min-width: 280px; }
.demo-label { color: var(--warning); font-size: 10px; letter-spacing: .04em; }
.control-help { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.control-row, .search-row { display: flex; gap: 8px; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 10px 12px; outline: none; }
input:focus, select:focus { border-color: #89aa48; box-shadow: 0 0 0 3px #e8f3c9; }
.button { min-height: 44px; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 800; white-space: nowrap; transition: transform .15s ease, opacity .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-dark { background: var(--dark); color: #fff; }
.button-light { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.button-accent { background: var(--accent); color: var(--accent-dark); }
.notice { min-height: 0; margin: 0 0 16px; border-radius: 10px; color: var(--accent-dark); font-weight: 700; }
.notice:not(:empty) { padding: 7px 10px; background: transparent; color: var(--muted); font-size: 12px; }
.notice:not(:empty)::before { content: "•"; margin-right: 7px; color: #55ae59; }
.notice.error:not(:empty) { background: #fbe8df; color: #933f26; }
.notice.error:not(:empty)::before { color: #933f26; }
.hidden { display: none !important; }
.menu-backdrop { position: fixed; z-index: 19; inset: 0; background: rgba(22, 33, 31, .36); cursor: pointer; }
.menu-drawer { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); overflow-y: auto; padding: 28px 22px; border-right: 1px solid var(--line); background: var(--card); box-shadow: 12px 0 35px rgba(22, 33, 31, .16); }
.drawer-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.drawer-heading .panel-toggle { min-width: 68px; min-height: 44px; }
.drawer-heading h2 { font-size: 30px; }
.drawer-control { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.drawer-nav { display: grid; gap: 4px; padding-top: 25px; }
.drawer-nav .eyebrow { margin-bottom: 5px; }
.drawer-nav .admin-build-info { margin: 12px 13px 4px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.drawer-nav a { display: block; padding: 12px 13px; border-radius: 9px; color: var(--ink); font-weight: 800; text-decoration: none; }
.drawer-nav a:hover, .drawer-nav a.active { background: #eef4e6; color: var(--accent-dark); }
.developer-control { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.developer-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); font-weight: 800; }
.developer-toggle input { width: 18px; height: 18px; accent-color: var(--accent-dark); }
.developer-control p:not(.eyebrow) { margin: 4px 0 0 27px; color: var(--muted); font-size: 12px; }
.model-control { display: grid; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.model-control .eyebrow { margin: 0; }
.model-control > label { color: var(--muted); font-size: 12px; font-weight: 800; }
.model-control select { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; }
.model-control .button { justify-content: center; }
.model-control p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.evaluation-live-progress { display: grid; gap: 7px; padding: 10px; border-radius: 10px; background: #eef4e8; }
.evaluation-live-progress label { color: var(--muted); font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.evaluation-live-progress progress { width: 100%; height: 9px; accent-color: var(--accent-dark); }
.model-evaluation-results { display: grid; gap: 12px; }
.evaluation-dashboard-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--accent-dark); font-size: 12px; font-weight: 800; text-decoration: none; }
.evaluation-dashboard-link:hover { border-color: #bac8bc; background: #f7f9f6; }
.evaluation-page { padding-bottom: 36px; }
.evaluation-page .page-heading { margin-bottom: 22px; }
.evaluation-page .page-heading h1 { max-width: none; }
.evaluation-run-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .65fr); gap: 16px 24px; align-items: center; margin-bottom: 16px; }
.evaluation-run-panel .eyebrow { margin-bottom: 7px; }
.evaluation-run-description { max-width: 850px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.evaluation-run-actions { display: grid; gap: 8px; justify-items: end; }
.evaluation-options { grid-column: 1 / -1; order: 1; display: grid; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.evaluation-options legend { padding: 0 6px; font-weight: 600; }
.evaluation-options label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.evaluation-options input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent-dark); }
.evaluation-options input[type="number"] { width: 140px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.evaluation-options p { margin: 0; color: var(--muted); font-size: 12px; }
.evaluation-run-panel .evaluation-live-progress { order: 2; }
.evaluation-run-actions .button { min-width: 230px; }
.evaluation-run-actions p { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.asr-study-panel { display: grid; gap: 20px; margin-bottom: 28px; padding: 22px; }
.asr-study-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.asr-study-heading .eyebrow { margin-bottom: 5px; }
.asr-study-heading h2 { margin: 0 0 6px; font-size: 24px; }
.asr-study-heading p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.asr-study-badge { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; background: #eff4e7; color: #536b37; font-size: 10px; font-weight: 800; }
.asr-study-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.asr-study-model { min-width: 0; display: grid; align-content: start; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.asr-study-model-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.asr-study-model-heading h3 { margin: 0 0 4px; font-size: 15px; }
.asr-study-model-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.asr-study-model-heading > span { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.asr-study-measure { display: grid; gap: 8px; }
.asr-study-measure-heading { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.asr-study-measure-heading strong { color: var(--ink); font-size: 12px; }
.asr-study-track { height: 10px; overflow: hidden; border-radius: 99px; background: #edf0ea; }
.asr-study-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b6d38f, #557738); }
.asr-study-model dl { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin: 0; }
.asr-study-model dl > div { display: grid; gap: 4px; }
.asr-study-model dt { color: var(--muted); font-size: 10px; }
.asr-study-model dd { margin: 0; font-size: 13px; font-weight: 800; }
.asr-study-notes { display: grid; gap: 8px; padding-top: 15px; border-top: 1px solid var(--line); }
.asr-study-notes p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.asr-study-notes strong { color: var(--ink); }
.asr-study-notes code { color: var(--ink); font-size: 10px; }
.evaluation-model-link { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.evaluation-model-link:hover { text-decoration: underline; }
.evaluation-graph { margin: 28px 0 34px; }
.evaluation-section-label { margin-bottom: 5px; }
.evaluation-section-heading { grid-column: 1 / -1; margin: 28px 0 0; }
.evaluation-section-heading h2 { font-size: 22px; }
.evaluation-graph-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 10px; }
.evaluation-graph-heading h2 { font-size: 22px; }
.evaluation-graph-heading p, .evaluation-graph-heading > span { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.evaluation-graph-heading-actions { display: flex; align-items: center; justify-content: end; gap: 10px; }
.evaluation-graph-expand, .evaluation-graph-close { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 800; }
.evaluation-graph-expand:hover, .evaluation-graph-expand:focus-visible, .evaluation-graph-close:hover, .evaluation-graph-close:focus-visible { border-color: #9cac9f; outline: 2px solid #d8efa1; outline-offset: 1px; }
.evaluation-graph-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(22, 33, 31, .72); }
.evaluation-graph-overlay-panel { position: relative; width: min(1120px, 96vw); max-height: 92vh; overflow: auto; padding: 34px 28px 24px; border-radius: 16px; background: var(--paper); box-shadow: 0 24px 70px rgba(0, 0, 0, .24); }
.evaluation-graph-expanded { margin: 0; }
.evaluation-graph-expanded svg { min-height: clamp(360px, 62vh, 700px); }
.evaluation-graph-close { position: absolute; top: 12px; right: 12px; }
body.evaluation-graph-expanded-open { overflow: hidden; }
.evaluation-report-caption { margin: 0 0 6px; }
.evaluation-summary-controls { display: flex; align-items: end; justify-content: end; gap: 12px; flex-wrap: wrap; }
.evaluation-filter-group > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.evaluation-filter-group > div { display: flex; flex-wrap: wrap; gap: 4px; }
.evaluation-filter-select-label { display: none; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.evaluation-filter-select { display: block; min-height: 38px; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 0 28px 0 9px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700; }
.evaluation-filter-button { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.evaluation-filter-button:hover, .evaluation-filter-button:focus-visible { border-color: #9cac9f; color: var(--ink); outline: 2px solid #d8efa1; outline-offset: 1px; }
.evaluation-filter-button.active { border-color: var(--dark); background: var(--dark); color: #fff; }
.evaluation-candidate-count { align-self: center; color: var(--muted); font-size: 12px; white-space: nowrap; }
.evaluation-graph svg { display: block; width: 100%; height: auto; overflow: visible; }
.evaluation-graph-grid { stroke: var(--line); stroke-width: 1; }
.evaluation-graph-grid-minor { stroke: #edf2ee; stroke-width: 1; }
.evaluation-graph-axis-label, .evaluation-graph-axis-title { fill: var(--muted); font-size: 12px; }
.evaluation-graph-point { fill: var(--dark); stroke: var(--paper); stroke-width: 3; cursor: pointer; transition: r .15s ease, opacity .15s ease; }
.evaluation-graph-point.series-2 { fill: #406b5d; }
.evaluation-graph-point.series-3 { fill: #759345; }
.evaluation-graph-point.series-4 { fill: #9a6d38; }
.evaluation-graph-point.series-5 { fill: #6f5e8f; }
.evaluation-graph-point.series-6 { fill: #9b5148; }
.evaluation-graph-point:hover, .evaluation-graph-point:focus { r: 11; outline: none; }
.evaluation-graph-point-label { fill: var(--ink); font-size: 11px; font-weight: 800; pointer-events: none; }
.evaluation-graph-label-leader { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.evaluation-graph-callout { fill: var(--accent-dark); font-size: 11px; font-weight: 800; }
.evaluation-scatter-note { margin: 7px 0 11px; color: var(--muted); font-size: 12px; }
.evaluation-scatter-note strong { color: var(--ink); }
.evaluation-scatter-list { display: none; }
.evaluation-scatter-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 38px; padding: 5px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; text-decoration: none; }
.evaluation-scatter-row:hover, .evaluation-scatter-row:focus { color: var(--accent-dark); }
.evaluation-scatter-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.evaluation-graph-row-label { fill: var(--ink); font-size: 11px; }
.evaluation-latency-whisker, .evaluation-latency-cap { stroke-width: 2; }
.evaluation-latency-box { fill-opacity: .7; stroke: var(--dark); stroke-width: 1; }
.evaluation-latency-median { fill: var(--dark); }
.evaluation-latency-whisker.series-1, .evaluation-latency-cap.series-1, .evaluation-latency-box.series-1 { stroke: var(--dark); fill: var(--dark); }
.evaluation-latency-whisker.series-2, .evaluation-latency-cap.series-2, .evaluation-latency-box.series-2 { stroke: #406b5d; fill: #406b5d; }
.evaluation-latency-whisker.series-3, .evaluation-latency-cap.series-3, .evaluation-latency-box.series-3 { stroke: #759345; fill: #759345; }
.evaluation-latency-whisker.series-4, .evaluation-latency-cap.series-4, .evaluation-latency-box.series-4 { stroke: #9a6d38; fill: #9a6d38; }
.evaluation-latency-whisker.series-5, .evaluation-latency-cap.series-5, .evaluation-latency-box.series-5 { stroke: #6f5e8f; fill: #6f5e8f; }
.evaluation-latency-whisker.series-6, .evaluation-latency-cap.series-6, .evaluation-latency-box.series-6 { stroke: #9b5148; fill: #9b5148; }
.evaluation-heat-cell { stroke: var(--paper); stroke-width: 2; }
.evaluation-heat-value { fill: var(--ink); font-size: 11px; font-weight: 800; pointer-events: none; }
.evaluation-heat-cell.heat-high { fill: var(--dark); }
.evaluation-heat-cell.heat-mid { fill: #9eb66d; }
.evaluation-heat-cell.heat-low { fill: #e4b6a4; }
.evaluation-heat-cell.heat-na { fill: var(--line); }
.evaluation-heat-cell.heat-high + .evaluation-heat-value { fill: #fff; }
.evaluation-run-panel .evaluation-live-progress { grid-column: 1 / -1; }
.evaluation-page .model-evaluation-results { grid-template-columns: minmax(0, 1fr); }
.evaluation-page .model-evaluation-results > .evaluation-graph { grid-column: 1 / -1; width: 100%; }
.evaluation-page .model-evaluation-results > .evaluation-caption,
.evaluation-page .model-evaluation-results > .evaluation-results-toolbar,
.evaluation-page .model-evaluation-results > .evaluation-comparison { grid-column: 1 / -1; }
.evaluation-page .evaluation-model dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 20px; }
.evaluation-history { display: grid; gap: 13px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.evaluation-history-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.evaluation-navigation-layout { display: grid; grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 22px; }
.evaluation-navigation-layout .evaluation-history { position: sticky; top: 16px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.evaluation-history-actions { display: flex; align-items: center; gap: 8px; }
.evaluation-history-current { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.evaluation-history-current:hover { text-decoration: underline; }
.evaluation-history-heading .eyebrow { margin-bottom: 4px; }
.evaluation-history-heading h2 { font-size: 25px; }
.evaluation-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.evaluation-history-item { min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-align: left; text-decoration: none; }
.evaluation-history-item:hover { border-color: #aab9ac; background: #fbfcfa; }
.evaluation-history-item.active { border-color: var(--dark); background: #eef5e8; box-shadow: inset 3px 0 0 var(--accent-dark); }
.evaluation-history-item > span:first-child { min-width: 0; display: grid; gap: 4px; }
.evaluation-history-item strong { overflow-wrap: anywhere; font-size: 12px; }
.evaluation-history-item small { color: var(--muted); font-size: 11px; }
.evaluation-candidate-state.interrupted { background: #f8eddf; color: #8a551e; }
.evaluation-history-detail { display: grid; gap: 10px; }
.evaluation-history-detail > h3 { margin: 0; font-size: 17px; }
.evaluation-history-detail > #historical-evaluation-report { display: grid; gap: 12px; }
.evaluation-history-picker { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.evaluation-history-picker select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; }
.evaluation-selected-run-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.evaluation-selected-run-heading h2 { margin: 0; font-size: 24px; }
.evaluation-selected-run-heading p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.evaluation-caption { font-size: 11px !important; overflow-wrap: anywhere; }
.evaluation-results-toolbar { min-width: 0; display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.evaluation-results-toolbar .evaluation-caption { margin: 0; }
.evaluation-results-toolbar label { min-width: min(190px, 32%); flex: 1 1 170px; display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.evaluation-results-toolbar select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }
.evaluation-comparison { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.evaluation-comparison-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.evaluation-comparison-heading h2 { margin: 0; font-size: 18px; }
.evaluation-comparison-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.evaluation-comparison-heading > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.evaluation-chart { display: grid; gap: 5px; }
.evaluation-chart-group { display: grid; gap: 1px; padding: 3px 0; border-radius: 8px; }
.evaluation-chart-group:nth-child(odd) { background: #f4f7f4; }
.evaluation-chart-row { min-width: 0; display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(80px, 2fr) minmax(65px, .5fr); align-items: center; gap: 10px; padding: 5px 8px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.evaluation-chart-row:hover, .evaluation-chart-row:focus-visible { color: var(--accent-dark); }
.evaluation-chart-row-nested { padding-top: 3px; padding-bottom: 3px; border-left: 2px solid var(--line); border-radius: 0 7px 7px 0; }
.evaluation-chart-row-nested .evaluation-chart-label::before { content: "↳ "; color: var(--muted); }
.evaluation-chart-label { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 800; }
.evaluation-chart-label small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.evaluation-chart-track { height: 12px; overflow: hidden; border-radius: 99px; background: #e8eeea; }
.evaluation-chart-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent-dark); }
.evaluation-chart-value { overflow-wrap: anywhere; font-size: 11px; text-align: right; }
.evaluation-model { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfa; }
.evaluation-model-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 9px; }
.evaluation-model h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.evaluation-candidate-state { flex: 0 0 auto; padding: 4px 8px; border-radius: 99px; background: #e9eeea; color: #58655e; font-size: 10px; font-weight: 850; }
.evaluation-candidate-state.running { background: #e6f1d2; color: #35551e; }
.evaluation-candidate-state.waiting { background: #eef1f2; color: #59656e; }
.evaluation-candidate-state.complete { background: #e6f2e4; color: #2f6734; }
.evaluation-candidate-state.not-run, .evaluation-candidate-state.partial, .evaluation-candidate-state.failed { background: #f8eddf; color: #8a551e; }
.evaluation-empty-results { margin: 8px 0; color: var(--muted); font-size: 12px; }
.evaluation-model dl { display: grid; gap: 5px; margin: 0 0 10px; }
.evaluation-model dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.evaluation-model dt { color: var(--muted); }
.evaluation-model dd { margin: 0; color: var(--ink); font-weight: 800; text-align: right; }
.evaluation-model details summary { min-height: 40px; display: flex; align-items: center; color: var(--accent-dark); font-size: 12px; font-weight: 800; cursor: pointer; }
.evaluation-model details ol { display: grid; gap: 8px; max-height: 420px; overflow: auto; margin: 4px 0 0; padding: 0; list-style: none; }
.evaluation-answer { padding: 9px; border-radius: 8px; background: #fff; font-size: 11px; }
.evaluation-answer.correct { border-left: 3px solid #55ae59; }
.evaluation-answer.incorrect { border-left: 3px solid #bd6b1b; }
.evaluation-answer.timed-out { border-left: 3px solid #8b6bb0; background: #f6f1fa; }
.evaluation-answer p { margin: 5px 0; color: var(--ink); overflow-wrap: anywhere; }
.evaluation-answer p span, .evaluation-answer small { color: var(--muted); }
.evaluation-answer small { display: block; }
.home-view, .workflow-view { padding: 54px 0 0; }
.home-heading { max-width: 700px; }
.home-heading h1 { font-size: clamp(40px, 6vw, 68px); }
.home-heading p:not(.eyebrow) { margin: 16px 0 0; color: var(--muted); font-size: 17px; }
.merchant-badge { display: inline-block; margin-top: 20px; padding: 7px 10px; border-radius: 8px; background: #eef4e6; color: var(--accent-dark); font-size: 12px; font-weight: 800; }
.workspace-menu, .workflow-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.workflow-cards { grid-template-columns: repeat(2, minmax(0, 420px)); margin-top: 30px; }
.inventory-actions { display: grid; gap: 8px; max-width: 760px; margin-top: 20px; }
.inventory-action { min-height: 68px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.inventory-action:hover { border-color: #bac8bc; background: #fbfcfa; }
.inventory-action-primary { border-color: var(--dark); background: var(--dark); color: #fff; }
.inventory-action-primary:hover { background: #213c34; }
.inventory-action-index { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.inventory-action-primary .inventory-action-index { color: #b1c3bc; }
.inventory-action-copy { display: grid; gap: 2px; }
.inventory-action-copy strong { font-size: 16px; line-height: 1.2; }
.inventory-action-copy small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.inventory-action-primary .inventory-action-copy small { color: #b1c3bc; }
.inventory-action-arrow { justify-self: end; font-size: 22px; }
.workspace-card { position: relative; min-height: 210px; display: flex; flex-direction: column; align-items: start; justify-content: space-between; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-align: left; text-decoration: none; }
.workspace-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22, 33, 31, .08); }
.workspace-card-dark { border-color: var(--dark); background: var(--dark); color: #fff; }
.workspace-card-index { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.workspace-card-dark .workspace-card-index { color: #b1c3bc; }
.workspace-card-title { margin-top: 30px; font-size: 22px; font-weight: 900; letter-spacing: -.04em; }
.workspace-card-copy { max-width: 260px; color: var(--muted); font-size: 13px; }
.workspace-card-dark .workspace-card-copy { color: #b1c3bc; }
.workspace-card-arrow { position: absolute; right: 22px; bottom: 20px; font-size: 25px; }
.page-heading { margin-bottom: 30px; }
.page-heading .back-link { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 26px; color: var(--muted); font-size: 13px; font-weight: 800; text-decoration: none; }
.page-heading h1 { max-width: 800px; font-size: clamp(38px, 6vw, 62px); }
.page-heading p:last-child { margin: 13px 0 0; color: var(--muted); font-size: 16px; }
.workflow-view .stats-grid { margin-top: 6px; }
.form-page .form-panel { max-width: 650px; }
.product-wizard-progress { width: min(650px, 100%); height: 4px; overflow: hidden; margin: -16px 0 18px; border-radius: 99px; background: #e4ebe5; }
.product-wizard-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent-dark); transition: width .2s ease; }
.product-wizard-panel { max-width: 650px; padding: 24px; }
.product-wizard-panel form { gap: 16px; }
.product-step-prompt { margin: 0; color: var(--ink); font-size: 20px; font-weight: 800; }
.product-step-prompt .optional { color: var(--muted); font-size: 12px; }
.product-wizard-panel input { min-height: 54px; font-size: 18px; }
.product-wizard-panel select { min-height: 54px; font-size: 16px; }
.product-wizard-panel textarea { min-height: 110px; resize: vertical; font: inherit; }
.size-field { display: grid; gap: 0; }
.size-unit-reveal { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transform: translateY(-7px); transition: grid-template-rows .24s ease, opacity .2s ease, transform .24s ease, margin .24s ease; }
.size-field.units-open .size-unit-reveal { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; transform: translateY(0); }
.size-unit-reveal-inner { min-height: 0; overflow: hidden; }
.size-unit-hint { margin: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.size-unit-picker { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9f6; }
.size-unit-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.size-unit-group > span { width: 54px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.size-unit-option { min-width: 48px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; }
.size-unit-option.selected { border-color: var(--dark); background: var(--dark); color: #fff; }
.size-unit-option:focus-visible { outline: 3px solid #d8efa1; outline-offset: 2px; }
.size-unit-error { margin: 8px 0 0; color: #9b3b31; font-size: 12px; font-weight: 700; }
.size-unit-error.hidden { display: none; }
.movement-value-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.product-empty-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.product-wizard-actions { display: flex; justify-content: space-between; gap: 12px; }
.product-wizard-actions .button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.product-step-skip { min-height: 44px; justify-self: center; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.drawer-mode-switch { display: none; }
.mode-switch { display: inline-flex; gap: 4px; margin-bottom: 22px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #ebf0eb; }
.mode-button { min-height: 44px; border: 0; border-radius: 9px; padding: 0 14px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; }
.mode-button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 7px rgba(22, 33, 31, .08); }
.chat-view { min-height: 620px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 28px; }
.chat-app { min-height: calc(100vh - 78px); display: flex; flex-direction: column; margin-top: 0; border: 0; border-radius: 0; background: var(--paper); }
.chat-app-header { display: flex; align-items: center; gap: 18px; padding: 19px 24px; border-bottom: 1px solid var(--line); }
.chat-app-header .back-link { min-height: 44px; display: inline-flex; align-items: center; margin: 0; }
.chat-app-header h1 { font-size: 27px; }
.chat-app .chat-messages { width: min(820px, 100%); align-self: center; flex: 1; }
.chat-app .chat-form { width: min(820px, 100%); align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; padding: 16px 0 calc(18px + env(safe-area-inset-bottom)); border-top: 0; }
.chat-model-picker { grid-column: 1 / -1; justify-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.chat-model-picker select { max-width: min(320px, 70vw); min-height: 34px; padding: 5px 30px 5px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; }
.chat-reopen { position: sticky; z-index: 2; bottom: 0; display: block; width: min(820px, 100%); min-height: 44px; margin: 16px auto calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--dark); font-weight: 800; }
.chat-app.composer-collapsed .chat-messages { padding-bottom: 24px; }
.dev-panel { width: min(820px, 100%); align-self: center; margin: 0 auto 12px; padding: 12px 14px; border: 1px dashed #9cac9f; border-radius: 12px; background: #f0f4ee; color: var(--muted); font-size: 12px; }
.dev-panel.chat-diagnostics-minimized { display: none; }
.dev-panel .eyebrow { margin-bottom: 8px; }
.dev-panel p:last-child { margin: 0; }
.dev-panel dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; margin: 0; }
.dev-panel dl div { display: flex; justify-content: space-between; gap: 8px; }
.dev-panel dt { color: var(--muted); }
.dev-panel dd { margin: 0; color: var(--ink); font-weight: 800; }
.dev-stage-metrics { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dev-stage-metrics .eyebrow { margin-bottom: 8px; }
.dev-stage-title { margin: 9px 0 3px; color: var(--ink); font-size: 11px; font-weight: 800; }
.dev-stage-metrics ol, .dev-stage-metrics ul { display: grid; gap: 3px; margin: 0; padding-left: 19px; }
.dev-stage-metrics li { overflow-wrap: anywhere; }
.chat-form textarea { width: 100%; min-height: 48px; max-height: 140px; resize: none; overflow-x: hidden; overflow-y: auto; padding: 11px 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; line-height: 1.4; }
.chat-form textarea:focus { border-color: #89aa48; box-shadow: 0 0 0 3px #e8f3c9; outline: 3px solid #d8efa1; outline-offset: 2px; }
.chat-send { width: 44px; height: 44px; margin: 0 0 2px; border: 0; border-radius: 50%; background: var(--dark); color: #fff; font-size: 24px; line-height: 1; }
.chat-send:focus { outline: 3px solid #d8efa1; outline-offset: 2px; }
.chat-send:disabled { cursor: wait; opacity: .55; }
.chat-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.chat-heading h2 { font-size: 34px; }
.chat-heading p:last-child { margin: 12px 0 0; color: var(--muted); }
.chat-context { padding: 8px 11px; border-radius: 9px; background: #eff5e3; color: var(--accent-dark); font-size: 12px; white-space: nowrap; }
.chat-messages { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 24px 4px; }
.chat-empty { margin: auto; color: var(--muted); font-size: 15px; text-align: center; }
.chat-empty strong, .chat-empty span { display: block; }
.chat-empty strong { margin-bottom: 6px; color: var(--ink); font-size: 22px; }
.chat-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); margin: 24px auto 0; }
.chat-example { min-height: 56px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.chat-example:hover { border-color: #89aa48; background: #edf4e9; }
.chat-example:focus-visible { outline: 3px solid #89aa48; outline-offset: 3px; }
@media (max-width: 520px) { .chat-examples { grid-template-columns: 1fr; } }
.chat-bubble { max-width: min(720px, 85%); padding: 13px 16px; border-radius: 15px; }
.chat-bubble span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chat-bubble p { margin: 0; white-space: pre-wrap; }
.chat-bubble strong { font-weight: 850; }
.chat-bubble.user { align-self: end; background: var(--dark); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.user span { color: #b1c3bc; }
.chat-bubble.assistant { align-self: start; background: #eef4e6; color: var(--ink); border-bottom-left-radius: 4px; }
.chat-activity { display: grid; grid-template-columns: 10px auto; gap: 0 9px; align-items: center; align-self: start; max-width: 300px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--muted); font-size: 13px; }
.chat-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dark); animation: chat-pulse 1.1s ease-in-out infinite; }
.chat-activity-track { grid-column: 2; display: block; height: 3px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e8eee9; }
.chat-activity-track i { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--accent-dark); animation: chat-progress 1.6s ease-in-out infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes chat-progress { 0% { transform: translateX(-130%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .chat-activity-dot, .chat-activity-track i { animation: none; } }
.chat-form { display: flex; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.chat-form.has-voice-controls { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.chat-composer-bubble { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: end; gap: 8px; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.chat-form.has-voice-controls .chat-composer-bubble textarea { min-width: 0; min-height: 44px; padding: 11px 8px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; }
.chat-form.has-voice-controls .chat-composer-bubble textarea:focus { outline: 0; }
.chat-voice, .chat-voice-cancel { min-height: 44px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--dark); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.chat-voice { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 5px; }
.chat-voice span:first-child { font-size: 19px; }
.chat-voice.recording { border-color: #bd6b1b; color: #8b3c16; background: #fff1e8; }
.chat-voice-cancel { align-self: flex-end; min-height: 36px; padding: 0 12px; }
.chat-voice:disabled, .chat-voice-cancel:disabled { cursor: wait; opacity: .55; }
.voice-status { margin: 0 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
body.chat-route { overflow: hidden; }
body.chat-route .shell { height: var(--visual-viewport-height, 100dvh); min-height: 0; padding-bottom: 0; overflow: hidden; }
body.chat-route main { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; overflow-x: hidden; }
body.chat-route #notice { flex: 0 0 auto; width: 100%; }
body.chat-route #app-view { display: flex; flex: 1 1 auto; width: 100%; min-height: 0; min-width: 0; max-width: 100%; overflow-x: hidden; }
body.chat-route footer { display: none; }
body.chat-route .chat-app { height: 100%; min-height: 0; width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; overscroll-behavior-x: none; }
.chat-app-header > div, .chat-app .chat-form > * { min-width: 0; }
.workspace-heading, .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.workspace-heading { margin: 4px 0 20px; }
.workspace-heading h2, .section-heading h2 { font-size: 31px; }
.workspace-context, .section-heading > p { margin: 0 0 2px; color: var(--muted); font-size: 13px; }
.workspace-context strong { color: var(--ink); }
.section-heading { margin: 34px 0 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.stats-grid-with-credit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { min-height: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.stat-card-link { color: inherit; text-decoration: none; }
.stat-card-link:hover, .stat-card-link[aria-current="page"] { border-color: var(--accent-dark); background: #eef4e9; }
.stat-card-link:focus-visible, .demo-summary-link:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.stat-card-link:hover .stat-caption, .demo-summary-link:hover span { text-decoration: underline; }
.demo-summary-link { color: inherit; text-decoration: none; border-radius: 6px; }
.inventory-filter-hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.inventory-filter-hint a { color: var(--ink); }
.stat-card-dark { border-color: var(--dark); background: var(--dark); color: #fff; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.stat-card-dark .stat-label, .stat-card-dark .stat-caption { color: #b1c3bc; }
.stat-card strong { font-size: 42px; letter-spacing: -.07em; line-height: 1; }
.stat-card-credit strong { font-size: 26px; letter-spacing: -.03em; }
.stat-caption { color: var(--muted); font-size: 13px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 22px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 22px; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.action-heading { align-items: start; margin-bottom: 18px; }
.action-heading h2 { margin: 0; }
.panel-toggle { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 800; }
.button:focus, .panel-toggle:focus, .drawer-nav a:focus { outline: 3px solid #d8efa1; outline-offset: 2px; }
.search-row { margin-bottom: 18px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th { padding: 0 12px 11px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .09em; }
td { padding: 15px 12px; border-bottom: 1px solid #edf1ee; }
tbody tr:last-child td { border-bottom: 0; }
.product-name { font-weight: 800; }
.product-link { display: block; color: inherit; text-decoration: none; }
.product-link:hover .product-name { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.product-link:focus-visible { outline: 3px solid #d8efa1; outline-offset: 3px; border-radius: 4px; }
.product-barcode { color: var(--muted); font-size: 12px; }
.product-description { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stock-low { color: var(--warning); font-weight: 800; }
.row-action { min-height: 44px; padding: 0 11px; font-size: 12px; }
.empty-state { padding: 35px 12px; color: var(--muted); text-align: center; }
.product-summary { max-width: 650px; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.product-summary strong { display: block; margin-top: 4px; font-size: 34px; letter-spacing: -.05em; }
.product-summary span { color: var(--muted); font-size: 13px; }
.product-actions { max-width: 650px; display: grid; gap: 10px; }
.product-action { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink); text-decoration: none; }
.product-action:hover { border-color: var(--accent-dark); transform: translateY(-1px); }
.product-action strong { font-size: 16px; }
.product-action small { color: var(--muted); font-size: 12px; }
.product-action span { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 22px; }
.product-action-primary { border-color: var(--dark); background: var(--dark); color: #fff; }
.product-action-primary small { color: #b1c3bc; }
.side-stack { display: grid; gap: 22px; }
.form-panel h2 { margin-bottom: 22px; }
.form-panel .action-heading h2 { margin-bottom: 0; }
form { display: grid; gap: 12px; }
form .button { margin-top: 5px; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.optional { font-weight: 400; }
footer { padding: 35px 0 0; color: var(--muted); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .content-grid { grid-template-columns: 1fr; } .hero { align-items: start; flex-direction: column; } .merchant-control { width: 100%; } }
@media (max-width: 620px) {
  .evaluation-page { padding-top: 18px; }
  .evaluation-page .page-heading { margin-bottom: 15px; }
  .evaluation-run-panel { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .evaluation-run-actions { justify-items: stretch; }
  .evaluation-run-actions .button { width: 100%; min-width: 0; }
  .evaluation-run-actions p { text-align: left; }
  .asr-study-panel { gap: 15px; margin-bottom: 21px; padding: 14px; }
  .asr-study-heading { flex-direction: column; gap: 9px; }
  .asr-study-heading h2 { font-size: 21px; }
  .asr-study-badge { align-self: start; }
  .asr-study-grid { grid-template-columns: 1fr; gap: 9px; }
  .asr-study-model { gap: 14px; padding: 13px; }
  .evaluation-page .model-evaluation-results { grid-template-columns: 1fr; }
  .evaluation-graph-heading { align-items: start; flex-direction: column; gap: 4px; }
  .evaluation-graph-heading > span { margin-top: 0; }
  .evaluation-graph-heading-actions { align-items: start; flex-direction: column; gap: 6px; }
  .evaluation-graph-overlay { padding: 10px; }
  .evaluation-graph-overlay-panel { width: 100%; max-height: 96vh; padding: 38px 10px 14px; }
  .evaluation-graph-expanded svg { min-height: 320px; }
  .evaluation-graph-axis-label, .evaluation-graph-axis-title { font-size: 11px; }
  .evaluation-summary-controls { width: 100%; justify-content: start; align-items: start; gap: 10px; }
  .evaluation-filter-group { min-width: 0; }
  .evaluation-filter-group > span, .evaluation-filter-group > div { display: none; }
  .evaluation-filter-select-label { display: block; }
  .evaluation-filter-button { min-height: 38px; padding: 0 8px; }
  .evaluation-candidate-count { display: none; }
  .evaluation-scatter-row { grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 5px; font-size: 10px; }
  .evaluation-results-toolbar { align-items: stretch; flex-direction: column; }
  .evaluation-results-toolbar label { min-width: 0; width: 100%; }
  .evaluation-comparison { padding: 12px 9px; }
  .evaluation-chart-row { grid-template-columns: minmax(95px, 1.2fr) minmax(45px, 1fr) minmax(55px, .6fr); gap: 7px; padding: 5px; }
  .evaluation-chart-label, .evaluation-chart-value { font-size: 10px; }
  .evaluation-page .evaluation-model dl { grid-template-columns: 1fr; }
  .evaluation-history { margin-top: 18px; padding-top: 16px; }
  .evaluation-navigation-layout { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .evaluation-navigation-layout .evaluation-history { position: static; }
  .evaluation-history-list { grid-template-columns: 1fr; }
  .evaluation-history-item { padding: 10px; }
  .evaluation-selected-run-heading { align-items: start; flex-direction: column; gap: 10px; }
  .evaluation-model details ol { max-height: 300px; }
  .shell { padding: 0 14px 24px; }
  .topbar { min-height: 64px; flex-wrap: wrap; gap: 10px 16px; padding: 10px 0; }
  .menu-button { order: 1; }
  .brand { order: 2; margin: 0 auto; font-size: 18px; }
  body.chat-route .topbar .chat-model-picker { right: 0; }
  body.chat-route .topbar .chat-model-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .topbar .chat-model-picker select { width: min(142px, 38vw); max-width: 142px; min-height: 38px; font-size: 10px; }
  .current-merchant { order: 3; max-width: 105px; font-size: 12px; }
  .menu-drawer { width: min(340px, 90vw); padding: 22px 17px; }
  .menu-drawer { padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .home-view, .workflow-view { padding-top: 30px; }
  .home-heading h1 { font-size: 39px; }
  .home-heading p:not(.eyebrow) { margin-top: 12px; font-size: 15px; }
  .workspace-menu, .workflow-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .workflow-cards { margin-top: 20px; }
  .workspace-card { min-height: 145px; padding: 17px; border-radius: 13px; }
  .home-view .workspace-card { min-height: 82px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; grid-template-rows: auto auto; column-gap: 10px; padding: 13px 15px; }
  .home-view .workspace-card-index { grid-row: 1 / 3; align-self: start; }
  .home-view .workspace-card-title { margin: 0; font-size: 17px; }
  .home-view .workspace-card-copy { grid-column: 2; font-size: 11px; line-height: 1.3; }
  .home-view .workspace-card-arrow { right: 15px; top: 25px; bottom: auto; font-size: 20px; }
  .workspace-card-title { margin-top: 15px; font-size: 20px; }
  .workspace-card-copy { font-size: 12px; }
  .page-heading { margin-bottom: 22px; }
  .page-heading .back-link { margin-bottom: 20px; }
  .page-heading h1 { font-size: 36px; }
  .page-heading p:last-child { font-size: 14px; }
  .inventory-menu-view { padding-top: 18px; }
  .inventory-menu-view .page-heading { margin-bottom: 14px; }
  .inventory-menu-view .page-heading .back-link { min-height: 36px; margin-bottom: 10px; }
  .inventory-menu-view .page-heading h1 { font-size: 30px; }
  .inventory-menu-view .page-heading p:last-child { margin-top: 6px; }
  .inventory-actions { gap: 7px; margin-top: 14px; }
  .inventory-action { min-height: 62px; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 8px; padding: 8px 11px; border-radius: 10px; }
  .inventory-action-copy strong { font-size: 15px; }
  .inventory-action-copy small { font-size: 11px; }
  .drawer-heading { margin-bottom: 22px; }
  .hero { gap: 28px; padding: 34px 0 24px; }
  h1 { font-size: clamp(42px, 14vw, 58px); }
  .home-heading h1 { font-size: 34px; }
  .page-heading h1 { font-size: 34px; }
  .hero-copy { margin-top: 14px; font-size: 15px; }
  .merchant-control { min-width: 0; }
  .control-row, .search-row { flex-direction: column; }
  .control-row .button, .search-row .button { width: 100%; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stats-grid-with-credit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inventory-view { display: grid; grid-template-columns: 1fr; gap: 0; }
  .workspace-heading, .section-heading { align-items: start; flex-direction: column; gap: 7px; }
  .workspace-heading { order: 1; margin: 3px 0 16px; }
  .workspace-heading h2, .section-heading h2 { font-size: 27px; }
  .section-heading { order: 2; margin: 0 0 13px; }
  .stat-card { min-height: 94px; padding: 13px 11px; border-radius: 13px; }
  .stat-card strong { font-size: 30px; }
  .stat-card-credit strong { font-size: 24px; }
  .stat-caption { font-size: 12px; }
  .stats-grid { order: 4; margin: 20px 0 0; }
  .content-grid { display: contents; }
  .side-stack { order: 3; gap: 10px; }
  .inventory-panel { order: 5; margin-top: 22px; }
  .panel { padding: 16px; border-radius: 13px; }
  .panel-heading { align-items: start; margin-bottom: 17px; }
  .panel-heading .button { min-height: 44px; padding: 0 12px; }
  .action-heading { margin-bottom: 14px; }
  .panel-toggle, .row-action { min-height: 44px; }
  .mode-switch { display: flex; width: 100%; margin-bottom: 14px; }
  .mode-button { flex: 1; padding: 0 8px; font-size: 12px; }
  .chat-view { min-height: 560px; padding: 17px; border-radius: 13px; }
  .chat-app { height: calc(var(--visual-viewport-height, 100dvh) - 78px); min-height: 0; margin-top: 0; border: 0; border-radius: 0; background: transparent; }
  .chat-app { display: block; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; touch-action: pan-y; }
  .chat-app-header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .chat-app-header .back-link { font-size: 12px; }
  .chat-app-header h1 { font-size: 24px; }
  .chat-app .chat-messages { min-height: 100%; padding: 18px 0 180px; overflow: visible; }
  .chat-app .chat-messages:has(.chat-empty) { padding-bottom: 96px; }
  .chat-app .chat-form { position: fixed; z-index: 10; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom)); width: auto; grid-template-columns: minmax(0, 1fr) 44px; padding: 10px 0; background: var(--paper); }
  .chat-app .chat-form.has-voice-controls { display: flex; flex-direction: column; gap: 5px; }
  .chat-reopen { width: 100%; margin: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .dev-panel { width: 100%; margin-bottom: 10px; }
  .dev-panel dl { grid-template-columns: repeat(2, 1fr); }
  .chat-form textarea { font-size: 16px; }
  .chat-heading { flex-direction: column; gap: 13px; padding-bottom: 17px; }
  .chat-heading h2 { font-size: 29px; }
  .chat-form { position: sticky; bottom: 0; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); background: var(--card); }
  .chat-form .button { width: 100%; }
  .chat-bubble { max-width: 94%; }
  .table-wrap { overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  tbody tr { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
  tbody tr:last-child { margin-bottom: 0; }
  td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border: 0; text-align: right; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
  td:first-child { display: block; padding-top: 2px; text-align: left; }
  td:first-child::before, td:last-child::before { display: none; }
  td:last-child { display: block; padding-top: 10px; }
  .row-action { width: 100%; }
  .form-two-col { grid-template-columns: 1fr; }
  .product-form-page { padding-top: 14px; }
  .product-form-page .page-heading { margin-bottom: 12px; }
  .product-form-page .page-heading .back-link { min-height: 36px; margin-bottom: 8px; }
  .product-form-page .page-heading .eyebrow { margin-bottom: 5px; }
  .product-form-page .page-heading h1 { font-size: 30px; }
  .product-form-page .page-heading p:last-child { margin-top: 6px; }
  .product-wizard-progress { margin: -4px 0 14px; }
  .product-wizard-panel { padding: 16px; }
  .product-wizard-panel form { gap: 14px; }
  .product-step-prompt { font-size: 18px; }
  .product-wizard-panel input { min-height: 52px; font-size: 16px; }
  .product-wizard-panel select { min-height: 52px; font-size: 16px; }
  .size-unit-picker { gap: 7px; padding: 9px; }
  .size-unit-group { gap: 5px; }
  .size-unit-group > span { width: 48px; font-size: 9px; }
  .size-unit-option { min-width: 42px; min-height: 40px; padding: 0 9px; }
  input, select { font-size: 16px; }
  footer { padding-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .size-unit-reveal { transition: none; transform: none; }
}

.chat-diagnostics { margin-top: 14px; border-top: 1px solid #cbd5cf; padding-top: 10px; font-size: 12px; overflow-wrap: anywhere; }
.chat-diagnostics summary { cursor: pointer; font-weight: 600; }
.chat-diagnostics dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 5px 0; }
.chat-diagnostics dd { margin: 0; text-align: right; }
.chat-diagnostics small { display: block; margin-top: 10px; }
.timing-chart { margin: 18px 0; min-width: 0; }
.timing-chart-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.timing-stacked-bar { display: flex; width: 100%; height: 24px; overflow: hidden; border-radius: 4px; background: var(--line); }
.timing-segment { display: block; flex: 0 0 auto; height: 100%; min-height: 0; min-width: 0; border: 0; border-radius: 0; padding: 0; cursor: pointer; appearance: none; }
.timing-segment:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.timing-needle { background: var(--warning); }
.timing-model, .timing-generation { background: var(--accent-dark); }
.timing-tools, .timing-load { background: #7184a3; }
.timing-discovery, .timing-prompt { background: #739c89; }
.timing-queue, .timing-other { background: var(--line); }
.timing-bar-wrap { position: relative; }
.timing-tooltip { position: absolute; bottom: calc(100% + 7px); left: 0; max-width: 100%; box-sizing: border-box; z-index: 10; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); color: var(--card); pointer-events: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.timing-tooltip[hidden] { display: none; }
.chat-diagnostics .timing-chart-note { margin: 10px 0; font-size: 11px; color: var(--muted); }
.timing-raw { margin-top: 14px; }
@media (max-width: 540px) {
  .timing-stacked-bar { height: 44px; }
  .timing-raw > summary { min-height: 44px; display: flex; align-items: center; }
}

/* Optional demo guide stays in the page flow, with the stock visible beneath it. */
.demo-guide { min-width: 0; margin: 0 0 22px; padding: clamp(16px, 3vw, 26px); border: 1px solid #d0dfbe; border-radius: 18px; background: #edf4e4; }
.demo-guide-steps { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 18px; padding: 0; list-style: none; color: #52634c; font-size: 12px; }
.demo-guide-steps li { display: flex; align-items: center; gap: 7px; }
.demo-guide-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #a5b896; border-radius: 50%; }
.demo-guide-steps [aria-current="step"] { color: var(--dark); font-weight: 800; }
.demo-guide-steps [aria-current="step"] > span { background: var(--dark); color: #fff; border-color: var(--dark); }
.demo-guide-body { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.demo-guide-body > div { min-width: 0; }
.demo-guide h2 { margin: 0 0 7px; font-size: clamp(19px, 3vw, 25px); overflow-wrap: anywhere; }
.demo-guide p { max-width: 64ch; margin: 0 0 10px; line-height: 1.5; }
.demo-guide small { color: #52634c; font-size: 11px; }
.demo-guide-actions { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.demo-guide-actions .button { white-space: normal; }
.demo-guide-note { font-weight: 700; }
.demo-guide-compact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; color: var(--muted); font-size: 12px; }
.demo-added-product { background: #f0f7e7; box-shadow: inset 3px 0 #648d32; }
.demo-product-form, .demo-product-details { display: grid; gap: 20px; }
.demo-product-form label { display: grid; gap: 7px; font-weight: 700; min-width: 0; }
.demo-product-form input, .demo-product-form select, .demo-product-form textarea { width: 100%; min-height: 46px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); }
.demo-product-form textarea { resize: vertical; }
.demo-product-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo-product-form summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 700; }
.demo-product-form summary span { color: var(--muted); font-weight: 400; }
.demo-product-details { padding-top: 12px; }
.demo-product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-product-page .form-panel { max-width: 680px; margin-inline: auto; }
.demo-guide button:focus-visible, .product-wizard-panel :is(input, select, textarea, a, button):focus-visible { outline: 3px solid #638d35; outline-offset: 3px; }
.chat-messages > #demo-guide { width: 100%; margin-top: 16px; }
.chat-app .demo-guide { margin-bottom: 10px; padding: 14px 18px; }
.chat-app .demo-guide h2 { font-size: 18px; }
.chat-app .demo-guide-steps { margin-bottom: 10px; }
@media (max-width: 760px) {
  .demo-guide-body { flex-direction: column; align-items: stretch; gap: 12px; }
  .demo-guide-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  .demo-guide-actions .button { flex: 1; }
  .demo-guide-steps { gap: 8px 12px; font-size: 11px; }

  .chat-app .demo-guide { padding: 14px; }
}
@media (max-width: 420px) {
  .demo-product-numbers { grid-template-columns: 1fr; }
  .demo-product-actions > * { width: 100%; text-align: center; }
}

.inventory-page:has(.demo-guide) .page-heading, .demo-product-page .page-heading { margin-bottom: 18px; }
.inventory-page:has(.demo-guide) .page-heading h1, .demo-product-page .page-heading h1 { font-size: clamp(30px, 4vw, 44px); }
.inventory-page:has(.demo-guide) .page-heading .back-link, .demo-product-page .page-heading .back-link { min-height: 36px; margin-bottom: 8px; }

/* Shared AI access stays within the visible viewport, including above keyboards. */
.topbar .demo-header-badge { position: static; flex-shrink: 0; }
.floating-ai-button { position: fixed; z-index: 18; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom) + var(--floating-ai-offset, 0px)); display: inline-flex; align-items: center; gap: 9px; min-height: 52px; max-width: calc(100vw - 32px); padding: 12px 20px; border: 1px solid var(--dark); border-radius: 999px; background: var(--dark); color: #fff; font-size: 14px; white-space: nowrap; box-shadow: 0 5px 20px rgba(22, 33, 31, .22); }
.floating-ai-button svg { flex-shrink: 0; }
.floating-ai-button:hover { background: #284b40; color: #fff; }
.floating-ai-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
body.menu-open .floating-ai-button { visibility: hidden; }
/* Keep page controls in a scrollable area above the fixed AI access strip.
   Padding at the end of a long document alone cannot prevent intermediate
   rows and form controls from scrolling underneath a fixed button. */
body:not(.chat-route) .shell { height: var(--visual-viewport-height, 100dvh); min-height: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); overflow: hidden; }
body:not(.chat-route) main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
body:not(.chat-route) .topbar, body:not(.chat-route) footer { flex-shrink: 0; }
html { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
body:not(.chat-route) :is(input, textarea, select, button, a) { scroll-margin-bottom: calc(100px + env(safe-area-inset-bottom)); }
#ask-emoola-button[hidden], body.chat-route #ask-emoola-button { display: none; }
.stock-review { display: grid; gap: 12px; margin: 20px 0; }
.stock-review > div { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 14px; }
.stock-review dt { color: var(--muted); }
.stock-review dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .topbar .demo-header-badge { display: none; }
  .topbar .brand { min-width: 0; }
}

/* Structured read results scroll inside chat bubbles on narrow screens. */
.chat-table-wrap { max-width: 100%; overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.chat-result-table { display: table; width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
.chat-result-table thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.chat-result-table tbody { display: table-row-group; width: auto; }
.chat-result-table tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.chat-result-table td, .chat-result-table td:first-child, .chat-result-table td:last-child { display: table-cell; width: auto; }
.chat-result-table td::before { display: none; }
.chat-result-table caption { padding: 10px 12px; text-align: left; font-weight: 800; }
.chat-result-table th, .chat-result-table td { padding: 9px 12px; text-align: left; vertical-align: top; white-space: nowrap; border-top: 1px solid var(--line); }
.chat-result-table th { font-weight: 800; }
.chat-result-table td:first-child { white-space: normal; min-width: 130px; overflow-wrap: anywhere; }
.chat-table-note { font-size: 12px; color: var(--muted); }
/* Location selection stays inline so suggestions do not cover registration controls. */
.business-location { min-width: 0; }
.location-suggestions { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: #fff; }
.location-option { padding: 12px; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.location-option + .location-option { border-top: 1px solid var(--line); }
.location-option:hover, .location-option[aria-selected="true"] { background: #eef4e9; color: var(--ink); }
.location-status { margin: 6px 0; font-size: 13px; color: var(--muted); }
.location-attribution { margin: 8px 0 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.location-attribution a { color: inherit; }
#location-source:not(:empty) { display: block; }

.account-role-badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--accent-dark); border-radius: 20px; color: var(--accent-dark); background: #eef4e6; font-size: 12px; font-weight: 800; }

.usage-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin: 20px 0; }
.usage-stats > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.usage-stats span { display: block; color: var(--muted); font-size: 12px; }
.usage-stats strong { display: block; font-size: 22px; margin-top: 6px; }
.usage-chart { margin: 20px 0; }
.usage-chart svg { width: 100%; display: block; }
.usage-chart figcaption { color: var(--muted); font-size: 12px; }
.usage-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.usage-toolbar label { min-width:180px; }
.usage-live::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#376844; margin-right:8px; }
.usage-live.is-stale::before { background:#b6792c; }
.usage-gauges { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.usage-gauge-card { text-align:center; padding:24px 10px 14px; border:1px solid var(--line); border-radius:18px; background:var(--surface,#fff); }
.usage-gauge { width:clamp(88px,13vw,150px); aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--usage-color) var(--usage-value),#edf0ea 0); display:grid; place-items:center; position:relative; margin:auto; }
.usage-gauge::before { content:''; position:absolute; inset:10%; border-radius:50%; background:var(--surface,#fff); }
.usage-gauge strong { position:relative; font-size:clamp(18px,3vw,30px); }
.usage-gauge-card h2 { font-size:16px; margin:14px 0 6px; }
.usage-gauge-card p { color:var(--muted); font-size:12px; margin:0; }
.usage-history { border:1px solid var(--line); border-radius:18px; padding:0 20px 20px; }
.usage-history .usage-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.usage-history .usage-stats > div { border:0; padding:8px 0; }
.usage-chart svg { overflow:visible; }
.usage-chart text { fill:var(--muted); font-size:12px; }
.usage-grid { stroke:var(--line); stroke-width:1; }
.usage-average-line { stroke:#376844; stroke-width:2.5; fill:none; }
.usage-peak-line { stroke:#a77535; stroke-width:1.5; stroke-dasharray:5 4; fill:none; }
.usage-chart figcaption { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.usage-legend-average::before,.usage-legend-peak::before { content:''; width:18px; display:inline-block; border-top:3px solid #376844; margin-right:6px; vertical-align:middle; }
.usage-legend-peak::before { border-color:#a77535; border-top-style:dashed; }
.usage-coverage label { display:flex; justify-content:space-between; font-size:12px; }
.usage-coverage progress { display:block; width:100%; height:8px; accent-color:#376844; }
.usage-coverage p,.usage-details { color:var(--muted); font-size:12px; }
.usage-details { margin-top:20px; }
@media(max-width:520px) { .usage-gauges { gap:7px; } .usage-gauge-card { padding:16px 6px; } .usage-gauge-card h2 { font-size:14px; } .usage-history { padding:0 10px 12px; } .usage-stats strong { font-size:18px; } .usage-chart svg { min-height:160px; } }

body.usage-route footer, body.usage-route #workspace-badge { display: none; }

.dataset-table { overflow-x:auto; margin:16px 0 28px; }
.dataset-table table { width:100%; border-collapse:collapse; font-size:13px; }
.dataset-table th,.dataset-table td { padding:10px; border-bottom:1px solid var(--line); text-align:left; }
#dataset-detail pre { overflow:auto; max-height:600px; padding:16px; background:#f3f5ef; font-size:12px; }

.pilot-agreement { margin: 1rem 0; padding: 1rem; border: 1px solid #b8c9bd; border-radius: 12px; }
.account-panel .pilot-consent { display: flex; align-items: flex-start; gap: .7rem; margin: .9rem 0; }
.account-panel .pilot-consent input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; flex: 0 0 auto; margin-top: .3rem; }
.pilot-consent a { text-decoration: underline; color: #21593d; }

.account-panel textarea { min-height: 100px; resize: vertical; font: inherit; font-size: 16px; }

body.admin-users-route .account-page { max-width: 1380px; }
.admin-users-search { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 12px; align-items: end; }
.admin-users-table { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.admin-users-table th, .admin-users-table td { text-align: left; vertical-align: top; padding: 14px 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.admin-users-table thead { display: table-header-group; position: static; }
.admin-users-table tbody { display: table-row-group; }
.admin-users-table tr { display: table-row; }
.admin-users-table td { display: table-cell; }
.admin-users-table td::before { content: none; }
.admin-users-pagination { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 18px; }
.admin-business-description { white-space: pre-wrap; }
@media(max-width: 700px) {
  body.admin-users-route .account-panel { padding: 16px; }
  .admin-users-search { grid-template-columns: 1fr 1fr; }
  .admin-users-search label { grid-column: 1 / -1; }
  .admin-users-table, .admin-users-table tbody { display: block; }
  .admin-users-table thead { display: none; }
  .admin-users-table tr { display: block; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
  .admin-users-table td { display: block; padding: 10px 6px; }
  .admin-users-table td::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: 5px; color: var(--muted); }
  .admin-users-table td:last-child { border-bottom: 0; }
}

/* Customer credit book */
#credit-book { overflow-wrap: anywhere; }
#credit-book details { margin: 20px 0; border: 1px solid var(--line); padding: 16px; border-radius: 12px; }
#credit-book summary { cursor: pointer; font-weight: 700; }
#credit-book fieldset { display: grid; gap: 14px; border: 0; padding: 0; margin: 16px 0; min-width: 0; }
#credit-book form { display: grid; gap: 14px; margin: 16px 0; }
#credit-book label { display: grid; gap: 8px; }
.credit-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.credit-totals div { padding: 14px; background: #f1f6f2; border-radius: 10px; }
.credit-totals span, .credit-totals strong, .credit-list span { display: block; }
.credit-totals strong { margin-top: 6px; }
.credit-list { list-style: none; padding: 0; }
.credit-list li, .credit-line { padding: 14px 0; border-bottom: 1px solid var(--line); }
.credit-line { display: grid; gap: 12px; }
.credit-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.credit-detail { border-top: 2px solid var(--line); margin-top: 24px; padding-top: 18px; }
#credit-book input, #credit-book select, #credit-book textarea { min-width: 0; max-width: 100%; }
@media(max-width: 420px) { .credit-totals { grid-template-columns: 1fr; } }

.daily-panel { margin-top: 22px; }
.daily-summary-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
.daily-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
#daily-settings { display: grid; gap: 10px; max-width: 580px; }
#daily-note { display: block; width: 100%; min-height: 85px; }

.account-panel .daily-toggle { display: flex; align-items: center; gap: 10px; }
.account-panel #daily-enabled { width: 20px; min-height: 20px; flex: 0 0 20px; padding: 0; }

#daily-status:not(:empty) { padding: 12px; border: 1px solid var(--accent-dark); border-radius: 8px; background: #eef4e9; }
#daily-status[role="alert"]:not(:empty) { border-color: var(--warning); background: #fff2df; }

.daily-activities { list-style: none; padding: 0; display: grid; gap: 12px; }
.daily-activity { padding: 16px; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.daily-activity h4 { margin: 10px 0; font-size: 17px; }
.daily-activity ul { padding-left: 20px; line-height: 1.6; }
.daily-activity-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.daily-activity-heading time, .daily-reference { color: var(--muted); font-size: 12px; }
.daily-totals { margin: 16px 0; }
.daily-totals > summary { cursor: pointer; font-weight: 700; }

.daily-response-status { margin: 20px 0; padding: 18px; border: 2px solid var(--accent); border-radius: 10px; background: var(--paper); overflow-wrap: anywhere; }
.daily-response-status h3 { margin-top: 0; }