/* ============================================================
   VEROBALL.COM 足球比赛技术数据官网 · 设计系统样式
   白底页面 + 黑色卡片填充 + 红色主调：硬朗稳重的数据终端风格
   卡片分色（深色卡上的亮色点缀）：红（品牌）/ 亮蓝（月度档·数据蓝）/
   亮橙（季度档）/ 亮金（年度档·价格·VIP）/ 青（工具）/ 绿·岩灰（栏目·自定义）
   ============================================================ */

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

:root {
  --bg: #f5f6f8;
  --bg-alt: #ecedf1;
  --bg-deep: #111318;
  --panel: #ffffff;
  --card-1: #1e2129;      /* 黑色卡片渐变顶 */
  --card-2: #13151b;      /* 黑色卡片渐变底 */
  --card-line: #2c303a;   /* 黑色卡片边框 */
  --border: rgba(15, 18, 25, 0.15);
  --border-soft: rgba(15, 18, 25, 0.08);
  --ink: #101013;
  --card-title: #f5f5f6;  /* 黑卡内标题 */
  --card-text: #c9cdd4;   /* 黑卡内正文 */
  --card-sub: #9aa0aa;    /* 黑卡内次要 */
  --card-dim: #6f7580;    /* 黑卡内最弱 */
  --red-500: #dc2626;
  --red-600: #c81e1e;
  --red-700: #a61515;
  --red-950: #450a0a;
  --red-bright: #ef4444;
  --amber-400: #b45309;
  --amber-300: #b45309;
  --amber-200: #92400e;
  --sky-400: #0284c7;
  --orange-400: #ea580c;
  --green-400: #15803d;
  --teal-600: #0f766e;
  --zinc-300: #26262b;
  --zinc-400: #3d3d44;
  --zinc-500: #5c626c;
  --zinc-600: #868d98;
  --radius: 8px;
  --font-serif: "Noto Serif SC", STSong, SimSun, serif;
  --font-code: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --font-sans: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: #2b2b30;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.font-serif-wuxia { font-family: var(--font-serif); }
.font-code { font-family: var(--font-code); }

.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.wrap-narrow { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }

/* ---------------- 通用面板与标题 ---------------- */
/* 分色变量：--ac 点缀色 / --ac-soft 淡底 / --ac-glow 发光色 */
.panel {
  --ac: #c81e1e;
  --ac-soft: rgba(200, 30, 30, .07);
  --ac-glow: rgba(200, 30, 30, .35);
  position: relative;
  border-radius: calc(var(--radius) - 2px);
  border: 2px solid var(--border);
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(15, 18, 25, .06);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.panel-hover:hover {
  transform: translateY(-.25rem);
  border-color: var(--ac);
  box-shadow: 0 0 0 2px var(--ac-soft), 0 18px 48px -12px var(--ac-glow);
}

/* 前台黑色内容卡片（统一黑底 + 顶部/左侧亮色） */
.hero-panel, .column-card, .package-card, .tool-card, .vip-card,
.pricing-card, .promise-card, .teacher-card, .di-tier, .di-layer, .pricing-trust {
  background: linear-gradient(180deg, var(--ac-soft), rgba(0, 0, 0, 0) 60%), linear-gradient(165deg, var(--card-1), var(--card-2));
  border-color: var(--card-line);
  box-shadow: 0 4px 16px -6px rgba(15, 18, 25, .35);
}
/* 黑卡内文字配色 */
.hero-panel h3, .column-card h3, .package-card h3, .tool-card h3, .vip-card h3,
.pricing-card h3, .teacher-card h3, .di-tier h3, .di-layer h4 { color: var(--card-title); }
.hero-panel .text, .column-card .desc, .vip-card .desc, .teacher-card .intro,
.di-tier .sum, .promise-card p, .di-layer .layer-sum { color: var(--card-text); }
.package-card .specs, .package-card .deliver, .pricing-card .modes p, .pricing-card .modules { color: var(--card-text); }
.tool-card .desc-hover, .tool-card .desc-clamp { color: var(--card-sub); }
.package-card .code, .package-card .deliver-label, .pricing-card .module-label,
.vip-card .code, .di-tier .count small, .pricing-card .hover-foot, .teacher-card .foot,
.hero-panel .team-note, .pricing-trust .t-note { color: var(--card-dim); }
.package-card .foot, .pricing-card .collapsed-foot, .pricing-card .limit-line { color: var(--card-sub); border-top-color: var(--card-line); }
.package-card .deliver-box { border-top-color: var(--card-line); }
.teacher-card .tags span { background: rgba(255, 255, 255, .07); border-color: var(--card-line); color: var(--card-text); }
.hero-panel .slogans li { color: var(--card-text); }
.pricing-trust .t-name { color: var(--card-title); }

/* 分色卡（黑卡上的亮色识别）：顶部 3px 色条 */
.card-tint { border-top: 3px solid var(--ac); }
.accent-red    { --ac: #ef4444; --ac-soft: rgba(239, 68, 68, .18);  --ac-glow: rgba(239, 68, 68, .5); }
.accent-sky    { --ac: #38bdf8; --ac-soft: rgba(56, 189, 248, .18); --ac-glow: rgba(56, 189, 248, .48); }
.accent-amber  { --ac: #fbbf24; --ac-soft: rgba(251, 191, 36, .17); --ac-glow: rgba(251, 191, 36, .48); }
.accent-orange { --ac: #fb923c; --ac-soft: rgba(251, 146, 60, .19); --ac-glow: rgba(251, 146, 60, .48); }
.accent-green  { --ac: #4ade80; --ac-soft: rgba(74, 222, 128, .16); --ac-glow: rgba(74, 222, 128, .45); }
.accent-teal   { --ac: #2dd4bf; --ac-soft: rgba(45, 212, 191, .16); --ac-glow: rgba(45, 212, 191, .45); }
.accent-slate  { --ac: #94a3b8; --ac-soft: rgba(148, 163, 184, .15); --ac-glow: rgba(148, 163, 184, .4); }

.section-tag {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: 700;
  color: var(--red-500);
  font-family: var(--font-code);
}
.section-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  color: var(--ink);
  font-family: var(--font-serif);
}
@media (min-width: 768px) { .section-title { font-size: 2.375rem; line-height: 2.6rem; } }
.section-title .en { color: var(--red-500); }
.section-head { margin-bottom: 2.5rem; }
.section-head.center { text-align: center; }
.section-note {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--zinc-500);
}

.section-block { position: relative; padding: 5rem 0; scroll-margin-top: 4rem; }
.section-block.alt { background: var(--bg-alt); }

.text-glow-red { text-shadow: 0 0 22px rgba(220, 38, 38, .3); }
.text-glow-gold { text-shadow: 0 0 22px rgba(251, 191, 36, .4); }

.bg-grid {
  background-image:
    linear-gradient(rgba(200, 30, 30, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 30, 30, .05) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* 主按钮（发光红） */
.btn-glow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: calc(var(--radius) - 4px);
  background: var(--red-700);
  padding: .625rem 1.25rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  border: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 8px 24px -8px rgba(200, 30, 30, .55);
}
.btn-glow:hover {
  background: var(--red-600);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 10px 32px -6px rgba(200, 30, 30, .75);
}

/* 悬浮展开（grid-rows 动画） */
.reveal-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}
.group:hover .reveal-detail { grid-template-rows: 1fr; }
.reveal-inner { overflow: hidden; }

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------- 导航栏（黑底红纹 · 硬朗稳重） ---------------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(180deg, #1b1e26, #13151b);
  border-bottom: 2px solid rgba(200, 30, 30, .65);
  box-shadow: 0 2px 18px -6px rgba(10, 12, 16, .5);
  transition: all .3s;
}
.navbar.scrolled {
  background: linear-gradient(180deg, #171a21, #101218);
  border-bottom-color: var(--red-600);
  box-shadow: 0 4px 24px -6px rgba(10, 12, 16, .6), 0 2px 12px -4px rgba(200, 30, 30, .45);
}
.navbar-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.navbar-logo { display: flex; align-items: center; gap: .625rem; }
.navbar-logo .badge {
  display: flex; height: 2.375rem; width: 2.375rem; align-items: center; justify-content: center;
  border-radius: 2px; background: linear-gradient(135deg, var(--red-600), var(--red-700)); color: #fff; font-family: var(--font-code); font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(220, 40, 40, .65);
}
.navbar-logo .name { font-family: var(--font-code); font-size: 1.0625rem; font-weight: 700; color: #f5f5f6; letter-spacing: .08em; }
.navbar-logo .domain { margin-left: .5rem; font-size: .8125rem; font-weight: 700; color: #8a8f9a; letter-spacing: .15em; display: none; }
@media (min-width: 640px) { .navbar-logo .domain { display: inline; } }
.navbar-nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .navbar-nav { display: flex; } .navbar-burger { display: none !important; } }
.navbar-nav a { position: relative; font-size: .9375rem; font-weight: 600; color: #c9cdd4; transition: color .2s; cursor: pointer; }
.navbar-nav a:hover { color: #fff; text-shadow: 0 0 14px rgba(239, 68, 68, .55); }
.navbar-nav a .code { font-family: var(--font-code); font-size: 10px; font-weight: 700; color: #ef4444; margin-right: .25rem; }
.navbar-burger { background: none; border: none; color: #c9cdd4; padding: .5rem; font-size: 1.25rem; line-height: 1; }
.navbar-burger:hover { color: #fff; }
/* 移动端下拉菜单：同款黑底 */
.navbar-mobile { border-top: 1px solid #2c303a; background: rgba(19, 21, 27, .98); backdrop-filter: blur(8px); padding: .75rem 1rem; }
.navbar-mobile a { display: block; padding: .625rem 0; font-size: .9375rem; font-weight: 600; color: #c9cdd4; border-bottom: 1px solid #23262e; cursor: pointer; }
.navbar-mobile a:hover { color: #fff; }
.navbar-mobile a .code { font-family: var(--font-code); font-size: 10px; font-weight: 700; color: #ef4444; margin-right: .5rem; }

/* ---------------- 首页头部 Hero ---------------- */
.hero { position: relative; padding: 7rem 0 5rem; overflow: hidden; }
.hero-glow-1 {
  pointer-events: none; position: absolute; top: -8rem; left: 50%; transform: translateX(-50%);
  height: 480px; width: 820px; border-radius: 9999px; background: rgba(220, 38, 38, .14); filter: blur(120px);
}
.hero-glow-2 {
  pointer-events: none; position: absolute; top: 10rem; right: -8rem;
  height: 300px; width: 300px; border-radius: 9999px; background: rgba(217, 119, 6, .13); filter: blur(100px);
}
.hero-head { text-align: center; margin-bottom: 3.5rem; }
.hero-eyebrow { font-family: var(--font-code); font-size: .8125rem; font-weight: 700; letter-spacing: .5em; color: var(--red-500); margin-bottom: 1rem; }
.hero-title { font-family: var(--font-code); font-size: 2.25rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.hero-title .short { font-family: var(--font-serif); font-weight: 900; color: var(--red-500); }
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
.hero-sub { margin-top: 1.25rem; font-size: 1.0625rem; font-weight: 500; color: var(--zinc-400); letter-spacing: .05em; }
@media (min-width: 768px) { .hero-sub { font-size: 1.1875rem; } }

.hero-panels { display: grid; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .hero-panels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hero-panels { grid-template-columns: repeat(3, 1fr); } }
.hero-panel { padding: 1.75rem; }
.hero-panel .head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.hero-panel .head .icon { font-size: 1.4rem; color: var(--ac); }
.hero-panel .head .icon.amber { color: #fbbf24; }
.hero-panel .head .icon.sky { color: #38bdf8; }
.hero-panel .text { font-size: .9375rem; font-weight: 500; line-height: 1.75; margin-bottom: 1.5rem; }
.hero-panel .points { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.hero-panel .points span {
  border-radius: 2px; border: 1px solid rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .12);
  padding: .2rem .55rem; font-size: 11px; font-weight: 700; color: #fcd34d;
}
.hero-panel .link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .9375rem; font-weight: 700; color: #38bdf8; transition: color .2s; cursor: pointer;
}
.hero-panel .link:hover { color: #7dd3fc; }
.hero-panel .slogans { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.hero-panel .slogans li { display: flex; gap: .5rem; font-size: .9375rem; font-weight: 500; list-style: none; }
.hero-panel .slogans li::before {
  content: ""; margin-top: .55rem; height: 6px; width: 6px; flex-shrink: 0;
  transform: rotate(45deg); background: var(--red-bright);
}
.hero-panel .team-note { font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .2em; }

/* 团队区 */
.team-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
.team-side { display: none; font-family: var(--font-code); font-size: .75rem; font-weight: 700; color: var(--zinc-600); letter-spacing: .2em; }
@media (min-width: 768px) { .team-side { display: block; } }
.team-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.teacher-card { --ac: #ef4444; --ac-soft: rgba(239, 68, 68, .16); --ac-glow: rgba(239, 68, 68, .48); padding: 1.5rem; display: flex; flex-direction: column; border-top: 3px solid var(--ac); }
.teacher-card .top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.teacher-card .avatar {
  display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center;
  border-radius: 2px; border: 2px solid rgba(239, 68, 68, .45);
  background: linear-gradient(to bottom right, var(--red-950), #0c0a0a);
  box-shadow: 0 0 18px -4px rgba(239, 68, 68, .45);
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: #fca5a5;
}
.teacher-card h3 { font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 900; }
.teacher-card .title { font-size: .8125rem; font-weight: 700; color: #fbbf24; }
.teacher-card .focus { font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #38bdf8; margin-bottom: .75rem; }
.teacher-card .intro { font-size: .9375rem; font-weight: 500; line-height: 1.75; flex: 1; }
.teacher-card .tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.teacher-card .tags span {
  border-radius: 2px; border: 1px solid var(--card-line);
  padding: .15rem .55rem; font-size: 11px; font-weight: 600;
}
.teacher-card .foot {
  margin-top: 1rem; border-top: 1px solid var(--card-line); padding-top: .75rem;
  text-align: center; font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .3em;
}

/* ---------------- 各内容板块 ---------------- */
/* 服务体系（columns）双列卡片 — 四色轮换 */
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.column-card { padding: 1.75rem; display: flex; flex-direction: column; }
.column-card .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.column-card .meta .en { font-family: var(--font-code); font-size: .8125rem; font-weight: 700; letter-spacing: .15em; color: var(--ac); }
.column-card .meta .icon { color: var(--ac); font-size: 1.1rem; }
.column-card h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 900; margin-bottom: .75rem; }
.column-card .desc { font-size: .9375rem; font-weight: 500; line-height: 1.75; flex: 1; }
.column-card .actions { margin-top: 1.5rem; }

/* 数据产品（packages）三列套餐卡 — 蓝 / 橙 / 金 */
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.package-card { padding: 1.75rem; display: flex; flex-direction: column; transition: all .3s cubic-bezier(.4,0,.2,1); }
.package-card:hover {
  transform: translateY(-.25rem);
  border-color: var(--ac);
  box-shadow: 0 0 0 2px var(--ac-soft), 0 18px 48px -12px var(--ac-glow);
}
.package-card .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.package-card .code { font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.package-card .grade {
  display: flex; height: 2.375rem; width: 2.375rem; align-items: center; justify-content: center;
  border-radius: 2px; border: 2px solid; font-family: var(--font-code); font-size: 1.125rem; font-weight: 700;
}
.package-card h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 900; margin-bottom: .5rem; }
.package-card .price { font-family: var(--font-code); font-size: 1.375rem; font-weight: 700; margin-bottom: 1.25rem; }
.package-card .specs { list-style: none; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; font-weight: 500; margin-bottom: 1rem; }
.package-card .specs li { display: flex; gap: .5rem; }
.package-card .specs li::before { content: ""; margin-top: .5rem; height: 6px; width: 6px; flex-shrink: 0; transform: rotate(45deg); }
.package-card .deliver-label { margin-bottom: .5rem; font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.package-card .deliver { list-style: none; display: flex; flex-direction: column; gap: .375rem; font-size: .9375rem; font-weight: 500; }
.package-card .deliver li { display: flex; gap: .5rem; }
.package-card .deliver li .chk { margin-top: .1rem; flex-shrink: 0; font-size: .8rem; }
.package-card .deliver-box { border-top: 1px solid var(--card-line); padding-top: 1rem; margin-bottom: 1rem; }
.package-card .foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--card-line); padding-top: 1rem; font-size: .8125rem; font-weight: 600;
}
.package-card .buy-row { margin-top: 1rem; }

/* 套餐配色：亮蓝 / 亮橙 / 亮金（黑卡上） */
.pkg-blue   { --ac: #38bdf8; --ac-soft: rgba(56, 189, 248, .17);  --ac-glow: rgba(56, 189, 248, .48); }
.pkg-orange { --ac: #fb923c; --ac-soft: rgba(251, 146, 60, .18);  --ac-glow: rgba(251, 146, 60, .48); }
.pkg-gold   { --ac: #fbbf24; --ac-soft: rgba(251, 191, 36, .17);  --ac-glow: rgba(251, 191, 36, .5); }
.pkg-blue .grade { background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .5); color: #38bdf8; }
.pkg-blue .price { color: #38bdf8; }
.pkg-blue .specs li::before { background: #38bdf8; }
.pkg-blue .deliver .chk { color: #38bdf8; }
.pkg-orange .grade { background: rgba(251, 146, 60, .14); border-color: rgba(251, 146, 60, .5); color: #fb923c; }
.pkg-orange .price { color: #fb923c; }
.pkg-orange .specs li::before { background: #fb923c; }
.pkg-orange .deliver .chk { color: #fb923c; }
.pkg-gold .grade { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .5); color: #fbbf24; }
.pkg-gold .price { color: #fbbf24; }
.pkg-gold .specs li::before { background: #fbbf24; }
.pkg-gold .deliver .chk { color: #fbbf24; }

/* 可购买卡片（点击跳转） */
.clickable { cursor: pointer; }

/* 数据工具（tools）四列小卡 — 青色识别 */
.grid-4 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.tool-card { padding: 1.5rem; border-left: 3px solid var(--ac); }
.tool-card .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.tool-card .code { font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--ac); }
.tool-card .icon { color: var(--card-dim); transition: color .2s; font-size: 1rem; }
.tool-card:hover .icon { color: var(--ac); }
.tool-card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; }
.tool-card .desc-hover { font-size: .875rem; font-weight: 500; line-height: 1.7; padding-top: .25rem; }
.tool-card .desc-clamp { margin-top: .5rem; font-size: .875rem; font-weight: 500; line-height: 1.7; }
.group:hover .desc-clamp { display: none; }
.tool-card .buy-mini {
  display: none; margin-top: .75rem; font-size: .8125rem; font-weight: 700; color: #38bdf8;
}
.group:hover .tool-card .buy-mini, .tool-card .buy-mini.always { display: inline-flex; align-items: center; gap: .25rem; }

/* ============ 数据项目清单（dataitems）三档对比 · 分层堆叠 ============ */
.di-desc { margin-bottom: 2rem; max-width: 52rem; font-size: 1rem; font-weight: 500; line-height: 1.8; color: var(--zinc-400); }

/* 三档总览对比卡（黑卡 + 档位亮色 + 比例条 + 增量角标） */
.di-summary { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .di-summary { grid-template-columns: repeat(3, 1fr); } }
.di-tier {
  position: relative; padding: 1.5rem; cursor: pointer; overflow: hidden;
  border-top-width: 3px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.di-tier:hover { transform: translateY(-4px); }
.di-tier .tier-tag {
  display: inline-block; padding: .2rem .6rem; margin-bottom: .75rem;
  font-family: var(--font-code); font-size: 10px; letter-spacing: .2em; font-weight: 700;
  color: #14161c; border: 1px solid; border-radius: 2px;
}
.di-tier .tier-plus {
  position: absolute; top: 1.1rem; right: 1.1rem;
  padding: .28rem .65rem; font-family: var(--font-code); font-size: .9375rem; font-weight: 700;
  color: #14161c; background: var(--ac); border-radius: 3px;
  box-shadow: 0 4px 14px -3px var(--ac-glow);
}
.di-tier h3 { font-family: var(--font-serif); font-size: 1.3125rem; font-weight: 900; margin-bottom: .25rem; }
.di-tier .count { font-family: var(--font-code); font-size: 2.375rem; font-weight: 700; line-height: 1.2; margin: .5rem 0 .35rem; }
.di-tier .count small { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; margin-left: .375rem; }
/* 比例条：长度 = 该档累计项目数 / 全量，直观看「多拿多少」 */
.di-tier .tier-bar { height: 6px; margin: 0 0 .9rem; background: rgba(255, 255, 255, .09); border-radius: 3px; overflow: hidden; }
.di-tier .tier-bar i { display: block; height: 100%; background: var(--ac); border-radius: 3px; box-shadow: 0 0 10px var(--ac-glow); }
.di-tier .sum { font-size: .875rem; font-weight: 500; line-height: 1.65; }
.di-tier .pick {
  margin-top: 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: .3rem;
}
.di-tier.tier-monthly { --ac: #38bdf8; --ac-soft: rgba(56, 189, 248, .17); --ac-glow: rgba(56, 189, 248, .5); border-top-color: var(--ac); }
.di-tier.tier-monthly .tier-tag { background: #38bdf8; border-color: #38bdf8; }
.di-tier.tier-monthly .count { color: #38bdf8; }
.di-tier.tier-monthly .pick { color: #38bdf8; }
.di-tier.tier-quarterly { --ac: #fb923c; --ac-soft: rgba(251, 146, 60, .18); --ac-glow: rgba(251, 146, 60, .5); border-top-color: var(--ac); }
.di-tier.tier-quarterly .tier-tag { background: #fb923c; border-color: #fb923c; }
.di-tier.tier-quarterly .count { color: #fb923c; }
.di-tier.tier-quarterly .pick { color: #fb923c; }
.di-tier.tier-yearly { --ac: #fbbf24; --ac-soft: rgba(251, 191, 36, .17); --ac-glow: rgba(251, 191, 36, .52); border-top-color: var(--ac); }
.di-tier.tier-yearly .tier-tag { background: #fbbf24; border-color: #fbbf24; }
.di-tier.tier-yearly .count { color: #fbbf24; }
.di-tier.tier-yearly .pick { color: #fbbf24; }
.di-tier:hover, .di-tier.active {
  border-color: var(--ac);
  box-shadow: 0 0 0 2px var(--ac-soft), 0 18px 46px -12px var(--ac-glow);
}

/* 包含关系公式带：24 + 13 + 12 = 49 全量 */
.di-formula {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem .9rem;
  margin-bottom: 1.5rem; padding: 1rem 1.5rem;
  background: linear-gradient(165deg, var(--card-1), var(--card-2));
  border: 2px solid var(--card-line); border-radius: 10px;
  font-size: .9375rem; font-weight: 700; color: var(--card-text);
}
.di-formula .f-item b { font-family: var(--font-code); font-size: 1.5rem; font-weight: 700; margin-right: .3rem; }
.di-formula .f-m b { color: #38bdf8; }
.di-formula .f-q b { color: #fb923c; }
.di-formula .f-y b { color: #fbbf24; }
.di-formula .f-plus { font-family: var(--font-code); font-size: 1.25rem; font-weight: 700; color: var(--card-dim); }
.di-formula .f-eq { font-family: var(--font-code); font-size: 1.375rem; font-weight: 700; color: var(--red-500); }
.di-formula .f-total {
  padding: .45rem 1rem; color: #fff; border-radius: 6px;
  background: linear-gradient(135deg, var(--red-600), var(--red-700));
  box-shadow: 0 8px 22px -8px rgba(200, 30, 30, .6);
}
.di-formula .f-total b { font-family: var(--font-code); font-size: 1.5rem; font-weight: 700; margin-right: .3rem; }

/* 档位聚焦按钮行（白底页面上的控件，保持浅色） */
.di-filters { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 1.5rem; }
.di-filter {
  padding: .5rem 1.15rem; cursor: pointer; user-select: none;
  font-family: var(--font-code); font-size: .8125rem; letter-spacing: .1em; font-weight: 700;
  color: var(--zinc-400); background: var(--panel);
  border: 2px solid var(--border); border-radius: 2px;
  transition: all .2s;
}
.di-filter:hover { color: var(--ink); border-color: rgba(200, 30, 30, .5); }
.di-filter.active {
  color: #fff; background: linear-gradient(135deg, var(--red-600), var(--red-700));
  border-color: var(--red-500); box-shadow: 0 6px 20px -6px rgba(200, 30, 30, .55);
}
.di-filter .n { opacity: .7; margin-left: .35rem; font-weight: 400; }

/* 三层堆叠：每层独立配色，层间体量差 = 多付多得 */
.di-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.di-layer {
  position: relative; padding: 1.375rem 1.5rem 1.5rem;
  border-width: 2px; border-left-width: 5px;
  transition: opacity .3s, filter .3s, border-color .25s, box-shadow .25s;
}
.di-layer.layer-monthly { --ac: #38bdf8; --ac-soft: rgba(56, 189, 248, .15); --ac-glow: rgba(56, 189, 248, .45); --ac-bd: rgba(56, 189, 248, .4); border-left-color: var(--ac); }
.di-layer.layer-quarterly { --ac: #fb923c; --ac-soft: rgba(251, 146, 60, .16); --ac-glow: rgba(251, 146, 60, .45); --ac-bd: rgba(251, 146, 60, .42); border-left-color: var(--ac); }
.di-layer.layer-yearly { --ac: #fbbf24; --ac-soft: rgba(251, 191, 36, .15); --ac-glow: rgba(251, 191, 36, .48); --ac-bd: rgba(251, 191, 36, .44); border-left-color: var(--ac); }
/* 层头：档位标签 + 名称/摘要 + 归属徽章 + 增量数字 */
.layer-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.1rem;
  margin-bottom: 1.1rem; padding-bottom: 1rem;
  border-bottom: 1px dashed var(--card-line);
}
.layer-head .tier-tag {
  display: inline-block; padding: .25rem .65rem;
  font-family: var(--font-code); font-size: 10px; letter-spacing: .2em; font-weight: 700;
  color: #14161c; background: var(--ac); border-radius: 2px;
}
.layer-title { flex: 1; min-width: 12rem; }
.layer-title h4 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 900; }
.layer-sum { margin-top: .15rem; font-size: .8125rem; font-weight: 500; }
.layer-badge {
  padding: .32rem .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ac); background: var(--ac-soft); border: 1.5px solid var(--ac); border-radius: 3px;
}
.layer-nums { margin-left: auto; text-align: right; }
.layer-plus { display: block; font-family: var(--font-code); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--ac); text-shadow: 0 0 18px var(--ac-glow); }
.layer-count { display: block; font-size: .75rem; font-weight: 600; color: var(--card-dim); }

/* 紧凑 chips：编号 + 名称，描述收进悬浮提示，清掉每条目的重复徽章 */
.di-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.di-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem;
  font-size: .875rem; font-weight: 700; color: var(--card-title);
  background: var(--ac-soft); border: 1.5px solid var(--ac-bd); border-radius: 6px;
  transition: all .2s;
}
.di-chip .code { font-family: var(--font-code); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ac); }
.di-chip:hover {
  transform: translateY(-2px);
  border-color: var(--ac);
  box-shadow: 0 0 0 2px var(--ac-soft), 0 8px 22px -8px var(--ac-glow);
}
.di-chip .di-buy { color: var(--ac); display: inline-flex; flex-shrink: 0; }
.di-chip .di-buy:hover { transform: scale(1.15); }

/* 聚焦模式：选中档包含的层高亮发光，未包含的层变暗灰化（不隐藏，形成强烈对比） */
.di-stack.focus-monthly .di-layer:not(.layer-monthly),
.di-stack.focus-quarterly .di-layer:not(.layer-monthly):not(.layer-quarterly) {
  opacity: .28; filter: grayscale(.8);
}
.di-stack.focus-monthly .layer-monthly,
.di-stack.focus-quarterly .layer-quarterly,
.di-stack.focus-yearly .layer-yearly {
  border-color: var(--ac);
  box-shadow: 0 0 0 2px var(--ac-soft), 0 18px 48px -12px var(--ac-glow);
}



/* 定制服务（vips）双列图标卡 — 金色尊享 */
.vip-card { padding: 1.75rem; display: flex; gap: 1.25rem; }
.vip-card .icon-box {
  display: flex; height: 3rem; width: 3rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 2px; border: 2px solid rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .12);
  color: #fbbf24; font-size: 1.4rem;
}
.vip-card .meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.vip-card .code { font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.vip-card h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 900; }
.vip-card .desc { font-size: .9375rem; font-weight: 500; line-height: 1.75; }
.vip-card .buy-mini { margin-top: .75rem; font-size: .8125rem; font-weight: 700; color: #38bdf8; display: inline-flex; align-items: center; gap: .25rem; }

/* 订阅价格（pricings）— 金色价格识别 */
.pricing-trust {
  margin-bottom: 2.5rem; padding: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem;
  border-top: 3px solid #fbbf24;
}
.pricing-trust .t-item { display: flex; align-items: center; gap: .75rem; }
.pricing-trust .t-avatar {
  display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center;
  border-radius: 2px; border: 2px solid rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .12);
  font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; color: #f87171;
}
.pricing-trust .t-name { font-size: .9375rem; font-weight: 700; }
.pricing-trust .t-title { font-size: 11px; font-weight: 700; color: #fbbf24; }
.pricing-trust .t-note { width: 100%; text-align: center; font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .3em; }
.pricing-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
  --ac: #fbbf24; --ac-soft: rgba(251, 191, 36, .15); --ac-glow: rgba(251, 191, 36, .48);
  padding: 1.75rem; display: flex; flex-direction: column;
  border-top: 3px solid var(--ac);
}
.pricing-card .price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.pricing-card .price-row svg { color: var(--card-dim); }
.pricing-card .price { font-family: var(--font-code); font-size: 2rem; font-weight: 700; color: #fbbf24; }
.pricing-card h3 { font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.5; }
.pricing-card .modes { display: flex; flex-direction: column; gap: .625rem; font-size: .9375rem; margin-bottom: 1rem; }
.pricing-card .modes p { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; }
.pricing-card .modes .dot-sky { margin-top: .15rem; color: #38bdf8; flex-shrink: 0; }
.pricing-card .modes .dot-red { margin-top: .15rem; color: #f87171; flex-shrink: 0; }
.pricing-card .module-label { margin-bottom: .375rem; font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.pricing-card .modules { list-style: none; display: flex; flex-direction: column; gap: .25rem; font-size: .9375rem; font-weight: 500; }
.pricing-card .modules li { display: flex; gap: .5rem; }
.pricing-card .modules li::before { content: ""; margin-top: .55rem; height: 4px; width: 4px; flex-shrink: 0; transform: rotate(45deg); background: #fbbf24; }
.pricing-card .bonus-line { display: flex; align-items: flex-start; gap: .5rem; font-weight: 600; color: #fcd34d; font-size: .9375rem; margin-top: .75rem; }
.pricing-card .limit-line { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; font-size: .875rem; margin-top: .5rem; }
.pricing-card .collapsed-foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--card-line);
  font-size: .8125rem; font-weight: 600;
}
.group:hover .pricing-card .collapsed-foot { display: none; }
.pricing-card .hover-foot { display: none; padding-top: 1rem; text-align: center; font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.group:hover .pricing-card .hover-foot { display: block; }
.pricing-card .buy-row { margin-top: 1.25rem; }

/* 承诺（promises） */
.promise-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
.promise-card { --ac: #ef4444; --ac-soft: rgba(239, 68, 68, .15); --ac-glow: rgba(239, 68, 68, .45); padding: 1.25rem; display: flex; align-items: flex-start; gap: .75rem; border-left: 3px solid var(--ac); }
.promise-card .num { font-family: var(--font-code); font-size: 1.125rem; font-weight: 700; color: var(--red-bright); }
.promise-card p { font-size: .9375rem; font-weight: 500; line-height: 1.7; }
.promise-note {
  --ac: #fbbf24; --ac-soft: rgba(251, 191, 36, .1); --ac-glow: rgba(251, 191, 36, .4);
  margin-top: 2.5rem; padding: 1.75rem; text-align: center;
  border: 2px solid rgba(251, 191, 36, .4);
  background: linear-gradient(to right, rgba(251, 191, 36, .1), rgba(0, 0, 0, 0), rgba(251, 191, 36, .1)), linear-gradient(165deg, var(--card-1), var(--card-2));
}
.promise-note .icon { color: #fbbf24; font-size: 1.5rem; margin-bottom: .75rem; }
.promise-note p { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 900; color: #fcd34d; line-height: 1.7; }
@media (min-width: 768px) { .promise-note p { font-size: 1.25rem; } }

/* 自定义板块 */
.custom-desc { margin-bottom: 2.5rem; max-width: 48rem; font-size: 1rem; font-weight: 500; line-height: 1.8; color: var(--zinc-400); }

/* ---------------- 页脚（保持近黑，压住全站） ---------------- */
.footer { position: relative; border-top: 2px solid rgba(220, 38, 38, .35); background: var(--bg-deep); scroll-margin-top: 4rem; }
.footer-inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1rem; }
.footer-comms { margin-bottom: 3rem; text-align: center; }
.footer-comms .row { margin: 0 auto; display: flex; max-width: 48rem; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
.footer-comms .item { text-align: center; }
.footer-comms .label { margin-bottom: .25rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .8125rem; color: #9aa0aa; }
.footer-comms .label .ic { color: var(--red-bright); }
.footer-comms .value { font-family: var(--font-code); font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: .1em; }
.footer-comms .value.red { color: #ef4444; }
.footer-cols { display: grid; gap: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 2.5rem; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
.footer-cols h4 { margin-bottom: .75rem; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 900; color: #fff; display: flex; align-items: center; gap: .5rem; }
.footer-cols h4 .ic { color: #ef4444; }
.footer-cols p { font-size: .9375rem; line-height: 1.75; color: #b6bac2; }
.footer-cols ul { list-style: none; display: grid; gap: .375rem; font-size: .9375rem; color: #b6bac2; }
.footer-cols ul li { display: flex; gap: .5rem; }
.footer-cols ul li .dot { margin-top: .55rem; height: 4px; width: 4px; flex-shrink: 0; transform: rotate(45deg); background: #ef4444; }
.footer-cols ul.contact li { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.footer-cols ul.contact .ic { color: #ef4444; flex-shrink: 0; }
.footer-copy { margin-top: 3rem; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1.5rem; text-align: center; }
.footer-copy p { font-family: var(--font-code); font-size: 11px; letter-spacing: .3em; color: #8b9099; }

/* ============================================================
   管理后台（保持浅色，便于长时间录入）
   ============================================================ */
.admin-shell { display: flex; min-height: 100vh; background: var(--bg); color: #2b2b30; }
.admin-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 14rem;
  border-right: 2px solid var(--border); background: #fafbfc;
  display: none; flex-direction: column; height: 100%;
}
@media (min-width: 1024px) { .admin-sidebar { display: flex; } }
.admin-side-head { display: flex; height: 4rem; align-items: center; gap: .625rem; border-bottom: 2px solid var(--border); padding: 0 1.25rem; }
.admin-side-head .badge { display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 2px; background: var(--red-700); color: #fff; font-family: var(--font-code); font-size: .9rem; }
.admin-side-head .t1 { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.admin-side-head .t2 { font-family: var(--font-code); font-size: 9px; font-weight: 700; letter-spacing: .25em; color: var(--zinc-600); }
.admin-nav { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
  display: flex; align-items: center; gap: .75rem; border-radius: 2px; padding: .625rem .75rem;
  font-size: .9375rem; font-weight: 600; color: var(--zinc-400); border-left: 3px solid transparent; transition: all .2s; cursor: pointer;
}
.admin-nav a:hover { background: rgba(15, 18, 25, .06); color: var(--ink); }
.admin-nav a.active { background: rgba(200, 30, 30, .09); color: var(--red-700); border-left-color: var(--red-600); }
.admin-side-foot { border-top: 2px solid var(--border); padding: .75rem; display: flex; flex-direction: column; gap: 2px; }
.admin-side-foot a, .admin-side-foot button {
  display: flex; align-items: center; gap: .75rem; border-radius: 2px; padding: .5rem .75rem;
  font-size: .875rem; font-weight: 600; color: var(--zinc-500); background: none; border: none; text-align: left; transition: color .2s; cursor: pointer;
}
.admin-side-foot a:hover { color: var(--ink); }
.admin-side-foot button:hover { color: var(--red-500); }
.admin-main { flex: 1; }
@media (min-width: 1024px) { .admin-main { padding-left: 14rem; } }
.admin-topbar {
  position: sticky; top: 0; z-index: 30; display: flex; height: 3.5rem; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--border); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); padding: 0 1rem;
}
@media (min-width: 1024px) { .admin-topbar { padding: 0 2rem; } }
.admin-topbar .tag { font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--zinc-600); }
.admin-topbar .online { border-radius: 2px; border: 1px solid rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .09); padding: .125rem .5rem; font-family: var(--font-code); font-size: 10px; font-weight: 700; color: var(--green-400); }
.admin-burger { background: none; border: none; color: var(--zinc-300); font-size: 1.2rem; }
@media (min-width: 1024px) { .admin-burger { display: none; } }
.admin-content { padding: 1rem; }
@media (min-width: 1024px) { .admin-content { padding: 2rem; } }
.admin-mobile-mask { position: fixed; inset: 0; z-index: 50; }
.admin-mobile-mask .mask { position: absolute; inset: 0; background: rgba(15, 18, 25, .5); }
.admin-mobile-mask .drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 16rem; border-right: 2px solid var(--border); background: #fafbfc; display: flex; flex-direction: column; }

.admin-h1 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.admin-sub { margin-top: .25rem; font-size: .9375rem; font-weight: 500; color: var(--zinc-500); }

/* 仪表盘卡片 */
.dash-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .dash-grid { grid-template-columns: repeat(4, 1fr); } }
.dash-card { padding: 1.25rem; cursor: pointer; }
.dash-card .num { font-family: var(--font-code); font-size: 1.875rem; font-weight: 700; color: var(--ink); }
.dash-card .label { font-size: .9375rem; font-weight: 600; color: var(--zinc-400); margin-top: .25rem; }
.dash-card .go { font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--zinc-600); margin-top: .75rem; }
.dash-tips { padding: 1.75rem; }
.dash-tips h3 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 900; color: var(--ink); margin-bottom: 1rem; }
.dash-tips ol { list-style: decimal; padding-left: 1.5rem; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; font-weight: 500; color: var(--zinc-400); line-height: 1.7; }

/* 表格 */
.admin-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.admin-table th {
  text-align: left; padding: .75rem 1rem; font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .2em;
  color: var(--zinc-500); border-bottom: 2px solid var(--border); white-space: nowrap;
}
.admin-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--border-soft); font-weight: 500; color: var(--zinc-300); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(15, 18, 25, .04); }
.admin-table .t-title { color: var(--ink); font-weight: 700; }
.admin-table .t-code { font-family: var(--font-code); font-size: .8125rem; color: var(--zinc-500); }
.admin-table .t-link { font-family: var(--font-code); font-size: .8125rem; color: var(--sky-400); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.admin-table .ops { display: flex; gap: .5rem; white-space: nowrap; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: 4px; padding: .55rem 1.1rem; font-size: .9375rem; font-weight: 700;
  border: 2px solid transparent; transition: all .2s; cursor: pointer;
}
.btn-primary { background: var(--red-700); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; }
.btn-primary:hover { background: var(--red-600); box-shadow: 0 8px 22px -8px rgba(200, 30, 30, .6); }
.btn-ghost { background: rgba(15, 18, 25, .05); border-color: var(--border); color: var(--zinc-300); }
.btn-ghost:hover { background: rgba(15, 18, 25, .09); color: var(--ink); }
.btn-danger { background: rgba(200, 30, 30, .08); border-color: rgba(200, 30, 30, .35); color: var(--red-700); }
.btn-danger:hover { background: rgba(200, 30, 30, .14); }
.btn-sm { padding: .35rem .7rem; font-size: .8125rem; }
.btn-block { width: 100%; }

/* 徽章 */
.badge-vis { border-radius: 2px; padding: .15rem .5rem; font-size: .8125rem; font-weight: 700; border: 2px solid; }
.badge-vis.on { border-color: rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .09); color: var(--green-400); }
.badge-vis.off { border-color: var(--border); background: rgba(15, 18, 25, .05); color: var(--zinc-500); }
.badge-type { font-family: var(--font-code); font-size: .75rem; font-weight: 700; color: var(--zinc-400); border: 1px solid var(--border); border-radius: 2px; padding: .1rem .4rem; }

/* 表单 */
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.form-field label { display: block; font-size: .875rem; font-weight: 700; color: var(--zinc-300); margin-bottom: .4rem; }
.form-field label .req { color: var(--red-500); margin-left: .2rem; }
.form-field .hint { margin-top: .3rem; font-size: .75rem; font-weight: 500; color: var(--zinc-600); }
.input, .textarea, .select {
  width: 100%; border-radius: 4px; border: 2px solid var(--border); background: var(--panel);
  padding: .6rem .8rem; font-size: .9375rem; font-weight: 500; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus, .textarea:focus, .select:focus { border-color: rgba(200, 30, 30, .6); box-shadow: 0 0 0 3px rgba(200, 30, 30, .1); }
.input::placeholder, .textarea::placeholder { color: var(--zinc-600); }
.textarea { min-height: 5.5rem; resize: vertical; line-height: 1.7; }
.select option { background: var(--panel); }
.checkbox-row { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--zinc-300); }
.checkbox-row input { width: 1rem; height: 1rem; accent-color: var(--red-600); }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; z-index: 60; background: rgba(15, 18, 25, .45); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; }
.modal-box { width: 100%; max-width: 42rem; border: 2px solid var(--border); border-radius: 6px; background: var(--panel); box-shadow: 0 24px 60px -12px rgba(15, 18, 25, .3); margin: auto 0; }
.modal-box.modal-lg { max-width: 56rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 2px solid var(--border); }
.modal-head h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 900; color: var(--ink); }
.modal-head .x { background: none; border: none; color: var(--zinc-500); font-size: 1.1rem; }
.modal-head .x:hover { color: var(--ink); }
.modal-body { padding: 1.5rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .75rem; padding: 1.25rem 1.5rem; border-top: 2px solid var(--border); }

/* 提示条 */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 80;
  border-radius: 4px; border: 2px solid rgba(21, 128, 61, .45); background: var(--panel);
  font-weight: 700; color: var(--green-400); padding: .7rem 1.4rem; font-size: .9375rem; box-shadow: 0 8px 30px rgba(15, 18, 25, .2);
}
.toast.err { border-color: rgba(200, 30, 30, .5); color: var(--red-700); }

/* 登录页 */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 24rem; padding: 2.5rem; }
.login-box .head { text-align: center; margin-bottom: 2rem; }
.login-box .badge { display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 4px; background: var(--red-700); color: #fff; font-family: var(--font-code); font-size: 1.3rem; margin-bottom: 1rem; box-shadow: 0 8px 22px -8px rgba(200, 30, 30, .6); }
.login-box h1 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 900; color: var(--ink); }
.login-box .sub { font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--zinc-600); margin-top: .4rem; }
.login-err { font-size: .9375rem; font-weight: 600; color: var(--red-500); margin-bottom: 1rem; }
.login-back { margin-top: 1.5rem; text-align: center; }
.login-back a { font-size: .8125rem; font-weight: 600; color: var(--zinc-500); }
.login-back a:hover { color: var(--red-500); }

/* 设置分区 */
.settings-block { padding: 1.75rem; margin-bottom: 1.5rem; }
.settings-block > h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 900; color: var(--ink); margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-soft); }

/* 板块管理 */
.type-picker { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .type-picker { grid-template-columns: repeat(4, 1fr); } }
.type-picker .t-opt { padding: 1rem; text-align: center; cursor: pointer; }
.type-picker .t-opt:hover { border-color: rgba(200, 30, 30, .5); box-shadow: 0 0 0 2px rgba(200, 30, 30, .12), 0 10px 26px -10px rgba(200, 30, 30, .35); }
.type-picker .t-opt .t-icon { font-size: 1.5rem; margin-bottom: .5rem; }
.type-picker .t-opt .t-name { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.type-picker .t-opt .t-desc { font-size: .75rem; font-weight: 500; color: var(--zinc-500); margin-top: .3rem; line-height: 1.5; }
.order-ops { display: flex; gap: .25rem; }
.order-ops button { background: rgba(15, 18, 25, .05); border: 1px solid var(--border); font-weight: 600; color: var(--zinc-300); border-radius: 3px; padding: .2rem .5rem; font-size: .75rem; }
.order-ops button:hover { background: rgba(15, 18, 25, .09); color: var(--ink); }

/* 条目编辑器（自定义板块卡片条目） */
.item-editor { border: 2px solid var(--border); border-radius: 4px; padding: 1rem; margin-bottom: 1rem; background: rgba(15, 18, 25, .02); }
.item-editor .item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.item-editor .item-head .no { font-family: var(--font-code); font-size: .75rem; font-weight: 700; color: var(--zinc-500); }

.loading-box { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: var(--zinc-500); font-family: var(--font-code); font-size: .875rem; font-weight: 700; letter-spacing: .3em; }
.loading-box .spin { width: 2rem; height: 2rem; border: 2px solid var(--border); border-top-color: var(--red-500); border-radius: 50%; animation: vb-spin 1s linear infinite; }
@keyframes vb-spin { to { transform: rotate(360deg); } }