/* 暗场影院控制台 · 管理面板 v2.0.0-cinema1 · 零外部资源 */
:root{
  color-scheme:dark;
  --bg:#07080a; --panel:#101216; --panel-2:#16181f; --panel-3:#1d2027;
  --txt:#f4f5f7; --sub:#a3a8b3; --dim:#666c78;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --acc:#3ddc97; --acc-ink:#052e1f; --err:#fb7185; --warn:#fbbf24; --warn-text:#fde68a;
  --chip-bg:rgba(13,15,18,.82); --track:rgba(255,255,255,.09); --track-2:rgba(255,255,255,.16);
  --hover:rgba(255,255,255,.05); --hover-2:rgba(255,255,255,.09);
  --amb:20,150,140;
  --topctl-h:40px; /* 顶栏控件统一高度：Live Pill 与右侧三钮同一基线 */
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --glass-bg:rgba(15,17,21,.58); --glass-line:rgba(255,255,255,.10);
  --glass-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  --scrim-bg:rgba(3,4,6,.55);
  --hero-shade-1:rgba(5,6,9,.94); --hero-shade-2:rgba(5,6,9,.62); --hero-shade-3:rgba(5,6,9,.18);
}
/* 浅色 token：全站统一基准灰（2026-10-21 用户指示「所有网页统一浅灰、用 rf 公共页的灰」）：
   --bg #f4f6f7 ← rf 公共页（refract-custom/ref-old）浅色 --canvas 原值，公共页/登录/认领/面板四处同值；
   --panel #ffffff ← rf --surface；--panel-2/--panel-3 为同族中性灰阶（暖纸 #f2f2ec/#f4f4ee 退场）；
   --txt/--sub/--dim ← 公共页 --ink/--muted/--faint；--line/--line-2 ← --line/--line-strong；
   --acc #557600 ← 公共页 --accent-strong；--err #b3261e ← 登录反相浅色套 --menu-err；
   --warn #9c5b10 ← 公共页 --warn；--amb 改强调色 RGB（原青绿 20,150,140 退场）。 */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6f7; --panel:#ffffff; --panel-2:#e9edee; --panel-3:#dde3e5;
  --txt:#0a0a0a; --sub:#707070; --dim:#a0a0a0;
  --line:#e3e3e3; --line-2:#bdbdbd;
  --acc:#557600; --acc-ink:#ffffff; --err:#b3261e; --warn:#9c5b10; --warn-text:#9c5b10;
  --chip-bg:rgba(255,255,255,.86); --track:rgba(10,10,10,.10); --track-2:rgba(10,10,10,.18);
  --hover:rgba(10,10,10,.045); --hover-2:rgba(10,10,10,.08);
  --amb:85,118,0;
  --glass-bg:rgba(255,255,255,.68); --glass-line:rgba(10,10,10,.10);
  --glass-shadow:0 12px 34px rgba(10,10,10,.13), inset 0 1px 0 rgba(255,255,255,.7);
  --scrim-bg:rgba(10,10,10,.32);
}
/* ---------- 浅色专属覆写（对齐公共页语言；夜间零影响） ---------- */
/* 主按钮：公共页主钮语言 = 墨黑底 + 白字（浅色原为祖母绿底，随此退场） */
html[data-theme="light"] .btn.primary{ background:#0a0a0a; border-color:#0a0a0a; color:#ffffff; }
html[data-theme="light"] .btn.primary:hover{ background:#232629; }
/* 选区：公共页浅色同款荧光绿底 + 墨字 */
html[data-theme="light"] ::selection{ background:#c8ff4a; color:#0a0a0a; }
/* Live Pill 呼吸光晕：原为夜间强调绿 rgba(61,220,151,…)，浅色换强调橄榄绿 */
html[data-theme="light"] .livepill .dot{ box-shadow:0 0 0 0 rgba(85,118,0,.40); animation:breathL 2.6s infinite; }
@keyframes breathL{ 0%{ box-shadow:0 0 0 0 rgba(85,118,0,.35);} 70%{ box-shadow:0 0 0 8px rgba(85,118,0,0);} 100%{ box-shadow:0 0 0 0 rgba(85,118,0,0);} }
/* 链路脉冲点 / 时间线播放点的光晕：同上换橄榄绿（底色仍走 var(--acc)） */
html[data-theme="light"] .b-pulse{ box-shadow:0 0 7px rgba(85,118,0,.55); }
html[data-theme="light"] .c-dot{ box-shadow:0 0 8px rgba(85,118,0,.55); }
html[data-theme="light"] .chain-flow.live .c-badge::before{ box-shadow:0 0 6px rgba(85,118,0,.5); }
html[data-theme="light"] .tl-ev.play .tdot{ box-shadow:0 0 12px rgba(85,118,0,.40); }
/* Hero 图上信息片的数值：深底片上用公共页荧光 accent 保读性（plain 片走 --txt，不受影响） */
html[data-theme="light"] .chip:not(.plain) b{ color:#c8ff4a; }
/* ---------- 浅色去绿第二轮（用户 2026-10-21 20:40「还是太绿了」） ----------
   尺：浅色下凡是大面积上色的，一律墨黑或中性灰；--acc 橄榄只保留给
   点（状态点/脉冲点）、细线（链路流动线/时间线脊/图表线）、文字级小面积
   （状态词/链接 hover/焦点环/灯片文字）。夜间零影响（本段全在 light 作用域）。 */
/* 氛围晕染去绿去暖：页面顶光晕改中性灰，不再给整个底染色 */
html[data-theme="light"] .bg-tint{ background:radial-gradient(75% 46% at 50% -6%, rgba(110,118,124,.12), transparent 70%); }
/* Hero 与海报占位底去绿：改中性面板色阶（有真图时被图盖住，无图时也不泛绿） */
html[data-theme="light"] .hero{ background:linear-gradient(120deg, var(--panel-3), var(--panel-2) 55%, var(--panel)); }
html[data-theme="light"] .poster-wrap{ background:linear-gradient(140deg, var(--panel-3), var(--panel-2)); }
html[data-theme="light"] .sheet .sh-poster-wrap{ background:linear-gradient(140deg, var(--panel-3), var(--panel-2)); }
/* 链路枢纽盒：改墨边强调、去掉绿色光晕（流动线与支线仍是 2px 细线，保留橄榄） */
html[data-theme="light"] .chain-box.hub{ border-color:rgba(10,10,10,.38); box-shadow:none; }
/* 开关打开态：整片橄榄 → 墨黑底 + 白钮（对齐公共页黑钮语言） */
html[data-theme="light"] .sw input:checked + .tr{ background:#0a0a0a; }
/* 设置子导航选中：绿框绿字 → 黑框黑字 */
html[data-theme="light"] .set-item.on{ border-color:var(--txt); }
html[data-theme="light"] .set-item.on .si-t{ color:var(--txt); }
/* Dock 当前项：图标由橄榄改墨黑（选中底色本就是中性灰） */
html[data-theme="light"] .dock button.on svg{ color:var(--txt); }
/* Hero 状态标：整片橄榄底 → 墨黑底白字 */
html[data-theme="light"] .hero .live-tag{ background:#0a0a0a; }
/* 大面积数据色块改墨黑系：额度进度条 / 每日用量柱 / 流量环 / 面积图填充
   （warn/err 语义色同口径重声明，防被上面的通用规则盖掉；零用量基线桩仍走轨道灰） */
html[data-theme="light"] .pbar i{ background:linear-gradient(90deg, rgba(10,10,10,.45), #0a0a0a); }
html[data-theme="light"] .pbar.warn i{ background:linear-gradient(90deg, var(--warn), var(--warn)); }
html[data-theme="light"] .pbar.err i{ background:var(--err); }
html[data-theme="light"] .dcol-fill{ background:var(--txt); }
html[data-theme="light"] .dcol-fill.zero{ background:var(--track-2); }
html[data-theme="light"] #ringFg{ stroke:var(--txt); }
html[data-theme="light"] #ringFg.warn{ stroke:var(--warn); }
html[data-theme="light"] #ringFg.err{ stroke:var(--err); }
html[data-theme="light"] .chart-area{ fill:#0a0a0a; opacity:.07; }
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
input,select,textarea{ font:inherit; color:var(--txt); }
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:rgba(var(--amb),.45); }
[hidden]{ display:none !important; }
.quiet{ color:var(--sub); font-size:13px; }
.hint{ color:var(--dim); font-size:12.5px; line-height:1.6; }
.form-error{ color:var(--err); font-size:13px; font-weight:600; margin:10px 0; }

/* ---------- 环境背景 ---------- */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg); }
.bg-layer{
  position:absolute; inset:-12%;
  background-size:cover; background-position:center 30%;
  filter:blur(72px) saturate(155%) brightness(.5);
  opacity:0; transition:opacity 1.1s var(--ease);
}
.bg-layer.on{ opacity:.5; }
html[data-theme="light"] .bg-layer{ filter:blur(72px) saturate(135%) brightness(1.18); }
html[data-theme="light"] .bg-layer.on{ opacity:.3; }
.bg-tint{
  position:absolute; inset:0;
  background:radial-gradient(75% 46% at 50% -6%, rgba(var(--amb),.20), transparent 70%);
}
.bg-fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,8,10,.42) 0%, rgba(7,8,10,.72) 34%, var(--bg) 78%);
}
html[data-theme="light"] .bg-fade{
  background:linear-gradient(180deg, rgba(244,246,247,.22) 0%, rgba(244,246,247,.5) 34%, var(--bg) 78%);
}

/* ---------- 顶栏 / 玻璃 ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 0;
  pointer-events:none;
}
.topbar > *{ pointer-events:auto; }
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}
.tb-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.livepill{
  display:flex; align-items:center; gap:9px;
  height:var(--topctl-h); border-radius:999px; padding:0 15px 0 12px;
  font-size:13px; font-weight:600; letter-spacing:.01em; text-align:left;
  transition:transform .18s var(--ease);
  max-width:58vw;
}
.livepill:active{ transform:scale(.97); }
.livepill .dot{
  width:8px; height:8px; border-radius:50%; background:var(--acc); flex:none;
  box-shadow:0 0 0 0 rgba(61,220,151,.5); animation:breath 2.6s infinite;
}
.livepill.idle .dot{ background:var(--dim); animation:none; box-shadow:none; }
.livepill .p-sub{ color:var(--sub); font-weight:500; white-space:nowrap; }
.livepill .p-chev{ color:var(--dim); font-size:11px; margin-left:2px; transition:transform .25s var(--ease); }
.livepill.open .p-chev{ transform:rotate(180deg); }
@keyframes breath{ 0%{ box-shadow:0 0 0 0 rgba(61,220,151,.45);} 70%{ box-shadow:0 0 0 8px rgba(61,220,151,0);} 100%{ box-shadow:0 0 0 0 rgba(61,220,151,0);} }
.top-actions{ display:flex; gap:8px; align-items:center; }
.cmdk-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; border-radius:999px;
  height:var(--topctl-h); padding:0 14px; font-size:13px; line-height:1; color:var(--sub); font-weight:500;
}
/* 主题切换：与公共页同款圆形半盘钮（frontend.css .theme-toggle 照抄，--ink 对应面板 --txt）——
   单钮点按在昼夜间翻转；盘面左半实心、右半描边环，夜间由 CSS 把盘面旋转 180° 呈右实左空，
   theme.js 在绘制前已定下 data-theme，首帧即正确朝向，不依赖 JS、无闪烁 */
.theme-toggle{
  display:grid; width:28px; height:28px; place-items:center; flex:none;
  color:var(--txt); opacity:.62;
  transition:opacity .2s ease, transform .35s var(--ease);
}
.theme-toggle svg{
  width:15px; height:15px; display:block;
  transition:transform .5s var(--ease);
}
.theme-toggle:hover{ opacity:1; transform:rotate(16deg); }
html[data-theme="dark"] .theme-toggle svg{ transform:rotate(180deg); }
html[data-theme="dark"] .theme-toggle:hover svg{ transform:rotate(200deg); }
.theme-toggle:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:50%; }
@media (prefers-reduced-motion: reduce){ .theme-toggle{ transition:none; } .theme-toggle svg{ transition:none; } }
.cmdk-btn svg{ display:block; flex:none; }
.cmdk-btn .cb-label{ display:none; }
@media (min-width:760px){ .cmdk-btn .cb-label{ display:inline; } }
/* 顶栏手机防溢出（≤759px）：胶囊按钮收紧横向内边距、半盘钮同公共页手机档 26px，
   Live Pill 弹性收缩、文字省略号截断，不再把搜索胶囊挤出右缘 */
@media (max-width:759px){
  .cmdk-btn{ padding:0 11px; }
  .theme-toggle{ width:26px; height:26px; }
  .top-actions{ flex:none; }
  .tb-left{ flex:1; min-width:0; }
  /* Live Pill 恢复贴合内容的原本尺寸：不拉伸（flex:none），宽度由内容决定、
     超长靠 max-width:58vw + 文字省略号收口（用户 21:01「不需要占用这么多空」） */
  .livepill{ flex:none; }
  /* 手机顶栏不放账号钮：顶栏只剩 Live Pill 与右侧控件，Pill 回到最左、其弹层左缘还原 16px；
     账号钮是 Dock 左端外侧的独立悬浮圆钮 .acct-fab（靠着「首页」一端、屏幕左下角，见 .dock-wrap 段） */
  .topbar .acct-chip{ display:none; }
  .pill-pop{ left:16px; }
  .dock-wrap .acct-fab{ display:flex; width:48px; height:48px; }
  #pillText{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .livepill .p-sub{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:360px){
  .livepill .p-sub{ display:none; }
}
/* Live Pill 下拉（桌面：Pill 前边是 40px 账号圆钮 + 8px 间距，弹层左缘对到 Pill 左缘 64px；
   手机 ≤759px 顶栏无账号钮、Pill 回到最左，弹层左缘 16px，见下方媒体块） */
.pill-pop{
  position:fixed; z-index:41; top:calc(58px + env(safe-area-inset-top)); left:64px;
  width:min(92vw,372px); border-radius:22px; padding:10px;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:16px 0;
  visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.pill-pop.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s; }
.pill-pop h3{
  font-size:11px; letter-spacing:.14em; color:var(--dim);
  font-family:var(--mono); font-weight:600; padding:6px 10px 8px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.pill-pop h3 b{ color:var(--acc); font-weight:600; letter-spacing:.02em; font-family:var(--sans); font-size:12px; }
.pill-sess{
  display:flex; gap:11px; align-items:center; width:100%; text-align:left;
  padding:8px 10px; border-radius:14px; transition:background .15s;
}
.pill-sess:hover{ background:var(--hover); }
.pill-sess .ps-poster{ width:34px; height:50px; aspect-ratio:2/3; border-radius:7px; flex:none; }
.pill-sess .ps-main{ flex:1; min-width:0; }
.pill-sess .ps-t{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pill-sess .ps-m{ color:var(--sub); font-size:12px; font-family:var(--mono); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill-all{
  display:block; width:100%; text-align:center; padding:10px; margin-top:4px;
  color:var(--sub); font-size:13px; font-weight:600; border-top:1px solid var(--line);
}
.pill-all:hover{ color:var(--txt); }
/* 账号钮：与 Live Pill 平级的独立组件（独立弹层 acct-pop，与会话弹层互斥）。
   形态 = 纯头像圆钮（不带账号名文字，账号名走 aria-label 与弹层）；
   落点按端分开：桌面在顶栏左簇最左（Live Pill 前边，40px 与顶栏同高同基线）；手机离开顶栏，
   做成 Dock 左端外侧的独立悬浮圆钮 .acct-fab（48px、自带玻璃底/边框/阴影，靠着 Dock 的「首页」一端，
   与 Dock 在 .dock-wrap 里并排居中 = 屏幕左下角，≤759px 才显示，不占 Dock 本体格子）。 */
.acct-chip{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:var(--topctl-h); height:var(--topctl-h); border-radius:50%; padding:2px;
  transition:transform .18s var(--ease);
}
.acct-chip:active{ transform:scale(.94); }
.acct-chip .ac-ava{ width:100%; height:100%; border-radius:50%; object-fit:cover; flex:none; background:var(--panel-2); }
/* 默认头像（站点未设自定义头像）时 panel.js 给 .ac-ava 换上方形透明图标版并加此类：
   整图完整显示不裁切；自定义头像不带此类，保持圆形 cover 原样。 */
.acct-chip .ac-ava.ava-default{ object-fit:contain; background:transparent; }
/* 首页品牌横带（2026-10-22 用户拍板，替代原待机框内 Logo）：宽版透明 Logo +
   「运行概览」标题组常驻于首页上部（顶栏之下、bento 之上），与播放状态无关。
   桌面：Logo 居左 200px、标题组紧随其后；手机：纵排，Logo 140px 在上、标题组在下。
   2026-10-22 晚改版（用户看图点名）：① 羊图整图上移一档（桌面 12px / 手机 10px，
   transform 不占布局，带高与标题位置不变）；② 标题组上方加 BEAM 活字字标 +
   酸橙短杠——照公共页 lockup 原图比例新排（非贴图，避免两只羊）：字标用自托管
   subset 的 Archivo Black（仅 B/E/A/M 四字形，archivo-black-beam.woff2）；
   杠色 #c8ff4a 与双主题 lockup 实测同值、主题不变；杠宽高比 4.3:1（原图 43×10）、
   杠左缘距字标墨迹左缘 0.69em（= 原图宽占比 21.5%）。基线距行顶 0.83em
   （Archivo hhea ascent 878/descent −210、line-height 1 推得）。
   ③ 错位：桌面标题段（h2+副题）左移进 20px、手机 12px，字标左缘因此突出于
   标题左缘，绿杠正落在两段左缘之间的拐角附近。
   2026-10-22 深夜微调（用户看真机截图点名）：字标放大一档（桌面 28px、与
   27px 标题近齐平；手机 23px，同比例）；绿杠改下移留空——top 1.05em，与基线
   净空 0.216em（桌面 ≈6.0px / 手机 ≈5.0px），不再贴字母下缘。杠底因此越出字标
   行盒 0.20em，段下外边距同步加大（桌面 14px / 手机 12px）兜住杠与标题的间距
   （桌面 ≈8.4px / 手机 ≈7.4px）。杠 left 仍 .77em：字号放大后杠左缘相对标题
   左缘为桌面 +1.6px / 手机 +5.7px，仍在拐角 ±6px 内。羊图上移量不变。 */
@font-face{
  font-family:"Archivo Black";
  src:url("archivo-black-beam.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
.home-band{ display:flex; align-items:center; gap:22px; margin:6px 2px 20px; }
.home-band-logo{ display:block; width:200px; height:auto; flex:none; transform:translateY(-12px); }
.home-band .v-head{ margin:0; }
.hb-beam{ position:relative; display:inline-block; font-family:"Archivo Black",var(--sans); font-size:28px; line-height:1; letter-spacing:.01em; color:var(--txt); margin-bottom:14px; }
.hb-beam-dash{ position:absolute; left:.77em; top:1.05em; width:.65em; height:.15em; background:#c8ff4a; border-radius:1px; }
.home-band-head h2, .home-band-head p{ margin-left:20px; }
@media (max-width:759px){
  .home-band{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:16px; }
  .home-band-logo{ width:140px; transform:translateY(-10px); }
  .hb-beam{ font-size:23px; margin-bottom:12px; }
  .home-band-head h2, .home-band-head p{ margin-left:12px; }
}
/* 手机独立头像圆钮：默认隐藏（桌面用顶栏钮）；≤759px 在 .dock-wrap 里以 Dock 外侧独立钮显示
   （尺寸/显示规则在 ≤759 媒体块的 .dock-wrap .acct-fab，玻璃面由 .glass 提供） */
.acct-fab{ display:none; }
/* 账号弹层：贴合内容的小卡（宽 ≤264px、高随内容）。
   纵向锚点只由 JS 打开时行内给定（向下=top、向上=bottom 且 top 显式 auto）——
   基础规则绝不能再写 top：21:25 实机事故就是基础 top 与行内 bottom 同时成立，
   fixed 弹层被上下拉满成近全屏大空卡。 */
.acct-pop{
  position:fixed; z-index:41; left:16px;
  width:min(calc(100vw - 24px),264px); border-radius:20px; padding:10px;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:0 0;
  visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.acct-pop.up{ transform:translateY(8px) scale(.98); }
.acct-pop.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s; }
.acct-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:4px 10px 10px; font-size:12.5px; color:var(--sub);
}
.acct-row b{ color:var(--txt); font-weight:600; font-family:var(--mono); font-size:12.5px; }
.acct-logout{
  display:block; width:100%; text-align:center; padding:10px; margin-top:2px;
  border-top:1px solid var(--line); color:var(--err); font-size:13px; font-weight:600;
}
.acct-logout:hover{ background:var(--hover); }

/* ---------- 舞台 / 视图 ---------- */
.stage{
  max-width:1140px; margin:0 auto;
  padding:calc(84px + env(safe-area-inset-top)) 16px calc(118px + env(safe-area-inset-bottom));
}
.view{ display:none; }
.view.on{ display:block; animation:viewIn .3s var(--ease); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.v-head{ margin:6px 2px 18px; }
.v-head h2{ font-size:27px; font-weight:700; letter-spacing:-.02em; }
.v-head p{ color:var(--sub); font-size:13.5px; margin-top:3px; }
.v-head .vh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ---------- Bento / 磁贴 ---------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tile{
  background:linear-gradient(180deg, var(--hover), transparent 40%), var(--panel);
  border:1px solid var(--line); border-radius:22px; padding:18px;
  grid-column:span 4; min-width:0;
}
@media (min-width:760px){
  .tile.s1{ grid-column:span 1; } .tile.s2{ grid-column:span 2; }
  .tile.s3{ grid-column:span 3; } .tile.s4{ grid-column:span 4; }
}
.tile .t-label,.t-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--dim); font-weight:600; display:flex; align-items:center; gap:7px;
}
.t-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--acc); display:inline-block; flex:none; }
.t-label .dot.warn{ background:var(--warn); } .t-label .dot.err{ background:var(--err); } .t-label .dot.off{ background:var(--dim); }
.big-num{ font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.big-num small{ font-size:14px; color:var(--sub); font-weight:500; letter-spacing:0; margin-left:4px; }
.big-num.sm{ font-size:24px; }
.kv{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; font-size:13.5px; width:100%; }
.kv span{ color:var(--sub); } .kv b{ font-weight:600; font-family:var(--mono); font-size:13px; text-align:right; word-break:break-all; }
.tile-link{ display:block; width:100%; text-align:left; cursor:pointer; transition:border-color .2s, transform .2s var(--ease); font:inherit; color:inherit; }
button.tile:hover{ border-color:var(--line-2); }
button.tile:active{ transform:scale(.99); }
.stat-flex{ display:flex; gap:26px; flex-wrap:wrap; margin:14px 0 8px; }
.stat-cell{ display:flex; flex-direction:column; gap:2px; }
.stat-cap{ color:var(--dim); font-size:12px; font-family:var(--mono); }
/* 磁贴底部动作行：上间距与卡片底内边距（18px）同档、横向间距对齐全站动作行（10px） */
.tile-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* 海报 Hero */
.hero{
  position:relative; overflow:hidden; padding:0; border-radius:26px;
  min-height:380px; display:flex; align-items:flex-end;
  border:1px solid var(--line-2);
  background:linear-gradient(120deg, rgba(var(--amb),.35), var(--panel-3) 55%, var(--panel));
}
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 26%; transition:opacity .8s var(--ease); }
/* 横版位三层图：Backdrop 铺满 / 缺图时 Primary 模糊打底 + 居中完整显示 */
.wide-img{ position:absolute; inset:0; display:block; overflow:hidden; }
.wide-img img{ position:absolute; inset:0; width:100%; height:100%; }
.wide-img .wi-main{ object-fit:cover; object-position:center 26%; }
.wide-img .wi-blur{ object-fit:cover; opacity:0; filter:blur(26px) saturate(130%) brightness(.62); transform:scale(1.28); transition:opacity .4s; }
.wide-img .wi-fg{ object-fit:contain; padding:16px 0; box-sizing:border-box; display:none; filter:drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
.wide-img.no-bd .wi-blur{ opacity:1; }
.wide-img.no-bd .wi-fg{ display:block; }
.wide-img .poster-ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--sub); font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
/* 待机海报墙：竖版海报统一 2:3、等距铺满 Hero，整墙压暗去饱和、纯静态（无动效） */
.poster-wall{ position:absolute; inset:-14% 0; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:0 14px; }
.pw-tile{ position:relative; display:block; overflow:hidden; border-radius:12px; aspect-ratio:2/3; background:linear-gradient(155deg, var(--panel-3), var(--panel-2)); }
.pw-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.78) brightness(.72); }
@media (max-width:759px){ .poster-wall{ grid-template-columns:repeat(4,1fr); } }
.hero-idle-actions{ display:none; gap:10px; }
.hero-idle-actions.on{ display:flex; }
.hero-shade{
  position:absolute; inset:0;
  background:linear-gradient(93deg, var(--hero-shade-1) 26%, var(--hero-shade-2) 58%, var(--hero-shade-3) 100%),
             linear-gradient(0deg, var(--hero-shade-1) 0%, transparent 46%);
}
html[data-theme="light"] .hero-shade{
  background:linear-gradient(93deg, rgba(10,10,10,.88) 26%, rgba(10,10,10,.55) 58%, rgba(10,10,10,.15) 100%),
             linear-gradient(0deg, rgba(10,10,10,.82) 0%, transparent 46%);
}
.hero-in{ position:relative; padding:26px; width:100%; max-width:620px; color:#f4f5f7; }
.hero .live-tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.16em; font-weight:700; color:var(--acc-ink);
  background:var(--acc); border-radius:999px; padding:4px 10px;
}
html[data-theme="light"] .hero .live-tag{ color:#fff; }
.hero .live-tag.idle{ background:rgba(255,255,255,.18); color:#fff; }
.hero h2{ font-size:clamp(28px,5.4vw,42px); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin-top:13px; text-shadow:0 2px 22px rgba(0,0,0,.5); word-break:break-all; }
.hero .ep{ color:rgba(255,255,255,.78); font-size:14.5px; margin-top:5px; font-weight:500; font-family:var(--mono); word-break:break-all; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.88);
  background:rgba(10,12,15,.5); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:4px 9px; border-radius:999px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.chip b{ color:var(--acc); font-weight:600; }
.chip.plain{ background:var(--panel-2); border-color:var(--line); color:var(--sub); white-space:normal; }
.chip.plain b{ color:var(--txt); }
.hero-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:13px;
  padding:10px 16px; font-size:13.5px; font-weight:600;
  background:var(--panel-3); border:1px solid var(--line-2); color:var(--txt);
  transition:transform .15s var(--ease), background .15s, border-color .15s;
}
.btn:active{ transform:scale(.97); }
.btn.primary{ background:var(--acc); border-color:transparent; color:var(--acc-ink); }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.ghost{ background:rgba(12,14,17,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#f4f5f7; border-color:rgba(255,255,255,.2); }
.btn.danger{ color:var(--err); border-color:var(--line-2); background:transparent; }
.btn.sm{ padding:7px 12px; font-size:12.5px; border-radius:10px; }
.btn:disabled{ opacity:.45; cursor:default; }

.pbar{ height:7px; border-radius:7px; background:var(--track); overflow:hidden; }
.pbar i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg, rgb(var(--amb)), var(--acc)); transition:width .7s var(--ease); }
.pbar.warn i{ background:linear-gradient(90deg, var(--warn), var(--warn)); }
.pbar.err i{ background:var(--err); }

.sdot{ width:8px; height:8px; border-radius:50%; background:var(--acc); flex:none; display:inline-block; }
.sdot.warn{ background:var(--warn); } .sdot.err{ background:var(--err); } .sdot.off{ background:var(--dim); }
.svg-chart svg{ width:100%; height:auto; display:block; }
.chart-line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart-area{ fill:var(--acc); opacity:.12; stroke:none; }
.chart-grid{ stroke:var(--line); stroke-width:1; }
.chart-txt{ fill:var(--dim); font-family:var(--mono); font-size:10px; }
/* 每日用量紧凑小图：手机端 14 天数据装在两倍宽轨道里，视口只露 7 天，横滑看更早的日子；
   桌面端（≥900px，见下方媒体覆盖）一排全显 14 天、不横滑。柱高按当日用量线性成比例，
   点柱子在下方读数行看某天数值 */
.daily-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; }
.daily-summary{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.daily-summary .ds{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.daily-summary .ds span{ font-size:11.5px; color:var(--dim); }
.daily-summary .ds b{ font-size:14px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums; }
.daily-scroll{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; margin-top:12px; }
.daily-scroll::-webkit-scrollbar{ display:none; }
.daily-scroll.f-left{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 36px); mask-image:linear-gradient(90deg, transparent, #000 36px); }
.daily-scroll.f-right{ -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.daily-scroll.f-left.f-right{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.daily-track{ display:flex; align-items:stretch; width:200%; height:92px; }
.dcol{ flex:1 1 0; min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:0; padding:0 2px; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.dcol-bar{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; padding-top:9px; }
.dcol-fill{ display:block; width:min(18px,72%); border-radius:4px 4px 2px 2px; background:var(--acc); opacity:.72; position:relative; }
.dcol-fill.zero{ height:3px; background:var(--track-2); opacity:1; border-radius:2px; }
.dcol.today .dcol-fill{ opacity:1; }
.dcol.today .dcol-fill:not(.zero)::after{ content:''; position:absolute; top:-8px; left:50%; margin-left:-2.5px; width:5px; height:5px; border-radius:50%; background:var(--acc); }
.dcol.sel .dcol-fill{ opacity:1; box-shadow:0 0 0 2px var(--acc); }
.dcol-day{ font-size:9.5px; line-height:1; color:var(--dim); font-variant-numeric:tabular-nums; }
.dcol.sel .dcol-day{ color:var(--txt); font-weight:700; }
.dcol:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:6px; }
.daily-readout{ margin-top:11px; font-size:13.5px; color:var(--sub); font-variant-numeric:tabular-nums; }
.daily-readout b{ color:var(--txt); font-weight:700; }
/* 每日图桌面形态（全站桌面断点 ≥900px）：轨道回 100% 宽、14 根柱一排全显，
   容器不再横滑（用户点名桌面端滑不动）；手机端保持上方 200% 轨道 + 横滑不变 */
@media (min-width:900px){
  .daily-scroll{ overflow-x:visible; scroll-snap-type:none; -webkit-mask-image:none; mask-image:none; }
  .daily-track{ width:100%; }
}

/* ---------- 底部 Dock ---------- */
/* 底部居中容器：承接原 Dock 的 fixed 定位，手机时左侧并排独立头像圆钮 .acct-fab
   （钮在 Dock 条外、靠着「首页」一端，两者作为一个整体居中）；桌面 fab 隐藏、只剩 Dock 本体 */
.dock-wrap{
  position:fixed; z-index:40; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:8px; max-width:97vw;
}
.dock{
  display:flex; gap:2px; padding:6px; border-radius:999px; max-width:94vw;
}
.dock button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:57px; padding:8px 10px 6px; border-radius:999px;
  color:var(--sub); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  transition:background .18s, color .18s;
}
.dock button svg{ width:21px; height:21px; }
.dock button.on{ background:var(--hover-2); color:var(--txt); }
.dock button.on svg{ color:var(--acc); }
.dock .dk-wide{ display:none; }
@media (min-width:900px){
  .dock button{ min-width:64px; padding:8px 12px 6px; font-size:11px; }
  .dock .dk-more{ display:none; }
  .dock .dk-wide{ display:flex; }
}

/* ---------- 播放页 ---------- */
.stat-strip{ display:flex; gap:26px; flex-wrap:wrap; margin:2px 2px 18px; }
.stat-strip .ss b{ font-size:23px; font-weight:700; letter-spacing:-.01em; display:block; line-height:1.2; }
.stat-strip .ss span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; color:var(--dim); }
.sess-card{
  display:flex; gap:16px; background:linear-gradient(180deg, var(--hover), transparent 45%), var(--panel);
  border:1px solid var(--line); border-radius:22px; padding:16px; margin-bottom:13px;
  transition:border-color .2s; cursor:pointer; width:100%; text-align:left;
}
.sess-card:hover{ border-color:var(--line-2); }
.poster-wrap{
  width:74px; height:110px; aspect-ratio:2/3; border-radius:13px; flex:none; overflow:hidden; position:relative;
  background:linear-gradient(140deg, rgba(var(--amb),.5), var(--panel-3));
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.poster-wrap img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.poster-wrap .poster-ph{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--sub);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-align:center; padding:6px;
}
.sess-main{ flex:1; min-width:0; }
.sess-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sess-top h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; word-break:break-all; }
.sess-top .ep2{ color:var(--sub); font-size:12.5px; font-family:var(--mono); word-break:break-all; }
.live-eq{ display:inline-flex; gap:2.5px; align-items:flex-end; height:12px; margin-left:auto; }
.live-eq i{ width:3px; background:var(--acc); border-radius:2px; animation:eq 1s infinite ease-in-out; transform-origin:bottom; }
.live-eq i:nth-child(1){ height:6px; } .live-eq i:nth-child(2){ height:11px; animation-delay:.18s; }
.live-eq i:nth-child(3){ height:8px; animation-delay:.36s; } .live-eq i:nth-child(4){ height:12px; animation-delay:.1s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1);} }
.sess-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.sess-actions{ display:flex; gap:8px; margin-top:14px; }
.sec-title{ font-size:16px; font-weight:700; margin:26px 2px 12px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sec-title .st-sub{ font-size:12px; color:var(--dim); font-weight:500; font-family:var(--mono); }
.recent-row{
  display:flex; gap:13px; align-items:center; padding:11px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; margin-bottom:9px; width:100%; text-align:left;
}
.recent-row:hover{ border-color:var(--line-2); }
.recent-row .rt{ font-weight:600; font-size:14px; display:block; word-break:break-all; }
.recent-row .rm{ color:var(--sub); font-size:12px; font-family:var(--mono); word-break:break-all; }
.recent-row .rd{ margin-left:auto; text-align:right; font-family:var(--mono); font-size:12px; color:var(--dim); flex:none; }

/* ---------- 节点页 · 链路图 ---------- */
.chain{
  background:linear-gradient(180deg, var(--hover), transparent 40%), var(--panel);
  border:1px solid var(--line); border-radius:22px; padding:20px; margin-bottom:16px; overflow:hidden;
}
.chain-box{
  flex:none; text-align:center; padding:12px 14px; border-radius:15px;
  background:var(--panel-2); border:1px solid var(--line-2); min-width:96px;
}
.chain-box .cb-t{ font-weight:700; font-size:14px; }
.chain-box .cb-m{ font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:2px; letter-spacing:.06em; }
.chain-box.hub{ border-color:rgba(var(--amb),.5); box-shadow:0 0 24px rgba(var(--amb),.13); }
/* 横向链路：播放器 → 本机网关 → 右侧节点列（竖直主干 + 肘形支线） */
.chain-flow{ display:flex; align-items:center; margin-top:16px; }
.c-link{
  position:relative; flex:1 1 30px; min-width:24px; height:2px; margin:0 12px; border-radius:2px;
  background-color:var(--track-2);
  background-image:linear-gradient(90deg, rgb(var(--amb)) 0 55%, transparent 55% 100%);
  background-size:14px 100%; animation:joinMoveX 2.4s linear infinite;
}
/* 播放时虚线提速；待机保持 2.4s 低速流动 */
.chain-flow.live .c-link{ animation-duration:.8s; }
.c-link::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  border-left:7px solid var(--track-2); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
}
@keyframes joinMoveX{ from{ background-position:0 0; } to{ background-position:14px 0; } }
/* 链路段中徽章：挂在线中点，底色与链路卡面一致把线垫断，胶囊与全站徽章同语言 */
.c-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--sub);
  background:var(--panel); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px;
}
.c-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--dim); flex:none; }
.chain-flow.live .c-badge{ color:var(--txt); }
.chain-flow.live .c-badge::before{ background:var(--acc); box-shadow:0 0 6px rgba(var(--amb),.7); }
/* 播放光点：仅播放态出现，沿线自左向右，速度由 JS 按实时下行速率写入 --dot-dur */
.c-dot{
  display:none; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:var(--acc); box-shadow:0 0 8px rgba(var(--amb),.8);
  animation:dotRun var(--dot-dur,1.6s) linear infinite; pointer-events:none; z-index:1;
}
.c-dot.late{ animation-delay:calc(var(--dot-dur,1.6s) / -2); }
.chain-flow.live .c-dot{ display:block; }
@keyframes dotRun{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:calc(100% - 7px); opacity:0; } }
/* 页面切后台：链路卡内全部动画暂停 */
.chain.paused .c-link, .chain.paused .c-dot, .chain.paused .b-pulse{ animation-play-state:paused; }
.chain-nodes{ position:relative; flex:none; padding-left:30px; min-width:0; }
.chain-nodes::before{
  content:""; position:absolute; left:8px; top:24px; bottom:24px; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, rgba(var(--amb),.55), var(--track-2) 34%, var(--track-2));
  border-radius:2px;
}
.chain-nodes::after{
  content:""; position:absolute; left:0; top:50%; width:8px; height:2px; margin-top:-1px; background:var(--track-2);
}
.chain-nodes.is-empty::before, .chain-nodes.is-empty::after{ display:none; }
.chain-nodes.is-empty{ padding-left:0; }
.hbranch{ position:relative; display:flex; align-items:center; gap:9px; height:48px; min-width:0; }
.hbranch::before{
  content:""; position:absolute; left:-21px; top:50%; margin-top:-1px; width:21px; height:2px;
  background:var(--track-2); border-radius:2px;
}
.hbranch.live::before{ background:rgba(var(--amb),.6); }
.hbranch.err::before{ background:var(--err); opacity:.6; }
.hbranch::after{
  content:""; position:absolute; left:-24px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--dim);
}
.hbranch.live::after{ background:rgb(var(--amb)); box-shadow:0 0 8px rgba(var(--amb),.65); }
.hbranch.err::after{ background:var(--err); }
.b-pulse{
  position:absolute; left:-20px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 7px rgba(61,220,151,.85); opacity:0;
  animation:stubPulse 1.6s linear infinite; pointer-events:none; z-index:1;
}
@keyframes stubPulse{ 0%{ transform:translateX(0); opacity:0; } 18%{ opacity:1; } 82%{ opacity:1; } 100%{ transform:translateX(15px); opacity:0; } }
.hbranch .b-node{
  flex:none; display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:5px 11px; white-space:nowrap;
}
.hbranch .b-node small{ font-family:var(--mono); color:var(--dim); font-weight:500; font-size:11px; }
.b-tag{
  flex:none; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--sub); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:52vw;
}
.b-tag.live{ color:var(--acc); border-color:var(--line-2); background:var(--hover); }
.b-tag.err{ color:var(--err); border-color:var(--line-2); background:var(--hover); }
.b-tag .b-x{ font-weight:700; }
@media (max-width:680px){
  /* 手机链路图：与桌面同一张横向图的小屏形态——播放器 → 网关 → 节点列三段横排，
     整体在卡片内横向滑动（页面本身不横滚）；右缘渐隐提示可滑，滑到底由 JS 撤除。
     禁止回到「上盒子 + 下主干」的竖树结构。 */
  .chain{ padding:16px 14px; }
  .chain-flow{
    flex-direction:row; align-items:center; margin-top:12px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:4px;
    mask-image:linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  .chain-flow::-webkit-scrollbar{ display:none; }
  .chain-flow.scrolled-end{ mask-image:none; -webkit-mask-image:none; }
  .chain-box{ min-width:76px; padding:9px 8px; border-radius:13px; }
  .chain-box .cb-t{ font-size:12.5px; }
  .chain-box .cb-m{ font-size:9.5px; letter-spacing:.02em; }
  /* 手机链路段加长到能挂下中点徽章：整图本就横滑，加长只多滑程、不溢出页面 */
  .c-link{ flex:0 0 132px; min-width:0; margin:0 6px; }
  .c-badge{ font-size:10px; padding:2px 7px; gap:5px; }
  .c-dot{ width:6px; height:6px; margin-top:-3px; }
  .chain-nodes{ padding-left:24px; }
  .chain-nodes::before{ left:6px; }
  .hbranch{ height:42px; gap:6px; }
  .hbranch::before{ left:-17px; width:17px; }
  .hbranch::after{ left:-20px; }
  .b-pulse{ left:-15px; }
  .hbranch .b-node{ padding:4px 9px; font-size:12px; }
  .b-tag{ font-size:10.5px; padding:2px 7px; }
}
@media (prefers-reduced-motion: reduce){
  .c-link{ animation:none; }
  .c-dot{ animation:none; display:none !important; }
  .b-pulse{ animation:none; display:none; }
}
.toolbar{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.toolbar .sp{ flex:1; }

/* ---------- 节点卡 ---------- */
.node-grid{ display:grid; grid-template-columns:1fr; gap:13px; }
@media (min-width:820px){ .node-grid{ grid-template-columns:1fr 1fr; } }
.node-card{
  background:linear-gradient(180deg, var(--hover), transparent 45%), var(--panel);
  border:1px solid var(--line); border-radius:20px; padding:17px;
}
.node-card:hover{ border-color:var(--line-2); }
.nc-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; }
.nc-head:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:8px; }
.nc-chev{ color:var(--dim); font-size:13px; line-height:1; transition:transform .18s ease; }
.node-card.open .nc-chev{ transform:rotate(180deg); color:var(--sub); }
.nc-head h3{ font-size:17px; font-weight:700; }
.nc-head .pfx{
  font-family:var(--mono); font-size:11px; color:var(--acc);
  background:var(--hover); border:1px solid var(--line-2);
  padding:2px 8px; border-radius:999px;
}
.nc-head .h-word{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--acc); }
.nc-head .h-word.warn{ color:var(--warn-text); } .nc-head .h-word.err{ color:var(--err); } .nc-head .h-word.off{ color:var(--dim); }
.nc-target{ font-family:var(--mono); font-size:12px; color:var(--sub); margin-top:7px; word-break:break-all; }
.nc-entryrow{ display:flex; align-items:center; gap:7px; margin-top:7px; flex-wrap:wrap; }
.nc-entryrow .nc-target{ margin-top:0; flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal; }
.nc-entryrow [data-edit]{ margin-left:auto; flex:none; }
.nc-body{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line); animation:ncIn .18s ease; }
@keyframes ncIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
.nc-health-head{ display:flex; align-items:center; gap:9px; margin-top:15px; flex-wrap:wrap; }
.nc-health-head .nc-sec{ font-size:12.5px; font-weight:700; }
.nc-health-head .btn{ margin-left:auto; }
.nc-copy{
  width:27px; height:27px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--line); background:var(--hover); color:var(--sub); cursor:pointer;
  transition:color .15s ease, border-color .15s ease, transform .1s ease;
}
.nc-copy:hover{ color:var(--acc); border-color:var(--line-2); }
.nc-copy:active{ transform:scale(.93); }
.nc-copy:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.nc-lamps{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.lamp{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--hover); border:1px solid var(--line-2); color:var(--sub);
}
.lamp i{ width:6px; height:6px; border-radius:50%; border:1.5px solid var(--dim); background:transparent; flex:none; }
.lamp.on{ color:var(--acc); }
.lamp.on i{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 6px var(--acc); }
html[data-theme="light"] .lamp.on i{ box-shadow:none; }
.health-rows{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.hl-row{ display:flex; flex-direction:column; gap:5px; }
.hl-top{ display:flex; align-items:center; gap:8px; font-size:12.5px; flex-wrap:wrap; }
.hl-top .hl-name{ font-weight:600; }
.hl-top .hl-ms{ font-family:var(--mono); color:var(--sub); font-size:12px; }
.hl-top .hl-avail{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--dim); }
.beats{ display:flex; gap:2px; }
.beats i{ flex:1; height:14px; border-radius:2.5px; background:var(--acc); opacity:.9; min-width:0; }
.beats i.w{ background:var(--warn); } .beats i.e{ background:var(--err); } .beats i.n{ background:var(--track); }
.nc-stats{ display:flex; gap:20px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); flex-wrap:wrap; }
.nc-stats .ns b{ font-size:16px; font-weight:700; display:block; line-height:1.25; }
.nc-stats .ns span{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; color:var(--dim); }
.nc-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; justify-content:flex-end; }
.cache-card{ margin-top:16px; }
.cache-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:12px; align-items:start; }
@media (min-width:820px){ .cache-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
.cache-stats{ display:flex; flex-direction:column; }
.cache-stats .big-num{ margin-top:2px; }
.cache-stats .pbar{ margin-top:11px; }
.cache-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px; }
.cstat{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:9px 11px; min-width:0; }
.cstat span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim); font-weight:600; }
.cstat b{ display:block; margin-top:4px; font-size:15px; font-weight:600; font-family:var(--mono); word-break:break-all; }
.cache-stats #cacheClearBtn{ align-self:flex-start; margin-top:13px; }
.cache-form .sw-row{ padding-top:2px; }
.cache-form .fld{ margin-bottom:0; }
.cache-flds{ margin-top:14px; }
.cache-save-row{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-top:15px; }
.cache-save-row .btn{ flex:none; }
.cache-save-row .hint{ flex:1 1 220px; margin:0; padding-top:1px; }
.bk-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.bk-div{ width:1px; height:20px; background:var(--line-2); flex:none; }
@media (max-width:560px){
  .bk-div{ display:none; }
  /* 备份三钮在窄屏等分整行，保持同高同排基线，不再散落换行 */
  .bk-actions .btn{ flex:1; }
  /* Sheet 表单页脚按钮等分整行 */
  .form-foot .btn{ flex:1; }
}

/* ---------- 页签 / 筛选筹码 ---------- */
.seg{
  display:inline-flex; gap:2px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:13px; padding:3px; flex-wrap:wrap;
}
.seg button{ padding:7px 16px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--sub); transition:all .18s; }
.seg button.on{ background:var(--panel-3); color:var(--txt); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.fchips{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 6px; align-items:center; }
.fchip{
  font-size:12.5px; font-weight:600; color:var(--sub);
  background:var(--chip-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:999px; padding:6px 14px; transition:all .16s;
}
.fchip.on{ background:var(--txt); color:var(--bg); border-color:var(--txt); }
.fchip .cnt{ font-family:var(--mono); font-size:11px; opacity:.65; margin-left:4px; }
.mini-select{
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px;
  padding:7px 10px; font-size:13px;
}
.pager{ display:flex; align-items:center; gap:12px; margin-top:16px; justify-content:center; }

/* ---------- 日志时间线河 ---------- */
.tl{ position:relative; margin-top:14px; padding-left:27px; }
.tl::before{ content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(var(--amb),.55), var(--track) 30%, var(--track)); }
.tl-ev{ position:relative; padding:11px 4px 11px 2px; border-bottom:1px solid var(--line); width:100%; text-align:left; display:block; }
button.tl-ev{ cursor:pointer; }
button.tl-ev:hover .tl-t{ color:var(--acc); }
.tl-ev .tdot{ position:absolute; left:-24px; top:17px; width:11px; height:11px; border-radius:50%; background:var(--dim); border:2.5px solid var(--bg); }
.tl-ev.play .tdot{ background:var(--acc); width:13px; height:13px; left:-25px; top:16px; box-shadow:0 0 12px rgba(61,220,151,.55); }
.tl-ev.err .tdot{ background:var(--err); box-shadow:0 0 12px rgba(251,113,133,.5); }
.tl-ev.slow .tdot{ background:var(--warn); }
.tl-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.tl-main{ flex:1; min-width:0; }
.tl-t{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s; display:block; }
.tl-t.mono{ font-family:var(--mono); font-weight:500; font-size:12.5px; }
.tl-m{ font-size:12px; color:var(--sub); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.tl-time{ font-family:var(--mono); font-size:11.5px; color:var(--dim); flex:none; }
.code{ font-family:var(--mono); font-size:11px; font-weight:700; padding:2.5px 7px; border-radius:6px; flex:none; background:var(--hover); color:var(--sub); }
.code.c2{ background:var(--hover); color:var(--acc); }
.code.c3{ background:var(--hover); color:var(--sub); }
.code.c4{ background:var(--hover); color:var(--warn-text); }
.code.c5{ background:var(--hover); color:var(--err); }
.tl-detail{
  margin:2px 0 12px; padding:12px 14px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line); font-size:13px;
}
.tl-detail .kv b{ font-size:12px; }
.tl-alert{
  margin:14px 0 2px; padding:11px 14px; border-radius:13px; font-size:13px; font-weight:600;
  background:var(--hover); border:1px solid var(--line-2); color:var(--warn-text);
  display:flex; gap:9px; align-items:center;
}

/* ---------- 统计 ---------- */
.chart-wrap{
  background:linear-gradient(180deg, var(--hover), transparent 45%), var(--panel);
  border:1px solid var(--line); border-radius:22px; padding:18px; margin-top:16px;
}
.chart-hint{ font-size:12px; color:var(--dim); margin-top:9px; font-family:var(--mono); }
.multiples{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:14px; }
@media (min-width:820px){ .multiples{ grid-template-columns:repeat(4,1fr); } }
.mult{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:15px; min-width:0; }
.mult .m-num{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:5px; word-break:break-all; }
.mult .m-num small{ font-size:12px; color:var(--sub); font-weight:500; }
.mult .m-sub{ font-size:12px; color:var(--sub); margin-top:3px; font-family:var(--mono); word-break:break-all; }
.target-row{ display:flex; gap:10px; align-items:baseline; padding:9px 2px; border-bottom:1px solid var(--line); font-size:13.5px; flex-wrap:wrap; }
.target-row:last-child{ border-bottom:0; }
.target-row .tr-name{ font-weight:600; word-break:break-all; }
.target-row .tr-meta{ color:var(--sub); font-family:var(--mono); font-size:12px; margin-left:auto; }

/* ---------- 流量 ---------- */
.quota-hero{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.ring-box{ position:relative; width:172px; height:172px; flex:none; margin:0 auto; }
.ring-box svg{ transform:rotate(-90deg); }
.ring-bg{ stroke:var(--track); }
#ringFg{ stroke:var(--acc); transition:stroke-dashoffset .7s var(--ease); }
#ringFg.warn{ stroke:var(--warn); } #ringFg.err{ stroke:var(--err); }
.ring-c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-c b{ font-size:36px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.ring-c span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; color:var(--dim); margin-top:6px; }

/* ---------- 表单 ---------- */
.fld{ margin-bottom:15px; }
.fld label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; color:var(--dim); font-weight:600; margin-bottom:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.fld input[type=text], .fld input[type=password], .fld input[type=number], .fld input[type=url], .fld select, .fld textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line-2); border-radius:12px;
  padding:11px 13px; font-size:14px; outline:none; transition:border-color .15s;
}
.fld textarea{ resize:vertical; min-height:64px; font-family:var(--mono); font-size:12.5px; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ border-color:var(--acc); }
.fld input:disabled{ opacity:.6; }
.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* 单项行整行：行内只有一个字段时占满整行（如额度表单「重置日」），全端一致，不再只挂在 ≤899 块里 */
.fld-row > .fld:only-child{ grid-column:1/-1; }
@media (max-width:560px){ .fld-row{ grid-template-columns:1fr; } }
.sw-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.sw-row:last-child{ border-bottom:0; }
.form-foot{ display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.sw-row .sw-t{ flex:1; min-width:0; }
.sw-row .sw-t b{ font-size:14.5px; font-weight:600; display:block; }
.sw-row .sw-t span{ font-size:12.5px; color:var(--sub); display:block; margin-top:1px; }
.sw{ position:relative; width:47px; height:28px; flex:none; display:inline-block; }
.sw input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; z-index:2; }
.sw .tr{ position:absolute; inset:0; border-radius:999px; background:var(--track-2); transition:background .2s; }
.sw .tr::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .22s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.4); }
.sw input:checked + .tr{ background:var(--acc); }
.sw input:checked + .tr::after{ transform:translateX(19px); }
/* 开关键盘焦点：隐藏 input 收到 :focus-visible 时给可见轨道描焦点环（与全站 .dcol/.nc-copy 同语言：2px var(--acc) + offset 2px，浅深双主题同走变量） */
.sw input:focus-visible + .tr{ outline:2px solid var(--acc); outline-offset:2px; }
.list-row{
  display:flex; align-items:center; gap:11px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:8px;
}
.list-row .lr-t{ flex:1; min-width:0; font-family:var(--mono); font-size:13px; word-break:break-all; }
.list-row .lr-m{ color:var(--dim); font-family:var(--mono); font-size:11.5px; flex:none; }
.list-row .lr-x{ color:var(--dim); padding:5px 9px; border-radius:8px; flex:none; font-weight:700; }
.list-row .lr-x:hover{ color:var(--err); background:var(--hover); }
.add-row{ display:flex; gap:9px; }
.add-row input{ flex:1; background:var(--panel-2); border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; font-size:14px; outline:none; min-width:0; color:var(--txt); }
.add-row input:focus{ border-color:var(--acc); }
.nav-row{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:17px; margin-bottom:11px;
}
.nav-row .nr-ic{ width:40px; height:40px; border-radius:12px; background:var(--panel-3); display:grid; place-items:center; flex:none; color:var(--acc); }
.nav-row .nr-t{ font-weight:700; font-size:15.5px; display:block; }
.nav-row .nr-m{ color:var(--sub); font-size:12.5px; margin-top:1px; display:block; }
.nav-row .nr-chev{ margin-left:auto; color:var(--dim); flex:none; }

/* ---------- 设置子菜单 ---------- */
.set-menu{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.set-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 15px;
  color:var(--txt); transition:border-color .18s, background .18s;
}
.set-item:hover{ border-color:var(--line-2); }
.set-item .si-main{ flex:1; min-width:0; }
.set-item .si-t{ font-weight:700; font-size:15px; display:block; }
.set-item .si-m{ color:var(--sub); font-size:12.5px; margin-top:1px; display:block; }
.set-item .si-chev{ color:var(--dim); flex:none; font-size:19px; line-height:1; }
.set-item.on{ border-color:var(--acc); }
.set-item.on .si-t{ color:var(--acc); }
.set-page{ display:none; }
.set-page.on{ display:block; animation:viewIn .3s var(--ease); }
.set-backbar{ display:none; }
@media (max-width:899px){
  .view[data-view="settings"]:not(.m-sub) .set-body{ display:none; }
  .view[data-view="settings"].m-sub .set-menu{ display:none; }
  .view[data-view="settings"].m-sub .set-backbar{
    display:flex; align-items:center; gap:12px; margin:2px 2px 14px;
  }
  .set-back{
    display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px;
    background:var(--panel); border:1px solid var(--line-2); color:var(--txt);
    font-size:13.5px; font-weight:600; flex:none;
  }
  .set-back-title{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
}
@media (min-width:900px){
  .set-shell{ display:grid; grid-template-columns:218px minmax(0,1fr); gap:14px; align-items:start; }
  .set-menu{ position:sticky; top:96px; margin-bottom:0; gap:7px; }
  .set-item{ border-radius:14px; padding:12px 13px; }
  .set-item .si-chev{ display:none; }
  .set-item.on{ background:linear-gradient(180deg, var(--hover), transparent 60%), var(--panel); }
}

/* ---------- 设置紧凑排版（桌面一屏看全） ---------- */
/* 运行配置：单卡成篇——标题行+状态角标、入口整行、上游双列、代理行为横排开关、
   数值一行三列（框内单位）、单 IP 下行上限独行、保存钮底部左侧 */
.rt-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.rt-head-main{ flex:1; min-width:0; }
.rt-title{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.rt-sub{ color:var(--sub); font-size:12.5px; margin-top:2px; }
.rt-badge{
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--panel-2);
  font-family:var(--mono); font-size:11.5px; color:var(--sub); white-space:nowrap;
}
#runtimeForm .fld{ margin-bottom:11px; }
#runtimeForm textarea{ height:56px; min-height:56px; }
.fhint{ font-size:12px; color:var(--dim); margin-top:6px; }
.form-sect{ display:flex; align-items:center; gap:12px; margin:16px 0 11px; }
.form-sect::before, .form-sect::after{ content:""; flex:1; height:1px; background:var(--line); }
.form-sect span{ font-size:13px; font-weight:700; color:var(--sub); letter-spacing:.04em; flex:none; }
.hsw-row{ display:flex; flex-wrap:wrap; gap:12px 30px; margin-bottom:13px; }
.hsw{ display:flex; align-items:center; gap:10px; }
.hsw-t b{ font-size:14px; font-weight:600; display:block; }
.hsw-t span{ font-size:12px; color:var(--sub); display:block; margin-top:1px; }
.in-unit{ position:relative; }
.fld .in-unit input{ padding-right:48px; }
.in-unit .unit{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:12px; color:var(--dim); pointer-events:none;
}
.in-unit input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.in-unit input[type=number]::-webkit-outer-spin-button,
.in-unit input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
@media (min-width:761px){
  .fld-row.cols3{ grid-template-columns:repeat(3,1fr); }
}
.rt-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rt-actions #rtRestart.attn{ border-color:var(--acc); color:var(--acc); font-weight:700; }
/* 安全子页：桌面双列（名单 | 登录安全），窄屏单列 */
.sec-grid{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }
@media (min-width:1100px){
  .sec-grid{ grid-template-columns:1fr 1fr; }
}
/* ---------- 登录安全状态区：总览行（盾牌+结论+拦截大数字）+ 磁贴格栅 ---------- */
.sec-hero{ display:flex; align-items:center; gap:12px; }
.sec-shield{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--acc); background:var(--hover); border:1px solid var(--line-2);
}
.sec-hero.warn .sec-shield{ color:var(--warn-text); }
.sec-hero-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sec-hero-main b{ font-size:15px; font-weight:700; }
.sec-hero-main span{ font-size:12px; color:var(--dim); line-height:1.45; }
.sec-hero-num{ flex:none; text-align:right; }
.sec-hero-num b{ display:block; font-family:var(--mono); font-size:20px; font-weight:700; line-height:1.15; }
.sec-hero-num span{ font-size:11.5px; color:var(--dim); }
.sec-cells{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.sec-cell{ background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:11px 12px; min-width:0; }
.sec-cell .sc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; }
.sec-cell p{ margin:5px 0 0; font-size:12px; color:var(--sub); line-height:1.45; }
.sc-pill{
  flex:none; font-size:11px; font-weight:600; line-height:1; color:var(--acc);
  background:var(--hover); border:1px solid var(--line-2); border-radius:999px; padding:3px 8px;
}
.sc-pill.off{ color:var(--dim); }
.sc-num{ font-family:var(--mono); font-size:15px; font-weight:700; }
@media (max-width:560px){
  .sec-cells{ gap:7px; }
  .sec-cell{ padding:9px 10px; }
  .sec-hero-num b{ font-size:17px; }
}
/* ---------- 设置紧凑排版（手机端再压一轮；≥900px 桌面完全不受影响） ---------- */
@media (max-width:899px){
  .view[data-view="settings"] .tile{ padding:14px; }
  .view[data-view="settings"] .fld{ margin-bottom:10px; }
  .view[data-view="settings"] .fld label{ margin-bottom:5px; }
  .view[data-view="settings"] .fld input[type=text],
  .view[data-view="settings"] .fld input[type=password],
  .view[data-view="settings"] .fld input[type=number],
  .view[data-view="settings"] .fld input[type=url],
  .view[data-view="settings"] .fld select{ padding:9px 11px; }
  /* 运行配置：数值字段两列网格（覆盖 cols3 的宽屏三列） */
  #runtimeForm .fld{ margin-bottom:9px; }
  #runtimeForm .fld-row.cols3{ grid-template-columns:1fr 1fr; gap:9px; }
  #runtimeForm .fld-row{ gap:9px; }
  #runtimeForm textarea{ height:44px; min-height:44px; }
  /* 代理行为开关改纵向列表：每开关整行、文字左/开关右、行间分隔线（≥900 横排不动） */
  #runtimeForm .form-sect{ margin:12px 0 9px; }
  #runtimeForm .hsw-row{ flex-direction:column; gap:0; margin-bottom:10px; }
  #runtimeForm .hsw{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); }
  #runtimeForm .hsw:last-child{ border-bottom:0; }
  #runtimeForm .hsw .hsw-t{ order:1; flex:1; min-width:0; text-align:left; }
  #runtimeForm .hsw .sw{ order:2; flex:none; }
  #runtimeForm .hsw-t b{ font-size:13.5px; }
  #runtimeForm .hsw-t span{ font-size:11.5px; }
  #runtimeForm .rt-actions{ margin-top:9px; }
  /* 数值网格：6 个普通字段已合并为单个 cols3 网格，手机两列流式排满
     （[重写|DNS]、[连接|响应头]、[全局|单IP并发]），不许任何普通字段整行占满；
     单 IP 下行上限是网格外的独立一行（.rt-speed），不在此列。单项行整行规则已提至 .fld-row 全局段（全端一致）。 */
  /* 表单主提交按钮整行宽，拇指好按且与输入框左右对齐 */
  #runtimeForm .rt-actions .btn, #quotaForm button[type=submit], #pwForm button[type=submit]{ width:100%; }
  #runtimeForm .rt-head{ margin-bottom:10px; }
  /* 其余子页顺扫：安全双块间距、备份/外观组距收紧 */
  .sec-grid{ gap:10px; }
  .view[data-view="settings"] .kv{ padding:4px 0; }
}

/* 操作记录：行距略收紧 */
.audit-row{ padding-top:8px; padding-bottom:8px; }
.audit-row{ display:flex; gap:11px; padding:10px 2px; border-bottom:1px solid var(--line); font-size:13.5px; align-items:baseline; flex-wrap:wrap; }
.audit-row:last-child{ border-bottom:0; }
.audit-row time{ font-family:var(--mono); font-size:11.5px; color:var(--dim); flex:none; }
.audit-row .a-act{ flex:1; min-width:160px; word-break:break-all; }
.audit-row .a-act small{ display:block; color:var(--dim); font-family:var(--mono); font-size:11px; word-break:break-all; }
.audit-row .who{ color:var(--dim); font-size:12px; flex:none; font-family:var(--mono); }
.audit-row .res{ flex:none; font-size:11.5px; font-weight:700; color:var(--acc); }
.audit-row .res.fail{ color:var(--err); }
.backup-row{ display:flex; gap:10px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap; font-size:13.5px; }
.backup-row:last-child{ border-bottom:0; }
.backup-row .b-name{ font-family:var(--mono); font-size:12.5px; word-break:break-all; flex:1; min-width:180px; }
.backup-row .b-meta{ color:var(--sub); font-family:var(--mono); font-size:12px; }
.backup-row .b-actions{ display:flex; gap:7px; margin-left:auto; }

/* ---------- Sheet ---------- */
.scrim{
  position:fixed; inset:0; z-index:55; background:var(--scrim-bg);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.scrim.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; z-index:60; left:0; right:0; bottom:0; max-height:86vh; overflow-y:auto;
  border-radius:26px 26px 0 0; padding:10px 22px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(105%); visibility:hidden;
  transition:transform .34s var(--ease), visibility 0s linear .34s;
}
.sheet.open{ transform:none; visibility:visible; transition:transform .34s var(--ease), visibility 0s; }
.sheet .grab{ width:38px; height:4.5px; border-radius:4px; background:var(--track-2); margin:2px auto 14px; }
.sheet .sh-close{
  position:absolute; top:14px; right:16px; width:31px; height:31px; border-radius:50%;
  background:var(--hover-2); display:grid; place-items:center; color:var(--sub); font-size:14px;
}
.sheet h3{ font-size:20px; font-weight:700; letter-spacing:-.01em; padding-right:40px; word-break:break-all; }
.sheet .sh-sub{ color:var(--sub); font-size:13px; margin-top:3px; font-family:var(--mono); word-break:break-all; }
.sheet .sh-poster-wrap{ width:100%; aspect-ratio:16/9; max-height:300px; border-radius:16px; margin-bottom:16px; overflow:hidden; position:relative; background:linear-gradient(140deg, rgba(var(--amb),.5), var(--panel-3)); }
.sheet .sh-poster-wrap .wide-img .wi-main{ object-position:center; }
@media (min-width:900px){
  .sheet{
    left:auto; right:20px; top:84px; bottom:20px; width:430px; max-height:none;
    border-radius:24px; transform:translateX(112%); padding-top:18px;
  }
  .sheet.open{ transform:none; }
  .sheet .grab{ display:none; }
}
/* ---------- 紧凑确认对话框（纯确认/取消，替代大 Sheet） ---------- */
.confirm-wrap{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:var(--scrim-bg); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.confirm-wrap.open{ display:flex; }
.confirm-card{
  width:min(92vw,360px); border-radius:20px; padding:22px;
  animation:cmdkIn .22s var(--ease);
}
.confirm-card h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.confirm-card p{ color:var(--sub); font-size:13.5px; line-height:1.55; margin-top:9px; }
.confirm-card .cf-actions{ display:flex; gap:9px; margin-top:18px; }
.confirm-card .cf-actions .btn{ flex:1; }

.backup-input-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.backup-input-row input{ flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; font-size:13.5px; outline:none; color:var(--txt); }
.backup-input-row input:focus{ border-color:var(--acc); }
.backup-input-row .lr-x{ color:var(--dim); padding:6px 9px; border-radius:8px; flex:none; font-weight:700; }
.backup-input-row .lr-x:hover{ color:var(--err); background:var(--hover); }

/* ---------- 命令面板 ---------- */
.cmdk-wrap{
  position:fixed; inset:0; z-index:70; display:none;
  background:var(--scrim-bg); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:11vh 14px 14px; align-items:flex-start; justify-content:center;
}
.cmdk-wrap.open{ display:flex; }
.cmdk{
  width:min(94vw,580px); border-radius:22px; overflow:hidden;
  animation:cmdkIn .22s var(--ease); max-height:74vh; display:flex; flex-direction:column;
}
@keyframes cmdkIn{ from{ opacity:0; transform:translateY(-12px) scale(.98);} to{ opacity:1; transform:none;} }
.cmdk input{
  width:100%; background:transparent; border:0; outline:none; padding:18px 20px 14px;
  font-size:17px; color:var(--txt); border-bottom:1px solid var(--line);
}
.cmdk input::placeholder{ color:var(--dim); }
.cmdk-list{ overflow-y:auto; padding:8px; }
.cmdk-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border-radius:12px; font-size:14px;
}
.cmdk-item .ci-ic{ width:30px; height:30px; border-radius:9px; background:var(--hover-2); display:grid; place-items:center; flex:none; color:var(--sub); font-size:13px; }
.cmdk-item .ci-t{ flex:1; min-width:0; }
.cmdk-item .ci-t b{ font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item .ci-t span{ font-size:12px; color:var(--dim); font-family:var(--mono); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item .ci-k{ font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:.1em; flex:none; }
.cmdk-item.sel{ background:var(--hover-2); }
.cmdk-item mark{ background:none; color:var(--acc); font-weight:700; }
.cmdk-empty{ padding:26px; text-align:center; color:var(--dim); font-size:13.5px; }

/* ---------- 手机一屏化收紧 + 顺扫（≤759px，桌面不受影响） ---------- */
@media (max-width:759px){
  .hero{ min-height:290px; }
  .hero-in{ padding:20px; }
  .tile:not(.hero){ padding:16px; }
  .stat-strip{ gap:18px 22px; }
  .sec-title{ margin-top:20px; }
  /* 数据页周期行：筹码一行、导出行（标签+下拉+按钮）换行后整齐成第二行 */
  #periodChips > span{ flex:0 0 100% !important; height:0; }
  #periodChips .mini-select{ flex:1 1 120px; min-width:0; }
  #periodChips #csvBtn{ flex:none; }
}
@media (max-width:380px){
  /* 320px 宽总宽复算：5 钮×52 + gap 8 + Dock 内边距 12 = 280，再 + 头像钮 48 + 钮距 8 = 336 > 320 溢出；
     钮收紧到 47 后总宽 = 235+8+12 + 48+8 = 311 ≤ 320。390 宽（走 57 档：361 ≤ 390）与桌面均不受影响 */
  .dock button{ min-width:47px; padding:8px 6px 6px; }
  /* 节点页图片缓存三格小统计在 360 宽下收紧内边距保可读 */
  .cache-stat-grid{ gap:7px; }
  .cstat{ padding:8px 9px; }
}

/* ---------- 提示 / 杂项 ---------- */
.toast{
  position:fixed; z-index:80; left:50%; transform:translate(-50%, 16px);
  bottom:calc(96px + env(safe-area-inset-bottom));
  border-radius:999px; padding:11px 20px; font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none; transition:all .3s var(--ease); white-space:nowrap; max-width:92vw;
  overflow:hidden; text-overflow:ellipsis;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast b{ color:var(--acc); }
.empty-box{ text-align:center; padding:34px 16px; color:var(--dim); font-size:13.5px; }
.empty-box.slim{ padding:11px 14px; font-size:13px; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* 右下角常驻版本标（Beam + 版本号，低调小字，不挡 Dock 与操作） */
.ver-badge{
  position:fixed; z-index:39; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--dim);
  pointer-events:none; user-select:none; white-space:nowrap;
}
/* 手机：版本标不再 fixed 浮压内容，落到页面流末尾做静态一行（桌面保持
   右下角 fixed 不变）。 */
@media (max-width:899px){
  .ver-badge{
    position:static;
    display:block;
    /* 底部留白越过 fixed 的 Dock，滚到底也能看见这一行 */
    margin:22px 2px calc(96px + env(safe-area-inset-bottom));
    text-align:right;
    white-space:normal;
  }
}
/* 操作记录条数注记（refreshAudit 渲染满 50 条后附一行小字） */
.audit-note{ padding:10px 2px 2px; font-size:11.5px; color:var(--dim); }