/* ============================================================
   摆摊订单管家 · 设计令牌
   视觉主题：iOS / 玻璃材质
   浅灰底 + 柔和色晕，玻璃卡片浮在上面；SF 字体、单强调色、
   大圆角、发丝分隔线。数字用 SF 等宽数字，不再用等宽字体。
   ============================================================ */

:root {
  /* --- 背景与色晕（给玻璃提供折射的内容） --- */
  --bg: #EFF5FC;
  --wash-a: rgba(10, 132, 255, .17);
  --wash-b: rgba(90, 200, 250, .18);
  --wash-c: rgba(110, 175, 255, .14);

  /* --- 玻璃材质 --- */
  --glass: rgba(255, 255, 255, .60);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-chrome: rgba(250, 252, 255, .97);
  --glass-input: rgba(255, 255, 255, .82);
  --blur: blur(30px) saturate(185%);
  --blur-chrome: blur(30px) saturate(180%);

  /* --- 描边与填充（都在玻璃之上） --- */
  --stroke: rgba(20, 60, 110, .10);
  --stroke-strong: rgba(20, 60, 110, .18);
  --stroke-bright: rgba(255, 255, 255, .78);
  --fill: rgba(50, 100, 170, .10);
  --fill-2: rgba(50, 100, 170, .17);

  /* --- 文本（深蓝灰，比纯黑轻） --- */
  --label: #16273C;
  --label-2: #45586E;
  --label-3: #77899E;
  --label-4: #A4B2C4;

  /* --- 主色：亮蓝 --- */
  --blue: #0A84FF;
  --blue-press: #0066CC;
  --blue-soft: rgba(10, 132, 255, .12);
  --blue-line: rgba(10, 132, 255, .30);
  --blue-deep: #0B5BC4;

  /* --- 语义色（文本色偏深，保证浅底可读） --- */
  --green: #248A3D;
  --green-soft: rgba(52, 199, 89, .14);
  --green-line: rgba(52, 199, 89, .34);

  --amber: #A85B00;
  --amber-soft: rgba(255, 159, 10, .12);
  --amber-line: rgba(255, 159, 10, .38);

  --red: #D70015;
  --red-soft: rgba(255, 59, 48, .12);
  --red-line: rgba(255, 59, 48, .30);

  --teal: #0071A4;
  --teal-soft: rgba(48, 176, 199, .14);
  --teal-line: rgba(48, 176, 199, .32);

  /* --- 字体 --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               system-ui, sans-serif;

  /* --- 字阶 --- */
  --fs-xs: 11.5px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-hero: clamp(46px, 13vw, 66px);

  /* --- 圆角 --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 980px;

  /* --- 阴影：很浅，主要靠材质和描边分层 --- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .035), 0 6px 20px rgba(0, 0, 0, .05);
  --sh-2: 0 10px 34px rgba(0, 0, 0, .08);
  --sh-3: 0 -12px 44px rgba(0, 0, 0, .10);
  --sh-pop: 0 30px 80px rgba(0, 0, 0, .20);

  /* --- 尺寸 --- */
  --topbar-h: 44px;
  --tabbar-h: calc(64px * 2 / 3);
  --tap: 44px;
  --sidebar-w: 120px;
  --content-max: 1240px;

  /* --- 动效 --- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: .22s;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* 固定的柔和色晕，玻璃卡片才有东西可以“磨” */
body::before {
  content: "";
  position: fixed; inset: -25% -15%;
  z-index: 0;
  background:
    radial-gradient(48% 40% at 12% 2%, var(--wash-a), transparent 66%),
    radial-gradient(42% 36% at 94% 6%, var(--wash-b), transparent 66%),
    radial-gradient(54% 44% at 80% 90%, var(--wash-c), transparent 68%),
    radial-gradient(40% 34% at 46% 46%, rgba(10, 132, 255, .07), transparent 72%);
  pointer-events: none;
}
#app { position: relative; z-index: 1; min-height: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
a { color: var(--blue); text-decoration: none; }
svg { display: block; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ============ 工具类 ============ */
/* 数字：SF 等宽数字，列对齐但不抢视觉 */
.mono, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.012em;
}
.muted  { color: var(--label-3); }
.muted2 { color: var(--label-4); }
.small  { font-size: var(--fs-sm); }
.xs     { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.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;
}

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