/* UI 第 1 阶段：唯一主题 tokens 和按钮/导航规则。页面布局仍由原样式负责。 */
:root {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-soft: #FAFAFB;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --faint: #A1A1A6;
  --line: #E5E5EA;
  --line-strong: #D2D2D7;
  --accent: #E85A00;
  --accent-hover: #D24F00;
  --accent-ring: rgba(232, 90, 0, 0.30);
  --accent-soft: #FFF0E6;
  --on-accent: #FFFFFF;
  --success: #2E9E5B;
  --warning: #B26A00;
  --danger: #B42338;
  --overlay: rgba(29, 29, 31, 0.42);
  --radius-card: 24px;
  --radius-tile: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
  --font-sans: "SF Pro Display", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Compatibility aliases for existing components; no second palette. */
  --accent-dark: var(--accent-hover);
  --warm: var(--warning);
  --stage: var(--surface-soft);
  --radius: 10px;
  --shadow: var(--shadow-card);
}

body.admin-body,
body:not(.admin-body) {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

button, input, select, textarea { font-family: inherit; }
body.admin-body .btn,
body:not(.admin-body) .btn,
.admin-primary {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, opacity 160ms ease-out;
}

/* Explicit scope matches existing ID-specific toolbar and modal selectors. */
body.admin-body .btn-primary,
body.admin-body .btn-dark,
body.admin-body .admin-primary,
body:not(.admin-body) .btn-primary,
body:not(.admin-body) .btn-dark,
body:not(.admin-body) .toolbar .btn-dark,
body:not(.admin-body) .toolbar #cameraBtn,
body:not(.admin-body) .toolbar #cameraBtn.active {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
  font-weight: 600;
}

body.admin-body .btn-primary,
body.admin-body .btn-dark,
body.admin-body .admin-primary { min-height: 40px; height: 40px; padding-inline: 20px; font-size: 14px; }
body.admin-body .btn-primary.btn-sm,
body.admin-body .btn-dark.btn-sm { padding-inline: 12px; }
body:not(.admin-body) .btn-primary,
body:not(.admin-body) .btn-dark { min-height: 48px; height: auto; padding: 10px 20px; font-size: 15px; }
body:not(.admin-body) .toolbar #cameraBtn,
body:not(.admin-body) .toolbar .btn-dark { height: 50px; min-height: 50px; padding: 3px 1px; font-size: 14px; }

body.admin-body :is(.btn-primary, .btn-dark, .admin-primary):hover:not(:disabled),
body:not(.admin-body) :is(.btn-primary, .btn-dark):hover:not(:disabled),
body:not(.admin-body) .toolbar :is(#cameraBtn, .btn-dark):hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
body.admin-body :is(.btn-primary, .btn-dark, .admin-primary):disabled,
body:not(.admin-body) :is(.btn-primary, .btn-dark):disabled,
body:not(.admin-body) .toolbar :is(#cameraBtn, .btn-dark):disabled {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  opacity: 0.45;
  cursor: not-allowed;
}

body.admin-body .btn-ghost,
body.admin-body .btn-light,
body:not(.admin-body) .btn-ghost,
body:not(.admin-body) .btn-light,
body:not(.admin-body) .toolbar .btn-ghost:not(#cameraBtn) {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: none;
}
body.admin-body :is(.btn-ghost, .btn-light):hover:not(:disabled),
body:not(.admin-body) :is(.btn-ghost, .btn-light):hover:not(:disabled),
body:not(.admin-body) .toolbar .btn-ghost:not(#cameraBtn):hover:not(:disabled) {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}
body:not(.admin-body) #cancelTryOnBtn { color: var(--ink); border-color: var(--line-strong); }

body.admin-body :is(button, input, select, textarea, summary, a):focus-visible,
body:not(.admin-body) :is(button, input, select, textarea, summary, a):focus-visible,
.connection-dialog :is(button, canvas):focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}
.connection-dialog input:focus { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
body.admin-body input:focus,
body.admin-body select:focus,
body:not(.admin-body) .frame-search:focus,
body:not(.admin-body) .customer-filter-grid select:focus {
  border-color: var(--line-strong);
  box-shadow: none;
}

/* Current sidebar item: neutral surface, dark text, one 3px orange stripe. */
body.admin-body .tab-btn { position: relative; color: var(--muted); }
body.admin-body .tab-btn:hover { background: var(--surface-soft); color: var(--ink); }
body.admin-body .tab-btn.active { background: var(--bg); color: var(--ink); box-shadow: none; font-weight: 600; }
body.admin-body .tab-btn.active::before { position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; height: auto; margin: 0; border-radius: var(--radius-pill); background: var(--accent); }
body.admin-body .tab-btn:not(.active)::before { content: none; }
body:not(.admin-body) .customer-dock-tab.active { color: var(--ink); background: transparent; }
body:not(.admin-body) .customer-dock-tab.active::after { background: var(--ink); }
body:not(.admin-body) .customer-dock-close { background: var(--surface-soft); color: var(--ink); }
body:not(.admin-body) .chip.active,
body:not(.admin-body) .frame-item.active,
body:not(.admin-body) .frame-item-actions button.active { border-color: var(--ink); background: var(--surface); color: var(--ink); box-shadow: none; }
body:not(.admin-body) .frame-item-actions .frame-favorite { color: var(--ink); font-size: 16px; }
.connection-side-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--surface); }
.connection-range input,
.connection-assembly-tools input,
body.admin-body input[type="checkbox"],
body.admin-body progress { accent-color: var(--ink); }

/* Bright surfaces on the existing shells. Keep position, sizes, canvas and transitions. */
body.admin-body .topbar,
body:not(.admin-body) .topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none; }
body.admin-body .brand-mark,
body.admin-body .login-card::before { background: var(--ink); box-shadow: none; }
body.admin-body .brand-tag { color: var(--muted); border-color: var(--line); }
body.admin-body .privacy-badge,
body:not(.admin-body) .privacy-badge { background: var(--surface); color: var(--muted); border-color: var(--line-strong); }
body.admin-body .privacy-badge:hover { color: var(--ink); background: var(--surface-soft); border-color: var(--line-strong); }
body.admin-body .admin-tabs,
body.admin-body .admin-section,
body.admin-body .login-card,
body.admin-body .modal-card { background: var(--surface); color: var(--ink); border-color: var(--line); }
body.admin-body .wizard-steps span.active { color: var(--ink); background: var(--bg); box-shadow: none; }
body.admin-body .workbench-card.accent strong,
body.admin-body .workbench-task-list em { color: var(--ink); }

body:not(.admin-body)::before,
body:not(.admin-body) .stage { background: var(--stage); }
body:not(.admin-body) .brand-name { color: var(--ink); background: transparent; text-shadow: none; }
body:not(.admin-body) #shopSubtitle { color: var(--muted); }
body:not(.admin-body) .current-product { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
body:not(.admin-body) .current-product span,
body:not(.admin-body) .drop-hint span { color: var(--muted); }
body:not(.admin-body) .drop-hint strong { color: var(--ink); }
body:not(.admin-body) .entry-product-image { background: var(--bg); }
body:not(.admin-body) .toolbar { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
body:not(.admin-body) .status-line,
body:not(.admin-body) .compare-original-btn,
body:not(.admin-body) .camera-quality { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
body:not(.admin-body) .compare-original-btn.active { background: var(--bg); color: var(--ink); }
body:not(.admin-body) .stage .overlay { background: var(--surface); color: var(--ink); }
body:not(.admin-body) .modal,
body.admin-body .modal,
body:not(.admin-body) .customer-sheet-backdrop,
body:not(.admin-body) .save-dialog::backdrop { background: var(--overlay); }
body:not(.admin-body) .modal-card,
body:not(.admin-body) .save-dialog { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-card); }
body:not(.admin-body) .toast { background: var(--ink); color: var(--surface); }
body:not(.admin-body) .spinner { border-color: var(--line); border-top-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  body.admin-body .btn, body:not(.admin-body) .btn, .admin-primary { transition: none; }
}