/* ==========================================================================
   玄枢 · 设计系统 / Design Tokens + Foundation
   --------------------------------------------------------------------------
   依据 ui-ux-pro-max skill 的 token 架构：primitive -> semantic -> component
   风格取向：Premium Ink & Gold（收银台） + Minimalism / Swiss（管理台）
   约束：Light theme、零外部依赖、无构建步骤、全部颜色走语义变量。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- 色板 */
  --c-white:        #ffffff;
  --c-paper:        #fdfcfa;
  --c-canvas:       #faf9f7;
  --c-sunken:       #f5f3ef;
  --c-raised:       #f0eee9;
  --c-line-soft:    #efede8;
  --c-line:         #e4e0d8;
  --c-line-strong:  #d3cec3;
  --c-ink-400:      #a49d92;
  --c-ink-500:      #7c756a;
  --c-ink-600:      #57534c;
  --c-ink-700:      #3d3933;
  --c-ink-800:      #292622;
  --c-ink-900:      #1c1917;
  --c-ink-950:      #12100e;

  --c-gold-50:      #fbf5e8;
  --c-gold-100:     #f5e8c9;
  --c-gold-200:     #ecd6a1;
  --c-gold-300:     #dcb862;
  --c-gold-400:     #c99a2e;
  --c-gold-500:     #b4831b;
  --c-gold-600:     #a16207;
  --c-gold-700:     #85500a;
  --c-gold-900:     #4a3005;

  --c-green-50:     #ecf6ef;
  --c-green-200:    #c3e3cd;
  --c-green-600:    #15803d;
  --c-green-700:    #166534;
  --c-red-50:       #fdf1ef;
  --c-red-200:      #f3cfc8;
  --c-red-600:      #c0392b;
  --c-red-700:      #a5342a;
  --c-amber-50:     #fdf6e7;
  --c-amber-200:    #f0e0b6;
  --c-amber-700:    #b45309;
  --c-blue-50:      #eef3fc;
  --c-blue-200:     #cbdcf8;
  --c-blue-600:     #1d4ed8;
  --c-blue-700:     #1a44b8;

  /* ------------------------------------------------------------ 间距刻度 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ------------------------------------------------------------ 字体刻度 */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px;
  --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px;
  --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-21: 21px;
  --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-30: 30px;
  --fs-34: 34px; --fs-36: 36px; --fs-40: 40px; --fs-44: 44px;
  --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.6; --lh-loose: 1.75;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tr-tight: -0.025em; --tr-normal: 0; --tr-wide: 0.04em; --tr-wider: 0.12em;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* ------------------------------------------------------------ 圆角/阴影 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 18px; --r-2xl: 24px; --r-full: 999px;

  --sh-1: 0 1px 2px rgba(28, 25, 23, .04);
  --sh-2: 0 1px 2px rgba(28, 25, 23, .04), 0 10px 28px -18px rgba(28, 25, 23, .22);
  --sh-3: 0 2px 6px rgba(28, 25, 23, .05), 0 28px 64px -28px rgba(28, 25, 23, .34);
  --sh-gold: 0 6px 18px -8px rgba(161, 98, 7, .38);

  /* ------------------------------------------------------------ 动效刻度 */
  --t-fast: 130ms; --t-base: 190ms; --t-slow: 280ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ------------------------------------------------------------ 语义别名 */
  --bg:              var(--c-canvas);
  --bg-sunken:       var(--c-sunken);
  --surface:         var(--c-white);
  --surface-2:       var(--c-paper);
  --surface-hover:   var(--c-sunken);
  --fg:              var(--c-ink-900);
  --fg-muted:        var(--c-ink-600);
  --fg-subtle:       var(--c-ink-500);
  --fg-faint:        var(--c-ink-400);
  --border:          var(--c-line);
  --border-soft:     var(--c-line-soft);
  --border-strong:   var(--c-line-strong);

  --primary:         var(--c-ink-900);
  --primary-hover:   var(--c-ink-700);
  --primary-fg:      var(--c-white);
  --accent:          var(--c-gold-600);
  --accent-hover:    var(--c-gold-700);
  --accent-fg:       var(--c-white);
  --accent-soft:     var(--c-gold-50);
  --accent-soft-fg:  var(--c-gold-700);
  --accent-border:   var(--c-gold-200);

  --success:         var(--c-green-600);
  --success-soft:    var(--c-green-50);
  --success-border:  var(--c-green-200);
  --danger:          var(--c-red-600);
  --danger-soft:     var(--c-red-50);
  --danger-border:   var(--c-red-200);
  --warning:         var(--c-amber-700);
  --warning-soft:    var(--c-amber-50);
  --warning-border:  var(--c-amber-200);
  --info:            var(--c-blue-600);
  --info-soft:       var(--c-blue-50);
  --info-border:     var(--c-blue-200);

  --ring:            var(--c-gold-500);
  --ring-width:      2px;
  --ring-offset:     2px;
  --focus-ring:      0 0 0 var(--ring-width) var(--ring);
  --opacity-disabled: .48;

  /* -------------------------------------------------------- 组件级语义 */
  --btn-h:            40px;
  --btn-h-sm:         32px;
  --btn-h-lg:         48px;
  --input-h:          40px;
  --card-pad:         var(--sp-6);
  --card-radius:      var(--r-xl);
  --control-radius:   var(--r-md);
  --table-row-h:      48px;
  --header-h:         64px;
  --sidebar-w:        232px;
  --content-max:      1160px;
  --store-max:        468px;
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--c-gold-100); color: var(--c-gold-900); }

/* 统一焦点环：任何交互元素都不允许无替代地移除 outline */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   共享组件
   ========================================================================== */

/* ---- 图标 ---- */
.ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 22px; height: 22px; }

/* ---- 按钮 ---- */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--btn-h); padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--fg); font-size: var(--fs-13); font-weight: var(--fw-medium);
  white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled); cursor: not-allowed; transform: none;
}
.btn-sm { min-height: var(--btn-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-12); border-radius: var(--r-sm); }
.btn-lg { min-height: var(--btn-h-lg); padding: 0 var(--sp-6); font-size: var(--fs-15); }

.btn-primary {
  background: var(--primary); border-color: var(--primary); color: var(--primary-fg);
  font-weight: var(--fw-semibold);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-gold, .btn-accent {
  background: linear-gradient(165deg, var(--c-gold-400), var(--c-gold-600));
  border-color: var(--c-gold-600); color: var(--c-white);
  font-weight: var(--fw-semibold); box-shadow: var(--sh-gold);
}
.btn-gold:hover, .btn-accent:hover {
  background: linear-gradient(165deg, var(--c-gold-300), var(--c-gold-600));
  border-color: var(--c-gold-700);
}
.btn-danger { color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--fg); }

/* 纯文字链接按钮 */
.link {
  appearance: none; border: 0; background: none; padding: 0;
  color: var(--accent-soft-fg); font-size: var(--fs-13); font-weight: var(--fw-medium);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  text-underline-offset: 3px;
}
.link:hover { text-decoration: underline; }

/* ---- 卡片 ---- */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--sh-2);
  padding: var(--card-pad);
}

/* ---- 徽章 ---- */
.b, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: 19px;
  white-space: nowrap; border: 1px solid transparent;
}
.b::before, .badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.b-green, .badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.b-red,   .badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }
.b-gold,  .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.b-blue,  .badge-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
.b-gray,  .badge-neutral { background: var(--bg-sunken);    color: var(--fg-subtle); border-color: var(--border); }

/* ---- 表单 ---- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label {
  font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--fg-muted);
}
.field-help { font-size: var(--fs-11); color: var(--fg-faint); line-height: 1.5; }

input[type="text"], input[type="password"], input[type="number"],
input[type="file"], select, textarea {
  width: 100%; min-height: var(--input-h);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface); color: var(--fg);
  font-size: var(--fs-14); outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(180, 131, 27, .13);
  outline: none;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-sunken); color: var(--fg-subtle); cursor: not-allowed;
}
input[type="file"] { padding: 7px 10px; font-size: var(--fs-13); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
textarea { resize: vertical; min-height: 130px; line-height: 1.7; }
textarea.mono, .mono {
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .02em;
}

/* ---- 表格 ---- */
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 12px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border-soft);
}
th {
  font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--fg-subtle);
  background: var(--bg-sunken); white-space: nowrap;
  letter-spacing: var(--tr-wide);
}
th:first-child { border-top-left-radius: var(--r-sm); }
th:last-child  { border-top-right-radius: var(--r-sm); }
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.u-num { font-variant-numeric: tabular-nums; }
.u-mono { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .02em; }
.u-muted { color: var(--fg-subtle); }
.u-right { text-align: right; }

/* ---- 提示条 / 空态 ---- */
.flash, .alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: var(--r-md);
  font-size: var(--fs-13); line-height: 1.6; border: 1px solid;
}
.flash.ok, .alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.flash.err, .alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.alert-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }

.empty { text-align: center; color: var(--fg-subtle); padding: 46px 16px; font-size: var(--fs-13); }
.tip, .hint, .field-help {
  font-size: var(--fs-12); color: var(--fg-subtle); line-height: var(--lh-loose);
}

/* ---- 加载 / 骨架 ---- */
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: xs-spin .7s linear infinite; display: inline-block;
}
@keyframes xs-spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--c-sunken) 25%, var(--c-raised) 50%, var(--c-sunken) 75%);
  background-size: 200% 100%; border-radius: var(--r-sm);
  animation: xs-shimmer 1.3s ease-in-out infinite;
}
@keyframes xs-shimmer { to { background-position: -200% 0; } }

/* ---- 弹窗 ---- */
.modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: rgba(18, 16, 14, .46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: xs-fade var(--t-base) var(--ease-out) both;
}
@keyframes xs-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-box, .dialog {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: var(--sp-6);
  box-shadow: var(--sh-3);
  animation: xs-rise var(--t-slow) var(--ease-out) both;
}
@keyframes xs-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 1400;
  transform: translate(-50%, 14px); opacity: 0;
  background: var(--c-ink-900); color: var(--c-white);
  padding: 10px 18px; border-radius: var(--r-full);
  font-size: var(--fs-13); box-shadow: var(--sh-3);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- 屏幕阅读器专用 ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 布局小工具 ---- */
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.spacer { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ==========================================================================
   降低动效偏好：保留状态可读性，去掉一切非必要动画
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}