/* cockpit.css — 数据驾驶舱视觉叠加层（字节/阿里 Cockpit 风格）
   只叠加、不修改：styles.css / app.js / motion.js 保持原样。
   加载顺序在 styles.css 之后，靠层叠覆盖；关键区块用 #content 提升优先级。 */

:root{
  --ck-viz-1:#5eb8ff;
  --ck-viz-2:#4fd6c0;
  --ck-viz-3:#e8c381;
  --ck-viz-4:#f2938c;
  --ck-viz-5:#a3b8f0;
  --ck-viz-6:#8dcaaa;
  --ck-up:#5fd6a4;
  --ck-down:#ff7a85;
  --ck-ease:cubic-bezier(.65,0,.35,1);
  --ck-ease-out:cubic-bezier(.22,1,.36,1);
  --ck-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ck-t-fast:.12s;
  --ck-t:.2s;
  --ck-t-slow:.32s;
  --ck-line:rgba(155,180,220,.14);
  --ck-line-strong:rgba(155,180,220,.30);
  --ck-surface:#141e2d;
  --ck-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- 动态背景：粒子画布 + 极光漂移 + 平移网格 ---------- */
body{font-size:14px}
#ck-bg{position:fixed;top:0;left:0;z-index:-3;pointer-events:none}
body::after{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 30% at 20% 24%,rgba(94,184,255,.12),transparent 70%),
    radial-gradient(34% 28% at 78% 68%,rgba(79,214,192,.10),transparent 70%),
    radial-gradient(30% 24% at 62% 14%,rgba(232,195,129,.07),transparent 70%);
  animation:ck-aurora 26s var(--ck-ease) infinite alternate;
  will-change:transform;
}
@keyframes ck-aurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(2.5%,2%,0) scale(1.07)}
  100%{transform:translate3d(-1.5%,3%,0) scale(1.03)}
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%,rgba(94,184,255,.09),transparent 65%),
    linear-gradient(rgba(155,180,220,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,180,220,.04) 1px,transparent 1px);
  background-size:100% 100%,48px 48px,48px 48px;
  background-position:0 0,0 0,0 0;
  animation:ck-grid-pan 22s linear infinite;
}
@keyframes ck-grid-pan{to{background-position:0 0,48px 48px,48px 48px}}

/* ---------- 滚动条 ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(155,180,220,.25) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(155,180,220,.22);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(155,180,220,.42);border:2px solid transparent;background-clip:content-box}

/* ---------- 侧边栏 ---------- */
body>aside:not(:has(.motion-side-bg)){
  background:linear-gradient(180deg,#131d2e 0%,#0f1725 100%);
  border-right:1px solid var(--ck-line);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),1px 0 24px rgba(4,9,18,.4);
}
.brand>b{box-shadow:0 0 18px rgba(232,195,129,.35),inset 0 1px 0 rgba(255,255,255,.4)}
/* 前提修正：.motion-button{transition:none!important} 会压掉按钮自身的 transition，
   #navigation button:before（ID 级）会压掉 nav button.active::before。
   因此过渡只声明在按钮的子元素与伪元素上；按钮的 transform/opacity 由 motion.js 的 GSAP 独占，此处不碰。 */
#navigation{position:relative}
nav button{position:relative;border-radius:8px;min-height:38px}
nav button:hover{background:rgba(155,180,220,.05);color:#eef4fc}
/* 激活态底色交给滑动块 #ck-nav-marker 表现，这里只保留描边与文字色 */
#navigation button.active{
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(223,200,155,.22);
  border-color:rgba(223,200,155,.5);
  color:#ffe6b0;
}
#navigation button .motion-nav-label{
  transition:letter-spacing var(--ck-t) var(--ck-ease),text-shadow var(--ck-t) var(--ck-ease),color var(--ck-t) var(--ck-ease);
}
#navigation button:hover .motion-nav-label{letter-spacing:.4px;text-shadow:0 0 16px rgba(94,184,255,.4)}
#navigation button.active .motion-nav-label{letter-spacing:.5px;text-shadow:0 0 18px rgba(232,195,129,.5)}
/* 编号（01/02…）：hover 点亮微抬，active 常亮 */
#navigation button::before{
  transition:color var(--ck-t) var(--ck-ease),text-shadow var(--ck-t) var(--ck-ease),transform var(--ck-t) var(--ck-ease-out);
}
#navigation button:hover::before{color:#ffd98a;text-shadow:0 0 12px rgba(232,195,129,.9);transform:translateY(-1px)}
#navigation button.active::before{color:#ffe6b0;text-shadow:0 0 14px rgba(232,195,129,.95)}
/* hover 光晕：复用 motion.js 已注入的 .motion-tint（它只 tween opacity，background 归覆盖层） */
#navigation button .motion-tint{
  border-radius:8px;
  background:linear-gradient(100deg,rgba(232,195,129,.2),rgba(94,184,255,.1) 55%,rgba(79,214,192,.05));
}
/* 右侧状态点：hover 放大发光 */
#navigation button::after{
  transition:transform var(--ck-t) var(--ck-ease-out),box-shadow var(--ck-t) var(--ck-ease),background var(--ck-t) var(--ck-ease);
}
#navigation button:hover::after{transform:scale(1.55);background:#8dcaaa;box-shadow:0 0 10px rgba(141,202,170,.95)}
/* 分组标题：细金线 + 字距 */
#navigation .nav-group{
  letter-spacing:2.4px;font-size:10px;color:#7f8ea6;
  border-top:1px solid rgba(155,180,220,.09);padding-top:16px;
}
.aside-bottom .dot{position:relative;box-shadow:0 0 8px rgba(141,202,170,.9)}
.aside-bottom .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(141,202,170,.55);
  animation:ck-ping 2.6s var(--ck-ease-out) infinite;
}
@keyframes ck-ping{0%{transform:scale(.5);opacity:1}70%,100%{transform:scale(1.7);opacity:0}}

/* ---------- 顶栏：sticky + 毛玻璃 + 底部数据流光 ---------- */
.workspace>header{
  position:sticky;top:0;z-index:20;
  margin:0 -32px;padding:16px 32px 14px;
  background:rgba(14,20,31,.72);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--ck-line);
}
.workspace>header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(94,184,255,.95) 40%,rgba(79,214,192,.8) 60%,transparent);
  background-size:38% 100%;background-repeat:no-repeat;
  animation:ck-flow 5.5s var(--ck-ease) infinite;
}
@keyframes ck-flow{0%{background-position:-40% 0}100%{background-position:140% 0}}
#page-title{
  font-size:23px;letter-spacing:.01em;font-weight:700;
  background:linear-gradient(100deg,#e8eef7 18%,#ffd98a 38%,#5eb8ff 52%,#4fd6c0 60%,#e8eef7 78%);
  background-size:260% 100%;background-position:160% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ck-title-sweep 8s var(--ck-ease) infinite;
}
@keyframes ck-title-sweep{0%,55%{background-position:160% 0}95%,100%{background-position:-100% 0}}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7e90ab}

/* ---------- 按钮 / 表单控件 ---------- */
button{
  min-height:34px;padding:6px 13px;border-radius:8px;
  border:1px solid var(--ck-line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),#1a2536;
  transition:border-color var(--ck-t) var(--ck-ease),background var(--ck-t) var(--ck-ease),box-shadow var(--ck-t) var(--ck-ease),color var(--ck-t) var(--ck-ease);
}
button:hover{border-color:rgba(155,180,220,.5);box-shadow:0 2px 12px rgba(4,9,18,.4)}
input,textarea,select{
  min-height:34px;border-radius:8px;border:1px solid var(--ck-line-strong);
  background:#101a28;
  transition:border-color var(--ck-t) var(--ck-ease),box-shadow var(--ck-t) var(--ck-ease);
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--ck-viz-1);
  box-shadow:0 0 0 3px rgba(94,184,255,.16);
}
.badge{border:1px solid var(--ck-line);background:rgba(155,180,220,.08)}

/* ---------- 面板 / 指标卡统一驾驶舱质感（半透明玻璃，透出动态背景） ---------- */
#content .panel,#content .stat,.ck-card{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 140px),rgba(18,28,43,.74);
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  border:1px solid var(--ck-line);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(4,9,18,.32);
  transition:border-color var(--ck-t) var(--ck-ease),box-shadow var(--ck-t) var(--ck-ease);
}
#content .panel:hover,#content .stat:hover,.ck-card:hover{
  border-color:var(--ck-line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(4,9,18,.45),0 0 24px rgba(94,184,255,.07);
}
#content .panel{padding:18px;margin-bottom:14px}
#content .stat{padding:16px 18px}
#content .stats{gap:12px;margin-bottom:16px}
#content .panel-heading{margin-bottom:14px}
#content .panel-heading h2{display:flex;align-items:center;gap:9px;font-size:16px;letter-spacing:.02em}
#content .panel-heading h2::before{
  content:"";flex:none;width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--ck-viz-1),var(--ck-viz-2));
  box-shadow:0 0 8px rgba(94,184,255,.5);
}
/* 页面级 stat 变体统一收敛（council / dept-overview / office-reference） */
#content .council-stats .stat,#content .dept-overview-stats .stat,#content .office-reference-stats .stat{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 140px),rgba(18,28,43,.74);
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  border:1px solid var(--ck-line);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- 数字排版：等宽 + 制表位 ---------- */
#content .stat strong,.ck-num{
  font-family:var(--ck-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;letter-spacing:-.01em;
}
#content .stat strong{font-size:26px;margin:10px 0 6px}
#content .stat .label{font-size:11px;letter-spacing:.12em;color:#8496b1}
#content .stat small{font-size:11px;color:#6d7f99}
#content .dept-overview-stats .stat strong{font-size:32px}

/* ---------- 表格 ---------- */
#content table{font-size:13px}
#content th{
  color:#8496b1;font-size:11px;letter-spacing:.1em;font-weight:500;
  border-bottom:1px solid var(--ck-line-strong);
}
#content tbody tr{transition:background var(--ck-t-fast) linear}
#content tbody tr:hover{background:rgba(94,184,255,.05)}
#content td{border-color:rgba(155,180,220,.08)}

/* ---------- 空间提示条 ---------- */
.space-note{
  border-radius:8px;border:1px solid rgba(232,195,129,.22);border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(232,195,129,.08),rgba(232,195,129,.02));
  transition:opacity var(--ck-t-slow) var(--ck-ease);
}
.space-note.business{border-color:rgba(141,202,170,.25);border-left-color:var(--green);background:linear-gradient(90deg,rgba(141,202,170,.08),rgba(141,202,170,.02))}

/* ---------- Toast ---------- */
#toast{
  border-radius:10px;backdrop-filter:blur(10px);
  box-shadow:0 16px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- 驾驶舱组件（cockpit.js 注入） ---------- */
.ck-live{display:flex;align-items:center;gap:8px;font-size:12px;color:#8496b1;font-family:var(--ck-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-live .ck-pulse{width:7px;height:7px;border-radius:50%;background:var(--ck-up);box-shadow:0 0 8px var(--ck-up);animation:ck-breathe 2.2s var(--ck-ease) infinite}
@keyframes ck-breathe{50%{opacity:.35}}
.ck-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.ck-eq i{width:2px;height:30%;border-radius:1px;background:var(--ck-viz-2);animation:ck-eq 1.05s var(--ck-ease) infinite}
.ck-eq i:nth-child(2){background:var(--ck-viz-1);animation-delay:.18s}
.ck-eq i:nth-child(3){background:var(--ck-viz-3);animation-delay:.36s}
@keyframes ck-eq{0%,100%{height:25%}50%{height:100%}}

.ck-charts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:1400px){.ck-charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ck-charts{grid-template-columns:1fr}}
.ck-card{padding:15px 16px;position:relative;overflow:hidden;min-width:0}
.ck-card::after{
  content:"";position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,184,255,.35),transparent);
  opacity:0;transition:opacity var(--ck-t-slow) var(--ck-ease);
}
.ck-card:hover::after{opacity:1}
.ck-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.ck-card-title{font-size:12px;letter-spacing:.12em;color:#9db0cc;white-space:nowrap}
.ck-card-sub{font-size:11px;color:#6d7f99;font-family:var(--ck-mono);white-space:nowrap}
.ck-chart svg{display:block;width:100%;height:auto;overflow:visible}

.ck-donut-wrap{display:flex;align-items:center;gap:14px}
.ck-donut-wrap .ck-chart{flex:none;width:118px}
.ck-donut-center-num{font-family:var(--ck-mono);font-weight:600;font-size:15px;fill:#edf1f6}
.ck-donut-center-label{font-size:8px;fill:#8496b1;letter-spacing:.15em}
.ck-seg{cursor:pointer;transition:opacity var(--ck-t) var(--ck-ease)}
.ck-donut-wrap .ck-legend{flex:1;min-width:0}

.ck-legend{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
.ck-legend-row{display:flex;align-items:center;gap:7px;min-width:0}
.ck-legend i{flex:none;width:8px;height:8px;border-radius:2px}
.ck-legend span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-legend b{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;color:#dbe4f0;font-weight:500}

.ck-hbar-row{display:grid;grid-template-columns:76px 1fr auto;gap:9px;align-items:center;font-size:12px;margin:9px 0;min-width:0}
.ck-hbar-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-hbar-track{height:8px;border-radius:4px;background:rgba(155,180,220,.09);overflow:hidden}
.ck-hbar-fill{height:100%;border-radius:4px;transform-origin:left center;min-width:2px}
.ck-hbar-val{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;color:#dbe4f0}

.ck-gauge-wrap{display:grid;place-items:center;padding:4px 0}
.ck-gauge-num{font-family:var(--ck-mono);font-weight:600;font-size:22px;fill:#edf1f6}
.ck-gauge-label{font-size:9px;fill:#8496b1;letter-spacing:.15em}

.ck-trend-grid{stroke:rgba(155,180,220,.1);stroke-width:1}
.ck-trend-line{fill:none;stroke:var(--ck-viz-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-trend-area{fill:url(#ck-trend-grad);opacity:.5}
.ck-trend-dot{fill:#0f1725;stroke:var(--ck-viz-1);stroke-width:2;cursor:pointer}

.ck-empty{
  display:grid;place-items:center;place-content:center;gap:6px;
  min-height:128px;padding:16px;text-align:center;
  color:#6d7f99;font-size:12px;line-height:1.7;
  border:1px dashed rgba(155,180,220,.2);border-radius:8px;
  background:rgba(155,180,220,.02);
}
.ck-empty b{color:#8496b1;font-weight:500}

.ck-tooltip{
  position:fixed;z-index:300;pointer-events:none;
  padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.6;
  background:rgba(12,18,29,.94);border:1px solid var(--ck-line-strong);color:#e8eef7;
  box-shadow:0 12px 32px rgba(0,0,0,.55);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--ck-t-fast) linear,transform var(--ck-t-fast) var(--ck-ease-out);
  white-space:nowrap;max-width:280px;
}
.ck-tooltip.on{opacity:1;transform:translateY(0)}
.ck-tooltip .ck-tt-num{font-family:var(--ck-mono);font-variant-numeric:tabular-nums}

.ck-flash{animation:ck-flash .7s var(--ck-ease-out)}
@keyframes ck-flash{
  0%{color:var(--ck-viz-2);text-shadow:0 0 16px rgba(79,214,192,.65)}
  100%{color:inherit;text-shadow:none}
}

.ck-skeleton{position:relative;overflow:hidden;background:rgba(155,180,220,.08);border-radius:6px}
.ck-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-100%);animation:ck-shimmer 1.5s var(--ck-ease) infinite;
}
@keyframes ck-shimmer{100%{transform:translateX(100%)}}

/* ---------- v2 强化：HUD 角标 / 辉光数字 / 扫光按钮 ---------- */
@property --ck-corner{syntax:"<color>";inherits:false;initial-value:rgba(94,184,255,.45)}
/* 指标卡：HUD 角标（hover 变金）+ 数字辉光 */
#content .stat{position:relative}
#content .stat::before,.ck-card::before{
  content:"";position:absolute;inset:7px;pointer-events:none;border-radius:6px;
  --ck-corner:rgba(94,184,255,.45);
  background:
    linear-gradient(var(--ck-corner),var(--ck-corner)) left top/12px 1px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) left top/1px 12px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) right top/12px 1px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) right top/1px 12px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) left bottom/12px 1px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) left bottom/1px 12px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) right bottom/12px 1px no-repeat,
    linear-gradient(var(--ck-corner),var(--ck-corner)) right bottom/1px 12px no-repeat;
  transition:--ck-corner var(--ck-t-slow) var(--ck-ease);
}
#content .stat:hover::before,.ck-card:hover::before{--ck-corner:rgba(232,195,129,.8)}
#content .stat strong{text-shadow:0 0 22px rgba(94,184,255,.4)}
#content .dept-overview-stats .stat strong{text-shadow:0 0 26px rgba(94,184,255,.45)}
/* ck-card 顶部渐变发丝线（常驻） */
.ck-card::after{opacity:.6}
.ck-card:hover::after{opacity:1}
/* 面板标题微光 */
#content .panel-heading h2::before{box-shadow:0 0 12px rgba(94,184,255,.75);animation:ck-breathe 3s var(--ck-ease) infinite}
/* 按钮：hover 扫光 */
button{position:relative;overflow:hidden}
button::after{
  content:"";position:absolute;top:-20%;bottom:-20%;width:56px;left:-90px;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-20deg);
  transition:left .55s var(--ck-ease-out);
}
button:hover::after{left:calc(100% + 40px)}
/* ---------- 侧边栏 v3：滑动激活块 / 光标跟随光 / 折叠浮出标签 / 入场级联 / 磁吸徽标 ---------- */

/* 1) 滑动激活块：cockpit.js 注入 #navigation；GSAP 只动 y 与 scaleY（纯合成层，不触发布局） */
/* nav 作为滑块定位容器：滑块随 nav 内容滚动并被 overflow 裁剪，天然对齐 */
#navigation{position:relative}
#ck-nav-marker{
  position:absolute;left:0;right:0;top:0;height:39px;z-index:0;
  pointer-events:none;border-radius:8px;opacity:0;
  background:linear-gradient(100deg,rgba(232,195,129,.24),rgba(232,195,129,.05) 60%,rgba(94,184,255,.06));
  box-shadow:inset 0 0 0 1px rgba(232,195,129,.22),0 6px 20px rgba(4,9,18,.35);
  will-change:transform;
}
#ck-nav-marker b{
  position:absolute;left:0;top:50%;width:3px;height:20px;
  transform:translateY(-50%);border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#ffe6b0,var(--gold));
  animation:ck-beam 2.6s var(--ck-ease) infinite;
}
@keyframes ck-beam{
  0%,100%{box-shadow:0 0 10px rgba(232,195,129,.75);height:18px}
  50%{box-shadow:0 0 20px rgba(232,195,129,1);height:25px}
}
/* 位移时的一次性高光扫过（JS 加 .moving） */
#ck-nav-marker u{position:absolute;inset:0;border-radius:8px;overflow:hidden;opacity:0}
#ck-nav-marker u::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;left:-80px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);
}
#ck-nav-marker.moving u{opacity:1}
#ck-nav-marker.moving u::after{animation:ck-marker-sweep .52s var(--ck-ease-out)}
@keyframes ck-marker-sweep{from{left:-80px}to{left:calc(100% + 30px)}}
#navigation button{z-index:1}

/* 2) 光标跟随光斑：独立层 + screen 叠加，只用 transform 位移 */
#ck-nav-light{
  position:absolute;left:0;top:0;width:280px;height:280px;margin:-140px 0 0 -140px;
  z-index:2;pointer-events:none;border-radius:50%;opacity:0;
  mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle,rgba(94,184,255,.2),rgba(94,184,255,.06) 44%,transparent 68%);
  transition:transform .42s var(--ck-ease-out),opacity .3s var(--ck-ease);
}

/* 3) 折叠态浮出标签（位置由 JS 写入 --fx/--fy，缩放交给 transition） */
#ck-nav-fly{
  --fx:0px;--fy:0px;
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  padding:6px 11px;border-radius:7px;white-space:nowrap;
  font-size:12px;letter-spacing:.4px;color:#ffe6b0;opacity:0;
  background:linear-gradient(180deg,rgba(31,44,64,.97),rgba(18,28,43,.97));
  border:1px solid rgba(223,200,155,.42);
  box-shadow:0 10px 26px rgba(4,9,18,.5),0 0 18px rgba(232,195,129,.16);
  transform:translate3d(var(--fx),var(--fy),0) scale(.88);
  transition:opacity .16s var(--ck-ease-out),transform .26s var(--ck-ease-out);
}
#ck-nav-fly.on{opacity:1;transform:translate3d(var(--fx),var(--fy),0) scale(1)}
#ck-nav-fly::before{
  content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;
  transform:translateY(-50%) rotate(45deg);background:rgba(26,38,56,.97);
  border-left:1px solid rgba(223,200,155,.42);border-bottom:1px solid rgba(223,200,155,.42);
}

/* 4) 入场级联：编号与状态点按序点亮（--ck-i 由 JS 写入；只动伪元素，不与 GSAP 抢按钮 transform） */
@keyframes ck-num-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes ck-dot-in{from{opacity:0;transform:scale(.25)}to{opacity:.7;transform:scale(1)}}
#navigation.ck-cascade button::before{animation:ck-num-in .42s var(--ck-ease-out) calc(var(--ck-i,0)*38ms) backwards}
#navigation.ck-cascade button::after{animation:ck-dot-in .5s var(--ck-ease-out) calc(var(--ck-i,0)*38ms + 60ms) backwards}

/* 5) 品牌徽标：磁吸 3D 倾斜（.brand>b 不在 motion.js 管辖内）+ 高光扫过 */
.brand{perspective:420px}
.brand>b{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.brand>b::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.6) 48%,transparent 64%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position .75s var(--ck-ease-out);
}
.brand:hover>b::after{background-position:-70% 0}

/* 6) 折叠态：隐藏状态点，给编号腾出空间（布局仍由 motion.js 主导，不在此改宽度） */
.motion-compact #navigation button::after{display:none}
.motion-compact #ck-nav-fly{display:block}
/* 品牌徽标光环旋转 */
.brand>b{animation:ck-brand-glow 4s var(--ck-ease) infinite}
@keyframes ck-brand-glow{
  0%,100%{box-shadow:0 0 14px rgba(232,195,129,.3),inset 0 1px 0 rgba(255,255,255,.4)}
  50%{box-shadow:0 0 26px rgba(232,195,129,.6),inset 0 1px 0 rgba(255,255,255,.4)}
}
/* 表格行 hover 左侧指示条 */
#content tbody tr{position:relative}
#content tbody tr:hover{box-shadow:inset 2px 0 0 var(--ck-viz-1)}
/* 图表卡数字：等宽辉光 */
.ck-gauge-num,.ck-donut-center-num{filter:drop-shadow(0 0 8px rgba(94,184,255,.45))}
.ck-hbar-fill{filter:saturate(1.15)}

/* ---------- 无障碍：动效降级 ---------- */
@media(prefers-reduced-motion:reduce){
  .aside-bottom .dot::after,.ck-live .ck-pulse,.ck-skeleton::after{animation:none}
  .ck-tooltip,.ck-card::after,nav button,button,input,select{transition:none}
  body::before,body::after,#page-title,.workspace>header::after,.ck-eq i,
  nav button.active::before,.brand>b,#content .panel-heading h2::before,
  button::after{animation:none}
  body::after{transform:none}
  #page-title{background-position:0 0}
}

/* ---------- 小屏兜底 ---------- */
@media(max-width:700px){
  .workspace>header{margin:0 -15px;padding:12px 15px}
  .ck-live{display:none}
}