/* 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}
}

/* ---------- 聚水潭实时大屏（总驾驶舱「今日」周期行下方，三栏排版，透出同一套全局动态背景） ---------- */
.ck-screen{display:flex;flex-direction:column;gap:12px;margin:20px 0 8px}
.ck-screen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);gap:12px;align-items:stretch}
.ck-col{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.ck-col>.ck-card{flex:0 0 auto;display:flex;flex-direction:column}
.ck-col-left>[data-ck-card="rank"]:not(.ck-collapsed),
.ck-col-mid>[data-ck-card="map"]:not(.ck-collapsed),
.ck-col-right>[data-ck-card="hot"]:not(.ck-collapsed){flex:1 1 auto;min-height:0}
.ck-col-left>[data-ck-card="rank"] .ck-card-body,
.ck-col-mid>[data-ck-card="map"] .ck-card-body,
.ck-col-right>[data-ck-card="hot"] .ck-card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ck-col-left>[data-ck-card="rank"] .ck-table{flex:1 1 auto;min-height:0}
.ck-col-left>[data-ck-card="rank"] .ck-table-body{flex:1 1 auto;max-height:none}
.ck-screen .ck-card{padding:13px 10px}
.ck-screen .ck-card-head{margin-bottom:10px;align-items:center;flex-wrap:wrap}
.ck-screen .ck-card-head>.ck-card-sub{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ck-screen .ck-card-title{position:relative;padding-left:9px;font-size:13px;letter-spacing:.05em;font-weight:600;color:#c8d8ee}
.ck-screen .ck-card-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,#4fc3f7,#00ff88)}
.ck-screen-note{margin:10px 0 0;font-size:11px;line-height:1.7;color:#6d7f99}
.ck-card-body{min-width:0}
.ck-tabs{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:rgba(155,180,220,.07);border:1px solid var(--ck-line)}
.ck-tabs button{padding:3px 10px;font-size:11px;line-height:1.5;border-radius:6px;color:#8496b1;background:none;border:0;cursor:pointer;transition:color var(--ck-t),background var(--ck-t)}
.ck-tabs button:hover{color:#dbe4f0}
.ck-tabs button.on{background:rgba(94,184,255,.16);color:#cfe6ff;box-shadow:inset 0 0 0 1px rgba(94,184,255,.32)}
.ck-screen-refresh{padding:4px 12px;font-size:11px;border-radius:7px}
/* 顶栏 */
.ck-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px;border-radius:10px;border:1px solid var(--ck-line);background:linear-gradient(180deg,rgba(94,184,255,.1),rgba(16,26,40,.62))}
.ck-top-left,.ck-top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ck-top-right{justify-content:flex-end}
.ck-top-center{min-width:0;text-align:center}
.ck-top-center h2{margin:0;font-size:20px;letter-spacing:.16em;color:#eaf4ff;text-shadow:0 0 24px rgba(94,184,255,.5)}
.ck-top-tip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#9db0cc;white-space:nowrap}
.ck-top-tip i{width:7px;height:7px;border-radius:50%;background:#8496b1}
.ck-top-tip.on i{background:#ff5c5c;box-shadow:0 0 9px rgba(255,92,92,.8);animation:ck-tip-pulse 1.6s var(--ck-ease) infinite}
.ck-top-tip.warn i{background:#ffc247;box-shadow:0 0 9px rgba(255,194,71,.7)}
.ck-top-tip.busy i{background:#4fc3f7;box-shadow:0 0 9px rgba(79,195,247,.7);animation:ck-tip-pulse 1s var(--ck-ease) infinite}
@keyframes ck-tip-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.ck-top-btn{padding:4px 11px;font-size:11px;white-space:nowrap;border-radius:7px;border:1px solid var(--ck-line);background:rgba(155,180,220,.06);color:#a9bcd6;cursor:pointer;transition:color var(--ck-t),background var(--ck-t),border-color var(--ck-t)}
.ck-top-btn:hover:not(:disabled){color:#eaf4ff;border-color:rgba(94,184,255,.45);background:rgba(94,184,255,.14)}
.ck-top-btn:disabled{opacity:.45;cursor:not-allowed}
.ck-top-btn.stage{padding:4px 9px;font-size:13px;line-height:1;color:var(--ck-viz-3);border-color:rgba(232,195,129,.32);background:rgba(232,195,129,.08)}
.ck-top-btn.stage.on{color:#0a1220;border-color:var(--ck-viz-3);background:var(--ck-viz-3);box-shadow:0 0 14px rgba(232,195,129,.45)}
.ck-top-select{padding:4px 8px;font-size:11px;border-radius:7px;border:1px solid var(--ck-line);background:rgba(10,18,30,.72);color:#cfe6ff;cursor:pointer;width:auto;flex:0 0 auto}
/* 投屏模式：大屏铺满视口，遮住工作台其余内容 */
body.ck-stage .ck-screen{position:fixed;inset:0;z-index:900;margin:0;padding:14px;overflow:auto;border-radius:0;background:rgba(6,12,22,.96)}
/* 翻牌主数字 */
.ck-flip-card{background:linear-gradient(180deg,rgba(94,184,255,.09),rgba(16,26,40,.6))}
.ck-flip{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.ck-flip-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ck-flip-label{font-size:12px;letter-spacing:.2em;color:#9db0cc}
.ck-flip-delta{font-family:var(--ck-mono);font-size:11px;padding:2px 9px;border-radius:99px;border:1px solid var(--ck-line)}
.ck-flip-delta.up{color:var(--ck-up);border-color:rgba(95,214,164,.35);background:rgba(95,214,164,.08)}
.ck-flip-delta.down{color:var(--ck-down);border-color:rgba(242,147,140,.35);background:rgba(242,147,140,.08)}
.ck-flip-digits{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.ck-flip-digit{min-width:31px;padding:9px 4px;border-radius:6px;background:linear-gradient(180deg,#16283f,#0c1725);border:1px solid rgba(94,184,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 16px rgba(94,184,255,.12);font-family:var(--ck-mono);font-variant-numeric:tabular-nums;font-size:30px;line-height:1;font-weight:700;color:#eaf4ff;text-shadow:0 0 18px rgba(94,184,255,.55)}
.ck-flip-digit.comma{min-width:12px;padding:9px 0;background:none;border:0;box-shadow:none;color:#7f93ae;font-size:26px}
.ck-flip-sub{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.ck-flip-item{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;background:rgba(155,180,220,.05);border:1px solid var(--ck-line);font-size:11px;color:#8496b1}
.ck-flip-item .ico{font-size:12px;color:var(--ck-viz-1)}
.ck-flip-item b{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;font-size:15px;color:#edf1f6}
/* 销售分布 */
.ck-dist{display:flex;flex-direction:column;gap:9px}
.ck-dist-toggle{display:flex;gap:8px;flex-wrap:wrap}
.ck-dist-item{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:11px;border:1px solid var(--ck-line);background:rgba(155,180,220,.04);color:#6d7f99}
.ck-dist-item i{width:7px;height:7px;border-radius:50%}
.ck-dist-item.on{color:#cfe6ff;border-color:rgba(94,184,255,.4);background:rgba(94,184,255,.12)}
.ck-dist-item.off{opacity:.62;cursor:help}
.ck-dist-summary{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:#8496b1}
.ck-dist-summary b{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;font-size:17px;color:#ffd76a;text-shadow:0 0 14px rgba(255,215,106,.32)}
.ck-dist-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:rgba(155,180,220,.08)}
.ck-dist-bar i{height:100%;min-width:2px;transition:width .6s var(--ck-ease)}
.ck-dist .ck-donut-wrap{margin-top:2px}
.ck-dist .ck-donut-wrap .ck-chart{width:100%;max-width:320px;margin:0 auto}
/* 排行榜表格（店铺 / 达人） */
.ck-table{display:flex;flex-direction:column;min-width:0}
.ck-table-head,.ck-table-row{display:grid;grid-template-columns:22px 20px minmax(0,1fr) 72px 46px 42px;gap:7px;align-items:center}
.ck-table-head{padding:5px 6px;font-size:10px;color:#6d7f99;border-bottom:1px solid var(--ck-line)}
.ck-table-body{display:flex;flex-direction:column;max-height:288px;overflow:auto;min-width:0}
.ck-table-row{padding:5px 6px;border-radius:6px;font-size:12px;transition:background var(--ck-t)}
.ck-table-row:hover{background:rgba(155,180,220,.08)}
.ck-table .c-num{font-family:var(--ck-mono);font-size:11px;text-align:center;color:#6d7f99}
.ck-table .c-ico{font-size:12px;text-align:center}
.ck-table .c-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbe4f0}
.ck-table .c-amt,.ck-table .c-int{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ck-table .c-amt{color:#edf1f6}
.ck-table .c-int{color:#9db0cc}
.ck-table-head .c-amt,.ck-table-head .c-int{font-family:inherit;color:#6d7f99}
.ck-table-row.top1 .c-num{color:#ffd76a}
.ck-table-row.top2 .c-num{color:#c3cede}
.ck-table-row.top3 .c-num{color:#d3a07a}
.ck-table-row.top1 .c-amt{color:#ffd76a}
/* 中国地图 */
.ck-map-card .ck-card-body{padding:0}
.ck-map-stage{position:relative;display:grid;place-items:center;min-height:360px;background:radial-gradient(120% 90% at 50% 28%,rgba(94,184,255,.1),transparent 70%)}
.ck-map-holder{width:100%;padding:6px 0}
.ck-map{display:block;width:100%;height:auto;max-height:460px}
/* 拆分组合动效：每个省份从版图外侧散开、再按距离错峰拼合回中国版图（--ck-sx / --ck-sy / --ck-sd 由 chinaMapSVG 逐路径写入）。 */
.ck-map-prov{fill:#0a1e3c;fill-opacity:.88;stroke:#1a4a7a;stroke-width:.6;animation:ck-map-join .78s var(--ck-ease) both;animation-delay:var(--ck-sd,0s)}
@keyframes ck-map-join{from{transform:translate(var(--ck-sx,0px),var(--ck-sy,0px));opacity:0}55%{opacity:1}to{transform:translate(0,0);opacity:1}}
.ck-map-marks{animation:ck-map-fade .5s var(--ck-ease) both;animation-delay:.46s}
.ck-map-labels{pointer-events:none;animation:ck-map-fade .5s var(--ck-ease) both;animation-delay:.62s}
@keyframes ck-map-fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* 省份小字：描边在下、文字在上，保证叠在散点上也读得清；有销量的省份用暖金加粗。 */
.ck-map-label{font-size:13px;fill:#8ba0bc;stroke:#04101f;stroke-width:2.4;stroke-linejoin:round;paint-order:stroke;letter-spacing:.5px}
.ck-map-label.on{fill:#ffdfa6;font-weight:600}
.ck-map-dot{cursor:pointer;filter:drop-shadow(0 0 7px rgba(255,215,106,.5))}
.ck-map-bubble{fill-opacity:.14;transform-box:fill-box;transform-origin:center;animation:ck-map-breathe 3s var(--ck-ease) infinite;pointer-events:none}
@keyframes ck-map-breathe{0%,100%{transform:scale(1);fill-opacity:.1}50%{transform:scale(1.16);fill-opacity:.24}}
.ck-map-ripple{fill:none;stroke-width:1.2;opacity:.5;transform-box:fill-box;transform-origin:center;animation:ck-map-ripple 3s var(--ck-ease) infinite}
.ck-map-ripple.alt{animation-delay:1.5s}
@keyframes ck-map-ripple{0%{opacity:.55;transform:scale(.5)}70%,100%{opacity:0;transform:scale(1.3)}}
.ck-map-state{padding:70px 14px;text-align:center;font-size:12px;color:#6d7f99}
.ck-map-state.fail{color:var(--ck-viz-3)}
/* 今日爆款 */
.ck-hot-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-hot{display:flex;flex-direction:column;gap:10px;min-width:0}
.ck-hot-showcase{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:14px;min-height:140px;padding:18px 8px 8px}
.ck-hot-orbit{position:absolute;left:50%;top:52%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(94,184,255,.24);pointer-events:none;animation:ck-hot-spin 24s linear infinite}
@keyframes ck-hot-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.ck-hot-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:74px;transition:transform .5s var(--ck-ease)}
.ck-hot-item.center{width:98px;transform:translateY(-9px)}
.ck-hot-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;border:1px solid var(--ck-line);background:linear-gradient(135deg,#1a2a4a,#0a1a3a)}
.ck-hot-item.center .ck-hot-img{border-color:rgba(255,215,106,.55);box-shadow:0 0 22px rgba(255,215,106,.28)}
.ck-hot-crown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:15px;filter:drop-shadow(0 0 8px rgba(255,215,106,.6))}
.ck-hot-name{width:100%;font-size:10px;text-align:center;color:#8496b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-hot-list{display:flex;flex-direction:column;gap:3px;max-height:264px;overflow:auto;min-width:0}
.ck-hot-row{display:grid;grid-template-columns:20px 30px minmax(0,1fr) 66px 38px;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;transition:background var(--ck-t)}
.ck-hot-row:hover{background:rgba(155,180,220,.08)}
.ck-hot-row .hr-rank{font-family:var(--ck-mono);font-size:11px;text-align:center;color:#6d7f99}
.ck-hot-row.top1 .hr-rank{color:#ffd76a}
.ck-hot-row.top2 .hr-rank{color:#c3cede}
.ck-hot-row.top3 .hr-rank{color:#d3a07a}
.ck-hot-row .hr-img{width:30px;height:30px;object-fit:cover;border-radius:5px;border:1px solid var(--ck-line);background:#1a2a4a}
.ck-hot-row .hr-name{min-width:0;font-size:12px;color:#dbe4f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-hot-row .hr-amount{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;font-size:12px;text-align:right;color:#ffd76a;white-space:nowrap}
.ck-hot-row .hr-qty{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;font-size:11px;text-align:right;color:#9db0cc}
/* 多序列趋势 */
.ck-mt-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:10px;font-size:11px;color:var(--muted)}
.ck-mt-legend span{display:inline-flex;align-items:center;gap:6px}
.ck-mt-legend i{width:14px;height:2px;border-radius:1px}
.ck-mt-legend b{font-weight:500;color:#9db0cc}
.ck-mt-legend em{font-style:normal;font-family:var(--ck-mono);color:#dbe4f0}
.ck-mt-line{vector-effect:non-scaling-stroke}
/* 曲线悬停：竖向参考线 + 命中区 + 各系列高亮点 */
.ck-trend-guide{stroke:rgba(120,190,255,.5);stroke-width:1;stroke-dasharray:3 3;pointer-events:none;transition:opacity .12s linear}
.ck-trend-hit{cursor:crosshair}
.ck-trend-focus{pointer-events:none;stroke:#0f1725;stroke-width:1.4;filter:drop-shadow(0 0 6px rgba(94,184,255,.6));transition:opacity .12s linear}
/* 发货进度 */
.ck-mt-area{pointer-events:none}
.ck-ship{display:flex;flex-direction:column;gap:12px;min-width:0}
.ck-ship-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.ck-ship-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ck-ship-stat{padding:7px 10px;border-radius:7px;background:rgba(155,180,220,.05);border:1px solid var(--ck-line);border-left:2px solid var(--ck-line-strong)}
.ck-ship-stat span{display:block;font-size:10px;color:#8496b1}
.ck-ship-stat b{font-family:var(--ck-mono);font-variant-numeric:tabular-nums;font-size:16px;color:#dbe4f0}
.ck-ship-stat b.green{color:#00ff88}
.ck-ship-stat b.orange{color:#ffaa00}
.ck-ship-stat b.blue{color:#4fc3f7}
.ck-ship-stat b.red{color:#ff6b6b}
.ck-wh-table{width:100%;border-collapse:collapse;font-size:11px}
.ck-wh-table th,.ck-wh-table td{padding:5px 7px;text-align:left;white-space:nowrap;color:#c3cede;border-bottom:1px solid rgba(155,180,220,.08)}
.ck-wh-table th{font-size:10px;font-weight:500;color:#6d7f99}
.ck-wh-table th.n,.ck-wh-table td.n{text-align:right;font-family:var(--ck-mono);font-variant-numeric:tabular-nums}
.ck-wh-table td:first-child{max-width:118px;overflow:hidden;text-overflow:ellipsis}
.ck-wh-table td.warn{color:#ffaa00}
.ck-wh-table td.danger{color:#ff6b6b}
/* 隐藏模块按钮 + 折叠态 */
.ck-hide-btn{margin-left:auto;padding:3px 10px;font-size:11px;line-height:1.5;border-radius:7px;border:1px solid var(--ck-line);background:rgba(155,180,220,.06);color:#8496b1;cursor:pointer;white-space:nowrap;transition:color var(--ck-t),background var(--ck-t),border-color var(--ck-t)}
.ck-hide-btn:hover{color:#eaf4ff;border-color:rgba(94,184,255,.45);background:rgba(94,184,255,.14)}
.ck-hide-btn.mini{padding:2px 8px;font-size:10px;margin-left:0}
.ck-card.ck-collapsed .ck-card-head{margin-bottom:0}
/* 中栏翻牌浮空（去卡片框，对齐官方屏） */
.ck-screen .ck-card.ck-hero-bare{padding:4px 0;background:none;border:0;box-shadow:none}
/* 翻牌主数字跨全宽居中（参考官方大屏：顶部全局 KPI，三列网格之上） */
.ck-hero-row{display:flex;justify-content:center}
.ck-hero-row .ck-card.ck-hero-bare{width:100%;max-width:860px}
.ck-hero-bare .ck-card-body{width:100%}
.ck-hero-pill{display:inline-flex;align-items:center;padding:5px 22px;border-radius:99px;font-size:13px;letter-spacing:.14em;color:#eaf4ff;background:linear-gradient(90deg,rgba(79,195,247,.3),rgba(0,255,136,.16));border:1px solid rgba(94,184,255,.42);box-shadow:0 0 24px rgba(94,184,255,.3);text-shadow:0 0 12px rgba(94,184,255,.55)}
/* 面板头：tab / 副标题 两端对齐 */
.ck-dist-head,.ck-rank-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.ck-dist-head .ck-card-sub,.ck-rank-head .ck-card-sub{font-size:11px;color:#8496b1}
/* 环图引出线标注 */
.ck-lead-line{opacity:.72}
.ck-lead-name{font-weight:500}
/* 地图省份 hover 高亮 */
.ck-map-prov.has-data{cursor:pointer;transition:fill .18s var(--ck-ease),fill-opacity .18s var(--ck-ease)}
.ck-map-prov.has-data:hover{fill:#4fc3f7;fill-opacity:.5}
[data-ck-card="map"] .ck-map-stage{flex:1 1 auto}
/* 地图底部销售额图例（渐变条） */
.ck-map-legend{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:4px 14px;border-radius:99px;font-size:10px;color:#9db0cc;background:rgba(8,16,28,.72);border:1px solid var(--ck-line);white-space:nowrap;cursor:help}
.ck-map-legend i{width:30px;height:7px;border-radius:4px}
.ck-map-legend i.g1{background:#4fc3f7}
.ck-map-legend i.g2{background:#ffd700}
.ck-map-legend i.g3{background:#ff8c00}
@media(max-width:1240px){
  .ck-screen-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr)}
}
@media(max-width:860px){
  .ck-screen-grid{grid-template-columns:minmax(0,1fr)}
  .ck-col-mid{grid-column:auto}
  .ck-topbar{grid-template-columns:minmax(0,1fr);gap:8px}
  .ck-top-center,.ck-top-right{text-align:left;justify-content:flex-start}
  .ck-top-center h2{font-size:17px;letter-spacing:.08em}
  .ck-flip-digit{min-width:24px;padding:7px 3px;font-size:23px}
  .ck-flip-digit.comma{min-width:9px;font-size:20px}
  .ck-ship-top{grid-template-columns:minmax(0,1fr)}
  .ck-table-head,.ck-table-row{grid-template-columns:20px 18px minmax(0,1fr) 66px 42px 38px;gap:5px}
  .ck-hot-row{grid-template-columns:18px 28px minmax(0,1fr) 60px 34px;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .ck-tabs button,.ck-table-row,.ck-hot-row,.ck-mt-line,.ck-dist-bar i,.ck-hot-item{transition:none;animation:none}
  .ck-flip-digit{text-shadow:none}
  .ck-map-prov,.ck-map-labels,.ck-map-marks,.ck-map-bubble,.ck-map-ripple,.ck-hot-orbit,.ck-top-tip i{animation:none}
}

/* ===== 大屏高度调整（先压缩 50%，后整体放宽 15%，今日销售额板块单独放大 30%）=====
   只作用于工作台内嵌大屏，投屏模式（body.ck-stage）保持原尺寸。
   调整高度时只改这一段即可：列表限高 / 舞台最小高 / 图表最大高 三类参数。 */
body:not(.ck-stage) .ck-flip{gap:12px}
body:not(.ck-stage) .ck-flip-digits{gap:6px}
body:not(.ck-stage) .ck-flip-digit{min-width:31px;padding:9px 4px;font-size:26px}
body:not(.ck-stage) .ck-flip-digit.comma{min-width:14px;padding:9px 0;font-size:22px}
body:not(.ck-stage) .ck-flip-item{padding:6px 10px;white-space:nowrap}
body:not(.ck-stage) .ck-flip-item b{font-size:14px}
body:not(.ck-stage) .ck-hero-pill{padding:6px 26px;font-size:14px}
/* 卡头结构化换行：第一行 标题+隐藏按钮，第二行 tab 区独占全宽，杜绝挤压重叠/文字竖叠 */
body:not(.ck-stage) .ck-screen .ck-card-head{margin-bottom:6px;flex-wrap:wrap;gap:6px 8px;min-width:0}
body:not(.ck-stage) .ck-screen .ck-card-head>.ck-card-sub{display:none}
body:not(.ck-stage) .ck-screen .ck-card-head>.ck-rank-head,
body:not(.ck-stage) .ck-screen .ck-card-head>.ck-dist-head,
body:not(.ck-stage) .ck-screen .ck-card-head>.ck-hot-tabs,
body:not(.ck-stage) .ck-screen .ck-card-head>.ck-tabs{flex:1 0 100%}
body:not(.ck-stage) .ck-screen .ck-hide-btn{flex:none;padding:2px 7px}
body:not(.ck-stage) .ck-tabs button{padding:2px 8px;white-space:nowrap}
body:not(.ck-stage) .ck-dist-item{padding:2px 8px;white-space:nowrap}
body:not(.ck-stage) .ck-dist-head,body:not(.ck-stage) .ck-hot-tabs{gap:6px}
/* 爆款排行：窄列下缩列宽与间距，保住商品名的可读宽度 */
body:not(.ck-stage) .ck-hot-row{grid-template-columns:16px 26px minmax(0,1fr) 54px 30px;gap:6px}
body:not(.ck-stage) .ck-hot-row .hr-img{width:26px;height:26px}
body:not(.ck-stage) .ck-hot-row .hr-name{font-size:11px}
body:not(.ck-stage) .ck-hot-row .hr-amount{font-size:11px}
body:not(.ck-stage) .ck-hot-row .hr-qty{font-size:10px}
/* 发货进度：内容固有宽超过右列时允许横向裁切，防文字竖叠/重叠 */
body:not(.ck-stage) [data-ck-card="ship"] .ck-card-body{max-height:250px;overflow-y:auto;overflow-x:hidden}
body:not(.ck-stage) .ck-ship-stat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.ck-stage) .ck-ship-stat b{white-space:nowrap}
/* 仓库表固定布局自适应列宽：nowrap 表头不再把表格撑出卡片 */
body:not(.ck-stage) .ck-wh-table{width:100%;table-layout:fixed;font-size:10px}
body:not(.ck-stage) .ck-wh-table th,body:not(.ck-stage) .ck-wh-table td{padding:4px 5px}
body:not(.ck-stage) .ck-wh-table th:nth-child(2),body:not(.ck-stage) .ck-wh-table th:nth-child(3),body:not(.ck-stage) .ck-wh-table th:nth-child(4){width:64px}
body:not(.ck-stage) .ck-wh-table td:first-child{overflow:hidden;text-overflow:ellipsis}
/* 窄窗口（≤1500px）下发货区改单列堆叠：仪表盘居中一行，指标 2×2 占满列宽，不再横向溢出 */
@media(max-width:1500px){
  body:not(.ck-stage) .ck-ship-top{grid-template-columns:minmax(0,1fr);justify-items:center}
  body:not(.ck-stage) .ck-ship-stats{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
}
body:not(.ck-stage) [data-ck-card="map"] .ck-map-stage{min-height:252px}
body:not(.ck-stage) .ck-map{max-height:420px}
body:not(.ck-stage) [data-ck-card="trend"] .ck-chart svg{max-height:106px}
body:not(.ck-stage) .ck-mt-legend{margin-top:6px}
body:not(.ck-stage) .ck-col-left>[data-ck-card="rank"] .ck-table-body{max-height:220px}
body:not(.ck-stage) .ck-dist .ck-donut-wrap .ck-chart{max-width:200px}
body:not(.ck-stage) .ck-hot-showcase{min-height:84px;padding:11px 5px 5px;gap:10px}
body:not(.ck-stage) .ck-hot-orbit{width:96px;height:96px;margin:-48px 0 0 -48px}
body:not(.ck-stage) .ck-hot-item{width:60px}
body:not(.ck-stage) .ck-hot-item.center{width:76px;transform:translateY(-5px)}
body:not(.ck-stage) .ck-hot-list{max-height:120px}
body:not(.ck-stage) [data-ck-card="ship"] .ck-card-body{max-height:230px;overflow:auto}
/* 顶栏自适应：701–1100px 是原先的唯一样式空洞。
   该区间 aside 已收窄到 190px，但顶栏仍为 nowrap（flex-wrap 只在 ≤700px 生效），
   而 header 内已被注入 42px 折叠按钮、.header-actions 内被注入 267px 的 .ck-live，
   实测 32×2 内边距 + 42+20+23+20+499 = 604px，可用空间恰好为 0；
   标题块 flex:1 1 0% 的基宽为 0，中文 min-content 又只有一个字宽，
   于是 .eyebrow / #page-title 被压到 23px 逐字竖排。
   修法：允许顶栏换行并给标题块真实基宽，让动作区整体落到第二行，不隐藏任何数据。
   附带修掉同区间的横向溢出：顶栏用的是 -32px 出血边距（按 32px 内边距设计），
   而 styles.css 在 ≤1100px 已把 .workspace 内边距改成 20px，顶栏因此比容器宽 12px，
   实测 document.scrollWidth 846 > clientWidth 834，会多出一条横向滚动条；
   这里把出血改成 -20px/20px，与 .workspace 对齐，粘性顶栏仍铺满整行。 */
@media(min-width:701px) and (max-width:1100px){
  .workspace>header{margin:0 -20px;padding:16px 20px 14px;flex-wrap:wrap;row-gap:12px}
  .workspace>header>div:first-of-type{flex:1 1 200px}
  .header-actions{flex:1 1 auto;justify-content:flex-end;row-gap:8px}
}