/*!
 * ServerMonitor — 服务器状态胶囊
 * 六种材质：极光玻璃 / 磨砂 / 液态金属 / 碳纤维 / 陶瓷 / 霓虹
 *
 * 全部选择器以 .sm- 开头，不依赖主题变量（--primary 仅作可选继承）。
 */

.sm-root {
  --sm-text: #16202e;
  --sm-muted: rgba(22, 32, 46, 0.6);
  --sm-faint: rgba(22, 32, 46, 0.44);
  --sm-accent: var(--primary, #2f6df6);
  --sm-track: rgba(22, 32, 46, 0.1);

  --sm-skin-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
  --sm-skin-border: rgba(255, 255, 255, 0.9);
  --sm-blur: blur(20px) saturate(180%);
  --sm-shadow:
    0 0 0 1px rgba(16, 30, 60, 0.05),
    0 18px 42px -20px rgba(12, 30, 70, 0.48),
    0 4px 12px -6px rgba(12, 30, 70, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --sm-tex: none;
  --sm-tex-opacity: 1;

  --sm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sm-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9000;

  font-family: var(--sm-font);
  font-size: 12.5px;
  line-height: 1;
  color: var(--sm-text);
  text-align: left;

  /* 缩放走 scale 而不是 zoom：transform 不参与定位，left/top 恒等于
     视觉左上角，拖拽换位和边缘钳制才不会漂移。停靠时从底边长出。 */
  --sm-scale: 1;
  transform-origin: bottom left;
  opacity: 0;
  transform: translateY(10px) scale(var(--sm-scale));
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
  -webkit-font-smoothing: antialiased;
}

.sm-root.is-ready {
  opacity: 1;
  transform: scale(var(--sm-scale));
}

.sm-root[data-position="right"] {
  left: auto;
  right: 20px;
  transform-origin: bottom right;
}

/* 浮动（拖过）模式下坐标是视觉左上角，缩放从该点向右下生长 */
.sm-root[data-floating="true"] {
  transform-origin: top left;
}

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

/* ---------------------------------------------------------------- 胶囊 */

.sm-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 13px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  isolation: isolate;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}

.sm-pill:hover {
  transform: translateY(-1px);
}

.sm-pill:active {
  transform: translateY(0) scale(0.99);
}

/* 拖动中：压住悬停位移和选中，抓手光标 */
.sm-root[data-dragging="true"] {
  user-select: none;
  -webkit-user-select: none;
}

.sm-root[data-dragging="true"] .sm-pill {
  cursor: grabbing;
  transform: none;
  transition: none;
}

.sm-pill:focus-visible {
  outline: 2px solid var(--sm-accent);
  outline-offset: 3px;
}

.sm-pill > *:not(.sm-skin) {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------ 材质皮肤 */

.sm-skin {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--sm-skin-bg);
  border: 1px solid var(--sm-skin-border);
  box-shadow: var(--sm-shadow);
  -webkit-backdrop-filter: var(--sm-blur);
  backdrop-filter: var(--sm-blur);
  pointer-events: none;
}

.sm-skin::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sm-tex);
  opacity: var(--sm-tex-opacity);
  pointer-events: none;
}

/* 极光玻璃：三团缓慢漂移的色斑，压在磨砂层之上 */
.sm-root[data-material="glass"] {
  --sm-panel-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.985), rgba(250, 252, 255, 0.965));
}

.sm-root[data-material="glass"] .sm-skin::before {
  inset: -60%;
  background:
    radial-gradient(38% 55% at 22% 32%, rgba(86, 204, 255, 0.55), transparent 70%),
    radial-gradient(34% 50% at 76% 68%, rgba(176, 122, 255, 0.45), transparent 70%),
    radial-gradient(30% 46% at 52% 12%, rgba(110, 255, 214, 0.4), transparent 72%);
  filter: blur(14px);
  opacity: 0.6;
  animation: sm-aurora 16s ease-in-out infinite alternate;
}

@keyframes sm-aurora {
  0% {
    transform: translate3d(-4%, 2%, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(3%, -3%, 0) rotate(8deg) scale(1.08);
  }
  100% {
    transform: translate3d(5%, 4%, 0) rotate(-6deg) scale(1.04);
  }
}

/* 面板是实心白底，同样的极光浓度会变成彩色卡；调淡到只留一层色调 */
.sm-root[data-material="glass"] .sm-panel .sm-skin::before {
  opacity: 0.3;
}

/* 磨砂：密集白噪点，压住塑料感 */
.sm-root[data-material="frosted"] {
  --sm-skin-bg: rgba(250, 251, 253, 0.84);
  --sm-skin-border: rgba(255, 255, 255, 0.75);
  --sm-blur: blur(26px) saturate(115%);
  --sm-shadow:
    0 10px 30px -16px rgba(20, 30, 50, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --sm-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sm-tex-opacity: 0.05;
  --sm-panel-bg: rgba(251, 252, 254, 0.985);
}

/* 液态金属：斜向银灰渐变 + 一道扫光 */
.sm-root[data-material="metal"] {
  --sm-text: #262c36;
  --sm-muted: rgba(38, 44, 54, 0.58);
  --sm-faint: rgba(38, 44, 54, 0.42);
  --sm-accent: #1d6feb;
  --sm-track: rgba(38, 44, 54, 0.14);
  --sm-skin-bg: linear-gradient(
    135deg,
    #f8fafc 0%,
    #dfe4ec 17%,
    #fcfdfe 33%,
    #c5ccd8 51%,
    #e8ecf3 67%,
    #ccd2dd 83%,
    #f3f5f9 100%
  );
  --sm-skin-border: rgba(255, 255, 255, 0.95);
  --sm-blur: blur(4px) saturate(115%);
  --sm-shadow:
    0 14px 30px -14px rgba(30, 40, 60, 0.5),
    0 2px 4px -1px rgba(30, 40, 60, 0.18),
    inset 0 1px 0 #ffffff,
    inset 0 -1px 1px rgba(20, 30, 50, 0.16);
}

.sm-root[data-material="metal"] .sm-skin::before {
  inset: -20%;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.95) 48%,
    rgba(255, 255, 255, 0.2) 55%,
    transparent 66%
  );
  transform: translateX(-130%);
  transition: transform 1.1s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.sm-root[data-material="metal"]:hover .sm-skin::before {
  transform: translateX(130%);
}

/* 碳纤维：双层斜纹 */
.sm-root[data-material="carbon"] {
  --sm-text: #e9eef7;
  --sm-muted: rgba(233, 238, 247, 0.58);
  --sm-faint: rgba(233, 238, 247, 0.4);
  --sm-accent: #35e0b4;
  --sm-track: rgba(255, 255, 255, 0.11);
  --sm-skin-bg: linear-gradient(160deg, #1b1f26, #111419 70%, #16191f);
  --sm-skin-border: rgba(255, 255, 255, 0.09);
  --sm-blur: blur(8px) saturate(120%);
  --sm-shadow:
    0 16px 34px -16px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --sm-tex:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* 陶瓷：暖白哑光 + 极柔阴影 */
.sm-root[data-material="ceramic"] {
  --sm-text: #3b3630;
  --sm-muted: rgba(59, 54, 48, 0.58);
  --sm-faint: rgba(59, 54, 48, 0.42);
  --sm-accent: #b0673a;
  --sm-track: rgba(59, 54, 48, 0.1);
  --sm-skin-bg: linear-gradient(160deg, #ffffff 0%, #f7f5f1 52%, #efece6 100%);
  --sm-skin-border: rgba(255, 255, 255, 0.9);
  --sm-blur: blur(10px) saturate(105%);
  --sm-shadow:
    0 14px 30px -18px rgba(70, 55, 40, 0.42),
    0 2px 6px -3px rgba(70, 55, 40, 0.1),
    inset 0 1px 0 #ffffff,
    inset 0 -2px 8px rgba(120, 100, 80, 0.05);
  --sm-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sm-tex-opacity: 0.035;
}

/* 霓虹：深底 + 渐变描边，强调色发光 */
.sm-root[data-material="neon"] {
  --sm-text: #f1f3ff;
  --sm-muted: rgba(241, 243, 255, 0.6);
  --sm-faint: rgba(241, 243, 255, 0.42);
  --sm-accent: #ff5ad9;
  --sm-track: rgba(255, 255, 255, 0.12);
  --sm-skin-bg: linear-gradient(180deg, #0d0e14, #14151d);
  --sm-skin-border: rgba(255, 255, 255, 0.08);
  --sm-blur: blur(12px) saturate(130%);
  --sm-shadow:
    0 0 0 1px rgba(255, 90, 217, 0.18),
    0 0 30px -8px rgba(255, 90, 217, 0.55),
    0 14px 34px -18px rgba(0, 0, 0, 0.9),
    inset 0 0 22px rgba(124, 92, 255, 0.16);
}

.sm-root[data-material="neon"] .sm-skin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, #ff5ad9, #7c5cff 40%, #35e1ff 70%, #ff5ad9);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  pointer-events: none;
}

/* ------------------------------------------------------------ 胶囊内容 */

.sm-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fbf71;
  flex: 0 0 auto;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sm-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: #2fbf71;
  opacity: 0.35;
  animation: sm-pulse 2.6s ease-out infinite;
}

.sm-root[data-state="loading"] .sm-dot {
  background-color: #8b95a6;
}

.sm-root[data-state="loading"] .sm-dot::after {
  color: #8b95a6;
}

.sm-root[data-state="warn"] .sm-dot {
  background-color: #e8a317;
}

.sm-root[data-state="warn"] .sm-dot::after {
  color: #e8a317;
}

.sm-root[data-state="offline"] .sm-dot {
  background-color: #e5484d;
}

.sm-root[data-state="offline"] .sm-dot::after {
  color: #e5484d;
  animation: none;
  opacity: 0.5;
}

@keyframes sm-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.sm-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sm-sep {
  width: 1px;
  height: 11px;
  background: var(--sm-track);
  flex: 0 0 auto;
}

.sm-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.sm-metric i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--sm-faint);
  text-transform: uppercase;
}

.sm-metric b {
  font-family: var(--sm-mono);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* 数值按 3 位宽占位：9% ↔ 100% 跳变时胶囊（连带面板）不至于呼吸 */
  min-width: 3ch;
}

.sm-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 1px;
  color: var(--sm-faint);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

.sm-caret svg {
  width: 12px;
  height: 12px;
  display: block;
}

.sm-root[data-open="true"] .sm-caret {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- 面板 */

.sm-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  /* 面板与胶囊同宽：.sm-root 的宽度就是胶囊撑出来的，
     面板绝对定位不参与撑宽，100% 恰好等于胶囊宽 */
  width: 100%;
  border-radius: 20px;
  transform-origin: bottom left;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.26s cubic-bezier(0.2, 0.85, 0.3, 1.15);
}

.sm-root[data-position="right"] .sm-panel {
  left: auto;
  right: 0;
  transform-origin: bottom right;
}

/* 浮动模式下由 JS 依剩余空间指定面板朝向（见 updatePanelPlacement） */
.sm-root[data-panel-side="right"] .sm-panel {
  left: auto;
  right: 0;
  transform-origin: bottom right;
}

.sm-root[data-panel-flip="true"] .sm-panel {
  bottom: auto;
  top: calc(100% + 10px);
  transform-origin: top left;
}

.sm-root[data-panel-side="right"][data-panel-flip="true"] .sm-panel {
  transform-origin: top right;
}

.sm-root[data-open="true"] .sm-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sm-panel .sm-skin {
  border-radius: 20px;
  /* 胶囊小、文字短，透一点没关系；面板面积大，透出底层正文就没法读了。
     这里直接做到接近实心，玻璃感由 ::before 的极光/纹理层提供。 */
  background: var(--sm-panel-bg, var(--sm-skin-bg));
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
}

.sm-panel-inner {
  position: relative;
  z-index: 1;
  padding: 15px 16px 13px;
}

.sm-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.sm-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: var(--sm-faint);
  text-transform: uppercase;
}

.sm-uptime {
  font-family: var(--sm-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--sm-muted);
}

.sm-meters {
  display: grid;
  gap: 11px;
}

.sm-meter-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 40px;
  align-items: baseline;
  column-gap: 9px;
  margin-bottom: 6px;
  font-size: 11px;
}

.sm-meter-top > span:first-child {
  color: var(--sm-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sm-abs {
  font-style: normal;
  font-family: var(--sm-mono);
  font-size: 9.5px;
  color: var(--sm-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sm-pct {
  font-family: var(--sm-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}

.sm-bar {
  position: relative;
  height: 5px;
  border-radius: 99px;
  background: var(--sm-track);
  overflow: hidden;
}

.sm-bar > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--sm-accent);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.42));
  transition: width 0.55s cubic-bezier(0.25, 0.8, 0.3, 1), background-color 0.4s ease;
}

.sm-bar > i.is-hot {
  background-color: #e8a317;
}

.sm-bar > i.is-critical {
  background-color: #e5484d;
}

/* 网络 */

.sm-net {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sm-track);
}

.sm-root[data-nonet="true"] .sm-net {
  display: none;
}

.sm-net-rates {
  display: flex;
  gap: 16px;
}

.sm-net-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.sm-net-item span {
  font-size: 11px;
  color: var(--sm-faint);
  line-height: 1;
}

.sm-net-item b {
  font-family: var(--sm-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sm-net-item i {
  font-style: normal;
  font-size: 9px;
  color: var(--sm-faint);
  letter-spacing: 0.04em;
}

.sm-spark {
  /* 放不下就缩，缩到 64px 以下整条换到下行靠右；viewBox 拉伸不失真 */
  width: 96px;
  height: 24px;
  flex: 0 1 96px;
  min-width: 64px;
  margin-left: auto;
  overflow: visible;
}

.sm-spark polyline {
  fill: none;
  stroke: var(--sm-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}

.sm-spark .sm-spark-fill {
  stroke: none;
}

.sm-stop-a {
  stop-color: var(--sm-accent);
  stop-opacity: 0.26;
}

.sm-stop-b {
  stop-color: var(--sm-accent);
  stop-opacity: 0;
}

/* 底栏 */

.sm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 9px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--sm-track);
}

.sm-sys {
  flex: 1 1 auto;
  font-size: 9.5px;
  color: var(--sm-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-swatches {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

.sm-swatch {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.sm-swatch:hover {
  transform: scale(1.15);
}

.sm-swatch[aria-pressed="true"] {
  outline: 2px solid var(--sm-accent);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.sm-swatch:focus-visible {
  outline: 2px solid var(--sm-accent);
  outline-offset: 2px;
}

.sm-swatch[data-swatch="glass"] {
  background: linear-gradient(135deg, #a9e4ff, #c9b4ff 60%, #ffffff);
}
.sm-swatch[data-swatch="frosted"] {
  background: linear-gradient(135deg, #ffffff, #dfe3e9);
}
.sm-swatch[data-swatch="metal"] {
  background: linear-gradient(135deg, #ffffff 10%, #b9c0cb 48%, #f4f6f9 70%, #9aa2ae);
}
.sm-swatch[data-swatch="carbon"] {
  background: repeating-linear-gradient(45deg, #22262d 0 2px, #15181d 2px 4px);
}
.sm-swatch[data-swatch="ceramic"] {
  background: linear-gradient(135deg, #ffffff, #efe9df);
}
.sm-swatch[data-swatch="neon"] {
  background: linear-gradient(135deg, #ff5ad9, #7c5cff 55%, #35e1ff);
}

/* 工具行：大小步进 + 位置复位（未拖动过时复位按钮不显示） */

.sm-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.sm-size {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sm-tool {
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: var(--sm-track);
  color: var(--sm-muted);
  font-family: var(--sm-mono);
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.02em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sm-tool:hover {
  color: var(--sm-text);
}

.sm-tool:active {
  transform: scale(0.93);
}

.sm-tool:focus-visible {
  outline: 2px solid var(--sm-accent);
  outline-offset: 1px;
}

.sm-size-val {
  min-width: 38px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sm-root:not([data-floating="true"]) .sm-tool-reset {
  display: none;
}

/* ------------------------------------------------------------ 暗色适配 */

.dark .sm-root[data-material="glass"],
html[data-theme="dark"] .sm-root[data-material="glass"],
html[data-mode="dark"] .sm-root[data-material="glass"] {
  --sm-text: #eaf0fb;
  --sm-muted: rgba(234, 240, 251, 0.64);
  --sm-faint: rgba(234, 240, 251, 0.46);
  --sm-track: rgba(255, 255, 255, 0.12);
  --sm-skin-bg: linear-gradient(135deg, rgba(34, 43, 60, 0.78), rgba(17, 22, 33, 0.64));
  --sm-skin-border: rgba(255, 255, 255, 0.14);
  --sm-panel-bg: linear-gradient(135deg, rgba(31, 40, 57, 0.985), rgba(15, 20, 30, 0.975));
  --sm-shadow:
    0 14px 36px -18px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dark .sm-root[data-material="frosted"],
html[data-theme="dark"] .sm-root[data-material="frosted"],
html[data-mode="dark"] .sm-root[data-material="frosted"] {
  --sm-text: #e8ecf3;
  --sm-muted: rgba(232, 236, 243, 0.62);
  --sm-faint: rgba(232, 236, 243, 0.44);
  --sm-track: rgba(255, 255, 255, 0.12);
  --sm-skin-bg: rgba(26, 30, 39, 0.84);
  --sm-skin-border: rgba(255, 255, 255, 0.1);
  --sm-panel-bg: rgba(24, 28, 37, 0.985);
  --sm-shadow:
    0 12px 32px -18px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --sm-tex-opacity: 0.06;
}

.dark .sm-root[data-material="metal"],
html[data-theme="dark"] .sm-root[data-material="metal"],
html[data-mode="dark"] .sm-root[data-material="metal"] {
  --sm-text: #eef1f6;
  --sm-muted: rgba(238, 241, 246, 0.6);
  --sm-faint: rgba(238, 241, 246, 0.44);
  --sm-track: rgba(255, 255, 255, 0.14);
  --sm-skin-bg: linear-gradient(
    135deg,
    #454c57 0%,
    #2a2f37 18%,
    #545c68 34%,
    #1f232a 52%,
    #3d444e 68%,
    #23272e 84%,
    #454c57 100%
  );
  --sm-skin-border: rgba(255, 255, 255, 0.16);
  --sm-shadow:
    0 14px 32px -16px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5);
}

.dark .sm-root[data-material="ceramic"],
html[data-theme="dark"] .sm-root[data-material="ceramic"],
html[data-mode="dark"] .sm-root[data-material="ceramic"] {
  --sm-text: #f0eae0;
  --sm-muted: rgba(240, 234, 224, 0.6);
  --sm-faint: rgba(240, 234, 224, 0.44);
  --sm-track: rgba(255, 255, 255, 0.12);
  --sm-skin-bg: linear-gradient(160deg, #332f29 0%, #26231f 55%, #201d1a 100%);
  --sm-skin-border: rgba(255, 255, 255, 0.1);
  --sm-shadow:
    0 14px 32px -18px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark .sm-root[data-material="carbon"],
html[data-theme="dark"] .sm-root[data-material="carbon"],
html[data-mode="dark"] .sm-root[data-material="carbon"],
.dark .sm-root[data-material="neon"],
html[data-theme="dark"] .sm-root[data-material="neon"],
html[data-mode="dark"] .sm-root[data-material="neon"] {
  --sm-skin-border: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------- 移动端 */

@media (max-width: 640px) {
  .sm-root {
    left: 12px;
    bottom: 12px;
    right: auto;
  }

  .sm-root[data-position="right"] {
    left: auto;
    right: 12px;
  }

  .sm-pill {
    height: 38px;
    padding: 0 12px;
    gap: 8px;
  }

  .sm-metric[data-key="disk"],
  .sm-sep-disk {
    display: none;
  }

  /* 浮动模式的朝向由 data-panel-side 接管，别在这里按死 */
  .sm-root[data-position="left"]:not([data-floating="true"]) .sm-panel {
    left: 0;
  }
}

/* ------------------------------------------------------------ 减少动效 */

@media (prefers-reduced-motion: reduce) {
  .sm-root,
  .sm-pill,
  .sm-caret,
  .sm-panel,
  .sm-bar > i,
  .sm-swatch {
    transition-duration: 0.01ms !important;
  }

  .sm-root[data-material="glass"] .sm-skin::before,
  .sm-dot::after {
    animation: none !important;
  }
}

/* 打印时别把胶囊印出来 */
@media print {
  .sm-root {
    display: none !important;
  }
}