/* tokens.css — CSS 变量 + 关键帧。Tweaks 通过覆盖 :root 变量实时生效。 */
:root{
  /* 背景 (Tweak: 深浅背景) — 夜色navy */
  --bg-deepest:#070611; --bg-base:#0B0A16; --panel:#15131F; --panel2:#1D1A2B;
  --hairline:rgba(255,255,255,0.09);
  /* 霓虹主色 (Tweak: 霓虹主色) */
  --neon-1:#A855F7; --neon-2:#EC4899;
  --indigo:#6366F1; --cyan:#38BDF8; --orange:#FB923C; --rose:#FB7185; --green:#34D399;
  /* 文字 */
  --t1:#F6F4FB; --t2:#B3ADC7; --t3:#756F8C;
  /* 形状 (Tweak: 卡片圆角) */
  --r-card:26px; --r-panel:20px; --r-chip:13px;
  /* 玻璃模糊 (Tweak: 玻璃模糊强度) */
  --glass-blur:20px;
  --grad:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  --font-cn:"PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --font-ui:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --font-display:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
}
*{ -webkit-font-smoothing:antialiased; box-sizing:border-box; }
.cn{ font-family:var(--font-cn); }
.ui,.en{ font-family:var(--font-ui); letter-spacing:-0.005em; }
.disp{ font-family:var(--font-display); letter-spacing:-0.02em; }
.mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }

/* 玻璃面板 */
.glass{
  background:rgba(30,23,48,0.55);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--hairline);
}
.glass-edge{ position:relative; }
.glass-edge::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,0.30),rgba(255,255,255,0.02) 45%,rgba(168,85,247,0.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

/* 滚动条隐藏 */
.noscroll::-webkit-scrollbar{ display:none; }
.noscroll{ scrollbar-width:none; }

/* 关键帧 */
@keyframes breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.018) } }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes ripple{ 0%{ transform:scale(.7); opacity:.55 } 100%{ transform:scale(2.1); opacity:0 } }
@keyframes flow{ 0%{ background-position:0% 50% } 100%{ background-position:200% 50% } }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes glowpulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }
@keyframes wf{ 0%,100%{ transform:scaleY(.28) } 50%{ transform:scaleY(1) } }
@keyframes halo{ 0%,100%{ transform:translateX(-50%) scaleX(1); opacity:.85 } 50%{ transform:translateX(-50%) scaleX(1.06); opacity:1 } }
@keyframes haloSpin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
@keyframes tdot{ 0%,80%,100%{ transform:translateY(0); opacity:.4 } 40%{ transform:translateY(-5px); opacity:1 } }
.tdots{ display:inline-flex; gap:5px; align-items:center }
.tdots i{ width:7px; height:7px; border-radius:50%; background:var(--neon-2); animation:tdot 1.2s infinite }
.tdots i:nth-child(2){ animation-delay:.18s } .tdots i:nth-child(3){ animation-delay:.36s }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important } }