:root {
  color-scheme: light;
  --asl-color-brand-primary: #884838;
  --asl-color-brand-secondary: #A86848;
  --asl-color-brand-tertiary: #B87858;
  --asl-color-brand-highlight: #C87858;
  --asl-color-brand-highlight-soft: #C88868;
  --asl-color-brand-deep: #784828;
  --asl-color-bg-page: #F7F5F2;
  --asl-color-bg-surface: #FFFFFF;
  --asl-color-bg-subtle: #F1EEEA;
  --asl-color-bg-muted: #EDE7E1;
  --asl-color-bg-brand-subtle: #F4ECE7;
  --asl-color-text-primary: #2F2F2F;
  --asl-color-text-secondary: #5F5A55;
  --asl-color-text-tertiary: #8A8178;
  --asl-color-text-disabled: #B7AEA6;
  --asl-color-text-inverse: #FFFFFF;
  --asl-color-border-subtle: #E8E1DC;
  --asl-color-border-default: #D8CEC6;
  --asl-color-border-strong: #BFAEA2;
  --asl-color-border-brand: #A86848;
  --asl-color-info: #2563EB;
  --asl-color-info-bg: #EFF6FF;
  --asl-color-success: #16A34A;
  --asl-color-success-bg: #F0FDF4;
  --asl-color-warning: #D97706;
  --asl-color-warning-bg: #FFFBEB;
  --asl-color-danger: #DC2626;
  --asl-color-danger-bg: #FEF2F2;
  --asl-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --asl-font-size-body: 14px;
  --asl-font-size-caption: 12px;
  --asl-line-height-body: 22px;
  --asl-line-height-caption: 18px;
  --asl-radius-sm: 4px;
  --asl-radius-md: 8px;
  --asl-radius-lg: 12px;
  --asl-radius-xl: 16px;
  --asl-radius-pill: 9999px;
  --asl-shadow-border: 0 0 0 1px rgba(47, 47, 47, 0.08);
  --asl-shadow-card: 0 1px 2px rgba(47, 47, 47, 0.06), 0 8px 24px rgba(47, 47, 47, 0.06);
  --asl-shadow-popover: 0 12px 32px rgba(47, 47, 47, 0.16);
  --asl-shadow-brand-soft: 0 8px 24px rgba(136, 72, 56, 0.14);

  --bg: var(--asl-color-bg-page);
  --card: var(--asl-color-bg-surface);
  --text: var(--asl-color-text-primary);
  --muted: var(--asl-color-text-secondary);
  --line: var(--asl-color-border-subtle);
  --primary: var(--asl-color-brand-primary);
  --primary-2: var(--asl-color-brand-deep);
  --orange: var(--asl-color-warning);
  --green: var(--asl-color-success);
  --red: var(--asl-color-danger);
  --shadow: var(--asl-shadow-card);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; font-family: var(--asl-font-sans); background: var(--asl-color-bg-page); color: var(--asl-color-text-primary); }
body { padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { max-width: 540px; margin: 0 auto; min-height: 100vh; }
.hero {
  --hero-bg: linear-gradient(160deg, #884838 0%, #A86848 58%, #C88868 100%);
  position: relative;
  z-index: 1;
  padding: calc(14px + env(safe-area-inset-top)) 14px 12px;
  background: var(--hero-bg);
  color: var(--asl-color-text-inverse);
  box-shadow: var(--asl-shadow-brand-soft);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
.hero-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.eyebrow { margin: 0 0 4px; font-size: 12px; opacity: .82; letter-spacing: .08em; }
h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.sub { margin: 6px 0 0; color: rgba(255,255,255,.84); font-size: 13px; line-height: 1.45; }
.export-link { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 34px; border-radius: var(--asl-radius-pill); color: white; text-decoration: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); font-size: 13px; font-weight: 700; }
.export-link:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(200, 136, 104, .36); outline-offset: 2px; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 14px 0 12px; }
.summary-card { width: 100%; min-height: 78px; text-align: left; color: white; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: var(--asl-radius-lg); padding: 10px; cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.summary-card.status-summary { background: rgba(255,255,255,.10); }
.summary-card.status-ordered { border-color: rgba(255,255,255,.34); background: rgba(95,90,85,.24); }
.summary-card.status-cancelled { border-color: rgba(254,202,202,.55); background: rgba(220,38,38,.20); }
.summary-card.status-next-batch { border-color: rgba(253,230,138,.62); background: rgba(217,119,6,.20); }
.summary-card.status-quoting { border-color: rgba(191,219,254,.55); background: rgba(37,99,235,.18); }
.summary-card.status-quoted { border-color: rgba(187,247,208,.50); background: rgba(22,163,74,.16); }
.summary-card:active { transform: scale(.98); }
.summary-card.active { background: rgba(244,236,231,.24); border-color: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.summary-grid b { display: block; font-size: 20px; line-height: 1; }
.summary-grid span { display: block; margin-top: 5px; font-size: 11px; color: rgba(255,255,255,.78); }
.summary-grid small { display: block; margin-top: 5px; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.2; }
.toolbar { display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
.toolbar input, .toolbar select, .name-bar input { width: 100%; height: 42px; border: 1px solid rgba(255,255,255,.34); border-radius: var(--asl-radius-lg); padding: 0 12px; outline: none; background: rgba(255,255,255,.96); color: var(--asl-color-text-primary); box-shadow: 0 1px 0 rgba(136,72,56,.04); }
.toolbar input::placeholder, .name-bar input::placeholder { color: var(--asl-color-text-tertiary); }
.toolbar input:focus, .toolbar select:focus, .name-bar input:focus, .modal input:focus, .modal textarea:focus { border-color: var(--asl-color-border-brand); box-shadow: 0 0 0 4px rgba(168,104,72,.18); }
.toolbar select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8A8178 50%), linear-gradient(135deg, #8A8178 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
#categorySelect, #batchSelect { grid-column: 1 / -1; }
.name-bar { margin-top: 8px; }
.view-hint { margin-top: 8px; min-height: 38px; border-radius: var(--asl-radius-lg); padding: 8px 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.84); font-size: 12px; }
.view-hint b { color: white; }
.view-hint button { flex: 0 0 auto; height: 28px; border: 0; border-radius: var(--asl-radius-pill); padding: 0 10px; background: rgba(255,255,255,.92); color: var(--asl-color-brand-deep); font-size: 12px; font-weight: 800; }
.pagination-bar { padding: 12px 14px 0; }
.pagination-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--asl-color-border-subtle); border-radius: var(--asl-radius-xl); background: rgba(255,255,255,.82); box-shadow: var(--asl-shadow-border); }
.pagination-info { color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.45; }
.pagination-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.page-btn { min-width: 34px; height: 32px; border: 1px solid var(--asl-color-border-default); border-radius: var(--asl-radius-md); background: var(--asl-color-bg-surface); color: var(--asl-color-text-secondary); font-size: 12px; font-weight: 800; }
.page-btn.active { border-color: var(--asl-color-border-brand); background: var(--asl-color-bg-brand-subtle); color: var(--asl-color-brand-primary); }
.page-btn:disabled { opacity: .46; cursor: not-allowed; }
.page-ellipsis { color: var(--asl-color-text-tertiary); font-weight: 800; }
.page-size-label { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--asl-color-text-secondary); font-size: 12px; }
.page-size-label select { height: 32px; min-width: 62px; border: 1px solid var(--asl-color-border-default); border-radius: var(--asl-radius-md); background: var(--asl-color-bg-surface); color: var(--asl-color-text-primary); padding: 0 7px; }
.product-list { padding: 14px; display: grid; gap: 14px; }
.product-card { background: var(--asl-color-bg-surface); border-radius: 20px; overflow: hidden; box-shadow: var(--asl-shadow-border); border: 1px solid var(--asl-color-border-subtle); }
.product-img-wrap, .ordered-image-frame { position: relative; background: var(--asl-color-bg-subtle); min-height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img { width: 100%; display: block; max-height: 420px; object-fit: contain; background: var(--asl-color-bg-subtle); }
.ordered-image-zoom { cursor: zoom-in; transition: transform .22s ease; transform-origin: center; }
.ordered-image-frame:hover .ordered-image-zoom { transform: scale(1.08); }
.image-nav { position: absolute; top: 50%; z-index: 2; width: 38px; height: 42px; transform: translateY(-50%); border: 0; border-radius: var(--asl-radius-md); background: rgba(47,47,47,.48); color: white; font-size: 28px; line-height: 1; box-shadow: var(--asl-shadow-popover); }
.image-nav.prev { left: 10px; }
.image-nav.next { right: 10px; }
.image-count { position: absolute; right: 10px; bottom: 10px; min-height: 24px; padding: 3px 8px; border-radius: var(--asl-radius-pill); background: rgba(47,47,47,.62); color: white; font-size: 12px; font-weight: 800; backdrop-filter: blur(8px); }
.badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border-radius: var(--asl-radius-pill); background: rgba(120,72,40,.86); color: white; backdrop-filter: blur(8px); font-size: 12px; }
.badge.ok { background: rgba(22, 163, 74, .9); }
.badge.full { background: rgba(220, 38, 38, .9); }
.badge.pk { background: rgba(217, 119, 6, .94); }
.badge.ordered { background: rgba(95, 90, 85, .92); }
.card-body { padding: 12px; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-title h3 { margin: 0; font-size: 17px; line-height: 1.28; }
.product-id { color: var(--asl-color-text-tertiary); font-size: 12px; white-space: nowrap; padding-top: 2px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.meta span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: var(--asl-radius-pill); background: var(--asl-color-bg-subtle); color: var(--asl-color-text-secondary); font-size: 12px; }
.meta .status-chip { background: var(--asl-color-bg-muted); color: var(--asl-color-text-primary); font-weight: 800; }
.product-card.ordered-card { border-color: rgba(95,90,85,.30); }
.moq-panel { margin: 10px 0; padding: 10px; border-radius: var(--asl-radius-lg); border: 1px solid var(--asl-color-border-subtle); background: #FCFAF8; }
.moq-panel.reached { border-color: rgba(22, 163, 74, .35); background: var(--asl-color-success-bg); }
.moq-panel.pending { border-color: rgba(217, 119, 6, .30); background: var(--asl-color-warning-bg); }
.moq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.35; }
.moq-head span { color: var(--asl-color-text-primary); font-weight: 700; }
.moq-head b { color: var(--asl-color-warning); text-align: right; }
.moq-panel.reached .moq-head b { color: var(--asl-color-success); }
.moq-progress { height: 8px; margin-top: 8px; overflow: hidden; border-radius: var(--asl-radius-pill); background: rgba(47,47,47,.10); }
.moq-progress i { display: block; height: 100%; border-radius: inherit; background: var(--asl-color-warning); }
.moq-panel.reached .moq-progress i { background: var(--asl-color-success); }
.moq-panel p { margin: 7px 0 0; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.45; }
.moq-panel .drive-tip { color: #15803d; font-weight: 700; }
.quota-panel { margin: 10px 0; padding: 10px; border-radius: var(--asl-radius-lg); border: 1px solid rgba(37,99,235,.22); background: var(--asl-color-info-bg); color: #1e3a8a; display: grid; gap: 4px; }
.quota-panel b, .allocation-panel b, .status-panel b { font-size: 13px; }
.quota-panel span, .allocation-panel span, .status-panel span { font-size: 12px; line-height: 1.45; }
.quota-panel.ok { border-color: rgba(22,163,74,.28); background: var(--asl-color-success-bg); color: #166534; }
.quota-panel.empty { border-color: rgba(220,38,38,.26); background: var(--asl-color-danger-bg); color: #991b1b; }
.quota-panel.pending { border-color: rgba(217,119,6,.30); background: var(--asl-color-warning-bg); color: #9a3412; }
.allocation-panel { margin: 10px 0; padding: 10px; border-radius: var(--asl-radius-lg); border: 1px solid rgba(37,99,235,.20); background: var(--asl-color-info-bg); color: #1e3a8a; display: grid; gap: 4px; }
.allocation-panel.ok { border-color: rgba(22,163,74,.26); background: var(--asl-color-success-bg); color: #166534; }
.allocation-panel.over { border-color: rgba(37,99,235,.22); background: var(--asl-color-info-bg); color: #1e3a8a; }
.allocation-panel.pk { border-color: rgba(217,119,6,.34); background: var(--asl-color-warning-bg); color: #92400e; }
.status-panel { margin: 10px 0; padding: 10px; border-radius: var(--asl-radius-lg); display: grid; gap: 4px; border: 1px solid rgba(95,90,85,.24); background: var(--asl-color-bg-subtle); color: var(--asl-color-text-secondary); }
.status-panel.ordered { border-color: rgba(95,90,85,.30); background: var(--asl-color-bg-muted); color: var(--asl-color-text-primary); }
.order-review-card { border-color: rgba(136,72,56,.22); box-shadow: var(--asl-shadow-card); }
.order-review-card .card-body { background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF8 100%); }
.order-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.order-fact-grid div { min-height: 58px; padding: 9px 10px; border: 1px solid var(--asl-color-border-subtle); border-radius: var(--asl-radius-lg); background: var(--asl-color-bg-surface); }
.order-fact-grid span { display: block; color: var(--asl-color-text-tertiary); font-size: 11px; }
.order-fact-grid b { display: block; margin-top: 4px; color: var(--asl-color-text-primary); font-size: 15px; line-height: 1.25; word-break: break-all; }
.merchant-code-status { margin: 10px 0; padding: 10px; border-radius: var(--asl-radius-lg); display: grid; gap: 4px; border: 1px solid var(--asl-color-border-default); background: var(--asl-color-bg-subtle); }
.merchant-code-status b { font-size: 13px; }
.merchant-code-status span { color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.45; word-break: break-all; }
.merchant-code-status.ready { border-color: rgba(22,163,74,.30); background: var(--asl-color-success-bg); color: #166534; }
.merchant-code-status.partial { border-color: rgba(217,119,6,.34); background: var(--asl-color-warning-bg); color: #92400e; }
.merchant-code-status.missing { border-color: rgba(220,38,38,.30); background: var(--asl-color-danger-bg); color: #991b1b; }
.operator-qty-card, .quote-row-card { margin: 10px 0; padding: 10px; border: 1px solid var(--asl-color-border-subtle); border-radius: var(--asl-radius-lg); background: var(--asl-color-bg-surface); }
.operator-qty-card ul, .quote-row-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.operator-qty-card li, .quote-row-card li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.45; }
.operator-qty-card li span, .quote-row-card li span { min-width: 0; }
.operator-qty-card li b, .quote-row-card li b { color: var(--asl-color-text-primary); }
.operator-qty-card li strong, .quote-row-card li strong { color: var(--asl-color-brand-primary); white-space: nowrap; text-align: right; }
.quote-row-card li strong small { display: block; color: var(--asl-color-text-tertiary); font-weight: 700; }
.quote-row-card p { margin: 8px 0 0; color: var(--asl-color-text-tertiary); font-size: 12px; line-height: 1.45; }
.signup-detail { margin: 10px 0; padding: 10px; border: 1px solid var(--asl-color-border-subtle); border-radius: var(--asl-radius-lg); background: var(--asl-color-bg-surface); }
.signup-title { color: var(--asl-color-text-primary); font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.signup-detail ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.signup-detail li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.45; }
.signup-detail li b { color: var(--asl-color-text-primary); }
.signup-detail li em { display: block; margin-top: 2px; color: var(--asl-color-text-tertiary); font-style: normal; }
.signup-detail li strong { color: var(--asl-color-brand-primary); white-space: nowrap; text-align: right; display: grid; gap: 2px; justify-items: end; }
.signup-detail li strong i { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: var(--asl-radius-pill); background: var(--asl-color-bg-subtle); color: var(--asl-color-text-primary); font-style: normal; font-weight: 800; }
.signup-detail li.selected strong i { background: #dcfce7; color: #166534; }
.signup-detail li.pending_pk strong i { background: #fef3c7; color: #92400e; }
.signup-detail li.waitlist strong i { background: #e0f2fe; color: #075985; }
.signup-detail li.ineligible strong i,
.signup-detail li.no_quota_record strong i { background: #fee2e2; color: #991b1b; }
.signup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--asl-color-border-subtle); }
.signup-names { flex: 1; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.55; }
.signup-names b { color: var(--asl-color-text-primary); font-weight: 600; }
.signup-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.signup-btn, .primary-btn { border: 0; border-radius: var(--asl-radius-md); background: var(--asl-color-brand-primary); color: white; font-weight: 700; }
.signup-btn { min-width: 92px; height: 42px; padding: 0 13px; }
.signup-btn:hover:not(:disabled), .primary-btn:hover:not(:disabled) { background: var(--asl-color-brand-deep); }
.signup-btn:disabled { background: var(--asl-color-bg-muted); color: var(--asl-color-text-tertiary); }
.cancel-btn { border: 1px solid #fecaca; border-radius: var(--asl-radius-md); min-width: 62px; height: 42px; padding: 0 12px; background: #fff1f2; color: #b91c1c; font-weight: 800; }
.cancel-btn:disabled { opacity: .58; }
.empty-state { margin: 34px 14px; padding: 28px 16px; text-align: center; border: 1px dashed var(--asl-color-border-default); border-radius: var(--asl-radius-xl); color: var(--asl-color-text-secondary); background: var(--asl-color-bg-surface); box-shadow: var(--asl-shadow-border); }
.empty-state b { display: block; color: var(--asl-color-text-primary); font-size: 16px; }
.empty-state p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.empty-reset { margin-top: 14px; height: 38px; border: 1px solid var(--asl-color-border-brand); border-radius: var(--asl-radius-md); padding: 0 14px; color: var(--asl-color-brand-primary); background: var(--asl-color-bg-brand-subtle); font-weight: 800; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(47, 47, 47, .46); display: flex; align-items: flex-end; justify-content: center; }
.modal { width: min(540px, 100%); max-height: calc(100vh - 28px); overflow: auto; background: var(--asl-color-bg-surface); border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--asl-shadow-popover); }
.modal-handle { width: 44px; height: 5px; border-radius: var(--asl-radius-pill); background: var(--asl-color-border-default); margin: 3px auto 12px; }
.modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.modal-kicker { margin: 0 0 4px; color: var(--asl-color-text-tertiary); font-size: 12px; }
.modal h2 { margin: 0 0 10px; font-size: 20px; }
.icon-btn { border: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--asl-color-bg-subtle); color: var(--asl-color-text-secondary); font-size: 24px; line-height: 1; }
.modal label { display: block; margin-top: 11px; font-size: 13px; color: var(--asl-color-text-primary); font-weight: 700; }
.modal label span { color: var(--asl-color-danger); margin-left: 2px; }
.modal input, .modal textarea { width: 100%; margin-top: 6px; border: 1px solid var(--asl-color-border-default); border-radius: var(--asl-radius-lg); padding: 11px 12px; outline: none; background: var(--asl-color-bg-surface); color: var(--asl-color-text-primary); }
.modal textarea { resize: vertical; }
.primary-btn { width: 100%; height: 48px; margin-top: 15px; font-size: 16px; }
.primary-btn[disabled] { opacity: .55; }
.form-tip { margin: 10px 2px 0; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.5; }
.image-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(47,47,47,.78); backdrop-filter: blur(8px); }
.image-lightbox figure { width: min(1120px, 100%); max-height: calc(100vh - 56px); margin: 0; display: grid; gap: 10px; justify-items: center; }
.image-lightbox img { max-width: 100%; max-height: calc(100vh - 112px); object-fit: contain; border-radius: var(--asl-radius-lg); background: var(--asl-color-bg-surface); box-shadow: var(--asl-shadow-popover); }
.image-lightbox figcaption { color: white; font-size: 13px; line-height: 1.45; text-align: center; }
.image-lightbox-close { position: fixed; top: 16px; right: 16px; z-index: 91; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.16); color: white; font-size: 28px; line-height: 1; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; width: calc(100% - 32px); max-width: 480px; background: rgba(47,47,47,.96); color: white; border-radius: var(--asl-radius-lg); padding: 12px 14px; text-align: center; box-shadow: var(--asl-shadow-popover); }
@media (min-width: 541px) {
  body { background: var(--asl-color-bg-page); }
  .app-shell { background: transparent; }
}

@media (min-width: 900px) {
  body { padding: 22px 24px 36px; background: linear-gradient(135deg, #F1EEEA 0%, #F7F5F2 100%); }
  .app-shell { max-width: 1440px; min-height: auto; background: transparent; }
  .hero {
    position: relative;
    top: auto;
    padding: 22px 24px;
    border-radius: 28px;
    box-shadow: var(--asl-shadow-brand-soft);
  }
  .hero-top { align-items: center; }
  h1 { font-size: 34px; }
  .sub { font-size: 14px; }
  .export-link { min-width: 82px; height: 40px; font-weight: 700; }
  .summary-grid { grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 12px; margin: 18px 0 14px; }
  .summary-card { min-height: 80px; padding: 14px 16px; }
  .summary-grid b { font-size: 28px; }
  .summary-grid span { font-size: 12px; }
  .toolbar { grid-template-columns: minmax(320px, 1fr) 150px 180px 220px; gap: 12px; }
  #categorySelect, #batchSelect { grid-column: auto; }
  .toolbar input, .toolbar select, .name-bar input { height: 46px; border-radius: var(--asl-radius-lg); font-size: 15px; }
  .name-bar { max-width: 520px; }
  .pagination-bar { padding: 14px 0 0; }
  .pagination-inner { padding: 12px 14px; }
  .product-list {
    padding: 22px 0 0;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
    align-items: start;
  }
  .product-card { border-radius: 22px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .product-card:hover { transform: translateY(-2px); box-shadow: var(--asl-shadow-card); border-color: var(--asl-color-border-default); }
  .product-img-wrap, .ordered-image-frame { min-height: 240px; height: 260px; }
  .product-img { height: 100%; max-height: none; object-fit: contain; }
  .card-body { padding: 14px; }
  .card-title h3 { font-size: 18px; }
  .meta span { font-size: 12px; }
  .signup-detail { max-height: 145px; overflow: auto; }
  .signup-btn { min-width: 104px; cursor: pointer; }
  .order-fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cancel-btn, .empty-reset, .summary-card, .export-link, .view-hint button, .page-btn, .image-nav, .image-lightbox-close { cursor: pointer; }
  .modal-backdrop { align-items: center; padding: 24px; }
  .modal { width: min(680px, 100%); border-radius: 24px; padding: 18px 22px 22px; box-shadow: var(--asl-shadow-popover); }
  .modal-handle { display: none; }
  .toast { max-width: 560px; }
}

@media (min-width: 1280px) {
  .product-list { grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); }
  .product-img-wrap, .ordered-image-frame { height: 280px; }
}

/* 采购单工作台 · ASL desktop-first local dev */
.order-shell { max-width: 1440px; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.export-link.ghost { background: rgba(255,255,255,.08); }
.export-link button, button.export-link { cursor: pointer; }
.order-rule-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.order-rule-strip span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--asl-radius-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.88); font-size: 12px; }
.order-summary-grid .summary-card.static { cursor: default; color: var(--asl-color-text-primary); background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.56); }
.order-summary-grid .summary-card.static span { color: var(--asl-color-text-secondary); }
.order-summary-grid .summary-card.static small { color: var(--asl-color-text-tertiary); }
.order-summary-grid .summary-card.static.danger b { color: var(--asl-color-danger); }
.order-summary-grid .summary-card.static.warn b { color: var(--asl-color-warning); }
.order-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.toggle-row { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: var(--asl-radius-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; }
.toggle-row input { width: 16px; height: 16px; accent-color: var(--asl-color-brand-primary); }
.primary-btn.compact { width: auto; min-width: 168px; height: 40px; margin-top: 0; padding: 0 16px; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 8px 20px rgba(47,47,47,.12); }
.integration-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--asl-radius-lg); background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.9); font-size: 12px; }
.integration-status b { color: white; }
.mini-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--asl-radius-pill); font-size: 11px; font-weight: 800; background: rgba(255,255,255,.92); color: var(--asl-color-text-secondary); }
.mini-pill.ok { color: var(--asl-color-success); }
.mini-pill.danger { color: var(--asl-color-danger); }
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 0 0; }
.order-section, .order-side-panel { min-width: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: 22px; color: var(--asl-color-text-primary); }
.order-groups { display: grid; gap: 14px; }
.order-group-card, .side-card { background: var(--asl-color-bg-surface); border: 1px solid var(--asl-color-border-subtle); border-radius: var(--asl-radius-xl); box-shadow: var(--asl-shadow-border); }
.order-group-card { overflow: hidden; }
.order-group-card.ready { border-color: rgba(22,163,74,.26); }
.order-group-card.blocked { border-color: rgba(217,119,6,.26); }
.order-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 16px 12px; border-bottom: 1px solid var(--asl-color-border-subtle); }
.order-group-head h3 { margin: 0; font-size: 18px; color: var(--asl-color-text-primary); }
.order-group-head p { margin: 5px 0 0; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.5; }
.group-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--asl-radius-pill); font-weight: 800; font-size: 12px; }
.group-status.ok { color: var(--asl-color-success); background: var(--asl-color-success-bg); }
.group-status.danger { color: var(--asl-color-warning); background: var(--asl-color-warning-bg); }
.order-group-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 16px; background: var(--asl-color-bg-subtle); border-bottom: 1px solid var(--asl-color-border-subtle); }
.order-group-metrics span { min-height: 34px; padding: 7px 9px; border-radius: var(--asl-radius-md); background: var(--asl-color-bg-surface); color: var(--asl-color-text-secondary); font-size: 12px; }
.order-group-metrics b { color: var(--asl-color-text-primary); font-size: 16px; }
.group-alert { margin: 12px 16px 0; padding: 10px 12px; border-radius: var(--asl-radius-lg); font-size: 12px; line-height: 1.5; }
.group-alert ul { margin: 6px 0 0 18px; padding: 0; }
.group-alert p { margin: 6px 0 0; }
.group-alert.danger { background: var(--asl-color-danger-bg); color: #991B1B; border: 1px solid #FECACA; }
.group-alert.warn { background: var(--asl-color-warning-bg); color: #92400E; border: 1px solid #FDE68A; }
.order-table-wrap { overflow: auto; padding: 12px 16px 16px; }
.order-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.order-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 9px 10px; color: var(--asl-color-text-secondary); background: var(--asl-color-bg-subtle); border-top: 1px solid var(--asl-color-border-subtle); border-bottom: 1px solid var(--asl-color-border-subtle); }
.order-table td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--asl-color-border-subtle); color: var(--asl-color-text-primary); }
.order-table td small { display: block; margin-top: 3px; color: var(--asl-color-text-tertiary); }
.po-product-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.po-product-cell img, .po-product-cell i { width: 56px; height: 56px; border-radius: var(--asl-radius-md); object-fit: cover; background: var(--asl-color-bg-subtle); border: 1px solid var(--asl-color-border-subtle); }
.po-product-cell i { display: inline-flex; align-items: center; justify-content: center; color: var(--asl-color-text-tertiary); font-style: normal; }
.po-product-cell b, .po-product-cell span, .po-product-cell small { display: block; }
.line-issues { display: inline-flex; max-width: 260px; padding: 6px 8px; border-radius: var(--asl-radius-md); line-height: 1.45; }
.line-issues.danger { color: #991B1B; background: var(--asl-color-danger-bg); }
.line-issues.warn { color: #92400E; background: var(--asl-color-warning-bg); }
.line-issues.ok { color: var(--asl-color-success); background: var(--asl-color-success-bg); }
.order-side-panel { display: grid; gap: 14px; align-content: start; }
.side-card { padding: 14px; }
.side-card h3 { margin: 0 0 10px; font-size: 16px; color: var(--asl-color-text-primary); }
.side-card ol, .side-card ul { margin: 0; padding-left: 20px; color: var(--asl-color-text-secondary); font-size: 12px; line-height: 1.58; }
.payload-card { padding: 0; overflow: hidden; }
.payload-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--asl-color-border-subtle); }
.payload-head h3 { margin: 0; }
.payload-head button { height: 30px; border: 1px solid var(--asl-color-border-brand); border-radius: var(--asl-radius-md); background: var(--asl-color-bg-brand-subtle); color: var(--asl-color-brand-primary); font-size: 12px; font-weight: 800; }
#payloadPreview { max-height: 460px; overflow: auto; margin: 0; padding: 12px 14px; background: #2F2F2F; color: #F7F5F2; font-size: 11px; line-height: 1.55; }

@media (min-width: 900px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .order-group-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .order-summary-grid { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
}

@media (max-width: 899px) {
  .order-shell { max-width: 540px; }
  .order-hero .hero-top { flex-direction: column; }
  .hero-actions { justify-content: flex-start; }
  .order-layout { padding: 14px; }
  .section-head { padding: 0 2px; }
  .order-side-panel { order: -1; }
}