/* 天天商城 · 设计 token
   来源问题：改造前每个页面各自写一套 :root，出现 3 种背景黑、2 种辅助金、
   2 种正文白、27 档字号、9 档字重、9 种圆角，页面之间视觉不连续。
   这里是唯一的取值出处，各页面不再自定义 :root。

   取舍说明：币安金 #F0B90B 是既有品牌资产（加密圈的语义色），保留不动；
   把它收窄为「唯一强调色」，只用于价格与主行动，其余状态改用语义色，
   避免金色被用在任何需要引起注意的地方而失去分量。 */

:root{
  /* ── 底色与文字 ───────────────────────────────
     三种深黑收敛为一种。层次靠 surface 叠加，不靠改背景色。 */
  --bg:        #05070F;
  --surface-1: rgba(30,41,59,.62);   /* 卡片 */
  --surface-2: rgba(15,23,42,.55);   /* 输入框、内嵌块 */
  --text:      #F5F7FB;              /* 标题与正文 */
  --soft:      #C9D2E3;              /* 次级正文 */
  --muted:     #8B96A8;              /* 说明、时间戳 */
  --line:      rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);

  /* ── 品牌色：只给价格和主行动 ─────────────────── */
  --gold:  #F0B90B;
  --gold2: #FFE08A;
  --gold-soft: rgba(240,185,11,.12);

  /* ── 语义色：状态一律走这里，不再借用金色 ───────── */
  --ok:     #34D399;   /* 已收款、自动发货、库存充足 */
  --warn:   #FBBF24;   /* 待核验、库存少量、人工开通 */
  --danger: #FB7185;   /* 失败、缺货、已取消 */
  --info:   #60A5FA;   /* 链上、提示 */
  --green:  #5CFF8A;   /* 旧变量，保留兼容 */

  /* ── 字体 ─────────────────────────────────────
     不引外部字体：国内访问 Google Fonts 不稳，且付款页有 CSP 限制。 */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;

  /* ── 字号：27 档收敛为 7 档，1.25 比例 ──────────── */
  --fs-xs:   12px;   /* 徽章、脚注 */
  --fs-sm:   14px;   /* 说明文字 */
  --fs-base: 16px;   /* 正文 */
  --fs-lg:   20px;   /* 小标题 */
  --fs-xl:   26px;   /* 区块标题 */
  --fs-2xl:  34px;   /* 页面标题 */
  --fs-3xl:  44px;   /* 首屏主张 */

  /* ── 字重：9 档收敛为 3 档 ──────────────────────
     原来 600/650/700/750/800/850/900/950/1000 九档，
     相邻两档在多数字体里渲染不出差异，只是让层级变模糊。 */
  --fw-normal: 500;
  --fw-bold:   700;
  --fw-black:  900;

  /* ── 圆角：9 种收敛为 3 种 ─────────────────────── */
  --r-sm:   12px;
  --r-md:   20px;
  --r-full: 999px;

  /* ── 间距：8pt 栅格 ───────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── 容器与动效 ───────────────────────────────── */
  /* 付款台沿用的旧变量名，保留别名，避免一次性改动过大 */
  --panel:  var(--surface-1);
  --panel2: var(--surface-2);
  --red:    var(--danger);

  --max: 1180px;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .18s;
}

/* 交付方式与库存状态的统一表达。
   之前「自动发货 / 人工开通 / 库存紧张」散落在各页各写各的样式，
   客户扫一眼分不清哪个商品是秒发、哪个要等人工。 */
.tag-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  border:1px solid transparent; white-space:nowrap; line-height:1;
}
.tag-badge.is-auto  { color:var(--ok);     background:rgba(52,211,153,.12);  border-color:rgba(52,211,153,.30); }
.tag-badge.is-manual{ color:var(--warn);   background:rgba(251,191,36,.12);  border-color:rgba(251,191,36,.30); }
.tag-badge.is-stock-ok  { color:var(--ok);   background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.26); }
.tag-badge.is-stock-low { color:var(--warn); background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.26); }
.tag-badge.is-stock-out { color:var(--danger);background:rgba(251,113,133,.10);border-color:rgba(251,113,133,.26); }
.tag-badge.is-plain { color:var(--soft); background:rgba(255,255,255,.05); border-color:var(--line); }

/* 无障碍与动效基线 */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--gold);
  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; scroll-behavior:auto!important;
  }
}

/* ── 页面底子 ──────────────────────────────────────────
   改造前每页各写一套 body 背景，光晕色有靛蓝/绿/金/紫/棕金/纯色六种，
   强度和位置也各不相同，翻页时像换了个网站。
   这里统一结构与强度，只留 --accent-glow 一个口子给各业务线做识别色。 */
:root{ --accent-glow: rgba(99,102,241,.20); }

html,body{
  margin:0; min-height:100%; overflow-x:hidden;
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
body{
  background:
    radial-gradient(900px 480px at 12% -8%, var(--accent-glow), transparent 58%),
    radial-gradient(720px 420px at 92% 0%, rgba(240,185,11,.10), transparent 55%),
    linear-gradient(180deg,#05070F 0%,#070B16 48%,#05070F 100%);
}
/* 极淡的网格，给深色底一点质感，不抢内容 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 20%,#000 0%,transparent 72%);
}