/* ============================================================
   tokens.css —— 设计变量 / 重置 / 排版 / 原子工具
   所有颜色、圆角、间距只在这里定义，其它文件只引用变量。
   ============================================================ */

:root{
  /* 背景层次 */
  --bg:#080b0a;
  --bg2:#0b100e;
  --bg3:#0e1512;
  --panel:#101917;
  --panel2:#14201c;
  --card:#101917;            /* 兼容 admin.html 的旧引用 */
  --ink:#050807;             /* 内凹控件底色 */

  /* 描边 */
  --line:rgba(255,255,255,.075);
  --line2:rgba(255,255,255,.14);
  --line3:rgba(255,255,255,.22);

  /* 文字 */
  --txt:#e9f1ec;
  --txt2:#c6d5cd;
  --mut:#93a89f;
  --dim:#61776d;

  /* 品牌 */
  --grn:#4ade80;
  --grn2:#22c55e;
  --mint:#7ef0a8;
  --cyan:#38bdf8;
  --gold:#fbbf24;
  --amb:#fbbf24;             /* admin.html 仍在用的旧名，保留别名 */
  --red:#f87171;

  /* 尺寸 */
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;
  --wrap:1120px;
  --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font:15.5px/1.7 system-ui,-apple-system,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 全局网格纹理：只在上半屏显影，往下自然消失，避免整页像草稿纸 */
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:center top;
  opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 5%,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 5%,transparent 72%);
}

img,svg,video{max-width:100%;display:block}
/* 组件里给 .form / .dl 之类设了 display，会盖掉浏览器默认的 [hidden]{display:none} */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0}

::selection{background:rgba(74,222,128,.28);color:#fff}

code,.mono{
  font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
}
code{
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  padding:1px 5px;border-radius:5px;
  font-size:.9em;color:#c9f5d8;
  white-space:nowrap;
}

/* 滚动条（桌面端） */
@media (pointer:fine){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:#243029;border-radius:8px;border:2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:#33453b}
}

/* ── 布局工具 ── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:840px}

/* ── 文字工具 ── */
.muted{color:var(--mut)}
.dim{color:var(--dim)}
.fine{font-size:12.5px}
.grad{
  background:linear-gradient(96deg,var(--mint) 0%,var(--grn) 42%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.arr{display:inline-block;transition:transform .18s var(--ease)}
a:hover > .arr{transform:translateX(4px)}

/* ── 小标签 ── */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grn);
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--grn);
  box-shadow:0 0 0 4px rgba(74,222,128,.14);
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(255,255,255,.025);
  font-size:12.5px;color:var(--mut);
}
.chip b{color:var(--txt);font-weight:600}
.chip.mono,.chip code{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ── 入场动画 ──
   只有 html.js（脚本已执行）时才把元素藏起来，否则 JS 挂了整页会空白 */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* ── 减少动效（账号偏好）──
   账号中心把「减少动效」写到 <html class="reduce-motion">，这里一次压掉全站过渡。
   入场元素直接显示，否则关掉动画后它们会停在 opacity:0。 */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
html.reduce-motion .js .reveal,
html.reduce-motion .reveal{opacity:1 !important;transform:none !important}