/* ===========================================================
   base.css — 设计令牌 / 重置 / 排版 / 布局工具
   www.599l.com 工具箱 · 明亮科技风格
   =========================================================== */
:root{
  /* 色彩令牌 —— 亮白底 + 电蓝强调 */
  --bg:#F4F7FC;
  --bg-alt:#FFFFFF;
  --bg-deep:#E9EFF8;
  --surface:#FFFFFF;
  --surface-solid:#FFFFFF;
  --surface-sunk:#F1F5FB;
  --ink:#0B1426;
  --ink-soft:#3D4D66;
  --muted:#7A8AA3;
  --line:rgba(11, 20, 38, 0.08);
  --line-strong:rgba(11, 20, 38, 0.14);
  --grid:rgba(11, 20, 38, 0.035);

  --accent:#0066FF;            /* 主电蓝 */
  --accent-deep:#004ACC;
  --accent-glow:rgba(0, 102, 255, 0.28);
  --accent-soft:rgba(0, 102, 255, 0.08);

  --neon:#06B6D4;              /* 青色（亮色版"霓虹"） */
  --neon-deep:#0891A8;
  --neon-glow:rgba(6, 182, 212, 0.28);
  --neon-soft:rgba(6, 182, 212, 0.08);

  --magenta:#E11D6E;           /* 品红高亮 */
  --magenta-glow:rgba(225, 29, 110, 0.25);
  --amber:#D97706;
  --success:#10B981;

  /* 阴影 —— 柔和蓝灰 */
  --shadow-sm:0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
  --shadow-md:0 8px 28px rgba(15, 23, 42, .08), 0 0 0 1px var(--line);
  --shadow-lg:0 20px 50px rgba(15, 23, 42, .12), 0 0 0 1px var(--line);
  --glow-accent:0 8px 24px rgba(0, 102, 255, .18);
  --glow-neon:0 8px 24px rgba(6, 182, 212, .18);

  /* 圆角 */
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-pill:999px;

  /* 字体 */
  --display:"Orbitron","Noto Sans SC",sans-serif;
  --sans:"Noto Sans SC","Rajdhani",-apple-system,"PingFang SC",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,monospace;

  /* 节奏 */
  --maxw:1200px;
  --gutter:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(0, 102, 255, 0.10), transparent 45%),
    radial-gradient(ellipse at 85% 0%, rgba(6, 182, 212, 0.08), transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(225, 29, 110, 0.04), transparent 50%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
/* 网格底纹 —— 极淡科技感 */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 3px var(--accent-soft)}

/* 排版 */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.2;letter-spacing:.01em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-soft);line-height:1.8}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.neon{color:var(--neon)}
.mono{font-family:var(--mono)}
.display{font-family:var(--display)}

/* 布局工具 */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.center{justify-content:center;align-items:center;text-align:center}
.gap-sm{gap:8px}.gap{gap:16px}.gap-lg{gap:24px}.gap-xl{gap:40px}
.wrap-flex{flex-wrap:wrap}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 章节标题装饰 —— 数据标签风 */
.eyebrow{
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"//";color:var(--neon);font-weight:700}
.section-title{margin-top:14px}

/* 分隔线 */
.rule{height:1px;background:linear-gradient(90deg,transparent 0%,var(--line-strong) 50%,transparent 100%);border:0;margin:0}

/* 入场动画 */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse-glow{0%,100%{box-shadow:var(--glow-accent)}50%{box-shadow:0 0 0 6px var(--accent-soft), 0 12px 36px rgba(0,102,255,.28)}}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}
.blink{animation:blink 1.4s ease-in-out infinite}
.pulse{animation:pulse-glow 2.6s ease-in-out infinite}

/* 响应式辅助 */
@media (max-width:760px){
  body{font-size:15px}
  .hide-mobile{display:none!important}
}
@media (min-width:761px){
  .hide-desktop{display:none!important}
}