/* ============================================================================
   Squad44控制面板 · Field Ops 主题层  (s44-theme.css v11)
   ----------------------------------------------------------------------------
   这一层是全新写的，不是在原样式上打补丁改几个色号。设计取向来自二战战场
   作战板的视觉语言：石墨灰底、仪表青作为操作色、黄铜作为唯一强调色、
   45 度制图斜线作纹理、卡片右上角切角像折起的图纸角。

   与原皮肤的可辨识差异（不是换色号那种"差不多"）：
     · 色相族      蓝 #2563eb  →  青 #0E7C86 / 深色态 #2AA9B4，强调色黄铜 #C98A2E
     · 圆角        16 / 22px   →  10 / 8px，主卡右上角 14px 切角
     · 侧栏选中态  整块填充胶囊 →  左侧 3px 竖条 + 极淡底色
     · 卡片分隔    大面积阴影   →  1px 描边 + 顶部 2px 双色标尺
     · 纹理        浮动圆点     →  45° 制图斜线（只在品牌区和空态出现）
     · 数字        比例字形     →  等宽表格数字 tabular-nums + 字距
     · 侧栏 264px → 236px，顶栏 66px → 60px，整体信息密度更高

   加载位置：由 _brand.php 注入到 </head> 前，永远排在 icfk_pro.css、
   ops-home.css 和各页面内联 <style> 之后，所以同权重时本层生效。
   对原表里带 !important 的规则，这里同样用 !important 压过去。

   性能约定（全文遵守）：
     · 动画只碰 transform / opacity，绝不动 width/height/top/left
     · 悬浮阴影用 ::after 层的 opacity 过渡，不过渡 box-shadow 本身（避免重绘）
     · 长列表、折叠区用 content-visibility:auto + contain-intrinsic-size
     · will-change 由 JS 在动画前后加/摘，样式表里不常驻
     · 全部动效在 prefers-reduced-motion 下自动降级为无动画
   ========================================================================= */

/* ---------------------------------------------------------------- 1. 令牌 */
:root{
  /* —— 品牌基色 —— */
  --s44-graphite:#0B1416;   /* 深色画布：冷石墨，不是深海军蓝 */
  --s44-slate:#12303A;      /* 侧栏 / 品牌块 */
  --s44-teal:#0E7C86;       /* 操作色（浅色态） */
  --s44-teal-deep:#0A5C64;
  --s44-teal-lit:#2AA9B4;   /* 操作色（深色态） */
  --s44-brass:#C98A2E;      /* 唯一强调色：黄铜 */
  --s44-brass-lit:#E0A845;
  --s44-bone:#EDF0EE;       /* 浅色画布：带一点绿灰，不是蓝白 */
  --s44-ink:#101A1C;

  /* —— 语义色 —— */
  --s44-ok:#2E7D5B; --s44-warn:#C98A2E; --s44-bad:#B3453B; --s44-info:#0E7C86;

  /* —— 几何 —— */
  --s44-r:10px; --s44-r-sm:8px; --s44-r-lg:12px; --s44-notch:14px;

  /* —— 缓动 —— */
  --s44-ease:cubic-bezier(.2,.7,.2,1);      /* 主缓动：起步快、收尾稳 */
  --s44-ease-in:cubic-bezier(.5,0,.9,.3);
  --s44-spring:cubic-bezier(.34,1.28,.64,1);
  --s44-t-fast:140ms; --s44-t:220ms; --s44-t-slow:320ms;

  /* —— 字体 —— */
  --s44-font:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei UI",
             "Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s44-mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",
             Consolas,"Liberation Mono",monospace;

  /* —— 覆盖原表的 --pro-* / --v5-* 令牌 API（浅色态）—— */
  --primary:#0E7C86; --primary-dark:#0A5C64; --primary-light:#5FC0C8; --primary-rgb:14,124,134;
  --pro-bg:#EDF0EE; --pro-card:#FFFFFF; --pro-card-2:#F5F7F6; --pro-line:#DFE5E3;
  --pro-text:#101A1C; --pro-muted:#4A5B5E; --pro-subtle:#7C8D90;
  --pro-sidebar:#12303A; --pro-sidebar-2:#0E2630;
  --pro-sidebar-text:#DCE7E7; --pro-sidebar-muted:#7F979A;
  --pro-radius:10px; --pro-radius-sm:8px;
  --pro-shadow:0 1px 2px rgba(16,26,28,.05),0 10px 22px -16px rgba(16,44,48,.24);
  --pro-shadow-lg:0 1px 2px rgba(16,26,28,.05),0 20px 40px -24px rgba(16,44,48,.30);
  --sidebar-width:236px; --sidebar-collapsed:74px; --topbar-height:60px;
  --v5-canvas:#E7EBE9; --v5-surface:#FFFFFF; --v5-surface-2:#F5F7F6;
  --v5-line:#DFE5E3; --v5-line-strong:#CBD5D2;
  --v5-radius-window:12px; --v5-radius-panel:10px;
  --v5-shadow:0 1px 2px rgba(16,26,28,.05),0 16px 34px -22px rgba(16,44,48,.28);
  --v5-shadow-soft:0 1px 2px rgba(16,26,28,.05),0 8px 20px -16px rgba(16,44,48,.20);

  /* 业务页内联样式里用到的通用名 */
  --success:#2E7D5B; --danger:#B3453B; --warning:#C98A2E; --info:#0E7C86;
  --success-rgb:46,125,91; --danger-rgb:179,69,59; --warning-rgb:201,138,46;
  --radius:10px; --radius-sm:8px; --radius-lg:12px;
}

/* —— 深色态 —— */
html[data-theme="dark"]{
  --primary:#2AA9B4; --primary-dark:#1B8B95; --primary-light:#6FD3DB; --primary-rgb:42,169,180;
  --pro-bg:#0B1416; --pro-card:#111E21; --pro-card-2:#16262A; --pro-line:#22383D;
  --pro-text:#E4ECEC; --pro-muted:#9DB0B2; --pro-subtle:#6C7E80;
  --pro-sidebar:#0E2126; --pro-sidebar-2:#0A181C;
  --pro-sidebar-text:#DCE7E7; --pro-sidebar-muted:#6C7E80;
  --pro-shadow:0 1px 2px rgba(0,0,0,.45),0 14px 30px -18px rgba(0,0,0,.65);
  --pro-shadow-lg:0 1px 2px rgba(0,0,0,.45),0 24px 50px -24px rgba(0,0,0,.75);
  --v5-canvas:#070F11; --v5-surface:#111E21; --v5-surface-2:#16262A;
  --v5-line:#22383D; --v5-line-strong:#2E4A50;
  --bg:#0B1416; --bg-card:#111E21; --bg-elevated:#16262A; --surface:#111E21;
  --text:#E4ECEC; --text-muted:#9DB0B2; --text-secondary:#9DB0B2; --border:#22383D;
  --sidebar-bg:#0E2126; --sidebar-brand-bg:#12303A;
  --sidebar-text:#DCE7E7; --sidebar-text-muted:#6C7E80;
  --sidebar-hover:#16292F; --sidebar-active-bg:rgba(42,169,180,.14); --sidebar-active-text:#5FC0C8;
  --success:#3E9C72; --danger:#D2685E; --warning:#E0A845; --info:#2AA9B4;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#EDF0EE; --bg-card:#FFFFFF; --bg-elevated:#FFFFFF; --surface:#FFFFFF;
  --text:#101A1C; --text-muted:#4A5B5E; --text-secondary:#4A5B5E; --border:#DFE5E3;
  --sidebar-bg:#FFFFFF; --sidebar-brand-bg:#12303A;
  --sidebar-text:#2B3B3E; --sidebar-text-muted:#7C8D90;
  --sidebar-hover:#F0F4F3; --sidebar-active-bg:rgba(14,124,134,.09); --sidebar-active-text:#0A5C64;
}
/* 护眼态：沿用原表的 eye 主题名，配色改成暖麻纸 */
html[data-theme="eye"]{
  --pro-bg:#F1EEE4; --pro-card:#FFFCF6; --pro-card-2:#F7F2E7; --pro-line:#E2DBCB;
  --pro-text:#282A26; --pro-muted:#6F6E63; --pro-subtle:#9A968A;
  --primary:#39705C; --primary-dark:#2A5747; --primary-rgb:57,112,92;
  --v5-canvas:#EBE6D9; --v5-surface:#FFFCF6; --v5-surface-2:#F7F2E7;
  --v5-line:#E2DBCB; --v5-line-strong:#D5CCB8;
}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --primary:#2AA9B4; --primary-dark:#1B8B95; --primary-rgb:42,169,180;
    --bg:#0B1416; --bg-card:#111E21; --bg-elevated:#16262A; --surface:#111E21;
    --text:#E4ECEC; --text-muted:#9DB0B2; --border:#22383D;
    --pro-bg:#0B1416; --pro-card:#111E21; --pro-line:#22383D;
    --pro-text:#E4ECEC; --pro-muted:#9DB0B2;
    color-scheme:dark;
  }
}

/* ------------------------------------------------------------- 2. 基础排印 */
html,body{font-family:var(--s44-font)!important}
body{background:var(--pro-bg)!important;color:var(--pro-text)!important;
     letter-spacing:.002em}

/* 数字一律等宽对齐：表格里数字不再左右跳动，这是本主题最实用的一处差异 */
.stat-value,.stat-num,.kpi-value,.metric-value,.num,.mono,
table td,table th,.badge,.tag,.chip,.pill,
input[type="number"],time,.time,.date,.count,.percent{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"cv01" 1;
}
.stat-value,.kpi-value,.metric-value,.num-lg{
  font-family:var(--s44-mono)!important;
  letter-spacing:-.012em;font-weight:650;
}

/* 段落标签用制图小标签：小号、全大写、宽字距 */
.eyebrow,.section-label,.card-eyebrow,.s44-eyebrow{
  font-family:var(--s44-mono);font-size:10.5px;line-height:1.4;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pro-subtle);
}

/* 选中文本用黄铜，是全站唯一一处高饱和 */
::selection{background:rgba(201,138,46,.28);color:inherit}

/* 滚动条：细、无轨道，hover 才变深 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--pro-subtle) 34%,transparent);
  border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--primary) 55%,transparent);
  background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--pro-subtle) 34%,transparent) transparent}

/* 键盘焦点：所有可聚焦元素统一一个青色描边环，无障碍底线 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary)!important;outline-offset:2px!important;
  border-radius:var(--s44-r-sm);
}

/* -------------------------------------------------------------- 3. 侧边栏 */
.sidebar{background:var(--sidebar-bg)!important;border-right:1px solid var(--pro-line)!important;
  box-shadow:none!important}

/* 品牌区：45° 制图斜线纹理取代原来的浮动圆点 */
.sidebar-brand{
  background:var(--sidebar-brand-bg)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  padding:16px 18px!important;position:relative;overflow:hidden;
}
.sidebar-brand::before{
  content:""!important;position:absolute!important;inset:0!important;
  background:repeating-linear-gradient(45deg,transparent 0 11px,
            rgba(220,231,231,.055) 11px 12px)!important;
  opacity:1!important;pointer-events:none;
}
/* 品牌区底部黄铜标尺：本主题的记忆点之一 */
.sidebar-brand::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--s44-teal-lit) 0%,var(--s44-brass) 58%,transparent 100%);
  opacity:.9;
}
/* 原来的浮动圆点装饰整块隐藏，纹理换成斜线 */
.sidebar-brand .brand-svg-bg{display:none!important}

.sidebar-brand .brand-logo{
  border-radius:9px!important;
  background:linear-gradient(160deg,rgba(42,169,180,.34),rgba(42,169,180,.10))!important;
  border:1px solid rgba(160,215,220,.26)!important;color:#BFE6EA!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.sidebar-brand .brand-text{
  font-weight:700!important;letter-spacing:.04em!important;color:#F0F6F6!important;
}
.sidebar-brand .brand-subtitle{
  font-family:var(--s44-mono)!important;font-size:10.5px!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  color:#7FB3B8!important;margin-top:3px!important;
}

/* 导航项：选中态改成左侧 3px 竖条，不再是整块胶囊 */
.nav-item,.nav-link,.menu-item{
  border-radius:0 var(--s44-r-sm) var(--s44-r-sm) 0!important;
  margin:1px 10px 1px 0!important;position:relative;
  transition:background var(--s44-t-fast) var(--s44-ease),
             color var(--s44-t-fast) var(--s44-ease),
             transform var(--s44-t-fast) var(--s44-ease)!important;
}
.nav-item::before,.nav-link::before,.menu-item::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--primary);border-radius:0 2px 2px 0;
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform var(--s44-t) var(--s44-spring);
}
.nav-item:hover,.nav-link:hover,.menu-item:hover{
  background:var(--sidebar-hover)!important;transform:translateX(2px)!important;
}
.nav-item.active,.nav-link.active,.menu-item.active,
.nav-item[aria-current="page"],.nav-link[aria-current="page"]{
  background:var(--sidebar-active-bg)!important;color:var(--sidebar-active-text)!important;
  font-weight:600!important;
}
.nav-item.active::before,.nav-link.active::before,.menu-item.active::before,
.nav-item[aria-current="page"]::before,.nav-link[aria-current="page"]::before{
  transform:scaleY(1);
}
.nav-item.active i,.nav-link.active i{color:var(--sidebar-active-text)!important}

/* 分组标题 */
.nav-group-title,.nav-section-title,.menu-group-title{
  font-family:var(--s44-mono)!important;font-size:10px!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  color:var(--sidebar-text-muted)!important;padding:16px 18px 6px!important;
}

/* 折叠态 */
.sidebar.collapsed .nav-item,.sidebar.collapsed .nav-link{
  margin-right:10px!important;justify-content:center!important;
}
.sidebar.collapsed .sidebar-brand::after{left:14px;right:14px}

/* ---------------------------------------------------------------- 4. 顶栏 */
.topbar,.top-bar,.pro-topbar{
  background:color-mix(in srgb,var(--pro-card) 88%,transparent)!important;
  border-bottom:1px solid var(--pro-line)!important;
  box-shadow:none!important;
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
}
.page-title{font-weight:680!important;letter-spacing:-.008em!important}
.page-context,.page-desc{color:var(--pro-muted)!important;font-size:12.5px!important}

/* 顶栏底部一根 1px 青铜渐变线，滚动时才出现（由 JS 加 .s44-scrolled） */
.topbar::after,.pro-topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--primary),var(--s44-brass) 55%,transparent);
  opacity:0;transition:opacity var(--s44-t) var(--s44-ease);
}
body.s44-scrolled .topbar::after,body.s44-scrolled .pro-topbar::after{opacity:.75}

/* ---------------------------------------------------------------- 5. 卡片 */
.card,.stat-card,.panel-card,.server-info-card,.pro-card,.v5-panel,.box{
  background:var(--pro-card)!important;
  border:1px solid var(--pro-line)!important;
  border-radius:var(--s44-r)!important;
  box-shadow:var(--pro-shadow)!important;
  position:relative;
  contain:layout style;                     /* 卡片内部布局变化不外溢，减少重排范围 */
  transition:transform var(--s44-t) var(--s44-ease),
             border-color var(--s44-t) var(--s44-ease)!important;
}
/* 悬浮阴影用独立图层的 opacity 过渡，不过渡 box-shadow 本身 */
.card::after,.stat-card::after,.pro-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 14px 30px -18px rgba(16,44,48,.42);
  opacity:0;transition:opacity var(--s44-t) var(--s44-ease);
}
html[data-theme="dark"] .card::after,
html[data-theme="dark"] .stat-card::after{box-shadow:0 16px 34px -18px rgba(0,0,0,.72)}
.card:hover,.stat-card:hover,.pro-card:hover{
  transform:translateY(-2px)!important;
  border-color:color-mix(in srgb,var(--primary) 34%,var(--pro-line))!important;
}
.card:hover::after,.stat-card:hover::after,.pro-card:hover::after{opacity:1}

/* 签名元素：右上角切角，像折起来的图纸角。
   clip-path 会连子元素一起裁掉，所以只给 KPI 小卡用（它们内部不会弹菜单）。
   大卡片要切角就手动加 .s44-notch，前提是里面没有会溢出的下拉、气泡、日期选择器。
   某张 KPI 卡后来加了"更多"菜单被裁了？给它加 .no-notch 即可。 */
.stat-card:not(.no-notch),.card.s44-notch{
  clip-path:polygon(0 0,calc(100% - var(--s44-notch)) 0,100% var(--s44-notch),100% 100%,0 100%);
}
/* 切角处补一小片黄铜三角，让折角看得出来 */
.stat-card:not(.no-notch)::before,.card.s44-notch::before{
  content:"";position:absolute;top:0;right:0;width:var(--s44-notch);height:var(--s44-notch);
  background:linear-gradient(225deg,color-mix(in srgb,var(--s44-brass) 55%,transparent) 0%,
             transparent 72%);
  pointer-events:none;
}

/* 卡头：底部 2px 双色标尺，取代原来的大留白 */
.card-header,.card-hd,.panel-header{
  border-bottom:1px solid var(--pro-line)!important;
  padding-bottom:12px!important;margin-bottom:14px!important;position:relative;
}
.card-header::after,.card-hd::after,.panel-header::after{
  content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--s44-brass));border-radius:2px;
}
.card-title,.card-header h3,.panel-header h3{
  font-weight:650!important;letter-spacing:-.005em!important;font-size:15px!important;
}

/* 统计卡里的数字：等宽 + 负字距，和标签拉开层级 */
.stat-card .stat-value,.stat-card .value{
  font-family:var(--s44-mono)!important;font-size:26px!important;font-weight:650!important;
  letter-spacing:-.02em!important;line-height:1.15!important;
}
.stat-card .stat-label,.stat-card .label{
  font-family:var(--s44-mono)!important;font-size:10.5px!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  color:var(--pro-subtle)!important;
}

/* ---------------------------------------------------------------- 6. 按钮 */
.btn,.button,button.btn,.pro-btn{
  border-radius:var(--s44-r-sm)!important;
  font-weight:600!important;letter-spacing:.01em!important;
  position:relative;overflow:hidden;                  /* 承载水波纹 */
  transition:transform var(--s44-t-fast) var(--s44-ease),
             background-color var(--s44-t-fast) var(--s44-ease),
             border-color var(--s44-t-fast) var(--s44-ease)!important;
}
/* 下拉触发器不能裁：菜单如果是按钮的子元素，overflow:hidden 会把它整个吃掉 */
.btn.dropdown-toggle,.btn[data-toggle],.btn[data-bs-toggle],.btn.has-menu,.btn.no-clip{
  overflow:visible!important;
}
.btn.dropdown-toggle .s44-ripple,.btn.no-clip .s44-ripple{display:none}
.btn:hover,.button:hover,.pro-btn:hover{transform:translateY(-1px)!important}
.btn:active,.button:active,.pro-btn:active{transform:translateY(0) scale(.985)!important}
.btn-primary,.btn.primary,.pro-btn.primary{
  background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;
}
.btn-primary:hover,.btn.primary:hover{background:var(--primary-dark)!important}
.btn-warning,.btn.warning{background:var(--s44-brass)!important;border-color:var(--s44-brass)!important;color:#231703!important}
/* 这几条必须连 color 一起写。只覆盖 background 的话，页面内联样式里那些
   "浅底 + 同色文字"的写法（例如 .btn-danger{background:rgba(239,68,68,.1);color:var(--danger)}）
   会变成红底红字，按钮看上去就是一个没有内容的色块 —— 图标和文字一起隐形。 */
.btn-danger,.btn.danger{background:var(--s44-bad)!important;border-color:var(--s44-bad)!important;color:#fff!important}
.btn-success,.btn.success{background:var(--s44-ok)!important;border-color:var(--s44-ok)!important;color:#fff!important}
.btn-info,.btn.info{background:var(--s44-info)!important;border-color:var(--s44-info)!important;color:#fff!important}
.btn-danger:hover,.btn-success:hover,.btn-info:hover,.btn-warning:hover{filter:brightness(1.08)}
/* 图标按钮：图标万一没渲染出来也要保住可点面积，不要塌成一条缝 */
.btn-icon,.btn.btn-icon{min-width:34px;min-height:34px}
.btn-icon.btn-xs{min-width:28px;min-height:28px}
.btn-ghost,.btn-secondary,.btn.ghost{
  background:transparent!important;border:1px solid var(--pro-line)!important;
  color:var(--pro-text)!important;
}
.btn-ghost:hover,.btn-secondary:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--pro-line))!important;
  background:color-mix(in srgb,var(--primary) 7%,transparent)!important;
}
.btn:disabled,.btn.disabled{opacity:.5!important;transform:none!important;cursor:not-allowed}

/* 水波纹（由 s44-motion.js 注入 span.s44-ripple） */
.s44-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.26;transform:scale(0);
  animation:s44-ripple 520ms var(--s44-ease) forwards;
}
@keyframes s44-ripple{to{transform:scale(2.6);opacity:0}}

/* ---------------------------------------------------------------- 7. 表单 */
input,select,textarea,.form-control,.input{
  border-radius:var(--s44-r-sm)!important;
  border:1px solid var(--pro-line)!important;
  background:var(--pro-card-2)!important;color:var(--pro-text)!important;
  font-family:inherit!important;
  transition:border-color var(--s44-t-fast) var(--s44-ease),
             box-shadow var(--s44-t-fast) var(--s44-ease)!important;
}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)!important;
  outline:none!important;
}
input::placeholder,textarea::placeholder{color:var(--pro-subtle)!important}
label,.form-label{font-size:12.5px!important;font-weight:600!important;color:var(--pro-muted)!important}

/* 开关 */
.switch,.toggle{border-radius:99px!important}
.switch input:checked+.slider,.toggle.on{background:var(--primary)!important}

/* ---------------------------------------------------------------- 8. 表格 */
table,.table{border-collapse:separate!important;border-spacing:0!important}
table thead th,.table thead th{
  background:var(--pro-card-2)!important;
  border-bottom:1px solid var(--pro-line)!important;
  font-family:var(--s44-mono)!important;font-size:10.5px!important;font-weight:600!important;
  letter-spacing:.13em!important;text-transform:uppercase!important;
  color:var(--pro-subtle)!important;
}
/* 表头吸顶只在"表格自己有滚动容器"时开。
   不加这个限定的话，sticky 会去贴最近的滚动祖先（往往是整个页面），
   表头就会在页面中间浮着，比不吸顶还糟。 */
.table-wrap thead th,.table-scroll thead th,.table-responsive thead th,
[data-sticky-head] thead th{position:sticky;top:0;z-index:2}
table tbody tr,.table tbody tr{
  transition:background var(--s44-t-fast) var(--s44-ease)!important;
}
table tbody tr:nth-child(even){background:color-mix(in srgb,var(--pro-card-2) 55%,transparent)}
table tbody tr:hover,.table tbody tr:hover{
  background:color-mix(in srgb,var(--primary) 6%,transparent)!important;
}
table tbody td,.table tbody td{border-bottom:1px solid var(--pro-line)!important}

/* 长表格：视口外的行不排版不绘制。行高按 44px 预估，避免滚动条跳动 */
.table-wrap tbody tr,.data-table tbody tr,.list-body>*{
  content-visibility:auto;
  contain-intrinsic-size:auto 44px;
}

/* ---------------------------------------------------- 9. 徽章 / 标签 / 状态 */
.badge,.tag,.chip,.pill,.status{
  border-radius:5px!important;                 /* 原来是全圆胶囊，这里改成方角小标 */
  font-family:var(--s44-mono)!important;font-size:11px!important;font-weight:600!important;
  letter-spacing:.06em!important;padding:2px 7px!important;
  border:1px solid transparent!important;
}
.badge-success,.tag.ok,.status.online{
  background:color-mix(in srgb,var(--s44-ok) 14%,transparent)!important;
  color:var(--s44-ok)!important;border-color:color-mix(in srgb,var(--s44-ok) 30%,transparent)!important;
}
.badge-warning,.tag.warn{
  background:color-mix(in srgb,var(--s44-brass) 16%,transparent)!important;
  color:var(--s44-brass)!important;border-color:color-mix(in srgb,var(--s44-brass) 34%,transparent)!important;
}
.badge-danger,.tag.bad,.status.offline{
  background:color-mix(in srgb,var(--s44-bad) 13%,transparent)!important;
  color:var(--s44-bad)!important;border-color:color-mix(in srgb,var(--s44-bad) 30%,transparent)!important;
}
.badge-info,.tag.info{
  background:color-mix(in srgb,var(--primary) 13%,transparent)!important;
  color:var(--primary)!important;border-color:color-mix(in srgb,var(--primary) 30%,transparent)!important;
}

/* 在线小圆点：呼吸只动 opacity，不动 box-shadow */
.dot-online,.status-dot.online{
  position:relative;background:var(--s44-ok)!important;border-radius:50%!important;
}
.dot-online::after,.status-dot.online::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--s44-ok);opacity:.5;
  animation:s44-breathe 2.4s var(--s44-ease) infinite;
}
@keyframes s44-breathe{0%,100%{opacity:.15;transform:scale(.86)}50%{opacity:.55;transform:scale(1)}}

/* --------------------------------------------------- 10. 弹窗 / 抽屉 / 提示 */
.modal,.modal-content,.dialog,.pro-modal{
  border-radius:var(--s44-r-lg)!important;
  border:1px solid var(--pro-line)!important;
  box-shadow:0 28px 70px -26px rgba(10,32,36,.55)!important;
}
.modal-overlay,.overlay{
  background:color-mix(in srgb,var(--s44-graphite) 62%,transparent)!important;
  backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1);
}
.modal.show,.modal-content.show{animation:s44-modal-in var(--s44-t-slow) var(--s44-spring) both}
@keyframes s44-modal-in{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}

.toast,.toast-item{
  border-radius:var(--s44-r-sm)!important;
  border-left:3px solid var(--primary)!important;
  box-shadow:0 14px 32px -18px rgba(10,32,36,.5)!important;
  animation:s44-toast-in var(--s44-t) var(--s44-spring) both;
}
.toast.success,.toast-success{border-left-color:var(--s44-ok)!important}
.toast.warning,.toast-warning{border-left-color:var(--s44-brass)!important}
.toast.error,.toast-danger{border-left-color:var(--s44-bad)!important}
@keyframes s44-toast-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* --------------------------------------------------- 11. 页面切换 / 进场动效 */
/* 内容区换页：整体上浮淡入，只用 transform+opacity */
.s44-view-enter{animation:s44-view-in 280ms var(--s44-ease) both}
@keyframes s44-view-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* 卡片编队进场：由 JS 设 --i，最多排 8 个，之后不再延迟，避免长列表拖尾 */
.s44-stagger>*{animation:s44-view-in 300ms var(--s44-ease) both;
  animation-delay:calc(var(--i,0)*55ms)}

/* 滚动揭示：进入视口才播，一次性 */
.s44-reveal{opacity:0;transform:translate3d(0,14px,0)}
.s44-reveal.in{opacity:1;transform:none;
  transition:opacity 380ms var(--s44-ease),transform 380ms var(--s44-ease)}

/* 顶部加载进度条：青色主体 + 黄铜尖端 */
#s44-progress{
  position:fixed;left:0;top:0;height:2px;z-index:2147483000;pointer-events:none;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--primary),var(--s44-brass));
  box-shadow:0 0 8px color-mix(in srgb,var(--s44-brass) 55%,transparent);
  transition:transform 200ms var(--s44-ease),opacity 220ms var(--s44-ease);
}
#s44-progress.done{opacity:0}

/* 骨架屏：单条 background-position 动画，成本低于多层渐变 */
.s44-skeleton{
  background:linear-gradient(100deg,var(--pro-card-2) 30%,
             color-mix(in srgb,var(--pro-line) 60%,var(--pro-card-2)) 50%,var(--pro-card-2) 70%);
  background-size:220% 100%;border-radius:var(--s44-r-sm);
  animation:s44-shimmer 1.25s linear infinite;
}
@keyframes s44-shimmer{to{background-position:-120% 0}}

/* 数字滚动时压住基线抖动 */
.s44-counting{font-variant-numeric:tabular-nums;will-change:contents}

/* ------------------------------------------------------------ 12. 空态 */
.empty,.empty-state,.no-data{
  padding:44px 20px!important;text-align:center;color:var(--pro-subtle)!important;
  border:1px dashed var(--pro-line)!important;border-radius:var(--s44-r)!important;
  background:repeating-linear-gradient(45deg,transparent 0 9px,
            color-mix(in srgb,var(--pro-line) 26%,transparent) 9px 10px);
}
.empty-state .title{color:var(--pro-muted)!important;font-weight:600!important;margin-bottom:4px}

/* ------------------------------------------------- 13. 性能：容器隔离 */
.content,.main-content,.page-body{contain:layout style}
.tab-pane:not(.active),.panel-hidden{content-visibility:hidden}
/* 只给 img 开，故意不含 canvas / video：
   Chart.js 要靠 canvas 的实际尺寸算刻度，画布在视口外被跳过渲染时
   量到 0×0，图表会画歪或干脆不出来。 */
img{content-visibility:auto}

/* 页面不可见时停掉所有循环动画，省电省 CPU（由 JS 加 body.s44-idle） */
body.s44-idle *,body.s44-idle *::before,body.s44-idle *::after{
  animation-play-state:paused!important;
}

/* --------------------------------------------- 14. 无障碍：减弱动态 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .s44-reveal{opacity:1;transform:none}
  #s44-progress{display:none}
}

/* --------------------------------------------- 15. 移动端收口 */
@media (max-width:768px){
  :root{--s44-notch:10px;--topbar-height:56px}
  /* 毛玻璃在中低端安卓上是持续的 GPU 开销，移动端直接换成实色 */
  .topbar,.top-bar,.pro-topbar{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:var(--pro-card)!important;
  }
  .card,.stat-card{border-radius:var(--s44-r-sm)!important}
  .stat-card .stat-value{font-size:22px!important}
  .sidebar{box-shadow:0 0 0 100vmax rgba(11,20,22,.001)!important}
  table thead th{font-size:10px!important;letter-spacing:.08em!important}
}

/* 打印：去掉一切装饰，只留内容 */
@media print{
  .sidebar,.topbar,#s44-progress,.toast,.ai-float{display:none!important}
  .card,.stat-card{box-shadow:none!important;clip-path:none!important;
    border:1px solid #ccc!important;break-inside:avoid}
  body{background:#fff!important;color:#000!important}
}