/* ============================================================
 *  Kipfel 站点总览 · 抹茶奶绿（亮） / 冷灰 240（暗）
 *  —— 展示（图标 / 站名 / 描述 / 跳转）+ 状态（可用率 / 延迟 / 收录）
 *
 *  派生规则：只给基准色，其余同色相按 OKLCH 的 L / C 递推，
 *  避免手写 hex 造成色相漂移。每组对比度都按 WCAG 校验过。
 * ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- 亮色 · 抹茶奶绿 ----------
 * 基准：bg #f4f6ee · surface #ffffff · ink #26301f
 *       border #e2e8d5 · primary #56793f · accent #d18f3c
 */
:root {
  --paper: #f4f6ee;
  --paper-deep: #eaeee1;
  --card: #ffffff;
  --card-hover: #f9fbf6;

  --ink: #26301f;
  --ink-soft: #495443;
  --muted: #636d57;                /* 基准 #6f7a63 在本底色上只有 4.15:1，压深至 5.00:1 */

  --rule: #e2e8d5;
  --rule-soft: #eff2e8;

  --accent: #56793f;
  --accent-hover: #45672d;
  --accent-soft: #ecf9e4;
  --accent-soft-2: #d6eacb;
  --accent-dim: #b4c4ab;           /* 在线但偏慢 */
  --on-accent: #ffffff;

  --second: #d18f3c;               /* 图形用：状态点 / 进度条 */
  --second-ink: #995b00;           /* 文字用：#d18f3c 当文字只有 2.5:1，压深至 5.4:1 */
  --second-soft: #ffedd5;

  --danger: #a63931;
  --danger-soft: #ffe2dd;

  --radius-soft: 0.625rem;
  --radius-card: 0.875rem;
  --radius-note: 0.875rem;

  --shadow: 0 1px 2px rgb(38 48 31 / 0.06);
  --shadow-hover: 0 6px 20px -6px rgb(38 48 31 / 0.16), 0 1px 3px rgb(38 48 31 / 0.07);
  --shadow-dock:
    0 1px 0 rgb(255 255 255 / 0.7) inset,
    0 10px 30px -12px rgb(38 48 31 / 0.16),
    0 2px 6px -2px rgb(38 48 31 / 0.05);
  --shadow-dock-scrolled:
    0 1px 0 rgb(255 255 255 / 0.7) inset,
    0 14px 38px -12px rgb(38 48 31 / 0.22),
    0 3px 8px -2px rgb(38 48 31 / 0.09);
  --shadow-pill:
    0 1px 0 rgb(255 255 255 / 0.16) inset,
    0 2px 8px -2px rgb(86 121 63 / 0.34);

  --t-fast: 90ms;
  --t: 150ms;
  --t-mid: 200ms;
  --t-slow: 260ms;
  --ease-paper: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pill: cubic-bezier(0.34, 1.15, 0.64, 1);

  --page-max: 78rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 深色 · 冷灰（hue 240） ----------
 * 基准：bg #191a1c · surface oklch(.23 .006 240 / .75)
 *       ink #f2f3f6 · border rgba(255,255,255,.075)
 *       primary oklch(.72 .02 240) · onPrimary oklch(.15 .005 240)
 */
html.dark {
  --paper: #191a1c;
  --paper-deep: #131416;
  --card: oklch(0.23 0.006 240 / .75);
  --card-hover: oklch(0.27 0.007 240 / .82);

  --ink: #f2f3f6;
  --ink-soft: oklch(0.80 0.009 240);
  --muted: #868a96;

  --rule: rgba(255, 255, 255, .075);
  --rule-soft: rgba(255, 255, 255, .045);

  --accent: oklch(0.72 0.02 240);
  --accent-hover: oklch(0.79 0.02 240);
  --accent-soft: oklch(0.30 0.012 240);
  --accent-soft-2: oklch(0.37 0.016 240);
  --accent-dim: oklch(0.46 0.018 240);   /* 在线但偏慢 */
  --on-accent: oklch(0.15 0.005 240);

  /* 基准里 primary 与 accent 都是 hue 240 浅灰（L 均 0.72，C 0.02 / 0.04），
     若照搬，"在线"和"偏慢"会变成同一个颜色。这里把偏慢改为琥珀色。 */
  --second: oklch(0.78 0.115 72);
  --second-ink: oklch(0.83 0.105 72);
  --second-soft: oklch(0.30 0.055 72);

  --danger: oklch(0.70 0.145 25);
  --danger-soft: oklch(0.30 0.065 25);

  --shadow: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-hover: 0 6px 20px -6px rgb(0 0 0 / 0.75), 0 1px 3px rgb(0 0 0 / 0.45);
  --shadow-dock:
    0 1px 0 rgb(255 255 255 / 0.04) inset,
    0 10px 30px -12px rgb(0 0 0 / 0.75),
    0 2px 6px -2px rgb(0 0 0 / 0.4);
  --shadow-dock-scrolled:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 14px 38px -12px rgb(0 0 0 / 0.9),
    0 3px 8px -2px rgb(0 0 0 / 0.5);
  --shadow-pill:
    0 1px 0 rgb(255 255 255 / 0.35) inset,
    0 2px 8px -2px rgb(0 0 0 / 0.55);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  padding: 0 20px 72px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  transition: background-color var(--t-slow) var(--ease-paper), color var(--t-slow) var(--ease-paper);
}

/* 纸张颗粒 */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: 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='120' height='120' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}
html.dark body::before { opacity: .28; }

.wrap { max-width: var(--page-max); margin: 0 auto; position: relative; z-index: 1; }

/* ============================================================
 *  Hero
 * ============================================================ */
.hero { position: relative; padding: 60px 0 26px; text-align: center; }

.eyebrow {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .24em; color: var(--muted); text-transform: uppercase;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -.6px;
  line-height: 1.26; color: var(--ink);
}

.hero p.sub { color: var(--muted); font-size: 13.5px; margin-top: 10px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 26px; }

.hstat {
  display: inline-flex; align-items: center; gap: 8px;
  background-color: var(--card); border: 1px solid var(--rule);
  padding: 8px 15px; border-radius: var(--radius-note);
  font-size: 13px; color: var(--ink-soft); box-shadow: var(--shadow);
  transition: background-color var(--t-mid) var(--ease-paper), border-color var(--t-mid) var(--ease-paper);
}
.hstat b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0 2px; }
.hstat .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background-color: var(--muted); }
.hstat .dot.accent { background-color: var(--accent); }
.hstat .dot.second { background-color: var(--second); }
.hstat .dot.danger { background-color: var(--danger); }

.theme-toggle {
  position: absolute; top: 14px; right: 0; width: 36px; height: 36px;
  display: grid; place-items: center; background-color: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius-soft);
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  box-shadow: var(--shadow);
  transition: color var(--t) var(--ease-paper), border-color var(--t) var(--ease-paper),
              background-color var(--t) var(--ease-paper), transform var(--t-fast) var(--ease-paper);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background-color: var(--accent-soft); }
.theme-toggle:active { transform: scale(.94); }

/* ============================================================
 *  分组 Tab（吸顶胶囊）
 * ============================================================ */
.tabs-dock {
  position: sticky; top: 16px; z-index: 40;
  display: flex; justify-content: center;
  margin: 34px 0 6px; padding: 0 4px; pointer-events: none;
}
.tabs-dock::before,
.tabs-dock::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity var(--t-mid) var(--ease-paper);
}
.tabs-dock.scrollable::before { left: 4px; background: linear-gradient(to right, var(--paper), transparent); }
.tabs-dock.scrollable::after { right: 4px; background: linear-gradient(to left, var(--paper), transparent); }
.tabs-dock.scroll-left::before { opacity: 1; }
.tabs-dock.scroll-right::after { opacity: 1; }

.tabs {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  max-width: 100%; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: 100px; background-color: var(--card); border: 1px solid var(--rule);
  box-shadow: var(--shadow-dock);
  transition: background-color var(--t-mid) var(--ease-paper),
              border-color var(--t-mid) var(--ease-paper),
              box-shadow var(--t-mid) var(--ease-paper);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs-dock.scrolled .tabs { box-shadow: var(--shadow-dock-scrolled); }

.tabs-indicator {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0;
  border-radius: 100px; background-color: var(--accent); box-shadow: var(--shadow-pill);
  z-index: 0; pointer-events: none; opacity: 0; transform: translateX(0);
  transition: transform 340ms var(--ease-pill), width 340ms var(--ease-pill),
              background-color var(--t-mid) var(--ease-paper), box-shadow var(--t-mid) var(--ease-paper);
  will-change: transform, width;
}
.tabs-indicator.ready { opacity: 1; }

.tabs button {
  position: relative; z-index: 1; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; padding: 7px 14px;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; border-radius: 100px;
  transition: color var(--t) var(--ease-paper);
}
.tabs button:hover { color: var(--ink-soft); }
.tabs button.active { color: var(--on-accent); font-weight: 600; text-shadow: 0 1px 0 rgb(0 0 0 / 0.08); }
html.dark .tabs button.active { text-shadow: 0 1px 0 rgb(255 255 255 / 0.12); }

.tab-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--second); opacity: 0; transform: scale(.6);
  transition: opacity var(--t-mid) var(--ease-paper), transform var(--t-mid) var(--ease-paper),
              background-color var(--t-mid) var(--ease-paper);
}
.tab-dot.warn, .tab-dot.error { opacity: 1; transform: scale(1); }
.tab-dot.warn { background-color: var(--second); }
.tab-dot.error { background-color: var(--danger); }
.tabs button.active .tab-dot { background-color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.25); }
html.dark .tabs button.active .tab-dot { background-color: var(--on-accent); }

.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px;
  background-color: var(--rule-soft); color: var(--muted);
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  transition: background-color var(--t-mid) var(--ease-paper), color var(--t-mid) var(--ease-paper);
}
.tabs button.active .tab-count { background-color: rgb(255 255 255 / 0.22); color: #fff; }
html.dark .tabs button.active .tab-count { background-color: rgb(14 22 19 / 0.22); color: var(--on-accent); }

/* ============================================================
 *  工具栏
 * ============================================================ */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 24px; }

.search-box { position: relative; flex: 1 1 240px; min-width: 180px; }
.search-box input {
  width: 100%; background-color: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-soft); padding: 10px 13px 10px 35px;
  color: var(--ink); outline: none; font: inherit; font-size: 13.5px; box-shadow: var(--shadow);
  transition: border-color var(--t) var(--ease-paper), box-shadow var(--t) var(--ease-paper),
              background-color var(--t-mid) var(--ease-paper);
}
.search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box input::placeholder { color: var(--muted); }
.search-box .ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 15px; line-height: 1; pointer-events: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background-color: var(--card); border: 1px solid var(--rule); color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius-soft); cursor: pointer;
  white-space: nowrap; font: inherit; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow);
  transition: background-color var(--t) var(--ease-paper), border-color var(--t) var(--ease-paper),
              color var(--t) var(--ease-paper), box-shadow var(--t) var(--ease-paper),
              transform var(--t-fast) var(--ease-paper);
}
.btn:hover { background-color: var(--card-hover); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn .ico { display: inline-flex; align-items: center; }
.btn .ico svg { width: 14px; height: 14px; display: block; }
.btn .spin { display: none; }
.btn.loading .spin { display: inline-block; animation: spin .9s linear infinite; }
.btn.loading .ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
 *  卡片网格
 * ============================================================ */
/* align-items:start —— 卡片各自贴合内容高度。
   否则任一张展开详情后，同行兄弟卡片会被拉伸出一大片空白。 */
.grid {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.card {
  position: relative; display: flex; flex-direction: column;
  background-color: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-card); padding: 17px 18px 15px;
  box-shadow: var(--shadow);
  animation: cardIn var(--t-slow) var(--ease-paper) backwards;
  transition: background-color var(--t-mid) var(--ease-paper), border-color var(--t-mid) var(--ease-paper),
              box-shadow var(--t-mid) var(--ease-paper), transform var(--t-mid) var(--ease-paper);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.card:hover { background-color: var(--card-hover); border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card.expanded { border-color: var(--accent); }
.card[data-status="offline"] { border-color: color-mix(in srgb, var(--danger) 42%, var(--rule)); }

/* --- 卡片头部：图标 + 站名/域名 + 状态点 --- */
.card-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }

.card-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background-color: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  color: var(--accent);
  transition: background-color var(--t-mid) var(--ease-paper), color var(--t-mid) var(--ease-paper),
              border-color var(--t-mid) var(--ease-paper), transform var(--t-slow) var(--ease-paper);
}
.card-icon svg { width: 22px; height: 22px; display: block; }
.card:hover .card-icon {
  background-color: var(--accent); border-color: var(--accent);
  color: var(--on-accent); transform: scale(1.05) rotate(-3deg);
}

.card-title { flex: 1; min-width: 0; }

.card-name-row {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  margin-bottom: 2px;
}
.card-name {
  font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.35;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 身份徽章：主站（实心）/ 测试（虚线轮廓） */
.role-badge {
  flex: none;
  display: inline-flex; align-items: center;
  height: 17px; padding: 0 6px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  transition: background-color var(--t-mid) var(--ease-paper), color var(--t-mid) var(--ease-paper),
              border-color var(--t-mid) var(--ease-paper);
}
.role-badge.main { background-color: var(--accent); color: var(--on-accent); }
/* 虚线边框 = 非生产环境，但底色做实，保证可读性 */
.role-badge.test {
  background-color: var(--rule-soft);
  color: var(--ink-soft);
  border: 1px dashed var(--muted);
}
.card-host {
  display: block; color: var(--muted); font-family: var(--mono); font-size: 11.5px;
  text-decoration: none; word-break: break-all; line-height: 1.45;
  transition: color var(--t) var(--ease-paper);
}
.card-host:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.status-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px;
  background-color: var(--rule);
  transition: background-color var(--t-mid) var(--ease-paper);
}
.status-dot.checking { background-color: var(--accent); animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.78); } }
.status-dot.fast, .status-dot.good { background-color: var(--accent); }
.status-dot.mid, .status-dot.slow { background-color: var(--second); }
.status-dot.fail { background-color: var(--danger); }

/* --- 描述 / 标签 --- */
.card-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 10px; min-height: 21px; }
.dim { color: var(--muted); }

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; min-height: 22px; }
.tag {
  display: inline-block; padding: 2.5px 9px; border-radius: 6px;
  background-color: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: .15px;
  transition: background-color var(--t-mid) var(--ease-paper), border-color var(--t-mid) var(--ease-paper),
              color var(--t-mid) var(--ease-paper);
}

/* --- 收录徽章 --- */
.card-index { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; min-height: 22px; }
.index-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: .15px;
  border: 1px solid transparent;
  transition: background-color var(--t-mid) var(--ease-paper), border-color var(--t-mid) var(--ease-paper),
              color var(--t-mid) var(--ease-paper);
}
.index-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.index-badge.indexed { background-color: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent); }
.index-badge.not-indexed { background-color: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.index-badge.unknown { background-color: transparent; border-color: var(--rule); color: var(--muted); }

.index-badge.engine {
  font-family: var(--mono); font-size: 10.5px; padding: 3px 8px;
  letter-spacing: 0; font-weight: 600;
}
.index-badge.engine::before { width: 4px; height: 4px; }
.index-badge.engine .mark { font-weight: 700; margin-left: 1px; }

/* --- 可用率条 --- */
.uptime {
  display: flex; gap: 1.5px; height: 26px; margin-bottom: 12px; padding: 4px 0;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  transition: border-color var(--t-mid) var(--ease-paper);
}
.uptime .bar {
  flex: 1; min-width: 1px; border-radius: 1.5px; background-color: var(--rule-soft);
  transition: background-color var(--t-mid) var(--ease-paper), transform var(--t-fast) var(--ease-paper);
}
/* 可用率条只表达「可用性」：绿=正常，浅绿=偏慢，红=失败。
   延迟的强弱交给底部延迟条与详情列表，避免整条被"偏慢"刷成告警色。 */
.uptime .bar.ok { background-color: var(--accent); }
.uptime .bar.slow { background-color: var(--accent-dim); }
.uptime .bar.err { background-color: var(--danger); }
.uptime .bar:hover { transform: scaleY(1.15); }

.uptime-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  margin: -4px 0 11px;
}
.uptime-meta .rate b { color: var(--ink-soft); font-weight: 600; }
.uptime-meta .rate.warn b { color: var(--second-ink); }
.uptime-meta .rate.err b { color: var(--danger); }

/* --- 卡片底部：延迟 + 操作 --- */
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  transition: border-color var(--t-mid) var(--ease-paper);
}
.latency {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted);
  transition: color var(--t-mid) var(--ease-paper);
}
.latency.fast, .latency.good { color: var(--accent); }
.latency.mid, .latency.slow { color: var(--second-ink); }
.latency.fail { color: var(--danger); }
.latency .unit { font-size: 11.5px; font-weight: 400; color: var(--muted); }

.latency-bar {
  flex: none; width: 40px; height: 4px; border-radius: 2px;
  background-color: var(--rule-soft); overflow: hidden;
  transition: background-color var(--t-mid) var(--ease-paper);
}
.latency-bar span {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background-color: var(--muted);
  transition: width var(--t-slow) var(--ease-paper), background-color var(--t-mid) var(--ease-paper);
}
.latency-bar.fast span { width: 100%; background-color: var(--accent); }
.latency-bar.good span { width: 65%; background-color: var(--accent); }
.latency-bar.mid span { width: 42%; background-color: var(--second); }
.latency-bar.slow span { width: 22%; background-color: var(--second); }
.latency-bar.fail span { width: 100%; background-color: var(--danger); }

.card-acts { display: flex; align-items: center; gap: 6px; flex: none; }

.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; background-color: var(--card); border: 1px solid var(--rule);
  color: var(--muted); cursor: pointer; font-size: 12.5px; line-height: 1; text-decoration: none;
  transition: background-color var(--t) var(--ease-paper), border-color var(--t) var(--ease-paper),
              color var(--t) var(--ease-paper), transform var(--t-fast) var(--ease-paper);
}
.icon-btn:hover { background-color: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.icon-btn:active { transform: scale(.94); }

.card-expand {
  display: grid; place-items: center; width: 30px; height: 30px;
  background-color: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; line-height: 1;
  transition: background-color var(--t) var(--ease-paper), border-color var(--t) var(--ease-paper),
              color var(--t) var(--ease-paper), transform var(--t-slow) var(--ease-paper);
}
.card-expand:hover { background-color: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.card.expanded .card-expand {
  transform: rotate(180deg);
  background-color: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}

.btn-visit {
  display: inline-flex; align-items: center; gap: 5px;
  background-color: var(--accent); border: 1px solid var(--accent); color: var(--on-accent);
  padding: 0 12px; height: 30px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t) var(--ease-paper), border-color var(--t) var(--ease-paper),
              transform var(--t-fast) var(--ease-paper);
}
.btn-visit:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-visit:active { transform: scale(.97); }
.btn-visit .arrow { transition: transform var(--t) var(--ease-paper); }
.btn-visit:hover .arrow { transform: translate(2px, -2px); }

/* --- 展开详情 --- */
.card-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-paper);
}
.card.expanded .card-detail { grid-template-rows: 1fr; }
.card-detail > .inner { overflow: hidden; min-height: 0; }

.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 8px; border-top: 1px solid var(--rule-soft); margin-top: 14px;
  font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
.detail-head .count { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; color: var(--muted); }
.detail-head .count b { color: var(--ink-soft); font-weight: 600; }

.detail-list {
  list-style: none; max-height: 260px; overflow-y: auto;
  border-radius: 8px; border: 1px solid var(--rule-soft); background-color: var(--paper);
  transition: background-color var(--t-mid) var(--ease-paper), border-color var(--t-mid) var(--ease-paper);
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.detail-list::-webkit-scrollbar { width: 6px; }
.detail-list::-webkit-scrollbar-track { background: transparent; }
.detail-list::-webkit-scrollbar-thumb { background-color: var(--rule); border-radius: 3px; }
.detail-list::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

.detail-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--rule-soft);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast) var(--ease-paper);
}
.detail-list li:last-child { border-bottom: none; }
.detail-list li:hover { background-color: var(--card); }

.dt-time {
  color: var(--muted); font-family: var(--mono); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-lat { font-family: var(--mono); font-weight: 600; color: var(--ink-soft); text-align: right; min-width: 56px; }
.dt-lat.ok { color: var(--accent); }
.dt-lat.warn { color: var(--second-ink); }
.dt-lat.err { color: var(--danger); }

.dt-status {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; min-width: 52px; text-align: center;
}
.dt-status.ok { background-color: var(--accent-soft); color: var(--accent); }
.dt-status.warn { background-color: var(--second-soft); color: var(--second-ink); }
.dt-status.err { background-color: var(--danger-soft); color: var(--danger); }

.detail-empty { padding: 22px 12px; text-align: center; font-size: 12px; color: var(--muted); font-style: italic; }

.empty { grid-column: 1 / -1; text-align: center; padding: 64px 20px; color: var(--muted); font-size: 13.5px; }
.empty .big { display: block; font-size: 32px; margin-bottom: 12px; opacity: .4; }

.footer {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule);
  text-align: center; color: var(--muted); font-size: 12px;
  transition: border-color var(--t-mid) var(--ease-paper);
}

#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0;
  pointer-events: none; z-index: 99; background-color: var(--card); border: 1px solid var(--rule);
  color: var(--ink); padding: 11px 20px; border-radius: var(--radius-note);
  font-size: 13px; max-width: 88vw; text-align: center; box-shadow: var(--shadow-hover);
  transition: opacity var(--t-mid) var(--ease-paper), transform var(--t-mid) var(--ease-paper),
              background-color var(--t-mid) var(--ease-paper);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.ok { border-color: var(--accent); color: var(--accent); }
#toast.error { border-color: var(--danger); color: var(--danger); }

/* ---------- 响应式 ---------- */
@media (max-width: 680px) {
  body { padding: 0 14px 56px; }
  .hero { padding: 40px 0 22px; }
  .hero h1 { font-size: 25px; }
  .hero p.sub { font-size: 12.5px; }
  .grid { grid-template-columns: 1fr; }
  .tabs-dock { top: 10px; margin-top: 26px; }
  .tabs { padding: 3px; gap: 1px; }
  .tabs button { padding: 6px 11px; font-size: 12.5px; gap: 5px; }
  .tab-count { min-width: 16px; height: 15px; font-size: 10px; padding: 0 4px; }
  .tab-dot { width: 5px; height: 5px; }
  .theme-toggle { top: 8px; }
  .toolbar { margin: 18px 0 20px; }
  .uptime { height: 22px; }
  .detail-list { max-height: 220px; }
  .detail-list li { grid-template-columns: 1fr auto; gap: 8px; padding: 7px 10px; }
  .dt-status { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}