/* ============================================================
   CYBER//RED — 共享样式系统  (原创赛博朋克红 视觉令牌)
   近黑底 · 霓虹红 · 工业等宽 · 扫描线 / 故障 / HUD
   ============================================================ */

:root{
  /* — 底色 (near-black, 微冷) — */
  --bg-0:#06060a;          /* 最深 */
  --bg-1:#0a0a10;          /* 主背景 */
  --bg-2:#0f0f16;          /* 面板 */
  --bg-3:#15151f;          /* 抬升面板 */
  --line:#23232f;          /* 描边 */
  --line-2:#33333f;

  /* — 霓虹红 (主) — */
  --red:#ff1f3d;
  --red-bright:#ff3b54;
  --red-deep:#b3001b;
  --red-blood:#7a0014;
  --red-glow:rgba(255,31,61,.55);

  /* 《赛博朋克 2077》专用色（青） */
  --c2077:rgb(0,188,216);

  /* — 文本 (绝不纯白) — */
  --ink:#e9e6e8;
  --ink-dim:#a7a3ad;
  --ink-mute:#6f6b78;
  --ink-faint:#494552;

  /* — 故障辅助色 (仅用于色散) — */
  --cyan:#27f0ff;
  --magenta:#ff2bd6;

  /* — 字体 — */
  --mono:'JetBrains Mono','Share Tech Mono',ui-monospace,monospace;
  --cjk:'Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif;

  --maxw:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-1);
  color:var(--ink);
  font-family:var(--cjk);
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#06060a;}
a{color:inherit;text-decoration:none;}

/* logo 图像 (红色笔触字标 · 透明底) */
.logo-img{display:block;height:28px;width:auto;
  filter:drop-shadow(0 0 14px rgba(255,31,61,.35));}
.nav .brand .logo-img{height:26px;}
.foot .logo-img{height:34px;margin-bottom:16px;}

/* mono utility */
.mono{font-family:var(--mono);}
.up{text-transform:uppercase;letter-spacing:.18em;}
.c2077{color:var(--c2077);}
.tnum{font-variant-numeric:tabular-nums;}

/* ============================================================
   全局氛围层：扫描线 + 噪点 + 暗角 (fixed overlays)
   ============================================================ */
.fx-overlay{position:fixed;inset:0;pointer-events:none;z-index:9000;}

.fx-scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode:overlay;opacity:.55;
}
.fx-vignette{
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%),
             radial-gradient(140% 120% at 50% 120%, rgba(179,0,27,.10), transparent 60%);
}
.fx-noise{opacity:.05;mix-blend-mode:screen;}
.fx-flicker{animation:fxFlicker 6s steps(1) infinite;}
@keyframes fxFlicker{
  0%,96%,100%{opacity:.05}
  97%{opacity:.10}
  98%{opacity:.02}
  99%{opacity:.08}
}
/* 移动的水平扫描束 */
.fx-beam{
  position:fixed;left:0;right:0;height:140px;z-index:9001;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(255,31,61,.05) 45%,rgba(39,240,255,.04) 55%,transparent);
  mix-blend-mode:screen;animation:fxBeam 7s linear infinite;
}
@keyframes fxBeam{0%{top:-160px}100%{top:100%}}

@media (prefers-reduced-motion:reduce){
  .fx-flicker,.fx-beam{animation:none!important}
  .fx-beam{display:none}
}

/* ============================================================
   GLITCH 文本 — 色散 (cyan/red) + 切片抖动
   用法: <span class="glitch" data-text="文本">文本</span>
   ============================================================ */
.glitch{position:relative;display:inline-block;color:var(--ink);}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;
  clip-path:inset(0 0 0 0);
}
.glitch::before{color:var(--cyan);transform:translate(-2px,0);opacity:.9;mix-blend-mode:screen;}
.glitch::after{color:var(--red);transform:translate(2px,0);opacity:.9;mix-blend-mode:screen;}
.glitch.is-on::before{animation:glA .42s steps(2) infinite;}
.glitch.is-on::after{animation:glB .42s steps(2) infinite;}
@keyframes glA{
  0%{clip-path:inset(0 0 82% 0);transform:translate(-3px,-1px)}
  25%{clip-path:inset(40% 0 38% 0);transform:translate(2px,1px)}
  50%{clip-path:inset(72% 0 8% 0);transform:translate(-2px,0)}
  75%{clip-path:inset(20% 0 60% 0);transform:translate(3px,-1px)}
  100%{clip-path:inset(0 0 82% 0);transform:translate(-3px,1px)}
}
@keyframes glB{
  0%{clip-path:inset(82% 0 0 0);transform:translate(3px,1px)}
  25%{clip-path:inset(38% 0 40% 0);transform:translate(-2px,-1px)}
  50%{clip-path:inset(8% 0 72% 0);transform:translate(2px,0)}
  75%{clip-path:inset(60% 0 20% 0);transform:translate(-3px,1px)}
  100%{clip-path:inset(82% 0 0 0);transform:translate(3px,-1px)}
}
@media (prefers-reduced-motion:reduce){
  .glitch::before,.glitch::after{display:none}
}

/* ============================================================
   终端打字机
   ============================================================ */
.type-caret::after{
  content:'';display:inline-block;width:.6em;height:1.05em;
  background:var(--red);margin-left:.12em;vertical-align:-.16em;
  animation:caret 1s steps(1) infinite;box-shadow:0 0 10px var(--red-glow);
}
@keyframes caret{50%{opacity:0}}

/* ============================================================
   通用组件
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* 角标面板：四角直角括号 */
.bracket{position:relative;}
.bracket::before,.bracket::after{
  content:'';position:absolute;width:14px;height:14px;pointer-events:none;
}
.bracket::before{left:-1px;top:-1px;border-left:2px solid var(--red);border-top:2px solid var(--red);}
.bracket::after{right:-1px;bottom:-1px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);}

/* 霓虹纪元标题 .era-title */
.era-title{margin:16px 0 0;line-height:.94;letter-spacing:.005em;font-weight:900;}
.era-title .l1{display:block;font-size:clamp(26px,3.8vw,50px);color:var(--cyan);
  text-shadow:0 0 5px rgba(39,240,255,.8),0 0 18px rgba(39,240,255,.42),0 0 34px rgba(39,240,255,.2);}
.era-title .l1 .op{color:#fff;font-weight:700;margin:0 .04em;
  text-shadow:0 0 5px rgba(39,240,255,.7),0 0 15px rgba(39,240,255,.35);}
.era-title .l2{display:block;font-size:clamp(52px,8.4vw,108px);color:var(--red);margin-top:.05em;
  text-shadow:0 0 6px rgba(255,31,61,.85),0 0 22px rgba(255,31,61,.5),0 0 44px rgba(255,31,61,.26);}
@media (prefers-reduced-motion:no-preference){
  .era-title .l2{animation:neonFlick 3.4s steps(1) infinite;}
}
@keyframes neonFlick{
  0%,90%,100%{text-shadow:0 0 6px rgba(255,31,61,.85),0 0 22px rgba(255,31,61,.5),0 0 44px rgba(255,31,61,.26);}
  91%{text-shadow:0 0 3px rgba(255,31,61,.45),0 0 9px rgba(255,31,61,.22);}
  95%{text-shadow:0 0 6px rgba(255,31,61,.85),0 0 22px rgba(255,31,61,.5),0 0 44px rgba(255,31,61,.26);}
  96%{text-shadow:none;}
  97%{text-shadow:0 0 6px rgba(255,31,61,.85),0 0 22px rgba(255,31,61,.5),0 0 44px rgba(255,31,61,.26);}
}

/* 区段标签 //SECTOR */
.sector{
  font-family:var(--mono);font-size:12px;letter-spacing:.32em;color:var(--red);
  text-transform:uppercase;display:flex;align-items:center;gap:12px;
}
.sector::before{content:'';width:34px;height:1px;background:var(--red);box-shadow:0 0 8px var(--red-glow);}
.sector .idx{color:var(--ink-mute);}

/* 标签徽章 */
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line-2);color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:7px;background:var(--bg-2);
}
.tag.red{border-color:var(--red);color:var(--red);}
.dot{width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 8px var(--red-glow);display:inline-block;}
.dot.live{animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* 按钮 */
.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--red);color:var(--red);background:transparent;
  cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:12px;
  transition:color .15s,background .15s,box-shadow .15s;clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 12px) 100%,0 100%);
}
.btn:hover{background:var(--red);color:#06060a;box-shadow:0 0 24px var(--red-glow);}
.btn.solid{background:var(--red);color:#06060a;}
.btn.solid:hover{background:var(--red-bright);box-shadow:0 0 30px var(--red-glow);}
.btn.ghost{border-color:var(--line-2);color:var(--ink-dim);}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent;box-shadow:none;}

/* 图片占位：斜条纹 + 说明 */
.ph{
  position:relative;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);
  background-image:
    repeating-linear-gradient(45deg,rgba(255,31,61,.06) 0,rgba(255,31,61,.06) 1px,transparent 1px,transparent 11px);
}
.ph::after{
  content:attr(data-label);position:absolute;left:12px;bottom:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-mute);
  text-transform:uppercase;background:rgba(6,6,10,.7);padding:3px 8px;border:1px solid var(--line);
}
.ph .x{position:absolute;inset:0;}
.ph .x::before,.ph .x::after{content:'';position:absolute;background:var(--line);}
.ph .x::before{left:0;right:0;top:50%;height:1px;}
.ph .x::after{top:0;bottom:0;left:50%;width:1px;}

/* 终端线条 / 数据行 */
.kv{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12.5px;
   padding:9px 0;border-bottom:1px dashed var(--line);}
.kv .k{color:var(--ink-mute);letter-spacing:.1em;text-transform:uppercase;}
.kv .v{color:var(--ink);letter-spacing:.04em;}
.kv .v.red{color:var(--red);}

/* 顶部导航 */
.nav{position:fixed;top:0;left:0;right:0;z-index:8000;
  background:linear-gradient(to bottom,rgba(6,6,10,.92),rgba(6,6,10,.5));
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:62px;}
.nav .brand{font-family:var(--mono);font-weight:700;letter-spacing:.2em;font-size:15px;display:flex;gap:10px;align-items:center;}
.nav .brand b{color:var(--red);}
.nav .links{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
.nav .links a{position:relative;padding:4px 0;transition:color .15s;}
.nav .links a:hover{color:var(--ink);}
.nav .links a.active{color:var(--red);}
.nav .links a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--red);transition:width .2s;}
.nav .links a:hover::after,.nav .links a.active::after{width:100%;}
.nav .links a.soon{pointer-events:none;cursor:default;opacity:.45;}
.nav .links a.soon:hover::after{width:0;}
.nav .nav-right{display:flex;align-items:center;gap:18px;}
.nav .nav-policy{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--line);padding:6px 12px;transition:color .15s,border-color .15s,background .15s;}
.nav .nav-policy:hover{color:var(--red);border-color:var(--red-deep);background:rgba(179,0,27,.08);}
.nav .nav-clock{font-size:11.5px;color:var(--ink-mute);letter-spacing:.12em;}

/* 移动端折叠菜单：汉堡按钮 + 抽屉（桌面隐藏，按钮与抽屉由 cyber.js 注入） */
.nav-toggle,.nav-drawer{display:none;}

/* 页脚 */
.foot{border-top:1px solid var(--line);background:var(--bg-0);padding:54px 0 38px;margin-top:0;}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
.foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 14px;}
.foot a{display:block;color:var(--ink-dim);font-size:13.5px;padding:5px 0;transition:color .15s;}
.foot a:hover{color:var(--ink);}
.foot .grid a{pointer-events:none;cursor:default;opacity:.55;}
.foot .grid a:hover{color:var(--ink-dim);}
.foot .grid a.live{pointer-events:auto;cursor:pointer;opacity:1;}
.foot .grid a.live:hover{color:var(--ink);}
.foot .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.08em;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.foot .foot-brand{display:flex;flex-direction:column;gap:18px;}
.foot .foot-brand .logo-img{margin-bottom:0;}
.foot .foot-brand .pub-logos{display:flex;align-items:center;gap:26px;}
.foot .foot-brand .pub-logos a{pointer-events:auto;opacity:1;}
.foot .foot-brand .pub-logos img{height:52px;width:auto;display:block;opacity:1;}
.foot .foot-brand .pub-copy{display:flex;flex-direction:column;gap:5px;
  font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.04em;line-height:1.6;}

/* 滚动进场 */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
[data-rise].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none;}}

/* 噪点 svg 隐藏定义容器 */
.svg-defs{position:absolute;width:0;height:0;}

@media (max-width:860px){
  .nav .links{display:none}

  /* 移动端页脚：换用精简版式，仅保留 logo + 版权，隐藏快速导航列，整体居中 */
  .foot .grid{grid-template-columns:1fr;gap:24px;text-align:center;}
  .foot .grid > div:has(h5){display:none;}
  .foot .grid > div{display:flex;flex-direction:column;align-items:center;}
  .foot .foot-brand .pub-logos{justify-content:center;}
  .foot .legal{justify-content:center;text-align:center;}

  /* 移动端导航：隐藏桌面右侧（政策入口移入抽屉，时钟省略），显示汉堡按钮 */
  .nav .nav-right{display:none;}
  .nav .row > .mono{display:none;}            /* news.html 独立时钟 div */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:38px;padding:0 10px;margin-left:auto;
    background:transparent;border:1px solid var(--line-2);cursor:pointer;
    transition:border-color .15s;
  }
  .nav-toggle:hover{border-color:var(--red-deep);}
  .nav-toggle span{display:block;height:2px;width:100%;background:var(--red);
    box-shadow:0 0 8px var(--red-glow);transition:transform .26s,opacity .2s;}
  .nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  .nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* 下拉抽屉 */
  .nav-drawer{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;top:62px;z-index:7999;
    background:rgba(6,6,10,.97);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:6px 28px 18px;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s;
  }
  .nav.nav-open .nav-drawer{transform:none;opacity:1;pointer-events:auto;}
  .nav-drawer a{
    font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-dim);padding:15px 4px;border-bottom:1px solid var(--line);
    transition:color .15s,padding-left .15s,border-color .15s;
  }
  .nav-drawer a:hover{color:var(--ink);padding-left:10px;}
  .nav-drawer a.active{color:var(--red);}
  .nav-drawer a.soon{opacity:.45;pointer-events:none;}
  @media (prefers-reduced-motion:reduce){
    .nav-drawer{transition:opacity .2s;transform:none;}
    .nav-toggle span{transition:opacity .2s;}
  }
}