/* ============================================================
   Endfield 工业风 · Design Tokens / Base / 工具类 / 动效
   参考：hhikr/endfield-ui-skill (MIT) · icaruszezen/endfield-ui ·
        VBeatDead/ReEnd-Components (MIT) · 终末地官网氛围
   分工：theme.css = 令牌 + 基础 + 工具类 + 动效
        site.css  = 全部组件样式（唯一一份，避免重复）
   六法则：纸墨为主 / 切角=可按 / 宽体英文上+粗体中文下 /
          数字必须真实 / 1px 细线，无阴影圆角渐变 / 动画短硬 ≤1s
   ============================================================ */

/* ---------- 令牌（暗色默认） ---------- */
:root{
  /* 纸与墨 */
  --ef-paper:#191919;
  --ef-panel:#222222;
  --ef-panel-2:#282828;
  --ef-ink:#EDEDED;
  --ef-ink-2:#ABABAB;
  --ef-ink-3:#757575;
  --ef-ink-4:#4E4E4E;
  --ef-line:rgba(237,237,237,.14);
  --ef-line-strong:rgba(237,237,237,.32);
  --ef-hover:rgba(237,237,237,.05);
  --ef-focus:rgba(237,237,237,.55);
  --ef-nav-bg:rgba(25,25,25,.88);

  /* 信号色：黄只作填充，红只给删除 */
  --ef-yellow:#FFFA00;
  --ef-on-yellow:#161616;
  --ef-mag:#FF00F0;
  --ef-cyan:#00FFA2;
  --ef-red:#FF4545;

  /* 纹理预算：等高线 墨9% / 黄底斜纹 22% */
  --ef-contour:rgba(237,237,237,.09);
  --ef-code:rgba(237,237,237,.06);
  --ef-hatch:rgba(22,22,22,.22);

  /* 字体：Saira (OFL) + Noto Sans SC */
  --ef-font-ui:"Saira","Noto Sans SC",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --ef-font-text:"Noto Sans SC","Saira",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --ef-font-mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;

  /* 形状：一律直角；切角表示可按 */
  --ef-cut:12px;
  --ef-cut-s:8px;

  /* 动效三条曲线 */
  --ef-ease:cubic-bezier(0.2,0.7,0.1,1);
  --ef-snap:cubic-bezier(0.16,1,0.3,1);
  --ef-mech:cubic-bezier(0.7,0,0.2,1);

  /* 视图过渡圆心（theme.js 设置，默认屏幕中心） */
  --vt-x:50%;
  --vt-y:50%;

  /* ---------- 兼容旧令牌（admin.js / bg.js 等仍在引用） ---------- */
  --bg:var(--ef-paper);
  --bg-elevated:var(--ef-panel);
  --bg-code:var(--ef-code);
  --icon-bg:var(--ef-panel-2);
  --text-primary:var(--ef-ink);
  --text-secondary:var(--ef-ink-2);
  --text-tertiary:var(--ef-ink-3);
  --text-quaternary:var(--ef-ink-4);
  --border:var(--ef-line);
  --border-hover:var(--ef-line-strong);
  --hover:var(--ef-hover);
  --focus-ring:var(--ef-focus);
  --tag-bg:var(--ef-panel);
  --tag-border:var(--ef-line);
  --selection-bg:var(--ef-yellow);
  --selection-fg:#161616;
  --radius-card:0px;
  --radius-sm:0px;
  --radius-pill:0px;
  --ease-out:var(--ef-ease);
  --ease-snap:var(--ef-snap);
  --ease-mech:var(--ef-mech);
  --fx-rgb:237,237,237;   /* canvas 线稿：暗色为墨白 */
}

/* ---------- 亮色（亮纸 #F4F4F2 / 板 #FFFFFF / 墨 #161616） ---------- */
html[data-theme="light"]{
  --ef-paper:#F4F4F2;
  --ef-panel:#FFFFFF;
  --ef-panel-2:#EFEFEC;
  --ef-ink:#161616;
  --ef-ink-2:#4B4B4B;
  --ef-ink-3:#747474;
  --ef-ink-4:#9C9C9C;
  --ef-line:rgba(22,22,22,.16);
  --ef-line-strong:rgba(22,22,22,.36);
  --ef-hover:rgba(22,22,22,.045);
  --ef-focus:rgba(22,22,22,.55);
  --ef-nav-bg:rgba(244,244,242,.9);
  --ef-contour:rgba(22,22,22,.09);
  --ef-code:rgba(22,22,22,.05);
  --fx-rgb:22,22,22;      /* 亮色线稿为墨黑 */
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  background:var(--ef-paper);
  color:var(--ef-ink);
  font-family:var(--ef-font-ui);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
a{color:inherit}
img{max-width:100%}
button{font-family:inherit}
:focus-visible{outline:1px solid var(--ef-focus);outline-offset:2px}

/* 阅读正文用 --font-text（中文优先） */
.a-body,.hero-intro,.sec-sub,.gdesc,.pc-summary,.login-sub,.admin-sub,.hint,.note,.maccount{
  font-family:var(--ef-font-text);
}

/* ---------- 工具类 ---------- */
/* 三色条：品红 / 信号黄 / 荧光绿 */
.tri-strip{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,
    var(--ef-mag) 0 33.4%,
    var(--ef-yellow) 33.4% 66.7%,
    var(--ef-cyan) 66.7% 100%);
}

/* 眉标：宽体大写英文（// XXX），下方接粗体中文标题 */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ef-font-ui);
  font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ef-ink-3);
}
.eyebrow .eb-slash{color:var(--ef-ink-2);letter-spacing:0;font-weight:700}
.eyebrow::after{content:"";flex:0 0 28px;height:1px;background:var(--ef-line-strong)}

/* 事实行：真实数据的小档案条 */
.facts{
  display:flex;flex-wrap:wrap;
  border:1px solid var(--ef-line);
  background:var(--ef-panel);
  width:fit-content;max-width:100%;
}
.fact{padding:10px 16px;border-right:1px solid var(--ef-line);min-width:92px}
.fact:last-child{border-right:0}
.fact dt{
  font-size:9px;font-weight:600;line-height:1;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ef-ink-3);
}
.fact dd{
  margin-top:7px;font-size:17px;font-weight:700;line-height:1;
  color:var(--ef-ink);font-variant-numeric:tabular-nums;
  font-family:var(--ef-font-ui);
}

/* 切角（左上 + 右下）：表示可按 */
.cut{
  clip-path:polygon(
    var(--ef-cut) 0,100% 0,
    100% calc(100% - var(--ef-cut)),
    calc(100% - var(--ef-cut)) 100%,
    0 100%,0 var(--ef-cut));
}
.cut-s{
  clip-path:polygon(
    var(--ef-cut-s) 0,100% 0,
    100% calc(100% - var(--ef-cut-s)),
    calc(100% - var(--ef-cut-s)) 100%,
    0 100%,0 var(--ef-cut-s));
}

/* 黄底斜纹（危险纹，22% 墨色），叠在 --ef-yellow 上用 */
.hatch{
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 6px,var(--ef-hatch) 6px 9px);
}

/* ---------- 入场动效（短硬 ≤1s） ---------- */
@keyframes ef-power{
  from{opacity:0;clip-path:inset(0 0 100% 0)}
  to{opacity:1;clip-path:inset(0 0 -8% 0)}
}
.ef-power{
  opacity:0;
  animation:ef-power .5s var(--ef-snap) forwards;
  animation-delay:calc(var(--i,0)*100ms + 120ms);
}
@keyframes ef-come{
  from{opacity:0;transform:translateX(-14px);clip-path:inset(0 100% 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0 -8% 0 0)}
}
.ef-come{
  opacity:0;
  animation:ef-come .45s var(--ef-snap) forwards;
  animation-delay:calc(var(--i,0)*45ms + 80ms);
}
/* 关键帧通用（其他组件短动效） */
@keyframes ef-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ef-drive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ef-stroke{from{opacity:0}to{opacity:1}}

/* ---------- 主题切换：圆形揭示（View Transitions） ---------- */
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){
  animation:ef-vt-reveal .45s var(--ef-mech) forwards;
}
@keyframes ef-vt-reveal{
  from{clip-path:circle(0 at var(--vt-x) var(--vt-y))}
  to{clip-path:circle(142% at var(--vt-x) var(--vt-y))}
}

/* ---------- 减少动态 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ef-power,.ef-come{animation:none;opacity:1;clip-path:none;transform:none}
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(*),
  ::view-transition-image-pair(*){animation:none!important}
}