/* ==========================================================================
   丙大山古玩市场 · 设计系统 (Design Tokens + Base)
   风格：新拟态浅白软质感 / 低饱和蓝主色 / 16px 圆角 / 纤细线性 / 无厚重阴影
   ========================================================================== */

:root {
  /* ---- 主色：低饱和蓝 ---- */
  --blue-50:  #f2f6fb;
  --blue-100: #e3ecf6;
  --blue-200: #c7d9ec;
  --blue-300: #9dbbda;
  --blue-400: #6f9ac4;
  --blue-500: #4d7fae;   /* 主色 */
  --blue-600: #3d6790;
  --blue-700: #2f5073;

  /* ---- 辅助：浅灰 + 淡绿 ---- */
  --grey-50:  #fafbfc;
  --grey-100: #f2f4f7;
  --grey-200: #e6e9ee;
  --grey-300: #d4d9e0;
  --grey-400: #aeb6c1;
  --grey-500: #7c8794;
  --grey-600: #5a6472;

  --green-50:  #eef7f0;
  --green-100: #dcefe1;
  --green-300: #9ecfaa;
  --green-500: #4f9060;
  --green-700: #2f6b3d;

  /* ---- 语义 ---- */
  --amber-100: #fdf3e2;
  --amber-300: #f0cd8c;
  --amber-600: #b8842c;
  --red-100:   #fceeed;
  --red-300:   #f0ae a4;
  --red-500:   #c4553d;
  --red-700:   #963a26;

  /* ---- 表面（新拟态的关键：同色系阴影，不用黑） ---- */
  --bg:            #f4f6f9;
  --surface:       #ffffff;
  --surface-sunk:  #eef1f5;
  --shadow-light:  rgba(255, 255, 255, 0.92);
  --shadow-dark:   rgba(163, 177, 198, 0.32);
  --shadow-dark-s: rgba(163, 177, 198, 0.20);

  /* ---- 文字 ---- */
  --text:    #1f2833;
  --text-2:  #5a6472;
  --text-3:  #8b95a3;
  --text-on: #ffffff;

  /* ---- 圆角 ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;   /* 卡片基准 */
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- 间距 ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* ---- 动效：统一时长与曲线，全局只用这三档 ---- */
  --t-fast: 140ms;
  --t-mid:  240ms;
  --t-slow: 420ms;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);      /* 弹性展开 */
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);  /* 回弹 */

  /* ---- 层级 ----
     关键：遮罩必须【低于】所有浮层。
     第一版把 scrim 设成 --z-modal(400)，结果它盖在了 sheet(200) 上面，
     底栏清单的关闭按钮点不到 —— 手机上整个 sheet 直接废掉。
     这是实测出来的：uitest 点 .sheet .modal__x 时报
     "<div class='scrim is-open'> intercepts pointer events"。
     现在遮罩独占 150，永远在浮层下面。 */
  --z-sticky: 20;
  --z-pop:    100;   /* 浮层：popover / 联想 / 网格 / 日历 */
  --z-scrim:  150;   /* 遮罩：永远低于任何浮层 */
  --z-sheet:  200;   /* 底栏清单 */
  --z-drawer: 300;   /* 侧边抽屉 */
  --z-modal:  400;   /* 弹窗 / 确认弹窗 */
  --z-toast:  500;   /* toast / tooltip */

  /* ---- 新拟态阴影配方 ---- */
  --neu:      6px 6px 14px var(--shadow-dark-s), -6px -6px 14px var(--shadow-light);
  --neu-sm:   3px 3px 7px var(--shadow-dark-s), -3px -3px 7px var(--shadow-light);
  --neu-inset: inset 3px 3px 7px var(--shadow-dark-s), inset -3px -3px 7px var(--shadow-light);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.7 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
        -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--blue-500); text-decoration: none; }

/* 焦点可见性：键盘用户必须看得见焦点在哪 */
:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   第三方注入元素的隔离
   ==========================================================================
   Netlify 会在页面 DOM 里注入一个 iframe#nl-badge-frame（"Powered by" 徽章）：
   position:fixed、z-index 2147483645、197x64，落在视口右下角。

   实测它正好压住底栏最右侧的「委托清单」按钮：
     本地 file://  → elementFromPoint 返回 BUTTON，可点
     线上 https://  → elementFromPoint 返回 IFRAME，点不到
   一个装饰性徽章挡住主流程按钮，是不能接受的产品缺陷。

   两道处理：
     ① 已在 Netlify 项目配置关闭徽章（built_with_badge_enabled=false，官方开关）
     ② 这里是第二道保险：万一开关被重新打开，它至少不再拦截点击。
        用 pointer-events:none 而不是 display:none ——
        保留它可见（不违反平台规则），只取消它对交互的遮挡。
        写了明确的 why：以后有人删掉这行，要知道自己删掉了什么。
*/
#nl-badge-frame { pointer-events: none !important; }

/* ==========================================================================
   基础组件
   ========================================================================== */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--neu);
  padding: var(--s-5);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--grey-200);
}

.card--sunk {
  background: var(--surface-sunk);
  box-shadow: var(--neu-inset);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--neu-sm);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  user-select: none;
}
.btn:hover { color: var(--blue-600); }
.btn:active { transform: scale(.97); box-shadow: var(--neu-inset); }
.btn--primary {
  background: var(--blue-500);
  color: var(--text-on);
  box-shadow: 4px 4px 10px var(--shadow-dark), -3px -3px 9px var(--shadow-light);
}
.btn--primary:hover { color: var(--text-on); background: var(--blue-600); }
.btn--ghost { box-shadow: none; background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--grey-100); }
.btn--sm { min-height: 30px; padding: 0 var(--s-3); font-size: 13px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }

/* 线性图标：统一 1.6 描边，跟随文字色 */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor;
       fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 15px; height: 15px; stroke-width: 1.8; }
.ico--lg { width: 22px; height: 22px; stroke-width: 1.5; }

.field {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--s-4);
  background: var(--surface-sunk);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--neu-inset);
  transition: border-color var(--t-fast) var(--ease);
}
.field:focus { outline: none; border-color: var(--blue-300); }
.field::placeholder { color: var(--text-3); }

.label { display: block; font-size: 13px; color: var(--text-2); margin: var(--s-4) 0 var(--s-2); }
.label .req { color: var(--red-500); }

.hint { font-size: 12px; color: var(--text-3); margin-top: var(--s-2); }
.divider { height: 1px; background: var(--grey-200); margin: var(--s-5) 0; border: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: 12px; line-height: 1.7;
}
.pill--blue  { background: var(--blue-100);  color: var(--blue-700); }
.pill--green { background: var(--green-100); color: var(--green-700); }
.pill--amber { background: var(--amber-100); color: var(--amber-600); }
.pill--red   { background: var(--red-100);   color: var(--red-700); }
.pill--grey  { background: var(--grey-100);  color: var(--text-2); }