/* ═══════════════════════════════════════════════════════════
   数智干警 v3 — base.css · 清晰高级感（学习 wolo.work）
   浅色为默认主题；[data-theme="dark"] 深色反转
   体系：极浅冷白底 / 深藏青三级灰阶 / 单蓝强调(<2%) / 白玻璃卡片
        细描边+顶部内衬高光+12-16px圆角 / Inter+Noto Sans SC / 负字距大标题
   跑马灯与穿梭浮层固定黑场（伪装→内核的暗场转折，不随主题）
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 浅色（默认） */
  --bg:        #f6f7fa;
  --bg-soft:   #fafbfd;
  --surface:   rgba(255,255,255,.72);
  --solid:     #ffffff;
  --fill:      #f0f2f7;            /* 输入框/次级填充 */
  --line:      rgba(38,40,52,.08);
  --line-strong:rgba(38,40,52,.16);
  --text-1:    #0a1628;
  --text-2:    #3e4a63;
  --text-3:    #6b7a94;
  --text-4:    #9ca8be;
  --accent:    #155dfd;
  --accent-text:#155dfd;          /* 强调色文字（深色模式下转白保证可读） */
  --accent-soft:rgba(21,93,253,.08);
  --accent-line:rgba(21,93,253,.32);
  --warn:      #c2410c;
  --warn-soft: rgba(194,65,12,.08);
  --teal:      #0d9488;
  --teal-soft: rgba(13,148,136,.08);
  --ok:        #16a34a;
  --ok-soft:   rgba(22,163,74,.10);
  --hl:        rgba(255,255,255,.92);       /* 卡片顶部内衬高光 */
  --shadow-sm: 0 1px 2px rgba(15,17,26,.05);
  --shadow-md: 0 1px 2px rgba(15,17,26,.04),0 8px 24px rgba(15,17,26,.06);
  --shadow-lg: 0 2px 6px rgba(15,17,26,.06),0 24px 56px rgba(15,17,26,.10);
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono: "JetBrains Mono",Consolas,"Cascadia Mono","Courier New",monospace;
  --mono: var(--font-mono);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}
[data-theme="dark"]{
  --bg:        #0c1016;
  --bg-soft:   #0e131b;
  --surface:   rgba(255,255,255,.045);
  --solid:     #151b26;
  --fill:      #1a2230;
  --line:      rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text-1:    #edf1f7;
  --text-2:    #b6c1d3;
  --text-3:    #8494ab;
  --text-4:    #5a6a81;
  --accent:    #4d8dff;
  --accent-text:#edf1f7;          /* 深色模式：强调文字用白，蓝只留给填充 */
  --accent-soft:rgba(77,141,255,.13);
  --accent-line:rgba(77,141,255,.4);
  --warn:      #fb923c;
  --warn-soft: rgba(251,146,60,.12);
  --teal:      #2dd4bf;
  --teal-soft: rgba(45,212,191,.12);
  --ok:        #4ade80;
  --ok-soft:   rgba(74,222,128,.14);
  --hl:        rgba(255,255,255,.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.3),0 24px 56px rgba(0,0,0,.45);
}

/* 黑场（跑马灯/穿梭固定深色，不随主题） */
:root{
  --stage-bg:   #0a1628;
  --stage-text: #edf1f7;
  --stage-dim:  #8fa0b8;
  --stage-faint:#5a6b85;
  --stage-line: #233248;
  --stage-blue: #4d8dff;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font);
  font-size:14px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
button{font-family:inherit;cursor:pointer;}
b{font-weight:600;}

#app{height:100vh;height:100dvh;position:relative;}
.screen{position:absolute;inset:0;display:none;opacity:0;}
.screen.active{display:flex;opacity:1;}

/* ═══════════ A · 伪装登录层（清晰极简） ═══════════ */
#screen-login{
  background:var(--bg);
  justify-content:center;align-items:center;flex-direction:column;
}
.login-grain,.login-scan{display:none;}
.login-box{
  position:relative;width:360px;
  padding:38px 38px 26px;
  background:var(--solid);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow-md);
  animation:login-in .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes login-in{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
.login-box.is-denied{animation:login-deny .3s ease 2;}
@keyframes login-deny{25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}

.login-head{margin-bottom:28px;text-align:center;}
.login-sig{
  display:inline-block;font-size:10px;letter-spacing:.24em;color:var(--text-4);
  border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px 4px;
}
.login-head h1{
  font-size:24px;font-weight:700;letter-spacing:.14em;text-indent:.14em;
  color:var(--text-1);margin-top:18px;
}
.login-sub{margin-top:9px;font-size:11px;letter-spacing:.1em;color:var(--text-4);}
.login-field{display:block;margin-bottom:16px;}
.login-field span{
  display:block;font-size:12px;color:var(--text-3);letter-spacing:.06em;margin-bottom:6px;font-weight:500;
}
.login-field input{
  width:100%;padding:10px 13px;
  background:var(--fill);border:1px solid transparent;border-radius:10px;
  color:var(--text-1);font-size:14px;font-family:var(--font-mono);letter-spacing:.05em;
  outline:none;transition:border-color .2s,background .2s;
}
.login-field input::placeholder{color:var(--text-4);}
.login-field input:focus{border-color:var(--accent);background:var(--solid);}
#login-btn{
  position:relative;overflow:hidden;
  width:100%;margin-top:8px;padding:12px;
  background:var(--text-1);color:var(--bg);
  border:0;border-radius:10px;
  font-size:14px;font-weight:600;letter-spacing:.42em;text-indent:.42em;
  transition:transform .15s,box-shadow .2s,opacity .2s;
  box-shadow:var(--shadow-sm);
}
#login-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);opacity:.92;}
#login-btn:active{transform:none;}
#login-btn .bp{display:none;}
#login-btn.verifying .bp{
  display:block;position:absolute;left:0;right:0;bottom:0;height:3px;
  background:color-mix(in srgb,currentColor 25%,transparent);
  border-radius:2px;
}
#login-btn.verifying .bp i{
  display:block;height:100%;width:0;border-radius:2px;
  background:currentColor;opacity:.55;
  animation:btn-progress 1.14s linear forwards;
}
@keyframes btn-progress{to{width:100%;}}
.login-err{margin-top:12px;font-size:11.5px;color:var(--warn);text-align:center;}
.login-ok{margin-top:12px;font-size:11px;color:var(--text-3);text-align:center;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.3;}}
.login-foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:9px;letter-spacing:.22em;color:var(--text-4);text-align:center;
}

/* ═══════════ 屏B · 黑场跑马灯（wolo.work 式频道卡流） ═══════════ */
#screen-marquee{
  background:var(--stage-bg);
  flex-direction:column;overflow:hidden;
}
#screen-marquee .hud-corner{opacity:.5;}
#screen-marquee .hud-corner::before,#screen-marquee .hud-corner::after{background:var(--stage-line);}
.hud-corner{position:absolute;width:22px;height:22px;pointer-events:none;z-index:5;display:none;}
#screen-marquee .hud-corner{display:block;}
.hud-corner::before,.hud-corner::after{content:"";position:absolute;}
.hud-corner::before{width:100%;height:1px;}
.hud-corner::after{width:1px;height:100%;}
.hud-corner.tl{top:16px;left:16px;}
.hud-corner.tr{top:16px;right:16px;transform:scaleX(-1);}
.hud-corner.bl{bottom:16px;left:16px;transform:scaleY(-1);}
.hud-corner.br{bottom:16px;right:16px;transform:scale(-1);}
#screen-library .hud-corner,#screen-timeline .hud-corner{display:none;}

#screen-marquee::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 52% at 50% 46%,rgba(77,141,255,.075),transparent 74%);
}
.marquee-topline{
  position:relative;z-index:3;display:flex;gap:28px;justify-content:center;
  padding:26px 20px 0;
  font-size:10px;letter-spacing:.3em;color:var(--stage-faint);text-transform:uppercase;
}
.marquee-topline span:nth-child(2){color:var(--stage-dim);}
.marquee-topline span:nth-child(4){color:#34d399;opacity:.8;}

/* 频道卡墙：space-evenly 拉开行距 · 完整平铺全屏 · 隔行反向 · 72s 匀速 */
.marquee-stage{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-evenly;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.mq-row{
  overflow:hidden;flex:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.mq-track{
  display:flex;gap:12px;width:max-content;
  animation:mq 72s linear infinite;
  will-change:transform;
}
.mq-row:nth-child(even) .mq-track{animation-direction:reverse;}
@keyframes mq{to{transform:translateX(-50%);}}
.mq-chip{
  display:flex;align-items:center;gap:8px;flex:none;
  border-radius:10px;padding:9px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 8px -4px rgba(0,0,0,.4);
  pointer-events:none; /* 跑马灯区不做交互：不暂停、无悬浮反馈 */
}
.mq-chip .dot{
  width:5px;height:5px;border-radius:50%;flex:none;
  background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.55);
}
.mq-chip b{
  font-size:14px;font-weight:700;color:var(--stage-text);
  white-space:nowrap;letter-spacing:.01em;
}
.mq-chip em{
  font-style:normal;font-family:var(--font-mono);
  font-size:10px;color:var(--stage-faint);white-space:nowrap;
  letter-spacing:.04em;
}

/* 居中操作区 · 暗色聚光衬底悬浮于卡墙之上 */
.marquee-center{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:26px 60px 30px;
}
.marquee-center::before{
  content:"";position:absolute;inset:-36px -64px;z-index:-1;
  background:radial-gradient(44% 46% at 50% 50%,rgba(4,9,18,.96),rgba(4,9,18,.72) 55%,rgba(4,9,18,.28) 76%,transparent 92%);
  -webkit-mask-image:radial-gradient(50% 52% at 50% 50%,#000 55%,transparent 100%);
  mask-image:radial-gradient(50% 52% at 50% 50%,#000 55%,transparent 100%);
  border-radius:32px;
}
.mc-kick{
  font-size:11px;letter-spacing:.4em;text-indent:.4em;color:var(--stage-dim);
  text-transform:uppercase;text-align:center;
}
.mc-btns{display:flex;gap:14px;}
.mq-btn{
  min-width:214px;padding:14px 30px;
  font-size:14px;font-weight:600;letter-spacing:.22em;text-indent:.22em;
  border-radius:12px;
  transition:transform .15s,box-shadow .2s,opacity .2s;
}
.mq-btn.primary{
  background:var(--stage-text);color:var(--stage-bg);border:0;
  box-shadow:0 8px 30px rgba(237,241,247,.14);
}
.mq-btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 44px rgba(77,141,255,.55);}
.mq-btn.ghost{
  background:rgba(237,241,247,.10);
  color:var(--stage-text);
  border:1px solid rgba(237,241,247,.42);
}
.mq-btn.ghost:hover{
  background:rgba(237,241,247,.16);
  border-color:rgba(237,241,247,.7);
  transform:translateY(-1px);
}
.marquee-note{font-size:10px;letter-spacing:.3em;color:var(--stage-faint);}

/* ═══════════ 通用 · toast ═══════════ */
#toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:200;padding:11px 24px;
  background:var(--solid);border:1px solid var(--line);border-radius:12px;
  color:var(--text-1);font-size:12.5px;letter-spacing:.04em;
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow-lg);
  animation:toast-in .25s cubic-bezier(.2,.8,.3,1) both;
}
#toast.warn{color:var(--warn);}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}

/* ═══════════ 通用 · 主题切换 ═══════════ */
.theme-toggle{
  display:inline-flex;gap:2px;padding:2px;
  background:var(--fill);border:1px solid var(--line);border-radius:9px;
}
.theme-toggle button{
  padding:5px 12px;font-size:11px;font-weight:500;letter-spacing:.06em;
  background:transparent;border:0;border-radius:7px;color:var(--text-4);transition:.18s;
}
.theme-toggle button.on{
  background:var(--solid);color:var(--text-1);box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .theme-toggle button.on{background:var(--solid);}

@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none !important;}
}

/* ═══════════ 浮层 · 档案闸门（进入人生库：白闸扫掠 + 检索计数） ═══════════ */
#lib-warp{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#lib-warp[hidden]{display:none;}
.lw-shutters{position:absolute;inset:0;display:flex;flex-direction:column;}
.lw-shutters i{
  flex:1;background:var(--bg-soft);
  border-top:1px solid rgba(38,40,52,.05);
  box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent);
  transform:translateX(-101%);
  animation:lw-shutter 2.1s cubic-bezier(.65,.05,.25,1) both;
}
.lw-shutters i:nth-child(1){animation-delay:.00s;}
.lw-shutters i:nth-child(2){animation-delay:.11s;}
.lw-shutters i:nth-child(3){animation-delay:.22s;}
.lw-shutters i:nth-child(4){animation-delay:.33s;}
.lw-shutters i:nth-child(5){animation-delay:.44s;}
@keyframes lw-shutter{
  0%{transform:translateX(-101%);}
  34%,66%{transform:translateX(0);}
  100%{transform:translateX(101%);}
}
.lw-core{
  position:relative;z-index:2;text-align:center;color:#0a1628;
  animation:lw-core 2.45s ease both;
}
@keyframes lw-core{0%{opacity:0;}10%,82%{opacity:1;}100%{opacity:0;}}
.lw-label{font-size:10px;letter-spacing:.42em;text-indent:.42em;color:#6b7a94;}
.lw-count{font-size:56px;font-weight:700;letter-spacing:-.02em;color:#0a1628;margin-top:12px;line-height:1;}
.lw-count b{font-variant-numeric:tabular-nums;color:var(--accent);}
.lw-dim{font-size:16px;font-weight:500;color:#9ca8be;letter-spacing:.1em;}
.lw-sub{margin-top:14px;font-size:10px;letter-spacing:.3em;color:#6b7a94;}
#lib-warp.out{animation:lw-out .4s ease both;}
@keyframes lw-out{to{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .lw-shutters i,.lw-core{animation:none;transform:none;opacity:1;}
}

/* ── 龙卷风入场：Canvas 粒子化（DOM卡隐藏，零DOM动画） ── */
#vortex-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:5;pointer-events:none;display:none;
}
#screen-marquee.entering #vortex-canvas{display:block;}
#screen-marquee.entering .mq-chip{visibility:hidden;}

/* ── 登录旋涡入场（频道卡聚环→平铺） ── */
#screen-marquee .marquee-topline,
#screen-marquee .marquee-center{transition:opacity .5s ease;}
#screen-marquee.entering .mq-track{animation-play-state:paused;}
#screen-marquee.entering .mq-row:not(.settled){
  overflow:visible;
  -webkit-mask-image:none;mask-image:none;
}
#screen-marquee.entering .mq-row.settled .mq-chip{visibility:visible;}
#screen-marquee.entering .mq-row.settled .mq-track{animation-play-state:running;}
#screen-marquee.entering .marquee-stage{
  -webkit-mask-image:none;mask-image:none;
}
#screen-marquee.entering .marquee-topline,
#screen-marquee.entering .marquee-center{opacity:0;}
#screen-marquee.ui-in .marquee-topline,
#screen-marquee.ui-in .marquee-center{opacity:1;}

/* ═══════════ 屏0 · 封面：动态点阵地球 ═══════════ */
#screen-cover{
  background:var(--bg);flex-direction:column;
  justify-content:flex-end;align-items:center;
  transition:opacity .7s ease,transform .7s ease;
}
#screen-cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 34% at 50% 38%,var(--accent-soft),transparent 72%);
}
#screen-cover.leave{opacity:0;transform:scale(.985);pointer-events:none;}
#globe-canvas{position:absolute;inset:0;width:100%;height:100%;}
.cover-ui{
  position:relative;z-index:2;text-align:center;
  padding-bottom:16vh;
}
.cover-kick{font-size:10.5px;letter-spacing:.18em;color:var(--text-4);margin-top:20px;
  max-width:min(680px,86vw);text-align:center;line-height:1.8;}
.cover-title{
  font-size:clamp(32px,4.6vw,46px);font-weight:700;letter-spacing:.16em;text-indent:.16em;
  color:var(--text-1);
}
.cover-foot{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;z-index:2;
  font-size:9px;letter-spacing:.3em;color:var(--text-4);
}

/* ── 数码宝贝式 3D 数据涡流（登录转场特效层） ── */
#vortex-fx{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:12vh;                    /* 涡心对齐 44% 高度 */
}
#vortex-fx[hidden]{display:none;}
#vortex-fx::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(237,241,247,.9);box-shadow:0 0 12px rgba(77,141,255,.9);animation:vx-anchor 1.2s ease-in-out infinite;}
@keyframes vx-anchor{0%,100%{opacity:.35;transform:scale(.8);}50%{opacity:1;transform:scale(1.15);}}
@keyframes vx-spin{from{transform:rotateX(68deg) rotate(0deg);}to{transform:rotateX(68deg) rotate(360deg);}}
#vortex-fx .r2{animation-name:vx-spin2;}
@keyframes vx-spin2{from{transform:rotateX(72deg) rotate(0deg);}to{transform:rotateX(72deg) rotate(-360deg);}}
.vx-flash{
  position:absolute;inset:0;opacity:0;
  background:radial-gradient(46% 46% at 50% 44%,rgba(237,241,247,.96),rgba(77,141,255,.38) 46%,transparent 72%);
}
#vortex-fx.boom .vx-flash{animation:vx-flash .55s ease-out both;}
@keyframes vx-flash{0%{opacity:0;}16%{opacity:1;}100%{opacity:0;}}


/* ── 神圣天降：光柱 + 落点辉光（登录转场） ── */
.vx-beam{
  position:absolute;left:50%;top:-12vh;width:min(46vw,560px);height:135vh;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(237,241,247,0) 0%,rgba(237,241,247,.09) 16%,rgba(237,241,247,.15) 52%,rgba(77,141,255,.12) 82%,rgba(77,141,255,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%);
  animation:vx-beam-in .7s cubic-bezier(.2,.7,.2,1) both,vx-beam-breath 2.8s ease-in-out .7s infinite;
}
@keyframes vx-beam-in{from{opacity:0;transform:translateX(-50%) scaleY(.25);}to{opacity:1;transform:translateX(-50%) scaleY(1);}}
@keyframes vx-beam-breath{0%,100%{opacity:.85;}50%{opacity:1;}}
.vx-beam-core{
  position:absolute;left:50%;top:-12vh;width:3px;height:135vh;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(237,241,247,.55) 30%,rgba(237,241,247,.75) 60%,rgba(77,141,255,.3) 90%,transparent);
  filter:blur(1.2px);
  animation:vx-beam-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.vx-base{
  position:absolute;left:50%;top:52%;width:520px;height:150px;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(237,241,247,.22),rgba(77,141,255,.14) 45%,transparent 72%);
  animation:vx-base-breath 2.4s ease-in-out infinite;
}
@keyframes vx-base-breath{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.92);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}}
#vortex-fx.boom .vx-beam,#vortex-fx.boom .vx-beam-core{animation:vx-beam-out .8s ease both;}
@keyframes vx-beam-out{to{opacity:0;transform:translateX(-50%) translateY(-8vh);}}
#vortex-fx.boom .vx-base{animation:vx-base-boom .8s ease-out both;}
@keyframes vx-base-boom{0%{opacity:1;}30%{transform:translate(-50%,-50%) scale(1.5);opacity:.9;}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}}
@media (prefers-reduced-motion:reduce){#vortex-fx{display:none;}}