:root {
  --ink: #101c2c;
  --ink-2: #26384f;
  --paper: #f4f0e7;
  --paper-2: #ebe5d9;
  --white: #fffef9;
  --blue: #1668e8;
  --cyan: #19b9d2;
  --signal: #f04c35;
  --amber: #f5ae2e;
  --green: #1b9b67;
  --purple: #7456bd;
  --line: rgba(16, 28, 44, .14);
  --shadow: 0 22px 60px rgba(28, 38, 52, .12);
  --display: "Bahnschrift", "DIN Alternate", "Microsoft YaHei UI", sans-serif;
  --body: "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--body); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.is-hidden { display: none !important; }

.ambient-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background:
    linear-gradient(rgba(20, 49, 79, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 49, 79, .045) 1px, transparent 1px);
  background-size: 42px 42px;
}
.ambient-grid::after {
  content: ""; position: absolute; width: 52vw; height: 52vw; right: -20vw; top: -28vw;
  border: 80px solid rgba(22, 104, 232, .045); border-radius: 50%;
}

.eyebrow { margin: 0 0 8px; color: var(--blue); font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.brand-stamp {
  width: 76px; height: 76px; display: grid; place-items: center; flex: 0 0 auto;
  color: white; background: var(--blue); border-radius: 18px 4px 18px 4px;
  font: 800 42px/1 var(--display); transform: skewX(-8deg); box-shadow: 10px 10px 0 var(--cyan);
}
.brand-stamp-small { width: 42px; height: 42px; border-radius: 10px 3px; font-size: 24px; box-shadow: 5px 5px 0 var(--cyan); }

.login-screen {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  align-items: center; gap: clamp(40px, 7vw, 120px); padding: clamp(32px, 7vw, 120px);
}
.login-brand { max-width: 720px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.login-brand h1 { margin: 10px 0 24px; font: 800 clamp(48px, 6.8vw, 104px)/.96 var(--display); letter-spacing: -.055em; }
.login-brand h1 span { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.login-intro { max-width: 600px; margin: 0; color: #526177; font-size: 17px; line-height: 1.8; }
.flow-ribbon {
  grid-column: 2; margin-top: 24px; display: flex; align-items: center; gap: 12px; color: var(--ink-2);
  font: 700 13px/1 var(--display); letter-spacing: .08em;
}
.flow-ribbon i { width: 54px; height: 2px; background: var(--line); position: relative; }
.flow-ribbon i::after { content: ""; position: absolute; right: 0; top: -3px; border-left: 6px solid var(--blue); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

.login-card {
  position: relative; background: rgba(255, 254, 249, .92); border: 1px solid rgba(16, 28, 44, .12);
  padding: clamp(28px, 4vw, 52px); box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.login-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(var(--blue), var(--cyan)); }
.login-card h2 { margin: 20px 0 30px; font: 800 29px/1.1 var(--display); }
.test-flag, .environment-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(27, 155, 103, .28); background: rgba(27, 155, 103, .08);
  padding: 8px 11px; color: #11714b; font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
.test-flag span, .environment-chip span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(27, 155, 103, .12); }
label { display: grid; gap: 9px; margin-bottom: 18px; color: #4a5a6f; font-size: 13px; font-weight: 700; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 3px;
  padding: 13px 14px; outline: none; transition: border-color .2s, box-shadow .2s, transform .2s;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(22, 104, 232, .1); }
.form-error { min-height: 20px; color: var(--signal); font-size: 13px; }
.demo-accounts { color: #68778a; font-size: 12px; line-height: 1.8; }
.demo-accounts summary { cursor: pointer; font-weight: 700; }

.button {
  border: 0; border-radius: 3px; padding: 12px 17px; font: 750 13px/1 var(--display); letter-spacing: .035em;
  transition: transform .18s, box-shadow .18s, background .18s; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { background: var(--ink); color: white; box-shadow: 6px 6px 0 var(--blue); }
.button-primary:hover { box-shadow: 9px 9px 0 var(--blue); }
.button-signal { background: var(--signal); color: white; }
.button-blue { background: var(--blue); color: white; }
.button-green { background: var(--green); color: white; }
.button-amber { background: var(--amber); color: var(--ink); }
.button-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.button-block { width: 100%; min-height: 48px; }
.button-small { padding: 9px 11px; font-size: 12px; }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
button:focus:not(:focus-visible) { outline: none; }
button:focus-visible { outline: 3px solid rgba(0,113,227,.28); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 20; padding: 24px 18px; display: flex; flex-direction: column;
  background: var(--ink); color: white; box-shadow: 8px 0 30px rgba(10, 20, 32, .15);
}
.sidebar-brand { display: flex; align-items: center; gap: 14px; padding: 0 8px 26px; }
.sidebar-brand strong { display: block; font: 800 19px/1.1 var(--display); letter-spacing: .1em; }
.sidebar-brand small { display: block; margin-top: 5px; color: #8da0b9; font-size: 11px; letter-spacing: .08em; }
.environment-chip { margin: 0 6px 24px; color: #94e8c2; border-color: rgba(148, 232, 194, .2); background: rgba(27, 155, 103, .12); }
.main-nav { display: grid; gap: 6px; overflow-y: auto; padding: 2px 0 16px; }
.nav-button {
  width: 100%; border: 0; background: transparent; color: #aebbd0; padding: 12px 13px; border-radius: 4px;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; text-align: left; font-weight: 700;
}
.nav-button:hover { color: white; background: rgba(255,255,255,.06); }
.nav-button.active { color: white; background: var(--blue); box-shadow: 5px 5px 0 rgba(25,185,210,.5); }
.nav-icon { font: 700 18px/1 var(--display); }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--signal); color: white; font-size: 10px; }
.sidebar-user { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 4px 0; display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; gap: 10px; }
.sidebar-user strong { display: block; font-size: 13px; }
.sidebar-user small { display: block; color: #8da0b9; margin-top: 3px; font-size: 11px; }
.user-avatar { width: 36px; height: 36px; display: grid; place-items: center; background: var(--cyan); color: var(--ink); font-weight: 900; border-radius: 50% 50% 12% 50%; }
.icon-button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); color: inherit; background: transparent; border-radius: 50%; font-size: 18px; }

.main-area { margin-left: 244px; min-height: 100vh; padding: 0 clamp(24px, 4vw, 64px) 64px; }
.topbar { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.topbar h2 { margin: 0; font: 800 clamp(26px, 3vw, 40px)/1 var(--display); letter-spacing: -.03em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.network-state { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; color: #557; font-size: 12px; font-weight: 700; }
.network-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(27,155,103,.12); }
.network-state.offline i { background: var(--signal); box-shadow: 0 0 0 5px rgba(240,76,53,.12); }
.refresh-button { color: var(--ink); border-color: var(--line); }
.mobile-logout-button { display: none; color: var(--ink); border-color: var(--line); }
.view-root { padding-top: 30px; animation: view-in .35s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 14px; }
.metric-card { min-height: 150px; padding: 20px; background: var(--white); border: 1px solid var(--line); position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; right: -24px; bottom: -30px; width: 92px; height: 92px; border: 18px solid rgba(22,104,232,.06); border-radius: 50%; }
.metric-card.signal { background: var(--signal); color: white; border-color: transparent; }
.metric-card.signal::after { border-color: rgba(255,255,255,.14); }
.metric-label { display: block; color: #68778b; font-size: 12px; font-weight: 700; }
.signal .metric-label { color: rgba(255,255,255,.76); }
.metric-value { display: block; margin-top: 22px; font: 800 43px/1 var(--display); letter-spacing: -.05em; }
.metric-unit { font-size: 13px; margin-left: 5px; font-weight: 700; }

.section-head { margin: 34px 0 17px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.section-head h3 { margin: 0; font: 800 21px/1.1 var(--display); }
.section-head p { margin: 6px 0 0; color: #6c7a8c; font-size: 13px; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 20px; }
.panel { background: var(--white); border: 1px solid var(--line); padding: 22px; box-shadow: 0 12px 32px rgba(26,42,61,.05); }
.panel-dark { background: var(--ink); color: white; }
.empty-state { padding: 52px 20px; text-align: center; color: #758398; border: 1px dashed var(--line); background: rgba(255,255,255,.4); }
.empty-state strong { display: block; margin-bottom: 8px; color: var(--ink); font: 800 20px/1 var(--display); }

.card-list { display: grid; gap: 14px; }
.demand-card, .task-card, .order-card, .message-card {
  background: var(--white); border: 1px solid var(--line); padding: 20px; position: relative; transition: transform .2s, box-shadow .2s;
}
.demand-card:hover, .task-card:hover, .order-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16,28,44,.08); }
.demand-card.rush, .task-card.rush { border-left: 6px solid var(--signal); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-top h4 { margin: 4px 0 0; font: 800 18px/1.2 var(--display); }
.card-meta { color: #748296; font-size: 12px; line-height: 1.7; }
.status-pill { white-space: nowrap; padding: 7px 10px; border-radius: 2px; color: var(--blue); background: rgba(22,104,232,.09); font-size: 11px; font-weight: 800; }
.status-pill.rush { color: white; background: var(--signal); }
.status-pill.progress { color: #0c7049; background: rgba(27,155,103,.12); }
.status-pill.wait { color: #9a6400; background: rgba(245,174,46,.17); }
.line-items { display: grid; gap: 8px; margin-top: 16px; }
.line-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; }
.line-item strong { font-family: var(--display); }
.line-item small { color: #6d7b8e; }
.card-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }

.task-card { display: grid; grid-template-columns: 86px 1fr auto; gap: 18px; align-items: center; }
.shoe-mark { width: 82px; height: 62px; position: relative; border-radius: 58% 42% 25% 60%; background: var(--blue); transform: skewX(-9deg) rotate(-4deg); box-shadow: inset -12px -10px 0 rgba(0,0,0,.12); }
.shoe-mark::after { content: ""; position: absolute; left: 9px; right: -4px; bottom: -7px; height: 12px; border-radius: 50%; background: var(--ink); opacity: .18; }
.shoe-2602 { border-radius: 48% 52% 26% 52%; background: var(--cyan); }
.shoe-2603 { border-radius: 70% 30% 22% 42%; background: var(--green); }
.shoe-2604 { border-radius: 58% 42% 18% 50%; background: var(--amber); }
.task-main h4 { margin: 2px 0 7px; font: 800 19px/1.15 var(--display); }
.task-main p { margin: 0; color: #6b7b8d; font-size: 13px; }
.task-qty { min-width: 90px; text-align: right; }
.task-qty strong { display: block; font: 800 34px/1 var(--display); }
.task-qty span { color: #6d7b8e; font-size: 11px; }
.task-card .card-actions { grid-column: 2 / 4; margin-top: 0; }

.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.product-card { background: var(--white); border: 1px solid var(--line); padding: 24px; overflow: hidden; position: relative; }
.product-code { font: 800 50px/1 var(--display); color: rgba(16,28,44,.08); position: absolute; right: 16px; top: 15px; }
.product-card h3 { margin: 12px 0 4px; font: 800 23px/1.15 var(--display); }
.color-row, .size-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chip { border: 1px solid var(--line); padding: 7px 9px; background: #faf8f2; color: #4d5b6e; font-size: 11px; font-weight: 700; }
.chip.color::before { content: ""; width: 8px; height: 8px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--blue); }
.product-card:nth-child(2) .chip.color::before { background: var(--cyan); }
.product-card:nth-child(3) .chip.color::before { background: var(--green); }
.product-card:nth-child(4) .chip.color::before { background: var(--amber); }

.data-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
.data-table th, .data-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 12px; }
.data-table th { color: #657488; background: #f0ece4; font: 750 11px/1 var(--display); letter-spacing: .05em; }
.data-table td strong { font-family: var(--display); }
.quantity-cell { font: 800 19px/1 var(--display); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
.form-grid .span-2 { grid-column: span 2; }
.item-builder { padding: 18px; margin: 8px 0 18px; background: #eeebe3; border: 1px solid var(--line); }
.builder-grid { display: grid; grid-template-columns: 1.1fr 1fr .75fr .55fr .55fr; gap: 10px; align-items: end; }
.builder-grid label { margin: 0; }
.draft-list { display: grid; gap: 8px; margin: 12px 0 20px; }
.draft-item { padding: 12px; background: var(--white); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; font-size: 13px; }
.draft-item button { border: 0; background: transparent; color: var(--signal); font-weight: 800; }

.message-card { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: start; }
.message-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #b6c0cc; }
.message-card.unread .message-dot { background: var(--blue); box-shadow: 0 0 0 5px rgba(22,104,232,.1); }
.message-card.high .message-dot { background: var(--signal); box-shadow: 0 0 0 5px rgba(240,76,53,.1); }
.message-card h4 { margin: 0 0 6px; font: 800 15px/1.2 var(--display); }
.message-card p { margin: 0; color: #657489; font-size: 12px; line-height: 1.6; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9,18,30,.68); backdrop-filter: blur(5px); }
.modal-panel { position: relative; z-index: 1; width: min(580px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--paper); padding: 32px; box-shadow: 16px 16px 0 rgba(22,104,232,.35); animation: modal-in .22s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modal-panel h3 { margin: 8px 0 24px; font: 800 26px/1.1 var(--display); }
.modal-close { position: absolute; right: 18px; top: 14px; border: 0; background: transparent; font-size: 28px; color: #68778b; }
.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: grid; gap: 10px; width: min(360px, calc(100vw - 40px)); }
.toast { background: var(--ink); color: white; padding: 15px 17px; box-shadow: 8px 8px 0 rgba(22,104,232,.35); animation: toast-in .25s ease both; }
.toast.error { background: var(--signal); box-shadow: 8px 8px 0 rgba(16,28,44,.25); }
.toast strong { display: block; margin-bottom: 4px; font-family: var(--display); }
.toast span { color: rgba(255,255,255,.76); font-size: 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }
.loading { min-height: 240px; display: grid; place-items: center; color: #6e7c8e; }
.loading::before { content: ""; width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; margin-right: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .builder-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  body { padding-bottom: 74px; }
  .login-screen { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
  .login-brand { grid-template-columns: 54px 1fr; gap: 18px; }
  .login-brand .brand-stamp { width: 54px; height: 54px; font-size: 30px; box-shadow: 6px 6px 0 var(--cyan); }
  .login-brand h1 { font-size: clamp(42px, 13vw, 68px); }
  .login-intro { font-size: 14px; }
  .flow-ribbon { grid-column: 1 / 3; gap: 7px; overflow: hidden; }
  .flow-ribbon i { flex: 1; min-width: 18px; }
  .login-card { padding: 26px 22px; }

  .sidebar { inset: auto 0 0 0; width: auto; height: 70px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); flex-direction: row; align-items: center; }
  .sidebar-brand, .environment-chip, .sidebar-user { display: none; }
  .main-nav { width: 100%; grid-auto-flow: column; grid-auto-columns: 1fr; display: grid; gap: 2px; overflow-x: auto; padding: 0; }
  .main-nav { scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-button { min-width: 66px; grid-template-columns: 1fr; justify-items: center; gap: 3px; padding: 7px 4px; font-size: 9px; }
  .nav-icon { font-size: 17px; }
  .nav-badge { position: absolute; margin: -18px 0 0 26px; }
  .main-area { margin-left: 0; padding: 0 14px 24px; }
  .topbar { min-height: 88px; align-items: center; }
  .topbar h2 { font-size: 27px; }
  .topbar .eyebrow { display: none; }
  .topbar-actions { gap: 4px; }
  .network-state { font-size: 0; padding: 8px; }
  .network-state i { margin: 0; }
  #install-button { padding: 9px; font-size: 0; }
  #install-button::after { content: "安装"; font-size: 11px; }
  .mobile-logout-button { display: inline-grid; place-items: center; }
  .view-root { padding-top: 18px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .metric-card { min-height: 108px; padding: 14px; }
  .metric-value { margin-top: 14px; font-size: 34px; }
  .split-layout, .catalog-grid { grid-template-columns: 1fr; }
  .section-head { margin-top: 25px; align-items: center; }
  .task-card { grid-template-columns: 62px 1fr; gap: 13px; padding: 15px; }
  .shoe-mark { width: 60px; height: 46px; }
  .task-qty { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 5px; }
  .task-qty strong { font-size: 27px; }
  .task-card .card-actions { grid-column: 1 / 3; }
  .line-item { grid-template-columns: 60px 1fr; }
  .line-item > :last-child { grid-column: 2; }
  .form-grid, .builder-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .builder-grid { gap: 12px; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  .modal { align-items: end; padding: 0; }
  .modal-panel { width: 100%; max-height: 90vh; padding: 26px 18px calc(26px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 0 rgba(22,104,232,.35); }
}
/* Native fallback keeps protected screens hidden even if a browser applies stale styles. */
[hidden] { display: none !important; }

/* 2026-08 requirements: image-first SKU selection and explicit stock authority. */
.section-head.first { margin-top: 0; }
.check-line { display: flex; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; }
.check-line input { width: 18px; height: 18px; }
.color-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; margin: 18px 0; }
.color-choice { position: relative; margin: 0; padding: 8px; border: 2px solid transparent; background: var(--white); cursor: pointer; }
.color-choice:has(input:checked) { border-color: var(--blue); box-shadow: 5px 5px 0 rgba(22,104,232,.16); }
.color-choice input { position: absolute; width: 18px; height: 18px; top: 14px; left: 14px; z-index: 2; }
.color-choice strong,.color-choice small { display: block; padding: 8px 3px 0; }
.color-choice small { padding-top: 3px; color: #758398; }
.product-photo { display: grid; place-items: center; height: 118px; overflow: hidden; background: #e7e5df; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.custom-choice .product-photo b { color: var(--blue); font-size: 44px; font-weight: 400; }
.custom-box { padding: 14px; margin-bottom: 14px; border: 1px dashed var(--blue); background: rgba(22,104,232,.05); }
.draft-item { grid-template-columns: 74px 1fr auto; }
.draft-item img { width: 70px; height: 52px; object-fit: contain; background: #eeeae2; }
.draft-item small { display: block; margin-top: 5px; color: #68778b; }
.line-item.with-photo { grid-template-columns: 62px 1fr auto; }
.line-item.with-photo img { width: 58px; height: 46px; object-fit: contain; background: #eeeae2; }
.line-item span small { display: block; margin-top: 3px; }
.product-color-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 10px; margin-top: 20px; }
.product-color-grid figure { margin: 0; border: 1px solid var(--line); background: #f3f0e9; }
.product-color-grid img { display: block; width: 100%; height: 112px; object-fit: contain; mix-blend-mode: multiply; }
.product-color-grid figcaption { display: grid; padding: 9px; font-size: 12px; }
.product-color-grid figcaption small { color: #748296; margin-top: 3px; }
.inventory-grid { display: grid; gap: 12px; }
.inventory-card { display: grid; grid-template-columns: 100px minmax(180px,1fr) auto; gap: 16px; align-items: center; padding: 15px; border: 1px solid var(--line); background: var(--white); }
.inventory-card > img { width: 96px; height: 72px; object-fit: contain; background: #f1eee7; }
.inventory-card h4 { margin: 0; font: 800 17px/1.2 var(--display); }
.stock-numbers { display: grid; grid-template-columns: repeat(3,76px); gap: 6px; text-align: center; }
.stock-numbers span { padding: 9px 5px; color: #68778b; background: #f0ede6; font-size: 11px; }
.stock-numbers strong { display: block; margin-top: 4px; color: var(--ink); font: 800 25px/1 var(--display); }
.stock-numbers .available { background: rgba(27,155,103,.12); color: #11714b; }
.inventory-search-panel { overflow: hidden; margin-bottom: 24px; border: 1px solid rgba(0,0,0,.07); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 14px 44px rgba(0,0,0,.055); }
.inventory-search-panel form { display: grid; grid-template-columns: minmax(210px,1.15fr) minmax(170px,.85fr) 24px minmax(150px,.75fr) minmax(150px,.72fr) auto; gap: 12px; align-items: end; padding: 22px 24px; }
.inventory-search-panel label { min-width: 0; margin: 0; }
.inventory-search-panel select { min-height: 48px; margin-top: 7px; border-radius: 12px; background-color: #f7f7f9; }
.inventory-query-or { align-self: center; padding-top: 21px; color: #a1a1a6; font-size: 10px; font-weight: 800; text-align: center; }
.inventory-stock-only { min-height: 48px; display: flex !important; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: #f7f7f9; cursor: pointer; }
.inventory-stock-only input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.inventory-stock-only span { min-width: 0; display: grid; gap: 2px; }
.inventory-stock-only strong { color: #343438; font-size: 10px; }
.inventory-stock-only small { color: #8a8a8f; font-size: 8px; white-space: nowrap; }
.inventory-search-actions { display: flex; gap: 7px; }
.inventory-search-actions .button { min-height: 48px; white-space: nowrap; }
.inventory-search-guide { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 13px 24px; border-top: 1px solid var(--line); background: linear-gradient(90deg,#f8fbff,#f7f7fa); }
.inventory-search-guide > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #0066cc; background: rgba(0,113,227,.10); font-size: 8px; font-weight: 800; }
.inventory-search-guide p { display: grid; gap: 2px; margin: 0; }
.inventory-search-guide strong { color: #454549; font-size: 10px; }
.inventory-search-guide small { color: #89898e; font-size: 8px; }
.inventory-search-guide i { width: 34px; height: 1px; background: #d9dce1; }
.inventory-warehouse-overview { display: grid; gap: 12px; margin: 0 0 22px; }
.inventory-warehouse-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 2px; }
.inventory-warehouse-heading h3 { margin: 3px 0 0; font: 760 21px/1.15 var(--display); }
.inventory-warehouse-heading > small { color: #85858a; font-size: 9px; }
.inventory-warehouse-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.inventory-warehouse-tab { position: relative; min-width: 0; display: grid; gap: 4px; min-height: 112px; padding: 14px 15px; overflow: hidden; text-align: left; border: 1px solid rgba(0,0,0,.07); border-radius: 17px; color: #343438; background: rgba(255,255,255,.94); box-shadow: 0 7px 24px rgba(0,0,0,.035); cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.inventory-warehouse-tab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.inventory-warehouse-tab > span { font-size: 12px; font-weight: 800; }
.inventory-warehouse-tab > strong { font: 780 28px/1 var(--display); letter-spacing: -.035em; }
.inventory-warehouse-tab > strong small { margin-left: 3px; font: 700 9px/1 var(--sans); letter-spacing: 0; }
.inventory-warehouse-tab > small { overflow: hidden; color: #85858a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-warehouse-tab > em { overflow: hidden; color: #6e6e73; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.inventory-warehouse-tab.active { border-color: currentColor; box-shadow: 0 0 0 3px rgba(0,113,227,.09),0 10px 30px rgba(0,0,0,.055); }
.inventory-warehouse-tab.finished { color: #18764b; background: linear-gradient(145deg,#fff,rgba(36,138,91,.075)); }
.inventory-warehouse-tab.defective { color: #9a6500; background: linear-gradient(145deg,#fff,rgba(255,159,10,.085)); }
.inventory-warehouse-tab.semi { color: #0066cc; background: linear-gradient(145deg,#fff,rgba(0,113,227,.075)); }
.inventory-warehouse-tab.scrap { color: #c52d23; background: linear-gradient(145deg,#fff,rgba(255,69,58,.075)); }
.inventory-warehouse-tab > small,.inventory-warehouse-tab > em { color: #73747a; }
.inventory-query-empty { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 28px; border: 1px dashed #d6d8dd; border-radius: 20px; color: #8a8a8f; background: rgba(255,255,255,.48); }
.inventory-query-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #0071e3; background: rgba(0,113,227,.08); font: 500 30px/1 var(--display); }
.inventory-query-empty h4 { margin: 0 0 5px; color: #343438; font: 750 17px/1.2 var(--display); }
.inventory-query-empty p { max-width: 520px; margin: 0; color: #85858a; font-size: 10px; line-height: 1.6; }
.inventory-result-section { display: grid; gap: 14px; }
.inventory-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 2px 2px; }
.inventory-result-head h3 { margin: 4px 0 6px; font: 760 24px/1.15 var(--display); }
.inventory-result-head p:last-child { margin: 0; color: #85858a; font-size: 10px; }
.inventory-total { flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; color: #18764b; background: rgba(36,138,91,.10); font-size: 11px; font-weight: 800; }
.inventory-total.zero { color: #7c7c81; background: #eeeef2; }
.inventory-query-list { display: grid; gap: 8px; }
.inventory-matrix-scroll { overflow-x: auto; border: 1px solid rgba(0,0,0,.07); border-radius: 17px; background: white; box-shadow: 0 8px 28px rgba(0,0,0,.04); -webkit-overflow-scrolling: touch; }
.inventory-matrix { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.inventory-matrix th,.inventory-matrix td { height: 64px; padding: 8px; border-right: 1px solid #ececf0; border-bottom: 1px solid #ececf0; text-align: center; }
.inventory-matrix tr:last-child th,.inventory-matrix tr:last-child td { border-bottom: 0; }
.inventory-matrix th:last-child,.inventory-matrix td:last-child { border-right: 0; }
.inventory-matrix thead th { height: 42px; color: #7f7f84; background: #f5f5f7; font-size: 9px; font-weight: 750; }
.inventory-matrix thead th:first-child { width: 174px; text-align: left; }
.inventory-matrix thead th:last-child { width: 74px; }
.inventory-matrix thead small { display: block; margin-top: 2px; color: #a0a0a5; font-size: 7px; }
.inventory-matrix tbody th { display: flex; align-items: center; gap: 10px; text-align: left; background: #fbfbfd; }
.inventory-matrix tbody th img { width: 48px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: 9px; background: white; }
.inventory-matrix tbody th span { overflow: hidden; color: #343438; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-matrix td { color: #a1a1a6; background: white; }
.inventory-matrix td strong { font: 760 17px/1 var(--display); }
.inventory-matrix td small { display: block; margin-top: 3px; font-size: 7px; }
.inventory-matrix td.has-stock { color: #18764b; background: rgba(36,138,91,.055); }
.inventory-matrix td.has-stock strong { color: #18764b; }
.inventory-matrix td.zero strong { color: #b5b5ba; font-size: 13px; }
.inventory-matrix td.row-total { color: #0066cc; background: rgba(0,113,227,.06); }
.inventory-matrix td.row-total strong { color: #0066cc; }
.inventory-query-row { overflow: hidden; border: 1px solid rgba(0,0,0,.07); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 7px 24px rgba(0,0,0,.035); }
.inventory-query-row.zero-stock { opacity: .70; box-shadow: none; }
.inventory-query-row > summary { display: grid; grid-template-columns: 70px minmax(220px,1fr) auto 22px; gap: 14px; align-items: center; min-height: 88px; padding: 10px 16px; cursor: pointer; list-style: none; }
.inventory-query-row > summary::-webkit-details-marker { display: none; }
.inventory-query-row > summary img { width: 66px; height: 62px; object-fit: contain; border: 1px solid var(--line); border-radius: 11px; background: #f5f5f7; }
.inventory-query-name { min-width: 0; display: grid; gap: 5px; }
.inventory-query-name strong { overflow: hidden; color: #242428; font: 750 16px/1.2 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.inventory-query-name small { overflow: hidden; color: #85858a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-query-numbers { display: grid; grid-template-columns: repeat(3,minmax(68px,auto)); gap: 7px; }
.inventory-query-numbers > i,.inventory-query-numbers > strong { display: grid; gap: 3px; min-width: 72px; padding: 8px 10px; border-radius: 10px; color: #838388; background: #f5f5f7; font-size: 8px; font-style: normal; font-weight: 600; }
.inventory-query-numbers b { color: #343438; font-size: 15px; }
.inventory-query-numbers > strong { color: #18764b; background: rgba(36,138,91,.09); }
.inventory-query-numbers > strong b { color: #18764b; }
.inventory-query-row > summary > em { color: #8e8e93; font: 800 19px/1 var(--display); font-style: normal; transition: transform .2s ease; }
.inventory-query-row[open] > summary > em { transform: rotate(180deg); }
.inventory-lot-detail { display: grid; gap: 5px; padding: 13px 16px 16px 100px; border-top: 1px solid var(--line); background: #fafafd; }
.inventory-lot-detail h5 { margin: 0 0 5px; color: #77777c; font-size: 9px; }
.inventory-lot-detail > span { display: grid; grid-template-columns: minmax(110px,1fr) minmax(80px,.6fr) 90px 90px 110px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: white; font-size: 9px; }
.inventory-lot-detail small,.inventory-lot-detail i { color: #818187; font-style: normal; }
.inventory-lot-detail strong { color: #18764b; text-align: right; }
.inventory-lot-detail > p { margin: 0; color: #929297; font-size: 10px; }
.admin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.admin-grid .panel h3 { margin-top: 0; }
.preview-scroll { max-width: 100%; overflow: auto; margin: 14px 0; }
.danger-text { color: var(--signal) !important; }
.material-entry { margin-top: 14px; padding: 14px; border-left: 4px solid var(--cyan); background: rgba(25,185,210,.07); }
.material-text { color: #416b75 !important; font-weight: 700; }
.task-product-photo { width: 86px; height: 72px; display: grid; place-items: center; overflow: hidden; background: #ece9e1; border: 1px solid var(--line); }
.task-product-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.task-product-photo span { color: #8490a0; font-size: 10px; }
.order-product-row { grid-template-columns: 72px 1fr auto; }
.order-product-row > img { width: 68px; height: 54px; object-fit: contain; background: #ece9e1; mix-blend-mode: multiply; }
.order-product-row > div { display: grid; justify-items: end; gap: 7px; }
.order-product-row > .production-progress { grid-column: 1 / -1; display: block; width: 100%; margin-top: 8px; padding: 14px 15px 13px; border: 1px solid rgba(0,113,227,.10); border-radius: 16px; background: linear-gradient(145deg,#f8fbff,#f3f5f8); }
.production-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.production-progress-head strong { color: #0065c9; font-size: 13px; letter-spacing: -.01em; }
.production-progress-head small { color: #7c8490; font-size: 11px; font-weight: 800; }
.production-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #dfe3e9; }
.production-progress-track i { display: block; width: var(--stage-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0071e3,#36a8e8); box-shadow: 0 0 14px rgba(0,113,227,.25); transition: width .35s ease; }
.production-progress-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.production-progress-steps span { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 5px; align-items: center; color: #9a9da4; font-size: 10px; line-height: 1.25; }
.production-progress-steps span > i { width: 7px; height: 7px; border-radius: 50%; background: #c8ccd2; }
.production-progress-steps span > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.production-progress-steps span.done { color: #21865d; }
.production-progress-steps span.done > i { background: #22a06b; }
.production-progress-steps span.active { color: #0065c9; font-weight: 900; }
.production-progress-steps span.active > i { background: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.lifecycle-progress { margin-top: 17px; padding: 15px 16px 14px; border: 1px solid rgba(0,113,227,.10); border-radius: 16px; background: linear-gradient(145deg,#f9fbfe,#f3f6f9); }
.order-product-row > .lifecycle-progress { grid-column: 1 / -1; display: block; width: 100%; justify-items: stretch; }
.lifecycle-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lifecycle-progress-head strong { color: #0065c9; font-size: 13px; line-height: 1.45; }
.lifecycle-progress-head small { flex: 0 0 auto; color: #7c8490; font-size: 11px; font-weight: 800; }
.lifecycle-progress-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; }
.lifecycle-progress-steps span { position: relative; display: grid; justify-items: center; gap: 6px; color: #a0a4aa; font-size: 9px; line-height: 1.25; text-align: center; }
.lifecycle-progress-steps span::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: #dfe3e8; }
.lifecycle-progress-steps span:first-child::before { display: none; }
.lifecycle-progress-steps span > i { position: relative; z-index: 1; width: 11px; height: 11px; border: 2px solid #cbd0d6; border-radius: 50%; background: white; }
.lifecycle-progress-steps span > b { font-weight: 700; }
.lifecycle-progress-steps span.done { color: #21865d; }
.lifecycle-progress-steps span.done::before,.lifecycle-progress-steps span.active::before { background: #34a36f; }
.lifecycle-progress-steps span.done > i { border-color: #34a36f; background: #34a36f; }
.lifecycle-progress-steps span.active { color: #0065c9; font-weight: 900; }
.lifecycle-progress-steps span.active > i { border-color: #0071e3; background: white; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.material-edit,.message-detail-link { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.message-detail-link { margin-top: 8px; }
.message-product-summary { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; color: #333b45; background: rgba(0,113,227,.06); font-size: 12px; line-height: 1.55; }
.message-product-summary b { color: #0065c9; font-size: 10px; letter-spacing: .08em; }
.message-time { display: block; margin-top: 8px; color: #8a8d93; }
.notice-detail { padding: 18px; border-left: 5px solid var(--blue); background: var(--white); }
.notice-detail p { margin: 0 0 14px; white-space: pre-wrap; font-size: 15px; line-height: 1.8; }
.notice-detail small { color: #748296; }
.damage-check { display: inline-flex; grid-template-columns: 18px auto; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border: 1px solid rgba(240,76,53,.45); color: #b62f20; background: rgba(240,76,53,.06); cursor: pointer; }
.damage-check input { width: 17px; height: 17px; accent-color: var(--signal); }
.report-progress { display: inline-block; margin-top: 8px !important; padding: 6px 9px; color: #536579 !important; background: #eeeae2; font-size: 11px !important; font-weight: 700; }
.damage-totals { margin-top: 7px !important; color: #b62f20 !important; font-size: 11px !important; font-weight: 800; }
.report-context { display: grid; grid-template-columns: 118px 1fr; gap: 16px; align-items: center; margin: -5px 0 22px; padding: 14px; border: 1px solid var(--line); background: var(--white); }
.report-context.damage { border-left: 6px solid var(--signal); }
.report-context img { width: 112px; height: 86px; object-fit: contain; background: #ece9e1; mix-blend-mode: multiply; }
.report-context h4 { margin: 4px 0 7px; font: 800 17px/1.2 var(--display); }
.report-context p { margin: 0; color: #607084; font-size: 12px; line-height: 1.7; }
.damage-unit { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.damage-unit legend { grid-column: 1/-1; margin-bottom: 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
.damage-unit label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.damage-unit label:has(input:checked) { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: rgba(240,76,53,.05); }
.damage-unit input { width: 18px; height: 18px; margin: 0; accent-color: var(--signal); }
.damage-unit span { display: grid; gap: 2px; }
.damage-unit strong { color: var(--ink); font-size: 14px; }
.damage-unit small { color: #748296; font-size: 11px; line-height: 1.35; }

@media (max-width: 820px) {
  .color-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-photo { height: 100px; }
  .admin-grid { grid-template-columns: 1fr; }
  .inventory-card { grid-template-columns: 72px 1fr; }
  .inventory-card > img { width: 68px; height: 56px; }
  .stock-numbers { grid-column: 1 / 3; grid-template-columns: repeat(3,1fr); }
  .line-item.with-photo { grid-template-columns: 54px 1fr; }
  .line-item.with-photo > :last-child { grid-column: 2; }
  .task-product-photo { width: 62px; height: 54px; }
  .order-product-row { grid-template-columns: 58px 1fr; }
  .order-product-row > img { width: 54px; height: 46px; }
  .order-product-row > div { grid-column: 2; justify-items: start; }
  .order-product-row > .production-progress { grid-column: 1 / -1; padding: 13px 12px 12px; }
  .order-product-row > .lifecycle-progress { grid-column: 1 / -1; padding: 13px 10px 12px; }
  .production-progress-steps { gap: 3px; }
  .production-progress-steps span { display: block; text-align: center; font-size: 9px; }
  .production-progress-steps span > i { display: block; margin: 0 auto 5px; }
  .lifecycle-progress { padding: 13px 10px 12px; }
  .lifecycle-progress-head { margin-bottom: 13px; }
  .lifecycle-progress-head strong { font-size: 12px; }
  .lifecycle-progress-steps span { gap: 5px; font-size: 8px; }
  .lifecycle-progress-steps span > b { max-width: 54px; }
  .report-context { grid-template-columns: 82px 1fr; }
  .report-context img { width: 78px; height: 64px; }
  .damage-unit { grid-template-columns: 1fr; }
}

/* 2026-08-25 refined light interface: calm, precise and production-first. */
:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --paper: #f5f5f7;
  --paper-2: #e8e8ed;
  --white: #ffffff;
  --blue: #0071e3;
  --cyan: #5ac8fa;
  --signal: #ff453a;
  --amber: #ff9f0a;
  --green: #248a5b;
  --purple: #5856d6;
  --line: rgba(0, 0, 0, .075);
  --line-strong: rgba(0, 0, 0, .13);
  --shadow: 0 24px 70px rgba(0, 0, 0, .10);
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, .055);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", sans-serif;
}

html { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--paper); line-height: 1.5; }
::selection { color: white; background: var(--blue); }
.ambient-grid {
  background:
    radial-gradient(circle at 8% 12%, rgba(90, 200, 250, .15), transparent 28%),
    radial-gradient(circle at 84% 4%, rgba(0, 113, 227, .10), transparent 32%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 65%, #eeeeF2 100%);
}
.ambient-grid::after { width: 480px; height: 480px; right: -220px; top: -260px; border: 1px solid rgba(0, 113, 227, .12); }
.eyebrow { margin-bottom: 10px; color: var(--blue); font: 700 11px/1 var(--display); letter-spacing: .17em; }

.brand-stamp {
  width: 58px; height: 58px; color: white; border-radius: 17px; transform: none;
  background: linear-gradient(145deg, #1494ff 0%, #0066d6 100%);
  box-shadow: 0 12px 28px rgba(0, 113, 227, .24), inset 0 1px rgba(255,255,255,.35);
  font: 700 30px/1 var(--display);
}
.brand-stamp-small { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 7px 18px rgba(0, 113, 227, .22); font-size: 21px; }

.login-screen {
  width: min(100%, 1540px); min-height: 100vh; margin: auto;
  grid-template-columns: minmax(0, 1.35fr) minmax(350px, .65fr);
  gap: clamp(42px, 7vw, 108px); padding: clamp(34px, 5.8vw, 92px);
}
.login-brand { max-width: 820px; display: flex; flex-direction: column; gap: 0; }
.login-wordmark { display: flex; align-items: center; gap: 15px; margin-bottom: clamp(52px, 8vh, 94px); }
.login-wordmark strong { display: block; color: var(--ink); font-size: 18px; letter-spacing: .08em; }
.login-wordmark span { display: block; margin-top: 2px; color: #86868b; font-size: 11px; letter-spacing: .08em; }
.login-copy h1 { margin: 14px 0 24px; font: 700 clamp(52px, 6.2vw, 92px)/.98 var(--display); letter-spacing: -.065em; }
.login-copy h1 span { color: #86868b; -webkit-text-stroke: 0; }
.login-intro { max-width: 660px; color: #6e6e73; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.75; }
.process-flow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: clamp(40px, 7vh, 72px) 0 0; padding: 0; list-style: none;
}
.process-flow li {
  min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid rgba(255,255,255,.9); border-radius: 17px;
  background: rgba(255,255,255,.68); box-shadow: 0 8px 25px rgba(0,0,0,.035);
}
.process-flow b { color: #a1a1a6; font: 650 11px/1 var(--display); }
.process-flow span { min-width: 0; display: grid; gap: 3px; }
.process-flow strong { color: var(--ink); font-size: 13px; white-space: nowrap; }
.process-flow small { overflow: hidden; color: #86868b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.login-card {
  padding: clamp(30px, 3.5vw, 48px); border: 1px solid rgba(255,255,255,.9); border-radius: 28px;
  background: rgba(255,255,255,.82); box-shadow: 0 30px 80px rgba(0,0,0,.12);
  backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%);
}
.login-card::before { display: none; }
.login-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-card-head p { margin: 0; color: #a1a1a6; font-size: 10px; }
.login-card h2 { margin: 38px 0 8px; font: 700 31px/1.1 var(--display); letter-spacing: -.025em; }
.login-card-intro { margin: 0 0 30px; color: #86868b; font-size: 13px; }
.test-flag, .environment-chip {
  border: 0; border-radius: 999px; padding: 7px 11px; color: #1d7a4d; background: rgba(36,138,91,.09);
  font-size: 10px; font-weight: 650; letter-spacing: .01em;
}
.test-flag span, .environment-chip span { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(36,138,91,.10); }
.login-card label { margin-bottom: 17px; }
.demo-accounts { margin-top: 20px; color: #86868b; }
.demo-accounts summary { width: fit-content; }

label { gap: 8px; color: #55555a; font-size: 12px; font-weight: 600; }
input, select, textarea {
  min-height: 46px; border-color: var(--line-strong); border-radius: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.96); transition: border-color .16s, box-shadow .16s, background .16s;
}
textarea { min-height: 92px; }
input:hover, select:hover, textarea:hover { border-color: rgba(0,0,0,.22); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.11); background: white; }

.button {
  min-height: 42px; border-radius: 12px; padding: 11px 17px; font: 650 12px/1 var(--display);
  letter-spacing: 0; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(.98); }
.button-primary, .button-blue { color: white; background: var(--blue); box-shadow: 0 8px 18px rgba(0,113,227,.20); }
.button-primary:hover { box-shadow: 0 10px 22px rgba(0,113,227,.24); }
.button-green { box-shadow: 0 7px 16px rgba(36,138,91,.17); }
.button-signal { box-shadow: 0 7px 16px rgba(255,69,58,.17); }
.button-amber { color: #7a4b00; background: rgba(255,159,10,.16); }
.button-ghost { color: #3a3a3c; border: 1px solid var(--line-strong); background: rgba(255,255,255,.68); }
.button-block { min-height: 50px; }
.button-small { min-height: 34px; padding: 8px 12px; }

.sidebar {
  width: 236px; padding: 22px 14px; color: var(--ink);
  border-right: 1px solid var(--line); background: rgba(248,248,250,.88);
  box-shadow: none; backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
}
.sidebar-brand { padding: 0 10px 24px; }
.sidebar-brand strong { color: var(--ink); font-size: 17px; letter-spacing: .05em; }
.sidebar-brand small { color: #86868b; letter-spacing: .04em; }
.environment-chip { margin: 0 7px 20px; align-self: flex-start; }
.main-nav { gap: 3px; padding-right: 2px; scrollbar-color: #d1d1d6 transparent; }
.main-nav::-webkit-scrollbar { width: 4px; height: 4px; }
.main-nav::-webkit-scrollbar-track { background: transparent; }
.main-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: #d1d1d6; }
.nav-button {
  grid-template-columns: 28px 1fr auto; gap: 8px; padding: 10px 12px; border-radius: 10px;
  color: #6e6e73; font-size: 12px; font-weight: 600; transition: color .14s, background .14s;
}
.nav-button:hover { color: var(--ink); background: rgba(0,0,0,.035); }
.nav-button.active { color: #0066cc; background: rgba(0,113,227,.10); box-shadow: none; }
.nav-icon { color: #a1a1a6; font-size: 12px; font-variant-numeric: tabular-nums; }
.nav-button.active .nav-icon { color: var(--blue); }
.nav-badge { background: var(--signal); box-shadow: 0 3px 8px rgba(255,69,58,.24); }
.sidebar-user { border-top-color: var(--line); padding: 17px 7px 0; }
.sidebar-user strong { color: var(--ink); }
.sidebar-user small { color: #86868b; }
.user-avatar { border-radius: 12px; color: #0066cc; background: rgba(0,113,227,.12); }
.icon-button { border-color: var(--line-strong); color: #6e6e73; background: rgba(255,255,255,.55); transition: background .15s, transform .15s; }
.icon-button:hover { background: white; transform: translateY(-1px); }

.main-area { margin-left: 236px; padding: 0 clamp(24px, 4.2vw, 68px) 64px; }
.topbar {
  position: sticky; top: 0; z-index: 15; min-height: 108px; border-bottom-color: var(--line);
  background: rgba(245,245,247,.78); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.topbar h2 { font: 700 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -.035em; }
.network-state { color: #6e6e73; font-weight: 600; }
.network-state i { width: 7px; height: 7px; box-shadow: 0 0 0 4px rgba(36,138,91,.10); }
.view-root { position: relative; padding-top: 32px; animation: none; transition: opacity .14s ease; }
.view-root.is-refreshing { opacity: .68; pointer-events: none; }

.metric-grid { gap: 12px; }
.metric-card {
  min-height: 132px; padding: 20px; border: 1px solid rgba(255,255,255,.85); border-radius: 18px;
  background: rgba(255,255,255,.78); box-shadow: var(--shadow-soft);
}
.metric-card::after { right: -30px; bottom: -38px; width: 90px; height: 90px; border: 14px solid rgba(0,113,227,.035); }
.metric-card.signal { color: #b42318; border-color: rgba(255,69,58,.14); background: rgba(255,69,58,.075); }
.metric-card.signal::after { border-color: rgba(255,69,58,.06); }
.metric-label, .signal .metric-label { color: #86868b; font-size: 11px; font-weight: 600; }
.metric-value { margin-top: 18px; font-size: 39px; letter-spacing: -.045em; }

.section-head { margin: 34px 0 16px; }
.section-head h3 { font: 700 20px/1.15 var(--display); letter-spacing: -.015em; }
.section-head p { color: #86868b; line-height: 1.6; }
.split-layout { gap: 18px; }
.panel, .demand-card, .task-card, .order-card, .message-card, .inventory-card, .product-card {
  border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: rgba(255,255,255,.84);
  box-shadow: var(--shadow-soft);
}
.panel { padding: 24px; }
.panel-dark { color: white; background: #1d1d1f; }
.demand-card, .task-card, .order-card, .message-card, .inventory-card, .product-card {
  content-visibility: auto; contain-intrinsic-size: auto 170px;
}
.demand-card, .task-card, .order-card, .message-card { padding: 20px; transition: transform .16s, box-shadow .16s; }
.demand-card:hover, .task-card:hover, .order-card:hover { transform: translateY(-1px); box-shadow: 0 13px 34px rgba(0,0,0,.075); }
.demand-card.rush, .task-card.rush { border-left: 4px solid var(--signal); }
.card-top h4 { font-size: 17px; letter-spacing: -.01em; }
.card-meta { color: #86868b; }
.status-pill { border-radius: 999px; color: #0066cc; background: rgba(0,113,227,.09); font-weight: 650; }
.status-pill.rush { color: #c5261b; background: rgba(255,69,58,.11); }
.status-pill.progress { color: #18764b; background: rgba(36,138,91,.11); }
.status-pill.wait { color: #8a5700; background: rgba(255,159,10,.13); }
.line-items { gap: 9px; }
.line-item { border-top-color: var(--line); }
.empty-state { border-radius: 18px; border-color: var(--line-strong); background: rgba(255,255,255,.42); }

.task-product-photo, .order-product-row > img, .line-item.with-photo img, .inventory-card > img, .draft-item img, .product-photo, .report-context img {
  border-radius: 12px; border-color: var(--line); background: #f5f5f7; mix-blend-mode: normal;
}
.task-main h4 { font-size: 18px; letter-spacing: -.01em; }
.task-main p { color: #6e6e73; line-height: 1.65; }
.task-qty strong { font-size: 32px; letter-spacing: -.04em; }
.task-card .card-actions { align-items: center; }
.report-progress { border-radius: 7px; color: #55555a !important; background: #f1f1f3; }
.damage-totals { color: #c52d23 !important; }
.damage-check { border-radius: 11px; border-color: rgba(255,69,58,.22); color: #c52d23; background: rgba(255,69,58,.065); }
.material-text { color: #397081 !important; }
.material-entry { border: 0; border-radius: 14px; background: rgba(90,200,250,.09); }
.item-builder { border: 0; border-radius: 17px; padding: 20px; background: rgba(232,232,237,.68); }
.draft-item { border-radius: 13px; }
.color-choice { border: 1px solid transparent; border-radius: 15px; background: rgba(255,255,255,.88); }
.color-choice:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.10); }
.product-color-grid figure { overflow: hidden; border-radius: 13px; background: #f5f5f7; }
.product-color-grid img { mix-blend-mode: normal; }
.product-code { color: rgba(29,29,31,.055); }
.chip { border-color: var(--line); border-radius: 999px; color: #55555a; background: #f5f5f7; }
.stock-numbers span { border-radius: 10px; color: #86868b; background: #f5f5f7; }
.stock-numbers .available { color: #18764b; background: rgba(36,138,91,.09); }
.data-table { overflow: hidden; border-color: var(--line); border-radius: 16px; background: rgba(255,255,255,.9); }
.data-table th { color: #86868b; background: #f5f5f7; }
.data-table th, .data-table td { border-color: var(--line); }

.modal-backdrop { background: rgba(0,0,0,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-panel { border-radius: 24px; background: #f5f5f7; padding: 30px; box-shadow: 0 30px 90px rgba(0,0,0,.26); }
.modal-panel h3 { font-size: 25px; letter-spacing: -.025em; }
.modal-close { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #6e6e73; background: #e8e8ed; font-size: 20px; }
.report-context { border-color: var(--line); border-radius: 15px; background: white; }
.report-context.damage { border-left: 4px solid var(--signal); }
.damage-unit label { border-radius: 12px; }
.damage-unit label:has(input:checked) { box-shadow: 0 0 0 3px rgba(255,69,58,.09); }
.notice-detail { border: 0; border-radius: 14px; background: white; }
.toast { border-radius: 15px; background: rgba(29,29,31,.94); box-shadow: 0 15px 40px rgba(0,0,0,.20); backdrop-filter: blur(16px); }
.toast.error { box-shadow: 0 15px 40px rgba(255,69,58,.18); }
.loading { min-height: 220px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #86868b; }
.loading::before { display: none; }
.loading span { width: 20px; height: 20px; border: 2px solid #d1d1d6; border-top-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; }

@media (max-width: 1180px) {
  .login-screen { grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: 44px; }
  .process-flow { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  body { padding-bottom: 78px; }
  .login-screen { grid-template-columns: 1fr; min-height: auto; padding: 28px 18px 42px; gap: 34px; }
  .login-brand { display: block; }
  .login-wordmark { margin-bottom: 44px; }
  .login-brand .brand-stamp { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,113,227,.22); font-size: 24px; }
  .login-copy h1 { font-size: clamp(45px, 14vw, 66px); }
  .login-intro { font-size: 14px; }
  .process-flow { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 34px; }
  .process-flow li { padding: 12px 10px; }
  .process-flow small { white-space: normal; line-height: 1.35; }
  .login-card { padding: 27px 22px; border-radius: 23px; }
  .login-card-head p { display: none; }
  .login-card h2 { margin-top: 30px; }

  .sidebar {
    inset: auto 8px 8px; width: auto; height: 68px; padding: 6px 7px max(6px, env(safe-area-inset-bottom));
    border: 1px solid rgba(255,255,255,.86); border-radius: 20px; background: rgba(250,250,252,.90);
    box-shadow: 0 12px 36px rgba(0,0,0,.16);
  }
  .nav-button { min-width: 64px; border-radius: 13px; color: #86868b; }
  .nav-button.active { color: #0066cc; background: rgba(0,113,227,.11); }
  .nav-icon { font-size: 11px; }
  .main-area { margin-left: 0; padding: 0 14px 30px; }
  .topbar { min-height: 82px; }
  .topbar h2 { font-size: 26px; }
  .view-root { padding-top: 20px; }
  .metric-grid { gap: 9px; }
  .metric-card { min-height: 105px; padding: 15px; border-radius: 15px; }
  .metric-value { margin-top: 13px; font-size: 32px; }
  .panel, .demand-card, .task-card, .order-card, .message-card, .inventory-card, .product-card { border-radius: 16px; }
  .section-head { align-items: flex-start; }
  .section-head > .button { flex: 0 0 auto; }
  .task-card { padding: 15px; }
  .modal-panel { border-radius: 24px 24px 0 0; box-shadow: 0 -14px 50px rgba(0,0,0,.20); }
}

@media (max-width: 430px) {
  .process-flow { grid-template-columns: 1fr 1fr; gap: 7px; }
  .process-flow li { align-items: flex-start; gap: 8px; }
  .process-flow strong { font-size: 12px; }
  .login-copy h1 { letter-spacing: -.055em; }
  .topbar-actions .button-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Order-level workflow sheets: one production order, one operation table. */
.flow-summary-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; border: 1px solid rgba(255,255,255,.92); border-radius: 18px;
  background: rgba(255,255,255,.86); box-shadow: var(--shadow-soft);
}
.flow-summary-card.rush { border-left: 4px solid var(--signal); }
.flow-summary-card h4 { margin: 4px 0 5px; font: 700 19px/1.1 var(--display); letter-spacing: -.02em; }
.flow-summary-card p:last-child { margin: 0; color: #86868b; font-size: 11px; }
.flow-summary-action { display: flex; align-items: center; gap: 10px; }
.flow-order-list { display: grid; gap: 22px; }
.flow-order-sheet {
  overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 22px;
  background: rgba(255,255,255,.88); box-shadow: 0 14px 44px rgba(0,0,0,.065);
  content-visibility: auto; contain-intrinsic-size: auto 420px;
}
.flow-order-sheet.rush { border-left: 4px solid var(--signal); }
.flow-order-head {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
  padding: 24px 26px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,245,247,.82));
}
.flow-order-head h4 { margin: 3px 0 7px; font: 720 25px/1 var(--display); letter-spacing: -.025em; }
.flow-order-head p:last-child { margin: 0; color: #86868b; font-size: 12px; }
.flow-order-summary { display: flex; align-items: center; gap: 18px; }
.flow-order-summary > strong { min-width: 62px; color: var(--ink); font: 700 25px/1 var(--display); text-align: right; }
.flow-order-summary > strong small { display: block; margin-top: 6px; color: #86868b; font-size: 9px; font-weight: 600; }
.flow-sheet { width: 100%; }
.flow-sheet-header, .flow-sheet-row {
  display: grid; grid-template-columns: 76px minmax(220px,1.35fr) 92px 90px minmax(160px,.8fr) minmax(178px,auto);
  gap: 14px; align-items: center;
}
.flow-sheet-header { padding: 11px 24px; color: #86868b; background: #f5f5f7; font-size: 10px; font-weight: 650; }
.flow-sheet-row { min-height: 112px; padding: 15px 24px; border-top: 1px solid var(--line); }
.flow-sheet-header + .flow-sheet-row { border-top: 0; }
.flow-sheet-row.rush { background: linear-gradient(90deg,rgba(255,69,58,.045),transparent 28%); }
.flow-product { display: grid; place-items: center; }
.flow-product img { width: 70px; height: 62px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #f5f5f7; }
.flow-product-info { min-width: 0; display: grid; gap: 3px; }
.flow-product-info strong { overflow: hidden; color: var(--ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.flow-product-info b { color: #55555a; font-size: 12px; }
.flow-product-info small { overflow: hidden; color: #86868b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.flow-size, .flow-quantity { display: grid; gap: 4px; }
.flow-size strong, .flow-quantity strong { color: var(--ink); font: 700 19px/1 var(--display); }
.flow-size small, .flow-quantity small { color: #86868b; font-size: 9px; }
.flow-result { display: grid; gap: 4px; color: #55555a; font-size: 11px; line-height: 1.5; }
.flow-result small { display: block; color: #86868b; font-size: 9px; }
.result-ok { color: var(--green); font-weight: 700; }
.flow-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.flow-row-actions > small { color: #a1a1a6; font-size: 9px; }
.button-fail { color: #c52d23; border: 1px solid rgba(255,69,58,.22); background: rgba(255,69,58,.07); }
.flow-order-footer {
  min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 24px; border-top: 1px solid var(--line); background: rgba(245,245,247,.72);
}
.flow-order-footer p { margin: 0; color: #6e6e73; font-size: 11px; }
.flow-order-footer p strong { color: var(--ink); font-size: 14px; }
.flow-order-footer .button span { opacity: .72; font-size: 10px; }
.modal-lead { margin: -10px 0 18px; color: #6e6e73; font-size: 12px; line-height: 1.7; }
.flow-receive-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: -4px 0 14px; }
.flow-receive-stats span { display: flex; align-items: baseline; gap: 5px; padding: 10px 12px; border-radius: 11px; color: #6e6e73; background: white; font-size: 9px; }
.flow-receive-stats strong { color: var(--ink); font: 700 18px/1 var(--display); }
.flow-receive-stats .done { color: #18764b; background: rgba(36,138,91,.08); }
.flow-receive-stats .done strong { color: #18764b; }
.flow-receive-stats .pending { color: #8a5700; background: rgba(255,159,10,.12); }
.flow-receive-stats .pending strong { color: #8a5700; }
.flow-receive-list { display: grid; gap: 10px; margin-bottom: 18px; }
.flow-receive-row {
  display: grid; grid-template-columns: minmax(210px,1fr) 110px minmax(150px,.75fr); gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: white;
}
.flow-receive-product { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.flow-receive-row img { width: 56px; height: 48px; object-fit: contain; border-radius: 9px; background: #f5f5f7; }
.flow-receive-row span { min-width: 0; display: grid; gap: 3px; }
.flow-receive-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.flow-receive-row small { color: #86868b; font-size: 9px; }
.flow-receive-row label { margin: 0; font-size: 10px; }
.flow-receive-row.is-received { opacity: .72; background: rgba(255,255,255,.64); }
.flow-received-state { grid-column: 2 / -1; display: grid; justify-items: end; gap: 4px; padding-right: 5px; }
.flow-received-state span { color: #18764b; font-size: 11px; font-weight: 700; }
.flow-received-state small { color: #86868b; font-size: 9px; }

/* Compact flow-order index with an expandable production dossier. */
.flow-order-list.compact { gap: 12px; }
.flow-order-card { overflow: hidden; border: 1px solid rgba(0,0,0,.075); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 9px 28px rgba(0,0,0,.045); }
.flow-order-card.rush { border-left: 4px solid var(--signal); }
.flow-order-card.reprint-order { border-left: 4px solid #ff9f0a; }
.flow-order-card.expanded { border-color: rgba(0,113,227,.18); box-shadow: 0 18px 48px rgba(0,0,0,.075); }
.flow-order-toggle { width: 100%; display: grid; grid-template-columns: minmax(270px,1.2fr) minmax(410px,1fr) auto 28px; gap: 22px; align-items: center; padding: 18px 20px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.flow-order-toggle:hover { background: rgba(0,113,227,.025); }
.flow-order-identity { min-width: 0; display: grid; gap: 4px; }
.flow-order-code { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.flow-order-identity > strong { overflow: hidden; font: 750 16px/1.25 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.flow-order-identity > small { overflow: hidden; color: #86868b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.flow-order-identity > .reprint-source { color: #a35f00; font-weight: 700; }
.reprint-source-detail { margin-top: 8px !important; color: #8a5700 !important; }
.flow-order-key-stats { display: grid; grid-template-columns: repeat(4,minmax(72px,1fr)); gap: 7px; }
.flow-order-key-stats span { display: grid; gap: 3px; padding: 8px 9px; border-radius: 10px; background: #f5f5f7; }
.flow-order-key-stats small { color: #86868b; font-size: 8px; }
.flow-order-key-stats b { color: #2a2a2d; font-size: 12px; }
.flow-order-key-stats .danger { background: rgba(255,69,58,.07); }
.flow-order-key-stats .danger b { color: #b42318; }
.flow-order-key-stats .success { background: rgba(36,138,91,.08); }
.flow-order-key-stats .success b { color: #18764b; }
.flow-toggle-icon { color: #8e8e93; font: 800 21px/1 var(--display); font-style: normal; text-align: center; transition: transform .2s ease; }
.flow-order-card.expanded .flow-toggle-icon { transform: rotate(180deg); }
.flow-order-detail { border-top: 1px solid var(--line); background: linear-gradient(180deg,#fafafd,#fff 240px); }
.flow-detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; }
.flow-detail-heading h4 { margin: 4px 0 7px; font: 750 24px/1.1 var(--display); }
.flow-detail-heading p:last-child { margin: 0; color: #7b7b80; font-size: 11px; }
.flow-detail-heading > span { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: #55555a; background: #eeeef2; font-size: 10px; font-weight: 700; }
.flow-detail-table { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow-detail-table-head,.flow-detail-row { display: grid; grid-template-columns: minmax(260px,1.5fr) 64px minmax(110px,.7fr) minmax(180px,.9fr); gap: 12px; align-items: center; padding: 12px 24px; }
.flow-detail-table-head { color: #86868b; background: #f2f2f5; font-size: 9px; font-weight: 700; }
.flow-detail-row { min-height: 96px; border-top: 1px solid var(--line); font-size: 11px; }
.flow-detail-table-head + .flow-detail-row { border-top: 0; }
.flow-detail-row.rush { background: linear-gradient(90deg,rgba(255,69,58,.045),transparent 25%); }
.flow-detail-row > span { min-width: 0; display: grid; gap: 4px; }
.flow-detail-row > span > strong { color: #1d1d1f; font: 750 18px/1 var(--display); }
.flow-detail-row > span > b { overflow: hidden; color: #343438; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.flow-detail-row > span > small { color: #86868b; font-size: 9px; line-height: 1.45; }
.flow-detail-product { grid-template-columns: 66px minmax(0,1fr) !important; gap: 11px !important; align-items: center; }
.flow-detail-product img { width: 64px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 11px; background: #f5f5f7; }
.flow-detail-copy { min-width: 0; display: grid; gap: 3px; }
.flow-detail-copy b { overflow: hidden; color: #252529; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.flow-detail-copy strong { overflow: hidden; color: #1d1d1f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.flow-detail-copy small { color: #86868b; font-size: 9px; line-height: 1.35; }
.flow-mobile-meta { display: none; }
.scrap-badge,.scrap-clear { width: max-content; padding: 5px 8px; border-radius: 999px; }
.scrap-badge { color: #b42318 !important; background: rgba(255,69,58,.09); }
.scrap-clear { color: #18764b !important; background: rgba(36,138,91,.09); }
.flow-detail-control { align-content: center; gap: 7px !important; }
.flow-inline-actions,.flow-inline-state { display: grid; gap: 5px; padding: 7px 8px; border-radius: 10px; background: #f5f5f7; }
.flow-inline-actions > small,.flow-inline-state > small { color: #86868b; font-size: 8px; }
.flow-inline-actions > span { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.flow-inline-actions .button { width: 100%; min-height: 34px; padding: 7px 9px; font-size: 10px; }
.flow-inline-state > b { color: #343438; font-size: 11px; }
.flow-inline-receive { display: grid !important; grid-template-columns: 82px minmax(0,1fr); gap: 6px 7px !important; padding: 9px; border: 1px solid rgba(255,159,10,.22); border-radius: 11px; background: rgba(255,159,10,.07); }
.flow-inline-receive > small { grid-column: 1 / -1; color: #8a5b0a !important; font-size: 8px !important; font-weight: 700; }
.flow-inline-receive label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 5px; margin: 0; color: #6e5b39; font-size: 8px; }
.flow-inline-receive input { width: 100%; min-width: 0; height: 34px; margin: 0; padding: 7px 8px; border-radius: 8px; background: white; font-size: 10px; }
.flow-inline-receive > input { min-width: 0; }
.flow-stat-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; padding: 20px 24px 10px; }
.flow-stat-strip span { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid rgba(0,0,0,.045); border-radius: 13px; background: #f5f5f7; }
.flow-stat-strip small { color: #747479; font-size: 9px; }
.flow-stat-strip strong { color: #1d1d1f; font: 760 22px/1 var(--display); }
.flow-stat-strip strong i { margin-left: 4px; color: #8e8e93; font-size: 9px; font-style: normal; }
.flow-stat-strip em { color: #68696e; font-size: 9px; font-style: normal; line-height: 1.45; }
.flow-stat-strip .danger { background: rgba(255,69,58,.065); }
.flow-stat-strip .danger strong { color: #b42318; }
.flow-stat-strip .success { background: rgba(36,138,91,.075); }
.flow-stat-strip .success strong { color: #18764b; }
.qc-classification-grid label small { display: block; margin-top: 5px; color: #77787d; font-size: 9px; font-weight: 500; line-height: 1.35; }
.flow-stage-block { margin: 10px 24px 20px; padding: 18px 20px 19px; border: 1px solid rgba(0,113,227,.12); border-radius: 17px; background: linear-gradient(145deg,#f6faff,#f2f5f8); }
.flow-stage-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.flow-stage-title h5 { margin: 4px 0 0; color: #0065c9; font: 750 17px/1.2 var(--display); }
.flow-stage-title > strong { color: #7d838c; font-size: 11px; }
.flow-stage-progress { display: grid; grid-template-columns: repeat(4,1fr); }
.flow-stage-progress span { position: relative; display: grid; justify-items: center; gap: 7px; color: #a0a4aa; font-size: 10px; }
.flow-stage-progress span::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: #dfe3e8; }
.flow-stage-progress span:first-child::before { display: none; }
.flow-stage-progress i { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #cbd0d6; border-radius: 50%; color: #9a9ea5; background: white; font-size: 9px; font-style: normal; font-weight: 800; }
.flow-stage-progress .done { color: #18764b; }
.flow-stage-progress .done::before,.flow-stage-progress .active::before { background: #34a36f; }
.flow-stage-progress .done i { border-color: #34a36f; color: white; background: #34a36f; }
.flow-stage-progress .active { color: #0065c9; font-weight: 800; }
.flow-stage-progress .active i { border-color: #0071e3; color: #0071e3; box-shadow: 0 0 0 5px rgba(0,113,227,.10); }
.flow-current-work { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(360px,1.3fr); gap: 22px; align-items: center; padding: 18px 24px 22px; border-top: 1px solid var(--line); }
.flow-current-work h5 { margin: 4px 0 7px; font: 750 17px/1.2 var(--display); }
.flow-current-work p:last-child { margin: 0; color: #747479; font-size: 10px; line-height: 1.6; }
.flow-current-work.compact { min-height: 82px; padding-top: 14px; padding-bottom: 14px; }
.flow-current-actions { display: grid; justify-items: end; gap: 8px; }
.flow-action-hint { color: #8a8a8f; font-size: 10px; }
.whole-order-complete { min-width: 260px; display: grid; justify-items: start; gap: 3px; padding: 12px 17px; text-align: left; }
.whole-order-complete strong { font-size: 12px; }
.whole-order-complete span { color: rgba(255,255,255,.78); font-size: 9px; font-weight: 500; }
.whole-complete-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.whole-complete-summary span { display: grid; gap: 5px; padding: 13px; border-radius: 13px; background: #f5f5f7; }
.whole-complete-summary small { color: #77777c; font-size: 10px; }
.whole-complete-summary strong { color: #1d1d1f; font-size: 18px; }
.whole-complete-summary .danger { background: rgba(255,69,58,.08); }
.whole-complete-summary .danger strong { color: #b42318; }
.whole-complete-preview { display: grid; gap: 1px; overflow: hidden; margin: 14px 0; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.whole-complete-preview span,.whole-complete-preview > small { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #55555a; background: white; font-size: 10px; }
.whole-complete-preview b { flex: 0 0 auto; color: #1d1d1f; }
.flow-sku-action { width: 100%; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; padding: 8px 10px; border-radius: 11px; background: #f5f5f7; }
.flow-sku-action > span { margin-right: auto; color: #55555a; font-size: 10px; font-weight: 700; }

/* Demand center mirrors the flow-order index: scan first, expand only when needed. */
.demand-index-list { display: grid; gap: 12px; }
.demand-count { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; color: #0065c9; background: rgba(0,113,227,.09); font-size: 11px; font-weight: 700; }
.demand-index-card { overflow: hidden; border: 1px solid rgba(0,0,0,.075); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 9px 28px rgba(0,0,0,.045); }
.demand-index-card.rush { border-left: 4px solid var(--signal); }
.demand-index-card.expanded { border-color: rgba(0,113,227,.18); box-shadow: 0 18px 48px rgba(0,0,0,.075); }
.demand-index-toggle { width: 100%; display: grid; grid-template-columns: minmax(300px,1.35fr) minmax(310px,.85fr) auto 28px; gap: 22px; align-items: center; padding: 18px 20px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.demand-index-toggle:hover { background: rgba(0,113,227,.025); }
.demand-index-identity { min-width: 0; display: grid; gap: 4px; }
.demand-index-code { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.demand-index-identity > strong { overflow: hidden; font: 750 16px/1.25 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.demand-index-identity > small { overflow: hidden; color: #86868b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.demand-index-stats { display: grid; grid-template-columns: repeat(3,minmax(80px,1fr)); gap: 7px; }
.demand-index-stats span { display: grid; gap: 3px; padding: 8px 9px; border-radius: 10px; background: #f5f5f7; }
.demand-index-stats small { color: #86868b; font-size: 8px; }
.demand-index-stats b { overflow: hidden; color: #2a2a2d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.demand-index-stats .danger { background: rgba(255,69,58,.07); }
.demand-index-stats .danger b { color: #b42318; }
.demand-toggle-icon { color: #8e8e93; font: 800 21px/1 var(--display); font-style: normal; text-align: center; transition: transform .2s ease; }
.demand-index-card.expanded .demand-toggle-icon { transform: rotate(180deg); }
.demand-index-detail { padding: 24px 26px 26px; border-top: 1px solid var(--line); background: linear-gradient(180deg,#fafafd,#fff 240px); }
.demand-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.demand-detail-head h4 { margin: 4px 0 7px; font: 750 24px/1.1 var(--display); }
.demand-detail-head p:last-child { margin: 0; color: #7b7b80; font-size: 11px; }
.demand-detail-head > span { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: #55555a; background: #eeeef2; font-size: 10px; font-weight: 700; }
.demand-delivery { display: grid; gap: 5px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(0,113,227,.10); border-radius: 13px; background: #f4f8fd; }
.demand-delivery small { color: #6c7684; font-size: 9px; }
.demand-delivery strong { font-size: 13px; }
.demand-delivery p { margin: 0; color: #4e5661; font-size: 11px; line-height: 1.6; }
.demand-detail-items { margin-top: 20px; }
.demand-note { margin: 17px 0 0; padding: 12px 14px; border-radius: 11px; color: #55555a; background: #f5f5f7; font-size: 11px; line-height: 1.6; }

/* Damage reprint planning stays visually separate while retaining source traceability. */
.reprint-section-head {
  margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line);
}
.reprint-section-head .eyebrow { margin-bottom: 7px; color: #b42318; }
.flow-count { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; color: #0065c9; background: rgba(0,113,227,.09); font-size: 11px; font-weight: 700; }
.reprint-count {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; color: #b42318;
  background: rgba(255,69,58,.09); font-size: 11px; font-weight: 700;
}
.reprint-list .empty-state { border-color: rgba(255,69,58,.16); background: rgba(255,69,58,.025); }
.reprint-bundle-list { display: grid; gap: 12px; }
.reprint-bundle-card { overflow: hidden; border: 1px solid rgba(255,159,10,.22); border-left: 4px solid #ff9f0a; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 9px 28px rgba(0,0,0,.045); }
.reprint-bundle-card.rush { border-left-color: var(--signal); }
.reprint-bundle-card.expanded { box-shadow: 0 18px 48px rgba(0,0,0,.075); }
.reprint-bundle-toggle { width: 100%; display: grid; grid-template-columns: minmax(260px,1.15fr) minmax(390px,1fr) auto 28px; gap: 20px; align-items: center; padding: 18px 20px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.reprint-bundle-toggle:hover { background: rgba(255,159,10,.035); }
.reprint-bundle-identity { min-width: 0; display: grid; gap: 4px; }
.reprint-bundle-identity > span { color: #a35f00; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.reprint-bundle-identity > strong { font: 780 18px/1.2 var(--display); }
.reprint-bundle-identity > small { color: #86868b; font-size: 10px; }
.reprint-bundle-stats { display: grid; grid-template-columns: repeat(4,minmax(72px,1fr)); gap: 7px; }
.reprint-bundle-stats span { display: grid; gap: 3px; padding: 8px 9px; border-radius: 10px; background: #f5f5f7; }
.reprint-bundle-stats small { color: #86868b; font-size: 8px; }
.reprint-bundle-stats b { color: #2a2a2d; font-size: 12px; }
.reprint-bundle-icon { color: #8e8e93; font: 800 21px/1 var(--display); font-style: normal; text-align: center; transition: transform .2s ease; }
.reprint-bundle-card.expanded .reprint-bundle-icon { transform: rotate(180deg); }
.reprint-bundle-detail { padding: 20px; border-top: 1px solid rgba(255,159,10,.16); background: linear-gradient(180deg,rgba(255,249,240,.75),#fff 220px); }
.reprint-bundle-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.reprint-bundle-detail-head h4 { margin: 4px 0 0; font: 750 20px/1.15 var(--display); }
.reprint-bundle-detail-head > span { color: #7f7f84; font-size: 9px; }
.reprint-bundle-orders { display: grid; gap: 9px; }
.reprint-bundle-orders .flow-order-card.nested { border-radius: 14px; box-shadow: none; }
.reprint-bundle-orders .flow-order-card.nested.expanded { box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.reprint-tracking-list { display: grid; gap: 12px; }
.reprint-tracking-bundle { overflow: hidden; border: 1px solid rgba(255,159,10,.22); border-left: 4px solid #ff9f0a; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 9px 28px rgba(0,0,0,.045); }
.reprint-tracking-bundle.rush { border-left-color: var(--signal); }
.reprint-tracking-bundle[open] { box-shadow: 0 18px 48px rgba(0,0,0,.075); }
.reprint-tracking-bundle > summary { display: grid; grid-template-columns: minmax(260px,1.15fr) minmax(390px,1fr) auto 28px; gap: 20px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; }
.reprint-tracking-bundle > summary::-webkit-details-marker,
.reprint-tracking-order > summary::-webkit-details-marker { display: none; }
.reprint-tracking-bundle > summary:hover { background: rgba(255,159,10,.035); }
.reprint-tracking-bundle[open] > summary .reprint-bundle-icon { transform: rotate(180deg); }
.reprint-tracking-orders { display: grid; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid rgba(255,159,10,.16); background: linear-gradient(180deg,rgba(255,249,240,.75),#fff 220px); }
.reprint-tracking-order { overflow: hidden; border: 1px solid rgba(0,0,0,.075); border-radius: 14px; background: rgba(255,255,255,.92); }
.reprint-tracking-order[open] { border-color: rgba(0,113,227,.18); box-shadow: 0 10px 30px rgba(0,0,0,.055); }
.reprint-tracking-order > summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto 22px; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.reprint-tracking-order > summary:hover { background: rgba(0,113,227,.025); }
.reprint-tracking-order > summary > div { min-width: 0; display: grid; gap: 3px; }
.reprint-tracking-order > summary > div span { color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.reprint-tracking-order > summary > div strong { font: 760 15px/1.2 var(--display); }
.reprint-tracking-order > summary > div small { overflow: hidden; color: #77787d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reprint-tracking-order > summary > b { font-size: 12px; white-space: nowrap; }
.reprint-tracking-order > summary > i { color: #8e8e93; font: 800 18px/1 var(--display); font-style: normal; text-align: center; transition: transform .2s ease; }
.reprint-tracking-order[open] > summary > i { transform: rotate(180deg); }
.reprint-tracking-order-detail { padding: 0 12px 12px; border-top: 1px solid var(--line); background: #fafafd; }
.reprint-tracking-order-detail .order-card.nested { margin-top: 12px; border-left: 0; border-radius: 12px; box-shadow: none; }
.order-card.reprint-order { border-left: 4px solid #ff9f0a; }
.reprint-link {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px 12px; align-items: center;
  margin: 15px 0 4px; padding: 11px 13px; border-radius: 12px; background: rgba(255,159,10,.09);
}
.reprint-link span, .reprint-link small { color: #8a5700; font-size: 10px; }
.reprint-link strong { color: #7a4800; font-size: 13px; }
.reprint-link small { justify-self: end; }
.reprint-note { margin: 10px 0 0; color: #6e6e73; font-size: 11px; }
.yield-strip {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 14px 0 2px;
}
.yield-strip > span { display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; background: #f5f5f7; }
.yield-strip small { color: #86868b; font-size: 9px; }
.yield-strip strong { color: #1d1d1f; font: 700 18px/1 var(--display); }
.yield-strip strong i { margin-left: 3px; color: #86868b; font-size: 9px; font-style: normal; }
.yield-strip .damage { background: rgba(255,69,58,.07); }
.yield-strip .damage strong { color: #b42318; }
.yield-strip .yield { background: rgba(36,138,91,.08); }
.yield-strip .yield strong { color: #18764b; }
.message-actions { display: grid; justify-items: end; gap: 8px; }
.reprint-context {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center;
  margin-bottom: 12px; padding: 13px; border-radius: 15px; background: white;
}
.reprint-context img { width: 90px; height: 76px; object-fit: contain; border-radius: 11px; background: #f5f5f7; }
.reprint-context h4 { margin: 3px 0 5px; font-size: 16px; }
.reprint-context p:last-child { margin: 0; color: #6e6e73; font-size: 11px; }
.reprint-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 16px; }
.reprint-stats span { display: grid; gap: 4px; padding: 10px 11px; border-radius: 11px; background: white; }
.reprint-stats small { color: #86868b; font-size: 9px; }
.reprint-stats strong { color: #1d1d1f; font-size: 15px; }
.reprint-stats .remaining { background: rgba(255,69,58,.08); }
.reprint-stats .remaining strong { color: #b42318; }
.reprint-complete { padding: 16px; border-radius: 14px; color: #18764b; background: rgba(36,138,91,.08); }
.reprint-complete p { margin: 6px 0 0; color: #517161; font-size: 11px; line-height: 1.6; }

/* Compact message inbox: one readable line first, structured product detail on demand. */
.message-index-list { display: grid; gap: 11px; }
.message-index-card { overflow: hidden; border: 1px solid rgba(0,0,0,.075); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 8px 25px rgba(0,0,0,.04); }
.message-index-card.unread { border-left: 4px solid var(--blue); }
.message-index-card.high { border-left-color: var(--signal); }
.message-index-card.expanded { border-color: rgba(0,113,227,.18); box-shadow: 0 16px 42px rgba(0,0,0,.07); }
.message-index-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.message-index-toggle { min-width: 0; display: grid; grid-template-columns: 12px minmax(0,1fr) auto 22px; gap: 13px; align-items: center; padding: 16px 18px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.message-index-toggle:hover { background: rgba(0,113,227,.025); }
.message-index-card.unread .message-dot { background: var(--blue); box-shadow: 0 0 0 5px rgba(0,113,227,.09); }
.message-index-card.high .message-dot { background: var(--signal); box-shadow: 0 0 0 5px rgba(255,69,58,.09); }
.message-index-main { min-width: 0; display: grid; gap: 4px; }
.message-index-main strong { overflow: hidden; font: 750 15px/1.25 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.message-index-main small { overflow: hidden; color: #77787d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.message-index-toggle time { color: #929399; font-size: 9px; white-space: nowrap; }
.message-toggle-icon { color: #8e8e93; font: 800 20px/1 var(--display); font-style: normal; text-align: center; transition: transform .2s ease; }
.message-index-card.expanded .message-toggle-icon { transform: rotate(180deg); }
.message-index-actions { display: grid; justify-items: end; padding-right: 17px; }
.message-index-detail { padding: 20px 24px 23px; border-top: 1px solid var(--line); background: linear-gradient(180deg,#fafafd,#fff 190px); }
.message-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.message-detail-head h4 { margin: 4px 0 6px; font: 750 20px/1.15 var(--display); }
.message-detail-head p:last-child { margin: 0; color: #74757a; font-size: 10px; }
.message-detail-head > small { color: #929399; font-size: 9px; white-space: nowrap; }
.message-product-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 7px; margin-top: 17px; }
.message-product-list > span { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px 12px; border-radius: 11px; background: #f4f6f8; }
.message-product-list i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #0065c9; background: rgba(0,113,227,.09); font-size: 8px; font-style: normal; font-weight: 800; }
.message-product-list b { color: #414247; font-size: 10px; line-height: 1.45; }
.message-detail-actions { display: flex; justify-content: flex-end; margin-top: 15px; }

@media (max-width: 1050px) {
  .flow-sheet-header, .flow-sheet-row { grid-template-columns: 68px minmax(190px,1fr) 78px 72px minmax(140px,.8fr) minmax(142px,auto); gap: 10px; }
  .flow-sheet-header, .flow-sheet-row { padding-left: 18px; padding-right: 18px; }
  .flow-row-actions .button { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 820px) {
  .yield-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reprint-link { grid-template-columns: auto 1fr; }
  .reprint-link small { grid-column: 1 / -1; justify-self: start; }
  .message-actions { justify-items: stretch; }
  .message-index-toggle { grid-template-columns: 12px minmax(0,1fr) 22px; gap: 11px; padding: 15px 12px 15px 15px; }
  .message-index-toggle time { grid-column: 2; grid-row: 2; }
  .message-toggle-icon { grid-column: 3; grid-row: 1; }
  .message-index-actions { padding-right: 12px; }
  .message-index-detail { padding: 18px 16px 20px; }
  .message-product-list { grid-template-columns: 1fr; }
  .reprint-bundle-toggle { grid-template-columns: minmax(0,1fr) auto 22px; gap: 12px; padding: 16px; }
  .reprint-bundle-stats { grid-column: 1 / -1; grid-row: 2; }
  .reprint-bundle-toggle > .status-pill { grid-column: 2; grid-row: 1; }
  .reprint-bundle-icon { grid-column: 3; grid-row: 1; }
  .reprint-bundle-detail { padding: 16px; }
  .reprint-bundle-detail-head { align-items: flex-start; }
  .reprint-tracking-bundle > summary { grid-template-columns: minmax(0,1fr) auto 22px; gap: 12px; padding: 16px; }
  .reprint-tracking-bundle > summary .reprint-bundle-stats { grid-column: 1 / -1; grid-row: 2; }
  .reprint-tracking-bundle > summary > .status-pill { grid-column: 2; grid-row: 1; }
  .reprint-tracking-bundle > summary > .reprint-bundle-icon { grid-column: 3; grid-row: 1; }
  .reprint-tracking-orders { padding: 12px; }
  .flow-summary-card { align-items: stretch; flex-direction: column; }
  .flow-summary-action { justify-content: space-between; }
  .flow-order-list { gap: 16px; }
  .flow-order-sheet { border-radius: 18px; }
  .flow-order-head { grid-template-columns: 1fr; gap: 16px; padding: 19px 17px 16px; }
  .flow-order-head h4 { font-size: 22px; }
  .flow-order-summary { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
  .flow-order-summary > strong { min-width: auto; font-size: 20px; }
  .flow-sheet-header { display: none; }
  .flow-sheet-row {
    grid-template-columns: 66px minmax(0,1fr) auto; gap: 8px 12px; min-height: 0; padding: 16px;
    align-items: start;
  }
  .flow-product { grid-column: 1; grid-row: 1 / span 2; }
  .flow-product img { width: 64px; height: 56px; }
  .flow-product-info { grid-column: 2; grid-row: 1 / span 2; }
  .flow-size { grid-column: 3; grid-row: 1; text-align: right; }
  .flow-quantity { grid-column: 3; grid-row: 2; text-align: right; }
  .flow-result { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; background: #f5f5f7; }
  .flow-row-actions { grid-column: 1 / -1; justify-content: stretch; }
  .flow-row-actions .button { flex: 1; min-height: 40px; }
  .flow-order-footer { align-items: stretch; flex-direction: column; padding: 14px 16px 16px; }
  .flow-order-footer .button { width: 100%; }
  .flow-receive-row { grid-template-columns: 1fr 1fr; }
  .flow-receive-product { grid-column: 1 / -1; }
  .flow-received-state { grid-column: 1 / -1; justify-items: start; padding-left: 68px; }
  .flow-order-toggle { grid-template-columns: minmax(0,1fr) auto 22px; gap: 12px; padding: 16px; }
  .flow-order-key-stats { grid-column: 1 / -1; grid-row: 2; }
  .flow-order-toggle > .status-pill { grid-column: 2; grid-row: 1; }
  .flow-toggle-icon { grid-column: 3; grid-row: 1; }
  .flow-detail-heading { align-items: flex-start; padding: 20px 17px 15px; }
  .flow-detail-heading h4 { font-size: 20px; }
  .flow-detail-table-head { display: none; }
  .flow-detail-row { grid-template-columns: minmax(0,1fr) minmax(126px,auto); gap: 10px; min-height: 88px; padding: 12px 14px; }
  .flow-detail-product { grid-column: 1; grid-row: 1; grid-template-columns: 58px minmax(0,1fr) !important; gap: 9px !important; }
  .flow-detail-product img { width: 56px; height: 52px; border-radius: 9px; }
  .flow-detail-copy { gap: 2px; }
  .flow-detail-copy b { font-size: 11px; }
  .flow-detail-copy strong { font-size: 10px; }
  .flow-detail-copy .material-text { display: none; }
  .flow-mobile-meta { display: block; }
  .flow-detail-quantity,.flow-detail-loss { display: none !important; }
  .flow-detail-control { grid-column: 2; grid-row: 1; align-self: stretch; }
  .flow-detail-row:has(.flow-inline-receive) { grid-template-columns: 1fr; }
  .flow-detail-row:has(.flow-inline-receive) .flow-detail-product { grid-column: 1; grid-row: 1; }
  .flow-detail-row:has(.flow-inline-receive) .flow-detail-control { grid-column: 1; grid-row: 2; }
  .flow-inline-actions,.flow-inline-state { height: 100%; align-content: center; padding: 7px; }
  .flow-inline-actions > span { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-inline-actions .button { width: 100%; min-height: 38px; padding: 7px 8px; font-size: 10px; }
  .flow-inline-state b,.flow-inline-state small { max-width: 126px; }
  .flow-inline-receive { grid-column: 1 / -1; }
  .flow-inline-receive { grid-template-columns: 92px minmax(0,1fr); }
  .flow-stat-strip { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px 16px 7px; }
  .flow-stage-block { margin: 9px 16px 16px; padding: 16px 12px 17px; }
  .flow-stage-progress span { font-size: 8px; }
  .flow-stage-progress i { width: 24px; height: 24px; }
  .flow-stage-progress span::before { top: 11px; }
  .flow-current-work { grid-template-columns: 1fr; gap: 14px; padding: 17px 16px 19px; }
  .flow-current-actions { justify-items: stretch; }
  .whole-order-complete { width: 100%; min-width: 0; }
  .whole-complete-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .whole-complete-summary span { padding: 10px 8px; }
  .flow-sku-action { justify-content: stretch; }
  .flow-sku-action > span { width: 100%; }
  .flow-current-actions > .button { width: 100%; }
  .demand-index-toggle { grid-template-columns: minmax(0,1fr) auto 22px; gap: 12px; padding: 16px; }
  .demand-index-stats { grid-column: 1 / -1; grid-row: 2; }
  .demand-index-toggle > .status-pill { grid-column: 2; grid-row: 1; }
  .demand-toggle-icon { grid-column: 3; grid-row: 1; }
  .demand-index-detail { padding: 20px 17px 22px; }
  .demand-detail-head { align-items: flex-start; }
  .demand-detail-head h4 { font-size: 20px; }
}

@media (max-width: 430px) {
  .message-index-row { grid-template-columns: 1fr; }
  .message-index-actions { justify-items: stretch; padding: 0 15px 14px 42px; }
  .message-index-actions .button { width: 100%; }
  .message-detail-head { display: grid; }
  .reprint-bundle-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reprint-bundle-detail-head { display: grid; }
  .reprint-tracking-order > summary { grid-template-columns: minmax(0,1fr) auto 20px; gap: 10px; padding: 13px; }
  .reprint-tracking-order > summary > .status-pill { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .reprint-tracking-order > summary > i { grid-column: 3; grid-row: 1; }
  .flow-order-summary { grid-template-columns: 1fr auto auto; }
  .flow-order-summary .status-pill { max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
  .flow-receive-row { grid-template-columns: 1fr; }
  .flow-receive-product { grid-column: auto; }
  .flow-received-state { padding-left: 0; }
  .flow-order-key-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-order-identity > strong { white-space: normal; }
  .flow-detail-heading { display: grid; }
  .flow-detail-heading > span { width: max-content; }
  .flow-stage-progress span b { max-width: 62px; text-align: center; }
  .demand-index-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demand-index-stats span:last-child { grid-column: 1 / -1; }
  .demand-index-identity > strong { white-space: normal; }
  .demand-detail-head { display: grid; }
  .demand-detail-head > span { width: max-content; }
}

/* 2026-08-26 unified role experience: clear Chinese navigation and calm mobile-first surfaces. */
body[data-role] { --role-accent: #0071e3; --role-tint: rgba(0,113,227,.10); }
body[data-role="PRINTER"] { --role-accent: #5856d6; --role-tint: rgba(88,86,214,.10); }
body[data-role="POST"] { --role-accent: #d26a00; --role-tint: rgba(255,159,10,.12); }
body[data-role="WAREHOUSE"] { --role-accent: #248a5b; --role-tint: rgba(36,138,91,.10); }
body[data-role="ADMIN"] { --role-accent: #5e5ce6; --role-tint: rgba(94,92,230,.10); }

.sidebar { width: 252px; padding: 24px 16px; }
.main-area { margin-left: 252px; max-width: 1680px; }
.main-nav.text-nav { gap: 5px; }
.text-nav .nav-button {
  position: relative; min-height: 44px; display: flex; grid-template-columns: none; align-items: center;
  padding: 0 15px; border-radius: 13px; color: #5f6065; font-size: 13px; font-weight: 650;
}
.text-nav .nav-button::before {
  content: ""; width: 5px; height: 5px; flex: 0 0 auto; margin-right: 11px;
  border-radius: 50%; background: #c7c7cc; transition: transform .15s, background .15s;
}
.text-nav .nav-button:hover { color: var(--ink); background: rgba(0,0,0,.035); }
.text-nav .nav-button.active { color: var(--role-accent); background: var(--role-tint); box-shadow: none; }
.text-nav .nav-button.active::before { background: var(--role-accent); transform: scale(1.5); }
.text-nav .nav-badge { position: static; margin-left: auto; }

.topbar { min-height: 102px; }
.topbar h2 { color: #171719; font-size: clamp(29px,3vw,39px); }
.view-root { padding-top: 28px; }
.section-head.first {
  min-height: 70px; margin-bottom: 18px; padding: 4px 2px 0;
  border-bottom: 0;
}
.section-head h3 { color: #202124; font-size: 22px; }
.section-head p { max-width: 760px; }
.panel, .demand-card, .task-card, .order-card, .message-card, .inventory-card, .product-card,
.flow-summary-card, .flow-order-sheet {
  border-color: rgba(0,0,0,.055); background: rgba(255,255,255,.94);
  box-shadow: 0 1px 2px rgba(0,0,0,.025), 0 12px 36px rgba(0,0,0,.045);
}
.metric-card { border-color: rgba(0,0,0,.045); background: rgba(255,255,255,.94); }
.metric-card:first-child { background: linear-gradient(145deg,var(--role-tint),rgba(255,255,255,.96) 70%); }
.metric-value { color: #161618; }
.status-pill { padding: 7px 11px; }
.button { min-height: 44px; }
.button-primary, .button-blue { background: var(--role-accent, var(--blue)); }
.button-primary, .button-blue, .button-green, .button-signal { box-shadow: none; }
.button:hover { filter: none; box-shadow: 0 7px 20px rgba(0,0,0,.10); }
.message-card { min-height: 92px; align-items: center; }
.message-card h4 { font-size: 15px; }
.message-card p { color: #74757a; }
.inventory-card { padding: 17px; }
.inventory-card:hover, .message-card:hover, .product-card:hover { border-color: rgba(0,113,227,.16); }

.manager-welcome {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 250px;
  gap: 28px; align-items: center; min-height: 228px; padding: clamp(26px,4vw,46px);
  border-radius: 28px; color: white; background:
    radial-gradient(circle at 83% 16%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(135deg,#126fe3 0%,#0071e3 48%,#34aadc 100%);
  box-shadow: 0 22px 50px rgba(0,113,227,.18);
}
.manager-welcome::after {
  content: ""; position: absolute; right: -105px; bottom: -180px; width: 350px; height: 350px;
  border: 42px solid rgba(255,255,255,.075); border-radius: 50%; pointer-events: none;
}
.manager-welcome .eyebrow { color: rgba(255,255,255,.68); }
.manager-welcome h3 { position: relative; z-index: 1; margin: 9px 0 12px; font-size: clamp(30px,4vw,48px); letter-spacing: -.045em; }
.manager-welcome p:last-child { max-width: 620px; margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.75; }
.manager-primary-action {
  position: relative; z-index: 1; min-height: 126px; display: grid; grid-template-columns: 42px 1fr;
  grid-template-rows: 1fr 1fr; gap: 0 13px; align-items: center; padding: 24px; text-align: left;
  border: 1px solid rgba(255,255,255,.35); border-radius: 22px; color: #101115;
  background: rgba(255,255,255,.93); box-shadow: 0 18px 38px rgba(0,0,0,.13);
}
.manager-primary-action > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; background: #111; font-size: 24px; }
.manager-primary-action strong { align-self: end; font-size: 16px; }
.manager-primary-action small { align-self: start; margin-top: 4px; color: #7b7c81; font-size: 10px; }
.manager-primary-action:hover { transform: translateY(-2px); }

.manager-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.manager-metrics button {
  min-height: 128px; display: grid; align-content: space-between; justify-items: start; padding: 19px 20px;
  border: 1px solid rgba(0,0,0,.05); border-radius: 18px; color: #1d1d1f; text-align: left;
  background: rgba(255,255,255,.94); box-shadow: 0 8px 26px rgba(0,0,0,.045);
}
.manager-metrics button:hover { border-color: rgba(0,113,227,.18); transform: translateY(-1px); }
.manager-metrics small { color: #7b7c81; font-size: 11px; }
.manager-metrics strong { font-size: 35px; line-height: 1; letter-spacing: -.04em; }
.manager-metrics span { color: var(--blue); font-size: 10px; font-weight: 650; }
.manager-home-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 22px; margin-top: 36px; }
.manager-section-title, .manager-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px;
}
.manager-section-title h3, .manager-page-head h3 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.manager-section-title button { border: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 650; }
.manager-page-head { min-height: 92px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.manager-page-head p:not(.eyebrow) { margin: 7px 0 0; color: #85868b; font-size: 12px; }
.manager-demand-list, .manager-message-list { display: grid; gap: 12px; }
.manager-demand-card {
  padding: 20px; border: 1px solid rgba(0,0,0,.05); border-radius: 19px;
  background: rgba(255,255,255,.95); box-shadow: 0 8px 28px rgba(0,0,0,.045);
}
.manager-demand-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.manager-demand-card h4 { margin: 3px 0 0; font-size: 17px; }
.manager-demand-summary { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 18px 0; }
.manager-photo-stack { min-width: 92px; display: flex; }
.manager-photo-stack img { width: 58px; height: 48px; margin-right: -15px; border: 3px solid white; border-radius: 12px; object-fit: contain; background: #f5f5f7; }
.manager-demand-summary > div:last-child { min-width: 0; display: grid; gap: 4px; }
.manager-demand-summary strong { font-size: 13px; }
.manager-demand-summary small { color: #818287; font-size: 10px; line-height: 1.5; }
.manager-demand-summary .manager-priority { color: #c83228; font-weight: 650; }
.manager-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.manager-progress span { position: relative; display: grid; justify-items: center; gap: 6px; color: #a0a1a6; font-size: 9px; text-align: center; }
.manager-progress span::before { content: ""; position: absolute; top: 4px; left: -50%; width: 100%; height: 2px; background: #e4e4e8; }
.manager-progress span:first-child::before { display: none; }
.manager-progress i { position: relative; z-index: 1; width: 10px; height: 10px; border: 2px solid #d0d0d5; border-radius: 50%; background: white; }
.manager-progress .done { color: #18764b; font-weight: 650; }
.manager-progress .done::before, .manager-progress .done i { border-color: #34a36f; background: #34a36f; }
.manager-demand-page { grid-template-columns: repeat(2,minmax(0,1fr)); }

.manager-demand-form { max-width: 1120px; margin: 0 auto; padding: clamp(22px,3vw,34px); border-radius: 24px; }
.manager-demand-form > .button-primary { width: 100%; min-height: 52px; margin-top: 6px; font-size: 14px; }
.manager-demand-form .item-builder { padding: clamp(16px,2.5vw,24px); }
.address-paste { min-height: 128px; line-height: 1.7; }
.address-paste::placeholder { color: #a0a1a6; }

.compact-login {
  width: min(100%, 620px); min-height: 100vh; grid-template-columns: 1fr; align-content: center;
  gap: 24px; padding: clamp(22px,5vw,52px);
}
.compact-login .login-brand { max-width: none; display: block; }
.compact-login .login-wordmark { margin: 0; }
.compact-login .login-card { width: 100%; }
.compact-login .login-card h2 { margin-top: 28px; }

.manager-demand-form .builder-grid { grid-template-columns: minmax(180px,1.25fr) minmax(120px,.7fr) minmax(120px,.6fr) minmax(180px,.8fr); }
.production-order-form .builder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.production-order-form .product-step-head { margin-top: 28px; }
.production-order-form .production-head-fields { align-items: end; }
.production-order-form .production-note-control { min-height: 48px; margin: 0; padding: 7px 9px 7px 12px; }
.production-order-form .production-note-control small { max-width: 360px; }
.production-order-form .production-note-control .button { min-height: 34px; padding: 7px 11px; }
.production-order-form .item-builder { padding: 14px 16px 16px; }
.production-order-form .color-picker { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.production-order-form .color-choice { min-width: 0; min-height: 94px; display: grid; grid-template-rows: 62px auto; gap: 5px; padding: 6px; border-radius: 12px; }
.production-order-form .color-choice input { width: 15px; height: 15px; top: 8px; left: 8px; }
.production-order-form .color-choice .product-photo { height: 62px; border-radius: 8px; }
.production-order-form .color-choice strong { overflow: hidden; min-height: 15px; padding: 0 2px; font-size: 10px; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.production-order-form .color-choice > small { display: none; }
.production-order-form .custom-choice .product-photo b { font-size: 28px; }
.production-order-form .material-entry { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 10px; padding: 10px; }
.production-order-form .add-detail-bar { margin-top: 12px; padding: 10px 12px; }
.production-order-form .add-detail-bar .button { min-height: 42px; }
.urgency-choice { min-width: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin: 0; padding: 0; border: 0; }
.urgency-choice legend { grid-column: 1 / -1; margin-bottom: 8px; color: #55555a; font-size: 12px; font-weight: 600; }
.urgency-choice label { position: relative; display: block; margin: 0; cursor: pointer; }
.urgency-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.urgency-choice span {
  min-height: 46px; display: grid; place-items: center; border: 1px solid var(--line-strong);
  border-radius: 12px; color: #696a70; background: white; font-size: 13px; font-weight: 650;
}
.urgency-choice label:has(input:checked) span { color: white; border-color: var(--role-accent); background: var(--role-accent); box-shadow: 0 7px 16px var(--role-tint); }
.urgency-choice label:last-child:has(input:checked) span { border-color: #ff453a; background: #ff453a; box-shadow: 0 7px 16px rgba(255,69,58,.13); }
.optional-note-control {
  min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8f8fa;
}
.optional-note-control > div { min-width: 0; display: grid; gap: 4px; }
.optional-note-control strong { color: #343438; font-size: 12px; }
.optional-note-control small { overflow: hidden; color: #8a8b90; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.product-step-head { margin-top: 42px; }
.custom-file-control input[type="file"] { min-height: 48px; padding: 8px; background: white; }
.custom-file-control input[type="file"]::file-selector-button {
  min-height: 32px; margin-right: 10px; padding: 7px 12px; border: 0; border-radius: 9px;
  color: #0066cc; background: rgba(0,113,227,.10); font-weight: 650;
}
.custom-file-control small { color: #6e6e73; font-size: 10px; font-weight: 500; }
.add-detail-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px;
  padding: 15px 16px; border: 1px solid rgba(0,113,227,.16); border-radius: 15px;
  background: linear-gradient(135deg,rgba(0,113,227,.075),rgba(90,200,250,.055));
}
.add-detail-bar > div { min-width: 0; display: grid; gap: 3px; }
.add-detail-bar strong { color: #27272a; font-size: 12px; }
.add-detail-bar small { color: #77787d; font-size: 10px; }
.add-detail-bar .button { flex: 0 0 auto; min-width: 132px; }

@media (max-width: 1100px) {
  .manager-home-grid { grid-template-columns: 1fr; }
  .manager-demand-page { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body:not([data-role]) { padding-bottom: 0; }
  .sidebar { inset: auto 8px 8px; width: auto; }
  .main-area { margin-left: 0; }
  .main-nav.text-nav { grid-auto-flow: column; grid-auto-columns: minmax(78px,auto); }
  .text-nav .nav-button { min-width: 78px; min-height: 52px; justify-content: center; padding: 7px 9px; font-size: 11px; white-space: nowrap; }
  .text-nav .nav-button::before { display: none; }
  .text-nav .nav-button.active::after { content: ""; position: absolute; right: 18px; bottom: 5px; left: 18px; height: 2px; border-radius: 2px; background: var(--role-accent); }
  .text-nav .nav-badge { position: absolute; top: 3px; right: 7px; margin: 0; }
  .topbar { min-height: 78px; }
  .view-root { padding-top: 18px; }
  .manager-welcome { grid-template-columns: 1fr; min-height: auto; gap: 24px; padding: 27px 22px; border-radius: 23px; }
  .manager-welcome h3 { font-size: 34px; }
  .manager-primary-action { min-height: 92px; padding: 18px; border-radius: 18px; }
  .manager-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .manager-metrics button { min-height: 108px; padding: 15px; border-radius: 16px; }
  .manager-metrics strong { font-size: 30px; }
  .manager-home-grid { margin-top: 28px; }
  .manager-page-head { min-height: 78px; align-items: flex-start; }
  .manager-page-head h3 { font-size: 23px; }
  .manager-demand-card { padding: 17px; border-radius: 17px; }
  .manager-demand-form { padding: 18px 15px; border-radius: 19px; }
  .manager-demand-form .form-grid, .manager-demand-form .builder-grid { grid-template-columns: 1fr; }
  .manager-demand-form .span-2 { grid-column: auto; }
  .address-paste { min-height: 145px; }
  .compact-login { min-height: 100vh; padding: 20px 18px; gap: 20px; }
  .compact-login .login-wordmark { margin: 0; }
  .compact-login .login-card { padding: 23px 20px; }
  .compact-login .login-card h2 { margin: 24px 0 7px; font-size: 28px; }
  .compact-login .login-card-intro { margin-bottom: 22px; }
  .manager-demand-form .builder-grid { grid-template-columns: 1fr; }
  .production-order-form .builder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .production-order-form .color-picker { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 10px 0; }
  .production-order-form .color-choice { min-height: 82px; grid-template-rows: 50px auto; gap: 4px; padding: 5px; }
  .production-order-form .color-choice .product-photo { height: 50px; }
  .production-order-form .color-choice strong { font-size: 9px; }
  .production-order-form .material-entry { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .urgency-choice { grid-template-columns: repeat(2,1fr); }
  .optional-note-control { align-items: flex-start; flex-direction: column; }
  .optional-note-control .button { width: 100%; }
  .production-order-form .production-head-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .production-order-form .production-note-control { align-items: center; flex-direction: row; min-height: 48px; }
  .production-order-form .production-note-control .button { width: auto; }
  .add-detail-bar { align-items: stretch; flex-direction: column; padding: 14px; }
  .add-detail-bar .button { width: 100%; min-height: 50px; }
  .production-order-form .add-detail-bar { align-items: center; flex-direction: row; gap: 9px; padding: 9px 10px; }
  .production-order-form .add-detail-bar small { display: none; }
  .production-order-form .add-detail-bar .button { width: auto; min-width: 112px; min-height: 42px; }
  .panel, .demand-card, .task-card, .order-card, .message-card, .inventory-card, .product-card, .flow-order-sheet { box-shadow: 0 6px 22px rgba(0,0,0,.045); }
}

@media (max-width: 460px) {
  .manager-page-head { display: grid; }
  .manager-page-head .button { width: 100%; }
  .manager-demand-summary { grid-template-columns: 1fr; }
  .manager-photo-stack { min-width: 0; }
  .manager-progress span { font-size: 8px; }
  .section-head.first { align-items: flex-start; flex-direction: column; }
}

/* Scan-first information system: concise index rows, details only on demand. */
.metric-card { display: grid; align-content: space-between; min-height: 112px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.metric-card:hover { border-color: rgba(0,113,227,.18); transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0,0,0,.075); }
.metric-card:focus-visible { outline: 3px solid rgba(0,113,227,.18); outline-offset: 2px; }
.metric-value { margin-top: 10px; }
.metric-hint { position: relative; z-index: 1; margin-top: 10px; color: #0071e3; font-size: 9px; font-weight: 650; }
.metric-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 11px 13px; border-radius: 12px; color: #5e6066; background: white; }
.metric-detail-summary span { font-size: 10px; }
.metric-detail-summary strong { font-size: 15px; }
.metric-detail-list { display: grid; gap: 7px; max-height: min(62vh,650px); overflow: auto; }
.metric-detail-list article { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.metric-detail-list img { width: 58px; height: 48px; object-fit: contain; border-radius: 9px; background: #f5f5f7; }
.metric-detail-list article > div { min-width: 0; display: grid; gap: 4px; }
.metric-detail-list article > div strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric-detail-list article > div small { overflow: hidden; color: #85868b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric-detail-list article > span { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.metric-detail-list article > span small { color: #8e8e93; font-size: 8px; }
.metric-detail-list article > span b { color: #18764b; font-size: 13px; }
.dashboard-detail-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px; align-items: start; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dashboard-detail-head .button { margin-top: 2px; }
.dashboard-detail-head h3 { margin: 4px 0 7px; font: 750 23px/1.15 var(--display); }
.dashboard-detail-head p:last-child { margin: 0; color: #85868b; font-size: 11px; }
.dashboard-detail-list { max-height: none; overflow: visible; }
.dashboard-detail-list article { min-height: 78px; padding: 13px 15px; }

.demand-index-list { gap: 8px; }
.demand-index-card { border-radius: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.035); }
.demand-index-card.finished { border-color: rgba(36,138,91,.12); background: rgba(255,255,255,.68); box-shadow: none; }
.demand-index-toggle { grid-template-columns: minmax(280px,1.4fr) minmax(145px,.55fr) auto 22px; gap: 14px; min-height: 78px; padding: 12px 15px; }
.demand-index-card.finished .demand-index-toggle { min-height: 66px; padding-top: 9px; padding-bottom: 9px; }
.demand-index-code { font-size: 9px; }
.demand-index-identity > strong { font-size: 14px; }
.demand-index-identity > small { font-size: 9px; }
.demand-index-compact { min-width: 0; display: grid; gap: 4px; }
.demand-index-compact span { overflow: hidden; color: #343438; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.demand-index-compact small { overflow: hidden; color: #85868b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demand-index-detail { padding: 20px; }

.flow-order-list.compact,.reprint-bundle-list { gap: 8px; }
.flow-order-card,.reprint-bundle-card { border-radius: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.035); }
.flow-order-toggle,.reprint-bundle-toggle { grid-template-columns: minmax(280px,1.35fr) minmax(150px,.55fr) auto 22px; gap: 14px; min-height: 78px; padding: 12px 15px; }
.flow-order-code { font-size: 9px; }
.flow-order-identity > strong { font-size: 14px; }
.flow-order-identity > small { font-size: 9px; }
.flow-order-compact-meta,.reprint-bundle-compact-meta { min-width: 0; display: grid; gap: 4px; }
.flow-order-compact-meta strong,.reprint-bundle-compact-meta strong { overflow: hidden; color: #343438; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.flow-order-compact-meta small,.reprint-bundle-compact-meta small { overflow: hidden; color: #85868b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reprint-bundle-identity > strong { font-size: 15px; }

.manager-demand-card.compact { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; min-height: 78px; padding: 13px 15px; border: 1px solid rgba(0,0,0,.055); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.manager-demand-card.compact > span { grid-column: 1; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.manager-demand-card.compact > strong { grid-column: 1; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.manager-demand-card.compact > small { grid-column: 1; overflow: hidden; color: #85868b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.manager-demand-card.compact > i { grid-column: 2; grid-row: 1 / 4; align-self: center; font-style: normal; }
.manager-demand-card.compact.finished { opacity: .78; box-shadow: none; }

.production-index-list,.shipment-index-list { display: grid; gap: 8px; }
.production-index-card,.shipment-index-card,.completed-record-archive { overflow: hidden; border: 1px solid rgba(0,0,0,.07); border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 6px 20px rgba(0,0,0,.035); }
.production-index-card.rush { border-left: 4px solid var(--signal); }
.production-index-card.finished,.shipment-index-card.finished { box-shadow: none; opacity: .82; }
.production-index-card > summary,.shipment-index-card > summary { display: grid; grid-template-columns: minmax(280px,1.35fr) minmax(130px,.45fr) auto 22px; gap: 14px; align-items: center; min-height: 76px; padding: 12px 15px; cursor: pointer; list-style: none; }
.production-index-card > summary::-webkit-details-marker,.shipment-index-card > summary::-webkit-details-marker,.completed-record-archive > summary::-webkit-details-marker { display: none; }
.production-index-card > summary > div:first-child,.shipment-index-card > summary > div:first-child { min-width: 0; display: grid; gap: 4px; }
.production-index-card > summary > div:first-child > span,.shipment-index-card > summary > div:first-child > span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.production-index-card > summary > div:first-child > strong,.shipment-index-card > summary > div:first-child > strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.production-index-card > summary > div:first-child > small,.shipment-index-card > summary > div:first-child > small { overflow: hidden; color: #85868b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.production-index-meta { display: grid; gap: 4px; }
.production-index-meta strong { font-size: 12px; }
.production-index-meta small { color: #7f8085; font-size: 9px; }
.production-index-card > summary > i,.shipment-index-card > summary > i,.completed-record-archive > summary > i { color: #8e8e93; font: 800 18px/1 var(--display); font-style: normal; transition: transform .2s ease; }
.production-index-card[open] > summary > i,.shipment-index-card[open] > summary > i,.completed-record-archive[open] > summary > i { transform: rotate(180deg); }
.production-index-detail,.shipment-index-detail { padding: 12px; border-top: 1px solid var(--line); background: #fafafd; }
.production-index-detail .order-card { border-left: 0; box-shadow: none; }
.shipment-index-detail { color: #5f6065; font-size: 11px; line-height: 1.6; }
.shipment-index-detail p { margin: 5px 0; }
.completed-record-archive { margin-top: 18px; border-style: dashed; background: rgba(255,255,255,.50); box-shadow: none; }
.completed-record-archive > summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto 22px; gap: 12px; align-items: center; min-height: 58px; padding: 11px 15px; cursor: pointer; list-style: none; }
.completed-record-archive > summary span { color: #4d4e52; font-size: 12px; font-weight: 750; }
.completed-record-archive > summary strong { color: #18764b; font-size: 11px; }
.completed-record-archive > summary small { color: #8b8c91; font-size: 9px; }
.completed-record-archive > .production-index-list,.completed-record-archive > .shipment-index-list { padding: 10px; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .inventory-search-panel { border-radius: 17px; }
  .inventory-search-panel form { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 17px; }
  .inventory-query-or { display: none; }
  .inventory-stock-only { align-self: end; }
  .inventory-search-actions { align-self: end; justify-content: flex-end; }
  .inventory-search-guide { justify-content: flex-start; overflow-x: auto; padding: 12px 17px; }
  .inventory-search-guide p { flex: 0 0 auto; }
  .inventory-warehouse-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-warehouse-tab { min-height: 104px; padding: 12px 13px; }
  .inventory-matrix { min-width: 640px; }
  .inventory-matrix thead th:first-child { width: 138px; }
  .inventory-matrix tbody th img { width: 42px; height: 38px; }
  .inventory-query-row > summary { grid-template-columns: 58px minmax(0,1fr) 20px; gap: 10px; min-height: 80px; padding: 10px 12px; }
  .inventory-query-row > summary img { width: 54px; height: 52px; }
  .inventory-query-numbers { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3,1fr); }
  .inventory-query-row > summary > em { grid-column: 3; grid-row: 1; }
  .inventory-lot-detail { padding: 12px; }
  .inventory-lot-detail > span { grid-template-columns: minmax(88px,1fr) minmax(70px,.7fr) repeat(3,auto); gap: 7px; }
  .metric-card { min-height: 92px; padding: 13px; }
  .metric-value { margin-top: 6px; font-size: 30px; }
  .metric-hint { margin-top: 7px; font-size: 8px; }
  .demand-index-toggle,.flow-order-toggle,.reprint-bundle-toggle,.production-index-card > summary,.shipment-index-card > summary { grid-template-columns: minmax(0,1fr) auto 20px; gap: 9px; min-height: 70px; padding: 11px 12px; }
  .demand-index-compact,.flow-order-compact-meta,.reprint-bundle-compact-meta,.production-index-meta { grid-column: 1; grid-row: 2; display: flex; gap: 7px; }
  .demand-index-toggle > .status-pill,.flow-order-toggle > .status-pill,.reprint-bundle-toggle > .status-pill,.production-index-card > summary > .status-pill,.shipment-index-card > summary > .status-pill { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .demand-toggle-icon,.flow-toggle-icon,.reprint-bundle-icon,.production-index-card > summary > i,.shipment-index-card > summary > i { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .demand-index-card.finished .demand-index-toggle { min-height: 58px; }
  .demand-index-detail { padding: 16px; }
  .manager-demand-card.compact { padding: 12px 13px; }
  .completed-record-archive > summary { grid-template-columns: minmax(0,1fr) auto 20px; }
  .completed-record-archive > summary small { grid-column: 1; grid-row: 2; }
  .completed-record-archive > summary i { grid-column: 3; grid-row: 1 / 3; }
  .dashboard-detail-head { grid-template-columns: 1fr; gap: 13px; }
  .dashboard-detail-head .button { width: max-content; }
}

@media (max-width: 430px) {
  .production-order-form .item-builder { padding: 11px; }
  .production-order-form .color-picker { gap: 5px; margin: 8px 0; }
  .production-order-form .color-choice { min-height: 74px; grid-template-rows: 43px auto; padding: 4px; }
  .production-order-form .color-choice .product-photo { height: 43px; }
  .production-order-form .color-choice input { width: 13px; height: 13px; top: 6px; left: 6px; }
  .production-order-form .color-choice strong { font-size: 8px; }
  .production-order-form .material-entry { padding: 8px; }
  .production-order-form .add-detail-bar strong { font-size: 10px; }
  .inventory-search-panel form { grid-template-columns: 1fr; }
  .inventory-stock-only { min-height: 52px; }
  .inventory-search-actions { display: grid; grid-template-columns: .7fr 1.3fr; }
  .inventory-search-actions .button { width: 100%; }
  .inventory-search-guide { display: none; }
  .inventory-warehouse-heading { align-items: start; }
  .inventory-warehouse-heading > small { max-width: 48%; text-align: right; line-height: 1.45; }
  .inventory-warehouse-tabs { gap: 8px; }
  .inventory-warehouse-tab { min-height: 101px; padding: 11px 12px; border-radius: 15px; }
  .inventory-warehouse-tab > strong { font-size: 25px; }
  .inventory-result-head { align-items: flex-start; }
  .inventory-result-head h3 { font-size: 19px; }
  .inventory-total { padding: 8px 10px; font-size: 9px; }
  .inventory-query-name strong { font-size: 14px; }
  .inventory-lot-detail > span { grid-template-columns: 1fr auto; gap: 5px 10px; }
  .inventory-lot-detail > span i { display: none; }
  .metric-detail-list article { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; padding: 8px; }
  .metric-detail-list img { width: 46px; height: 40px; }
  .metric-detail-list article > div strong { font-size: 10px; }
  .status-pill { padding: 6px 8px; font-size: 9px; }
}