:root {
  --orange: #f47a13;
  --orange-dark: #d95e00;
  --orange-soft: #fff1e4;
  --navy: #102a43;
  --ink: #18212b;
  --muted: #6c7885;
  --line: #e4e8ec;
  --surface: #ffffff;
  --background: #f5f7f9;
  --danger: #c93838;
  --success: #21885b;
  --shadow: 0 8px 28px rgba(16, 42, 67, .07);
  --shadow-hover: 0 12px 34px rgba(16, 42, 67, .12);
  font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
}

.price-warning {
  color: #9a4700;
  background: #fff3e6;
  border: 1px solid #ffd2a6;
  border-radius: 12px;
  padding: 10px 12px;
}

.missing-price { color:#b45309; font-weight:700; }
.quick-category { display:flex; align-items:center; gap:8px; margin-top:10px; width:max-content; color:var(--muted); font-size:13px; font-weight:700; }
.quick-category select { min-width:150px; padding:7px 28px 7px 9px; }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 0, #fff8f1 0, transparent 28%), var(--background); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.remember { display:flex; align-items:center; gap:9px; margin:14px 0; color:var(--muted); font-weight:650; }
.remember input { width:18px; height:18px; accent-color:var(--orange); }

.topbar {
  position: sticky; top: 0; z-index: 20; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; font-size: 21px; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--orange); color: white; transform: rotate(-4deg); }
.sync-status { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.header-tools { display:flex; align-items:center; gap:10px; }
#locationSelect { width:auto; min-width:150px; }
.auth-card { max-width:460px; margin:7vh auto; }
.auth-card h1 { margin-bottom:8px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ba5ae; }
.sync-status.online .status-dot { background: var(--success); box-shadow: 0 0 0 4px #dff4e9; }
.sync-status.error .status-dot { background: var(--danger); }

.shell { display: grid; grid-template-columns: 230px minmax(0,1fr); min-height: calc(100vh - 72px); }
.sidebar { position: sticky; top: 72px; align-self: start; height: calc(100vh - 72px); padding: 26px 14px; background: var(--surface); border-right: 1px solid var(--line); }
.nav-item { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 14px; margin: 3px 0; border: 0; border-radius: 12px; color: #52606d; background: transparent; text-align: left; font-weight: 650; }
.nav-item span { width: 22px; text-align: center; font-size: 18px; }
.nav-item:hover { background: #f6f7f8; color: var(--ink); }
.nav-item.active { background: var(--orange-soft); color: var(--orange-dark); }

main { width: min(1240px, 100%); padding: 42px clamp(20px, 4vw, 58px) 80px; margin: 0 auto; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
h1 { font-size: clamp(30px, 4vw, 44px); margin: 0; color: var(--navy); letter-spacing: -.03em; }
h2 { margin: 34px 0 15px; color: var(--navy); letter-spacing:-.015em; }
.subtitle { color: var(--muted); margin: 7px 0 0; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.metric, .panel, .item-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.metric { padding: 22px; text-align: left; }
button.metric { transition: transform .15s ease, border-color .15s ease; }
button.metric:hover { transform: translateY(-2px); border-color: #ffc38d; }
.metric-icon { color: var(--orange); font-size: 22px; }
.metric strong { display: block; margin-top: 10px; font-size: 34px; color: var(--navy); }
.metric small { color: var(--muted); font-size: 14px; }
.metric.attention { position: relative; min-height: 142px; padding-right: 44px; }
.metric.attention::after { content: "›"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #9aa4ad; font-size: 28px; }
.metric.attention strong { margin-top: 8px; }
.metric.attention.danger .metric-icon, .metric.attention.danger strong { color: var(--danger); }
.metric.attention.warning .metric-icon, .metric.attention.warning strong { color: var(--orange-dark); }
.metric.attention.info .metric-icon, .metric.attention.info strong { color: #2772b8; }

.action-strip { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(120px,1fr)); gap: 14px; margin-top: 28px; }
.primary-action { display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 16px; background: var(--orange); color: white; font-size: 17px; font-weight: 800; }
.primary-action span { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid currentColor; border-radius: 50%; font-size: 21px; }
.primary-action:hover { background: var(--orange-dark); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; }
.section-heading h2 { margin:0; }
.text-link { border:0; background:transparent; color:var(--orange-dark); font-weight:750; }
.negative { color: var(--danger); }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.quick { border: 1px solid var(--line); border-radius: 16px; padding: 22px 12px; background: white; color: var(--orange-dark); font-weight: 750; }
.quick span { display: block; font-size: 25px; margin-bottom: 9px; }
.quick:hover { background: var(--orange-soft); border-color: #ffc38d; }
.quick-grid.actions-hub { grid-template-columns: repeat(4,minmax(0,1fr)); }
.quick-grid.more-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search { min-width: 220px; flex: 1; }
input, select { width: 100%; min-height:46px; border: 1px solid #ccd3da; border-radius: 12px; padding: 11px 13px; color: var(--ink); background: white; }
input:focus, select:focus { outline: 3px solid #ffe0c2; border-color: var(--orange); }
.btn { min-height:44px; border: 0; border-radius: 12px; padding: 11px 17px; font-weight: 750; background: #edf0f2; color: var(--navy); transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn.primary { background: var(--orange); color: white; }
.btn.primary:hover { background: var(--orange-dark); }
.btn.danger { color: var(--danger); background: #fff0f0; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.list { display: grid; gap: 11px; margin-top: 18px; }
.item-card { padding: 18px 20px; display: flex; gap: 18px; align-items: center; }
.recipe-thumb { width: 112px; height: 86px; object-fit: cover; border-radius: 13px; flex: 0 0 auto; background: var(--orange-soft); }
.recipe-thumb-empty { display:grid; place-items:center; color:var(--orange-dark); font-size:28px; }
.recipe-hero { width:100%; max-height:360px; object-fit:cover; border-radius:16px; margin:14px 0; }
.recipe-steps { display:grid; gap:12px; }
.recipe-step { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface); }
.recipe-step-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; color:var(--orange-dark); }
.recipe-step-head > div { display:flex; gap:6px; }
.recipe-step textarea { width:100%; resize:vertical; }
.recipe-category-heading { display:flex; align-items:center; gap:12px; color:var(--muted); font-weight:800; margin:14px 0 2px; }
.recipe-category-heading::after { content:""; height:1px; background:var(--line); flex:1; }
.adjustment-choice { width:100%; text-align:left; color:inherit; cursor:pointer; }
.adjustment-choice:hover { border-color:#ffc38d; background:var(--orange-soft); }
.item-main { min-width: 0; flex: 1; }
.item-title { font-weight: 800; color: var(--navy); }
.item-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.item-value { text-align: right; font-weight: 800; white-space: nowrap; }
.low { color: var(--orange-dark); }
.actions { display: flex; gap: 7px; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; }
.icon-btn:hover { background: #f4f6f7; }
.icon-btn.danger { color: var(--danger); }

.panel { padding: 24px; }
.panel > h2:first-child { margin-top:0; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--navy); font-size: 20px; margin-bottom: 6px; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-dark); font-size: 12px; font-weight: 750; }
.grid-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 13px; font-weight: 700; }
.field.full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.recipe-lines { grid-column: 1/-1; display: grid; gap: 8px; padding: 12px; background: #f7f8fa; border-radius: 12px; }
.recipe-line { display: grid; grid-template-columns: 1fr 120px 38px; gap: 8px; }
.count-input { max-width: 130px; }
.difference { min-width: 72px; text-align: right; font-weight: 800; }
.wide-modal { width: min(980px, calc(100% - 40px)); }
.delivery-review-list { gap: 14px; }
.delivery-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--background); }
.delivery-summary .btn { margin-left:auto; }
.review-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px; font-size:13px; font-weight:800; }
.review-chip.matched { color:var(--success); background:#e7f6ed; }
.review-chip.check { color:var(--orange-dark); background:var(--orange-soft); }
.review-chip.new { color:#2767a8; background:#eaf3fc; }
.delivery-review { display: grid; grid-template-columns: 92px minmax(260px,1fr) minmax(260px,340px); align-items: center; min-height: 0; box-shadow:none; }
.delivery-review.review-matched { border-color:#bfe2cd; background:#fbfffc; }
.delivery-review.review-check { border-color:#ffc38d; background:#fffaf5; }
.delivery-review.review-new { border-color:#bcd7f1; background:#f9fcff; }
.delivery-check { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.delivery-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }
.delivery-link { display: grid; gap: 6px; }
.delivery-link label { color: var(--muted); font-size: 12px; font-weight: 700; }
.delivery-review select { width: 100%; min-width: 0; }
.delivery-status { display:inline-flex; margin-top:8px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; }
.review-matched .delivery-status { background:#e7f6ed; color:var(--success); }
.review-check .delivery-status { background:var(--orange-soft); color:var(--orange-dark); }
.review-new .delivery-status { background:#eaf3fc; color:#2767a8; }
.match-info { color: #2767a8; font-weight: 700; }
.match-warning { color: var(--orange-dark); font-weight: 700; }

dialog { width: min(680px, calc(100% - 28px)); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: var(--surface); box-shadow: 0 25px 90px rgba(0,0,0,.22); }
dialog::backdrop { background: rgba(15,28,40,.45); backdrop-filter: blur(3px); }
.modal-card { padding: 28px; overflow-y: auto; max-height: calc(100vh - 30px); }
.modal-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-title h2 { margin: 0; }
.modal-copy { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--background); color: var(--ink); line-height: 1.55; }
.modal-copy p { margin: 0; }
.form-error { margin:-6px 0 18px; padding:12px 14px; border:1px solid #efaaa5; border-radius:12px; background:#fff1f0; color:#9f241f; font-weight:650; line-height:1.4; }
.modal-card [aria-invalid="true"] { border-color:#c9362e; box-shadow:0 0 0 3px rgba(201,54,46,.12); }
.recipe-unit-line { grid-template-columns:minmax(190px,2fr) minmax(90px,.7fr) minmax(120px,1fr) auto; }
.close { border: 0; background: #edf0f2; width: 36px; height: 36px; border-radius: 50%; }
.close:hover { background:var(--orange-soft); color:var(--orange-dark); }

.panel form + .panel, .panel + .panel { margin-top:18px; }
.item-card select { max-width:320px; }
.form-actions { position:sticky; bottom:-28px; z-index:2; padding:18px 0 2px; background:linear-gradient(transparent,var(--surface) 22%); }

#toast { position: fixed; right: 22px; bottom: 25px; z-index: 100; max-width: 360px; padding: 13px 17px; border-radius: 12px; background: var(--navy); color: white; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s; }
#toast.show { opacity: 1; transform: none; }
#toast.error { background: var(--danger); }
.loading-card { min-height: 55vh; display: grid; place-items: center; align-content: center; color: var(--muted); }
.spinner { width: 35px; height: 35px; border: 4px solid #ffe1c6; border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-nav { display: none; }
.merge-note { margin: 18px 0; padding: 16px 18px; border: 1px solid #ffc38d; border-radius: 14px; background: var(--orange-soft); color: var(--ink); }
.merge-note strong { color: var(--navy); }
.merge-note p { margin: 6px 0 0; line-height: 1.5; }
.merge-list .item-card { display: grid; grid-template-columns: 22px minmax(0,1fr); cursor: pointer; }
.merge-list .item-card:hover { border-color: #ffc38d; background: var(--orange-soft); }
.merge-list input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); }
.mealie-tools { position:sticky; top:-28px; z-index:3; display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; align-items:center; padding:12px 0; background:var(--surface); }
.mealie-tools input { min-width:0; }
.mealie-tools span { color:var(--muted); font-size:13px; font-weight:750; white-space:nowrap; }
.mealie-list { max-height:min(56vh,620px); overflow:auto; padding:2px; }
.mealie-choice { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; cursor:pointer; box-shadow:none; }
.mealie-choice:hover { border-color:#ffc38d; background:var(--orange-soft); }
.mealie-choice input[type="checkbox"] { width:20px; height:20px; min-height:0; margin:2px 0 0; padding:0; accent-color:var(--orange); }
.mealie-choice .item-title, .mealie-choice .item-meta { display:block; overflow-wrap:anywhere; }
.mealie-review-recipe { margin-top:14px; box-shadow:none; }
.mealie-review-recipe > h3 { margin-top:0; }
.mealie-review-line { box-shadow:none; align-items:flex-start; }
.quantity-unit { display:grid; grid-template-columns:minmax(100px,1fr) auto; align-items:center; gap:9px; }
.check-row.full { grid-column:1/-1; }

@media (max-width: 850px) {
  .shell { display: block; }
  .sidebar { display: none; }
  main { padding: 25px 16px 100px; }
  .metrics { grid-template-columns: repeat(2,1fr); }
  .action-strip { grid-template-columns: repeat(2,1fr); }
  .primary-action { grid-column:1/-1; min-height:64px; }
  .quick-grid { grid-template-columns: repeat(2,1fr); }
  .quick-grid.actions-hub, .quick-grid.more-grid { grid-template-columns:repeat(2,1fr); }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(5,1fr); z-index: 30; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); padding: 7px 4px max(7px, env(safe-area-inset-bottom)); }
  .mobile-nav button { border: 0; background: transparent; color: #7c8791; font-size: 11px; }
  .mobile-nav span { display: block; font-size: 18px; height: 24px; }
  .mobile-nav button.active { color: var(--orange-dark); font-weight: 800; }
  .mobile-nav .mobile-primary span { width:34px; height:34px; margin:-11px auto 1px; border-radius:50%; display:grid; place-items:center; background:var(--orange); color:white; font-size:24px; box-shadow:0 5px 16px rgba(244,122,19,.32); }
}

@media (max-width: 560px) {
  .topbar { height: 62px; padding: 0 15px; }
  .brand { font-size: 18px; }
  .sync-status span:last-child { display: none; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .metrics { grid-template-columns: 1fr; }
  .metric.attention { min-height:106px; display:grid; grid-template-columns:40px 52px 1fr; align-items:center; gap:4px; }
  .metric.attention .metric-icon, .metric.attention strong { margin:0; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .grid-form { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .item-card { align-items: flex-start; flex-wrap: wrap; }
  .delivery-review { grid-template-columns: 42px minmax(0,1fr); }
  .delivery-check span { display: none; }
  .delivery-link { grid-column: 1 / -1; width: 100%; }
  .item-value { margin-left: auto; }
  .actions { width: 100%; justify-content: flex-end; }
  .recipe-line { grid-template-columns: 1fr 90px 38px; }
  .mealie-tools { grid-template-columns:1fr auto; top:-28px; }
  .mealie-tools span { grid-column:1/-1; }
  .mealie-choice { grid-template-columns:24px minmax(0,1fr); flex-wrap:nowrap; }
}
.order-sheet{padding:0;overflow:hidden}.order-sheet-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px}.order-lines{border-top:1px solid var(--line)}.order-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}.order-line:last-child{border-bottom:0}.order-line small{display:block;color:var(--muted);margin-top:3px}.order-line .package-input{width:62px}@media(max-width:650px){.order-sheet-head{align-items:flex-start;flex-direction:column}.order-line{grid-template-columns:1fr}.order-line>div:last-child{text-align:left}}
.order-summary{appearance:none;border:0;background:none;color:inherit;font:inherit;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;flex:1;padding:0;cursor:pointer}.order-summary>span:first-child,.order-summary .item-title,.order-summary .item-meta{display:block}.order-state{color:var(--accent);font-size:13px;font-weight:700;white-space:nowrap}.icon-scan{flex:0 0 auto}.order-detail-actions{display:flex;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line)}.order-detail-actions label{display:flex;align-items:center;gap:10px;font-weight:600}.order-detail-actions select{width:auto;min-width:150px}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.hub-icon{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}.metric-icon .hub-icon{width:26px;height:26px}

/* iOS-inspired visual system */
:root{--background:#f2f2f7;--line:rgba(60,60,67,.14);--shadow:0 1px 2px rgba(0,0,0,.025),0 8px 24px rgba(16,42,67,.045);--shadow-hover:0 8px 28px rgba(16,42,67,.09)}
body{background:var(--background);letter-spacing:-.005em}
.topbar{height:68px;padding:0 30px;background:rgba(249,249,251,.88);border-color:rgba(60,60,67,.12)}
.brand-mark{transform:none;border-radius:10px;box-shadow:0 5px 14px rgba(244,122,19,.25)}
.brand-mark { overflow: hidden; background: white; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.shell{grid-template-columns:244px minmax(0,1fr);min-height:calc(100vh - 68px)}
.sidebar{top:68px;height:calc(100vh - 68px);padding:28px 14px;background:rgba(249,249,251,.78);border-color:rgba(60,60,67,.12)}
.nav-item{min-height:46px;border-radius:12px;padding:11px 14px;font-size:15px}
.nav-item.active{background:rgba(244,122,19,.13);color:#c95b00}
main{width:min(1160px,100%);padding-top:38px}
.page-header{align-items:center;margin-bottom:30px}
h1{font-size:clamp(34px,4vw,46px);font-weight:820;letter-spacing:-.045em}
h2{font-size:21px;letter-spacing:-.025em}
.subtitle{font-size:15px;line-height:1.45}
.metric,.panel,.item-card{border-color:rgba(60,60,67,.12);border-radius:20px;box-shadow:var(--shadow)}
.metrics{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.metric.attention{min-height:124px;padding:20px;background:rgba(255,255,255,.96)}
.metric.attention .metric-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(244,122,19,.12)}
.metric.attention.danger .metric-icon{background:rgba(201,56,56,.11)}
.metric.attention.info .metric-icon{background:rgba(39,114,184,.11)}
.metric.attention strong{font-size:31px}
.action-strip{margin-top:18px}.primary-action{min-height:58px;border-radius:16px;box-shadow:0 8px 20px rgba(244,122,19,.18)}
.item-card{padding:17px 18px;background:rgba(255,255,255,.97)}
.item-title{font-size:16px}.item-meta{line-height:1.45}.badge{padding:5px 10px}
.btn{border-radius:11px}.btn.primary{box-shadow:0 5px 13px rgba(244,122,19,.16)}
input,select{background:#fff;border-color:rgba(60,60,67,.22);border-radius:11px}
.panel{background:rgba(255,255,255,.97)}
.settings-layout{display:grid;gap:24px;max-width:780px}.settings-label{padding:0 14px 8px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.045em}.settings-group{overflow:hidden;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.settings-row{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:13px;padding:13px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;text-decoration:none}.settings-row:last-child{border-bottom:0}.settings-row:not(.static):hover{background:#fafafa}.settings-row>span:nth-child(2){display:grid;gap:2px}.settings-row strong{font-size:15px;color:var(--ink)}.settings-row small{font-size:12px;color:var(--muted)}.settings-row b{font-size:24px;font-weight:400;color:#a2a8ae}.settings-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--orange-soft);color:var(--orange-dark);font-size:19px}
dialog{border-radius:24px}.modal-card{padding:30px}.close{background:#f0f1f3}
@media(max-width:850px){.topbar{height:64px}.shell{min-height:calc(100vh - 64px)}main{padding-top:26px}.mobile-nav{background:rgba(249,249,251,.94);backdrop-filter:blur(18px)}.settings-layout{max-width:none}}

/* Unified component system — shared by every website screen */
:root {
  --control-height: 46px;
  --control-radius: 12px;
  --card-radius: 18px;
  --content-gap: 16px;
}

button, .btn, .icon-btn, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(244,122,19,.24);
  outline-offset: 2px;
}

/* Page headings and their actions always share one baseline. */
.page-header { align-items: center; min-height: 58px; }
.page-header > div:first-child { min-width: 0; }
.page-header > .actions,
.page-header > div:last-child:not(:first-child) { justify-content: flex-end; }
.page-header .actions { flex-wrap: wrap; }

/* One button family: neutral, primary, destructive and icon-only. */
.btn {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: none;
}
.btn:not(.primary):not(.danger):not(.ghost) { background: #e9edf1; }
.btn.primary { border-color: var(--orange); }
.btn.ghost { background: rgba(255,255,255,.8); border-color: var(--line); }
.btn.danger { border-color: rgba(201,56,56,.14); }
.btn:hover { transform: none; filter: brightness(.985); box-shadow: 0 4px 12px rgba(16,42,67,.08); }
.btn:active { transform: scale(.985); }
.btn:disabled { transform: none; box-shadow: none; filter: none; }
.actions { align-items: center; gap: 8px; }
.actions .btn, .actions select { min-height: var(--control-height); }
.icon-btn, .close {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
}

/* Inputs and labels use the same rhythm in pages and pop-ups. */
input, select, textarea {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  border-color: rgba(60,60,67,.2);
}
textarea { width: 100%; padding: 12px 13px; resize: vertical; }
.field { gap: 7px; align-content: start; }
.field label, .toolbar label { color: var(--muted); font-size: 13px; font-weight: 750; }
.grid-form { align-items: start; gap: var(--content-gap); }
.check-row { min-height: var(--control-height); display: flex; align-items: center; gap: 10px; }
.check-row input, .field input[type="checkbox"] { width: 19px; height: 19px; min-height: 19px; flex: 0 0 auto; accent-color: var(--orange); }

/* Toolbars read as one coherent control strip. */
.toolbar {
  min-height: 58px;
  padding: 8px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}
.toolbar > label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.toolbar > label select { min-width: 155px; }
.toolbar .search { min-width: 240px; }

/* Cards and lists line up across inventory, history, orders and recipes. */
.list { gap: 12px; }
.item-card, .panel, .metric { border-radius: var(--card-radius); }
.item-card { min-height: 76px; padding: 16px 18px; }
.item-card > .actions { margin-left: auto; flex: 0 0 auto; }
.item-main { align-self: center; }
.item-value { min-width: 96px; }
.panel { padding: 22px; }
.panel > h2:first-child { margin: 0 0 18px; }
.panel .list { margin-top: 14px; }
.section-heading { min-height: 46px; }

/* Form actions always sit in the same order and position. */
.form-actions {
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.form-actions .btn { min-width: 112px; }
.modal-card .form-actions { margin-bottom: -4px; }

/* Modal content gets a stable header and readable width. */
dialog { width: min(700px, calc(100% - 32px)); }
.wide-modal { width: min(1040px, calc(100% - 32px)); }
.modal-card { padding: 28px; }
.modal-title { min-height: 42px; gap: 18px; }
.modal-title h2 { font-size: 24px; line-height: 1.15; }
.modal-copy { max-width: none; }
.delivery-summary { align-items: center; }

/* Order cards use the same aligned control row as page headers. */
.order-sheet-head { min-height: 78px; padding: 16px 18px; }
.order-sheet-head .actions { flex-wrap: wrap; justify-content: flex-end; }
.order-sheet-head select { width: auto; min-width: 150px; }
.order-line { min-height: 64px; }

/* The More menu remains visually identical from top to bottom. */
.settings-layout { width: 100%; }
.settings-row { min-height: 66px; }
.settings-row strong, .settings-row small { display: block; line-height: 1.3; }

@media (max-width: 850px) {
  .page-header { align-items: flex-start; }
  .page-header > .actions,
  .page-header > div:last-child:not(:first-child) { width: 100%; justify-content: flex-start; }
  .toolbar > label { flex: 1 1 220px; justify-content: space-between; }
  .toolbar > label select { flex: 1; }
}

@media (max-width: 560px) {
  main { padding-left: 14px; padding-right: 14px; }
  .page-header { gap: 14px; margin-bottom: 22px; }
  .page-header .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .page-header .actions .btn { width: 100%; white-space: normal; }
  .page-header .actions .btn.primary:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .toolbar { display: grid; grid-template-columns: 1fr; }
  .toolbar > label { width: 100%; }
  .toolbar > label select { min-width: 0; }
  .item-card { gap: 12px; }
  .item-card > .actions { margin-left: 0; }
  .form-actions { position: static; flex-wrap: wrap; background: none; padding-top: 14px; }
  .form-actions .btn { flex: 1 1 140px; }
  .modal-card { padding: 22px 18px; }
  .order-sheet-head .actions { width: 100%; justify-content: stretch; }
  .order-sheet-head .actions .btn, .order-sheet-head .actions select { width: 100%; }
}

/* Dashboard */
.dashboard-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 128px;
  padding: 8px 2px 24px;
  border-bottom: 1px solid var(--line);
}
.dashboard-welcome h1 { margin-top: 5px; }
.dashboard-date {
  color: var(--orange-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.dashboard-sync {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.dashboard-sync .status-dot { background: var(--success); box-shadow: 0 0 0 4px #dff4e9; }
.dashboard-section-heading { margin: 30px 0 14px; }
.dashboard-section-heading h2 { margin: 0; }
.dashboard-section-heading .subtitle { margin-top: 3px; font-size: 13px; }
.dashboard-attention { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.dashboard-attention .metric.attention {
  min-height: 112px;
  display: grid;
  grid-template-columns: 46px auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-align: left;
}
.dashboard-attention .metric.attention::after { position: static; justify-self: end; transform: none; }
.dashboard-attention .metric.attention strong { display: inline; margin: 0 8px 0 0; font-size: 30px; }
.dashboard-attention .metric.attention small { font-size: 14px; }
.dashboard-attention .metric.attention.complete .metric-icon { color: var(--success); background: rgba(33,136,91,.1); }
.dashboard-attention .metric.attention.complete strong { color: var(--success); }
.dashboard-actions {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 12px;
}
.dashboard-action {
  min-height: 92px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 18px;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: rgba(255,255,255,.97);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}
.dashboard-action:hover { border-color: #ffc38d; box-shadow: var(--shadow-hover); }
.dashboard-action-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 21px;
}
.dashboard-action > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.dashboard-action strong { color: var(--navy); font-size: 16px; }
.dashboard-action small { color: var(--muted); line-height: 1.35; }
.dashboard-action b { color: #9da5ac; font-size: 24px; font-weight: 400; }
.dashboard-action.main { border-color: var(--orange); background: var(--orange); color: white; }
.dashboard-action.main .dashboard-action-icon { background: rgba(255,255,255,.18); color: white; }
.dashboard-action.main strong, .dashboard-action.main small, .dashboard-action.main b { color: white; }
.dashboard-action.main small { opacity: .86; }

@media (max-width: 950px) {
  .dashboard-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-action.main { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .dashboard-welcome { align-items: flex-start; flex-direction: column; min-height: 0; padding-top: 0; }
  .dashboard-sync { white-space: normal; }
  .dashboard-attention { grid-template-columns: 1fr; }
  .dashboard-attention .metric.attention { min-height: 96px; grid-template-columns: 42px auto 1fr; }
  .dashboard-actions { grid-template-columns: 1fr; }
  .dashboard-action.main { grid-column: auto; }
  .recipe-unit-line { grid-template-columns:minmax(80px,1fr) minmax(120px,1fr) 38px; }
  .recipe-unit-line select[name="ingredientID"] { grid-column:1 / -1; }
}