:root {
  --ink: #17242b;
  --ink-soft: #38505b;
  --paper: #f5f7f4;
  --panel: #ffffff;
  --line: #d5ddd9;
  --muted: #6d7a7d;
  --machine-yellow: #f2b84b;
  --green: #2f7d50;
  --orange: #d9772c;
  --purple: #7656a8;
  --blue: #367ab6;
  --cyan: #248e9d;
  --deep-green: #175c3b;
  --red: #b43b35;
  --shadow: 0 10px 30px rgba(23, 36, 43, .08);
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(23, 36, 43, .025) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 32px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; }
button, input, select { min-height: 44px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(242, 184, 75, .55);
  outline-offset: 2px;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(260px, 500px) minmax(320px, 480px);
  place-content: center;
  gap: 7vw;
  padding: 32px;
  background:
    radial-gradient(circle at 86% 14%, #d5ecdf 0, transparent 27%),
    radial-gradient(circle at 10% 92%, #edf6ef 0, transparent 32%),
    linear-gradient(135deg, #f8fcf9 0%, #eaf3ed 100%);
}
.login-mark {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid #285e47;
  border-radius: 22px;
  background: linear-gradient(135deg, #173b30 0%, #1f6a4d 58%, #2d7b5b 100%);
  display: grid;
  align-content: end;
  padding: 38px 42px;
  color: #d7e8df;
  box-shadow: 0 24px 54px rgba(29, 64, 48, .18);
}
.login-mark::before {
  position: absolute;
  top: -120px;
  right: -42px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 38px rgba(255,255,255,.045), 0 0 0 76px rgba(255,255,255,.03);
}
.login-mark span { position: absolute; right: 28px; bottom: -36px; color: rgba(255,255,255,.1); font: 800 170px/1 Arial, sans-serif; letter-spacing: -.12em; }
.login-mark small { position: relative; max-width: 200px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.login-card {
  min-width: 0;
  align-self: center;
  border: 1px solid #dce5df;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  padding: clamp(28px, 5vw, 52px);
  box-shadow: 0 18px 42px rgba(29, 64, 48, .12);
}
.login-card h1 { margin: 4px 0 8px; color: #17322c; font-size: clamp(28px, 4vw, 42px); }
.login-card .eyebrow { color: #1f6a4d; }
.eyebrow { margin: 0; color: var(--muted); font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .16em; }
.muted { color: var(--muted); }
.stack-form { display: grid; gap: 16px; margin-top: 28px; }
label { display: grid; gap: 7px; font-weight: 650; font-size: 14px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}
textarea { min-height: 88px; resize: vertical; }
.primary, .secondary, .danger, .quick-add {
  border: 0;
  border-radius: 9px;
  padding: 10px 16px;
  font-weight: 750;
}
.primary { background: #1f6a4d; color: #fff; }
.secondary { background: #e8eeeb; color: var(--ink); }
.danger { background: #f8e5e3; color: var(--red); }
.quick-add { background: var(--machine-yellow); color: var(--ink); font-size: 18px; }
.wide { width: 100%; }
.form-error { min-height: 20px; margin: 0; color: var(--red); font-size: 13px; }
.price-views { align-self: end; padding: 11px 12px; min-height: 44px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.4; }

.app-shell { min-height: 100vh; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px max(24px, calc((100vw - 1280px) / 2));
  background: var(--ink);
  color: #fff;
}
.topbar h1 { margin: 3px 0 0; font-size: 22px; letter-spacing: .02em; }
.topbar .eyebrow { color: var(--machine-yellow); }
.account-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.text-button { min-height: 36px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: transparent; color: #fff; padding: 5px 12px; }
.main-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(245, 247, 244, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav-button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); padding: 8px 22px; font-weight: 750; }
.nav-button.active { background: var(--ink); color: #fff; }
.main-content { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 80px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.04em; }
.page-heading p { margin: 5px 0 0; color: var(--muted); }
.section-title { margin: 30px 0 12px; font-size: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.manager-order-layout { display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(360px, .75fr); gap: 18px; align-items: start; }
.manager-order-entry .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manager-order-list { position: sticky; top: 78px; max-height: calc(100vh - 106px); overflow: auto; padding: 2px 4px 12px; }
.manager-order-list h3 { margin: 0; font-size: 19px; }
.manager-order-list > p { margin: 5px 0 12px; color: var(--muted); font-size: 13px; }
.manager-order-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.order-filter { display: flex; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.order-filter button { min-height: 32px; padding: 5px 9px; border: 1px solid #d9c79e; border-radius: 8px; background: #fffdf4; color: var(--production-green-950); font-size: 12px; font-weight: 750; cursor: pointer; }
.order-filter button.active { border-color: var(--production-green-700); background: var(--production-green-700); color: #fff; }
.delete-order-dialog, .repeat-report-dialog { width: min(520px, calc(100vw - 28px)); border: 0; border-radius: 16px; padding: 0; color: var(--ink); box-shadow: 0 24px 80px rgba(20, 35, 27, .28); }
.delete-order-dialog::backdrop, .repeat-report-dialog::backdrop { background: rgba(16, 31, 23, .56); backdrop-filter: blur(3px); }
.delete-order-dialog form, .repeat-report-dialog form { display: grid; gap: 16px; padding: 24px; }
.delete-order-dialog h3, .repeat-report-dialog h3 { margin: 0; font-size: 22px; }
.delete-order-dialog #delete-order-identity { margin: -8px 0 0; color: var(--muted); font-weight: 700; }
.delete-order-dialog .dialog-note { margin: 0; padding: 11px 12px; border-radius: 10px; background: #fff5df; color: #6d4b20; font-size: 13px; line-height: 1.55; }
.grid-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-form .span-2 { grid-column: span 2; }
.grid-form .span-3 { grid-column: 1 / -1; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.upload-card { min-height: 128px; border: 2px dashed #b7c3bf; border-radius: 12px; display: grid; place-content: center; text-align: center; padding: 18px; background: #fbfcfb; cursor: pointer; }
.upload-card strong { display: block; font-size: 16px; }
.upload-card small { color: var(--muted); margin-top: 5px; }
.upload-card input { display: none; }
.upload-card.busy { cursor: wait; border-color: var(--machine-yellow); background: #fffaf0; }
.import-preview { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.screenshot-import { margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; }
.screenshot-queue { display: grid; gap: 8px; }
.screenshot-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; }
.screenshot-queue-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screenshot-queue-row .secondary { min-height: 34px; padding: 5px 10px; flex: 0 0 auto; }
.import-preview-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 12px; }
.import-preview-heading h3 { margin: 0; font-size: 18px; }
.import-preview-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.import-ready { --status-color: var(--green); }
.import-created { --status-color: var(--deep-green); }
.import-skipped { --status-color: var(--orange); }
.import-error { --status-color: var(--red); }

.order-list { display: grid; gap: 10px; }
.order-card { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(100px, .7fr) auto; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--status-color, var(--muted)); border-radius: 10px; padding: 15px; }
.order-card h3 { margin: 0; font-size: 18px; }
.spec { margin: 4px 0 0; color: var(--ink-soft); font-weight: 700; }
.order-meta { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; background: color-mix(in srgb, var(--status-color) 13%, white); color: var(--status-color); font-size: 12px; font-weight: 800; white-space: nowrap; }
.anomaly-flag { color: var(--red); font-weight: 800; font-size: 12px; }

.machine-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mode-toggle { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.mode-toggle button { min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); padding: 7px 12px; font-weight: 800; }
.mode-toggle button.active { background: var(--ink); color: #fff; }
.machine-card { position: relative; min-height: 152px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; padding: 15px; overflow: hidden; box-shadow: 0 5px 18px rgba(23,36,43,.05); }
.machine-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--machine-yellow); }
.machine-card.active::before { background: var(--green); }
.machine-number { font: 900 27px/1 Arial Narrow, "Arial", sans-serif; letter-spacing: -.04em; }
.machine-state { float: right; font-size: 11px; font-weight: 800; color: var(--muted); }
.machine-state small { display: block; margin-top: 3px; font-weight: 650; }
.machine-product { margin: 24px 0 0; font-weight: 800; line-height: 1.3; }
.machine-spec { margin: 5px 0 0; color: var(--ink-soft); }
.machine-empty { margin: 28px 0 0; color: var(--muted); }
.back-button { margin-bottom: 14px; }
.machine-hero { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--ink); color: #fff; padding: 16px 18px; border-radius: 12px; }
.machine-hero-back { width: 100%; border: 0; text-align: left; box-shadow: 0 7px 18px rgba(23,36,43,.12); }
.machine-hero-back:hover { background: #20323a; }
.machine-hero-back:active { transform: translateY(1px); }
.machine-hero .big-number { color: var(--machine-yellow); font: 900 44px/1 Arial Narrow, Arial, sans-serif; }
.machine-hero h2 { margin: 0; font-size: 22px; }
.machine-hero p { margin: 5px 0 0; color: #cbd5d1; }
.machine-quick-switch { display: grid; grid-template-columns: repeat(15, minmax(42px, 1fr)); gap: 6px; margin: 8px 0 14px; padding: 3px 0 7px; overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth; }
.machine-switch-button { min-width: 42px; min-height: 39px; border: 1px solid transparent; border-radius: 7px; padding: 5px 4px; font: 850 14px/1 Arial Narrow, Arial, sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.35); transition: transform .14s ease, box-shadow .14s ease; }
.machine-switch-button.idle { border-color: #d89b27; background: var(--machine-yellow); color: #191d18; }
.machine-switch-button.active { border-color: #18573f; background: #1f6a4d; color: #fff; }
.machine-switch-button.report-missing { border-color: #a9342b; background: #c84c3e; color: #fff; }
.machine-switch-button:hover { filter: brightness(.96); }
.machine-switch-button.current { transform: translateY(-2px); outline: 2px solid #283618; outline-offset: 1px; box-shadow: 0 5px 11px rgba(40,54,24,.24); }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.metric small { display: block; color: var(--muted); }
.metric strong { display: block; margin-top: 4px; font: 800 24px/1.2 Arial Narrow, Arial, sans-serif; }
.completed-order-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.completed-order-card { overflow: hidden; border: 1px solid rgba(188,108,37,.3); border-radius: 13px; background: var(--production-cream, #fefae0); box-shadow: 0 7px 20px rgba(40,54,24,.07); }
.completed-order-card header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(96,108,56,.18); }
.completed-order-card header div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; min-width: 0; }
.completed-order-card header small { color: var(--production-copper, #bc6c25); font-weight: 850; }
.completed-order-card header strong { color: var(--production-green-950, #283618); font-size: 16px; }
.completed-order-card header span, .completed-order-card header time { color: var(--muted); font-size: 12px; }
.completed-order-card header time { flex: 0 0 auto; white-space: nowrap; }
.completed-order-metrics { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1px; background: rgba(96,108,56,.16); }
.completed-order-metrics > div { min-width: 0; padding: 13px 16px; background: rgba(255,255,255,.48); }
.completed-order-metrics small { display: block; color: #74795e; font-size: 11px; }
.completed-order-metrics strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--production-green-950, #283618); font: 850 20px/1.2 Arial Narrow, Arial, sans-serif; }
.completed-order-metrics em { margin-left: 2px; font: 700 11px/1 "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--muted); font-style: normal; }
.completed-order-card footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; color: var(--production-green-700, #606c38); font-size: 12px; }
.completed-order-card footer i { color: var(--production-copper, #bc6c25); font-size: 17px; font-style: normal; }
.completed-order-card footer strong { color: var(--production-green-950, #283618); }
.operation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.operation-grid h3 { margin: 0 0 12px; }
.inline-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.material-entry { grid-template-columns: minmax(0, 1fr) auto auto; }
.material-entry-note { align-self: end; min-height: 44px; display: grid; align-content: center; color: var(--muted); font-size: 13px; white-space: nowrap; }
.inline-form.quantity-form { grid-template-columns: 1fr 1fr minmax(118px, auto) auto; }
.quantity-preview { display: grid; gap: 3px; min-height: 44px; align-content: center; border: 1px dashed var(--line); border-radius: 9px; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.quantity-preview strong { color: var(--ink); font-size: 16px; }
.history { display: grid; gap: 6px; margin-top: 14px; }
.history-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-soft); }
.history-row .seq { color: var(--muted); }
.material-history-row { grid-template-columns: auto 1fr auto auto; align-items: center; }
.history-reverse { min-height: 0; border: 0; background: transparent; color: var(--ink-soft); padding: 0; font-size: 12px; text-decoration: underline; }
.history-reversed { color: var(--muted); }
.production-history-title { margin: 18px 0 8px; font-size: 14px; }
.daily-production-list { display: grid; gap: 7px; }
.daily-production-row { display: grid; grid-template-columns: 1.25fr 1fr .85fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--production-cream); padding: 9px 11px; font-size: 12px; }
.daily-production-row time { color: var(--muted); font-weight: 700; white-space: nowrap; }
.daily-production-row span { display: grid; gap: 2px; color: var(--muted); }
.daily-production-row strong { color: var(--ink); font-size: 13px; }
.daily-production-row .daily-production-quantity { display: flex; align-items: baseline; gap: 4px; color: var(--ink); font-weight: 750; }
.daily-production-row .daily-production-quantity strong { font-size: 19px; line-height: 1; }
.daily-production-row .daily-production-quantity small { color: var(--muted); font-size: 11px; }
.counter-history { display: grid; margin-top: 4px; }
.counter-history-row { display: grid; grid-template-columns: minmax(92px, auto) 1fr auto; gap: 9px 14px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--line); }
.counter-quantity { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
.counter-quantity strong { color: var(--ink); font: 850 19px/1 Arial Narrow, Arial, sans-serif; }
.counter-quantity small, .counter-quantity span { color: var(--muted); font-size: 10px; }
.counter-quantity span { margin-left: 4px; }
.counter-meta { display: flex; align-items: center; gap: 8px 14px; min-width: 0; color: var(--ink-soft); font-size: 12px; }
.counter-meta time { margin-left: auto; color: var(--muted); white-space: nowrap; }
.counter-meta em { color: var(--red); font-size: 11px; font-style: normal; }
.counter-row-action { justify-self: end; white-space: nowrap; }
.counter-repeat-reason { grid-column: 2 / -1; margin: -3px 0 0; padding: 6px 9px; border-radius: 7px; background: #fff4df; color: #765222; font-size: 11px; line-height: 1.4; }
.empty-note { color: var(--muted); font-size: 13px; }

.two-column { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; }
.select-list { display: grid; gap: 8px; max-height: 70vh; overflow: auto; }
.select-order { border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; padding: 12px; }
.select-order.active { border-color: var(--ink); box-shadow: inset 4px 0 var(--machine-yellow); }
.order-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.order-picker .select-order { min-height: 98px; border-left: 5px solid var(--status-color, var(--muted)); }
.fulfillment-stack { display: grid; gap: 14px; }
.order-summary-row { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(110px, .8fr)) auto; gap: 14px; align-items: center; width: 100%; min-height: 88px; border: 1px solid var(--line); border-left: 6px solid var(--status-color, var(--muted)); border-radius: 12px; background: var(--panel); color: var(--ink); padding: 14px 16px; text-align: left; box-shadow: 0 5px 18px rgba(23,36,43,.05); }
.order-summary-row[role="button"] { cursor: pointer; }
.order-summary-row > div { display: grid; gap: 4px; }
.order-summary-row > div:first-child strong { font-size: 17px; }
.order-summary-row span:not(.status-pill), .order-summary-row small { color: var(--muted); font-size: 12px; }
.order-summary-row > div:not(:first-child) strong { font-size: 14px; }
.fulfillment-order-row { grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(100px, .8fr)); }
.order-summary-row .order-summary-title { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.order-summary-title > div { display: grid; gap: 4px; }
.machine-count { color: var(--muted); font-size: 12px; }
.order-progress { grid-column: 1 / -1; display: grid !important; grid-template-columns: auto minmax(120px, 1fr); gap: 10px; align-items: center; padding-top: 3px; }
.order-progress > div { display: grid; gap: 2px; }
.order-progress strong { font-size: 13px !important; }
.order-progress-track { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: #edf3ef; }
.order-progress-fill { display: block; height: 100%; border-radius: inherit; background: #a9dfbd; transition: width .2s ease; }
.read-only-order-detail { display: grid; gap: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.detail-grid > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfdfb; }
.detail-grid small { color: var(--muted); }
.detail-grid strong { overflow-wrap: anywhere; }
.summary-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0 16px; }
.summary-band .metric strong { font-size: 20px; }
.fulfillment-header .summary-band { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quote-heading { align-items: center; }
.quote-date-stamp { min-width: 150px; border-left: 3px solid var(--machine-yellow); padding: 7px 0 7px 13px; }
.quote-date-stamp small, .quote-date-stamp strong { display: block; }
.quote-date-stamp small { color: var(--muted); font-size: 11px; }
.quote-date-stamp strong { margin-top: 3px; font-size: 16px; }
.quote-workspace { display: grid; grid-template-columns: minmax(560px, 1.45fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
.quote-entry-panel { padding: 22px; }
.quote-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quote-section-kicker { margin-bottom: 10px; color: var(--production-green-950, #283618); font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.quote-material-calculator { margin-top: 22px; overflow: hidden; border: 1px solid rgba(96,108,56,.32); border-radius: 14px; background: #f6f5e8; box-shadow: inset 0 1px rgba(255,255,255,.8); }
.quote-material-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid rgba(96,108,56,.22); background: var(--production-cream, #fefae0); }
.quote-material-head span, .quote-material-head small { display: block; }
.quote-material-head span { color: var(--production-green-950, #283618); font-size: 17px; font-weight: 850; }
.quote-material-head small { margin-top: 3px; color: #6d745a; }
.quote-material-head > strong { flex: 0 0 auto; border-radius: 999px; background: var(--production-green-950, #283618); color: var(--production-cream, #fefae0); padding: 6px 10px; font-size: 11px; letter-spacing: .05em; }
.quote-material-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px 17px 12px; }
.quote-material-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 17px; overflow: hidden; border: 1px solid rgba(96,108,56,.2); border-radius: 10px; background: rgba(96,108,56,.16); }
.quote-material-results > div { min-height: 67px; padding: 11px 12px; background: rgba(255,255,255,.78); }
.quote-material-results small, .quote-material-results strong { display: block; }
.quote-material-results small { color: #717963; font-size: 10px; }
.quote-material-results strong { margin-top: 6px; color: var(--production-green-950, #283618); font-size: 14px; overflow-wrap: anywhere; }
.quote-material-results .quote-material-weight, .quote-material-results .quote-material-auto-price { grid-column: span 2; background: #edf1dd; }
.quote-material-results .quote-material-weight strong, .quote-material-results .quote-material-auto-price strong { font: 850 21px/1.1 Arial, sans-serif; }
.quote-material-results .quote-material-auto-price strong { color: var(--production-copper, #bc6c25); }
.quote-adopted-price { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(280px, 1fr); align-items: center; gap: 14px; margin: 14px 17px 17px; padding: 13px 14px; border: 1px solid rgba(188,108,37,.34); border-radius: 10px; background: #fff8e8; }
.quote-adopted-price > span > strong, .quote-adopted-price > span > small { display: block; }
.quote-adopted-price > span > strong { color: var(--production-green-950, #283618); }
.quote-adopted-price > span > small { margin-top: 3px; color: #837258; font-size: 10px; }
.quote-adopted-control { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 8px; }
.quote-adopted-control input { border-color: rgba(188,108,37,.45); background: #fff; font-size: 17px; font-weight: 800; }
.quote-adopted-control button { min-height: 44px; padding: 7px 11px; white-space: nowrap; }
.quote-cost-section { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.quote-section-title { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.quote-section-title span { display: block; font-size: 17px; font-weight: 850; }
.quote-section-title small { display: block; margin-top: 3px; color: var(--muted); }
.quote-section-title button { min-height: 38px; padding: 7px 11px; }
.quote-cost-rows { display: grid; gap: 8px; }
.quote-cost-row { display: grid; grid-template-columns: minmax(170px, 1.35fr) minmax(130px, .65fr) auto; gap: 8px; align-items: end; }
.quote-remove-cost { min-height: 44px; border: 0; background: transparent; color: var(--red); padding: 7px 5px; font-size: 12px; }
.quote-scrap-field { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(220px, 1fr); gap: 8px 14px; align-items: center; margin-top: 16px; padding: 14px 16px; border: 1px solid #e2d5ba; border-radius: 11px; background: #fffaf0; }
.quote-scrap-field > span { font-weight: 750; }
.quote-scrap-field em, .quote-profit-field em, .quote-manual-price-field em { margin-left: 7px; font-size: 11px; font-style: normal; font-weight: 650; }
.quote-scrap-field em { color: #8a7658; }
.quote-scrap-field small { grid-column: 2; color: var(--muted); font-size: 11px; }
.quote-close-fields { display: grid; grid-template-columns: 1fr .72fr 1fr; gap: 14px; margin-top: 16px; padding: 18px; border-radius: 11px; background: #edf4e8; }
.quote-profit-field, .quote-manual-price-field { padding: 11px; border: 1px solid transparent; border-radius: 9px; }
.quote-profit-field { background: rgba(255,255,255,.58); }
.quote-profit-field em { color: #557132; }
.quote-manual-price-field { border-color: rgba(188,108,37,.3); background: #fff1d7; }
.quote-manual-price-field em { color: var(--production-copper, #bc6c25); }
.quote-manual-price-field input { border-color: rgba(188,108,37,.48); font-size: 18px; font-weight: 800; }
.quote-field-invalid { border-color: #b9432f !important; box-shadow: 0 0 0 3px rgba(185,67,47,.1); }
.quote-field-invalid input { border-color: #b9432f; }
.quote-actions { margin-top: 8px; }
.quote-cost-ledger { position: sticky; top: 78px; overflow: hidden; border-radius: var(--radius); background: #173b30; color: #f6fbf8; box-shadow: 0 16px 34px rgba(23,59,48,.18); }
.quote-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 20px; border-bottom: 1px solid rgba(255,255,255,.13); }
.quote-ledger-head span { font-weight: 800; }
.quote-ledger-head strong { color: var(--machine-yellow); }
.quote-cost-ledger dl { margin: 0; padding: 12px 20px; }
.quote-cost-ledger dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; }
.quote-cost-ledger dt { color: #bdd0c8; }
.quote-cost-ledger dd { margin: 0; font-weight: 800; }
.quote-cost-ledger .quote-ledger-credit dd { color: #f2c486; }
.quote-cost-ledger .quote-ledger-total { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.13); padding-top: 13px; }
.quote-suggested-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.055); }
.quote-suggested-price span { color: #c9d8d0; font-size: 12px; }
.quote-suggested-price strong { font-size: 20px; }
.quote-final-price { padding: 19px 20px; background: var(--machine-yellow); color: var(--ink); }
.quote-final-price span, .quote-final-price strong { display: block; }
.quote-final-price span { font-size: 12px; font-weight: 750; }
.quote-final-price strong { margin-top: 5px; font: 900 32px/1.05 Arial Narrow, Arial, sans-serif; }
.quote-cost-ledger > p { margin: 0; padding: 11px 20px; color: #bdd0c8; font-size: 12px; }
.quote-history { margin-top: 28px; }
.quote-history-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.quote-history-head h3 { margin: 0; font-size: 20px; }
.quote-history-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.quote-history-head > strong { color: var(--green); }
#quote-list { display: grid; gap: 8px; }
.quote-customer-group { overflow: hidden; border: 1px solid rgba(96,108,56,.24); border-radius: 12px; background: var(--production-cream, #fefae0); box-shadow: 0 5px 18px rgba(23,36,43,.045); }
.quote-customer-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--production-green-950, #283618); }
.quote-customer-group > summary::-webkit-details-marker { display: none; }
.quote-customer-group > summary::after { content: "展开  ›"; color: var(--production-copper, #bc6c25); font-size: 12px; font-weight: 750; }
.quote-customer-group[open] > summary::after { content: "收起  ⌄"; }
.quote-customer-group > summary span { display: flex; align-items: baseline; gap: 10px; }
.quote-customer-group > summary strong { font-size: 17px; }
.quote-customer-group > summary small, .quote-customer-group > summary time { color: var(--muted); font-size: 11px; }
.quote-customer-records { display: grid; gap: 7px; padding: 0 9px 9px; border-top: 1px solid rgba(96,108,56,.16); }
.quote-record { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(150px, .45fr) auto; gap: 10px 16px; align-items: center; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 10px; background: #fff; padding: 10px 12px; }
.quote-customer-records .quote-record:first-child { margin-top: 9px; }
.quote-record small, .quote-record span { display: block; color: var(--muted); font-size: 12px; }
.quote-record span { margin-top: 3px; }
.quote-record-main { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.quote-record-main > strong { font-size: 16px; }
.quote-record-date { margin-top: 3px; color: var(--muted); font-size: 11px; }
.quote-record-price { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.quote-record-price strong { display: block; margin-top: 4px; font-size: 18px; }
.quote-record-actions { display: flex; gap: 6px; }
.quote-record-actions .secondary { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.quote-record[data-view-quote] { cursor: pointer; }
.quote-record[data-view-quote]:focus-visible, .quote-customer-group summary:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.quote-record[data-view-quote]:hover { border-color: var(--green); }
.quote-view-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.quote-view-toolbar span, .quote-view-toolbar time { color: var(--muted); font-size: 12px; }
.quote-view-toolbar time { margin-left: auto; }
.quote-view-only input:disabled, .quote-view-only select:disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); background: #f7f8f3; cursor: default; }
.quote-view-only form button, .quote-view-only .quote-section-title small, .quote-view-only label em { display: none; }
.quote-view-only .quote-cost-row { grid-template-columns: 1.35fr .65fr; }
.quote-view-footer { margin-top: 18px; justify-content: space-between; }
.quote-view-toolbar + .quote-workspace { animation: history-appear 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .quote-view-toolbar + .quote-workspace { animation: none; } }
.quote-empty { border: 1px dashed var(--line); border-radius: 10px; background: #fff; color: var(--muted); padding: 22px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 50; background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 999px; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.status-WAITING_PRODUCTION { --status-color: #727b7e; }
.status-IN_PRODUCTION { --status-color: var(--green); }
.status-PRODUCTION_PAUSED { --status-color: var(--orange); }
.status-PRODUCTION_FINISHED { --status-color: var(--orange); }
.status-OUTSOURCED { --status-color: var(--purple); }
.status-INSPECTING { --status-color: var(--blue); }
.status-PARTIALLY_SHIPPED { --status-color: var(--cyan); }
.status-FULLY_SHIPPED, .status-CLOSED { --status-color: var(--deep-green); }

.production-review-actions { margin: 12px 0; }
.production-review-summary { display: grid; gap: 16px; }
.production-review-result { border-radius: 10px; padding: 14px 16px; font-size: 18px; font-weight: 850; }
.production-review-result.met { background: #edf4df; color: var(--deep-green); }
.production-review-result.short { background: #fff0e2; color: #a44818; }
.production-review-machines { display: grid; gap: 16px; margin-top: 16px; }
.production-review-machine { display: grid; gap: 16px; }
.production-review-machine h3, .production-review-machine h4 { margin: 0; }
.production-review-machine-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.production-review-machine-heading h3 { font-size: 22px; }
.production-review-machine-heading p { margin: 5px 0 0; color: var(--muted); }
.production-review-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.production-review-columns > div { display: grid; align-content: start; gap: 9px; }
.production-session, .production-review-daily-row { display: flex; justify-content: space-between; gap: 12px; border-radius: 8px; background: var(--production-cream); padding: 10px 12px; }
.production-session span { color: var(--muted); text-align: right; }
.production-review-reports { display: grid; gap: 8px; }
.production-review-report { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: #fff; }
.production-review-report div { display: grid; gap: 3px; }
.production-review-report small { color: var(--muted); }
.production-review-report p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.production-review-report em { grid-column: 1 / -1; color: var(--red); font-style: normal; font-weight: 800; }
.production-review-report.invalid { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); background: #fff7f6; }
.report-adjustment-history { grid-column: 1 / -1; display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 9px; }
.report-adjustment-row { display: grid !important; grid-template-columns: auto auto 1fr auto; gap: 12px !important; align-items: center; border-radius: 7px; background: var(--production-cream); padding: 8px 10px; }
.report-adjustment-row span, .report-adjustment-row time { color: var(--muted); }
.report-adjustment-row strong { color: var(--deep-green); }
.report-adjustment-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(120px, auto); gap: 9px; align-items: end; border-top: 1px dashed var(--line); padding-top: 9px; }
.report-adjustment-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.report-adjustment-form input { min-height: 38px; }
.report-adjustment-form button { min-height: 38px; }
.production-review-final { grid-column: 1 / -1; margin: 0; color: var(--deep-green); }
.shutdown-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.shutdown-form .button-row { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .production-review-columns { grid-template-columns: 1fr; }
  .production-review-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-review-report div:nth-child(2) { grid-column: span 2; }
  .report-adjustment-row { grid-template-columns: 1fr auto !important; }
  .report-adjustment-form { grid-template-columns: 1fr auto; }
  .report-adjustment-form .form-error { grid-column: 1 / -1; }
  .shutdown-form { grid-template-columns: 1fr; }
  .shutdown-form .button-row { grid-column: 1; }
}

@media (max-width: 900px) {
  .machine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-form .span-3 { grid-column: 1 / -1; }
  .two-column { grid-template-columns: 1fr; }
  .select-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .summary-band { grid-template-columns: repeat(3, 1fr); }
  .fulfillment-header .summary-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-summary-row { grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(100px, .8fr)); }
  .fulfillment-order-row { grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(100px, .8fr)); }
  .manager-order-layout { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manager-order-entry .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manager-order-list { position: static; max-height: none; overflow: visible; padding: 0; }
  .quote-workspace { grid-template-columns: 1fr; }
  .quote-cost-ledger { position: static; }
  .quote-close-fields { grid-template-columns: 1fr 1fr; }
  .quote-manual-price-field { grid-column: 1 / -1; }
  .quote-record { grid-template-columns: minmax(180px, 1fr) minmax(135px, .6fr); }
  .quote-record-actions { grid-column: 1 / -1; justify-content: end; }
}

@media (max-width: 480px) {
  .login-screen { grid-template-columns: 1fr; padding: 22px; }
  .login-mark { display: none; }
  .login-card { width: 100%; min-width: 0; padding: 26px 20px; box-shadow: 9px 9px 0 var(--machine-yellow); }
  .login-card h1 { font-size: 28px; overflow-wrap: anywhere; }
  .login-card .eyebrow { font-size: 9px; letter-spacing: .1em; overflow-wrap: anywhere; }
  .topbar { padding: 15px 16px; }
  .topbar h1 { font-size: 18px; }
  .account-chip { align-items: end; flex-direction: column; gap: 4px; }
  .main-nav { justify-content: flex-start; overflow-x: auto; padding: 7px 10px; }
  .nav-button { flex: 0 0 auto; padding: 8px 15px; }
  .main-content { width: calc(100% - 20px); padding-top: 18px; }
  .page-heading { align-items: start; flex-direction: column; }
  .page-heading h2 { font-size: 30px; }
  .upload-grid, .operation-grid { grid-template-columns: 1fr; }
  .import-preview-heading { align-items: stretch; flex-direction: column; }
  .screenshot-queue-row { align-items: flex-start; }
  .grid-form { grid-template-columns: 1fr; }
  .grid-form .span-2, .grid-form .span-3 { grid-column: auto; }
  .order-card { grid-template-columns: 1fr auto; }
  .order-card > :nth-child(2) { grid-column: 1; }
  .order-card > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .machine-card { min-height: 138px; padding: 13px; }
  .machine-number { font-size: 23px; }
  .machine-product { margin-top: 20px; }
  .machine-hero { grid-template-columns: 68px 1fr; gap: 10px; padding: 13px 14px; }
  .machine-hero .big-number { font-size: 32px; }
  .machine-hero h2 { font-size: 18px; }
  .machine-hero p { font-size: 11px; line-height: 1.45; }
  .machine-hero .status-pill { grid-column: 1 / -1; justify-self: start; }
  .machine-quick-switch { grid-template-columns: repeat(15, 43px); margin-top: 7px; }
  .machine-switch-button { min-width: 43px; min-height: 39px; }
  .metric-strip, .summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fulfillment-header .summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .completed-order-card header { align-items: flex-start; }
  .completed-order-card header div { display: grid; gap: 3px; }
  .completed-order-metrics { grid-template-columns: 1.4fr 1fr; }
  .completed-order-metrics > div:first-child { grid-column: 1 / -1; }
  .completed-order-metrics strong { font-size: 18px; }
  .inline-form { grid-template-columns: 1fr 1fr; }
  .inline-form button { grid-column: 1 / -1; }
  .material-entry { grid-template-columns: 1fr auto; }
  .material-entry .material-entry-note { align-self: end; }
  .daily-production-row { grid-template-columns: 1fr 1fr; }
  .counter-history-row { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 0; }
  .counter-quantity { grid-column: 1; grid-row: 1; }
  .counter-meta { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 5px 11px; }
  .counter-meta time { margin-left: 0; }
  .counter-row-action { grid-column: 2; grid-row: 1; }
  .counter-repeat-reason { grid-column: 1 / -1; grid-row: 3; margin-top: 1px; }
  .inline-form.quantity-form { grid-template-columns: 1fr 1fr; }
  .inline-form.quantity-form .quantity-preview { grid-column: 1 / -1; }
  .select-list { grid-template-columns: 1fr; }
  .order-summary-row { grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
  .order-summary-row > div:first-child { grid-column: 1 / -1; }
  .order-summary-row .status-pill { justify-self: start; }
  .detail-grid { grid-template-columns: 1fr; }
  .quote-heading { flex-direction: row; align-items: end; }
  .quote-heading h2 { font-size: 28px; }
  .quote-date-stamp { min-width: 116px; }
  .quote-fields, .quote-close-fields { grid-template-columns: 1fr; }
  .quote-material-inputs { grid-template-columns: 1fr; }
  .quote-material-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-material-results .quote-material-weight, .quote-material-results .quote-material-auto-price { grid-column: span 1; }
  .quote-adopted-price { grid-template-columns: 1fr; }
  .quote-adopted-control { grid-template-columns: 1fr; }
  .quote-manual-price-field { grid-column: auto; }
  .quote-scrap-field { grid-template-columns: 1fr; }
  .quote-scrap-field small { grid-column: auto; }
  .quote-cost-row { grid-template-columns: 1fr 92px auto; }
  .quote-cost-row label { font-size: 12px; }
  .quote-section-title { align-items: stretch; flex-direction: column; }
  .quote-section-title button { width: 100%; }
  .quote-record { grid-template-columns: minmax(0, 1fr) minmax(80px, auto); gap: 8px 12px; align-items: start; }
  .quote-record-main { grid-column: 1; }
  .quote-record-price { grid-column: 2; max-width: 125px; }
  .quote-record-actions { grid-column: 1 / -1; }
  .quote-record-actions { justify-content: stretch; }
  .quote-record-actions button { flex: 1; }
  .quote-customer-group > summary { min-height: 52px; padding: 8px 12px; }
  .quote-customer-group > summary time { display: none; }
  .panel { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Selected production-dashboard visual system */
.app-shell {
  --production-green-950: #283618;
  --production-green-900: #283618;
  --production-green-800: #4f5c2f;
  --production-green-700: #606c38;
  --production-orange: #dda15e;
  --production-cream: #fefae0;
  --production-idle: #fffbea;
  --production-card: #f2f3dc;
  --production-copper: #bc6c25;
  --production-red: #a94422;
}
.topbar {
  position: relative;
  min-height: 110px;
  padding: 24px max(42px, calc((100vw - 1360px) / 2));
  background:
    radial-gradient(circle at 72% 12%, rgba(89, 125, 45, .22), transparent 35%),
    linear-gradient(135deg, var(--production-green-950), #122d0c 75%);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar h1 { color: #fffdf7; font-size: 20px; }
.topbar .eyebrow { color: #fffdf7; font-size: 16px; letter-spacing: .06em; }
.topbar > * { position: relative; z-index: 12; }
.account-chip { flex-direction: row; align-items: center; gap: 20px; color: #fffdf7; font-size: 15px; }
.account-menu { position: relative; }
.account-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after { content: "⌄"; font-size: 16px; }
.account-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, #8d9b42, #647728); color: #fff; font-weight: 750; box-shadow: inset 0 1px rgba(255,255,255,.28); }
.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 130px;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #203c18;
  box-shadow: 0 16px 34px rgba(6,20,5,.24);
}

.app-shell .topbar {
  background: var(--production-cream);
  border-bottom-color: rgba(40,54,24,.14);
  color: var(--production-green-950);
}
.app-shell .topbar h1,
.app-shell .topbar .eyebrow,
.app-shell .account-chip { color: var(--production-green-950); }
.app-shell .account-avatar {
  background: linear-gradient(145deg, var(--production-green-700), var(--production-green-950));
  color: var(--production-cream);
}

@media (prefers-reduced-motion: reduce) {
  .production-dashboard .machine-card,
  .topnav .nav-button { transition: none; }
}

/* Shared dashboard shell for quotation, orders and fulfillment */
.main-content.quotes-page,
.main-content.orders-page,
.main-content.fulfillment-page { width: 100%; padding: 0 0 80px; }

.dashboard-page-heading {
  min-height: 140px;
  margin: 0;
  padding: 0 max(42px, calc((100vw - 1360px) / 2));
  display: grid;
  grid-template-columns: 1fr minmax(480px, .9fr);
  align-items: center;
  gap: 54px;
  background:
    radial-gradient(circle at 74% 18%, rgba(90, 128, 47, .2), transparent 34%),
    linear-gradient(135deg, var(--production-green-950), #18370f 72%);
  color: #fffdf7;
}
.dashboard-page-heading h2 { margin: 0; color: #fffdf7; font-size: 44px; line-height: 1; letter-spacing: -.035em; }
.dashboard-page-heading p { margin: 12px 0 0; color: rgba(255,255,255,.82); }
.dashboard-page-heading .eyebrow { margin: 0 0 8px; color: #b7c8a1; }
.page-stat-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  min-height: 66px;
  padding: 0 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  background: linear-gradient(110deg, #ffb853, #ffad42);
  color: #193112;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 10px 26px rgba(6,20,5,.16);
}
.page-stat-band strong { text-align: center; font-size: 18px; letter-spacing: .02em; }
.page-stat-band i { width: 1px; height: 24px; background: rgba(25,49,18,.45); }
.dashboard-page-heading .quote-date-stamp {
  min-width: 0;
  padding: 16px 22px;
  border: 1px solid rgba(255,255,255,.2);
  border-left: 0;
  border-radius: 11px;
  background: linear-gradient(110deg, #ffb853, #ffad42);
  color: #193112;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 10px 26px rgba(6,20,5,.16);
}
.dashboard-page-heading .quote-date-stamp small { color: #4f582d; }
.dashboard-page-heading .quote-date-stamp strong { margin-top: 0; font-size: 22px; line-height: 1.25; }
.manager-order-list .order-card,
.quote-record,
.fulfillment-order-row,
.machine-hero + .metric-strip .metric { background: var(--production-cream); }
.quotes-page > .quote-workspace,
.quotes-page > .quote-history,
.orders-page > .manager-order-layout,
.orders-page > .section-title,
.orders-page > .order-list,
.fulfillment-page > .section-title,
.fulfillment-page > .order-list,
.fulfillment-page > .back-button,
.fulfillment-page > .fulfillment-header,
.fulfillment-page > .fulfillment-stack { width: min(1360px, calc(100% - 84px)); margin-left: auto; margin-right: auto; }
.quotes-page > .quote-workspace,
.orders-page > .manager-order-layout { margin-top: 24px; }
.quotes-page > .quote-history { margin-top: 28px; }
.orders-page > .section-title,
.fulfillment-page > .section-title { margin-top: 28px; }
.orders-page > .order-list,
.fulfillment-page > .order-list { margin-top: 12px; }
.fulfillment-page > .back-button { display: block; margin-top: 24px; }
.fulfillment-page > .fulfillment-header { margin-top: 14px; }
.fulfillment-page > .fulfillment-stack { margin-top: 14px; }

.delivery-page-actions { grid-template-columns: 1fr auto 1fr auto 1fr; }
.delivery-page-actions button { min-height: 46px; border: 0; background: transparent; color: #193112; font-size: 17px; font-weight: 850; cursor: pointer; }
.delivery-page-actions button:hover { color: #fff; }
.delivery-page-actions button.active { color: #fff; text-shadow: 0 1px 8px rgba(40,54,24,.22); }
.delivery-history-shell, .delivery-create-layout, .delivery-detail-shell { width: min(1360px, calc(100% - 84px)); margin: 24px auto 0; }
.delivery-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 14px; }
.delivery-section-heading h3, .delivery-section-heading p { margin: 0; }
.delivery-section-heading h3 { color: var(--production-green-950); font-size: 24px; }
.delivery-section-heading p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.delivery-history-groups { display: grid; gap: 12px; }
.delivery-customer-group { overflow: hidden; border: 1px solid rgba(96,108,56,.25); border-radius: 14px; background: var(--production-cream); box-shadow: 0 7px 20px rgba(40,54,24,.06); }
.delivery-customer-group > summary, .delivery-month-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.delivery-customer-group > summary::-webkit-details-marker, .delivery-month-group > summary::-webkit-details-marker { display: none; }
.delivery-customer-group > summary { min-height: 66px; padding: 10px 17px; color: var(--production-green-950); }
.delivery-customer-group > summary span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px; }
.delivery-customer-group > summary strong { font-size: 20px; }
.delivery-customer-group > summary small { color: #697058; }
.delivery-customer-group > summary b { border-radius: 999px; background: #e2e8cc; padding: 5px 10px; font-size: 12px; }
.delivery-customer-months { display: grid; gap: 8px; padding: 0 10px 10px; }
.delivery-month-group { overflow: hidden; border: 1px solid rgba(188,108,37,.2); border-radius: 10px; background: rgba(255,255,255,.56); }
.delivery-month-group > summary { min-height: 48px; padding: 8px 13px; }
.delivery-month-group > summary span { color: var(--muted); font-size: 12px; }
.delivery-note-list { display: grid; gap: 7px; padding: 0 8px 8px; }
.delivery-note-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 9px 11px; }
.delivery-note-card > button { display: flex; align-items: baseline; gap: 14px; min-height: 38px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.delivery-note-card > button span { font-weight: 800; }
.delivery-note-card small, .delivery-note-card > div span { color: var(--muted); font-size: 12px; }
.delivery-note-card > div { display: flex; align-items: center; gap: 14px; }
.delivery-note-card a { border-radius: 7px; background: var(--production-green-700); color: #fff; padding: 7px 9px; font-size: 12px; font-weight: 750; text-decoration: none; }
.delivery-empty { border: 1px dashed #c9bea5; border-radius: 13px; background: #fffdf4; color: var(--muted); padding: 34px; text-align: center; }
.legacy-fulfillment-access { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.legacy-fulfillment-access > summary { width: fit-content; cursor: pointer; color: var(--production-green-700); font-weight: 750; }
.legacy-fulfillment-access .order-list { margin-top: 12px; }

.delivery-create-layout { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(620px, 1.65fr); gap: 16px; align-items: start; }
.delivery-create-layout > .panel { padding: 0; overflow: hidden; }
.delivery-order-picker > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px; border-bottom: 1px solid var(--line); background: #f2ecd4; }
.delivery-order-picker h3, .delivery-order-picker p { margin: 0; }
.delivery-order-picker p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.delivery-order-picker header > strong { border-radius: 999px; background: var(--production-green-950); color: #fff; padding: 5px 9px; font-size: 12px; }
.delivery-order-options { display: grid; max-height: 610px; overflow: auto; padding: 10px; }
.delivery-order-customer { border-bottom: 1px solid var(--line); }
.delivery-order-customer:last-child { border-bottom: 0; }
.delivery-order-customer > summary { display: grid; gap: 3px; padding: 12px 7px; cursor: pointer; list-style: none; }
.delivery-order-customer > summary::-webkit-details-marker { display: none; }
.delivery-order-customer > summary strong { color: var(--production-green-950); font-size: 14px; }
.delivery-order-customer > summary span { color: var(--muted); font-size: 11px; }
.delivery-order-customer-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.delivery-template-customer-name { max-width: 100%; overflow: hidden; border: 0; border-radius: 5px; background: transparent; color: var(--production-green-950); padding: 2px 0; font-size: 14px; font-weight: 850; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.delivery-template-customer-name:hover, .delivery-template-customer-name:focus-visible { color: var(--production-copper); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.delivery-order-customer > div { display: grid; gap: 6px; padding: 0 0 10px; }
.delivery-order-option { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; min-height: 54px; border: 1px solid transparent; border-radius: 9px; background: #faf8ef; padding: 8px 9px; cursor: pointer; }
.delivery-order-option.selected { border-color: var(--production-green-700); background: #edf2dd; }
.delivery-order-option.disabled { opacity: .45; cursor: not-allowed; }
.delivery-order-option input { width: 19px; height: 19px; accent-color: var(--production-green-700); }
.delivery-order-option span { display: grid; min-width: 0; }
.delivery-order-option small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.delivery-order-option b { color: var(--production-copper); font-size: 11px; white-space: nowrap; }
.delivery-note-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 17px; border-bottom: 1px solid var(--line); background: #edf2dd; }
.delivery-note-meta label { display: grid; gap: 5px; color: var(--production-green-950); font-size: 12px; font-weight: 750; }
.delivery-note-meta input { background: rgba(255,255,255,.86); }
.delivery-selected-lines { display: grid; gap: 8px; min-height: 260px; padding: 14px; }
.delivery-selected-line { display: grid; grid-template-columns: 34px minmax(150px, 1.25fr) minmax(110px, .8fr) 100px 116px 100px; gap: 10px; align-items: center; border: 1px solid rgba(96,108,56,.2); border-radius: 10px; background: #fffdf7; padding: 10px; }
.delivery-selected-line small { display: block; color: var(--muted); font-size: 10px; }
.delivery-selected-line strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 13px; }
.delivery-line-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--production-green-950); color: #fff; font-weight: 850; }
.delivery-line-product strong { color: var(--production-green-950); font-size: 16px; }
.delivery-selected-line input { min-height: 39px; padding: 7px 9px; font-weight: 800; }
.delivery-owed strong { color: var(--production-copper); font-size: 16px; }
.delivery-note-placeholder { display: grid; place-content: center; gap: 5px; color: var(--muted); text-align: center; }
.delivery-note-placeholder strong { color: var(--ink-soft); }
.delivery-note-editor > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; border-top: 1px solid var(--line); background: #faf8ef; }
.delivery-note-editor > footer small, .delivery-note-editor > footer strong { display: block; }
.delivery-note-editor > footer small { color: var(--muted); }
.delivery-note-editor > footer strong { margin-top: 3px; color: var(--production-green-950); font-size: 20px; }
.delivery-detail-shell > .back-button { margin-bottom: 12px; }
.delivery-detail { overflow: hidden; padding: 0; }
.delivery-detail > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; background: #edf2dd; }
.delivery-detail h3, .delivery-detail header small, .delivery-detail header strong, .delivery-detail header time { display: block; margin: 0; }
.delivery-detail h3 { margin-top: 4px; color: var(--production-green-950); font-size: 24px; }
.delivery-detail header small, .delivery-detail header time { color: var(--muted); font-size: 12px; }
.delivery-detail header > div:last-child { text-align: right; }
.delivery-detail header > div:last-child strong { color: var(--production-copper); font-size: 20px; }
.delivery-detail-lines { display: grid; gap: 7px; padding: 14px; }
.delivery-detail-lines article { display: grid; grid-template-columns: 34px minmax(170px, 1.3fr) repeat(4, minmax(100px, .72fr)); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fffdf7; padding: 11px; }
.delivery-detail-lines small, .delivery-detail-lines span { display: block; color: var(--muted); font-size: 11px; }
.delivery-detail-lines strong { display: block; margin-top: 3px; }
.delivery-detail > footer { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 14px 20px; border-top: 1px solid var(--line); background: #faf8ef; }
.delivery-detail > footer small, .delivery-detail > footer strong { display: block; }
.delivery-detail > footer small { color: var(--muted); font-size: 10px; }
.delivery-detail > footer .primary { color: #fff; text-decoration: none; }

.delivery-template-dialog { width: min(540px, calc(100vw - 28px)); max-width: none; border: 0; border-radius: 18px; padding: 0; background: transparent; color: var(--ink); box-shadow: 0 30px 90px rgba(12,30,17,.34); }
.delivery-template-dialog::backdrop { background: rgba(15,30,18,.62); backdrop-filter: blur(4px); }
.delivery-template-upload-shell { overflow: hidden; border-radius: 18px; background: #fffdf5; }
.delivery-template-upload-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; background: var(--production-green-950); color: var(--production-cream); }
.delivery-template-upload-shell > header h3, .delivery-template-upload-shell > header small { display: block; margin: 0; }
.delivery-template-upload-shell > header h3 { max-width: 420px; margin-top: 4px; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.delivery-template-upload-shell > header small { color: rgba(254,250,224,.72); font-size: 10px; }
.delivery-template-upload-shell > header button { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; }
.delivery-template-upload-body { display: grid; gap: 14px; padding: 20px; }
.delivery-template-current { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 9px; background: #f2ecd4; padding: 10px 12px; color: var(--production-green-950); font-size: 12px; font-weight: 750; }
.delivery-template-current.saved { background: #edf2dd; }
.delivery-template-current small { color: var(--muted); font-weight: 500; }
.delivery-template-dropzone { display: grid; place-items: center; gap: 7px; min-height: 200px; border: 2px dashed #cbbd98; border-radius: 14px; background: #fffaf0; color: var(--production-green-950); padding: 24px; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.delivery-template-dropzone:hover, .delivery-template-dropzone.dragging { border-color: var(--production-copper); background: #fff2d9; transform: translateY(-1px); }
.delivery-template-dropzone:disabled { cursor: wait; opacity: .65; transform: none; }
.delivery-template-dropzone strong { font-size: 17px; }
.delivery-template-dropzone small { color: var(--muted); font-size: 11px; }
.delivery-template-file-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--production-green-700); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .5px; box-shadow: 0 7px 16px rgba(40,54,24,.18); }
.delivery-template-message { min-height: 34px; margin: 0; color: var(--muted); font-size: 11px; text-align: center; }
.delivery-template-message.error { color: #b63620; }
.delivery-template-message.success { color: var(--production-green-700); font-weight: 750; }
.delivery-template-upload-shell > footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid rgba(96,108,56,.18); background: #faf8ef; }

@media (max-width: 480px) {
  .main-content.quotes-page,
  .main-content.orders-page,
  .main-content.fulfillment-page { width: 100%; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .dashboard-page-heading {
    min-height: 166px;
    padding: 12px 14px 0;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 18px;
    border-radius: 0 0 22px 22px;
  }
  .dashboard-page-heading h2 { font-size: 36px; }
  .dashboard-page-heading p { margin-top: 8px; font-size: 13px; }
  .dashboard-page-heading .eyebrow { font-size: 10px; }
  .page-stat-band {
    position: relative;
    z-index: 2;
    min-height: 62px;
    margin: 0 16px -31px;
    padding: 0 13px;
    border-radius: 15px;
  }
  .page-stat-band strong { font-size: 13px; }
  .page-stat-band i { height: 20px; }
  .dashboard-page-heading .quote-date-stamp {
    position: relative;
    z-index: 2;
    margin: 0 16px -31px;
    padding: 12px 17px;
    border-radius: 15px;
  }
  .quotes-page > .quote-workspace,
  .quotes-page > .quote-history,
  .orders-page > .manager-order-layout,
  .orders-page > .section-title,
  .orders-page > .order-list,
  .fulfillment-page > .section-title,
  .fulfillment-page > .order-list,
  .fulfillment-page > .back-button,
  .fulfillment-page > .fulfillment-header,
  .fulfillment-page > .fulfillment-stack { width: calc(100% - 28px); }
  .delivery-history-shell, .delivery-create-layout, .delivery-detail-shell { width: calc(100% - 28px); }
  .quotes-page > .quote-workspace,
  .orders-page > .manager-order-layout,
  .orders-page > .section-title,
  .fulfillment-page > .section-title { margin-top: 50px; }
  .quotes-page > .quote-history { margin-top: 26px; }
  .fulfillment-page > .back-button { margin-top: 48px; }
  .delivery-page-actions { margin-bottom: -31px; }
  .delivery-page-actions button { font-size: 13px; }
  .delivery-history-shell, .delivery-create-layout, .delivery-detail-shell { margin-top: 50px; }
  .delivery-section-heading h3 { font-size: 21px; }
  .delivery-note-card { grid-template-columns: 1fr; gap: 4px; }
  .delivery-note-card > div { justify-content: space-between; }
  .delivery-create-layout { grid-template-columns: 1fr; }
  .delivery-order-options { max-height: 360px; }
  .delivery-note-meta { grid-template-columns: 1fr 1fr; }
  .delivery-selected-lines { min-height: 180px; padding: 10px; }
  .delivery-selected-line { grid-template-columns: 28px 1fr 86px; gap: 8px; }
  .delivery-line-product { grid-column: 2; }
  .delivery-selected-line > div:nth-of-type(2), .delivery-selected-line > div:nth-of-type(3) { display: none; }
  .delivery-selected-line label { grid-column: 2; }
  .delivery-selected-line .delivery-owed { grid-column: 3; grid-row: 2; }
  .delivery-note-editor > footer { align-items: stretch; flex-direction: column; }
  .delivery-detail-lines article { grid-template-columns: 28px 1fr 1fr; gap: 9px; }
  .delivery-detail-lines article > div:nth-of-type(1) { grid-column: 2 / -1; }
  .delivery-detail > footer { align-items: stretch; flex-direction: column; gap: 10px; }
  .delivery-template-dialog { width: calc(100vw - 24px); margin: auto; }
  .delivery-template-upload-shell > header { padding: 14px 16px; }
  .delivery-template-upload-shell > header h3 { max-width: 70vw; font-size: 16px; }
  .delivery-template-upload-body { padding: 16px; }
  .delivery-template-current { align-items: flex-start; flex-direction: column; gap: 3px; }
  .delivery-template-dropzone { min-height: 170px; }
  .delivery-template-upload-shell > footer { padding: 10px 16px; }
}
.account-menu-panel .text-button { width: 100%; border: 0; border-radius: 8px; text-align: left; }
.main-nav { background: transparent; }
.mobile-nav-icon, .nav-label-mobile { display: none; }

.main-content.production-page { width: 100%; padding: 0 0 80px; }
.production-dashboard { min-height: calc(100vh - 110px); background: #fff; }
.production-hero {
  position: relative;
  background:
    radial-gradient(circle at 76% 12%, rgba(96,108,56,.42), transparent 35%),
    var(--production-green-950);
  color: var(--production-cream);
}
.production-hero-inner {
  width: min(1360px, calc(100% - 84px));
  min-height: 140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(520px, .9fr);
  align-items: center;
  gap: 54px;
}
.production-hero h2 { margin: 0; font-size: 48px; line-height: 1; letter-spacing: -.04em; }
.production-mobile-subtitle { display: none; }
.production-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  min-height: 66px;
  padding: 0 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  background: linear-gradient(110deg, #ffb853, #ffad42);
  color: #193112;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 10px 26px rgba(6,20,5,.16);
}
.production-summary strong { text-align: center; font-size: 18px; letter-spacing: .02em; }
.production-summary i { width: 1px; height: 24px; background: rgba(25,49,18,.45); }
.production-dashboard .machine-grid {
  width: min(1360px, calc(100% - 84px));
  margin: 0 auto;
  padding: 24px 0 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.production-dashboard .machine-card {
  display: grid;
  grid-template-rows: 52px minmax(58px, 1fr) 1px 32px 7px;
  row-gap: 0;
  min-height: 188px;
  padding: 0 20px 14px;
  border: 1px solid rgba(96,108,56,.24);
  border-radius: 11px;
  background: var(--production-cream);
  color: var(--production-green-950);
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 7px 19px rgba(45,61,29,.055);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.production-dashboard .machine-card:hover { transform: translateY(-2px); border-color: rgba(96,108,56,.48); box-shadow: inset 0 1px #fff, 0 12px 26px rgba(45,61,29,.1); }
.production-dashboard .machine-card:active { transform: translateY(1px); }
.production-dashboard .machine-card::before { display: none; }
.production-dashboard .machine-card.idle { border-color: rgba(221,161,94,.42); background: var(--production-cream); }
.machine-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100% + 40px); margin: 0 -20px; padding: 0 14px; background: #eee4c2; border-bottom: 1px solid rgba(96,108,56,.12); }
.machine-number-badge { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.76); border-radius: 9px; background: rgba(255,250,224,.78); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.machine-number-badge strong { font: 750 22px/1.05 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: -.025em; }
.machine-number-badge span { font-size: 12px; font-weight: 650; }
.production-dashboard .machine-state { float: none; display: inline-flex; align-items: center; gap: 8px; color: var(--production-green-950); font-size: 14px; }
.production-dashboard .machine-state b { width: 9px; height: 9px; border-radius: 50%; background: var(--production-green-700); box-shadow: 0 0 0 3px rgba(96,108,56,.08); }
.production-dashboard .idle .machine-state { color: #72552f; }
.production-dashboard .idle .machine-state b { background: var(--production-orange); box-shadow: 0 0 0 3px rgba(221,161,94,.1); }
.production-dashboard .machine-card.report-missing { border-color: rgba(185,67,47,.72); background: #fff2ed; box-shadow: inset 4px 0 #b9432f, 0 7px 19px rgba(131,45,35,.08); }
.production-dashboard .machine-card.report-missing .machine-state { color: #a9342b; font-weight: 750; }
.production-dashboard .machine-card.report-missing .machine-state b { background: #b9432f; box-shadow: 0 0 0 3px rgba(185,67,47,.12); }
.machine-card-body { min-width: 0; align-self: start; padding-top: 13px; }
.production-dashboard .machine-product { display: block; width: fit-content; max-width: 80%; margin: 0; overflow: visible; white-space: nowrap; font-size: 15px; line-height: 1.25; font-weight: 650; }
.production-dashboard .machine-spec { margin-top: 6px; color: #41482f; font-size: 15px; line-height: 1.25; font-weight: 650; }
.machine-card-divider { width: 100%; height: 1px; background: rgba(96,108,56,.2); }
.machine-card-footer { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.machine-card-footer strong { font-weight: 650; }
.machine-delivery { border-radius: 5px; color: #292e25; padding: 2px 0; }
.machine-delivery.urgent { border: 1px solid var(--production-copper); background: rgba(221,161,94,.14); color: var(--production-copper); padding: 2px 7px; font-weight: 750; }
.machine-card-action { color: var(--production-green-950); font-weight: 700; }
.machine-progress-slot { height: 7px; }
.machine-progress-track { display: block; width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(96,108,56,.18); }
.machine-progress-track > span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--production-green-700); }

@media (min-width: 481px) {
  .main-nav {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 11;
    width: min(600px, 42vw);
    height: 110px;
    transform: translateX(-50%);
    align-items: center;
    gap: 26px;
    padding: 0;
    border: 0;
    backdrop-filter: none;
  }
  .nav-button { position: relative; min-height: 52px; border-radius: 0; color: rgba(255,255,255,.9); padding: 8px 4px; font-size: 16px; }
  .nav-button.active { background: transparent; color: #fff; }
  .nav-button.active::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -18px; height: 4px; border-radius: 999px; background: var(--production-orange); }
  .app-shell .nav-button { color: var(--production-green-950); }
  .app-shell .nav-button.active { color: var(--production-green-950); }
  .app-shell .nav-button.active::after { background: var(--production-orange); }
}

@media (max-width: 480px) {
  body { background: var(--production-cream); background-image: none; }
  .app-shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .topbar {
    min-height: 0;
    align-items: center;
    padding: 18px;
    border: 0;
  }
  .topbar h1 { margin-top: 5px; font-size: 18px; }
  .topbar .eyebrow { font-size: 14px; letter-spacing: .05em; }
  .account-chip { align-items: center; flex-direction: row; gap: 9px; font-size: 13px; }
  .account-menu summary { min-height: 40px; padding: 0; }
  .account-menu summary::after { display: none; }
  .account-avatar { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.82); }
  #current-user { display: none; }
  .account-menu-panel { top: 46px; }
  .main-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    justify-content: stretch;
    gap: 0;
    min-height: calc(54px + env(safe-area-inset-bottom));
    padding: 5px 8px env(safe-area-inset-bottom);
    overflow: visible;
    border-top: 1px solid #ded7c8;
    border-bottom: 0;
    background: rgba(255,252,245,.97);
    box-shadow: 0 -10px 30px rgba(42,48,31,.07);
    backdrop-filter: blur(18px);
  }
  .main-nav .nav-button { flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; place-content: center; gap: 3px; border-radius: 10px; color: #5c5144; padding: 3px; font-size: 10px; transition: flex-grow 260ms ease, background-color 180ms ease; }
  .main-nav .nav-button.active { flex-grow: 1.28; background: rgba(96,108,56,.09); color: #466f24; }
  .main-nav .mobile-nav-icon, .main-nav .nav-label-mobile { transition: transform 260ms ease; transform-origin: center; }
  .main-nav .nav-button.active .mobile-nav-icon { transform: translateY(-2px) scale(1.2); }
  .main-nav .nav-button.active .nav-label-mobile { transform: scale(1.12); }
  .toast { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .mobile-nav-icon { display: block; width: 18px; height: 18px; margin: 0 auto; opacity: .82; }
  .nav-button.active .mobile-nav-icon { filter: invert(34%) sepia(26%) saturate(1091%) hue-rotate(47deg) brightness(92%) contrast(88%); opacity: 1; }
  .nav-label-desktop { display: none; }
  .nav-label-mobile { display: inline; }
  .main-content { width: calc(100% - 20px); padding-bottom: 96px; }
  .main-content.production-page { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .production-dashboard { min-height: calc(100vh - 80px); }
  .production-hero { border-radius: 0 0 22px 22px; }
  .production-hero-inner {
    width: calc(100% - 28px);
    min-height: 152px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 22px;
    padding: 10px 0 0;
  }
  .production-hero h2 { font-size: 38px; }
  .production-mobile-subtitle { display: block; margin: 9px 0 0; color: rgba(255,255,255,.88); font-size: 13px; }
  .production-summary {
    position: relative;
    z-index: 2;
    min-height: 64px;
    margin: 0 16px -30px;
    padding: 0 17px;
    border-radius: 15px;
  }
  .production-summary strong { font-size: 15px; }
  .production-summary i { height: 21px; }
  .production-dashboard .machine-grid {
    width: calc(100% - 28px);
    margin: 0 auto;
    padding-top: 52px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .production-dashboard .machine-card { min-height: 158px; padding: 0 12px 11px; border-radius: 12px; grid-template-rows: 44px minmax(48px, 1fr) 1px 27px 6px; row-gap: 0; }
  .machine-card-head { width: calc(100% + 24px); margin: 0 -12px; padding: 0 9px; }
  .machine-number-badge { gap: 3px; padding: 5px 7px; border-radius: 8px; }
  .machine-number-badge strong { font-size: 18px; }
  .machine-number-badge span { font-size: 10px; }
  .production-dashboard .machine-state { gap: 6px; font-size: 12px; }
  .production-dashboard .machine-state b { width: 8px; height: 8px; }
  .machine-card-body { padding-top: 9px; }
  .production-dashboard .machine-product, .production-dashboard .machine-spec { margin-top: 0; font-size: 13px; }
  .production-dashboard .machine-spec { margin-top: 4px; }
  .machine-card-footer { min-height: 20px; font-size: 11px; }
  .machine-delivery.urgent { padding: 2px 5px; }
  .machine-progress-slot, .machine-progress-track { height: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .production-dashboard .machine-card,
  .topnav .nav-button,
  .main-nav .nav-button, .main-nav .mobile-nav-icon, .main-nav .nav-label-mobile { transition: none; }
}

/* One stable header footprint across all four workspaces. */
.workspace-header {
  box-sizing: border-box;
  width: 100%;
  height: 140px;
  min-height: 140px;
  margin: 0;
  padding: 0 max(42px, calc((100vw - 1360px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr);
  grid-template-rows: 1fr;
  align-items: center;
  align-content: center;
  gap: 54px;
  border: 0;
  border-radius: 0;
  text-align: left;
  background: radial-gradient(circle at 74% 18%, rgba(90,128,47,.2), transparent 34%), linear-gradient(135deg, var(--production-green-950), #18370f 72%);
  color: #fffdf7;
}
.production-hero { border-radius: 0; }
.workspace-header h2 { margin: 0; font-size: 44px; line-height: 1.1; letter-spacing: -.035em; color: #fffdf7; }
.workspace-header > .workspace-header-band {
  box-sizing: border-box;
  position: static;
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 66px;
  min-height: 66px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: linear-gradient(110deg, #ffb853, #ffad42);
  color: #193112;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 10px 26px rgba(6,20,5,.16);
}
.workspace-header > .workspace-header-band strong { text-align: center; margin: 0; }
.workspace-header > .quote-date-stamp { grid-template-columns: 1fr; }
@media (max-width: 800px) {
  .workspace-header {
    height: 140px;
    min-height: 140px;
    padding: 16px 14px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40px 56px;
    align-content: start;
    gap: 12px;
  }
  .workspace-header h2 { font-size: 34px; line-height: 40px; }
  .workspace-header > .workspace-header-band { height: 56px; min-height: 56px; margin: 0; padding: 0 12px; }
  .workspace-header > .workspace-header-band strong { font-size: 13px; line-height: 1.3; }
  .workspace-header > .workspace-header-band i { height: 20px; }
  .workspace-header > .quote-date-stamp strong { font-size: 20px; }
  .quotes-page > .quote-workspace, .quotes-page > .quote-history,
  .fulfillment-page > .section-title, .fulfillment-page > .back-button { margin-top: 24px; }
  .production-dashboard .machine-grid { padding-top: 24px; }
}

/* Orders: a product-first library, with a separate two-part entry workspace. */
.orders-page > .order-library, .orders-page > .order-entry-workspace { width: min(1360px, calc(100% - 84px)); margin: 26px auto 40px; }
.order-entry-trigger { width: 100%; border: 0; border-radius: 0; text-align: left; cursor: pointer; font: inherit; }
.order-entry-trigger:focus-visible, .order-overview-card:focus-visible { outline: 3px solid #dda15e; outline-offset: -3px; }
.order-library-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.order-library-heading h3, .order-entry-workspace > h3 { margin: 0; font-size: 20px; }
.order-overview-card { min-width: 0; padding: 20px 24px 16px; border: 1px solid #e7e2c8; border-radius: 16px; background: #fefae0; cursor: pointer; box-shadow: 0 2px 5px #28361805; }
.order-overview-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.order-overview-product { min-width: 0; }
.order-overview-product h3, .order-overview-product p { display: inline; margin: 0; font-size: 19px; line-height: 1.5; font-weight: 650; overflow-wrap: anywhere; }
.order-overview-product p { margin-left: 18px; }
.order-overview-product > small { display: block; margin-top: 4px; color: #72785f; font-size: 13px; }
.order-overview-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; max-width: 45%; }
.order-overview-status .status-pill { font-size: 12px; background: #e2ead5; color: #283618; white-space: nowrap; }
.order-overview-status .order-outsourcing-badge { color: #754215; background: #f4dfbd; }
.order-overview-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 18px 0 16px; }
.order-overview-numbers small { display: block; font-size: 12px; color: #74765f; margin-bottom: 4px; }
.order-overview-numbers strong { display: block; font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; }
.order-overview-numbers em { font-size: 12px; margin-left: 6px; font-style: normal; font-weight: 400; }
.order-overview-numbers .order-overview-date { font-size: 18px; padding-top: 6px; }
.order-overview-card .order-progress { margin: 0; }
.order-overview-card footer { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; color: #757764; font-size: 12px; overflow-wrap: anywhere; }
.order-entry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; align-items: stretch; }
.order-entry-card { min-width: 0; padding: 24px; border: 1px solid #e8e2cd; border-radius: 18px; }
.order-customer-card { background: #fdf9e9; }
.order-material-card { background: #f1f4e9; border-color: #dfe5d2; }
.order-entry-card h4 { font-size: 19px; margin: 0 0 22px; color: #283618; }
.order-entry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.order-entry-fields label { min-width: 0; font-size: 14px; font-weight: 550; }
.order-entry-fields input, .order-entry-fields select { width: 100%; min-width: 0; min-height: 46px; background: white; border-color: #d9ddcf; border-radius: 9px; margin-top: 7px; }
.order-field-wide { grid-column: 1 / -1; }
.order-price-summary { color: #697354; font-size: 13px; padding: 3px 0; }
.order-calculated-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid #d7dfc8; margin-top: 24px; padding-top: 20px; }
.order-calculated-results label { font-size: 12px; font-weight: 400; min-width: 0; color: #697354; }
.order-calculated-results input { padding: 7px 0 0; border: 0; background: transparent; box-shadow: none; font-size: 22px; color: #283618; font-weight: 650; width: 100%; min-width: 0; }
.order-entry-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.order-entry-actions .button-row { margin-left: auto; }
.order-entry-actions .form-error:empty { display: none; }
@media (max-width: 900px) {
  .order-entry-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .orders-page > .order-library, .orders-page > .order-entry-workspace { width: calc(100% - 28px); margin: 20px auto 28px; }
  .order-library-heading { gap: 12px; }
  .order-library-heading .order-filter { width: 100%; }
  .order-overview-card { padding: 16px; border-radius: 14px; }
  .order-overview-card > header { gap: 10px; }
  .order-overview-product h3, .order-overview-product p { display: block; font-size: 16px; }
  .order-overview-product p { margin: 2px 0 0; }
  .order-overview-status { max-width: 40%; gap: 5px; }
  .order-overview-status .status-pill { font-size: 11px; padding: 4px 7px; }
  .order-overview-numbers { gap: 8px; margin: 16px 0; }
  .order-overview-numbers strong { font-size: 22px; }
  .order-overview-numbers .order-overview-date { font-size: 13px; padding-top: 8px; white-space: nowrap; }
  .order-entry-card { padding: 18px 16px; border-radius: 14px; }
  .order-entry-fields { gap: 16px 12px; }
  .order-entry-fields label { font-size: 13px; }
  .order-entry-fields input, .order-entry-fields select { padding: 10px; font-size: 16px; }
  .order-calculated-results { gap: 8px; }
  .order-calculated-results label { font-size: 11px; }
  .order-entry-actions { flex-wrap: wrap; }
  .order-entry-actions .button-row { width: 100%; justify-content: flex-end; }
}

/* Secondary details stay compact; totals and save results remain visible. */
.history-disclosure { margin-top: 10px; }
.history-disclosure summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 10px; cursor: pointer; color: var(--green); border-radius: 8px; background: rgba(96,108,56,.05); font-size: 13px; list-style: none; }
.history-disclosure summary::-webkit-details-marker { display: none; }
.history-disclosure .history-hide, .history-disclosure[open] .history-show { display: none; }
.history-disclosure[open] .history-hide { display: inline; }
.disclosure-chevron { transition: transform 180ms ease; }
.history-disclosure[open] .disclosure-chevron { transform: rotate(180deg); }
.history-disclosure[open] .history-older { animation: history-appear 180ms ease-out; }
.report-mode-picker { display: flex; gap: 6px; padding: 4px; margin: 12px 0 16px; background: rgba(96,108,56,.08); border-radius: 12px; }
.report-mode-picker button { flex: 1; padding: 10px 6px; min-height: 44px; font-size: 13px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-soft); }
.report-mode-picker button[aria-pressed="true"] { background: var(--green); color: #fff; box-shadow: 0 2px 5px rgba(40,54,24,.12); }
.inline-form[hidden] { display: none !important; }
.save-status { color: var(--green); font-size: 13px; margin: 10px 0 0; }
.save-status:empty { display: none; }
.save-status.form-error { color: #a12620; }
.record-just-saved { background: #e6efdb; border-radius: 8px; animation: record-saved 2.5s ease-out forwards; }
@keyframes record-saved { from { background-color: #d8e9c9; } to { background-color: transparent; } }
@keyframes history-appear { from { opacity: .4; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .disclosure-chevron { transition: none; }
  .history-disclosure[open] .history-older, .record-just-saved { animation: none; }
}