:root {
  color-scheme: light;
  --canvas: #eef2f5;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --ink: #172331;
  --muted: #667485;
  --line: #d8e0e7;
  --brand: #185b72;
  --brand-strong: #10485b;
  --success: #177047;
  --moving: #2f6ea3;
  --warning: #a86708;
  --danger: #b73a45;
  --pickup: #8b4ba8;
  --focus: #0b78a0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

button, input, select, textarea { font: inherit; }

button, input, select, textarea, dialog { color: inherit; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 36%, transparent);
  outline-offset: 2px;
}

button {
  border: 1px solid transparent;
  border-radius: .55rem;
  padding: .58rem .85rem;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}

button:hover { background: var(--brand-strong); }
button:disabled { opacity: .48; cursor: not-allowed; }

button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

button.secondary:hover { background: var(--surface-soft); }

button.danger { background: var(--danger); }
button.text-button { border: 0; background: transparent; color: var(--brand); padding: .25rem; }
button.text-button:hover { color: var(--brand-strong); text-decoration: underline; }

input, select, textarea {
  inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: .55rem;
  padding: .62rem .72rem;
  background: var(--surface);
}

textarea { resize: vertical; min-block-size: 8lh; }

[hidden] { display: none !important; }

.shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.product-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  padding-block: .35rem;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  padding: .65rem;
  border-radius: .75rem;
  background: var(--brand);
  color: #fff;
}

.brand-mark svg, .icon { inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 2; }
.product-header h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.02em; }
.product-header p { margin: .1rem 0 0; color: var(--muted); }

.panel {
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--surface);
  padding: 1rem;
}

.login-panel, .setup-panel { display: grid; gap: .8rem; }
.login-panel h2, .setup-panel h2, .panel-title { margin: 0; font-size: 1rem; }

.form-row, .toolbar, .toolbar-group, .modal-actions, .batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: end;
}

.field { display: grid; gap: .3rem; flex: 1 1 14rem; }
.field label, .hint, .status-line, .muted { color: var(--muted); font-size: .86rem; }
.status-line { margin: 0; min-block-size: 1.4em; }
.error-line { margin: 0; color: var(--danger); min-block-size: 1.4em; }

#app { display: flex; flex-direction: column; gap: 1rem; }

.command-panel { display: grid; gap: .85rem; }
.command-top { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: end; }
.search-field { flex: 1 1 20rem; }
.search-wrap { display: flex; gap: .55rem; align-items: center; }
.search-wrap svg { color: var(--muted); flex: none; }
.toolbar { justify-content: flex-end; }
.toolbar-group { align-items: center; }
.interval-select { inline-size: auto; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.stat-card {
  display: grid;
  gap: .3rem;
  text-align: left;
  border: 1px solid var(--line);
  border-block-start: .3rem solid var(--category-color);
  background: var(--surface);
  color: var(--ink);
  padding: .85rem 1rem;
}

.stat-card:hover, .stat-card.active { background: color-mix(in srgb, var(--category-color) 8%, #fff); }
.stat-card.active { border-color: var(--category-color); }
.stat-label { color: var(--muted); font-size: .82rem; }
.stat-value { font: 700 1.65rem/1.15 "DIN Alternate", ui-monospace, SFMono-Regular, Menlo, monospace; }
.stat-meta { font-size: .78rem; color: var(--muted); }
.pending-note { margin: .65rem 0 0; color: var(--muted); }

.workspace {
  display: grid;
  grid-template-columns: minmax(min-content, .24fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.group-panel { display: grid; gap: .75rem; }
.panel-heading { display: flex; gap: .7rem; align-items: center; justify-content: space-between; }
.group-list { display: grid; gap: .35rem; }
.group-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; align-items: center; }
.group-filter {
  display: flex;
  gap: .55rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.group-filter:hover, .group-filter.active { border-color: var(--line); background: var(--surface-soft); }
.group-dot { inline-size: .68em; block-size: .68em; border-radius: 50%; background: var(--group-color); flex: none; }
.group-name { display: flex; gap: .45rem; align-items: center; min-inline-size: 0; }
.count-badge { padding: .08rem .45rem; border-radius: 999px; background: var(--canvas); color: var(--muted); font: .78rem ui-monospace, monospace; }

.list-panel { display: grid; gap: .75rem; min-inline-size: 0; }
.batch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding: .7rem; border-radius: .65rem; background: #edf6f8; }
.status-stack { display: grid; gap: .75rem; }
.status-section { border: 1px solid var(--line); border-radius: .75rem; overflow: clip; background: var(--surface); }
.status-toggle {
  inline-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  padding: .8rem 1rem;
}
.status-toggle:hover { background: #eef3f6; }
.status-title { display: flex; align-items: center; gap: .55rem; font-weight: 650; }
.status-rule { inline-size: .7em; block-size: .7em; border-radius: .18rem; background: var(--category-color); }
.chevron { transition: transform .15s ease; }
.status-section.open .chevron { transform: rotate(90deg); }

.shipment-list { display: grid; }
.shipment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; padding: .85rem 1rem; border-block-start: 1px solid var(--line); align-items: start; }
.shipment-row:hover { background: #fbfcfd; }
.shipment-check { inline-size: auto; margin-block-start: .25rem; }
.shipment-main { display: grid; gap: .5rem; min-inline-size: 0; }
.shipment-identity { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: baseline; }
.tracking-number { font: 650 .92rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.recipient { font-weight: 600; }
.shipment-meta { display: flex; flex-wrap: wrap; gap: .35rem .75rem; color: var(--muted); font-size: .82rem; }
.shipment-update { color: #354558; overflow-wrap: anywhere; }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--category-color) 12%, #fff); color: var(--category-color); font-size: .78rem; }
.shipment-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.shipment-actions button { padding: .35rem .55rem; font-size: .8rem; }
.trace-panel { grid-column: 2 / -1; padding: .7rem; border-radius: .55rem; background: var(--surface-soft); }
.trace-panel ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .45rem; }
.trace-panel time { color: var(--muted); margin-inline-end: .6rem; }

.empty-state { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: center; }

.faq summary { cursor: pointer; color: var(--brand); }
.faq-grid { display: grid; gap: .8rem; margin-block-start: .9rem; }
.faq-grid h3 { margin: 0 0 .2rem; font-size: .92rem; }
.faq-grid p { margin: 0; color: var(--muted); }

dialog {
  border: 1px solid var(--line);
  border-radius: .85rem;
  padding: 0;
  background: var(--surface);
  max-inline-size: calc(100vw - 2rem);
  box-shadow: 0 1.2rem 3rem rgba(23, 35, 49, .2);
}
dialog::backdrop { background: rgba(16, 31, 43, .46); }
.modal { display: grid; min-inline-size: min(34rem, calc(100vw - 2rem)); }
.modal-head, .modal-body, .modal-foot { padding: 1rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-block-end: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1rem; }
.modal-body { display: grid; gap: .8rem; }
.modal-foot { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: flex-end; border-block-start: 1px solid var(--line); }
.modal-foot .danger { margin-inline-end: auto; }
.preview { padding: .8rem; border-inline-start: .25rem solid var(--brand); background: var(--surface-soft); white-space: pre-wrap; }
.log-list { display: grid; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.log-entry { padding: .6rem; border: 1px solid var(--line); border-radius: .5rem; }
.log-entry.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

@media (max-width: 58rem) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace { grid-template-columns: 1fr; }
  .group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38rem) {
  .shell { padding: .7rem; }
  .stats-grid, .group-list { grid-template-columns: 1fr; }
  .toolbar, .toolbar-group { align-items: stretch; }
  .toolbar > *, .toolbar-group > * { flex: 1 1 auto; }
  .shipment-row { grid-template-columns: auto minmax(0, 1fr); }
  .shipment-actions { grid-column: 2; justify-content: flex-start; }
  .trace-panel { grid-column: 1 / -1; }
  .modal { min-inline-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}