/* Magic-UI inspired tokens: https://github.com/magicuidesign/magicui — gradient, grid, subtle motion */
:root[data-theme="dark"] {
  --bg: #030306;
  --fg: #f4f4f5;
  --muted: #a1a1aa;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #a855f7;
  --accent2: #6366f1;
  --accent-glow: rgba(168, 85, 247, 0.35);
  --card: rgba(12, 12, 18, 0.72);
  --card-border: rgba(255, 255, 255, 0.1);
  --ok: #34d399;
  --bad: #f87171;
  --st-online: #34d399;
  --st-off: #f87171;
  --grid: rgba(255, 255, 255, 0.04);
  --chip-bg: rgba(99, 102, 241, 0.12);
  --row-alt: rgba(99, 102, 241, 0.03);
}
:root[data-theme="light"] {
  --bg: #fafafa;
  --fg: #18181b;
  --muted: #52525b;
  --border: #e4e4e7;
  --accent: #7c3aed;
  --accent2: #4f46e5;
  --accent-glow: rgba(124, 58, 237, 0.2);
  --card: #fff;
  --card-border: #e4e4e7;
  --ok: #059669;
  --bad: #dc2626;
  --st-online: #059669;
  --st-off: #dc2626;
  --grid: rgba(0, 0, 0, 0.04);
  --chip-bg: rgba(99, 102, 241, 0.1);
  --row-alt: rgba(99, 102, 241, 0.04);
}

* { box-sizing: border-box; }
body {
  font-family: "Outfit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01" 1, "kern" 1;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}
a { color: #818cf8; text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--fg);
}

/* i18n long blocks: controlled by #html-root[lang] */
#html-root[lang^="zh"] .i18n-en { display: none !important; }
#html-root[lang="en"] .i18n-zh { display: none !important; }

/* Header */
header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.top-glass {
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.top-left { display: flex; align-items: center; gap: 0.5rem; }
.logo-magic {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  background: linear-gradient(135deg, var(--fg) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
nav.nav { display: flex; gap: 1.1rem; flex: 1; }
nav.nav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s;
}
nav.nav a:hover { color: var(--fg); text-decoration: none; }
.top-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.2rem 0.5rem 0.2rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(52, 211, 153, 0.08);
}
.presence-ico { font-size: 1.05rem; line-height: 1; }
.presence-lbl { font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-right: 0.05rem; }
.presence-num {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--st-online);
  min-width: 1.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-chart-wrap { margin-top: 0.75rem; }
.lang-sel {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
}
.btn, .btn-ghost, .btn.primary, .btn-magic {
  border-radius: 10px;
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.1s;
}
.btn.primary, .btn-magic.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}
.btn-magic:hover, .btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; }
.btn.admin { border-color: #a78bfa; color: #c4b5fd; }
main.main { flex: 1; padding: 1.5rem; width: 100%; }
.home-magic.home-bleed {
  margin: -1.5rem;
  width: calc(100% + 3rem);
  max-width: none;
  padding-bottom: 2.5rem;
}
/* 管理员 · 中转编辑 */
.admin-relay-list { display: flex; flex-direction: column; gap: 1.25rem; max-width: 52rem; }
.admin-relay-h3 { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.f-relay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1rem; align-items: end; }
.f-relay-grid .span2 { grid-column: 1 / -1; }
.f-relay-grid > label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.86rem; color: var(--muted); }
.f-relay-grid > label input { color: var(--fg); }
.f-relay-grid label.chkb { flex-direction: row; align-items: center; gap: 0.4rem; }
.admin-relay-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-relay-actions .msg { font-size: 0.9rem; }

/* 独立报告页 /report/{id} */
.report-page { max-width: 900px; margin: 0 auto; }
.report-hero { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.report-hero .h1-magic { margin: 0.25rem 0; }
.report-meta-line { font-size: 0.88rem; color: var(--muted); }
.probe-report-block { padding: 1.25rem 1.5rem; border-radius: 12px; border: 1px solid var(--border); }

footer.foot {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  background: var(--card);
}

/* —— 首页 Magic layout —— */
.home-magic { position: relative; overflow: hidden; }
.magic-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
    repeating-linear-gradient(90deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent 64px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  z-index: 0;
}
.home-magic > section { position: relative; z-index: 1; }
.hero-magic {
  max-width: 960px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  text-align: center;
}
.eyebrow { margin: 0 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.gradient-eyebrow {
  background: linear-gradient(90deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.h1-magic {
  font-size: clamp(2.4rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0.25rem 0 0.75rem;
  line-height: 1.1;
}
.gradient-text {
  background: linear-gradient(135deg, #e4e4e7 0%, #a78bfa 45%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #18181b 0%, #7c3aed 50%, #0284c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 首页「中测」：左→右流动的彩虹高光（与 prefers-reduced-motion 兼容） */
.brand-title-shimmer {
  display: inline-block;
  background-image: linear-gradient(
    105deg,
    #e4e4e7 0%,
    #c4b5fd 18%,
    #a78bfa 35%,
    #38bdf8 52%,
    #a78bfa 68%,
    #e4e4e7 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shimmer-sweep 3.2s ease-in-out infinite;
}
:root[data-theme="light"] .brand-title-shimmer {
  background-image: linear-gradient(
    105deg,
    #18181b 0%,
    #6d28d9 22%,
    #7c3aed 40%,
    #0284c7 58%,
    #7c3aed 75%,
    #18181b 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .brand-title-shimmer { animation: none; }
}
@keyframes brand-shimmer-sweep {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.tagline { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.25rem; }
.hero-desc {
  text-align: left;
  color: var(--muted);
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  font-size: 0.95rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }

.bento {
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
}
.magic-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.35rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.magic-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent);
  animation: border-shine 4s ease-in-out infinite;
}
@keyframes border-shine {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.bento-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; }
.bento-txt { margin: 0; color: var(--muted); font-size: 0.9rem; }

.section-block { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
.h2-magic {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.section-lead { color: var(--muted); font-size: 0.95rem; margin: 0 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 0.88rem;
  font-weight: 500;
  transition: transform 0.12s, box-shadow 0.2s;
}
.chip:hover {
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 0 20px var(--accent-glow);
}
.chip-new { border-color: rgba(56, 189, 248, 0.4); }
.chip-badge { font-size: 0.7rem; margin-right: 0.35rem; color: #38bdf8; font-weight: 800; }
.how-grid .how-list { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.how-list li { margin: 0.5rem 0; }

.faq-magic { padding-bottom: 3rem; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.9rem;
}
.faq-item summary { cursor: pointer; font-weight: 600; padding: 0.65rem 0; }
.faq-item p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.92rem; }

/* —— 排行「照妖镜式」大表 —— */
.rank-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.card-spotlight {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.card-spotlight::after {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  right: -40px; top: -40px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.rank-hero { margin-bottom: 1rem; }
.h1-rank { font-size: 1.75rem; text-align: center; margin: 0 0 0.5rem; }
.h1-magic.h1-rank { -webkit-text-fill-color: initial; }
.rank-sub { text-align: center; color: var(--muted); margin: 0; max-width: 40rem; margin-left: auto; margin-right: auto; font-size: 0.92rem; }
.rank-toolbar { margin: 0.75rem 0 1.5rem; }
.tool-meta { line-height: 1.5; }
.period-rank { margin-top: 2.25rem; }
.period-rank:first-of-type { margin-top: 0.75rem; }
.h2-period { text-align: center; margin: 0 0 0.75rem; font-size: 1.35rem; }
.period-meta { font-size: 0.85rem; font-weight: 400; margin-left: 0.35rem; }
.model-block { margin: 2.25rem 0; }
.period-rank .h2-legacy { margin-top: 2rem; }
.model-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.6rem; flex-wrap: wrap;
}
.model-title { font-size: 1.15rem; border-left: 3px solid var(--accent); padding-left: 0.6rem; margin: 0; }
.model-name-gradient {
  background: linear-gradient(90deg, #e4e4e7, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .model-name-gradient {
  background: linear-gradient(90deg, #18181b, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.model-badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem; border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.table-magic { border-radius: 14px; border: 1px solid var(--border); background: var(--card); }
.data-table-lens { font-size: 0.86rem; }
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td { padding: 0.6rem 0.65rem; text-align: left; border-bottom: 1px solid var(--border); }
.data-table thead th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  position: sticky; top: 0;
  background: var(--card);
  z-index: 1;
  box-shadow: 0 1px 0 var(--border);
}
.data-table-lens tbody tr:nth-child(even) td { background: var(--row-alt); }
.data-table tr:hover td { background: rgba(99, 102, 241, 0.08) !important; }
.th-rank, .th-metric, .td-metric, .td-rank { text-align: center; }
.td-lat { font-variant-numeric: tabular-nums; color: #38bdf8; font-weight: 500; }
.td-dilu { color: #fbbf24; }
.td-name { font-weight: 600; }
.rank-pill {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.h2-legacy { margin: 2.5rem 0 0.5rem; font-size: 1.15rem; }
.muted { color: var(--muted); }
.data-table .url { max-width: 11rem; word-break: break-all; }
.run-badge { font-size: 0.8rem; padding: 0.2rem 0.45rem; border-radius: 6px; }
.run-badge.st-ok { color: var(--st-online); background: rgba(52, 211, 153, 0.12); }
.run-badge.st-warn { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
.run-badge.st-muted { color: var(--muted); }

/* 排行行末：12 格运行状态（与在线率/近期探测相关） */
.th-uptime, .td-uptime { min-width: 5.5rem; vertical-align: middle; }
.uptime-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  max-width: 5.2rem;
}
.uptime-sq {
  display: block;
  width: 100%;
  min-width: 0;
  height: 0.5rem;
  border-radius: 2px;
}
.uptime-sq.sq-ok { background: var(--st-online); box-shadow: 0 0 6px rgba(52, 211, 153, 0.35); }
.uptime-sq.sq-miss { background: rgba(248, 113, 113, 0.75); }
.uptime-sq.sq-pad { background: rgba(113, 113, 122, 0.38); }
:root[data-theme="light"] .uptime-sq.sq-ok { box-shadow: 0 0 4px rgba(5, 150, 105, 0.25); }
.st-在线, .st-在线\000020{ color: var(--st-online); }
.st-无数据, .st-未列此模型 { color: var(--muted); }
.meta, .note, .hint { color: var(--muted); font-size: 0.9rem; max-width: 60rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; max-width: 40rem; }
.card.narrow { max-width: 24rem; }
.form label { display: block; margin: 0.6rem 0; }
.form input, .form textarea { width: 100%; padding: 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.form.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.form .span2 { grid-column: span 2; }
.msg { color: var(--bad); }
.mt { margin-top: 2rem; }
.small { font-size: 0.85rem; color: var(--muted); }
h2 { font-size: 1.1rem; }
.table-wrap { overflow-x: auto; margin: 0.5rem 0; }
.lead { color: var(--muted); max-width: 52rem; }
.admin-page { max-width: 1200px; margin: 0 auto; }
.admin-page h2 { margin-top: 1.5rem; }
.admin-page h2:first-child { margin-top: 0; }
.pre-env {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  overflow-x: auto;
}
.workspace-page { max-width: 900px; margin: 0 auto; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* 首页：动态与检测区 */
.float-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  animation: float-y 8s ease-in-out infinite;
}
.orb-1 { width: 200px; height: 200px; left: 10%; top: 8%; background: #6366f1; animation-delay: 0s; }
.orb-2 { width: 160px; height: 160px; right: 15%; top: 20%; background: #a855f7; animation-delay: -2s; }
.orb-3 { width: 120px; height: 120px; left: 40%; top: 35%; background: #38bdf8; animation-delay: -4s; }
@keyframes float-y {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -16px) scale(1.05); }
}
.h1-anim {
  animation: h1-in 0.7s ease-out both;
}
@keyframes h1-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.float-card {
  animation: card-in 0.5s ease-out both;
}
.float-card:nth-child(2) { animation-delay: 0.1s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.home-split {
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
.home-split--detector {
  max-width: min(100%, 920px);
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (max-width: 960px) {
  .home-split { grid-template-columns: 1fr; }
}
.home-detector { padding: 1.5rem 1.75rem; }
@media (min-width: 700px) {
  .home-detector { padding: 1.75rem 2rem; }
}
.home-cost { padding: 1.5rem 1.75rem; }
@media (min-width: 700px) {
  .home-cost { padding: 1.75rem 2rem; }
}
.cost-inputs-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
}
@media (max-width: 600px) {
  .cost-inputs-4 { grid-template-columns: 1fr; }
}
.home-cost-bottom { margin-top: 0.25rem; }
.home-cost-out {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(99, 102, 241, 0.05);
  font-size: 0.9rem;
  line-height: 1.55;
}
.home-cost-line { margin: 0.35rem 0; }
.home-cost-final {
  margin: 0.5rem 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
}
.home-cost-final span { color: #a78bfa; }
:root[data-theme="light"] .home-cost-final span { color: #5b21b6; }
.home-detector, .home-cost { min-height: 4rem; }
.tag-beta {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #f472b6, #a78bfa);
  color: #fff;
  vertical-align: middle;
}
.detector-hint { font-size: 0.88rem; color: var(--muted); }
.detector-form { margin-top: 0.5rem; }
.detector-form label { display: block; margin: 0.5rem 0; font-size: 0.88rem; }
.in-magic {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--fg);
  font-size: 0.9rem;
}
:root[data-theme="light"] .in-magic { background: #fff; }
.model-pick { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0; }
.btn.full { width: 100%; margin-top: 0.5rem; }
.probe-result { margin-top: 1rem; padding: 0.75rem; border-radius: 10px; border: 1px solid var(--border); font-size: 0.88rem; }
.probe-result.loading { color: var(--muted); }
.probe-result.err { border-color: #f87171; color: #f87171; }

/* 在线检测：说明条 + 结果看板 + 分享 */
.probe-hero-notes { margin: 0.6rem 0 0.4rem; }
.probe-info-banner {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg);
}
:root[data-theme="light"] .probe-info-banner { background: rgba(16, 185, 129, 0.09); }
.probe-info-ico {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(52, 211, 153, 0.35);
  color: #064e3b;
}
:root[data-theme="light"] .probe-info-ico { color: #065f46; }
.probe-info-copy p { margin: 0; }
.probe-info-sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0.5rem 0 0.25rem;
}

.probe-report-dump { margin-top: 1rem; padding: 1rem 0.5rem; border-top: 1px solid var(--border); }
.probe-report-head2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.probe-report-head2 .h2-magic { margin: 0; }
.btn.btn-share { font-size: 0.85rem; }
.probe-share-toast { font-size: 0.8rem; color: var(--st-online); margin: 0.35rem 0; word-break: break-all; }

.probe-report-body2 {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 1.4fr;
  gap: 1rem 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .probe-report-body2 { grid-template-columns: 1fr; }
}
.probe-score-wrap { text-align: center; }
.probe-score-ring {
  --p: 0;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  margin: 0 auto 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    from 0deg,
    var(--st-online) 0 calc(var(--p) * 1%),
    var(--border) 0 100%
  );
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.12);
}
.probe-score-inner {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.2rem;
}
.probe-score-pct { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.04em; }
.probe-score-hl { font-size: 0.72rem; line-height: 1.2; color: var(--muted); max-width: 5rem; }
.rep-cite { display: inline-block; margin-top: 0.25rem; }

.probe-checklist { list-style: none; margin: 0; padding: 0; }
.probe-checklist .ck {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.35rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ck-twrap { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.probe-checklist .ck .ck-ico { font-weight: 800; }
.probe-checklist .ck-pass .ck-ico { color: var(--st-online); }
.probe-checklist .ck-warn .ck-ico { color: #fbbf24; }
.probe-checklist .ck-fail .ck-ico { color: #f87171; }
.probe-checklist .ck-skip { opacity: 0.85; }
.probe-checklist .ck-skip .ck-ico { color: var(--muted); }

.probe-metricbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem 0.5rem;
  margin-top: 0.9rem;
}
@media (max-width: 640px) {
  .probe-metricbar { grid-template-columns: repeat(2, 1fr); }
}
.pm-item {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  font-size: 0.72rem;
}
.pm-k { display: block; color: var(--muted); }
.pm-v { font-weight: 600; font-size: 0.8rem; }
.probe-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.probe-chip { font-size: 0.8rem; padding: 0.2rem 0.45rem; border-radius: 6px; border: 1px solid var(--border); }
.probe-chip.hit { border-color: #34d399; color: #34d399; }
.probe-chip.miss { border-color: #71717a; color: #a1a1aa; }
.probe-chip .n { font-weight: 600; }
.err { color: #f87171; }
.home-live-ribbon {
  max-width: 1100px;
  margin: 0 auto 1rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.live-ribbon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: pulse-dot 1.5s ease-in-out infinite;
}
.rank-live-ribbon { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--muted); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}
.stat-time { font-variant-numeric: tabular-nums; color: #38bdf8; }
.stat-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0.75rem 0 0; }
.stat-pill {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.stat-pill .n { font-weight: 800; color: #a78bfa; font-size: 1.05rem; }
.stat-pill .l { color: var(--muted); }
.home-mini { margin-top: 0.5rem; }
.inclusion-rank { max-width: 900px; margin: 2.5rem auto 0; padding: 0 1.25rem 2rem; }
.inc-card { max-width: 100%; }
.row-flash { animation: row-in 0.4s ease-out; }
@keyframes row-in {
  from { background: rgba(99, 102, 241, 0.15); }
  to { background: transparent; }
}
.gradient-eyebrow, .h2-magic {
  animation: fade-up 0.5s ease-out both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Uptime 风格 + 全站条 + 矩阵 + 图表 */
.kuma-appstrip {
  text-align: center;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: rgba(12, 12, 18, 0.6);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.kuma-strip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.kuma-strip-dot.kuma-up { background: #34d399; box-shadow: 0 0 6px #34d399; }
.kuma-strip-dot.kuma-down { background: #f87171; }
.kuma-uptime-bars {
  display: flex; gap: 3px; justify-content: center; margin: 0.4rem 0; flex-wrap: wrap;
}
.kuma-uptime-seg { width: 10px; height: 4px; border-radius: 2px; background: #27272a; transition: background 0.2s; }
.kuma-uptime-seg.seg-ok { background: linear-gradient(90deg, #34d399, #a78bfa); }
.kuma-uptime-seg.seg-bad { background: #7f1d1d; }
.probe-kuma-pill { margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--border); font-size: 0.88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.probe-kuma-pill.kuma-up { border-color: rgba(52, 211, 153, 0.4); }
.probe-kuma-pill.kuma-degraded { border-color: rgba(251, 191, 36, 0.4); }
.probe-kuma-pill.kuma-down { border-color: rgba(248, 113, 113, 0.4); }
.probe-viz { margin-top: 0.9rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 12px; }
.probe-viz-title { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem; }
.probe-viz-sub { font-size: 0.75rem; color: var(--muted); margin: 0.4rem 0; }
.probe-viz-row { display: grid; grid-template-columns: 1fr 180px; gap: 0.75rem; align-items: start; }
@media (max-width: 700px) { .probe-viz-row { grid-template-columns: 1fr; } }
.probe-viz-canvas { max-width: 100%; }
.probe-viz-d { max-width: 200px; margin: 0 auto; }
.matrix-section { max-width: 100%; overflow: hidden; }
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix-table { min-width: 640px; font-size: 0.8rem; }
.th-matrix, .th-site, .th-base { font-size: 0.7rem; white-space: nowrap; }
.td-mat { text-align: center; font-variant-numeric: tabular-nums; }
.td-mat-name { max-width: 7rem; font-weight: 600; }
.td-mat.st-ok { color: #34d399; }
.td-mat.st-warn { color: #fbbf24; }
.td-mat.st-muted { color: var(--muted); }
.matrix-wrap { border-radius: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.site-link { color: #818cf8; text-decoration: none; }
.site-link:hover { text-decoration: underline; }
.detector-hvoy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.detector-sec-title { font-weight: 800; font-size: 1.05rem; }
.detector-hist-link { font-size: 0.88rem; color: #818cf8; }
.detector-form-hvoy .hvoy-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 600px) { .detector-form-hvoy .hvoy-inputs { grid-template-columns: 1fr; } }
.hvoy-field { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.hvoy-lbl { font-size: 0.82rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.hvoy-field-row { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; min-width: 0; }
.hvoy-field-row .in-magic { flex: 1; min-width: 0; }
.hvoy-ico { font-size: 0.9rem; opacity: 0.85; }
.model-pick-hvoy { font-size: 0.85rem; font-weight: 600; margin: 0.75rem 0 0.4rem; color: var(--muted); }
.model-cards-hvoy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
@media (min-width: 700px) {
  .model-cards-hvoy { grid-template-columns: repeat(3, 1fr); }
}
.model-card-hvoy {
  position: relative;
  display: block;
  padding: 0.45rem 0.4rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  text-align: center;
  min-width: 0;
}
.model-card-hvoy:hover { border-color: #34d399; }
.model-card-hvoy.is-checked {
  border-color: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35);
}
.model-card-input { position: absolute; opacity: 0; pointer-events: none; }
.model-card-t { display: block; font-size: 0.8rem; font-weight: 700; }
.model-card-id { display: block; font-size: 0.6rem; color: var(--muted); word-break: break-all; line-height: 1.2; }
.model-card-check {
  position: absolute;
  top: 2px; right: 2px; font-size: 0.65rem; color: #10b981; opacity: 0;
  transition: opacity 0.12s;
}
.model-card-hvoy.is-checked .model-card-check { opacity: 1; }
.hvoy-new { position: absolute; top: -4px; left: -2px; font-size: 0.55rem; font-weight: 800; background: #10b981; color: #fff; padding: 0.05rem 0.2rem; border-radius: 3px; }
.has-badge { padding-top: 0.55rem; }
.hvoy-info { font-size: 0.78rem; color: #047857; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 8px; padding: 0.45rem 0.5rem; margin: 0.5rem 0; }
:root[data-theme="light"] .hvoy-info { color: #0f766e; }
.hvoy-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.hvoy-privacy { font-size: 0.75rem; color: var(--muted); max-width: 20rem; margin: 0; }
.hvoy-submit { min-width: 7rem; }
.detector-sec-title { color: var(--fg); }
.rank-model-tabs {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0 0.5rem; max-width: 1200px; margin-left: auto; margin-right: auto; justify-content: center;
}
.rank-tab {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.rank-tab.is-active, .rank-tab:hover { border-color: #10b981; color: #34d399; }
.rank-tab-link { line-height: 1.2; }
.model-block--hidden { display: none !important; }

/* 一元模型页 */
.yiyuan-page { max-width: 900px; margin: 0 auto; padding: 0 1rem 2rem; }
.yiyuan-hero { margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; }
.yiyuan-lead { color: var(--muted); line-height: 1.55; margin: 0.5rem 0 0; }
.yiyuan-formula { margin-bottom: 1rem; padding: 1rem 1.25rem; }
.formula-line {
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  margin: 0.5rem 0 0;
}
.yiyuan-steps { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.step-card { padding: 1rem 1.1rem; }
.step-card h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.step-card p { margin: 0.35rem 0; line-height: 1.5; color: var(--fg); }
.mono-block {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  background: var(--code-bg, rgba(0,0,0,0.2));
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin: 0.4rem 0;
}
.example { font-size: 0.88rem; color: var(--muted); }
.yiyuan-calc { margin-bottom: 1.25rem; padding: 1rem 1.25rem; }
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 0.75rem 0 1rem;
}
@media (max-width: 600px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.calc-grid input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  background: var(--input-bg, var(--card));
  color: var(--fg);
}
.calc-out { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 10px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); }
.calc-out p { margin: 0.35rem 0; }
.result-main { font-size: 1.1rem; margin-top: 0.5rem !important; }
.yiyuan-rank { padding: 1rem 1.25rem; }