:root {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #20342b; background: #f4f6f5; font-synthesis: none;
  --ink: #20342b; --muted: #53665d; --green: #174f40; --green-hover: #0d4032;
  --surface: #fff; --soft: #edf4ef; --line: #c9d4ce; --focus: #006b4b;
  --danger: #9b3025; --danger-bg: #fff0ed; --warning: #784700; --warning-bg: #fff4df;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; }
::selection { background: #cee8db; color: #143d2f; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; background: #e5ebe7; color: #5a6c62; border-color: #ccd6cf; }
button[aria-busy="true"] { cursor: progress; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #758b7e; border-radius: 6px; padding: 10px 12px; background: var(--surface); color: var(--ink); caret-color: var(--green); }
input::placeholder, textarea::placeholder { color: #5e7066; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--danger); }
textarea { font-family: Consolas, "Microsoft YaHei", monospace; font-size: 14px; line-height: 1.6; resize: vertical; }
label { display: block; font-size: 14px; font-weight: 600; margin: var(--s4) 0 var(--s2); }
label > input, label > select, label > textarea { display: block; margin-top: var(--s2); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 26px; line-height: 1.3; font-weight: 700; margin-bottom: var(--s2); }
h2 { font-size: 18px; line-height: 1.4; margin-bottom: var(--s4); font-weight: 650; }
h3 { font-size: 16px; margin: var(--s5) 0 var(--s3); }
p { margin-bottom: var(--s3); overflow-wrap: anywhere; }
a { color: var(--green); text-underline-offset: 3px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.green { color: var(--green); }
.full { width: 100%; }
.primary, .secondary, .text-button { min-height: 44px; border-radius: 6px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-size: 14px; font-weight: 600; border: 1px solid transparent; line-height: 1.4; text-decoration: none; }
.primary { color: #fff; background: var(--green); }
.secondary { color: var(--green); background: var(--surface); border-color: #8ca395; }
.text-button { color: var(--green); background: transparent; padding: 10px 8px; text-decoration: underline; text-underline-offset: 4px; }
.danger-button { color: var(--danger); }
@media (hover:hover) { .primary:hover:not(:disabled) { background: var(--green-hover); } .secondary:hover:not(:disabled), .text-button:hover:not(:disabled) { background: var(--soft); } .nav:hover { background: var(--soft); } .product:hover { border-color: var(--green); } }
button:active:not(:disabled), .secondary:active { filter: brightness(.95); }
.badge, .status { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #b2cbbd; border-radius: 4px; background: var(--soft); color: #24533e; font-size: 13px; font-weight: 600; line-height: 1.5; }
.status.unknown, .status.pending { color: var(--warning); background: var(--warning-bg); border-color: #d5b27c; }
.status.failed, .status.error { color: var(--danger); background: var(--danger-bg); border-color: #ddb1a8; }
.mode-banner { position: sticky; top: 0; z-index: 20; min-height: 36px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s3); padding: 6px 12px; background: #173f32; color: #f1faf4; font-size: 13px; }
.mode-banner strong { font-weight: 700; }
.wordmark { font-size: 26px; font-weight: 750; letter-spacing: -.6px; color: var(--green); }
.wordmark span { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.login-layout { min-height: calc(100dvh - 36px); display: grid; place-items: center; padding: var(--s6); }
.login-card { width: min(100%, 440px); background: var(--surface); padding: var(--s8); border: 1px solid var(--line); border-radius: 10px; }
.login-card .wordmark { margin-bottom: var(--s8); }
.login-help { border-top: 1px solid var(--line); margin: var(--s6) 0 0; padding-top: var(--s4); }
.login-card .primary { margin-top: var(--s2); }
.error { color: var(--danger); font-size: 14px; line-height: 1.6; }
.error:empty { display: none; }
#login-error { margin-top: var(--s3); }
.workspace { min-height: calc(100dvh - 36px); }
.sidebar { background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s3) var(--s4); }
.sidebar .wordmark { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s3); }
.sidebar nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s1); }
.nav { border: 1px solid transparent; background: transparent; border-radius: 6px; min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 550; padding: 10px 8px; text-align: center; }
.nav.active { background: #e4f0e8; color: #143f2d; border-color: #bfd3c5; font-weight: 700; }
.sidebar-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s2); }
.sidebar-bottom p { margin: 0; }
.sidebar-bottom br { display: none; }
.content { width: 100%; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 0 var(--s4); }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.page { padding-top: var(--s5); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-heading p { margin: 0; max-width: 70ch; font-size: 14px; }
.account-strip { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s5); }
.account-strip > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s4); row-gap: var(--s1); min-width: 0; }
.account-strip strong, .account-strip #summary-email { overflow-wrap: anywhere; }
.account-strip button { flex-shrink: 0; }
.account-list-card { margin-bottom: var(--s5); }
.account-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s3); border-top:1px solid var(--line); padding:var(--s4) 0; }
.account-row > div:first-child { flex:1 1 250px; min-width:0; }
.account-row strong { display:block; overflow-wrap:anywhere; margin-bottom:var(--s1); }
.account-row p { margin:var(--s1) 0 0; }
.account-row.selected { background:var(--soft); border-radius:4px; padding-left:var(--s3); padding-right:var(--s3); }
.account-memory-note { border-top:1px solid var(--line); padding-top:var(--s3); margin:0; }
.privacy-control { font-size:13px; }
.price-summary { border-top:1px solid var(--line); margin-top:var(--s4); padding-top:var(--s4); }
.price-summary h3 { margin:0 0 var(--s3); }
.price-summary dl { margin:0 0 var(--s2); gap:var(--s2); }
.price-summary dd { text-align:right; }
.price-summary dd:last-child { color:var(--green); font-size:20px; font-weight:700; }
.payment-method { border-top:1px solid var(--line); padding-top:var(--s3); font-size:14px; font-weight:600; margin:var(--s3) 0 0; }
.payment-method span { display:block; font-weight:400; margin-top:var(--s1); }
.order-layout, .two-column { display: grid; gap: var(--s5); align-items: start; }
.catalog-panel, .order-panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: var(--s5); min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.section-heading h2 { margin-bottom: 0; }
.filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); align-items: end; }
.filters label { margin: 0; min-width: 0; }
.filters .search-field { grid-column: 1/-1; }
.filter-actions { grid-column: 1/-1; display: flex; gap: var(--s3); }
#search-count { margin: var(--s4) 0 var(--s3); }
.product-grid { display: grid; gap: var(--s2); max-height: 480px; overflow-y: auto; padding: 3px; margin: -3px; }
.product { display: flex; width: 100%; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: left; color: var(--ink); min-width: 0; }
.product.selected { border-color: var(--green); background: var(--soft); }
.catalog-image, .product-art { width: 136px; height: 64px; flex: 0 0 136px; border-radius: 4px; }
.catalog-image { object-fit: contain; object-position: center; }
.product-art { background: var(--soft); display: grid; place-items: center; font-size: 13px; overflow-wrap: anywhere; }
.product-info { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; flex: 1; }
.product-info strong { font-size: 15px; overflow-wrap: anywhere; }
.product-info small { font-size: 13px; color: var(--muted); }
.selection-label { display: block; color: var(--green); font-size: 13px; font-weight: 650; }
.product-detail h3 { margin: 0 0 var(--s2); font-size: 18px; }
.product-detail { border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.product-detail p { margin-bottom: var(--s2); }
.help-details { color: var(--muted); font-size: 13px; margin-top: var(--s3); }
summary { min-height: 44px; cursor: pointer; padding: 10px 0; color: var(--green); font-weight: 600; }
.help-details p { margin: var(--s2) 0; max-width: 70ch; }
.field-row { display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; }
.field-row > label { flex: 1 1 140px; min-width: 0; margin-top: 0; }
.field-row > .quantity-field { flex: 0 1 88px; }
.field-help { font-size: 13px; color: var(--muted); margin: 0 0 var(--s4); line-height: 1.65; }
#extra-fields { display: grid; gap: 0 var(--s4); }
#extra-fields h3 { grid-column: 1/-1; margin-top: var(--s3); margin-bottom: 0; }
#extra-fields label { margin-top: var(--s3); }
#extra-help { margin: var(--s3) 0 var(--s4); }
.order-submit { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s3); }
.order-submit p { margin-bottom: var(--s3); }
.notice, .local-feedback { padding: var(--s3) var(--s4); background: var(--soft); border: 1px solid #afcaba; border-radius: 6px; color: #1c513b; font-size: 14px; overflow-wrap: anywhere; }
.notice { margin-top: var(--s4); }
.notice.danger, .local-feedback.danger { background: var(--danger-bg); border-color: #d8aaa1; color: var(--danger); }
.local-feedback { margin-top: var(--s3); }
dl { display: grid; grid-template-columns: minmax(100px,auto) minmax(0,1fr); gap: var(--s3) var(--s4); margin: var(--s4) 0 var(--s5); font-size: 14px; }
dt { color: var(--muted); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.identity { font-size: 15px; font-weight: 600; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.profile-email { font-weight: 700; font-size: 18px; }
.remaining { font-weight: 650; color: var(--green); }
.session-card .result-actions { margin-top: var(--s5); }
.result-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.table-wrap { padding: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background: #eef2ef; color: #435a4c; font-size: 13px; font-weight: 650; padding: 12px 16px; white-space: nowrap; }
td { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: top; overflow-wrap: anywhere; }
td small { display: block; color: var(--muted); font-size: 13px; margin-top: var(--s1); }
td .text-button { padding: 0; min-height: 44px; justify-content: flex-start; text-align: left; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-history table { min-width: 880px; }
#page-history td:nth-child(2) { min-width: 150px; max-width: 240px; }
#page-history td:nth-child(6) { min-width: 140px; font-variant-numeric: tabular-nums; }
.empty { padding: var(--s6); text-align: center; color: var(--muted); }
.error-section { margin-top: var(--s5); }
.error-row { display: flex; gap: var(--s3); flex-wrap: wrap; border-top: 1px solid var(--line); padding: var(--s3) 0; font-size: 13px; }
.error-row span { color: var(--muted); }
.error-row strong { overflow-wrap: anywhere; }
.result-card { margin-top: var(--s5); scroll-margin-top: 52px; }
.result-card h2 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.result-progress { color: var(--muted); font-size: 14px; }
.payment-url { background: var(--soft); padding: var(--s3); font-size: 14px; overflow-wrap: anywhere; border-radius: 4px; margin: var(--s3) 0; }
pre { font-family: Consolas, "Microsoft YaHei", monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; padding: var(--s4); background: #f2f5f3; font-size: 13px; line-height: 1.6; }
.catalog-toolbar { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: end; padding-bottom: var(--s4); }
.catalog-toolbar .filters { display: flex; flex: 1; flex-wrap: wrap; gap: var(--s3); }
.catalog-toolbar label { flex: 1 1 150px; }
.export-menu { font-size: 14px; }
.export-menu .result-actions { padding: var(--s2) 0; }
.catalog-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--line); padding: var(--s4) 0; }
.catalog-row > div:first-child { flex: 1 1 260px; min-width: 0; }
.catalog-row strong { overflow-wrap: anywhere; }
.catalog-row p { margin: var(--s1) 0 0; }
.catalog-row .secondary { min-width: 68px; }
#import-section, #item-card { scroll-margin-top: 52px; }
#import-preview:empty { display: none; }
#import-preview { margin-top: var(--s5); }
.import-summary { border-radius: 4px; padding: var(--s3); background: var(--soft); font-size: 15px; }
.import-summary.error { background: var(--danger-bg); color: var(--danger); }
.import-table { min-width: 560px; }
.import-table td { font-size: 13px; }
.import-table .row-error { background: #fff8f5; }
.import-submit { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s5); }
.settings-card { max-width: 760px; }
.settings-card #request-limit { max-width: 240px; }
.check { display: flex; align-items: flex-start; gap: var(--s3); font-size: 14px; font-weight: 500; line-height: 1.6; cursor: pointer; padding: 10px 0; margin: 0; }
.check input { width: 20px; height: 20px; min-height: 20px; margin: 2px 0 0; flex: 0 0 20px; accent-color: var(--green); }
footer { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s5) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); color: var(--muted); font-size: 13px; }
dialog { border: 1px solid var(--line); border-radius: 10px; width: min(720px,calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; box-shadow: 0 16px 60px #00000026; color: var(--ink); }
dialog::backdrop { background: #162a2470; }
#confirm-form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.confirmation-header { padding: var(--s5) var(--s6) var(--s3); border-bottom: 1px solid var(--line); }
.confirmation-header h2 { margin-bottom: var(--s2); font-size: 21px; }
.confirmation-header p { margin: 0; }
.confirmation-body { overflow-y: auto; min-height: 0; padding: 0 var(--s6); }
#confirmation-details { gap: var(--s2) var(--s4); }
#confirmation-details .detail-group { grid-column: 1/-1; font-size: 15px; color: var(--ink); font-weight: 700; padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: var(--s2); }
#confirmation-details .detail-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
#confirmation-details .total-label, #confirmation-details .total-value { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s1); font-weight: 750; color: var(--green); }
#confirmation-details .total-value { font-size: 22px; text-align: right; }
#confirmation-details .request-label, #confirmation-details .request-value { font-size: 13px; color: var(--muted); }
#confirmation-extras p { overflow-wrap: anywhere; }
.confirmation-bottom { border-top: 1px solid var(--line); padding: var(--s3) var(--s6) var(--s5); background: var(--surface); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s2); }
.confirmation-bottom .error { margin: var(--s2) 0; }
[hidden] { display: none !important; }
@media (min-width:768px) {
  .workspace { display: grid; grid-template-columns: 176px minmax(0,1fr); }
  .sidebar { border-right: 1px solid var(--line); border-bottom: 0; position: sticky; top: 36px; height: calc(100dvh - 36px); padding: var(--s6) var(--s3); display: flex; flex-direction: column; }
  .sidebar .wordmark { display: block; padding: 0 var(--s2); margin-bottom: var(--s8); }
  .sidebar nav { display: flex; flex-direction: column; gap: var(--s2); }
  .nav { text-align: left; padding: 10px 16px; }
  .sidebar-bottom { display: block; margin-top: auto; padding: var(--s2); }
  .sidebar-bottom br { display: block; }
  .sidebar-bottom button { margin-top: var(--s4); width: 100%; }
  .content { padding: 0 var(--s6); }
  .product-grid { max-height: 460px; }
  .filters { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .filters .search-field, .filter-actions { grid-column: 1/-1; }
}
@media (min-width:1100px) {
  .workspace { grid-template-columns: 192px minmax(0,1fr); }
  .order-layout { grid-template-columns: minmax(320px,.9fr) minmax(410px,1.1fr); }
  .two-column { grid-template-columns: 1fr 1fr; }
  .order-panel { position: sticky; top: 52px; }
  .catalog-panel .filters { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .catalog-panel .product-grid { max-height: 460px; }
  .content { padding: 0 var(--s8); }
  #extra-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width:479px) {
  .mode-banner { gap: var(--s1) var(--s2); font-size: 12px; }
  .content { padding: 0 var(--s3); }
  .card, .catalog-panel, .order-panel { padding: var(--s4); }
  .login-card { padding: var(--s6); }
  h1 { font-size: 24px; }
  input, select, textarea { font-size: 16px; }
  .account-strip { align-items: flex-start; padding: var(--s3); }
  .account-strip > div { display: flex; flex-direction: column; gap: 2px; }
  .account-strip button { padding: 10px; }
  .field-row > label { flex-basis: 100%; }
  .field-row > .quantity-field { flex-basis: 100%; }
  .catalog-image, .product-art { width: 112px; height: 56px; flex-basis: 112px; }
  .catalog-row .result-actions { width: 100%; }
  .catalog-row .secondary { flex: 1; }
  .confirmation-header, .confirmation-body, .confirmation-bottom { padding-left: var(--s4); padding-right: var(--s4); }
  .confirmation-header h2 { font-size: 19px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s2); }
  .dialog-actions button { padding: 10px 8px; }
  dl { grid-template-columns: 100px minmax(0,1fr); gap: var(--s2) var(--s3); }
  .profile-email { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }