:root {
  color-scheme: light;
  --bg: #f6f0e8;
  --panel: rgba(255, 252, 247, 0.94);
  --panel-strong: #fffaf2;
  --line: rgba(103, 74, 47, 0.14);
  --text: #2f241a;
  --muted: #7d6a59;
  --accent: #b86b39;
  --accent-2: #56724a;
  --success: #4e7a49;
  --warn: #b86b39;
  --danger: #a44b3f;
  --shadow: 0 18px 40px rgba(78, 53, 30, 0.12);
  --radius: 20px;
  --sidebar: #3a271a;
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(184, 107, 57, 0.13), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(86, 114, 74, 0.13), transparent 24%),
    linear-gradient(135deg, #f8f3ec 0%, #f4eadc 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  filter: grayscale(0.2);
}
.app-shell { min-width: 0; height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; }
.sidebar {
  min-width: 0; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 18px; background: linear-gradient(180deg, #4a3020 0%, #2f1e14 100%);
  color: #f7ede4; border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(145deg, #df9a6b, #b86b39); color: #fff; font-weight: 800; letter-spacing: 0.08em;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
.brand-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; line-height: 1.1; }
.brand-subtitle, .side-label, .eyebrow, .form-hint, .topbar-copy, .muted, .empty, .state-copy { color: var(--muted); }
.side-card {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px; padding: 14px; margin-bottom: 14px;
}
.side-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.side-value { font-weight: 700; color: #fff; margin-bottom: 6px; }
.side-note { font-size: 0.92rem; line-height: 1.5; color: #dccbbb; }
.nav { display: grid; gap: 8px; margin: 18px 0; }
.nav a {
  color: #f9efe7; text-decoration: none; padding: 11px 12px; border-radius: 14px; border: 1px solid transparent;
  display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.03);
}
.nav a:hover, .nav a.active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.12); transform: translateX(2px); }
.nav small { color: #d4c1b1; }
.inline-setting { display: flex; gap: 8px; }
.inline-setting input, .login-card input, .drawer input, .drawer textarea, .drawer select, .modal input, .modal textarea, .modal select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.9); color: var(--text);
}
.main { min-width: 0; height: 100vh; overflow-y: auto; padding: 26px 26px 40px; overscroll-behavior: contain; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.77rem; margin: 0 0 6px; }
h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; }
.topbar-copy { margin: 8px 0 0; max-width: 58rem; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat, .card, .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat { padding: 16px; }
.stat .label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.stat .value { font-size: 2rem; margin: 8px 0 6px; font-family: Georgia, "Times New Roman", serif; }
.stat .copy { color: var(--muted); line-height: 1.45; }
.page-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.page-grid > .card:not(.span-12):not(.span-7):not(.span-5) { grid-column: span 6; }
.span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; }
.card { padding: 18px; }
.section-head, .toolbar, .drawer-head, .modal-head, .table-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-head, .toolbar, .table-head { margin-bottom: 14px; }
.section-head h2, .card h2, .drawer h3, .modal h3 { font-size: 1.45rem; }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-btn, .ghost-btn, .primary-btn, .icon-btn, .pill, .chip {
  border: 1px solid transparent; border-radius: 999px; padding: 9px 14px; background: #f2e6d7; color: var(--text);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.tab-btn.active, .primary-btn { background: linear-gradient(135deg, var(--accent), #d68850); color: #fff; }
.ghost-btn, .icon-btn { background: rgba(255, 255, 255, 0.6); border-color: var(--line); }
.icon-btn { width: 38px; height: 38px; justify-content: center; padding: 0; }
.toolbar { flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters input, .filters select { min-width: 150px; }
.inline-date-filter {
  min-width: 170px;
  display: grid;
  gap: 4px;
}
.inline-date-filter span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}
.inline-date-filter input {
  min-width: 0;
}
.table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.5); }
table { width: 100%; border-collapse: collapse; min-width: 840px; }
th, td { padding: 12px 14px; border-bottom: 1px solid rgba(103, 74, 47, 0.08); text-align: left; vertical-align: top; }
th { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255, 250, 242, 0.7); }
tbody tr:hover { background: rgba(184, 107, 57, 0.04); }
.order-receiver, .order-item-lines { min-width: 220px; line-height: 1.55; }
.order-item-lines { display: grid; gap: 8px; }
.product-health-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 14px; }
.product-health-tile {
  min-width: 0; text-align: left; display: grid; gap: 5px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.58); border: 1px solid rgba(103, 74, 47, 0.1); color: var(--text);
}
.product-health-tile.warn { border-color: rgba(184, 107, 57, 0.25); background: rgba(184, 107, 57, 0.07); }
.product-health-tile.danger { border-color: rgba(164, 75, 63, 0.3); background: rgba(164, 75, 63, 0.07); }
.product-health-tile strong { font-size: 1.35rem; }
.product-health-tile small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.product-next-step {
  min-width: 210px; display: grid; gap: 7px; padding: 10px; border-radius: 14px;
  background: rgba(255,255,255,0.52); border: 1px solid rgba(103, 74, 47, 0.1); line-height: 1.45;
}
.product-next-step.warn { border-color: rgba(184, 107, 57, 0.25); background: rgba(184, 107, 57, 0.07); }
.product-next-step.danger { border-color: rgba(164, 75, 63, 0.3); background: rgba(164, 75, 63, 0.07); }
.product-next-step span { color: var(--muted); overflow-wrap: anywhere; }
.kingdee-health-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kingdee-health-tile {
  min-width: 0; text-align: left; display: grid; gap: 5px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.58); border: 1px solid rgba(103, 74, 47, 0.1); color: var(--text);
}
.kingdee-health-tile.warn { border-color: rgba(184, 107, 57, 0.25); background: rgba(184, 107, 57, 0.07); }
.kingdee-health-tile.danger { border-color: rgba(164, 75, 63, 0.3); background: rgba(164, 75, 63, 0.07); }
.kingdee-health-tile strong { font-size: 1.35rem; }
.kingdee-health-tile small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.kingdee-health-tile em { font-style: normal; color: var(--accent-2); font-size: 0.86rem; }
.focus-ring { outline: 3px solid rgba(86, 114, 74, 0.28); outline-offset: 3px; }
.subscription-gate-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.subscription-gate-tile {
  min-width: 0; text-align: left; display: grid; gap: 5px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.58); border: 1px solid rgba(103, 74, 47, 0.1); color: var(--text);
}
.subscription-gate-tile.warn { border-color: rgba(184, 107, 57, 0.25); background: rgba(184, 107, 57, 0.07); }
.subscription-gate-tile.danger { border-color: rgba(164, 75, 63, 0.3); background: rgba(164, 75, 63, 0.07); }
.subscription-gate-tile strong { font-size: 1.35rem; }
.subscription-gate-tile small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.order-next-step {
  min-width: 210px; display: grid; gap: 7px; padding: 10px; border-radius: 14px;
  background: rgba(255,255,255,0.52); border: 1px solid rgba(103, 74, 47, 0.1); line-height: 1.45;
}
.order-next-step.warn { border-color: rgba(184, 107, 57, 0.25); background: rgba(184, 107, 57, 0.07); }
.order-next-step.danger { border-color: rgba(164, 75, 63, 0.3); background: rgba(164, 75, 63, 0.07); }
.order-next-step span { color: var(--muted); overflow-wrap: anywhere; }
.order-next-step .topbar-actions { gap: 6px; }
.order-dispatch-checklist {
  min-width: 210px; display: grid; gap: 5px; margin-top: 8px; padding: 10px; border-radius: 12px;
  background: rgba(86, 114, 74, 0.06); border: 1px solid rgba(86, 114, 74, 0.14); line-height: 1.42;
}
.order-dispatch-checklist span { color: var(--muted); overflow-wrap: anywhere; }
.product-operation-checklist {
  min-width: 210px; display: grid; gap: 5px; margin-top: 8px; padding: 10px; border-radius: 12px;
  background: rgba(86, 114, 74, 0.06); border: 1px solid rgba(86, 114, 74, 0.14); line-height: 1.42;
}
.product-operation-checklist span { color: var(--muted); overflow-wrap: anywhere; }
.uniform-asset-picker {
  background: rgba(86, 114, 74, 0.06);
  border-color: rgba(86, 114, 74, 0.16);
}
.uniform-asset-actions {
  margin-top: 2px;
}
.asset-path-preview {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(103, 74, 47, 0.1);
  color: var(--accent-2);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.refund-next-step {
  display: grid; gap: 8px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.56); border: 1px solid rgba(103, 74, 47, 0.1); line-height: 1.45;
}
.refund-next-step.warn { border-color: rgba(184, 107, 57, 0.25); background: rgba(184, 107, 57, 0.07); }
.refund-next-step.danger { border-color: rgba(164, 75, 63, 0.3); background: rgba(164, 75, 63, 0.07); }
.refund-next-step span { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.danger-btn { border-color: rgba(164, 75, 63, 0.28); color: var(--danger); background: rgba(164, 75, 63, 0.08); }
.badge, .pill, .chip { font-size: 0.78rem; padding: 6px 10px; background: #f4e4d5; }
.tone-success { color: var(--success); } .tone-warn { color: var(--warn); } .tone-danger { color: var(--danger); } .tone-muted { color: var(--muted); } .tone-info { color: var(--accent-2); }
.empty, .error-state, .loading-state {
  padding: 26px; border-radius: 16px; background: rgba(255, 255, 255, 0.5); border: 1px dashed rgba(103, 74, 47, 0.16);
}
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 12px; }
.form-stack, .field-grid { display: grid; gap: 12px; }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-stack label, .field label { display: grid; gap: 6px; }
.form-stack span, .field span { font-size: 0.82rem; color: var(--muted); }
.help { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.compact-options { border: 1px solid rgba(103, 74, 47, 0.12); border-radius: 14px; background: rgba(255,255,255,0.42); padding: 10px 12px; }
.compact-options summary { cursor: pointer; font-weight: 700; color: var(--text); }
.compact-options-body { margin-top: 12px; }
.overlay, .drawer-mask, .modal-mask { position: fixed; inset: 0; background: rgba(34, 23, 16, 0.42); backdrop-filter: blur(4px); z-index: 50; }
.login-card, .drawer, .modal { position: fixed; z-index: 60; background: var(--panel-strong); border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 28px));
  border-radius: 28px; display: grid; grid-template-columns: 1.1fr 0.9fr; overflow: hidden;
}
.login-copy { padding: 34px; background: linear-gradient(135deg, rgba(184, 107, 57, 0.1), rgba(86, 114, 74, 0.08)); }
.login-copy h2 { font-size: 2rem; margin-bottom: 10px; }
.login-copy p { max-width: 38rem; color: var(--muted); line-height: 1.65; }
.login-card .form-stack { padding: 34px; align-content: center; background: rgba(255,255,255,0.72); }
.drawer {
  top: 0; right: 0; width: min(720px, 100vw); height: 100vh; padding: 20px; overflow: auto;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-body, .modal-body { margin-top: 14px; display: grid; gap: 14px; }
.modal {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 28px));
  max-height: min(86vh, 860px); overflow: auto; border-radius: 24px; padding: 20px;
}
.json { min-height: 160px; font-family: Consolas, "SFMono-Regular", monospace; }
.status-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.92rem; }
.status-line strong { color: var(--text); }
.list-stack { display: grid; gap: 10px; }
.list-item {
  display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.55);
  border: 1px solid rgba(103, 74, 47, 0.1);
}
.ops-queue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ops-row {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.58); border: 1px solid rgba(103, 74, 47, 0.1);
}
.ops-row .ghost-btn, .ops-row .primary-btn { grid-column: 1 / -1; justify-content: center; min-height: 36px; }
.ops-row.warn { border-color: rgba(184, 107, 57, 0.28); background: rgba(184, 107, 57, 0.08); }
.ops-row.danger { border-color: rgba(164, 75, 63, 0.32); background: rgba(164, 75, 63, 0.08); }
.ops-count { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(86, 114, 74, 0.12); color: var(--accent-2); font-weight: 800; font-size: 1.25rem; }
.ops-row.warn .ops-count { background: rgba(184, 107, 57, 0.13); color: var(--warn); }
.ops-row.danger .ops-count { background: rgba(164, 75, 63, 0.13); color: var(--danger); }
.ops-copy { min-width: 0; display: grid; gap: 4px; line-height: 1.45; }
.ops-copy strong, .ops-copy span { overflow-wrap: anywhere; }
.ops-copy span { color: var(--muted); font-size: 0.86rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-stat { padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.56); border: 1px solid rgba(103, 74, 47, 0.08); }
.mini-stat .label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.mini-stat .value { margin-top: 8px; font-size: 1.3rem; font-family: Georgia, "Times New Roman", serif; }
@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 240px minmax(0, 1fr); }
  .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .login-card { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  html, body { height: auto; overflow: auto; }
  .app-shell { width: 100%; max-width: 100vw; height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr); overflow: visible; } .sidebar { width: 100%; max-width: 100vw; position: static; height: auto; min-height: auto; overflow: visible; }
  .main { height: auto; overflow: visible; }
  .main { padding: 18px 14px 34px; } .page-grid { grid-template-columns: 1fr; }
  .span-7, .span-5, .span-12, .page-grid > .card:not(.span-12):not(.span-7):not(.span-5) { grid-column: span 1; }
  .hero-strip, .field-grid, .field-grid.three, .summary-grid, .ops-queue, .product-health-board, .kingdee-health-grid, .subscription-gate-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
}