/* ============================================================================
   serverstatus-ui.css — 服务器状态页视觉层
   ----------------------------------------------------------------------------
   任务：Operate 模式的机器健康读数。美来自精度与克制，不来自表演。
   全部规则包在 @layer utilities 内：线上 index.css 的 Tailwind utilities 同在
   这一层且 !important 工具类会反杀，必须同层、后加载、同级优先。
   所有选择器以 .ss 开头，不外泄到全局。

   语义 token（只沿用产品既有色板，不新增色相）
     画布 --ss-canvas #0d1117 · 面板 --ss-panel #161b22
     描边 --ss-border #30363d · 分割 --ss-rule #21262d
     文字 --ss-fg #e6edf3 / -2 #8b949e / -3 #6e7681 / -4 #484f58 · 正文 #c9d1d9
     异常 --ss-danger #f85149 · --ss-danger-2 #ff7b72（唯一强调色族）

   节奏 4/8：间距 4 6 8 10 12 14 16 20 24，圆角 6（面板）/4（控件）
   字号 11 / 12 / 13 / 15 / 20（SPEC 阶梯，不用 28——页面上没有需要抢戏的数字）
   动效 ≤160ms 状态过渡；入场 200ms 弹性缓出 + 26–30ms 错峰；全部有 reduced-motion 降级

   Do
     · 正/常状态用亮度差表达：正常的条是灰的，正常的值是亮的
     · 异常只做三件事：2px 左侧红条、数值染红、状态点亮红
     · 每个面板是「一张描边 + 内部 1px 发丝格」，不再套盒中盒
   Don't
     · 渐变 / 毛玻璃 / 外发光 / 投影 / 循环动画（.is-busy 的旋转是状态，不是装饰）
     · 绿/蓝/紫/黄任何强调 · transition: all · 0.3s ease · 用 overflow 藏排版缺陷
   ========================================================================== */

@layer utilities {

  .ss {
    --ss-canvas: #0d1117;
    --ss-panel: #161b22;
    --ss-border: #30363d;
    --ss-rule: #21262d;
    --ss-fg: #e6edf3;
    --ss-fg-2: #8b949e;
    --ss-fg-3: #6e7681;
    --ss-fg-4: #484f58;
    --ss-body: #c9d1d9;
    --ss-danger: #f85149;
    --ss-danger-2: #ff7b72;

    --ss-r: 6px;
    --ss-r-sm: 4px;
    --ss-dur: 140ms;
    --ss-ease: cubic-bezier(.22, 1, .36, 1);

    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    background: var(--ss-canvas);
    color: var(--ss-body);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    /* 全页数字等宽：小数点、单位、千位全部对齐 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    -webkit-font-smoothing: antialiased;
  }

  .ss *,
  .ss *::before,
  .ss *::after { box-sizing: border-box; }

  /* ---------------------------------------------------------------- 标题行 */
  .ss-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ss-rule);
  }

  .ss-head-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .ss-head-icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--ss-fg-3);
  }

  .ss-head-icon svg { width: 16px; height: 16px; }

  .ss-head-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--ss-fg);
    white-space: nowrap;
  }

  /* 「自动刷新」是背景事实，做成静音 chip：不抢色，只留一个点 */
  .ss-head-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--ss-rule);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--ss-fg-3);
    white-space: nowrap;
  }

  .ss-head-live::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ss-fg-3);
  }

  .ss-head-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-sm);
    background: transparent;
    color: var(--ss-fg-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--ss-dur) var(--ss-ease),
      border-color var(--ss-dur) var(--ss-ease),
      color var(--ss-dur) var(--ss-ease);
  }

  .ss-head-refresh .ss-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    transition: transform var(--ss-dur) var(--ss-ease);
  }

  .ss-head-refresh:hover {
    background-color: var(--ss-rule);
    border-color: var(--ss-fg-4);
    color: var(--ss-fg);
  }

  .ss-head-refresh:hover .ss-icon { transform: rotate(-28deg); }

  .ss-head-refresh:active { background-color: var(--ss-border); }

  .ss-head-refresh:focus-visible {
    outline: 2px solid var(--ss-fg-2);
    outline-offset: 2px;
  }

  .ss-head-refresh:disabled {
    color: var(--ss-fg-4);
    border-color: var(--ss-rule);
    background-color: transparent;
    cursor: not-allowed;
  }

  .ss-head-refresh.is-busy {
    color: var(--ss-fg);
    border-color: var(--ss-fg-4);
  }

  .ss-head-refresh.is-busy .ss-icon { animation: ss-spin 900ms linear infinite; }

  /* ------------------------------------------ 面板外壳：描边 + 1px 发丝格 */
  .ss-hero,
  .ss-meters,
  .ss-net,
  .ss-health-grid {
    display: grid;
    gap: 1px;
    background: var(--ss-rule);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r);
    overflow: hidden;
  }

  /* ------------------------------------------------- 顶部背景信息（最轻） */
  .ss-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ss-hero-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 14px 11px;
    background: var(--ss-panel);
  }

  .ss-hero-label {
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--ss-fg-3);
    white-space: nowrap;
  }

  .ss-hero-value {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ss-body);
  }

  .ss-hero-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ss-hero-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ss-fg-3);
  }

  .ss-hero-card.is-bad .ss-hero-value { color: var(--ss-danger); }
  .ss-hero-card.is-bad .ss-hero-dot { background: var(--ss-danger); }
  .ss-hero-card.is-bad .ss-hero-label { color: var(--ss-danger-2); }

  /* -------------------------------------------------- 处理器 / 内存 / 硬盘 */
  .ss-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ss-meter {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 13px 15px 14px;
    background: var(--ss-panel);
  }

  .ss-meter-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .ss-meter-icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--ss-fg-4);
  }

  .ss-meter-icon svg { width: 12px; height: 12px; }

  .ss-meter-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ss-fg-2);
  }

  .ss-meter-pct {
    display: flex;
    align-items: baseline;
    gap: 1px;
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--ss-fg);
  }

  .ss-meter-bar {
    position: relative;
    height: 4px;
    margin-top: 11px;
    border-radius: 2px;
    background: var(--ss-rule);
    overflow: hidden;
  }

  .ss-meter-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--ss-fg-2);
    transition:
      width var(--ss-dur) var(--ss-ease),
      background-color var(--ss-dur) var(--ss-ease);
  }

  .ss-meter-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
  }

  .ss-meter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ss-fg-3);
  }

  .ss-meter-row b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-weight: 500;
    color: var(--ss-body);
  }

  .ss-meter.is-warn .ss-meter-pct { color: var(--ss-danger-2); }
  .ss-meter.is-warn .ss-meter-bar i { background: var(--ss-danger-2); }
  .ss-meter.is-error .ss-meter-pct { color: var(--ss-danger); }
  .ss-meter.is-error .ss-meter-bar i { background: var(--ss-danger); }

  /* ------------------------------------------------------------ 网络流量 */
  .ss-net { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ss-net-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 15px 11px;
    background: var(--ss-panel);
  }

  .ss-net-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--ss-fg-3);
    white-space: nowrap;
  }

  .ss-net-label svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
  }

  .ss-net-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ss-fg);
    white-space: nowrap;
  }

  /* 实时速率亮，累计量暗：同一条里也分主次 */
  .ss-net-cell.is-muted .ss-net-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-fg-2);
  }

  /* -------------------------------------------------------------- 健康检查 */
  .ss-health {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ss-health-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
  }

  .ss-health-title {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--ss-fg);
  }

  .ss-health-total {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--ss-fg-3);
  }

  .ss-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--ss-border);
    border-radius: 999px;
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--ss-fg-2);
    white-space: nowrap;
  }

  .ss-health-badge::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }

  .ss-health-badge.is-ok { color: var(--ss-fg-2); border-color: var(--ss-border); }

  .ss-health-badge.is-warn {
    color: var(--ss-danger-2);
    border-color: rgba(255, 123, 114, .4);
    background: rgba(255, 123, 114, .08);
  }

  .ss-health-badge.is-error {
    color: var(--ss-danger);
    border-color: rgba(248, 81, 73, .45);
    background: rgba(248, 81, 73, .1);
  }

  .ss-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 六张卡共用一套骨架：标签小、数值大且位置固定 —— 可比，才记得住 */
  .ss-hc {
    position: relative;
    display: grid;
    grid-template-rows: auto 24px auto;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 11px 14px 12px;
    background: var(--ss-panel);
  }

  .ss-hc-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .ss-hc-icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--ss-fg-4);
  }

  .ss-hc-icon svg { width: 12px; height: 12px; }

  .ss-hc-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--ss-fg-2);
  }

  .ss-hc-flag {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ss-border);
  }

  .ss-hc-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -.01em;
    color: var(--ss-fg);
    white-space: nowrap;
  }

  .ss-hc-tip {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ss-fg-3);
  }

  /* 状态语言：正常＝无声；注意/异常＝左侧 2px 细条 + 数值染色 + 状态点亮 */
  .ss-hc.is-warn { box-shadow: inset 2px 0 0 var(--ss-danger-2); }
  .ss-hc.is-warn .ss-hc-label { color: var(--ss-fg); }
  .ss-hc.is-warn .ss-hc-icon { color: var(--ss-danger-2); }
  .ss-hc.is-warn .ss-hc-value { color: var(--ss-danger-2); }
  .ss-hc.is-warn .ss-hc-flag { background: var(--ss-danger-2); }
  .ss-hc.is-warn .ss-hc-tip { color: var(--ss-fg-2); }

  .ss-hc.is-error { box-shadow: inset 2px 0 0 var(--ss-danger); }
  .ss-hc.is-error .ss-hc-label { color: var(--ss-fg); }
  .ss-hc.is-error .ss-hc-icon { color: var(--ss-danger); }
  .ss-hc.is-error .ss-hc-value { color: var(--ss-danger); }
  .ss-hc.is-error .ss-hc-flag { background: var(--ss-danger); }
  .ss-hc.is-error .ss-hc-tip { color: var(--ss-fg-2); }

  /* ------------------------------------------------------------------ 页脚 */
  .ss-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 11px;
    border-top: 1px solid var(--ss-rule);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--ss-fg-3);
  }

  .ss-foot time { color: var(--ss-fg-2); }

  /* ---------------------------------------------- 预览用：状态变体对比区 */
  .ss-variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-rule);
  }

  .ss-variants-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ss-variants-title {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--ss-fg-3);
    text-transform: uppercase;
  }

  .ss-variants-note {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--ss-fg-3);
  }

  .ss-variants .ss-meters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2px;
  }

  .ss-variants-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
  }

  .ss-variants-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }

  .ss-variants-cap {
    margin-right: 2px;
    font-size: 11px;
    letter-spacing: .03em;
    color: var(--ss-fg-3);
  }

  /* 变体区里的按钮是标本，不是控件 */
  .ss-variants .ss-head-refresh { cursor: default; }

  /* -------------------------------------------------------------- 公共原子 */
  .ss-unit {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ss-fg-3);
  }

  .ss-hc-value .ss-unit { margin-left: 3px; }

  /* ------------------------------------------------------------ 动效/降级 */
  /* 只做位移、不做淡入：任何一帧截图都不会出现「内容还没出现」的假故障 */
  @keyframes ss-rise {
    from { transform: translateY(6px); }
    to { transform: translateY(0); }
  }

  @keyframes ss-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .ss-hero-card,
    .ss-meter,
    .ss-net-cell,
    .ss-hc { animation: ss-rise 200ms var(--ss-ease) both; }

    .ss-net-cell:nth-child(1) { animation-delay: 20ms; }
    .ss-net-cell:nth-child(2) { animation-delay: 44ms; }
    .ss-net-cell:nth-child(3) { animation-delay: 68ms; }
    .ss-net-cell:nth-child(4) { animation-delay: 92ms; }

    .ss-health-grid .ss-hc:nth-child(1) { animation-delay: 40ms; }
    .ss-health-grid .ss-hc:nth-child(2) { animation-delay: 70ms; }
    .ss-health-grid .ss-hc:nth-child(3) { animation-delay: 100ms; }
    .ss-health-grid .ss-hc:nth-child(4) { animation-delay: 130ms; }
    .ss-health-grid .ss-hc:nth-child(5) { animation-delay: 160ms; }
    .ss-health-grid .ss-hc:nth-child(6) { animation-delay: 190ms; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-head-refresh.is-busy .ss-icon { animation: none; }
    .ss-head-refresh:hover .ss-icon { transform: none; }
    .ss-meter-bar i { transition: none; }
  }

  /* ---------------------------------------------------------------- 响应式 */
  @media (max-width: 1100px) {
    .ss-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 900px) {
    .ss { padding: 16px 16px 32px; }
    .ss-meters { grid-template-columns: 1fr; }
    .ss-variants .ss-meters { grid-template-columns: 1fr; }
    .ss-net { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 640px) {
    .ss-hero { grid-template-columns: 1fr; }
    .ss-health-grid { grid-template-columns: 1fr; }
    .ss-head-left { flex-wrap: wrap; gap: 7px; }
    .ss-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  }
}