/* admin.css  */
:root {
  /* 对应 .progress-row 中“主信息行”（progress-wrapper + progress-bar-wrap）的高度，
     约 23px(wrapper) + 8px(gap) + 17px(bar-wrap) ≈ 48px，
     取 52px 略留呼吸空间，方便 .sb-ver-block 垂直居中 */
  --brand-top-height: 76px;

  /* 对应 #historyPlaceholder / analysisSummaryCard 所在的“次要信息行”，
     约 44px 内容 + 8px gap ≈ 52px，加少量余量取 64px，
     使 .sidebar-brand 总高 ≈ 12+52+1+64 = 129px ≈ progressCard(124px)+gap(8px) */
  --brand-status-height: 37px;
}

:root {
  -webkit-text-size-adjust: 100%;
  --bg: #ffffff;
  --fg: #111;
  --card: #fff;
  --card-shadow: #8e8e8e;
  --border: rgba(0, 0, 0, 0.06);
  --accent: #0ea5a0;
  --accent-light: rgba(14, 165, 160, 0.6);
  --accent-2: #09c7c1;
  --muted: #646971;
  --muted-hard: rgba(144, 141, 141, 0.8);
  --success: #0fd056;
  --idle: #0198d3;
  --prepare: rgb(26, 178, 254);
  --stopping: rgb(0, 207, 111);
  --forcing: #ed1717;
  --calculating: #a81c3398;
  --warning: #d97706;
  --danger: #ed1717;

  /* 密码输入框背景 */
  --input-bg: rgba(231, 223, 208, 0.2);
  --bg-summary: rgba(255, 255, 255, 0.5);
  --bg-hover: rgba(242, 234, 219, 0.5);

  /* --logs-bg: rgba(236, 232, 224, 0.2); */
  --logs-bg: rgba(231, 223, 208, 0.1);
  --editor-bg: white;
  --content-bg: rgba(255, 255, 255, 0);
  --gutter-bg: rgba(241, 237, 226, 0.2);
  --edit-shadow: rgba(2, 6, 23, 0.06);
  --edit-shadow-hover: rgba(2, 6, 23, 0.2);
  --placehoder-bg: rgba(173, 173, 173, 0.2);

  --window-shadow: rgba(2, 6, 23, 0.06);
  --window-shadow-hover: rgba(2, 6, 23, 0.2);
  --badge-shadow-hover: rgba(2, 6, 23, 0.2);

  --scroll-bg: rgba(0, 211, 215, 0.2);

  /* 玻璃效果 */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
  --glass-blur: 10px;

  --header-height: 60px;
  --mid-progressCard-height: 76px;
  --mobile-subtract: 240px;
  --gap: 8px;

  --font-pingfang:
    system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC",
    "Microsoft YaHei";
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  --font-code: "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --bg-hover-1: rgba(255, 255, 255, 0.2);
  --bg-hover-2: rgba(255, 255, 255, 0.2);

  --invert: 0%;
}

:root[data-theme="dark"] {
  --bg: #121316;
  --fg: #e6e6e6;
  --card: #18191b;
  --card-shadow: #001817;
  --border: rgba(255, 255, 255, 0.06);
  --accent: #0ea5a0;
  --accent-light: rgba(14, 165, 160, 0.6);
  --accent-2: #09c7c1;
  --success: #16a34a;
  --danger: #dc2626;
  --muted: #9aa4b2;
  --muted-hard: rgba(71, 70, 70, 0.8);
  --prepare: rgb(1, 136, 194);

  --input-bg: rgba(0, 0, 0, 0.2);
  --bg-summary: rgba(0, 0, 0, 0.2);
  --bg-hover: #04585540;
  --logs-bg: rgba(0, 0, 0, 0.2);
  --editor-bg: rgba(23, 23, 23, 0.2);
  --content-bg: rgba(23, 23, 23, 0.2);
  --gutter-bg: rgba(0, 0, 0, 0.2);
  --edit-shadow: rgba(2, 6, 23, 0.6);
  --edit-shadow-hover: rgba(2, 6, 23, 1);
  --placehoder-bg: rgba(225, 6, 141, 0.124);

  --window-shadow: rgba(2, 6, 23, 0.6);
  --window-shadow-hover: rgba(2, 6, 23, 1);
  --badge-shadow-hover: rgba(237, 238, 243, 0.2);

  --scroll-bg: rgba(0, 127, 129, 0.4);

  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  --glass-blur: 12px;

  --bg-hover-1: rgba(3, 232, 209, 0.08);
  --bg-hover-2: rgba(2, 87, 130, 0.1);

  --invert: 100%;
}

:root {
  --chip-nodes: #0ea5a0;
  /* 通过率：三档动态 */
  --chip-passrate-good: #0fd056;
  /* 绿   ≥ 5%  */
  --chip-passrate-warn: #d97706;
  /* 橙   > 0%  */
  --chip-passrate-bad: #ed1717;
  /* 红   = 0%  */
  --chip-geo: #0198d3;
  --chip-proto: #8b5cf6;
  --chip-cf: #ed430b;
  --chip-vps: #6366f1;
  --chip-traffic: #e23b76;
  --chip-sub: #64748b;
}

:root[data-theme="dark"] {
  --chip-nodes: #0ea5a0;
  --chip-passrate-good: #16a34a;
  --chip-passrate-warn: #d97706;
  --chip-passrate-bad: #dc2626;
  --chip-geo: #0285d7;
  --chip-proto: #7c3aed;
  --chip-cf: #be5601;
  --chip-vps: #818cf8;
  --chip-traffic: #c11451;

  --chip-sub: #698ab8;
}

:root {
  --unlock-netflix: #e50914;
  --unlock-youtube: #ff0000;
  --unlock-disney: #113ccf;
  --unlock-tiktok: #00b881;
  --unlock-gpt: #0084bc;
  --unlock-gemini: #47be0c;
  /* --unlock-copilot: linear-gradient(135deg, #31bcfa, #f6707b, #a84ddf); */
  --unlock-copilot: #a84ddf;
  --unlock-iprisk: #f97316;
  --unlock-openai: #d34300;
  /* 与 GPT 同源 */

  /* 未匹配的平台回退色 */
  --unlock-media-fallback: var(--idle);
  --unlock-ai-fallback: var(--success);
}

:root[data-theme="dark"] {
  --unlock-tiktok: #06de9d;
  --unlock-gpt: #0da5e6;
  --unlock-disney: #3b5fe0;
  /* 深色背景下略提亮 */
  --unlock-gemini: #84bb0e;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-pingfang);
  overflow: hidden;
}

/* 按钮基础样式 */
.btn {
  padding: 8px 12px;
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease;
  backdrop-filter: blur(6px);
  font-size: 14px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

/* 头部logo栏 */
header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: var(--card);
  --wails-draggable: drag;
}

header.card {
  --wails-draggable: drag;
  border-radius: 0 0 12px 12px;
  border-top: none;
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-title {
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
}

.title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.title-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
}

.project-name {
  margin: 0;
  font-size: 20px;
  color: var(--accent);
  white-space: nowrap;
  /* 单行 */
}

.slogan {
  font-weight: 400;
  color: var(--fg);
  opacity: 0.8;
  font-size: 11px;
  width: 100%;
  /* 跟随 project-name 宽度 */
  display: block;
  text-align: justify;
  /* ← 两端对齐 */
  text-align-last: justify;
  /* 末行也强制两端对齐（单行时必须） */
  white-space: nowrap;
  /* 保持单行，否则 justify 按换行分布 */
  padding-right: 2px;
}

.pro-plus-wrap {
  width: 0;
  /* 在 flex 行中占零宽，不影响任何元素 */
  overflow: visible;
  /* 允许内容溢出显示 */
  position: relative;
  /* 作为 pro-plus 的定位基准 */
  align-self: flex-start;
  /* 不参与行高撑开 */
  margin-left: -4px;
}

.pro-plus {
  display: inline-block;
  position: absolute;
  top: -8px;
  /* left: -2px;                */
  font-weight: 700;
  font-size: 20px;
  color: #00b288;
  text-shadow:
    0 0 5px rgba(14, 165, 160, 0.8),
    0 0 10px rgba(14, 165, 160, 0.4);
  transform: skewX(-10deg);
  animation: neon-glow 2s infinite alternate;
  white-space: nowrap;
}

/* 如果是深色模式，微调阴影色 */
[data-theme="dark"] .pro-plus {
  filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.3));
}

@keyframes neon-glow {
  from {
    opacity: 0.8;
    filter: brightness(1);
  }

  to {
    opacity: 1;
    filter: brightness(1.3);
    text-shadow: 0 0 12px rgba(0, 255, 242, 0.68);
  }
}

/* Pro 会员金色样式 */
.pro-plus-golden {
  top: -8px;
  /* left: -2px;                */
  font-weight: 700;
  white-space: nowrap;
  vertical-align: super;
  /* 确保它是上标 */

  /* 金属渐变色 */
  background: linear-gradient(135deg,
      #fff5c3 0%,
      /* 高光 */
      #ffd700 25%,
      /* 标准金 */
      #fdb931 50%,
      /* 暖金 */
      #b8860b 100%
      /* 深金/古铜 */
    );

  /* 将背景裁剪到文字 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 增强质感的投影 */
  filter: drop-shadow(0 0 1px rgba(184, 134, 11, 0.5));

  /* 防止选中时变色 */
  user-select: none;

  /* 微弱的呼吸效果（可选，增加高级感） */
  animation: gold-shimmer 3s infinite ease-in-out;
}

@keyframes gold-shimmer {

  0%,
  100% {
    filter: drop-shadow(0 0 1px rgba(253, 185, 49, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 3px rgba(253, 185, 49, 0.8));
    transform: scale(1.05);
  }
}

.version {
  font-size: 11px;
  color: var(--muted);
  margin-left: 1px;
  padding: 1px 6px;
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
  cursor: help;
  position: relative;
  /* required for ::after "NEW" badge */
}

/* 当前是预览版时的样式 */
.version.is-pre {
  font-style: italic;
  opacity: 0.8;
}

/* 发现新版本 (稳定版) */
.version.new-version {
  background: rgba(0, 200, 210, 0.1);
  /* 青色透明背景 */
  color: var(--accent);
  border: 1px solid rgba(0, 200, 210, 0.2);
  font-weight: 500;
}

/* 发现新版本 (预览版) */
.version.new-version.pre-release {
  background: rgba(255, 152, 0, 0.1);
  /* 橙色背景 */
  color: #ff9800;
  border: 1px dashed rgba(255, 152, 0, 0.4);
}

/* 悬停反馈 */
.version:hover {
  background: var(--bg-soft);
  transform: translateY(-1px);
}

.version.new-version:hover {
  background: rgba(0, 200, 210, 0.2);
}

.version.new-version.pre-release:hover {
  background: rgba(255, 152, 0, 0.2);
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 主题切换 */
.theme-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Circle */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-btn .icon {
  font-size: 18px;
  line-height: 1;
}

.icon-btn:hover {
  box-shadow: var(--glass-shadow);
  background: linear-gradient(180deg, var(--bg-hover-1), var(--bg-hover-2));
}

/* 主题切换提示 */
.theme-label {
  display: none;
  margin-left: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* 卡片 */
.card {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px;
  overflow: hidden;
  box-shadow: 4px 4px 10px color-mix(in srgb, var(--card-shadow) 15%, transparent);
}

/* 主体布局 */
main {
  padding: 0;
  height: 100vh;
}

/* 三列布局容器 */
.layout {
  display: grid;
  gap: var(--gap);
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(170px, max-content) minmax(300px, 1fr) minmax(300px,
      1fr);
}

/* 父容器必须有min-height:0 否则日志会撑破容器 */
.content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* 侧边栏 */
.sidebar {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  user-select: none;
}

.sidebar.card {
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════
   侧边栏品牌块（大屏时替代顶部 header）
   参考 about 页 .aw-brand / .aw-ver-block 设计语言
══════════════════════════════════════════════════════════════ */
.sidebar-brand {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(var(--brand-top-height) + var(--brand-status-height) + 1px);
  /* +1px 分割线 */
  width: 100%;
  padding: 10px 14px 0;
  box-sizing: border-box;
  user-select: none;
  flex-shrink: 0;
}

.sb-brand-top {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--brand-top-height);
  min-width: 0;
}


.sb-logo-link {
  flex-shrink: 0;
  display: flex;
}

.sb-logo {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: block;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--fg) 5%, transparent));
  transition: transform 0.2s ease;
}

.sb-logo-link:hover .sb-logo {
  transform: scale(1.05);
}

.sb-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.sb-name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
}

.sb-pro {
  vertical-align: super;
}

.sb-sub {
  display: block;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  letter-spacing: 0.4px;
  line-height: 1.0;
  white-space: nowrap;
}


.sb-status-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 水平居中 */
  height: var(--brand-status-height);
  margin: 0 -14px;
  padding: 0 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 0 0 12px 12px;
  box-sizing: content-box;
  box-shadow: 2px 2px 10px color-mix(in srgb, var(--card-shadow) 10%, transparent);
  background: var(--input-bg);
  align-items: center;
  text-align: center;
}

.sb-status-row:hover {
  background: var(--bg-hover);
  box-shadow: 4px 4px 10px color-mix(in srgb, var(--card-shadow) 15%, transparent);
}

#versionInline.sb-ver-val,
#versionInline-analysis.sb-ver-val {
  flex: 1;
  font-size: 11px;
  font-family: var(--font-code);
  font-weight: 700;
  /* 与 .smr-proto-stat-val 的数值权重保持一致（800 略重，700 折中） */
  color: var(--muted);
  letter-spacing: 0.02em;
  /* 与 .smr-chip-label 的 letter-spacing 呼应 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: help;
}

.sidebar-top,
.sidebar-bottom {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--gap);
}

.sidebar-bottom {
  margin-top: auto;
}

.sidebar .title-wrap {
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
}

/* .sidebar .title { font-weight: 600; margin-bottom: 6px; } */
.sidebar-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ✅ 子项默认拉伸 */
}

.sidebar-icon {
  width: 14px;
  height: 14px;
  stroke-width: 1;
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0.5;
}

#sub-store.sidebar-icon {
  stroke-width: 0;
}

.list-item {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 14px;
  font-weight: 400;
  transition:
    background-color 0.12s ease,
    transform 0.08s ease;
  cursor: pointer;
  /* border-radius: 10px; */
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: center;
  /* 内容居中 */
  text-align: center;
}

/* 去掉第一个 list-item 的上边框 */
.sidebar-list .list-item:first-child {
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 12px 12px 0 0;
}


.list-item span {
  color: var(--muted);
  opacity: 1;
}

.list-item:hover {
  background: linear-gradient(180deg,
      var(--glass-bg),
      rgba(255, 255, 255, 0.02));
  box-shadow: var(--glass-shadow);
}

.list-item:hover span {
  opacity: 1;
}

.list-item:hover .sidebar-icon {
  opacity: 1;
}

/* 检查更新 - 有新版本时图标高亮 + 脉冲小点
   ::after 挂在 .sb-icon-wrap（普通 span）上，而不是 svg 本身，
   因为生成内容在 SVG 命名空间元素上跨内核支持不稳定 */
#siderBarCheckupdate .sb-icon-wrap {
  display: inline-flex;
  position: relative;
}

#siderBarCheckupdate.has-gui-update .sidebar-icon {
  color: var(--accent);
  opacity: 1;
}

#siderBarCheckupdate.has-gui-update .sb-icon-wrap::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: scp-update-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scp-update-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .35;
    transform: scale(.6);
  }
}

/* 点击后「检查中」：图标旋转（svg 本身支持 transform 动画，无需挂在 wrapper 上）*/
#siderBarCheckupdate.checking-update .sidebar-icon {
  animation: scp-spin 1s linear infinite;
}

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

.slide-menu {
  user-select: none;
}

/* 分享订阅菜单 */
#shareMenu {
  position: absolute;
  top: 0;
  /* 初始隐藏，JS 会动态定位到按钮下方 */
  left: 0;
  min-width: 160px;
  max-width: 200px;
  min-height: 0;
  background: var(--glass-bg);
  /* 半透明背景 */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  /* 玻璃磨砂效果 */
  border-radius: 1em;
  display: none;
  /* 默认隐藏 */
  z-index: 3000;
}

#shareMenu.active {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

#shareMenu .menu-header {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--bg);
}

#shareMenu .menu-content .list-item {
  margin: 0;
  padding: 8px 12px;
  /* 添加内边距，提升点击区域舒适度 */
  cursor: pointer;
  /* 明确指针样式 */
  border-radius: 0;
  transition: background-color 0.2s ease;
  /* 现代过渡动画 */
  cursor: copy;
}

#shareMenu .menu-content .list-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* 半透明 hover 效果，适配玻璃背景 */
}

#shareMenu .menu-content .list-item:first-of-type {
  border-radius: 1em 1em 0 0;
  padding-top: 10px;
}

#shareMenu .menu-content .list-item:last-of-type {
  border-radius: 0 0 1em 1em;
  padding-bottom: 10px;
}

#shareMenu .menu-content .list-item:only-of-type {
  border-radius: 1em;
}

/* 可访问性：键盘聚焦样式 */
#shareMenu .menu-content .list-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.15);
  outline-offset: 2px;
}

#projectMenu {
  position: absolute;
  top: 0;
  /* 初始隐藏，JS 会动态定位到按钮下方 */
  left: 0;
  min-width: 160px;
  max-width: 250px;
  padding: 26px 16px 18px 16px;
  min-height: 0;
  background: var(--glass-bg);
  /* 半透明背景 */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  /* 玻璃磨砂效果 */
  border-radius: 1em;
  display: none;
  /* 默认隐藏 */
  z-index: 3000;
}

#projectMenu.active {
  display: block;
}

.projectInfo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
  padding: 0px;
  color: var(--muted);
  font-size: 12px;
}

.project-icons {
  display: flex;
  gap: 20px;
}

.project-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.2s ease;
  filter: invert(var(--invert));
}

.project-icon:hover {
  transform: scale(1.15);
}

.project-copy {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.project-copy a {
  color: inherit;
  /* 跟随父元素颜色 */
  text-decoration: none;
  /* 去掉下划线 */
  font-weight: 500;
  /* 稍微加粗，保证可读性 */
  transition: color 0.2s ease;
}

.project-copy a:hover {
  color: var(--accent);
  /* 悬停时用主题强调色 */
  text-decoration: underline;
  /* 悬停时加下划线，提示可点击 */
}

/* 小动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 进度卡片 */
.progressCard {
  flex: 0 0 auto;
  overflow: hidden;
  width: 100%;
  user-select: none;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* padding-bottom: 12px; */
}

.progress-actions {
  flex: 0 0 auto;
  padding: 0 0px 0 0;
  margin-top: 4px;
}

/* 上次检测结果 */
.last-check-result {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* 圆形图标按钮 */
.toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-btn:hover:not(:disabled) {
  transform: translateY(-0px) scale(1.05);
  box-shadow: var(--glass-shadow);
  border-color: var(--glass-border-1);
  backdrop-filter: blur(8px) brightness(120%);
  background-color: transparent;
}

.toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  color: var(--prepare);
  background-color: color-mix(in srgb, var(--prepare) 10%, transparent);
  border-color: color-mix(in srgb, var(--prepare) 20%, transparent);
}

/* icon 样式：适配SVG */
.toggle-btn .btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  color: currentColor;
  /* 继承按钮自身的 color，由各状态各自控制 */
  transition: color 0.2s ease;
}

.toggle-btn .btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  /* 防止inline间隙 */
}

/* 状态样式 */
.toggle-btn.state-idle {
  background: color-mix(in srgb, var(--success) 5%, transparent);
  border-color: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.toggle-btn.state-idle:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.toggle-btn.state-starting {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--muted);
}

.toggle-btn.state-starting:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: color-mix(in srgb, var(--muted) 20%, transparent);
}

/* 准备中 */
.toggle-btn.state-preparing .btn-icon {
  width: 18px;
  height: 18px;
}

.toggle-btn.state-preparing {
  background: color-mix(in srgb, var(--prepare) 5%, transparent);
  border-color: color-mix(in srgb, var(--prepare) 15%, transparent);
  color: var(--prepare);
}

.toggle-btn.state-preparing:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--prepare) 10%, transparent);
  border-color: color-mix(in srgb, var(--prepare) 35%, transparent);
}

/* 检测中 */
.toggle-btn.state-checking {
  background: color-mix(in srgb, var(--danger) 5%, transparent);
  border-color: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

.toggle-btn.state-checking:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* 正在终止 */
.toggle-btn.state-stopping .btn-icon,
.toggle-btn.state-forcing .btn-icon {
  width: 22px;
  height: 22px;
}

.toggle-btn.state-stopping {
  background: color-mix(in srgb, var(--stopping) 5%, transparent);
  border-color: color-mix(in srgb, var(--stopping) 25%, transparent);
  color: var(--stopping);
}

.toggle-btn:disabled.state-stopping {
  background: color-mix(in srgb, var(--stopping) 10%, transparent);
  border-color: color-mix(in srgb, var(--stopping) 35%, transparent);
}

.toggle-btn.state-stopping:hover:disabled {
  background-color: color-mix(in srgb, var(--stopping) 10%, transparent);
  border-color: color-mix(in srgb, var(--stopping) 40%, transparent);
}

/* 强制中止 */
.toggle-btn.state-forcing {
  background: color-mix(in srgb, var(--forcing) 5%, transparent);
  border-color: color-mix(in srgb, var(--forcing) 25%, transparent);
  color: var(--forcing);
}

.toggle-btn:disabled.state-forcing {
  background: color-mix(in srgb, var(--forcing) 10%, transparent);
  border-color: color-mix(in srgb, var(--forcing) 35%, transparent);
}

.toggle-btn.state-forcing:hover:disabled {
  background-color: color-mix(in srgb, var(--forcing) 10%, transparent);
  border-color: color-mix(in srgb, var(--forcing) 40%, transparent);
}

/* 进度信息 */
.progress-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 避免撑破父容器 */
  min-width: 0;
}

.progress-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  gap: var(--gap);
  margin-top: 6px;
}

#progressPercent {
  color: var(--muted);
}

.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 进度条优化 */
.progress-bar-wrap progress {
  flex: 1;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--border);
  border: none;
}

.progress-bar-wrap progress::-webkit-progress-bar {
  background-color: var(--border);
  border-radius: 2px;
}

.progress-bar-wrap progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 2px;
  transition: width 0.3s ease;
  animation: progressShimmer 2s ease-in-out infinite;
}

.progress-bar-wrap progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 2px;
  transition: width 0.3s ease;
}

#progressText {
  font-size: 12px;
  color: var(--muted);
}

/* 闪烁效果 */
@keyframes pulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.success-highlight {
  animation: pulse 1.5s infinite;
  font-weight: bold;
  color: #28a745;
  padding: 0 2px;
  border-radius: 3px;
  background-color: rgba(40, 167, 69, 0.1);
}

.available-highlight {
  font-weight: bold;
  color: #28a745;
  padding: 0 2px;
  border-radius: 3px;
  background-color: rgba(40, 167, 69, 0.1);
}

.log-new-version {
  border-bottom: 1px solid var(--accent);
}

@keyframes progressShimmer {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

.history-placeholder {
  padding: 0px 0px;
  border-radius: 8px;
  background: var(--card, transparent);
}

.history-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

/* 默认小屏显示精简版 */
.history-full {
  display: none;
}

.history-short {
  display: inline;
}

.icon-small {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  margin-top: 4px;
}

.btn.small {
  padding: 4px;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  background: transparent;
}

/* ── mobileBtns：小屏右侧操作按钮组 ── */
.mobileBtns {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 按钮间距，可调大至 4px */
  flex-shrink: 0;
}

.mobileBtns .btn.small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}

.mobileBtns .btn.small:hover {
  color: var(--fg);
  /* background: color-mix(in srgb, var(--fg) 6%, transparent); */
  transform: none;
  /* 覆盖 .btn:hover 的上移效果 */
  /* box-shadow: none; */
}

#btnlogoutMobile:hover {
  color: var(--danger);
}

.mobileBtns .btn.small .btn-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
  color: inherit;
  /* 跟随按钮颜色变化 */
}

/* Sub-Store 填充型图标微调（无描边） */
.mobileBtns #btnSubStore svg {
  stroke: none !important;
  width: 15px !important;
  height: 15px !important;
}

.history-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  /* 确保宽度被限制 */
  width: 100%;
  min-width: 0;
  user-select: text;
}

.history-line {
  /* Flex 布局设置 */
  min-width: 0;
  flex: 1;

  /* 样式 */
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  /* 增加一点行高，多行显示时更美观 */

  /* 换行核心设置 */
  white-space: normal;
  /* 允许文本换行 */
  word-break: break-all;
  /* 关键：允许在任意字符间换行（防止长数字/长网址撑破容器） */
  overflow-wrap: anywhere;
  /* 现代浏览器辅助属性，增强断行能力 */

  text-overflow: clip;
  /* 换行模式下不需要省略号 */

  /* 文本截断 */
  /* white-space: nowrap;  */
  /* 强制不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  /* text-overflow: ellipsis;  */
  /* 显示省略号 */
  user-select: text;
}

/* ==================== 交互式分析摘要 ==================== */

.analysis-feather-tip {
  border-top: 1px solid var(--border);
  background: var(--input-bg);
  padding: 0;
  /* 内边距交给内部元素，方便控制点击区域 */
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: -12px;
  margin-top: 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 交互标题栏 */
.summary-toggle-header {
  opacity: 0.8;
  margin-top: 0px;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.summary-toggle-header:hover {
  background: var(--bg-hover);
}

.summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.summary-analysis-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 6px 0;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.summary-analysis-btn svg {
  opacity: 0.6;
  transition: opacity 0.15s;
}

.summary-analysis-btn:hover {
  color: var(--accent);
}

.summary-analysis-btn:hover svg {
  opacity: 1;
}

.icon-spark {
  width: 14px;
  height: 14px;
}

.icon-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  color: var(--muted);
}

/* ── content-wrapper ── */
.summary-content-wrapper {
  max-height: calc(100dvh - 200px);
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s;
  opacity: 1;
}

/* ── 胶囊分组 ── */
.smr-group {
  padding: 0px 16px 4px;
}

.smr-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ── 胶囊行 ── */
.smr-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 4px;
}

/* ── 单个胶囊 ── */
.smr-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}

.smr-chip-label {
  padding: 3px 4px 3px 8px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.smr-chip-val {
  padding: 3px 8px 3px 3px;
  font-weight: 700;
  color: var(--fg);
}

.smr-chip-unlock {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

.smr-chip-unlock .smr-chip-label {
  color: var(--accent);
}

/* ── smr-grid：地图 + 协议容器 ── */
.smr-grid {
  border-top: 1px solid var(--glass-bg);
  margin-top: 2px;
}

.smr-section+.smr-section {
  border-top: 1px solid var(--glass-bg);
}

.smr-section {
  padding: 0 16px;
  min-width: 0;
}

/* ── 子区块标题行 ── */
.smr-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
  cursor: pointer;
  user-select: none;
}

.smr-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.85;
  transition:
    opacity 0.15s,
    color 0.15s;
  margin: 0;
}

.smr-sub-header:hover * {
  color: var(--fg);
  opacity: 1;
}

.smr-sub-chevron {
  width: 13px;
  height: 13px;
  color: var(--muted);
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.smr-section.smr-sub-open .smr-sub-chevron {
  transform: rotate(0deg);
  opacity: 0.9;
}

/* ── 子区块内容体折叠动画 ── */
.smr-sub-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 大屏：地图160 + 色条+标签60 + padding ≈ 240；协议统计52 + donut96 + 色条20 + padding ≈ 200 */
.smr-section.smr-sub-open .smr-sub-body {
  max-height: 320px;
  padding-bottom: 10px;
}

/* ── 迷你地图 ── */
.smr-map-slot {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 260px;
  border-radius: 7px;
  overflow: hidden;
  background: #060d1a;
  position: relative;
}

/* ── 大区色条 ── */
.smr-region-bar {
  display: flex;
  height: 4px;
  border-radius: 99px;
  overflow: hidden;
  gap: 1px;
  margin-top: 7px;
}

.smr-region-seg {
  height: 100%;
  border-radius: 1px;
}

.smr-region-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
}

.smr-region-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  white-space: nowrap;
}

.smr-region-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.smr-region-name {
  font-weight: 600;
  color: var(--fg);
}

.smr-region-val {
  font-weight: 700;
  color: var(--fg);
}

.smr-region-pct {
  font-size: 9px;
  color: var(--muted);
}

/* ── 迷你协议统计行 ── */
.smr-proto-stat-row {
  display: flex;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  margin-bottom: 8px;
  overflow: hidden;
}

.smr-proto-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}

.smr-proto-stat-item:last-child {
  border-right: none;
}

.smr-proto-stat-val {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smr-proto-stat-label {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── 迷你协议列表 ── */
.smr-proto-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smr-proto-wrap>svg {
  flex-shrink: 0;
  width: 64px !important;
  height: 64px !important;
}

.smr-proto-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* 大屏受 smr-sub-body max-height 约束，无需重复限制 */
  overflow: hidden;
}

.smr-proto-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.smr-proto-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.smr-proto-name {
  font-size: 9px;
  font-weight: 700;
  width: 46px;
  flex-shrink: 0;
}

.smr-proto-bar-wrap {
  flex: 1;
  height: 4px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 99px;
  overflow: hidden;
}

.smr-proto-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}

.smr-proto-pct {
  font-size: 9px;
  color: var(--muted);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

.smr-stack-bar {
  display: flex;
  height: 4px;
  border-radius: 99px;
  overflow: hidden;
  gap: 1px;
  margin-top: 8px;
}

/* ── 完整报告按钮 ── */
.summary-analysis-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition:
    color 0.15s,
    background 0.15s;
}

.summary-analysis-btn svg {
  opacity: 0.5;
  transition: opacity 0.15s;
}

.summary-analysis-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.summary-analysis-btn:hover svg {
  opacity: 1;
}

/* ── 折叠状态 ── */
.analysis-feather-tip.collapsed .summary-content-wrapper {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.analysis-feather-tip:not(.collapsed) .tip-content {
  padding-top: 6px;
}

.analysis-feather-tip.collapsed .summary-toggle-header {
  background-color: color-mix(in srgb,
      var(--bg-summary) 80%,
      transparent);
  /* 展开时背景色 */
}

.analysis-feather-tip.collapsed .summary-toggle-header:hover {
  background-color: color-mix(in srgb,
      var(--bg-hover) 80%,
      transparent);
  /* 展开时背景色 */
}

/* 展开状态（没有 collapsed 类时） */
.analysis-feather-tip:not(.collapsed) .summary-toggle-header {
  background-color: color-mix(in srgb,
      var(--bg-hover) 60%,
      transparent);
  /* 展开时背景色 */
  border-bottom: 1px solid var(--bg-hover);
}

.analysis-feather-tip:not(.collapsed) .summary-toggle-header:hover {
  background-color: var(--bg-hover);
}

.analysis-feather-tip.collapsed .icon-chevron {
  transform: rotate(-90deg);
}

.btn-icon {
  color: var(--muted);
}

.title-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1;
  padding-top: 3px;
}

.icon-md-btn {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  color: color-mix(in srgb, var(--bg-hover) 100%, var(--fg) 100%);
}

.btn-round {
  border-radius: 50%;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

#saveCfg svg {
  color: var(--accent);
}

#btnlogoutMobile,
#btnShare,
#btnSubStore,
#btnFiles,
#btnProjectInfo,
#btnAnalysis {
  display: none;
}

.card-header {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  padding-left: 4px;
  user-select: none;
}

.title-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.title-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 8px;
  align-items: center;
  user-select: none;
}

.title-text {
  font-weight: 600;
}

.card-action {
  display: flex;
  flex-direction: row;
  gap: 0px;
}

.title-status {
  font-weight: 600;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
}

.card-tip {
  padding-right: 1em;
  user-select: text;
  opacity: 0.5;
}

.logsCard .card-tip {
  user-select: none;
  cursor: default;
}

.muted {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}

/* 日志卡片 */
.logsCard {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ── 日志折叠按钮：大屏默认隐藏 ── */
.logs-collapse-btn {
  display: none;
}

.collapse-icon .arrow-top,
.collapse-icon .arrow-bot,
.collapse-icon .dash-mid {
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    stroke-dashoffset 0.5s ease;
}

.collapse-icon .arrow-top {
  transform-origin: 12px 4.5px;
}

.collapse-icon .arrow-bot {
  transform-origin: 12px 19.5px;
}

/* 展开态（默认）：箭头朝内 ↓—↑，暗示"点击可折叠" */
.collapse-icon .dash-mid {
  opacity: 0.2;
}

/* 折叠态：旋转 180° */
.logs-collapse-btn[aria-expanded="false"] .arrow-top {
  transform: rotate(180deg);
}

.logs-collapse-btn[aria-expanded="false"] .arrow-bot {
  transform: rotate(180deg);
}

.logs-collapse-btn[aria-expanded="false"] .dash-mid {
  opacity: 0.1;
  stroke-dashoffset: 2;
}

/* 状态标签 */
.status-label {
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
  line-height: 1.4;
  cursor: default;
}

.status-idle {
  color: var(--accent);
}

.status-prepare {
  color: var(--prepare);
}

.status-calculating {
  color: var(--calculating);
}

.status-process {
  color: var(--success);
}

.status-stopping {
  color: var(--stopping);
}

.status-forcing {
  color: var(--forcing);
}

.status-logged {
  color: var(--success);
}

.status-checking {
  color: var(--warning);
}

.status-error {
  color: var(--danger);
}

.logs-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.7;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;

  background: var(--logs-bg);
  /* border: 1px solid var(--border); */
  border-radius: 8px;
  /* 内阴影*/
  box-shadow: inset 0 0 12px var(--window-shadow);
  /* 水平/垂直偏移0，模糊10px，浅黑阴影 */
}

.logs-wrapper:hover {
  /* border-color: var(--accent); */
  box-shadow: inset 0 0 15px var(--window-shadow-hover);
  opacity: 1;
}

/* 日志颜色样式 */
.log-info {
  color: #28a745;
}

/* 绿色 */
.log-error {
  color: #dc3545;
}

/* 红色 */
.log-warn {
  color: #ffc107;
}

/* 黄色 */
.log-debug {
  color: #17a2b8;
}

/* 青色 */
.log-time {
  color: #6c757d;
}

/* 灰色 */

/* 编辑器 */
.editorCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 编辑器容器 */
/* TODO: 移除左右下方边距？ */
.editor-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  /* margin-top: 20px; */
  overflow: hidden;

  background: transparent;
  border-radius: 10px;
  box-shadow: inset 0 0 12px var(--edit-shadow);
  /* 水平/垂直偏移0，模糊12px，浅黑阴影 */

  transition: all 0.2s ease;
}

.editor-wrapper:hover {
  box-shadow: inset 0 0px 12px var(--edit-shadow-hover);
  /* Hover 增强阴影 */
  transform: translateY(-1px);
  /* 微抬升效果 */
}

.editor-wrapper:focus-within {
  box-shadow: none;
}

#configEditor,
.cm-editor {
  /* position: absolute; */
  /* inset: 0; */
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: inherit;
  background: transparent !important;
  overflow-y: auto;
  overflow-x: hidden;
  /* 移动设备保证 16px 以避免 iOS 放大 */
  font-size: 15px;
}

.cm-editor.cm-focused {
  box-shadow: inset 0 0 8px var(--accent-light);
}

/* 选择区域背景 */
/* .cm-focused .cm-selectionBackground,
::selection {
  background: var(--edit-shadow-hover) !important;
} */

.cm-focused .cm-cursor {
  border: 1px solid var(--accent) !important;
}

/* 自动完成提示 */
.cm-tooltip-autocomplete {
  &>ul>li[aria-selected] {
    background: rgba(0, 197, 201, 0.7) !important;
    color: var(--fg) !important;
    font-weight: 600;
  }
}

.cm-content {
  padding: 16px 4px 16px 0px !important;
  /* 增加内边距，呼吸感 */
  background: var(--content-bg) !important;
  white-space: pre-wrap !important;
  /* 软换行 */
  word-break: break-word !important;
  /* 长词断行 */
}

/* 换行视觉美化（折叠行轻缩进） */
.cm-line {
  padding-left: 0.5em;
  /* 每行轻微左缩，视觉层次 */
  transition: background-color 0.1s ease;
}

/* Gutter（行号）美化 */
.cm-gutters {
  background: var(--gutter-bg) !important;
  border-right: 1px solid var(--glass-border);
  /* 细分隔线 */
  user-select: none;
  padding: 0;
  /* 与内容对齐 */
}

.cm-lineNumbers {
  color: var(----muted) !important;
  font-size: 12px !important;
  /* 小字体 */
  font-weight: 500;
  /* 半粗体，突出 */
}

.cm-boolean-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.cm-placeholder {
  background: var(--placehoder-bg);
  border: 1px solid var(--bg);
  color: var(--fg) !important;
  font-weight: 500;
  padding: 0 4px;
  border-radius: 8px;
  /* font-style: italic; */
  align-items: center;
}

.cm-panels.cm-panels-top {
  border: none;
  background: var(--gutter-bg) !important;
  box-shadow: 1px 1px 10px var(--accent-light);
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

/* Toast 通知 */
#toastContainer {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  /* ✅ 避免挡住页面点击 */
}

.toast {
  position: relative;
  /* ✅ 让进度条定位在内部 */
  min-width: 50px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 4px;

  color: var(--fg);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
  animation: toastIn 0.4s ease;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  border-radius: 6px;
  border-left: 6px solid transparent;
  /* 默认透明，后面按类型覆盖 */
}

.toast .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  width: 100%;
  animation: toastProgress linear forwards;
  border-radius: 0 0 8px 8px;
  /* 和卡片圆角一致 */
}

@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast .icon {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
}

/* .toast.info .icon    { background-color: #3b82f6; }
.toast.success .icon { background-color: #22c55e; }
.toast.warn .icon    { background-color: #f59e0b; }
.toast.error .icon   { background-color: #ef4444; } */

.toast.info {
  border-left-color: #3b82f6;
}

.toast.info .progress-bar {
  background-color: #3b82f6;
}

.toast.success {
  border-left-color: #22c55e;
}

.toast.success .progress-bar {
  background-color: #22c55e;
}

.toast.warn {
  border-left-color: #f59e0b;
}

.toast.warn .progress-bar {
  background-color: #f59e0b;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast.error .progress-bar {
  background-color: #ef4444;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* 登录窗口 */
.login-modal {
  --wails-draggable: drag;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  user-select: none;
  overflow: hidden;

  /* 三层背景叠加：底色 + 左上角主题光晕 + 右下角次光晕 */
  background:
    radial-gradient(ellipse 70% 55% at 18% 22%,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 70%),
    radial-gradient(ellipse 55% 45% at 82% 78%,
      color-mix(in srgb, var(--accent-2) 5%, transparent),
      transparent 70%),
    var(--bg);
}

/* 点阵背景纹理（轻量，烘托层次感） */
.login-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle,
      color-mix(in srgb, var(--fg) 6%, transparent) 1px,
      transparent 1px);
  background-size: 26px 26px;
  z-index: 0;
}

/* 星际连线粒子画布 */
#login-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* 夹在点阵和卡片之间 */
}

/* 保证卡片在粒子层之上 */
.login-card {
  width: 400px;
  max-width: 95%;
  border-radius: 20px;
  padding: 36px 28px 30px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  position: relative;
  align-items: center;
  z-index: 10;

  /* 玻璃态背景：card 色 + backdrop blur */
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);

  box-shadow:
    2px 2px 10px color-mix(in srgb, var(--card-shadow) 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);

  animation: logoFloat 5s ease-in-out infinite;
}

/* 卡片右上角环境光晕（向右上方散射，增加立体悬浮感） */
.login-card::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0px;
  transform: translateX(80%);
  width: 55%;
  height: 50px;
  background: radial-gradient(ellipse,
      color-mix(in srgb, var(--accent-2) 10%, transparent),
      transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
}

/* 卡片底部环境光晕（向下散射，增强悬浮感） */
.login-card::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 20%;
  transform: translateX(-70%);
  width: 65%;
  height: 56px;
  background: radial-gradient(ellipse,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 70%);
  filter: blur(22px);
  pointer-events: none;
  z-index: -1;
}

/* Logo 上下悬浮动画 (这个很清爽，建议保留) */
.login-logo {
  animation: logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}


.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.login-title {
  position: relative;
  display: inline-block;
  width: fit-content;
  /* 容器宽度收缩到文字 */
  line-height: 1;
}

.login-plus {
  font-size: 1.2em;
  vertical-align: super;
}

.login-card h3 {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
}

.login-text {
  margin-left: 10px;
}

/* 版本号 */
/* 基础样式 */
.version-badge {
  position: absolute;
  bottom: 2.2em;
  left: 100%;
  /* 起点在文字末尾 */
  margin-left: 0px;
  /* 固定间距 */
  color: var(--muted);
  font-size: 13px;
  font-weight: normal;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  cursor: help;
}

.version-badge.is-pre {
  right: -3.5em;
  margin-left: -3em;
  /* 固定间距 */
}

/* 当前版本是预览版时的表现 */
#version-login.is-pre {
  font-style: italic;
}

/* 发现新版本时的通用样式 (有动效提醒) */
.new-version {
  background: rgba(0, 200, 210, 0.1);
  box-shadow: 0 0 4px rgba(0, 200, 210, 0.4);
  color: var(--accent) !important;
  animation: version-pulse 2s infinite;
}

/* 发现更新时的通用角标（NEW/PRE） */
.new-version::after {
  position: absolute;
  top: -1.3em;
  right: 0;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  /* 稍微方一点更有标签感 */
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 状态 1：正式版更新 - 红色 NEW */
.new-version::after {
  content: "NEW";
  background: #e53935;
}

/* 状态 2：预览版更新 - 橙色 PRE (覆盖正式版样式) */
.new-version.pre-release::after {
  content: "PRE";
  /* 建议使用 PRE */
  background: #ff9800;
}

/* 当新版本是预览版 (Beta/RC) 时的特殊样式 */
.new-version.pre-release {
  background: rgba(255, 152, 0, 0.1);
  /* 橙色背景 */
  box-shadow: 0 0 4px rgba(255, 152, 0, 0.4);
  color: #ff9800 !important;
  /* 橙色文字 */
  border: 1px dashed rgba(255, 152, 0, 0.5);
  /* 虚线边框暗示不稳定 */
}

/* 悬停效果 */
.new-version:hover {
  background: rgba(0, 200, 210, 0.2);
  transform: scale(1.05);
}

.new-version.pre-release:hover {
  background: rgba(255, 152, 0, 0.2);
}

/* 呼吸灯动画 */
@keyframes version-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

/* ── 侧边栏版本更新提示（.sb-status-row 专用） ── */
.sb-status-row.sb-has-update {
  cursor: pointer;
  background: color-mix(in srgb, var(--accent) 0%, var(--input-bg));
  border-color: color-mix(in srgb, var(--accent) 8%, transparent);
  transition: background 0.2s, border-color 0.2s;
}

.sb-status-row.sb-has-update:hover {
  background: color-mix(in srgb, var(--success) 14%, var(--input-bg));
}

.sb-status-row.sb-has-update::after {
  content: "NEW";
  position: absolute;
  top: -8px;
  right: 10px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.5;
  white-space: nowrap;
  background: #e53935;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

.sb-status-row.sb-has-update.sb-pre-release::after {
  content: "PRE";
  background: #ff9800;
}

/* apikey输入框 */
.input-wrapper {
  min-width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 1.5em;
  background: color-mix(in srgb, var(--input-bg) 20%, transparent);
  padding: 0 20px;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--edit-shadow) 60%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper:hover {
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--edit-shadow-hover) 30%, transparent);
}


.login-input {
  flex: 1;
  width: 100%;
  color: var(--muted);
  font-size: 16px;
  /* >=16px 防止 iOS 放大 */
  border: none;
  background: transparent;
  padding: 1em 0;
  outline: none;
}

/* 显示隐藏apikey输入 */
.show-apikey {
  padding-left: 6px;
  margin-right: -6px;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted-hard);
  transition: color 0.15s;
}

/* 当需要显示时添加 .visible（JS 控制） */
.show-apikey.visible {
  display: block;
}

/* 显示密码时的颜色 */
.show-apikey.active {
  color: var(--accent);
}

/* 记住密钥块 */
.remember-wrapper {
  min-width: 100%;
  margin-top: -6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1em;
}

/* 记住密钥 */
.remember-row {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.remember-hint {
  color: var(--muted);
  font-size: 12px;
  opacity: 0.3;
}

.apikey-hint {
  color: var(--muted);
  font-size: 11px;
  opacity: 0.3;
  text-align: left;
  margin-top: 4px;
  display: none;
}


/* 登录按钮 */
.login-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* 登录按钮 */
#login-button {
  padding: 13px 24px;
  margin: 8px 0 0;
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: var(--glass-shadow);
  font-size: 16px;
  border-radius: 2em;
  border: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
  cursor: pointer;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
  transition: all 0.2s ease;
}

#login-button.btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.006);
  box-shadow: var(--glass-shadow);
  border-color: var(--glass-border);
  backdrop-filter: blur(8px) brightness(120%);
  /* color: var(--fg); */
}

.login-actions {
  display: flex;
  justify-content: center;
}

.login-hidden {
  display: none !important;
}

/* 新版本提醒样式也复用 .new-version 的逻辑，保证三处版本号视觉统一 */
.sb-ver-block:has(.new-version) {
  border-color: rgba(0, 200, 210, 0.2);
}

/* 登录框专属主题切换按钮（大屏顶栏隐藏后使用） */
.login-theme-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
}

.login-theme-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-light);
}

/* 登录窗口主题切换始终固定在视口（背景）右上角，
   不随登录卡片移动，也不会与（被登录层遮挡的）顶栏按钮重复 */
.login-theme-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10001;
}

@media (min-width: 768px) {
  .login-theme-btn {
    top: 24px;
    right: 24px;
  }
}

/* ════════════════════════════════════════════════════════════
   大屏 ≥ 900px
════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .theme-label {
    display: inline-block;
  }

  .footer {
    display: none;
  }

  /* 大屏：隐藏顶栏，侧边栏接管品牌展示 */
  header {
    display: none !important;
  }

  .sidebar-brand {
    display: flex;
  }
}

/* ════════════════════════════════════════════════════════════
   中屏 ≥ 640px
════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .history-full {
    display: inline;
  }

  .history-short {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   小屏 ≤ 899px
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --gap: 10px;
  }

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-light);
  }

  /* ── 布局 ── */
  html,
  body {
    overflow: auto;
  }

  /* .card {
    border-radius: 16px;
  }

  header {
    margin-top: var(--gap);
    height: calc(var(--header-height) * 1.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }

  .summary-toggle-header {
    opacity: 0.8;
    margin-top: 0px;
    padding: 7px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
  }
  body {
    padding: 0 6px;
  } */
  main {
    padding: var(--gap) 0;
    height: auto;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .content .progressCard {
    flex: 0 0 auto;
    overflow: hidden;
  }

  /* ── 顶栏 / 导航 ── */
  .logo {
    width: 38px;
    height: 38px;
  }

  .project-name {
    margin-bottom: -1px;
  }

  .slogan {
    font-weight: 300;
    opacity: 0.8;
    padding-right: 1px;
  }

  .siderbar-wrapper {
    display: none;
  }

  /* ── 移动端按钮 ── */
  .toggle-btn {
    margin: 0 -4px 0 0;
  }

  #btnlogoutMobile,
  #btnShare,
  #btnSubStore,
  #btnFiles,
  #btnProjectInfo,
  #btnAnalysis {
    display: inline-block;
  }

  /* ── 卡片 ── */
  .logsCard,
  .editorCard {
    height: calc(100vh - var(--mobile-subtract));
    min-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .logs-wrapper {
    font-size: 13px;
    flex: 1;
    overflow-y: auto;
  }

  /* 小屏显示折叠按钮 */
  .logs-collapse-btn {
    display: inline-flex;
  }

  /* ── 折叠箭头过渡动效 ── */
  .logs-chevron {
    transition: transform 0.3s ease;
  }

  /* 折叠后日志卡片高度收缩（避免撑高页面） */
  .logsCard.logs-card-collapsed {
    height: auto;
    min-height: unset;
    padding-bottom: 0;
  }

  /* ── 日志内容区：折叠状态 ── */
  .logs-wrapper {
    transition:
      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease,
      padding 0.25s ease;
    max-height: 2000px;
    opacity: 1;
  }

  /* 折叠状态：高度归零 + 淡出 */
  .logs-wrapper.logs-collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* ── 历史记录 ── */
  .history-placeholder {
    margin: 0;
  }

  .history-title {
    margin-top: 0;
  }

  /* ── Toast ── */
  .toast {
    border-radius: 6px;
    border-left: 6px solid transparent;
  }

  .toast .progress-bar {
    height: 1px;
  }

  /* ── 提示 ── */
  .tip-content {
    font-size: 12px;
  }

  /* ── 编辑器：避免 iOS 自动放大 ── */
  #configEditor,
  .cm-editor {
    font-size: 16px;
  }

  .cm-lineNumbers {
    font-size: 11px !important;
    font-weight: 400;
  }

  /* ── 地图 ── */
  .smr-map-slot {
    aspect-ratio: 16 / 7;
    max-height: none;
  }

  /* ── Summary ── */
  .smr-section.smr-sub-open .smr-sub-body {
    max-height: none;
    overflow: visible;
    padding-top: 12px;
  }

  .summary-content-wrapper {
    max-height: none;
    overflow: visible;
  }

  .smr-group {
    padding: 6px 16px 4px;
  }

  .smr-chip-row {
    padding-bottom: 0;
  }

  /* ── Footer ── */
  .footer {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
    padding: 16px;
    color: var(--muted);
    font-size: 12px;
    user-select: none;
  }

  .footer-icons {
    display: flex;
    gap: 20px;
  }

  .footer-icon {
    width: 22px;
    height: 22px;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: invert(var(--invert));
  }

  .footer-icon:hover {
    transform: scale(1.15);
  }

  .footer-copy a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .footer-copy a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  /* ── 弹窗 ── */
  #shareMenu {
    z-index: 2000;
  }
}

/* ════════════════════════════════════════════════════════════
   小屏 ≤ 576px
════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .smr-map-slot {
    aspect-ratio: 16 / 7;
  }
}

/* ════════════════════════════════════════════════════════════
   最小屏 ≤ 375px
════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .mobileBtns {
    position: relative;
    right: -2px;
    gap: 1px;
  }

  .mobileBtns .btn.small {
    width: 30px;
    height: 24px;
  }

  .idle {
    width: 100%;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
    padding-right: 6px;
  }
}

/* 避免在触屏上残留 hover 状态，整体移入 media query */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow);
    background: linear-gradient(180deg,
        var(--glass-bg),
        rgba(250, 250, 250, 0.02));
    border-color: var(--glass-border);
    color: var(--fg);
    transition: all 0.3s ease;
  }
}

/* 触屏：改用 :active，按下有反馈，松开立即复原，不残留 */
@media (hover: none) {
  .btn:active:not(:disabled) {
    /* 只保留轻量反馈，去掉位移和阴影（位移在触屏上感觉"抖动"） */
    background: linear-gradient(180deg,
        var(--glass-bg),
        rgba(250, 250, 250, 0.02));
    border-color: var(--glass-border);
    color: var(--fg);
    /* 按下瞬间响应，不需要过渡 */
    transition: all 0.3s ease;
  }
}

/* 鼠标/触控板 */
@media (hover: hover) and (pointer: fine) {
  .btn-round:hover {
    background: linear-gradient(180deg,
        var(--glass-bg),
        rgba(250, 250, 250, 0.005));
    border-color: var(--glass-border);
    /* 只过渡实际变化的属性，避免 all 触发不必要的重绘 */
    transition:
      background 0.3s ease,
      border-color 0.3s ease;
  }
}

/* 触屏：瞬间反馈，松开立即复原 */
@media (hover: none) {
  .btn-round:active {
    background: linear-gradient(180deg,
        var(--glass-bg),
        rgba(250, 250, 250, 0.001));
    border-color: var(--glass-border);
    transition: none;
  }
}

/* 仅鼠标设备启用 hover */
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    transform: rotate(45deg);
    transition: all 0.3s ease;
  }
}

/* 触屏：:active 瞬间反馈，去掉 rotate（旋转在触屏上同样会"抖动"后粘住） */
@media (hover: none) {
  .theme-toggle:active {
    transition: all 0.3s ease;
    /* 不加 rotate，触屏上位移/旋转类效果体验差 */
  }
}

/* ══════════════════════════════════════════════════════════════