:root {
  --leaf:#2563eb;
  --cream:#f5f7fa;
  --paper:#fff;
  --terra:#b45309;
  --ink:#172235;
  --muted:#64748b;
  --border:#e2e8f0;
  --selected:#eff6ff;
  font-family:system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
body>header {
  height:60px;
  padding:0 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--paper);
}
.brand {
  font-size:21px;
  font-weight:700;
  letter-spacing:1px;
}
.session-account {
  margin-left:auto;
  font-size:14px;
  color:var(--muted);
}
h1 {
  font-size:26px;
}
h2 {
  font-size:22px;
}
h3 {
  font-size:17px;
}
h1,h2,h3,h4 {
  font-weight:600;
  line-height:1.45;
  margin:0 0 16px;
}
h4 {
  font-size:15px;
}
p {
  margin:10px 0;
  color:var(--muted);
}
small {
  font-size:12px;
  color:var(--muted);
}
h2,p,small {
  overflow-wrap:anywhere;
}
a {
  color:var(--leaf);
  text-underline-offset:4px;
}
.intro {
  margin:0 0 24px;
  color:var(--muted);
}
form {
  max-width:680px;
  display:grid;
  gap:16px;
  margin:20px 0;
}
label {
  display:grid;
  gap:6px;
  font-size:14px;
  min-width:0;
}
input,select,textarea,button {
  font:inherit;
  border-radius:4px;
}
input,select,textarea {
  padding:8px 10px;
  border:1px solid #cbd5e1;
  min-width:0;
  max-width:100%;
  background:var(--paper);
  color:var(--ink);
}
textarea {
  resize:vertical;
  width:100%;
  min-height:90px;
}
input[type=checkbox] {
  accent-color:var(--leaf);
  width:18px;
  height:18px;
}
input:disabled,select:disabled {
  background:var(--cream);
  color:var(--muted);
}
button {
  padding:8px 14px;
  background:var(--leaf);
  color:white;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:500;
  line-height:1.5;
}
button:hover {
  background:#1d4ed8;
}
button:disabled {
  opacity:.55;
  cursor:not-allowed;
}
button.secondary {
  background:white;
  color:#334155;
  border-color:#cbd5e1;
}
button.secondary:hover {
  background:var(--cream);
  border-color:#94a3b8;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--leaf);
  outline-offset:3px;
}
fieldset {
  border:1px solid var(--border);
  padding:16px;
  min-width:0;
}
legend {
  padding:0 6px;
}
nav {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
nav button[aria-pressed=true] {
  background:var(--selected);
  border-color:var(--leaf);
  color:var(--leaf);
}
[hidden] {
  display:none!important;
}
.notice {
  color:#b45309;
  overflow-wrap:anywhere;
}
.notice:empty {
  display:none;
}
.empty {
  padding:48px 20px;
  text-align:center;
  color:var(--muted);
}
.auth-page {
  max-width:460px;
  margin:64px auto;
  padding:32px;
  background:white;
  border:1px solid var(--border);
  border-radius:6px;
}
.auth-page form {
  max-width:none;
}
.auth-page .intro {
  margin-bottom:24px;
}
.workspace {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  height:calc(100dvh - 60px);
}
.workspace-sidebar {
  grid-row:1/-1;
  display:flex;
  flex-direction:column;
  background:#f8fafc;
  border-right:1px solid var(--border);
  overflow:auto;
  padding:24px 8px 12px;
}
.workspace-nav {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.workspace-nav a {
  color:#475569;
  text-decoration:none;
  padding:12px 16px;
  border-left:3px solid transparent;
  border-radius:3px;
}
.workspace-nav a:hover {
  background:#eef2f6;
}
.workspace-nav a[aria-current=page] {
  background:#e8f0fe;
  border-left-color:var(--leaf);
  color:var(--leaf);
  font-weight:600;
}
.session-actions {
  margin-top:auto;
  padding:24px 8px 0;
  display:grid;
  gap:8px;
}
.session-actions button {
  background:transparent;
  border-color:transparent;
  text-align:left;
}
.workspace-content {
  grid-column:2;
  grid-row:2;
  overflow:auto;
  min-width:0;
  background:var(--paper);
}
.global-notice {
  grid-column:2;
  grid-row:1;
  margin:0;
  padding:10px 24px;
  background:#fffbeb;
  border-bottom:1px solid #fde68a;
}
.page-view {
  padding:24px;
  min-width:0;
}
.page-view>h2 {
  margin-bottom:8px;
}
.page-view:has(>.split-view) {
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.workspace-content>section {
  min-height:100%;
  height:100%;
}
.split-view {
  display:block;
  border:1px solid var(--border);
  min-height:560px;
  background:white;
  flex:1;
  min-width:0;
}
.record-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  overflow:auto;
  min-width:0;
  max-height:none;
  border-bottom:1px solid var(--border);
}
.record-list>h3,.record-list>.list-toolbar {
  grid-column:1/-1;
  padding:18px 16px;
  margin:0;
  border-bottom:1px solid var(--border);
  background:#f8fafc;
}
.record-list>button {
  margin:16px;
  justify-self:start;
}
.record-detail {
  padding:24px;
  min-width:0;
  overflow:auto;
  max-height:none;
  border-top:1px solid var(--border);
}
.record-detail>h3 {
  margin-top:28px;
}
.record-detail>h3:first-child {
  margin-top:0;
}
.record-detail>small {
  display:block;
}
.record-detail:empty:before {
  content:'从左侧选择记录，查看详情并操作。';
  display:block;
  color:var(--muted);
  padding:48px 0;
  text-align:center;
}
.record-list [data-record] {
  padding:18px 16px;
  border:0;
  border-bottom:1px solid var(--border);
  border-left:3px solid transparent;
  margin:0;
  position:relative;
  border-right:1px solid var(--border);
}
.record-list [data-record].is-selected {
  background:var(--selected);
  border-left-color:var(--leaf);
}
.record-list [data-record]:hover {
  background:#f8fafc;
}
.record-list [data-record].is-selected:hover {
  background:var(--selected);
}
.record-list h3 {
  font-size:15px;
  margin:0 0 8px;
}
.record-list p {
  margin:6px 0;
}
.record-open {
  display:block;
  background:transparent;
  color:var(--leaf);
  border:0;
  padding:4px 0;
  margin-top:8px;
  font-size:13px;
}
.record-open:hover {
  background:transparent;
  text-decoration:underline;
}
.record-list .account-row {
  display:block;
}
.record-list .account-row span {
  display:block;
  min-width:0;
}
.record-list .trade-section small {
  display:block;
}
.trade-section {
  padding:22px 0;
  border-bottom:1px solid var(--border);
}
.trade-section h3 {
  margin:0 0 12px;
}
.trade-product {
  font-size:15px;
  margin-top:12px;
  font-weight:500;
}
.trade-address {
  white-space:pre-line;
  background:var(--cream);
  padding:16px;
  color:#334155;
  border-radius:3px;
}
.trade-section button {
  margin:10px 8px 0 0;
}
.trade-section small {
  display:block;
  overflow-wrap:anywhere;
}
.account-row {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:16px 0;
  border-bottom:1px solid var(--border);
}
.account-row span {
  flex:1;
  min-width:180px;
}
.dashboard-metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin:28px 0;
}
.dashboard-metric {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:4px;
  text-decoration:none;
  color:var(--muted);
}
.dashboard-metric strong {
  font-size:28px;
  color:var(--ink);
  font-weight:600;
}
a.dashboard-metric:hover {
  border-color:var(--leaf);
  background:var(--selected);
}
.order-filters {
  margin:16px 0;
}
.order-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:16px;
}
.order-toolbar>.order-filters {
  flex:1 1 560px;
  min-width:0;
}
.order-toolbar>details {
  margin:16px 0 16px auto;
  padding:0;
  border-bottom:0;
  max-width:100%;
}
.order-toolbar>details[open] {
  width:440px;
}
.order-toolbar>details>summary {
  padding:10px 0;
  text-align:right;
  cursor:pointer;
}
.shipping-form {
  max-width:none;
}
.table-scroll {
  overflow:auto;
}
.shipping-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.shipping-table th,.shipping-table td {
  text-align:left;
  padding:12px;
  border:1px solid var(--border);
  vertical-align:middle;
}
.shipping-table th {
  background:var(--cream);
  white-space:nowrap;
  font-weight:500;
  color:#475569;
}
.shipping-table td:first-child {
  min-width:150px;
}
.shipping-table input {
  width:90px;
}
.shipping-table small {
  display:block;
}
.shipping-table label {
  font-size:12px;
}
.logistics-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.action-bar {
  position:sticky;
  bottom:-24px;
  background:white;
  border-top:1px solid var(--border);
  padding:16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  z-index:1;
}
.action-bar button {
  margin:0;
}
.action-bar strong {
  font-size:22px;
  color:var(--leaf);
}
.status-badge {
  display:inline-block;
  background:#fff3d6;
  color:#92400e;
  padding:3px 8px;
  border-radius:3px;
  font-size:12px;
}
.detail-heading {
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.detail-heading h2 {
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}
@media(min-width:1500px) {
  .split-view {
    grid-template-columns:none;
  }
}
@media(max-width:1100px) {
  .workspace {
    grid-template-columns:170px minmax(0,1fr);
  }
  .page-view {
    padding:20px;
  }
  .split-view {
    grid-template-columns:none;
  }
  .record-detail {
    padding:20px;
  }
  .logistics-fields {
    grid-template-columns:1fr;
  }
}
@media(max-width:760px) {
  body>header {
    height:auto;
    min-height:60px;
    padding:12px 16px;
    gap:8px 16px;
    flex-wrap:wrap;
  }
  .brand {
    font-size:18px;
  }
  .session-account {
    font-size:12px;
  }
  .workspace {
    display:block;
    height:auto;
  }
  .workspace-sidebar {
    padding:8px;
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .workspace-nav {
    flex-direction:row;
    flex-wrap:nowrap;
    overflow:auto;
  }
  .workspace-nav a {
    white-space:nowrap;
    padding:8px 12px;
  }
  .session-actions {
    display:flex;
    margin:0;
    padding:8px 0 0;
  }
  .workspace-content {
    overflow:visible;
  }
  .page-view {
    padding:16px;
  }
  .split-view {
    display:block;
    min-height:0;
  }
  .record-list {
    display:grid;
    grid-template-columns:1fr;
    max-height:340px;
    border-bottom:1px solid var(--border);
  }
  .record-detail {
    max-height:none;
    overflow:visible;
    padding:20px 16px;
  }
  .global-notice {
    padding:10px 16px;
  }
  .auth-page {
    margin:32px 16px;
    padding:24px;
  }
  .action-bar {
    bottom:0;
  }
  .shipping-table th,.shipping-table td {
    padding:8px;
  }
  .logistics-fields {
    grid-template-columns:1fr;
  }
}