:root {
  --ink: #171719;
  --ink-soft: #272629;
  --paper: #f4efe6;
  --paper-2: #ebe4d9;
  --paper-3: #ddd3c4;
  --line: rgba(39, 38, 37, 0.14);
  --muted: #847d73;
  --rust: #c85d3f;
  --rust-deep: #9e432e;
  --moss: #56796b;
  --moss-soft: #bfd5c8;
  --gold: #d8ab41;
  --blue: #7896aa;
  --white: #fffaf2;
  --shadow: 0 18px 50px rgba(47, 38, 26, 0.1);
  --radius: 12px;
  --mono: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", ui-sans-serif, sans-serif;
  --display: "Iowan Old Style", "Songti SC", "STSong", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--ink); color: #f4ece2; display: flex; flex-direction: column; padding: 26px 16px 20px; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 2px 12px 26px; }
.brand-mark { width: 26px; height: 26px; border: 1px solid rgba(244,239,230,.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-15deg); }
.brand-mark span { display: block; width: 3px; border-radius: 4px; background: var(--rust); }
.brand-mark span:nth-child(1) { height: 8px; background: var(--gold); }
.brand-mark span:nth-child(2) { height: 15px; }
.brand-mark span:nth-child(3) { height: 11px; background: var(--moss-soft); }
.brand-name { letter-spacing: .16em; font-size: 12px; font-weight: 700; }
.brand-sub { color: rgba(244,239,230,.46); font-size: 10px; margin-top: 4px; letter-spacing: .08em; }
.store-switcher { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; display: flex; align-items: center; gap: 9px; padding: 11px 10px; margin: 0 3px 25px; }
.store-dot, .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #74a88a; box-shadow: 0 0 0 4px rgba(116,168,138,.14); flex: 0 0 auto; }
.store-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.store-copy span { font-size: 9px; color: rgba(244,239,230,.45); }
.store-copy strong { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button { background: transparent; color: rgba(244,239,230,.65); border: 0; padding: 2px 4px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { border: 0; border-radius: 8px; color: rgba(244,239,230,.6); background: transparent; padding: 12px 12px; display: flex; align-items: center; gap: 11px; text-align: left; font-size: 12px; transition: .2s ease; }
.nav-item:hover { color: var(--paper); background: rgba(255,255,255,.05); }
.nav-item.is-active { background: var(--paper); color: var(--ink); }
.nav-item b { margin-left: auto; font: 10px var(--mono); opacity: .65; }
.nav-icon { width: 17px; font-size: 17px; line-height: 1; text-align: center; font-family: var(--display); }
.sidebar-bottom { margin-top: auto; padding: 0 10px; display: grid; gap: 15px; }
.agent-status { display: flex; align-items: center; gap: 8px; color: rgba(244,239,230,.72); font-size: 10px; }
.status-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--moss-soft); box-shadow: 0 0 0 4px rgba(191,213,200,.1); }
.mini-link { color: rgba(244,239,230,.6); background: none; border: 0; font-size: 10px; padding: 0; display: flex; justify-content: space-between; text-align: left; }
.mini-link:hover { color: var(--white); }
.sidebar-footnote { color: rgba(244,239,230,.24); font-size: 9px; letter-spacing: .04em; }

.main-content { min-width: 0; background: var(--paper); }
.topbar { min-height: 75px; padding: 18px 42px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.mobile-brand { display: none; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; }
.mobile-brand .brand-mark { width: 22px; height: 22px; }
.date-stamp { display: flex; align-items: center; gap: 14px; }
.eyebrow { color: var(--muted); font: 9px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.date-note { color: #5f594f; font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.sync-state { background: transparent; border: 0; color: var(--muted); display: flex; align-items: center; gap: 8px; font-size: 10px; }
.avatar { border: 0; background: var(--ink); color: var(--paper); width: 29px; height: 29px; border-radius: 50%; font-size: 11px; }
.view { display: none; padding: 42px 42px 70px; max-width: 1460px; margin: 0 auto; }
.view.is-visible { display: block; animation: enter .32s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 35px; align-items: end; margin-bottom: 59px; }
.accent-eyebrow { color: var(--rust); }
.hero-copy h1 { margin: 13px 0 12px; font: 600 clamp(48px, 7vw, 86px)/.9 var(--display); letter-spacing: -.065em; }
.hero-copy h1 em { color: var(--rust); font-style: normal; position: relative; }
.hero-copy h1 em::after { content: ""; position: absolute; left: 3px; right: -3px; bottom: -5px; height: 5px; border-radius: 50%; background: rgba(200,93,63,.24); transform: rotate(-2deg); }
.hero-period { color: var(--gold); }
.hero-copy p { color: #756d63; font-size: 14px; line-height: 1.7; max-width: 490px; margin: 0 0 24px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.button { border-radius: 7px; padding: 11px 15px; border: 1px solid transparent; font-size: 11px; transition: .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.button-primary { color: var(--paper); background: var(--rust); border-color: var(--rust); box-shadow: 0 5px 14px rgba(200,93,63,.18); }
.button-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); transform: translateY(-1px); }
.button-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.button-ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.33); }
.ledger-card { background: var(--ink); color: var(--paper); border-radius: 11px; padding: 20px 19px 17px; box-shadow: var(--shadow); }
.ledger-top { color: rgba(244,239,230,.6); font: 9px var(--mono); letter-spacing: .06em; display: flex; justify-content: space-between; }
.ledger-date { color: var(--gold); }
.ledger-number { display: flex; align-items: baseline; gap: 8px; padding: 18px 0 17px; }
.ledger-number strong { color: var(--paper); font: 42px var(--display); letter-spacing: -.07em; }
.ledger-number span { color: rgba(244,239,230,.55); font-size: 10px; }
.ledger-rule { height: 1px; background: rgba(244,239,230,.14); margin-bottom: 13px; }
.ledger-row { display: flex; align-items: center; justify-content: space-between; font-size: 10px; padding: 5px 0; color: rgba(244,239,230,.65); }
.ledger-row b { color: var(--paper); font: 11px var(--mono); }
.tiny-dot { width: 5px; height: 5px; display: inline-block; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.tiny-dot.red { background: #e67557; }.tiny-dot.amber { background: var(--gold); }.tiny-dot.green { background: #76a988; }
.ledger-foot { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(244,239,230,.14); display: flex; justify-content: space-between; color: rgba(244,239,230,.43); font-size: 9px; }
.ledger-foot strong { color: var(--moss-soft); font: 10px var(--mono); }

.section-head, .panel-head, .page-heading, .recipe-detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.inventory-head { align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 19px; }
h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.035em; }
.section-head h2 { font: 600 31px/1 var(--display); margin-top: 7px; }
.head-note { color: var(--muted); font-size: 10px; display: flex; align-items: center; gap: 8px; }
.legend-bar { height: 12px; width: 3px; background: var(--rust); border-radius: 2px; display: inline-block; }
.inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.inventory-card { min-height: 193px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 16px 15px 14px; position: relative; overflow: hidden; transition: .2s ease; }
.inventory-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47,38,26,.09); }
.inventory-card.is-critical { border-color: rgba(200,93,63,.36); }
.inventory-card.is-warning { border-color: rgba(216,171,65,.4); }
.inventory-top { display: flex; justify-content: space-between; gap: 8px; }
.inventory-name { font-size: 13px; font-weight: 650; }
.inventory-type { color: var(--muted); font-size: 9px; margin-top: 3px; }
.days-value { font: 26px/1 var(--display); letter-spacing: -.04em; text-align: right; }
.days-value small { display: block; font: 9px var(--mono); color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.days-value.critical { color: var(--rust); }.days-value.warning { color: #b6851f; }.days-value.good { color: var(--moss); }
.inventory-middle { display: flex; align-items: end; gap: 13px; margin-top: 22px; }
.stock-rail { width: 8px; height: 62px; border-radius: 7px; background: #e4ddd3; display: flex; align-items: end; overflow: hidden; }
.stock-fill { width: 100%; background: var(--rust); border-radius: 7px; animation: fill-in .6s ease both; transform-origin: bottom; }
.stock-fill.gold { background: var(--gold); }.stock-fill.moss { background: var(--moss); }.stock-fill.blue { background: var(--blue); }
@keyframes fill-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.inventory-number { font: 23px var(--display); letter-spacing: -.04em; }.inventory-number small { color: var(--muted); font: 9px var(--mono); margin-left: 4px; }
.inventory-consumption { color: var(--muted); font-size: 10px; line-height: 1.5; }
.inventory-consumption b { color: var(--ink); font-weight: 550; display: block; }
.inventory-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--line); }
.action-label { font-size: 10px; color: var(--muted); }.action-label b { display: block; color: var(--ink); font-size: 10px; margin-top: 2px; }
.stock-arrow { color: var(--rust); font-size: 16px; }
.lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; margin-top: 13px; }
.panel { background: rgba(255,250,242,.75); border: 1px solid var(--line); border-radius: 9px; padding: 20px; }
.panel-head h3 { font-size: 17px; margin-top: 6px; }.text-button { border: 0; background: transparent; color: var(--rust-deep); font-size: 10px; padding: 3px 0; }.text-button:hover { text-decoration: underline; }
.quiet-chip, .draft-badge { border: 1px solid var(--line); color: var(--muted); border-radius: 99px; font: 9px var(--mono); padding: 5px 8px; white-space: nowrap; }.draft-badge { border-color: rgba(216,171,65,.5); color: #a87b1b; background: rgba(216,171,65,.1); }
.weekly-bars { display: grid; gap: 13px; margin-top: 22px; }
.bar-line { display: grid; grid-template-columns: 116px 1fr 55px; gap: 10px; align-items: center; font-size: 10px; }.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.bar-track { height: 7px; background: #ded8cf; border-radius: 10px; overflow: hidden; }.bar-fill { height: 100%; background: var(--rust); border-radius: inherit; }.bar-fill.moss { background: var(--moss); }.bar-fill.gold { background: var(--gold); }.bar-value { text-align: right; color: var(--muted); font: 10px var(--mono); }
.panel-divider { border-top: 1px solid var(--line); margin: 22px 0 13px; }.weekly-insight { display: flex; gap: 10px; align-items: flex-start; }.insight-mark { color: var(--rust); font-size: 19px; line-height: 1; }.weekly-insight p { color: #72695f; font-size: 11px; line-height: 1.65; margin: 0; }
.action-panel { display: grid; align-content: start; }.action-row { width: 100%; display: grid; grid-template-columns: 33px 1fr auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; padding: 13px 0; }.action-row:last-child { border-bottom: 0; }.action-row:hover b { color: var(--rust-deep); }.action-icon, .entry-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: 16px; }.action-icon.rust, .entry-icon.rust { background: rgba(200,93,63,.12); color: var(--rust); }.action-icon.moss, .entry-icon.moss { background: rgba(86,121,107,.14); color: var(--moss); }.action-icon.gold, .entry-icon.gold { background: rgba(216,171,65,.16); color: #a87b1b; }.action-icon.blue, .entry-icon.blue { background: rgba(120,150,170,.15); color: var(--blue); }.action-row b { display: block; font-size: 11px; transition: color .2s; }.action-row small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }.row-arrow { color: var(--muted); }

.page-heading { align-items: end; margin-bottom: 28px; }.page-heading h2 { font: 600 clamp(30px,4vw,48px)/1.05 var(--display); margin: 10px 0 9px; }.page-heading p { color: var(--muted); margin: 0; font-size: 12px; }
.recipe-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 13px; }.recipe-list-panel { padding: 17px 12px 12px; }.recipe-list-panel .panel-head { padding: 0 7px 12px; align-items: center; }.recipe-list-panel h3 { font-size: 15px; }.product-list { display: grid; gap: 3px; }.product-item { border: 0; border-radius: 7px; background: transparent; padding: 12px 9px; text-align: left; display: flex; justify-content: space-between; gap: 8px; align-items: center; }.product-item:hover { background: rgba(39,38,37,.05); }.product-item.is-selected { background: var(--ink); color: var(--paper); }.product-copy b { display: block; font-size: 11px; }.product-copy small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }.product-item.is-selected small { color: rgba(244,239,230,.53); }.product-price { font: 10px var(--mono); }.add-product { color: var(--rust-deep); background: transparent; border: 1px dashed rgba(200,93,63,.4); border-radius: 6px; padding: 9px; font-size: 10px; width: calc(100% - 14px); margin: 13px 7px 3px; }.recipe-detail { padding: 23px; }.recipe-detail-top { align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.recipe-detail-top h2 { font: 600 30px/1.1 var(--display); margin: 8px 0 7px; }.recipe-detail-top p { margin: 0; color: var(--muted); font-size: 10px; }.recipe-body { display: grid; grid-template-columns: minmax(0,1fr) 178px; gap: 24px; padding: 19px 0; }.subhead-row { display: flex; justify-content: space-between; color: var(--muted); font: 9px var(--mono); padding-bottom: 9px; }.recipe-lines { border-top: 1px solid var(--line); }.recipe-line { display: grid; grid-template-columns: 32px 1fr 58px 62px; gap: 8px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }.ingredient-dot { width: 23px; height: 23px; border-radius: 50%; background: var(--paper-3); border: 3px solid var(--paper-2); }.ingredient-dot.coffee { background: #6b4936; }.ingredient-dot.milk { background: #ece6d7; }.ingredient-dot.salt { background: var(--gold); }.ingredient-dot.pack { background: #bfc1ba; }.recipe-line b { display: block; font-size: 11px; }.recipe-line small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }.recipe-qty { text-align: right; font: 11px var(--mono); }.recipe-cost { text-align: right; color: var(--rust); font: 10px var(--mono); }.recipe-cost small { color: var(--moss); font: 8px var(--sans); }.add-line { color: var(--rust-deep); border: 0; background: transparent; font-size: 10px; padding: 13px 0; }.margin-card { background: var(--moss); color: var(--paper); border-radius: 8px; padding: 16px; align-self: start; }.margin-card .eyebrow { color: rgba(244,239,230,.61); }.margin-card > strong { display: block; font: 29px var(--display); margin: 10px 0 17px; }.margin-stat { display: flex; justify-content: space-between; border-top: 1px solid rgba(244,239,230,.2); padding: 10px 0 0; margin-top: 10px; color: rgba(244,239,230,.63); font-size: 9px; }.margin-stat b { color: var(--paper); font: 11px var(--mono); }.margin-foot { border-top: 1px solid rgba(244,239,230,.2); margin-top: 17px; padding-top: 11px; color: rgba(244,239,230,.58); font-size: 9px; line-height: 1.6; }.margin-foot strong { color: var(--paper); }.agent-question { background: #ede9e2; border-left: 3px solid var(--rust); border-radius: 0 7px 7px 0; padding: 12px 13px; display: flex; align-items: center; gap: 10px; }.agent-orb { color: var(--rust); font-size: 18px; }.agent-question p { margin: 0; flex: 1; color: #6b6258; font-size: 10px; line-height: 1.55; }.agent-question p b { color: var(--ink); }.recipe-footer { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 17px; }

.ops-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 13px; margin-bottom: 13px; }.entry-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 21px; }.entry-card { border: 1px solid var(--line); background: var(--paper); padding: 15px 11px; border-radius: 8px; text-align: left; display: grid; gap: 7px; }.entry-card:hover { border-color: var(--rust); transform: translateY(-1px); }.entry-card b { font-size: 11px; }.entry-card small { color: var(--muted); font-size: 9px; }.source-panel { display: grid; gap: 9px; }.source-card { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }.source-logo { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; }.source-logo.feishu { background: #d64d46; color: white; }.source-logo.obsidian { background: #6c50a0; color: white; }.source-card b { display: block; font-size: 11px; }.source-card small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }.source-note { color: var(--muted); font-size: 10px; line-height: 1.55; margin-top: 2px; }.ledger-panel { min-height: 180px; }.event-list { margin-top: 15px; }.event-row { display: grid; grid-template-columns: 30px 1fr 125px 85px; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.event-kind { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 13px; }.event-kind.purchase { background: rgba(86,121,107,.14); color: var(--moss); }.event-kind.output { background: rgba(120,150,170,.15); color: var(--blue); }.event-kind.waste { background: rgba(200,93,63,.12); color: var(--rust); }.event-kind.count { background: rgba(216,171,65,.16); color: #a87b1b; }.event-copy b { display: block; }.event-copy small { color: var(--muted); display: block; margin-top: 3px; }.event-meta { color: var(--muted); }.event-value { text-align: right; font: 10px var(--mono); }

.metric-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-bottom: 13px; }.metric-card { background: var(--ink); color: var(--paper); border-radius: 8px; padding: 17px; min-height: 105px; }.metric-card span { color: rgba(244,239,230,.56); font-size: 9px; }.metric-card strong { display: block; font: 27px var(--display); margin: 13px 0 5px; }.metric-card small { color: rgba(244,239,230,.45); font: 9px var(--mono); }.metric-card small.up { color: var(--moss-soft); }.metric-card small.down { color: #e88e6e; }.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.ranking-list { margin-top: 19px; display: grid; gap: 12px; }.ranking-row { display: grid; grid-template-columns: 21px 1fr 82px; gap: 9px; align-items: center; }.rank-number { font: 12px var(--display); color: var(--muted); }.rank-copy b { display: block; font-size: 11px; }.rank-copy small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }.rank-value { text-align: right; font: 12px var(--mono); }.rank-bar { grid-column: 2 / -1; height: 5px; background: #dfd9d1; border-radius: 5px; overflow: hidden; margin-top: -4px; }.rank-bar span { display: block; height: 100%; background: var(--rust); border-radius: inherit; }.profit-panel .rank-bar span { background: var(--moss); }.insight-panel { margin-top: 13px; }.insight-large { display: flex; gap: 13px; align-items: flex-start; }.insight-large .insight-mark { font-size: 26px; }.insight-large div:nth-child(2) { flex: 1; }.insight-large h3 { margin: 7px 0 7px; font: 600 22px var(--display); }.insight-large p { color: #6e665d; font-size: 11px; line-height: 1.65; max-width: 650px; margin: 0; }

.modal-root { position: fixed; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(17,17,18,.62); z-index: 20; }.modal-root.is-open { display: grid; }.modal-backdrop { position: absolute; inset: 0; }.modal { position: relative; z-index: 1; background: var(--paper); width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 12px; box-shadow: 0 30px 100px rgba(0,0,0,.32); padding: 24px; animation: modal-in .22s ease both; }.modal.wide { width: min(680px, 100%); }.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; border-bottom: 1px solid var(--line); padding-bottom: 17px; }.modal-head h2 { font: 600 29px var(--display); margin: 8px 0 5px; }.modal-head p { color: var(--muted); font-size: 11px; margin: 0; line-height: 1.55; }.modal-close { background: transparent; border: 1px solid var(--line); border-radius: 50%; width: 27px; height: 27px; color: var(--muted); }.modal-body { padding-top: 18px; }.field { display: grid; gap: 6px; margin-bottom: 13px; }.field label { color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.45); border-radius: 6px; color: var(--ink); padding: 10px 11px; outline: none; font-size: 12px; }.field textarea { min-height: 100px; line-height: 1.6; resize: vertical; }.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(200,93,63,.1); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 17px; }.agent-preview { margin-top: 12px; background: #eae5db; border-left: 3px solid var(--rust); border-radius: 0 7px 7px 0; padding: 12px; color: #6b6258; font-size: 10px; line-height: 1.6; }.agent-preview b { color: var(--ink); }.connector-box { display: grid; gap: 10px; margin-top: 17px; }.connector-choice { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 13px; display: flex; align-items: center; gap: 11px; }.connector-choice:hover { border-color: var(--rust); }.connector-choice .source-logo { flex: 0 0 auto; }.connector-choice div { flex: 1; }.connector-choice b { display: block; font-size: 11px; }.connector-choice small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; background: var(--ink); color: var(--paper); border-radius: 7px; padding: 12px 15px; box-shadow: 0 14px 30px rgba(0,0,0,.2); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s ease; }.toast.show { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .app-shell { grid-template-columns: 190px minmax(0, 1fr); }.topbar, .view { padding-left: 28px; padding-right: 28px; }.inventory-grid { grid-template-columns: repeat(2,1fr); }.hero-row { grid-template-columns: minmax(0,1fr) 220px; gap: 20px; }.recipe-layout { grid-template-columns: 210px minmax(0,1fr); }.recipe-body { grid-template-columns: 1fr; }.margin-card { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 10px; }.margin-card > strong { margin: 4px 0 0; }.margin-foot { margin: 0; border-top: 0; padding: 0; }.metric-strip { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }.app-shell { display: block; width: 100%; }.sidebar { width: 100%; height: auto; min-height: 0; position: relative; padding: 11px 15px 9px; display: block; overflow: hidden; }.brand-lockup, .store-switcher, .sidebar-bottom { display: none; }.mobile-brand { display: flex; }.main-nav { display: flex; width: 100%; gap: 2px; justify-content: space-between; }.nav-item { flex: 0 1 auto; min-width: 0; justify-content: center; padding: 8px 5px; font-size: 9px; gap: 5px; white-space: nowrap; }.nav-icon { display: none; }.nav-item b { display: none; }.main-content { width: 100%; overflow: hidden; }.topbar { min-height: 54px; padding: 12px 18px; }.mobile-brand { display: flex; }.topbar .date-stamp { display: none; }.top-actions { margin-left: auto; }.sync-state { font-size: 0; padding: 2px; }.view { padding: 28px 18px 45px; overflow: hidden; }.hero-row { grid-template-columns: 1fr; margin-bottom: 36px; }.ledger-card { max-width: none; }.hero-copy h1 { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; font-size: clamp(38px, 13vw, 54px); }.head-note { display: none; }.inventory-grid, .lower-grid, .ops-grid, .analytics-grid, .recipe-layout { grid-template-columns: 1fr; }.inventory-card { min-height: 170px; }.page-heading { display: grid; gap: 16px; }.page-heading .button { justify-self: start; }.recipe-list-panel { order: 2; }.recipe-detail { padding: 17px; }.recipe-detail-top { align-items: flex-start; }.recipe-detail-top h2 { font-size: 26px; }.recipe-line { grid-template-columns: 28px 1fr 53px 54px; }.entry-cards { grid-template-columns: repeat(2,1fr); }.event-row { grid-template-columns: 29px 1fr 68px; }.event-meta { display: none; }.metric-strip { grid-template-columns: repeat(2,1fr); }.metric-card { padding: 13px; }.metric-card strong { font-size: 23px; }.insight-large { display: grid; }.form-grid { grid-template-columns: 1fr; }.modal { padding: 18px; }.date-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* Guided five-step setup */
.setup-steps { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 9px var(--mono); margin: -9px 0 18px; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }.setup-steps span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 99px; }.setup-steps span.is-current { color: var(--rust-deep); border-color: rgba(200,93,63,.42); background: rgba(200,93,63,.08); }.setup-steps i { color: var(--paper-3); font-style: normal; }.setup-layout { display: grid; grid-template-columns: minmax(275px, .7fr) minmax(0, 1.3fr); gap: 13px; }.setup-left { display: grid; align-content: start; gap: 13px; }.setup-type-panel, .product-create-panel { padding: 17px; }.type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; }.type-option { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 12px 8px; text-align: left; display: grid; gap: 5px; }.type-option:hover { border-color: var(--rust); }.type-option.is-selected { color: var(--paper); background: var(--ink); border-color: var(--ink); }.type-option span { font-size: 19px; color: var(--rust); }.type-option.is-selected span { color: var(--gold); }.type-option b { font-size: 11px; }.type-option small { color: var(--muted); font-size: 9px; }.type-option.is-selected small { color: rgba(244,239,230,.53); }.setup-form-grid { margin-top: 17px; }.setup-form-grid .field { margin-bottom: 0; }.setup-add-button { width: 100%; margin: 3px 0 13px; }.product-create-panel .product-list { border-top: 1px solid var(--line); padding-top: 5px; max-height: 250px; overflow: auto; }.bean-form-card { display: flex; justify-content: space-between; align-items: center; gap: 15px; background: #ede8df; border-left: 3px solid var(--rust); border-radius: 0 8px 8px 0; padding: 15px; margin: 19px 0 10px; }.bean-form-card h3 { font: 600 20px var(--display); margin: 6px 0; }.bean-form-card p { color: var(--muted); font-size: 10px; margin: 0; }.bean-input { display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; }.bean-input input { width: 82px; border: 0; border-bottom: 2px solid var(--rust); background: transparent; color: var(--ink); font: 34px var(--display); text-align: right; outline: none; }.bean-input span { color: var(--rust-deep); font: 10px var(--mono); }.calculation-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 6px; }.calculation-strip > div { background: var(--ink); color: var(--paper); border-radius: 7px; padding: 11px 12px; }.calculation-strip span { display: block; color: rgba(244,239,230,.52); font-size: 9px; }.calculation-strip strong { display: block; margin-top: 8px; font: 19px var(--display); }.calculation-strip small { color: rgba(244,239,230,.52); font: 9px var(--mono); }.purchase-callout { display: flex; align-items: center; gap: 11px; background: rgba(86,121,107,.11); border: 1px solid rgba(86,121,107,.24); border-radius: 7px; padding: 12px 13px; }.purchase-callout .agent-orb { color: var(--moss); font: 12px var(--mono); }.purchase-callout p { flex: 1; color: #6b6258; font-size: 10px; line-height: 1.55; margin: 0; }.purchase-callout p b { color: var(--ink); }.today-capture-panel { margin-top: 13px; padding: 18px 20px; }.today-product-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }.today-product-card { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 12px 0 2px; }.today-product-name b { display: block; font-size: 11px; }.today-product-name small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }.today-product-card label { color: var(--muted); font-size: 9px; white-space: nowrap; }.today-input { width: 48px; border: 0; border-bottom: 1px solid var(--rust); background: transparent; color: var(--ink); padding: 4px 2px; text-align: center; font: 14px var(--mono); outline: none; }.today-product-card .text-button { white-space: nowrap; }
@media (max-width: 1020px) { .setup-layout { grid-template-columns: 1fr; }.setup-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }.setup-type-panel, .product-create-panel { min-width: 0; } }
@media (max-width: 760px) { .page-heading h2 { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; font-size: clamp(30px, 9vw, 42px); }.setup-steps { margin-top: -5px; }.setup-left { grid-template-columns: 1fr; }.bean-form-card { align-items: flex-end; }.calculation-strip { grid-template-columns: 1fr; }.today-product-cards { grid-template-columns: 1fr; }.today-product-card { grid-template-columns: 1fr auto auto auto; }.purchase-callout { align-items: flex-start; flex-wrap: wrap; }.purchase-callout .text-button { margin-left: 24px; } }
.bean-input input:disabled { border-bottom-color: var(--paper-3); color: var(--muted); }
.editable-price { display: grid; gap: 7px; }.editable-price .eyebrow { color: rgba(244,239,230,.61); }.editable-price label { display: flex; align-items: baseline; gap: 4px; border-bottom: 1px solid rgba(244,239,230,.25); padding-bottom: 5px; }.editable-price label > span { color: var(--paper); font: 16px var(--display); }.editable-price input { width: 108px; border: 0; background: transparent; color: var(--paper); outline: none; font: 31px var(--display); letter-spacing: -.04em; padding: 0; }.editable-price input:focus { box-shadow: 0 2px 0 var(--gold); }.editable-price small { color: rgba(244,239,230,.55); font: 9px var(--mono); }