/* =====================================================================
   AI快享 · 界面风格皮肤层 (v1.18)
   ---------------------------------------------------------------------
   设计原则：
   1. 与原明暗主题【正交】——data-theme 管明暗，data-skin 管风格，两者可任意组合。
   2. 不设 data-skin 或 data-skin="classic" 时，本文件所有规则都不命中，
      原版渲染结果逐像素不变。这是「原来的保持不变」的硬保证。
   3. 本文件必须在三端各自 CSS（style.css / admin.css / agent.css）之后加载，
      才能用同权重覆盖。组合态（深色+风格）用 [data-theme][data-skin] 双属性
      把权重抬到 0,2,0 以上，确保压过 style.css 里的 [data-theme="dark"] 补丁。
   4. 每个风格只在变量层 + 少量结构层做改动，不用 !important 硬怼。
   ===================================================================== */

/* =====================================================================
   零、图表配色（仪表盘 canvas 用）
   经典风格取值与原来写死的 #6366f1 / #10b981 / #f59e0b 完全一致，
   所以不设 data-skin 时画面没有任何变化。
   ===================================================================== */
:root {
  --chart-1: #6366f1;  --chart-1-fill: rgba(99,102,241,.14);
  --chart-2: #10b981;  --chart-2-fill: rgba(16,185,129,.14);
  --chart-3: #f59e0b;  --chart-3-fill: rgba(245,158,11,.16);
  --chart-hover: rgba(99,102,241,.45);
  --chart-glow: rgba(99,102,241,.35);
}

/* =====================================================================
   一、科技风 · 变量
   ===================================================================== */
[data-skin="tech"] {
  --brand: #0d94c9;
  --brand-2: #22d3ee;
  --brand-3: #38bdf8;
  --grad: linear-gradient(120deg, #0891b2 0%, #0ea5e9 52%, #6366f1 100%);
  --grad-soft: linear-gradient(120deg, rgba(14,165,233,.10), rgba(99,102,241,.10));
  --ink: #07141f;
  --ink-2: #23405a;
  --muted: #5a7488;
  --line: #cfe3ef;
  --line-2: #b4d2e4;
  --bg: #edf4f9;
  --bg-soft: #f5fafd;
  --card: #ffffff;
  --chip: #e4f0f8;
  --chip-on: #d5e9f7;
  --ok: #0d9488;
  --warn: #b45309;
  --danger: #dc2626;
  --brand-ink: #0b6f96;
  --brand-ink-2: #075985;
  --ink-strong: #07141f;
  --field: #edf4f9;
  --field-2: #e4f0f8;
  --tint-brand: #e0f2fe;   --tint-brand-fg: #0369a1;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(7,20,31,.05), 0 4px 12px rgba(7,20,31,.06);
  --shadow: 0 14px 34px rgba(7,20,31,.10);
  --shadow-lg: 0 26px 60px rgba(7,20,31,.16);
  color-scheme: light;

  /* —— 皮肤私有变量：只在本文件与 skin.js 里用 —— */
  --sk-a: #0ea5e9;                       /* 主强调色 */
  --sk-a2: #22d3ee;                      /* 次强调色（更亮） */
  --sk-glow: rgba(14,165,233,.22);       /* 外发光 */
  --sk-halo: rgba(14,165,233,.13);       /* 大范围光晕 */
  --sk-grid: rgba(14,165,233,.10);       /* 网格线 */
  --sk-edge: rgba(14,165,233,.65);       /* 卡片霓虹边 */
  --sk-glass: rgba(255,255,255,.84);     /* 毛玻璃顶栏 */
  --chart-1: #0ea5e9;  --chart-1-fill: rgba(14,165,233,.16);
  --chart-2: #14b8a6;  --chart-2-fill: rgba(20,184,166,.16);
  --chart-3: #f59e0b;  --chart-3-fill: rgba(245,158,11,.18);
  --chart-hover: rgba(14,165,233,.50);
  --chart-glow: rgba(14,165,233,.40);
  --sk-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sk-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"][data-skin="tech"] {
  --brand: #22d3ee;
  --brand-2: #38bdf8;
  --brand-3: #67e8f9;
  --grad: linear-gradient(120deg, #06b6d4 0%, #0ea5e9 50%, #6366f1 100%);
  --grad-soft: linear-gradient(120deg, rgba(34,211,238,.16), rgba(99,102,241,.14));
  --ink: #e8f6ff;
  --ink-2: #b7d2e6;
  --muted: #7e9aae;
  --line: #16324a;
  --line-2: #1f4a66;
  --bg: #050a12;
  --bg-soft: #08111c;
  --card: #0a1524;
  --chip: #0e2033;
  --chip-on: #123049;
  --ok: #2dd4bf;
  --warn: #fbbf24;
  --danger: #fb7185;
  --brand-ink: #67e8f9;
  --brand-ink-2: #a5f3fc;
  --ink-strong: #e8f6ff;
  --field: #08111c;
  --field-2: #0e2033;
  --tint-brand: rgba(34,211,238,.16);  --tint-brand-fg: #67e8f9;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --shadow: 0 14px 34px rgba(0,0,0,.55);
  --shadow-lg: 0 26px 60px rgba(0,0,0,.65);
  color-scheme: dark;

  --sk-glow: rgba(34,211,238,.30);
  --sk-halo: rgba(34,211,238,.16);
  --sk-grid: rgba(34,211,238,.13);
  --sk-edge: rgba(34,211,238,.75);
  --sk-glass: rgba(6,14,24,.86);
  --chart-1: #22d3ee;  --chart-1-fill: rgba(34,211,238,.18);
  --chart-2: #2dd4bf;  --chart-2-fill: rgba(45,212,191,.18);
  --chart-3: #fbbf24;  --chart-3-fill: rgba(251,191,36,.18);
  --chart-hover: rgba(34,211,238,.55);
  --chart-glow: rgba(34,211,238,.55);
}

/* =====================================================================
   二、商务风 · 变量
   ===================================================================== */
[data-skin="business"] {
  --brand: #1d3f66;
  --brand-2: #2b5c8a;
  --brand-3: #9a7b2e;
  --grad: linear-gradient(120deg, #1d3f66 0%, #2b5c8a 100%);
  --grad-soft: linear-gradient(120deg, rgba(29,63,102,.07), rgba(154,123,46,.07));
  --ink: #12161c;
  --ink-2: #333b46;
  --muted: #6a7280;
  --line: #e0dcd2;
  --line-2: #cec8ba;
  --bg: #f6f5f1;
  --bg-soft: #fbfaf6;
  --card: #ffffff;
  --chip: #f0eee7;
  --chip-on: #e6e2d6;
  --ok: #166534;
  --warn: #92400e;
  --danger: #9f1239;
  --brand-ink: #1d3f66;
  --brand-ink-2: #142f4d;
  --ink-strong: #12161c;
  --field: #f6f5f1;
  --field-2: #f0eee7;
  --tint-brand: #eef2f7;   --tint-brand-fg: #1d3f66;
  --radius: 6px;
  --shadow-sm: 0 1px 1px rgba(18,22,28,.05);
  --shadow: 0 8px 22px rgba(18,22,28,.07);
  --shadow-lg: 0 18px 44px rgba(18,22,28,.10);
  color-scheme: light;

  --sk-a: #1d3f66;
  --sk-gold: #9a7b2e;
  --sk-gold-soft: rgba(154,123,46,.10);
  --sk-glass: rgba(255,255,255,.95);
  --sk-num: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-serif: ui-serif, Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --chart-1: #1d3f66;  --chart-1-fill: rgba(29,63,102,.13);
  --chart-2: #166534;  --chart-2-fill: rgba(22,101,52,.13);
  --chart-3: #9a7b2e;  --chart-3-fill: rgba(154,123,46,.16);
  --chart-hover: rgba(29,63,102,.42);
  --chart-glow: rgba(29,63,102,.30);
}

[data-theme="dark"][data-skin="business"] {
  --brand: #8fb3d9;
  --brand-2: #a9c6e3;
  --brand-3: #c9a961;
  --grad: linear-gradient(120deg, #2b4c72 0%, #3d6b9a 100%);
  --grad-soft: linear-gradient(120deg, rgba(143,179,217,.14), rgba(201,169,97,.12));
  --ink: #eceef2;
  --ink-2: #c4cad4;
  --muted: #8d96a3;
  --line: #2a3140;
  --line-2: #3a4353;
  --bg: #101318;
  --bg-soft: #171b21;
  --card: #1a1f26;
  --chip: #222833;
  --chip-on: #2a323f;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #fb7185;
  --brand-ink: #a9c6e3;
  --brand-ink-2: #c9a961;
  --ink-strong: #eceef2;
  --field: #171b21;
  --field-2: #222833;
  --tint-brand: rgba(143,179,217,.16);  --tint-brand-fg: #a9c6e3;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow: 0 10px 26px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  color-scheme: dark;

  --sk-gold: #c9a961;
  --sk-gold-soft: rgba(201,169,97,.14);
  --sk-glass: rgba(22,27,33,.96);
  --chart-1: #8fb3d9;  --chart-1-fill: rgba(143,179,217,.16);
  --chart-2: #4ade80;  --chart-2-fill: rgba(74,222,128,.14);
  --chart-3: #c9a961;  --chart-3-fill: rgba(201,169,97,.16);
  --chart-hover: rgba(143,179,217,.55);
  --chart-glow: rgba(143,179,217,.45);
}

/* =====================================================================
   三、科技风 · 全局底色与顶栏
   ===================================================================== */
/* 网格底：远处淡出，避免整屏都是线显得脏 */
[data-skin="tech"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 560px at 50% -10%, var(--sk-halo), transparent 68%),
    linear-gradient(var(--sk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sk-grid) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
  /* v1.47.1：原来这里是 background-attachment: fixed。
     固定背景 + 页面滚动是最经典的「整页重绘 / 闪黑」组合（Windows Chromium 与移动端 WebView
     都会中招），换成随内容滚动后网格观感几乎一致，但不再每帧重绘整屏。 */
}
[data-theme="dark"][data-skin="tech"] body { background-color: #050a12; }

[data-skin="tech"] .nav {
  background: var(--sk-glass);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--sk-glow), 0 8px 24px rgba(7,20,31,.05);
}
[data-theme="dark"][data-skin="tech"] .nav {
  box-shadow: 0 1px 0 var(--sk-glow), 0 10px 30px rgba(0,0,0,.5);
}

/* LOGO 切角，是最省成本的「科技感」信号 */
[data-skin="tech"] .logo,
[data-skin="tech"] .avatar {
  border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
  box-shadow: 0 0 0 1px var(--sk-glow), 0 6px 18px var(--sk-glow);
}

/* 标题：等宽字距 + 前导斜杠，像终端里的路径 */
[data-skin="tech"] .adm-head h2 { letter-spacing: .2px; }
[data-skin="tech"] .adm-head h2::before {
  content: "// "; color: var(--sk-a); font-family: var(--sk-mono); font-weight: 700; opacity: .85;
}

[data-skin="tech"] .hero {
  background:
    radial-gradient(820px 460px at 16% -14%, var(--sk-halo), transparent 64%),
    radial-gradient(720px 420px at 88% 4%, rgba(99,102,241,.12), transparent 60%);
}
[data-theme="dark"][data-skin="tech"] .hero {
  background:
    radial-gradient(880px 480px at 16% -14%, rgba(34,211,238,.20), transparent 64%),
    radial-gradient(760px 440px at 88% 4%, rgba(99,102,241,.18), transparent 60%),
    #04080f;
}

/* =====================================================================
   四、科技风 · 卡片 / 统计 / 按钮 / 表单
   ===================================================================== */
[data-skin="tech"] .card,
[data-skin="tech"] .side,
[data-skin="tech"] .stat,
[data-skin="tech"] .step,
[data-skin="tech"] .tpl-card,
[data-skin="tech"] .price-card,
[data-skin="tech"] .notice-card,
[data-skin="tech"] .paper-prog,
[data-skin="tech"] .result,
[data-skin="tech"] .login-card,
[data-skin="tech"] .ag-card,
[data-skin="tech"] .ag-login-card {
  border-radius: 10px;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
[data-skin="tech"] .card h3,
[data-skin="tech"] .price-card h3,
[data-skin="tech"] .tpl-card h3 { letter-spacing: .1px; }

/* 统计数字：等宽 + 渐变，像 HUD 读数 */
[data-skin="tech"] .stat strong,
[data-skin="tech"] .kpi strong {
  font-family: var(--sk-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  background: linear-gradient(120deg, var(--ink) 26%, var(--sk-a) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"][data-skin="tech"] .stat strong,
[data-theme="dark"][data-skin="tech"] .kpi strong {
  background: linear-gradient(120deg, #e8f6ff 24%, #67e8f9 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

[data-skin="tech"] .btn { border-radius: 9px; }
[data-skin="tech"] .btn.primary {
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(14,165,233,.30);
}
[data-skin="tech"] .btn.primary:hover { box-shadow: 0 10px 26px rgba(14,165,233,.38); }
[data-theme="dark"][data-skin="tech"] .btn.primary {
  box-shadow: 0 6px 22px rgba(34,211,238,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
[data-theme="dark"][data-skin="tech"] .btn.primary:hover {
  box-shadow: 0 10px 30px rgba(34,211,238,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
[data-skin="tech"] .btn.ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
[data-skin="tech"] .btn.ghost:hover {
  border-color: var(--sk-a);
  color: var(--brand-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sk-glow);
}
[data-theme="dark"][data-skin="tech"] .btn.ghost:hover { background: rgba(34,211,238,.08); }

/* 输入框：聚焦时用青色描边 + 内发光，替代原来的靛蓝 */
[data-skin="tech"] .input,
[data-skin="tech"] textarea.input,
[data-skin="tech"] select.input { border-radius: 9px; background: var(--field); }
[data-skin="tech"] .input:focus,
[data-skin="tech"] textarea.input:focus {
  border-color: var(--sk-a);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--sk-glow);
}
[data-theme="dark"][data-skin="tech"] .input:focus,
[data-theme="dark"][data-skin="tech"] textarea.input:focus {
  background: #08111c;
  box-shadow: 0 0 0 3px rgba(34,211,238,.22);
}

[data-skin="tech"] .tabs { border-radius: 10px; }
[data-skin="tech"] .tabs button.on { box-shadow: 0 0 0 1px var(--sk-glow), var(--shadow-sm); }
[data-skin="tech"] .seg { border-radius: 9px; }
[data-skin="tech"] .seg button.on { box-shadow: 0 0 0 1px var(--sk-glow), 0 2px 8px rgba(7,20,31,.08); }
[data-skin="tech"] .pill { border-radius: 5px; font-family: var(--sk-mono); letter-spacing: .2px; }

[data-skin="tech"] .cta-box {
  border-radius: 14px;
  box-shadow: 0 22px 56px rgba(14,165,233,.30);
}
[data-theme="dark"][data-skin="tech"] .cta-box { box-shadow: 0 22px 60px rgba(34,211,238,.22); }

[data-skin="tech"] .price-card:hover,
[data-skin="tech"] .tpl-card:hover { border-color: var(--sk-a); box-shadow: 0 14px 34px rgba(14,165,233,.16); }

[data-skin="tech"] .table th {
  font-family: var(--sk-mono);
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
[data-skin="tech"] footer { border-top: 1px solid var(--line); }
[data-theme="dark"][data-skin="tech"] footer { background: #050a12; }

/* 滚动条 / 选中色 */
[data-skin="tech"] * { scrollbar-color: var(--line-2) transparent; }
[data-skin="tech"] ::selection { background: rgba(14,165,233,.24); color: var(--ink); }
[data-theme="dark"][data-skin="tech"] ::selection { background: rgba(34,211,238,.30); color: #eafaff; }

/* =====================================================================
   五、科技风 · 仪表盘 HUD（用户点名的重点）
   ===================================================================== */
/* 主区域：顶部光晕 + 网格，和 body 网格叠加出纵深 */
[data-skin="tech"] .adm-main {
  background:
    radial-gradient(760px 320px at 88% -8%, var(--sk-halo), transparent 62%),
    radial-gradient(620px 300px at 6% 4%, rgba(99,102,241,.06), transparent 60%);
}
[data-theme="dark"][data-skin="tech"] .adm-main {
  background:
    radial-gradient(820px 340px at 88% -8%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(660px 320px at 6% 4%, rgba(99,102,241,.10), transparent 60%);
}

/* 卡片：把原来「悬停才亮的顶部渐变线」改成常亮的左侧霓虹边 —— HUD 边框感 */
[data-skin="tech"] .b-tile {
  border-radius: 8px;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
[data-skin="tech"] .b-tile::before {
  left: 0; right: auto; top: 0; bottom: 0;
  width: 2px; height: auto;
  opacity: .55;
  transition: opacity .28s ease, width .28s ease;
}
[data-skin="tech"] .b-tile:hover::before { opacity: 1; width: 3px; }
[data-skin="tech"] .b-tile:hover {
  border-color: var(--sk-a);
  box-shadow: 0 0 0 1px var(--sk-glow), 0 12px 28px rgba(14,165,233,.14);
}
[data-theme="dark"][data-skin="tech"] .b-tile:hover {
  box-shadow: 0 0 0 1px var(--sk-edge), 0 14px 34px rgba(0,0,0,.6), 0 0 26px rgba(34,211,238,.16);
}

/* 卡片标题的小竖条：加发光，像指示灯 */
[data-skin="tech"] .tile-head h3::before {
  box-shadow: 0 0 8px var(--sk-a);
  animation: skPulse 3.2s ease-in-out infinite;
}
@keyframes skPulse {
  0%, 100% { opacity: 1 }
  50% { opacity: .45 }
}

/* KPI：原有 ::after 是径向光斑，科技风下改成呼吸的青色光晕 */
[data-skin="tech"] .kpi {
  border-radius: 8px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--card) 62%);
  border-color: var(--line);
}
[data-skin="tech"] .kpi::after {
  background: radial-gradient(circle, var(--sk-halo), transparent 70%);
  animation: skHalo 5s ease-in-out infinite;
}
@keyframes skHalo {
  0%, 100% { opacity: .7; transform: scale(1) }
  50% { opacity: 1; transform: scale(1.08) }
}
[data-skin="tech"] .kpi:hover { border-color: var(--sk-a); box-shadow: 0 0 0 1px var(--sk-glow), 0 10px 26px rgba(14,165,233,.14); }
[data-skin="tech"] .kpi span { font-family: var(--sk-mono); font-size: 12px; letter-spacing: .2px; }
[data-skin="tech"] .kpi em { font-family: var(--sk-num); font-variant-numeric: tabular-nums; }

/* 图表区：网格底 + 缓慢平移，做出雷达扫描的错觉（不盖 canvas，无遮挡风险） */
[data-skin="tech"] .trend-wrap {
  border-radius: 6px;
  background-image:
    linear-gradient(var(--sk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sk-grid) 1px, transparent 1px);
  background-size: 100% 25%, 8.3333% 100%;
  animation: skGridMove 9s linear infinite;
}
@keyframes skGridMove {
  to { background-position: 0 56px, 56px 0; }
}

/* 今日实况：图标块换成描边方框，等宽数字 */
[data-skin="tech"] .today-item {
  border-radius: 7px;
  background: var(--bg-soft);
}
[data-skin="tech"] .today-item .t-ico {
  border-radius: 7px;
  background: rgba(14,165,233,.12);
  box-shadow: inset 0 0 0 1px var(--sk-glow);
}
[data-theme="dark"][data-skin="tech"] .today-item .t-ico { background: rgba(34,211,238,.14); }

/* 活动流：左侧霓虹条 + 等宽时间戳 */
[data-skin="tech"] .feed-item {
  border-left: 2px solid var(--sk-glow);
  padding-left: 10px;
  border-radius: 0 6px 6px 0;
}
[data-skin="tech"] .feed-item.is-new { border-left-color: var(--sk-a); background: rgba(14,165,233,.07); }
[data-theme="dark"][data-skin="tech"] .feed-item.is-new { background: rgba(34,211,238,.09); }
[data-skin="tech"] .feed-time,
[data-skin="tech"] .feed-amt { font-family: var(--sk-num); font-variant-numeric: tabular-nums; }

/* 排行条：条本身加发光，扫光动画保留 */
[data-skin="tech"] .rank-bar i,
[data-skin="tech"] .key-src-bar i { box-shadow: 0 0 10px var(--sk-glow); }
[data-skin="tech"] .rank-bar i::after { animation-duration: 2.2s; }

/* 实时连接指示灯：加大光晕，和整体 HUD 呼应 */
[data-skin="tech"] .live-chip[data-state="live"] .live-dot {
  box-shadow: 0 0 0 4px rgba(45,212,191,.16), 0 0 10px rgba(45,212,191,.7);
}
[data-skin="tech"] .live-chip { border-radius: 7px; font-family: var(--sk-mono); font-size: 12px; }

/* 后台侧栏：深底 + 青色选中态 */
[data-skin="tech"] .adm-side {
  background: #08131f;
  border-right: 1px solid rgba(34,211,238,.14);
}
[data-skin="tech"] .adm-nav button { border-radius: 7px; }
[data-skin="tech"] .adm-nav button.on {
  background: linear-gradient(120deg, rgba(14,165,233,.92), rgba(99,102,241,.92));
  box-shadow: 0 8px 20px rgba(14,165,233,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
[data-skin="tech"] .adm-brand { letter-spacing: .3px; }
[data-skin="tech"] .adm-brand .logo { box-shadow: 0 0 0 1px rgba(34,211,238,.5), 0 6px 18px rgba(34,211,238,.35); }
/* 侧栏底部按钮压在深底上：.btn.ghost 的「深色字」规则会和这里的属性选择器同权重，
   谁在后面谁生效 → 必须显式把这几个按钮的颜色再写一遍，否则科技风浅色下是
   深字压深底（实测对比度 1.74，等于看不见）。 */
[data-skin="tech"] .adm-side-foot .btn.ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(34,211,238,.22);
  color: #dceaf5;
}
[data-skin="tech"] .adm-side-foot .btn.ghost:hover {
  background: rgba(34,211,238,.16);
  border-color: rgba(34,211,238,.45);
  color: #eafaff;
  box-shadow: none;
}
[data-skin="tech"] .adm-me { color: #9fb6c9; }
[data-skin="tech"] .adm-side-foot { border-top-color: rgba(34,211,238,.16); }

/* 登录页 */
[data-skin="tech"] .login-wrap {
  background:
    radial-gradient(700px 360px at 50% 0%, var(--sk-halo), transparent 65%),
    radial-gradient(500px 260px at 80% 30%, rgba(99,102,241,.10), transparent 62%),
    var(--bg);
}

/* =====================================================================
   六、科技风 · 代理端
   ===================================================================== */
[data-skin="tech"] .ag-side { background: var(--card); border-right: 1px solid var(--line); }
[data-skin="tech"] .ag-wallet {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 45%, #4f46e5 100%);
  box-shadow: 0 14px 30px rgba(14,165,233,.30);
}
[data-skin="tech"] .ag-wallet-num { font-family: var(--sk-num); font-variant-numeric: tabular-nums; }
/* 钱包卡上的按钮永远压在白底上，文字必须固定深色，不跟主题提亮。
   注意 :not(.ghost)：ghost 变体是「半透明白底 + 白字」，压在紫色渐变上，
   如果一起改成深青字，深青压半透明白 → 实测 2.9，等于看不见。 */
[data-skin="tech"] .ag-w-btn:not(.ghost) { color: #0b6f96; }
[data-skin="tech"] .ag-w-btn.ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.34); }
[data-skin="tech"] .ag-kpi { border-radius: 8px; }
[data-skin="tech"] .ag-kpi-num { font-family: var(--sk-num); font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
[data-skin="tech"] .ag-badge { border-radius: 5px; font-family: var(--sk-mono); letter-spacing: .1px; }
[data-skin="tech"] .ag-card,
[data-skin="tech"] .ag-live-card { border-radius: 10px; }
[data-skin="tech"] .ag-login { background: #04101a; }
[data-skin="tech"] .ag-login-bg {
  background:
    radial-gradient(680px 420px at 18% 12%, rgba(14,165,233,.42), transparent 62%),
    radial-gradient(560px 380px at 82% 18%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(700px 500px at 50% 108%, rgba(34,211,238,.24), transparent 62%);
}
[data-skin="tech"] .ag-login-bg::after {
  background-image:
    linear-gradient(rgba(34,211,238,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .35;
}
[data-skin="tech"] .ag-chart { border-radius: 8px; }

/* =====================================================================
   七、商务风 · 全局
   ===================================================================== */
[data-skin="business"] body { background: var(--bg); }

[data-skin="business"] .nav {
  background: var(--sk-glass);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 2px 0 rgba(29,63,102,.06);
}
[data-skin="business"] .nav-links { gap: 26px; }
[data-skin="business"] .nav-links a { font-weight: 600; letter-spacing: .2px; }

/* 标题换衬线：正式、像报纸 / 公文的观感 */
[data-skin="business"] .hero h1,
[data-skin="business"] .adm-head h2,
[data-skin="business"] .login-card .brand,
[data-skin="business"] .ag-login-card h1,
[data-skin="business"] .card h3,
[data-skin="business"] .tile-head h3,
[data-skin="business"] .price-card h3 {
  font-family: var(--sk-serif);
  letter-spacing: 0;
  font-weight: 700;
}
[data-skin="business"] .logo,
[data-skin="business"] .avatar {
  border-radius: 4px;
  background: linear-gradient(160deg, #1d3f66, #2b5c8a);
  box-shadow: none;
}
[data-skin="business"] .hero {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"][data-skin="business"] .hero {
  background: linear-gradient(180deg, #141922 0%, #101318 100%);
}

/* =====================================================================
   八、商务风 · 卡片 / 按钮 / 表单
   ===================================================================== */
[data-skin="business"] .card,
[data-skin="business"] .side,
[data-skin="business"] .stat,
[data-skin="business"] .step,
[data-skin="business"] .tpl-card,
[data-skin="business"] .price-card,
[data-skin="business"] .notice-card,
[data-skin="business"] .paper-prog,
[data-skin="business"] .result,
[data-skin="business"] .login-card,
[data-skin="business"] .ag-card,
[data-skin="business"] .ag-login-card {
  border-radius: 6px;
  border-color: var(--line);
  box-shadow: none;
}
[data-skin="business"] .price-card { border-top: 2px solid var(--brand); }
[data-skin="business"] .price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
}
[data-skin="business"] .tpl-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }

[data-skin="business"] .stat strong,
[data-skin="business"] .kpi strong {
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
  letter-spacing: -.3px;
}

[data-skin="business"] .btn { border-radius: 4px; font-weight: 600; letter-spacing: .2px; }
[data-skin="business"] .btn.primary {
  background: #1d3f66;
  box-shadow: none;
  border: 1px solid #16304f;
}
[data-skin="business"] .btn.primary:hover { background: #16304f; box-shadow: none; transform: none; }
[data-theme="dark"][data-skin="business"] .btn.primary {
  background: #2b4c72; border-color: #3d6b9a; color: #f2f6fb;
}
[data-theme="dark"][data-skin="business"] .btn.primary:hover { background: #35608c; }
[data-skin="business"] .btn.ghost {
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
[data-skin="business"] .btn.ghost:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
  background: var(--card);
  transform: none;
}
[data-skin="business"] .input,
[data-skin="business"] textarea.input,
[data-skin="business"] select.input {
  border-radius: 4px;
  background: var(--card);
  border-color: var(--line-2);
}
[data-skin="business"] .input:focus,
[data-skin="business"] textarea.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29,63,102,.10);
  background: var(--card);
}
[data-theme="dark"][data-skin="business"] .input:focus,
[data-theme="dark"][data-skin="business"] textarea.input:focus {
  box-shadow: 0 0 0 3px rgba(143,179,217,.20);
}

[data-skin="business"] .tabs { border-radius: 4px; background: var(--chip); }
[data-skin="business"] .tabs button.on { border-radius: 3px; box-shadow: none; border: 1px solid var(--line-2); }
[data-skin="business"] .seg { border-radius: 4px; }
[data-skin="business"] .seg button.on { border-radius: 3px; box-shadow: none; border: 1px solid var(--line-2); }
[data-skin="business"] .pill { border-radius: 3px; letter-spacing: .1px; }
[data-skin="business"] .cta-box { border-radius: 8px; box-shadow: none; }
[data-skin="business"] .table th {
  border-bottom: 2px solid var(--line-2);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .6px;
}
[data-skin="business"] ::selection { background: rgba(29,63,102,.18); color: var(--ink); }
[data-theme="dark"][data-skin="business"] ::selection { background: rgba(143,179,217,.26); }

/* =====================================================================
   九、商务风 · 仪表盘（扁平、纸质、金色分隔）
   ===================================================================== */
[data-skin="business"] .adm-main {
  background: var(--bg);
}
[data-skin="business"] .b-tile {
  border-radius: 4px;
  border-color: var(--line);
  box-shadow: none;
}
[data-skin="business"] .b-tile::before { display: none; }   /* 去掉顶部渐变线动画 */
[data-skin="business"] .b-tile:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--line-2);
}
/* 标题下方一条金线：正式文档的分隔感 */
[data-skin="business"] .tile-head h3 {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sk-gold);
  flex: 0 1 auto;
}
[data-skin="business"] .tile-head h3::before {
  background: var(--sk-gold);
  width: 0; height: 0; display: none;
}
[data-skin="business"] .kpi {
  border-radius: 4px;
  background: var(--card);
  border-top: 2px solid var(--brand);
}
[data-skin="business"] .kpi::after { display: none; }       /* 去光斑 */
[data-skin="business"] .kpi:hover { border-color: var(--line-2); border-top-color: var(--brand); box-shadow: var(--shadow-sm); }
[data-skin="business"] .kpi span { font-size: 12px; letter-spacing: .2px; }
[data-skin="business"] .trend-wrap {
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 25%;
}
[data-skin="business"] .today-item {
  border-radius: 4px;
  background: var(--card);
}
[data-skin="business"] .today-item .t-ico {
  border-radius: 4px;
  background: var(--sk-gold-soft);
}
[data-skin="business"] .feed-item { border-radius: 0; }
[data-skin="business"] .feed-item.is-new { background: var(--sk-gold-soft); }
[data-skin="business"] .rank-bar i,
[data-skin="business"] .key-src-bar i { border-radius: 2px; }
[data-skin="business"] .rank-bar i::after { display: none; }   /* 去掉扫光动画 */
[data-skin="business"] .live-chip { border-radius: 3px; }
[data-skin="business"] .seg { background: var(--chip); }

[data-skin="business"] .adm-side {
  background: #16233a;
  border-right: 1px solid rgba(255,255,255,.06);
}
[data-skin="business"] .adm-nav button { border-radius: 4px; }
[data-skin="business"] .adm-nav button.on {
  background: #26456b;
  box-shadow: none;
  border-left: 3px solid #c9a961;
  border-radius: 0 4px 4px 0;
}
[data-skin="business"] .adm-brand .logo { box-shadow: none; }
/* 同上：侧栏底部按钮的深色字要覆盖掉 */
[data-skin="business"] .adm-side-foot .btn.ghost {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: #e6e9ef;
}
[data-skin="business"] .adm-side-foot .btn.ghost:hover {
  background: rgba(201,169,97,.16);
  border-color: rgba(201,169,97,.45);
  color: #f2f0ea;
  box-shadow: none;
}
[data-skin="business"] .adm-me { color: #a5adba; }
[data-skin="business"] .adm-side-foot { border-top-color: rgba(255,255,255,.12); }
[data-skin="business"] .live-chip[data-state="live"] .live-dot { box-shadow: 0 0 0 3px rgba(18,161,80,.14); }
[data-skin="business"] .login-wrap {
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}

/* =====================================================================
   十、商务风 · 代理端
   ===================================================================== */
[data-skin="business"] .ag-side { background: var(--card); border-right: 1px solid var(--line); }
[data-skin="business"] .ag-wallet {
  background: linear-gradient(135deg, #16233a 0%, #1d3f66 60%, #2b5c8a 100%);
  box-shadow: 0 10px 24px rgba(22,35,58,.22);
  border-radius: 6px;
}
[data-skin="business"] .ag-wallet::after { display: none; }
[data-skin="business"] .ag-w-btn:not(.ghost) { color: #16304f; border-radius: 3px; }
[data-skin="business"] .ag-w-btn.ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.34); }
[data-skin="business"] .ag-kpi { border-radius: 4px; border-top: 2px solid var(--brand); }
[data-skin="business"] .ag-kpi-num { font-variant-numeric: tabular-nums; color: var(--brand-ink); }
[data-skin="business"] .ag-badge { border-radius: 3px; }
[data-skin="business"] .ag-card,
[data-skin="business"] .ag-live-card { border-radius: 6px; }
[data-skin="business"] .ag-side-tag {
  background: var(--sk-gold-soft);
  color: var(--sk-gold);
  border-radius: 3px;
}
[data-skin="business"] .ag-login { background: #101a2b; }
[data-skin="business"] .ag-login-bg {
  background:
    radial-gradient(680px 420px at 20% 14%, rgba(29,63,102,.66), transparent 62%),
    radial-gradient(560px 380px at 82% 20%, rgba(154,123,46,.20), transparent 60%),
    radial-gradient(700px 500px at 50% 106%, rgba(43,92,138,.24), transparent 62%);
}
[data-skin="business"] .ag-login-bg::after {
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 100% 30px;
  animation: none;
  opacity: .5;
}

/* =====================================================================
   十一、校样风 · 变量（v1.56）
   ---------------------------------------------------------------------
   设计主张：把写作工具做成一间排字房。
   前三套（经典/科技/商务）都在比「谁的渐变好看」，这套不比渐变，比「字」：
   纸不是白的，是泛黄的纸；强调色只有一个，是盖在稿子上的朱红印章；
   标题用宋体，编号用等宽，边角一律方，分隔线一律双线。
   一句话：界面应该像一份正在被编辑的校样，而不是一块发光的玻璃。
   ===================================================================== */
[data-skin="editorial"] {
  /* —— 纸与墨 —— */
  --paper: #f2ebdd;           /* 纸 */
  --paper-2: #fffdf6;         /* 卡纸（比纸更亮，像贴上去的一张） */
  --ink-pure: #17140f;        /* 墨 */

  --brand: #b3342a;           /* 朱红：全站唯一的强调色 */
  --brand-2: #d4513c;
  --brand-3: #c08a2e;         /* 金：只用于细描边与星标 */
  --grad: linear-gradient(120deg, #b3342a 0%, #c8503a 58%, #c08a2e 100%);
  --grad-soft: linear-gradient(120deg, rgba(179,52,42,.09), rgba(192,138,46,.09));

  --ink: #17140f;
  --ink-2: #3b352b;
  --muted: #6f6757;
  --line: #ddd2ba;
  --line-2: #c8b99c;
  --bg: #f2ebdd;
  --bg-soft: #f9f3e6;
  --card: #fffdf6;
  --chip: #ece2ce;
  --chip-on: #f4e2d9;
  --ok: #2f6b57;
  --warn: #a06318;
  --danger: #a82a20;

  --brand-ink: #96271f;
  --brand-ink-2: #7c1f18;
  --ink-strong: #17140f;
  --field: #f7f0e1;
  --field-2: #efe6d1;

  --tint-brand: #f6e2dc;      --tint-brand-fg: #96271f;
  --tint-rose: #f8e0da;       --tint-rose-fg: #a82a20;
  --tint-amber: #f8ecd4;      --tint-amber-fg: #8a5a12;
  --tint-yellow: #f8ecc8;     --tint-yellow-fg: #7d5308;
  --tint-emerald: #e4efe7;    --tint-emerald-fg: #1f5747;
  --tint-green: #e3efe6;      --tint-green-fg: #235c46;
  --tint-pink: #f7e2e4;       --tint-pink-fg: #8c2036;
  --tint-brand-soft: #faf0e2;
  --surface-2: #f7f0e1;
  --ink-1: #17140f;
  --ink-3: #6f6757;
  --plag-ok-fg: #1f5747;
  --plag-warn-fg: #8a5a12;
  --plag-bad-fg: #a82a20;

  /* —— 方角与硬阴影：印刷品的边是切出来的，不是揉出来的 —— */
  --radius: 2px;
  --shadow-sm: 0 1px 0 rgba(23,20,15,.05);
  --shadow: 3px 3px 0 rgba(23,20,15,.08);
  --shadow-lg: 6px 6px 0 rgba(23,20,15,.10);
  color-scheme: light;

  /* —— 皮肤私有 —— */
  --sk-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", ui-serif, Georgia, serif;
  --sk-sans: -apple-system, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --sk-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sk-rule: rgba(23,20,15,.10);        /* 纸纹横线 */
  --sk-stamp: rgba(179,52,42,.92);      /* 印章 */
  --chart-1: #b3342a;  --chart-1-fill: rgba(179,52,42,.14);
  --chart-2: #2f6b57;  --chart-2-fill: rgba(47,107,87,.14);
  --chart-3: #c08a2e;  --chart-3-fill: rgba(192,138,46,.16);
  --chart-hover: rgba(179,52,42,.45);
  --chart-glow: rgba(179,52,42,.30);
}

[data-theme="dark"][data-skin="editorial"] {
  --paper: #14120f;
  --paper-2: #1e1a16;
  --ink-pure: #ece4d2;

  --brand: #e05a45;
  --brand-2: #f0775f;
  --brand-3: #e0aa55;
  --grad: linear-gradient(120deg, #e05a45 0%, #f0775f 58%, #e0aa55 100%);
  --grad-soft: linear-gradient(120deg, rgba(224,90,69,.16), rgba(224,170,85,.12));

  --ink: #ece4d2;
  --ink-2: #cfc5b0;
  --muted: #9d9483;
  --line: #35302a;
  --line-2: #4a433a;
  --bg: #14120f;
  --bg-soft: #1a1713;
  --card: #1e1a16;
  --chip: #2a251f;
  --chip-on: #362a23;
  --ok: #7fd3b4;
  --warn: #e8b765;
  --danger: #f08a78;

  --brand-ink: #f0897a;
  --brand-ink-2: #f5a597;
  --ink-strong: #ece4d2;
  --field: #191510;
  --field-2: #241f19;

  --tint-brand: rgba(224,90,69,.20);   --tint-brand-fg: #f0897a;
  --tint-rose: rgba(224,90,69,.18);    --tint-rose-fg: #f6a394;
  --tint-amber: rgba(224,170,85,.16);  --tint-amber-fg: #f0c37c;
  --tint-yellow: rgba(224,170,85,.18); --tint-yellow-fg: #f2cd8f;
  --tint-emerald: rgba(47,107,87,.24); --tint-emerald-fg: #86d3b6;
  --tint-green: rgba(47,107,87,.22);   --tint-green-fg: #8ddbbd;
  --tint-pink: rgba(180,60,90,.20);    --tint-pink-fg: #f0a2b4;
  --tint-brand-soft: rgba(224,90,69,.12);
  --surface-2: #191510;
  --ink-1: #ece4d2;
  --ink-3: #9d9483;
  --plag-ok-fg: #86d3b6;
  --plag-warn-fg: #f0c37c;
  --plag-bad-fg: #f6a394;

  --shadow-sm: 0 1px 0 rgba(0,0,0,.45);
  --shadow: 3px 3px 0 rgba(0,0,0,.45);
  --shadow-lg: 6px 6px 0 rgba(0,0,0,.50);
  color-scheme: dark;

  --sk-rule: rgba(236,228,210,.055);
  --sk-stamp: rgba(224,90,69,.92);
  --chart-1: #e05a45;  --chart-1-fill: rgba(224,90,69,.18);
  --chart-2: #7fd3b4;  --chart-2-fill: rgba(127,211,180,.16);
  --chart-3: #e0aa55;  --chart-3-fill: rgba(224,170,85,.18);
  --chart-hover: rgba(224,90,69,.50);
  --chart-glow: rgba(224,90,69,.35);
}

/* =====================================================================
   十一之二、校样风 · 全局底色、顶栏与标题
   ===================================================================== */

/* 纸纹：每 4px 一道极淡横线，模仿凸版印刷的网点。不用 fixed，滚动时不重绘整屏。 */
[data-skin="editorial"] body {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    0deg, var(--sk-rule) 0 1px, transparent 1px 4px
  );
}

/* 顶栏：纸色 + 底部双线，像稿纸的页眉 */
[data-skin="editorial"] .nav {
  /* 不用 color-mix：老 Safari / 国产内核浏览器不认，会掉成透明顶栏 */
  background: var(--paper-2);
  border-bottom: 3px double var(--line-2);
  box-shadow: none;
}
[data-skin="editorial"] .nav-links a {
  font-size: 13.5px;
  letter-spacing: .06em;
  font-weight: 500;
}
[data-skin="editorial"] .nav-links a:hover { color: var(--brand-ink); }

/* 站标：一枚朱红方章 */
[data-skin="editorial"] .logo {
  border-radius: 0;
  background: var(--brand);
  box-shadow: 2px 2px 0 rgba(23,20,15,.16);
  font-family: var(--sk-serif);
  font-weight: 700;
  letter-spacing: .02em;
}
[data-skin="editorial"] .brand { letter-spacing: .02em; }
[data-skin="editorial"] .brand > span:last-child,
[data-skin="editorial"] .login-card .brand {
  font-family: var(--sk-serif);
  font-weight: 700;
}

/* 标题一律换宋体：这是整套设计最响的一处声音 */
[data-skin="editorial"] .hero h1,
[data-skin="editorial"] .hero h2,
[data-skin="editorial"] .card h3,
[data-skin="editorial"] .tile-head h3,
[data-skin="editorial"] .price-card h3,
[data-skin="editorial"] .sec-head h2,
[data-skin="editorial"] .adm-head h2,
[data-skin="editorial"] .login-card h1,
[data-skin="editorial"] .ag-login-card h1,
[data-skin="editorial"] .ag-card h3 {
  font-family: var(--sk-serif);
  font-weight: 700;
  letter-spacing: .01em;
}
[data-skin="editorial"] .hero h1 {
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.18;
  letter-spacing: .005em;
}
/* 副标题走衬线斜体：像编者按 */
[data-skin="editorial"] .hero p,
[data-skin="editorial"] .hero-sub {
  font-family: var(--sk-serif);
  font-style: italic;
  letter-spacing: .01em;
  color: var(--ink-2);
}
[data-skin="editorial"] .hero {
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(179,52,42,.07), transparent 62%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"][data-skin="editorial"] .hero {
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(224,90,69,.10), transparent 62%),
    linear-gradient(180deg, #191510 0%, #14120f 100%);
}

/* 章节标题：§ 记号 + 下方双线。这是「校样」最直接的暗号。 */
[data-skin="editorial"] .sec-head h2::before,
[data-skin="editorial"] .card > h3::before {
  content: "§";
  font-family: var(--sk-serif);
  font-weight: 400;
  color: var(--brand);
  margin-right: .38em;
  font-size: .88em;
  opacity: .9;
}
[data-skin="editorial"] .sec-head { border-bottom: 3px double var(--line-2); padding-bottom: 10px; }
[data-skin="editorial"] .card > h3 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  font-size: 16.5px;
}

/* =====================================================================
   十一之三、校样风 · 卡片 / 按钮 / 表单 / 表格
   ---------------------------------------------------------------------
   统一语言：方角、1px 墨线、无柔光、硬偏移阴影。
   ===================================================================== */
[data-skin="editorial"] .card,
[data-skin="editorial"] .feature,
[data-skin="editorial"] .demo-card,
[data-skin="editorial"] .side,
[data-skin="editorial"] .stat,
[data-skin="editorial"] .step,
[data-skin="editorial"] .tpl-card,
[data-skin="editorial"] .price-card,
[data-skin="editorial"] .notice-card,
[data-skin="editorial"] .paper-prog,
[data-skin="editorial"] .result,
[data-skin="editorial"] .login-card,
[data-skin="editorial"] .ag-card,
[data-skin="editorial"] .ag-login-card,
[data-skin="editorial"] .cta-box,
[data-skin="editorial"] .bal-card {
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background: var(--card);
  box-shadow: none;
}
[data-skin="editorial"] .card:hover,
[data-skin="editorial"] .feature:hover,
[data-skin="editorial"] .tpl-card:hover {
  border-color: var(--ink-2);
  box-shadow: 3px 3px 0 rgba(23,20,15,.07);
  transform: none;
}
[data-theme="dark"][data-skin="editorial"] .card:hover,
[data-theme="dark"][data-skin="editorial"] .feature:hover,
[data-theme="dark"][data-skin="editorial"] .tpl-card:hover {
  border-color: #6b6152;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}

/* 价格卡：推荐档用朱红顶边，其余保持安静 */
[data-skin="editorial"] .price-card { border-top: 3px solid var(--line-2); }
[data-skin="editorial"] .price-card.on,
[data-skin="editorial"] .price-card.pop,
[data-skin="editorial"] .price-card.hot {
  border-top-color: var(--brand);
  box-shadow: 4px 4px 0 rgba(179,52,42,.14);
}
[data-skin="editorial"] .price-card .price,
[data-skin="editorial"] .price-card .amount {
  font-family: var(--sk-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* v1.56：首页的套餐卡被两样东西压着 —— #vipPkgs 的 ID 规则给了 16px 圆角、
   .fx 又挂了一圈流动的彩虹描边。皮肤必须用同级别选择器压回去，
   否则「方角」只在别的页面成立，套餐页仍然是圆的。 */
[data-skin="editorial"] #vipPkgs .price-card { border-radius: 2px; }
[data-skin="editorial"] .price-card.fx > .fx-ring,
[data-skin="editorial"] .price-card.fx > .fx-glow { display: none; }
[data-skin="editorial"] .price-card.fx { border-color: var(--line-2); }
[data-skin="editorial"] .price-card.pop,
[data-skin="editorial"] .price-card.hot { border-color: var(--line-2); border-top-color: var(--brand); }

/* 数字一律等宽对齐：报价、字数、额度都要「排得齐」 */
[data-skin="editorial"] .stat strong,
[data-skin="editorial"] .stat-i b,
[data-skin="editorial"] .hero-meta div strong,
[data-skin="editorial"] .kpi strong,
[data-skin="editorial"] .kpi em,
[data-skin="editorial"] .kpi b,
[data-skin="editorial"] .price-amount .val,
[data-skin="editorial"] .feed-amt,
[data-skin="editorial"] .tpl-count,
[data-skin="editorial"] .paper-quote {
  font-family: var(--sk-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* 按钮：方章。主按钮是实心朱红 + 硬偏移，像盖下去的一下 */
[data-skin="editorial"] .btn {
  border-radius: 0;
  font-family: var(--sk-sans);
  font-weight: 600;
  letter-spacing: .04em;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
[data-skin="editorial"] .btn.primary {
  background: var(--brand);
  color: #fffdf6;
  border: 1px solid var(--brand-ink-2);
  box-shadow: 2px 2px 0 rgba(23,20,15,.22);
}
[data-skin="editorial"] .btn.primary:hover {
  background: var(--brand-ink);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(23,20,15,.26);
}
[data-theme="dark"][data-skin="editorial"] .btn.primary {
  color: #1b120f;
  border-color: #b8442f;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
[data-skin="editorial"] .btn.ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  box-shadow: none;
}
[data-skin="editorial"] .btn.ghost:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* 输入框：只有底线是重的，像稿纸的填写栏 */
[data-skin="editorial"] .input,
[data-skin="editorial"] textarea.input,
[data-skin="editorial"] select.input {
  border-radius: 0;
  background: var(--field);
  border: 1px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
}
[data-skin="editorial"] .input:focus,
[data-skin="editorial"] textarea.input:focus {
  border-color: var(--line-2);
  border-bottom-color: var(--brand);
  box-shadow: none;
  background: var(--card);
}

[data-skin="editorial"] .tabs,
[data-skin="editorial"] .seg { border-radius: 0; background: var(--chip); }
[data-skin="editorial"] .tabs button,
[data-skin="editorial"] .seg button { border-radius: 0; }
[data-skin="editorial"] .tabs button.on,
[data-skin="editorial"] .seg button.on {
  border-radius: 0;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 -2px 0 var(--brand);
}

[data-skin="editorial"] .pill {
  border-radius: 0;
  font-family: var(--sk-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
[data-skin="editorial"] .opt { border-radius: 0; }
[data-skin="editorial"] .opt.on {
  background: var(--tint-brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* 表格：表头是双线 + 等宽小字，像刊物的目录 */
[data-skin="editorial"] .table th {
  border-bottom: 3px double var(--line-2);
  font-family: var(--sk-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--muted);
}
[data-skin="editorial"] .table td { border-bottom: 1px solid var(--line); }
[data-skin="editorial"] .table tr:hover td { background: var(--bg-soft); }

[data-skin="editorial"] ::selection { background: rgba(179,52,42,.16); color: var(--ink); }
[data-theme="dark"][data-skin="editorial"] ::selection { background: rgba(224,90,69,.30); }

/* 导航/侧栏选中态：左侧朱红竖条，比整块变色更克制 */
[data-skin="editorial"] .adm-nav button.on,
[data-skin="editorial"] .side a.on {
  border-left: 3px solid var(--brand);
  background: var(--bg-soft);
  border-radius: 0;
}

/* 滚动条：细窄的墨条 */
[data-skin="editorial"] * { scrollbar-color: var(--line-2) transparent; }

/* =====================================================================
   十二、切换器 UI（与风格无关，任何皮肤下都要好看）
   ===================================================================== */
.skin-toggle { font-size: 15px; }
.skin-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
  background: rgba(9,13,22,.66);
  animation: skinFade .18s ease;
}
.skin-modal.hidden { display: none !important; }
@keyframes skinFade { from { opacity: 0 } to { opacity: 1 } }
.skin-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--card, #fff);
  color: var(--ink, #111);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 30px 70px rgba(6,10,30,.35);
  animation: skinPop .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes skinPop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
.skin-panel h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.2px; }
.skin-panel .skin-sub { margin: 0 0 18px; font-size: 12.5px; color: var(--muted, #6b7280); line-height: 1.6; }
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .skin-grid { grid-template-columns: 1fr; } }
.skin-opt {
  text-align: left; cursor: pointer;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  border-radius: 12px; padding: 10px; transition: .16s;
  display: flex; flex-direction: column; gap: 8px;
}
.skin-opt:hover { border-color: var(--brand, #6366f1); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.10); }
.skin-opt.on { border-color: var(--brand, #6366f1); box-shadow: 0 0 0 2px var(--brand, #6366f1); }
.skin-opt-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.skin-opt-name i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--brand, #6366f1); opacity: 0; }
.skin-opt.on .skin-opt-name i { opacity: 1; }
.skin-opt-desc { font-size: 11.5px; color: var(--muted, #6b7280); line-height: 1.5; }

/* =====================================================================
   十二、清新风 · 变量（v1.58）
   ---------------------------------------------------------------------
   设计主张：这套不比「颜色浓」，比「重量轻」。
   前四套各自在争一块视觉：经典在发光、科技在发光更多的光、商务在装订、
   校样在排版。这套反过来——把界面做得像**早晨透过纱窗的桌面**：
   纸是白的，光是散开的，颜色只出现在需要被认出来的地方。

   三条硬规矩（不是形容词，是能让代码守住的东西）：
     1. 色块只用「薄荷 × 白」。天蓝与奶黄**只出现在文字里**（渐变标题、
        标签、图标），不做大色块——否则立刻变成三张马卡龙卡片的老套。
     2. 圆角只有一个节奏：外框 24、内件 16、控件全圆。三档，不加第四档。
     3. 阴影永远是两层：1px 贴地的实影 + 24px 散开的柔影，且不带颜色倾向。
        单层大模糊会显脏，单层硬边会显硬。

   为什么薄荷要分两个深度：`#7FC9B2` 压在白底上只有 2.4:1，只能当**装饰**；
   凡是**要读的字**一律用 `#2F7A67`（5.1:1）。这一条决定整套可读性。
   ===================================================================== */
[data-skin="fresh"] {
  /* —— 薄荷：浅的四档做底与描边，深的两档做字 —— */
  --fr-mint-50: #f2faf7;
  --fr-mint-100: #e4f5ee;
  --fr-mint-200: #cdeadd;
  --fr-mint-300: #a9dcc9;
  --fr-mint-400: #7fc9b2;   /* 只做装饰：光圈、进度、图标底 */
  --fr-mint-600: #3f9a82;
  --fr-mint-700: #2f7a67;   /* 要读的薄荷字 */

  /* —— 奶黄与天蓝：只在文字里出现 —— */
  --fr-cream: #fdf4df;
  --fr-cream-deep: #b08a3c;
  --fr-sky: #e6f2fb;
  --fr-sky-deep: #4785a8;

  --brand: #2f7a67;
  --brand-2: #3f9a82;
  --brand-3: #b08a3c;
  --brand-ink: #2f7a67;
  --brand-ink-2: #245e50;

  --ink: #2c3a36;           /* 11.9:1 */
  --ink-2: #485854;         /* 7.5:1 */
  --muted: #5f7169;         /* 5.2:1 */
  --ink-strong: #2c3a36;
  --ink-1: #2c3a36;
  --ink-3: #5f7169;

  --line: #e7f0ec;
  --line-2: #d8e9e3;
  --bg: #ffffff;
  --bg-soft: #f7fbf9;
  --card: #ffffff;
  --chip: #f2faf7;
  --chip-on: #e4f5ee;
  --field: #fbfdfc;
  --field-2: #f2faf7;
  --surface-2: #f7fbf9;

  --ok: #2f7a67;
  --warn: #b08a3c;
  --danger: #b4635a;

  --tint-brand: #e4f5ee;       --tint-brand-fg: #2f7a67;
  --tint-brand-soft: #f2faf7;
  --tint-rose: #fbedea;        --tint-rose-fg: #a2554a;
  --tint-amber: #fdf4df;       --tint-amber-fg: #8a6a2e;
  --tint-yellow: #fdf7e6;      --tint-yellow-fg: #7e6326;
  --tint-emerald: #e7f6ef;     --tint-emerald-fg: #2f7a67;
  --tint-green: #e9f7f1;       --tint-green-fg: #2c7462;
  --tint-pink: #fbeff1;        --tint-pink-fg: #96505c;
  --plag-ok-fg: #2c7462;       --plag-warn-fg: #8a6a2e;   --plag-bad-fg: #a2554a;

  /* 标题渐变：首尾同色，配 alternate 才能来回呼吸而不跳帧 */
  --grad: linear-gradient(100deg, #479e86 0%, #6bbfa6 20%, #5297bc 45%, #8fc0dc 62%, #b78c33 84%, #479e86 100%);
  --grad-soft: linear-gradient(120deg, rgba(71,158,134,.10), rgba(82,151,188,.10));

  /* 三档圆角 + 两层阴影 */
  --radius: 18px;
  --fr-r-lg: 24px;
  --fr-r-md: 16px;
  --shadow-sm: 0 1px 2px rgba(44,58,54,.04);
  --shadow: 0 1px 2px rgba(44,58,54,.04), 0 14px 30px -18px rgba(47,122,103,.28);
  --shadow-lg: 0 2px 4px rgba(44,58,54,.05), 0 26px 48px -24px rgba(47,122,103,.34);
  color-scheme: light;

  --sk-sans: "Inter", -apple-system, "PingFang SC", "Source Han Sans SC", "Noto Sans SC",
             "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;

  --chart-1: #3f9a82;  --chart-1-fill: rgba(63,154,130,.16);
  --chart-2: #5297bc;  --chart-2-fill: rgba(82,151,188,.16);
  --chart-3: #b78c33;  --chart-3-fill: rgba(183,140,51,.18);
  --chart-hover: rgba(63,154,130,.45);
  --chart-glow: rgba(63,154,130,.30);
}

/* 深色：不是把浅色反相，是把「白天的纸」换成「夜里的灯」——
   底色压到深绿灰（纯黑会把薄荷衬成荧光），薄荷提亮到能读，金色降水。 */
[data-theme="dark"][data-skin="fresh"] {
  --fr-mint-50: #17231f;
  --fr-mint-100: #1b2b26;
  --fr-mint-200: #22352f;
  --fr-mint-300: #2b443c;
  --fr-mint-400: #3d5f55;
  --fr-mint-600: #6fbfa8;
  --fr-mint-700: #9ad8c4;

  --brand: #8fd3be;
  --brand-2: #a5dec9;
  --brand-3: #d8b66b;
  --brand-ink: #8fd3be;
  --brand-ink-2: #b6e6d6;

  --ink: #eaf3ef;
  --ink-2: #c7d6d0;
  --muted: #9aafa8;
  --ink-strong: #eaf3ef;
  --ink-1: #eaf3ef;
  --ink-3: #9aafa8;

  --line: #243430;
  --line-2: #2e423c;
  --bg: #0f1715;
  --bg-soft: #131d1a;
  --card: #16211e;
  --chip: #1b2724;
  --chip-on: #203029;
  --field: #121b18;
  --field-2: #18231f;
  --surface-2: #121b18;

  --ok: #8fd3be;
  --warn: #e0b872;
  --danger: #eba196;

  --tint-brand: rgba(143,211,190,.14);   --tint-brand-fg: #a5dec9;
  --tint-brand-soft: rgba(143,211,190,.10);
  --tint-rose: rgba(235,161,150,.14);    --tint-rose-fg: #f0b3aa;
  --tint-amber: rgba(224,184,114,.14);   --tint-amber-fg: #e8c68a;
  --tint-yellow: rgba(224,184,114,.16);  --tint-yellow-fg: #ecd196;
  --tint-emerald: rgba(143,211,190,.14); --tint-emerald-fg: #a5dec9;
  --tint-green: rgba(143,211,190,.12);   --tint-green-fg: #aee3d1;
  --tint-pink: rgba(224,150,170,.14);    --tint-pink-fg: #efb0c0;
  --plag-ok-fg: #a5dec9;  --plag-warn-fg: #e8c68a;  --plag-bad-fg: #f0b3aa;

  --grad: linear-gradient(100deg, #7fc9b2 0%, #9ad6c0 20%, #8fc2da 45%, #a8d2e5 62%, #d8b66b 84%, #7fc9b2 100%);
  --grad-soft: linear-gradient(120deg, rgba(127,201,178,.14), rgba(143,194,218,.12));

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 16px 32px -20px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 28px 52px -26px rgba(0,0,0,.7);
  color-scheme: dark;

  --chart-1: #8fd3be;  --chart-1-fill: rgba(143,211,190,.18);
  --chart-2: #8fc2da;  --chart-2-fill: rgba(143,194,218,.18);
  --chart-3: #d8b66b;  --chart-3-fill: rgba(216,182,107,.18);
  --chart-hover: rgba(143,211,190,.5);
  --chart-glow: rgba(143,211,190,.32);
}

/* ---------- 十一之二、清新风 · 底色、顶栏、标题 ---------- */
[data-skin="fresh"] body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sk-sans);
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 顶栏：白底一条发丝线。**不用 backdrop-filter**——吸顶元素开模糊等于每帧
   重绘一整条屏宽，滚动时手机上直接掉帧；白得不透明反而更干净。 */
[data-skin="fresh"] .nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-theme="dark"][data-skin="fresh"] .nav { background: #131d1a; }

[data-skin="fresh"] .nav-links a { color: var(--muted); font-weight: 400; transition: color .42s ease; }
[data-skin="fresh"] .nav-links a:hover { color: var(--brand-ink); }

[data-skin="fresh"] .logo {
  background: var(--fr-mint-100);
  color: var(--brand-ink);
  border-radius: 14px;
  box-shadow: none;
}
[data-skin="fresh"] .brand { font-weight: 600; letter-spacing: -.01em; color: var(--ink); }

/* 标题：字重只到 600，靠尺寸和留白撑起来，不靠加粗 */
[data-skin="fresh"] .hero h1,
[data-skin="fresh"] .hero h2,
[data-skin="fresh"] .card h3,
[data-skin="fresh"] .tile-head h3,
[data-skin="fresh"] .price-card h3,
[data-skin="fresh"] .sec-head h2,
[data-skin="fresh"] .adm-head h2,
[data-skin="fresh"] .login-card h1,
[data-skin="fresh"] .ag-login-card h1,
[data-skin="fresh"] .ag-card h3 {
  font-family: var(--sk-sans);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}
[data-skin="fresh"] .sec-head h2,
[data-skin="fresh"] .card > h3 { font-size: 19px; }

/* 首页大标题：全站唯一一处「会动」的文字。
   26s、来回、首尾同色 → 看上去像光在慢慢移，而不是跑马灯。 */
[data-skin="fresh"] .hero-title {
  color: transparent;
  background-image: var(--grad);
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fr-flow 26s ease-in-out infinite alternate;
  letter-spacing: -.02em;
}
/* 内层原本还有一段自己的渐变动画，此时必须让位，否则两层渐变打架 */
[data-skin="fresh"] .hero-title .grad-text {
  background: none;
  color: inherit;
  -webkit-text-fill-color: inherit;
  animation: none;
}
@keyframes fr-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
/* Safari 旧内核 / 不支持文字裁剪时：整块会变透明消失，必须兜底成实色 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-skin="fresh"] .hero-title {
    background: none;
    color: var(--brand-ink);
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

[data-skin="fresh"] .hero p,
[data-skin="fresh"] .hero-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.95;
}

/* 首页顶部一层散开的光：不用 background-attachment:fixed（滚动重绘整屏），
   只用一块很大的径向渐变，随区块滚走。 */
[data-skin="fresh"] .hero {
  background:
    radial-gradient(880px 420px at 18% -6%, rgba(169,220,201,.34), transparent 62%),
    radial-gradient(760px 380px at 88% 4%, rgba(230,242,251,.55), transparent 60%),
    var(--bg);
}
[data-theme="dark"][data-skin="fresh"] .hero {
  background:
    radial-gradient(880px 420px at 18% -6%, rgba(63,154,130,.16), transparent 62%),
    radial-gradient(760px 380px at 88% 4%, rgba(82,151,188,.12), transparent 60%),
    var(--bg);
}

/* 副标题打字机：光标是一根柔薄荷竖线，用 opacity 渐隐而不是 steps 硬闪 */
[data-skin="fresh"] .kx-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  border-radius: 2px;
  background: var(--brand-2);
  animation: fr-caret 1.25s ease-in-out infinite;
}
@keyframes fr-caret {
  0%, 45% { opacity: .9; }
  60%, 100% { opacity: 0; }
}

/* ---------- 十一之三、清新风 · 卡片 / 按钮 / 表单 / 表格 ---------- */
[data-skin="fresh"] .card,
[data-skin="fresh"] .feature,
[data-skin="fresh"] .demo-card,
[data-skin="fresh"] .side,
[data-skin="fresh"] .stat,
[data-skin="fresh"] .step,
[data-skin="fresh"] .tpl-card,
[data-skin="fresh"] .price-card,
[data-skin="fresh"] .notice-card,
[data-skin="fresh"] .paper-prog,
[data-skin="fresh"] .result,
[data-skin="fresh"] .login-card,
[data-skin="fresh"] .ag-card,
[data-skin="fresh"] .ag-login-card,
[data-skin="fresh"] .cta-box,
[data-skin="fresh"] .bal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--fr-r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .52s cubic-bezier(.22,.61,.36,1),
              box-shadow .52s cubic-bezier(.22,.61,.36,1),
              border-color .52s ease;
}
[data-skin="fresh"] .card:hover,
[data-skin="fresh"] .feature:hover,
[data-skin="fresh"] .tpl-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
/* 卡片里的小方块（图标底、内嵌块）跟着降一档圆角，形成套叠 */
[data-skin="fresh"] .card .stat,
[data-skin="fresh"] .card .tile,
[data-skin="fresh"] .step,
[data-skin="fresh"] .result { border-radius: var(--fr-r-md); }

/* 价格卡：#vipPkgs 下是 ID 选择器（16px 圆角 + .fx 彩虹描边），必须同级压回 */
[data-skin="fresh"] #vipPkgs .price-card {
  border-radius: var(--fr-r-lg);
  border-top: 1px solid var(--line);
}
[data-skin="fresh"] #vipPkgs .price-card.on,
[data-skin="fresh"] #vipPkgs .price-card.hot,
[data-skin="fresh"] #vipPkgs .price-card.recommend,
[data-skin="fresh"] .price-card.on,
[data-skin="fresh"] .price-card.pop,
[data-skin="fresh"] .price-card.hot {
  border-color: var(--fr-mint-300);
  border-top: 2px solid var(--brand-2);
  box-shadow: 0 1px 2px rgba(44,58,54,.04), 0 18px 34px -20px rgba(63,154,130,.34);
}
/* .fx 的旋转描边/光斑是「炫技层」，清新风整套关掉，只留一条薄荷顶边 */
[data-skin="fresh"] .price-card.fx > .fx-ring,
[data-skin="fresh"] .price-card.fx > .fx-glow,
[data-skin="fresh"] .price-card.fx > .fx-aurora { display: none; }
[data-skin="fresh"] .price-card.fx { border-color: var(--line); }

[data-skin="fresh"] .price-card .price,
[data-skin="fresh"] .price-card .amount { color: var(--ink); letter-spacing: -.02em; }
[data-skin="fresh"] .price-card .price small,
[data-skin="fresh"] .price-card .amount small { color: var(--muted); font-weight: 400; }

/* 数字：等宽数字对齐，量级再大也不会左右跳 */
[data-skin="fresh"] .stat strong,
[data-skin="fresh"] .stat-i b,
[data-skin="fresh"] .hero-meta div strong,
[data-skin="fresh"] .kpi strong,
[data-skin="fresh"] .kpi em,
[data-skin="fresh"] .kpi b,
[data-skin="fresh"] .price-amount .val,
[data-skin="fresh"] .feed-amt,
[data-skin="fresh"] .tpl-count,
[data-skin="fresh"] .paper-quote {
  font-family: var(--sk-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* 按钮：浅底 + 细描边，全圆。不做实心大色块——那会把整页压沉。 */
[data-skin="fresh"] .btn {
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--brand-ink);
  font-weight: 500;
  box-shadow: none;
  transition: background .42s ease, border-color .42s ease, color .42s ease, transform .42s ease;
}
[data-skin="fresh"] .btn:hover { background: var(--fr-mint-50); border-color: var(--fr-mint-300); }
[data-skin="fresh"] .btn.primary {
  background: var(--fr-mint-100);
  background-image: none;
  border-color: var(--fr-mint-300);
  color: var(--brand-ink-2);
  box-shadow: 0 1px 2px rgba(44,58,54,.04);
}
[data-skin="fresh"] .btn.primary:hover {
  background: var(--fr-mint-200);
  border-color: var(--brand-2);
  color: #245e50;
}
/* 主按钮原来有一道扫光伪元素，这里关掉 */
[data-skin="fresh"] .btn.primary::before { display: none; }
[data-skin="fresh"] .btn.ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
[data-skin="fresh"] .btn.ghost:hover { background: var(--fr-mint-50); border-color: var(--fr-mint-300); color: var(--brand-ink); }
[data-theme="dark"][data-skin="fresh"] .btn { background: #16211e; color: var(--brand-ink); }
[data-theme="dark"][data-skin="fresh"] .btn.primary { background: rgba(143,211,190,.16); border-color: rgba(143,211,190,.34); color: var(--brand-ink-2); }
[data-theme="dark"][data-skin="fresh"] .btn.primary:hover { background: rgba(143,211,190,.24); }

[data-skin="fresh"] .input,
[data-skin="fresh"] textarea.input,
[data-skin="fresh"] select.input {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: none;
  color: var(--ink);
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
[data-skin="fresh"] .input:focus,
[data-skin="fresh"] textarea.input:focus,
[data-skin="fresh"] select.input:focus {
  border-color: var(--fr-mint-300);
  background: var(--fr-mint-50);
  box-shadow: 0 0 0 4px rgba(127,201,178,.16);
  outline: none;
}
[data-theme="dark"][data-skin="fresh"] .input,
[data-theme="dark"][data-skin="fresh"] textarea.input,
[data-theme="dark"][data-skin="fresh"] select.input { background: #121b18; color: var(--ink); }
[data-theme="dark"][data-skin="fresh"] .input:focus { background: #18231f; }

[data-skin="fresh"] .tabs,
[data-skin="fresh"] .seg { background: var(--fr-mint-50); border-radius: 999px; border-color: var(--line); }
[data-skin="fresh"] .tabs button,
[data-skin="fresh"] .seg button { border-radius: 999px; color: var(--muted); transition: color .4s ease, background .4s ease; }
[data-skin="fresh"] .tabs button.on,
[data-skin="fresh"] .seg button.on { background: #fff; color: var(--brand-ink); box-shadow: 0 1px 2px rgba(44,58,54,.06); }

[data-skin="fresh"] .pill,
[data-skin="fresh"] .badge-pill {
  background: var(--fr-mint-50);
  border: 1px solid var(--fr-mint-200);
  color: var(--brand-ink);
  border-radius: 999px;
  font-weight: 500;
}
[data-skin="fresh"] .opt { border-radius: 14px; border-color: var(--line); }
[data-skin="fresh"] .opt.on { border-color: var(--fr-mint-300); background: var(--fr-mint-50); }

/* 表格：去掉竖线与斑马纹，只留发丝横线 */
[data-skin="fresh"] .table th {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line-2);
}
[data-skin="fresh"] .table td { border-bottom: 1px solid var(--line); }
[data-skin="fresh"] .table tr:hover td { background: var(--fr-mint-50); }

[data-skin="fresh"] ::selection { background: rgba(169,220,201,.55); color: var(--ink); }

/* 选中态：整块浅薄荷底 + 左侧 3px 圆头竖条，比纯文字变色更好认 */
[data-skin="fresh"] .adm-nav button.on,
[data-skin="fresh"] .side a.on {
  background: var(--fr-mint-50);
  color: var(--brand-ink);
  box-shadow: inset 3px 0 0 var(--fr-mint-400);
  border-radius: 0 12px 12px 0;
}
[data-skin="fresh"] .adm-nav, [data-skin="fresh"] .side { border-right-color: var(--line); }

[data-skin="fresh"] * { scrollbar-color: var(--fr-mint-300) transparent; scrollbar-width: thin; }

/* 侧栏 / 登录页：深色版只把底色换成夜绿，薄荷字提亮到 8:1 以上 */
[data-skin="fresh"] .login-page,
[data-skin="fresh"] .adm-login,
[data-skin="fresh"] .ag-login { background: var(--bg-soft); }
[data-theme="dark"][data-skin="fresh"] .adm-login,
[data-theme="dark"][data-skin="fresh"] .ag-login { background: #0c1412; }

/* 皮肤缩略图：白卡 + 薄荷渐变条 + 圆角，一眼看出「轻」 */
.skin-prev.p-fresh { background: #f7fbf9; }
.skin-prev.p-fresh .pv-bar { background: linear-gradient(100deg, #479e86, #5297bc 60%, #b78c33); }
.skin-prev.p-fresh .pv-card {
  background: #fff;
  border: 1px solid #e2f0ea;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(47,122,103,.08);
}
.skin-prev.p-fresh .pv-card:first-child { border-top: 2px solid #a9dcc9; }

/* 动效必须能被关掉：系统「减少动态效果」时，渐变停、光标停闪、hover 不位移 */
@media (prefers-reduced-motion: reduce) {
  [data-skin="fresh"] .hero-title { animation: none; background-position: 50% 50%; }
  [data-skin="fresh"] .kx-caret { animation: none; opacity: .9; }
  [data-skin="fresh"] .card:hover,
  [data-skin="fresh"] .feature:hover,
  [data-skin="fresh"] .tpl-card:hover,
  [data-skin="fresh"] .btn:hover { transform: none; }
  [data-skin="fresh"] .card,
  [data-skin="fresh"] .feature,
  [data-skin="fresh"] .tpl-card,
  [data-skin="fresh"] .btn { transition: none; }
}

/* 缩略图：三块小色卡，各自固定配色，不随当前皮肤变化 */
.skin-prev {
  height: 74px; border-radius: 8px; overflow: hidden; position: relative;
  border: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column;
}
.skin-prev i { display: block; }
.skin-prev .pv-bar { height: 13px; flex: 0 0 auto; }
.skin-prev .pv-body { flex: 1; display: flex; gap: 5px; padding: 6px; }
.skin-prev .pv-card { flex: 1; border-radius: 3px; }
.skin-prev .pv-card.wide { flex: 1.6; }
/* 经典（原版） */
.skin-prev.p-classic { background: #f6f7fc; }
.skin-prev.p-classic .pv-bar { background: linear-gradient(120deg, #6366f1, #8b5cf6); }
.skin-prev.p-classic .pv-card { background: #fff; border: 1px solid #e7e9f3; }
/* 科技风 */
.skin-prev.p-tech { background: #061019; }
.skin-prev.p-tech .pv-bar { background: linear-gradient(120deg, #06b6d4, #6366f1); }
.skin-prev.p-tech .pv-card {
  background: #0a1524; border: 1px solid rgba(34,211,238,.35);
  box-shadow: 0 0 8px rgba(34,211,238,.20);
}
.skin-prev.p-tech::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(34,211,238,.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34,211,238,.10) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* 商务风 */
.skin-prev.p-biz { background: #f6f5f1; }
.skin-prev.p-biz .pv-bar { background: #1d3f66; }
.skin-prev.p-biz .pv-card { background: #fff; border: 1px solid #e0dcd2; }
.skin-prev.p-biz .pv-card:first-child { border-top: 2px solid #9a7b2e; }
/* 校样风：纸底、方角、双线页眉、朱红顶边 */
.skin-prev.p-edit { background: #f2ebdd; }
.skin-prev.p-edit .pv-bar { background: #fffdf6; border-bottom: 2px solid #c8b99c; }
.skin-prev.p-edit .pv-card { background: #fffdf6; border: 1px solid #c8b99c; border-radius: 0; }
.skin-prev.p-edit .pv-card:first-child { border-top: 3px solid #b3342a; }

/* 减少动效偏好：以上装饰动画全部停掉 */
@media (prefers-reduced-motion: reduce) {
  [data-skin="tech"] .tile-head h3::before,
  [data-skin="tech"] .kpi::after,
  [data-skin="tech"] .trend-wrap,
  .skin-modal, .skin-panel { animation: none !important; }
}

/* =====================================================================
   十四、赛博朋克 HUD 终端 · 变量（v1.59）
   ---------------------------------------------------------------------
   设计主张：这不是「把界面调暗 + 加发光」，是换一套**阅读契约**。
   前五套都在解决"读起来舒服"，这一套解决的是"像一台正在运行的机器"：
     面是黑的、边是光的、信息是等宽的、装饰是扫描线。

   三条硬规矩（都能被代码守住的那种）：
     1. 霓虹只描边、只指路，**不铺面**。整页发光面积 < 5%。
        大面积发光 = 廉价；1px 发光 = 精密。
     2. 只有两处文字在动：主标题（故障）与副标题（打字机）。
        正文一个字都不动 —— 正文一抖，阅读就得重新定位。
     3. 切角只切对角线两端（左上 / 右下），不切八角。
        四个角全切会变成科幻游戏 UI 的恶搞版。

   为什么青蓝能当正文色而洋红不能：
     青蓝 #00FFFF 压 #05070A 是 14.6:1，做小字也清楚；
     洋红 #FF00FF 只有 5.0:1，只配做描边与故障色偏。要"更亮的洋红"，
     提明度没用，得提纯度。
   ===================================================================== */

/* 字体自托管：latin 子集，断网 / 内网 / 双击都能跑。
   只在 cyber 皮肤下有元素用到这两个 family，所以其它皮肤一个字节都不会下载。 */
@font-face {
  font-family: 'Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/orbitron-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jetbrainsmono-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
}

[data-skin="cyber"] {
  /* —— 霓虹四色 —— */
  --cy-cyan: #00ffff;
  --cy-magenta: #ff00ff;
  --cy-violet: #a855f7;
  --cy-green: #00ff9d;

  --brand: #00ffff;
  --brand-2: #ff00ff;
  --brand-3: #a855f7;
  --brand-ink: #6ff0ff;        /* 13.4:1，可读的青 */
  --brand-ink-2: #b6f7ff;

  --ink: #e6faff;              /* 15.3:1 */
  --ink-2: #b7cfdb;            /* 10.2:1 */
  --muted: #8aa3b2;            /* 6.4:1 */
  --ink-strong: #f2feff;
  --ink-1: #e6faff;
  --ink-3: #8aa3b2;

  --line: rgba(0, 255, 255, .14);
  --line-2: rgba(0, 255, 255, .34);
  --bg: #05070a;
  --bg-soft: #080c11;
  --card: #0a1016;
  --chip: #0c141b;
  --chip-on: #102028;
  --field: #070c11;
  --field-2: #0b1218;
  --surface-2: #080e14;

  --ok: #00ff9d;
  --warn: #ffc24d;
  --danger: #ff4d6d;

  --tint-brand: rgba(0, 255, 255, .10);      --tint-brand-fg: #7fe9ff;
  --tint-brand-soft: rgba(0, 255, 255, .06);
  --tint-rose: rgba(255, 0, 255, .12);       --tint-rose-fg: #ff9dfb;
  --tint-amber: rgba(255, 194, 77, .12);     --tint-amber-fg: #ffd587;
  --tint-yellow: rgba(255, 194, 77, .14);    --tint-yellow-fg: #ffe0a3;
  --tint-emerald: rgba(0, 255, 157, .12);    --tint-emerald-fg: #7dffc8;
  --tint-green: rgba(0, 255, 157, .10);      --tint-green-fg: #8affd0;
  --tint-pink: rgba(255, 0, 255, .10);       --tint-pink-fg: #ffb3fb;
  --plag-ok-fg: #8affd0;  --plag-warn-fg: #ffd587;  --plag-bad-fg: #ff9db0;

  --radius: 2px;               /* 这套没有圆角，只有切角 */
  --shadow-sm: 0 0 0 1px rgba(0, 255, 255, .06);
  --shadow: 0 10px 30px -18px rgba(0, 255, 255, .45);
  --shadow-lg: 0 24px 60px -30px rgba(0, 255, 255, .55);
  color-scheme: dark;

  /* —— 皮肤私有变量 —— */
  --sk-cut: 14px;              /* 切角尺寸 */
  --sk-cut-sm: 9px;
  --sk-glow: rgba(0, 255, 255, .28);
  --sk-halo: rgba(0, 255, 255, .12);
  --sk-grid: rgba(0, 255, 255, .05);
  --sk-edge: rgba(0, 255, 255, .55);
  --sk-display: 'Orbitron', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --sk-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas,
             'PingFang SC', 'Microsoft YaHei', monospace;
  --sk-sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas,
             'PingFang SC', 'Microsoft YaHei', sans-serif;

  --grad: linear-gradient(120deg, #00ffff 0%, #a855f7 52%, #ff00ff 100%);
  --grad-soft: linear-gradient(120deg, rgba(0, 255, 255, .10), rgba(255, 0, 255, .08));

  --chart-1: #00ffff;  --chart-1-fill: rgba(0, 255, 255, .16);
  --chart-2: #ff00ff;  --chart-2-fill: rgba(255, 0, 255, .14);
  --chart-3: #00ff9d;  --chart-3-fill: rgba(0, 255, 157, .14);
  --chart-hover: rgba(0, 255, 255, .55);
  --chart-glow: rgba(0, 255, 255, .45);
}

/* 点击烟花调色：fx.js 的粒子默认是经典靛紫，在这套近黑底上偏淡、也不搭霓虹。
   html[data-skin] 的特异性（0,1,1）高于 fx.js 注入的 :root / [data-theme]（0,1,0），
   所以无论深浅色都能稳定盖过，让点击特效跟整套赛博配色走。 */
html[data-skin="cyber"] {
  --kxc-1: #00ffff;
  --kxc-2: #ff00ff;
  --kxc-3: #a855f7;
  --kxc-4: #00ff9d;
  --kxc-5: #6ff0ff;
  --kxc-6: #ffb84d;
  --kxc-7: #ff7ab6;
  --kxc-core: #ffffff;
}

/* 深色模式：这套本来就是黑的，只把「已经够亮的地方」再压一点，
   避免用户在深色系统下看到刺眼的白字（对比度仍在 12:1 以上）。 */
[data-theme="dark"][data-skin="cyber"] {
  --ink: #dcf6ff;
  --ink-2: #a9c3d1;
  --bg: #030507;
  --bg-soft: #06090d;
  --card: #080e13;
}

/* ---------- 十四之二、底色：网格 + 扫描线 ---------- */
[data-skin="cyber"] body {
  background-color: var(--bg);
  /* 网格挂在 body 上而不是伪元素：body 背景就是画布底，
     不会和 style.css 里的 body 背景打架，也不产生额外图层。 */
  background-image:
    linear-gradient(var(--sk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sk-grid) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  color: var(--ink-2);
  font-family: var(--sk-sans);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* 噪点：feTurbulence 生成的电影颗粒，压到 3.5%，给近黑底加一层"脏"的质感。
   静态、铺满整屏、pointer-events:none，不参与点击、也不产生任何动画开销。 */
[data-skin="cyber"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 巡场光带：一条 180px 高的极淡青光，7.5 秒从顶扫到底。
   独立固定层只做 transform，交给合成器，不重绘内容；will-change 只挂这一条马上在动的。 */
[data-skin="cyber"] html::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 180px;
  z-index: 7;
  pointer-events: none;
  will-change: transform;
  background: linear-gradient(180deg,
    transparent,
    rgba(0, 255, 255, .035) 55%,
    rgba(0, 255, 255, .085) 96%,
    transparent);
  animation: cySweep 7.5s linear infinite;
}
@keyframes cySweep {
  from { transform: translate3d(0, -200px, 0); }
  to   { transform: translate3d(0, 100vh, 0); }
}

/* 扫描线：整屏一层 1px 暗线。pointer-events:none 保证不挡点击；
   z-index 9 压在内容之上、弹窗之下（弹窗 z-index 都在 300+）。 */
[data-skin="cyber"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, .26) 2px 3px
  );
  opacity: .5;
}

[data-skin="cyber"] ::selection { background: rgba(0, 255, 255, .28); color: #eafdff; }
[data-skin="cyber"] * { scrollbar-color: rgba(0, 255, 255, .35) transparent; scrollbar-width: thin; }

/* 焦点环：青蓝，与霓虹语言一致 */
[data-skin="cyber"] :focus-visible {
  outline: 1px solid var(--cy-cyan);
  outline-offset: 2px;
}
/* 但切过角的元素不能用 outline：clip-path 会连轮廓一起剪掉，
   键盘用户就看不见焦点了（等于把无障碍做没了）。改成贴着内沿的光圈。 */
[data-skin="cyber"] .btn:focus-visible,
[data-skin="cyber"] .tpl-card:focus-visible,
[data-skin="cyber"] .price-card:focus-visible,
[data-skin="cyber"] .card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cy-cyan), inset 0 0 18px rgba(0, 255, 255, .22);
}

/* ---------- 十四之三、顶栏 ---------- */
/* 不用 backdrop-filter：吸顶元素开模糊等于滚动时每帧重绘整条屏宽 */
[data-skin="cyber"] .nav {
  background: rgba(5, 7, 10, .96);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(0, 255, 255, .05), 0 14px 34px -24px rgba(0, 255, 255, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-theme="dark"][data-skin="cyber"] .nav { background: rgba(3, 5, 7, .97); }

[data-skin="cyber"] .nav-links a {
  color: var(--muted);
  font-family: var(--sk-mono);
  font-size: 13.5px;
  letter-spacing: .08em;
  transition: color .28s ease, text-shadow .28s ease, transform .28s ease;
}
/* 导航 hover：变色 + 发光 + 上移 1px。三种变化都很小，加起来才「亮起来」 */
[data-skin="cyber"] .nav-links a:hover {
  color: var(--cy-cyan);
  text-shadow: 0 0 12px rgba(0, 255, 255, .7);
  transform: translateY(-1px);
}

[data-skin="cyber"] .brand { color: var(--ink); font-family: var(--sk-display); letter-spacing: .12em; }
[data-skin="cyber"] .logo {
  border-radius: 0;
  background: rgba(0, 255, 255, .10);
  color: var(--cy-cyan);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 14px rgba(0, 255, 255, .28), inset 0 0 12px rgba(0, 255, 255, .10);
  font-family: var(--sk-display);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
[data-skin="cyber"] .avatar { border-radius: 0; box-shadow: 0 0 0 1px var(--line-2), 0 0 12px rgba(0, 255, 255, .25); }

[data-skin="cyber"] .nav-clock {
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(0, 255, 255, .04);
  font-family: var(--sk-mono);
}
[data-skin="cyber"] .clock-time { font-variant-numeric: tabular-nums; color: var(--brand-ink); }
[data-skin="cyber"] .clock-dot {
  background: var(--cy-green);
  box-shadow: 0 0 8px rgba(0, 255, 157, .9);
  animation: cyDot 2.4s ease-in-out infinite;
}
@keyframes cyDot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

[data-skin="cyber"] .stat-strip {
  border-top: 1px solid var(--line);
  background: rgba(0, 255, 255, .03);
  font-family: var(--sk-mono);
}
[data-skin="cyber"] .stat-i b { color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* ---------- 十四之四、首屏与故障标题 ---------- */
/* hero 原来的两团紫光换成青/洋红：青色在左（结构），洋红在右（故障） */
[data-skin="cyber"] .hero::before {
  background:
    radial-gradient(620px 320px at 16% 8%, rgba(0, 255, 255, .16), transparent 62%),
    radial-gradient(520px 300px at 84% 0%, rgba(255, 0, 255, .10), transparent 64%);
}
[data-skin="cyber"] .hero-particles { opacity: .55; }

/* 全站唯一的大标题：颜色收成近白 + 青晕，字重拉满、字距微开 */
[data-skin="cyber"] .hero-title {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  font-family: var(--sk-display);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.16;
  text-shadow: 0 0 18px rgba(0, 255, 255, .28), 0 0 52px rgba(0, 255, 255, .10);
  /* 呼吸（text-shadow）与抖动（transform）分开两条动画：
     同一属性交给两条动画时后一条会覆盖前一条 —— 踩过，渐变标题被入场动画顶掉那次。 */
  animation: cyBreathe 5.6s ease-in-out infinite,
             cyJitter 9s steps(1, end) infinite;
}
/* 关键词单独染色：洋红压黑 5:1，只够做"视觉锤子"，不做正文 */
[data-skin="cyber"] .hero-title .grad-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--cy-magenta);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 16px rgba(255, 0, 255, .55), 0 0 40px rgba(255, 0, 255, .22);
  animation: none;
  position: relative;
  display: inline-block;
}

/* 关键词的 RGB 分离：两份复制文本 + 横向切片，只在两个短窗口里出现。
   9 秒里约 0.9 秒在撕裂，其余完全干净 —— 这是"间歇"与"频闪"的分界。 */
[data-skin="cyber"] .hero-title .grad-text::before,
[data-skin="cyber"] .hero-title .grad-text::after {
  content: attr(data-cy);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
[data-skin="cyber"] .hero-title .grad-text::before {
  color: var(--cy-cyan);
  text-shadow: 0 0 12px rgba(0, 255, 255, .6);
  animation: cySliceA 9s steps(1, end) infinite;
}
[data-skin="cyber"] .hero-title .grad-text::after {
  color: var(--cy-magenta);
  text-shadow: 0 0 12px rgba(255, 0, 255, .6);
  animation: cySliceB 8.4s steps(1, end) infinite;
}
@keyframes cyBreathe {
  0%, 100% { text-shadow: 0 0 16px rgba(0, 255, 255, .24), 0 0 46px rgba(0, 255, 255, .09); }
  50%      { text-shadow: 0 0 22px rgba(0, 255, 255, .38), 0 0 64px rgba(0, 255, 255, .16); }
}
@keyframes cyJitter {
  0%, 12.9%, 19.1%, 64.9%, 69.1%, 100% { transform: translate(0, 0) skewX(0); }
  13.5% { transform: translate(-3px, 0) skewX(-.7deg); }
  15.5% { transform: translate(2px, 0) skewX(.5deg); }
  17.5% { transform: translate(-1px, 1px) skewX(-.4deg); }
  65.5% { transform: translate(4px, 0) skewX(.7deg); }
  67.5% { transform: translate(-2px, 0) skewX(-.5deg); }
}
@keyframes cySliceA {
  0%, 12.9%, 19.1%, 64.9%, 69.1%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: translate(0, 0); }
  13.5% { opacity: .9;  clip-path: inset(6% 0 74% 0);  transform: translate(-4px, -1px); }
  15.5% { opacity: .8;  clip-path: inset(40% 0 40% 0); transform: translate(3px, 1px); }
  17.5% { opacity: .74; clip-path: inset(70% 0 14% 0); transform: translate(-2px, 0); }
  65.5% { opacity: .86; clip-path: inset(22% 0 54% 0); transform: translate(4px, 1px); }
  67.5% { opacity: .78; clip-path: inset(56% 0 24% 0); transform: translate(-3px, -1px); }
}
@keyframes cySliceB {
  0%, 12.9%, 19.1%, 64.9%, 69.1%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: translate(0, 0); }
  14.5% { opacity: .85; clip-path: inset(24% 0 56% 0); transform: translate(4px, 1px); }
  16.5% { opacity: .78; clip-path: inset(60% 0 20% 0); transform: translate(-3px, -1px); }
  66.5% { opacity: .8;  clip-path: inset(36% 0 44% 0); transform: translate(-4px, 1px); }
  68.5% { opacity: .72; clip-path: inset(74% 0 8% 0);  transform: translate(3px, -1px); }
}

[data-skin="cyber"] .hero-sub {
  color: var(--ink-2);
  font-family: var(--sk-mono);
  font-size: 15.5px;
  line-height: 1.95;
}

/* 打字机光标：方块硬闪（steps），终端光标本来就是硬闪的，渐隐反而假 */
[data-skin="cyber"] .kx-caret {
  display: inline-block;
  width: .58em;
  height: 1.02em;
  margin-left: 3px;
  vertical-align: -.16em;
  background: var(--cy-green);
  box-shadow: 0 0 12px rgba(0, 255, 157, .8);
  animation: cyCaret 1.05s steps(1, end) infinite;
}
@keyframes cyCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

[data-skin="cyber"] .badge-pill {
  border-radius: 0;
  border: 1px solid var(--line-2);
  background: rgba(0, 255, 255, .06);
  color: var(--brand-ink);
  font-family: var(--sk-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
[data-skin="cyber"] .dot-live { background: var(--cy-green); box-shadow: 0 0 0 3px rgba(0, 255, 157, .14), 0 0 10px rgba(0, 255, 157, .8); }

[data-skin="cyber"] .hero-meta div strong {
  font-family: var(--sk-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(0, 255, 255, .3);
}
[data-skin="cyber"] .hero-meta div span { font-family: var(--sk-mono); font-size: 12.5px; letter-spacing: .04em; }

/* ---------- 十四之五、切角面板 ---------- */
/* 切角用 clip-path：只切左上与右下，两个对角，看起来像"被一刀削过的机箱"。
   border 保留 1px，斜边上没有线 —— 那是缺口，不是漏画。 */
[data-skin="cyber"] .card,
[data-skin="cyber"] .feature,
[data-skin="cyber"] .demo-card,
[data-skin="cyber"] .stat,
[data-skin="cyber"] .step,
[data-skin="cyber"] .tpl-card,
[data-skin="cyber"] .price-card,
[data-skin="cyber"] .notice-card,
[data-skin="cyber"] .paper-prog,
[data-skin="cyber"] .result,
[data-skin="cyber"] .login-card,
[data-skin="cyber"] .ag-card,
[data-skin="cyber"] .ag-login-card,
[data-skin="cyber"] .bal-card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(var(--sk-cut) 0, 100% 0, 100% calc(100% - var(--sk-cut)),
                     calc(100% - var(--sk-cut)) 100%, 0 100%, 0 var(--sk-cut));
  transition: transform .38s cubic-bezier(.22, .61, .36, 1),
              border-color .38s ease,
              filter .38s ease;
}
/* 小件（模板卡、结果块）用小一号切角，切角尺寸跟着元件尺寸走 */
[data-skin="cyber"] .tpl-card,
[data-skin="cyber"] .result,
[data-skin="cyber"] .stat { --sk-cut: var(--sk-cut-sm); }

/* 角落 L 标：用 8 条 1px 渐变条纹摆位，不用 8 个 DOM，也不占伪元素
   （.card 的 ::before / ::after 在各种页面里各有用途，不能抢）。 */
[data-skin="cyber"] .card,
[data-skin="cyber"] .demo-card,
[data-skin="cyber"] .price-card {
  --cl: rgba(0, 255, 255, .55);
  --cc: 9px;
  --co: 12px;
  background-image:
    linear-gradient(var(--cl), var(--cl)), linear-gradient(var(--cl), var(--cl)),
    linear-gradient(var(--cl), var(--cl)), linear-gradient(var(--cl), var(--cl)),
    linear-gradient(var(--cl), var(--cl)), linear-gradient(var(--cl), var(--cl)),
    linear-gradient(var(--cl), var(--cl)), linear-gradient(var(--cl), var(--cl));
  background-size:
    var(--cc) 1px, 1px var(--cc), var(--cc) 1px, 1px var(--cc),
    var(--cc) 1px, 1px var(--cc), var(--cc) 1px, 1px var(--cc);
  background-position:
    var(--co) var(--co), var(--co) var(--co),
    right var(--co) top var(--co), right var(--co) top var(--co),
    var(--co) bottom var(--co), var(--co) bottom var(--co),
    right var(--co) bottom var(--co), right var(--co) bottom var(--co);
  background-repeat: no-repeat;
}

/* hover：上浮 4px + 顺着切角的外发光。box-shadow 会被 clip-path 剪成方块影子，
   所以外发光只能用 filter: drop-shadow —— 它跟着裁剪后的形状走。 */
[data-skin="cyber"] .card:hover,
[data-skin="cyber"] .feature:hover,
[data-skin="cyber"] .demo-card:hover,
[data-skin="cyber"] .tpl-card:hover,
[data-skin="cyber"] .price-card:hover {
  border-color: rgba(0, 255, 255, .75);
  transform: translateY(-4px);
  filter: drop-shadow(0 0 16px rgba(0, 255, 255, .22)) drop-shadow(0 0 2px rgba(0, 255, 255, .35));
}

/* 卡片标题：等宽大写 + 拉开字距，hover 时霓虹增强并轻微右移 */
[data-skin="cyber"] .card > h3,
[data-skin="cyber"] .tile-head h3,
[data-skin="cyber"] .price-card h3,
[data-skin="cyber"] .feature h3,
[data-skin="cyber"] .demo-title,
[data-skin="cyber"] .sec-head h2,
[data-skin="cyber"] .adm-head h2,
[data-skin="cyber"] .login-card h1,
[data-skin="cyber"] .ag-login-card h1,
[data-skin="cyber"] .ag-card h3 {
  color: var(--ink);
  font-family: var(--sk-display);
  letter-spacing: .1em;
  transition: text-shadow .3s ease, transform .3s ease;
}
[data-skin="cyber"] .card > h3:hover,
[data-skin="cyber"] .feature h3:hover,
[data-skin="cyber"] .price-card h3:hover {
  text-shadow: 0 0 18px rgba(0, 255, 255, .55);
  transform: translateX(2px);
}
[data-skin="cyber"] .sec-head h2 { font-size: clamp(21px, 2.6vw, 27px); }
[data-skin="cyber"] .kicker {
  font-family: var(--sk-display);
  color: rgba(0, 255, 255, .7);
  letter-spacing: .3em;
  text-transform: uppercase;
}
[data-skin="cyber"] .sec-head p { font-family: var(--sk-mono); color: var(--muted); }

/* 展示卡里的代码行：暗青底 + 发光细线，像正在输出的终端。
   注意这里只写 background-color —— 用简写 background 会把上面那 8 条
   角落 L 标（background-image）整条重置掉，四条角标就没了。 */
[data-skin="cyber"] .demo-card { background-color: #0a1016; }
[data-skin="cyber"] .demo-line { background: rgba(0, 255, 255, .12); border-radius: 0; }
[data-skin="cyber"] .demo-line.shine { background: linear-gradient(90deg, rgba(0,255,255,.05), rgba(0,255,255,.28), rgba(0,255,255,.05)); }
[data-skin="cyber"] .demo-chip { border-radius: 0; font-family: var(--sk-mono); font-size: 11.5px; letter-spacing: .04em; }
[data-skin="cyber"] .traffic i { border-radius: 0; }
[data-skin="cyber"] .traffic i:nth-child(1) { background: var(--cy-magenta); }
[data-skin="cyber"] .traffic i:nth-child(2) { background: var(--cy-violet); }
[data-skin="cyber"] .traffic i:nth-child(3) { background: var(--cy-green); }
[data-skin="cyber"] .float-tag {
  border-radius: 0;
  border: 1px solid var(--line-2);
  background: rgba(5, 7, 10, .92);
  color: var(--brand-ink);
  font-family: var(--sk-mono);
  font-size: 11.5px;
  box-shadow: 0 0 16px rgba(0, 255, 255, .18);
}

/* 今日热点条：左侧霓虹竖条，标题用等宽 */
[data-skin="cyber"] .hot-bar {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cy-cyan);
  border-radius: 0;
  box-shadow: 0 0 24px -14px rgba(0, 255, 255, .6);
}
[data-skin="cyber"] .hot-head h3 { font-family: var(--sk-display); letter-spacing: .1em; color: var(--ink); }
[data-skin="cyber"] .hot-item,
[data-skin="cyber"] .hot-chip { border-radius: 0; }

/* ---------- 十四之六、按钮 ---------- */
/* 只切右下角一个 9px：整块切八个角会像科幻游戏的恶搞版。
   发光用 drop-shadow（box-shadow 会被 clip-path 剪掉）。 */
[data-skin="cyber"] .btn {
  border-radius: 0;
  border: 1px solid var(--line-2);
  background: rgba(0, 255, 255, .05);
  color: var(--brand-ink);
  font-family: var(--sk-mono);
  font-weight: 500;
  letter-spacing: .05em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background .3s ease, border-color .3s ease, color .3s ease,
              filter .3s ease, transform .3s ease;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, .16));
}
[data-skin="cyber"] .btn:hover {
  background: rgba(0, 255, 255, .13);
  border-color: var(--cy-cyan);
  color: #eafdff;
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, .5));
}
[data-skin="cyber"] .btn.primary {
  background: rgba(0, 255, 255, .14);
  border-color: rgba(0, 255, 255, .7);
  color: #eafdff;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, .35));
}
[data-skin="cyber"] .btn.primary:hover {
  background: rgba(0, 255, 255, .22);
  border-color: #9ffcff;
  filter: drop-shadow(0 0 18px rgba(0, 255, 255, .6));
}
/* 主按钮原来的白色扫光在这套里是脏点，关掉 */
[data-skin="cyber"] .btn.primary::before,
[data-skin="cyber"] .btn.primary::after { display: none; }
[data-skin="cyber"] .btn.ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink-2);
}
[data-skin="cyber"] .btn.ghost:hover {
  background: rgba(0, 255, 255, .07);
  border-color: var(--cy-cyan);
  color: var(--brand-ink);
}
[data-skin="cyber"] .btn.link {
  border: 0;
  background: none;
  color: var(--brand-ink);
  clip-path: none;
  filter: none;
  padding-left: 0;
  padding-right: 0;
}
[data-skin="cyber"] .btn.link:hover { color: var(--cy-cyan); text-shadow: 0 0 10px rgba(0, 255, 255, .6); }
/* 按钮上的文字不换行挤压（等宽字体比原来宽一点） */
[data-skin="cyber"] .btn { white-space: nowrap; }

/* ---------- 十四之七、表单 / 分段 / 标签 ---------- */
[data-skin="cyber"] .input,
[data-skin="cyber"] textarea.input,
[data-skin="cyber"] select.input {
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sk-mono);
  box-shadow: none;
  transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
[data-skin="cyber"] .input::placeholder { color: #6b8494; }
[data-skin="cyber"] .input:focus,
[data-skin="cyber"] textarea.input:focus,
[data-skin="cyber"] select.input:focus {
  border-color: var(--cy-cyan);
  background: #060c11;
  box-shadow: 0 0 0 1px rgba(0, 255, 255, .35), 0 0 18px -6px rgba(0, 255, 255, .55);
  outline: none;
}
[data-skin="cyber"] label { font-family: var(--sk-mono); letter-spacing: .04em; }

[data-skin="cyber"] .tabs,
[data-skin="cyber"] .seg {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 0;
}
[data-skin="cyber"] .tabs button,
[data-skin="cyber"] .seg button {
  border-radius: 0;
  color: var(--muted);
  font-family: var(--sk-mono);
  letter-spacing: .04em;
  transition: color .28s ease, background .28s ease;
}
[data-skin="cyber"] .tabs button.on,
[data-skin="cyber"] .seg button.on {
  background: rgba(0, 255, 255, .12);
  color: var(--cy-cyan);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 0 14px -6px rgba(0, 255, 255, .7);
}

[data-skin="cyber"] .pill,
[data-skin="cyber"] .badge-pill,
[data-skin="cyber"] .tpl-badge,
[data-skin="cyber"] .ag-badge {
  border-radius: 0;
  background: rgba(0, 255, 255, .07);
  border: 1px solid var(--line-2);
  color: var(--brand-ink);
  font-family: var(--sk-mono);
  letter-spacing: .06em;
}
[data-skin="cyber"] .opt { border-radius: 0; border-color: var(--line); }
[data-skin="cyber"] .opt.on { border-color: var(--cy-cyan); background: rgba(0, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(0, 255, 255, .3); }

/* 表格：表头等宽大写 + 青色细线，行 hover 时整行泛青光 */
[data-skin="cyber"] .table th {
  background: transparent;
  color: rgba(0, 255, 255, .66);
  font-family: var(--sk-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
[data-skin="cyber"] .table td {
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--sk-mono);
  font-size: 13px;
}
[data-skin="cyber"] .table tr:hover td { background: rgba(0, 255, 255, .04); }
[data-skin="cyber"] .table-wrap { border-radius: 0; }

/* ---------- 十四之八、套餐卡 ---------- */
/* #vipPkgs 下是 ID 选择器写的 16px 圆角 + .fx 彩虹描边，必须同级压回 */
[data-skin="cyber"] #vipPkgs .price-card,
[data-skin="cyber"] .price-card { border-radius: 0; }
[data-skin="cyber"] #vipPkgs .price-card.on,
[data-skin="cyber"] #vipPkgs .price-card.hot,
[data-skin="cyber"] #vipPkgs .price-card.recommend,
[data-skin="cyber"] .price-card.on,
[data-skin="cyber"] .price-card.hot,
[data-skin="cyber"] .price-card.pop {
  border-color: var(--cy-magenta);
  filter: drop-shadow(0 0 16px rgba(255, 0, 255, .22));
}
/* .fx 的旋转描边与大色斑在这套里太吵，关掉；只留自己这道霓虹边 */
[data-skin="cyber"] .price-card.fx > .fx-ring,
[data-skin="cyber"] .price-card.fx > .fx-glow,
[data-skin="cyber"] .price-card.fx > .fx-aurora { display: none; }

[data-skin="cyber"] .price-card .price,
[data-skin="cyber"] .price-card .amount,
[data-skin="cyber"] .price-amount .val,
[data-skin="cyber"] .stat strong,
[data-skin="cyber"] .stat-i b,
[data-skin="cyber"] .kpi strong,
[data-skin="cyber"] .kpi em,
[data-skin="cyber"] .kpi b,
[data-skin="cyber"] .feed-amt,
[data-skin="cyber"] .tpl-count,
[data-skin="cyber"] .paper-quote {
  font-family: var(--sk-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: .01em;
  text-shadow: 0 0 16px rgba(0, 255, 255, .22);
}

/* ---------- 十四之九、页脚 / CTA ---------- */
[data-skin="cyber"] .cta-box {
  background: linear-gradient(135deg, rgba(0, 255, 255, .10), rgba(255, 0, 255, .08));
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  box-shadow: 0 0 40px -22px rgba(0, 255, 255, .8);
  clip-path: polygon(var(--sk-cut) 0, 100% 0, 100% calc(100% - var(--sk-cut)),
                     calc(100% - var(--sk-cut)) 100%, 0 100%, 0 var(--sk-cut));
}
[data-skin="cyber"] .cta-box p { color: var(--ink-2); opacity: 1; }
[data-skin="cyber"] .cta-box h2 { font-family: var(--sk-display); letter-spacing: .1em; }
[data-skin="cyber"] .cta-box .btn { background: rgba(5, 7, 10, .9); color: var(--brand-ink); }

[data-skin="cyber"] footer {
  background: #05070a;
  border-top: 1px solid var(--line-2);
  color: var(--muted);
}
[data-skin="cyber"] footer a { color: var(--muted); font-family: var(--sk-mono); }
[data-skin="cyber"] footer a:hover { color: var(--cy-cyan); text-shadow: 0 0 10px rgba(0, 255, 255, .6); }
[data-skin="cyber"] .foot-copy { color: var(--muted); font-family: var(--sk-mono); font-size: 12px; letter-spacing: .04em; }
[data-skin="cyber"] .friend-bar { background: rgba(0, 255, 255, .03); border-bottom: 1px solid var(--line); }
[data-skin="cyber"] .friend-label { color: rgba(0, 255, 255, .6); font-family: var(--sk-mono); }

/* ---------- 十四之十、后台 ---------- */
[data-skin="cyber"] .adm-main {
  background:
    radial-gradient(820px 340px at 88% -8%, rgba(0, 255, 255, .10), transparent 62%),
    radial-gradient(640px 320px at 4% 4%, rgba(255, 0, 255, .05), transparent 60%);
}
[data-skin="cyber"] .adm-side {
  background: #060a0e;
  border-right: 1px solid var(--line);
}
[data-skin="cyber"] .adm-brand { font-family: var(--sk-display); letter-spacing: .14em; }
[data-skin="cyber"] .adm-brand .logo { box-shadow: 0 0 14px rgba(0, 255, 255, .35); }
[data-skin="cyber"] .adm-nav button {
  border-radius: 0;
  color: var(--muted);
  font-family: var(--sk-mono);
  letter-spacing: .04em;
  transition: color .26s ease, background .26s ease, box-shadow .26s ease;
}
[data-skin="cyber"] .adm-nav button:hover { color: var(--brand-ink); background: rgba(0, 255, 255, .05); }
/* 选中态：左侧 2px 青光 + 淡青底 + 一点外发光，比整块变色克制 */
[data-skin="cyber"] .adm-nav button.on {
  background: rgba(0, 255, 255, .09);
  color: var(--cy-cyan);
  box-shadow: inset 2px 0 0 var(--cy-cyan), inset 0 0 0 1px rgba(0, 255, 255, .12);
  text-shadow: 0 0 12px rgba(0, 255, 255, .5);
}
/* 侧栏底部按钮压深底：必须显式重写颜色，否则吃 .btn.ghost 的浅色变量 */
[data-skin="cyber"] .adm-side-foot .btn.ghost {
  background: rgba(0, 255, 255, .05);
  border-color: var(--line-2);
  color: var(--brand-ink);
}
[data-skin="cyber"] .adm-side-foot .btn.ghost:hover { background: rgba(0, 255, 255, .12); color: #eafdff; }
[data-skin="cyber"] .adm-me { color: var(--ink-2); font-family: var(--sk-mono); }
[data-skin="cyber"] .adm-side-foot { border-top-color: var(--line); }

[data-skin="cyber"] .b-tile {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--card);
  clip-path: polygon(var(--sk-cut) 0, 100% 0, 100% calc(100% - var(--sk-cut)),
                     calc(100% - var(--sk-cut)) 100%, 0 100%, 0 var(--sk-cut));
}
/* 原来的顶部渐变线改成一条常亮的青色边 */
[data-skin="cyber"] .b-tile::before {
  background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
  opacity: .5;
  box-shadow: 0 0 12px rgba(0, 255, 255, .6);
}
[data-skin="cyber"] .b-tile:hover {
  border-color: var(--line-2);
  box-shadow: 0 0 22px -10px rgba(0, 255, 255, .7);
}
[data-skin="cyber"] .tile-head h3 { font-family: var(--sk-display); letter-spacing: .1em; color: var(--ink); }
[data-skin="cyber"] .tile-head h3::before {
  background: var(--cy-cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, .9);
}

[data-skin="cyber"] .kpi {
  border-radius: 0;
  background: linear-gradient(180deg, #0b1319 0%, #080e13 70%);
  border: 1px solid var(--line);
  clip-path: polygon(var(--sk-cut-sm) 0, 100% 0, 100% calc(100% - var(--sk-cut-sm)),
                     calc(100% - var(--sk-cut-sm)) 100%, 0 100%, 0 var(--sk-cut-sm));
}
[data-skin="cyber"] .kpi::after {
  background: radial-gradient(circle, rgba(0, 255, 255, .10), transparent 70%);
  animation: cyHalo 5s ease-in-out infinite;
}
@keyframes cyHalo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
[data-skin="cyber"] .kpi:hover { border-color: var(--line-2); }
[data-skin="cyber"] .kpi span { font-family: var(--sk-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }

[data-skin="cyber"] .trend-wrap {
  border-radius: 0;
  border: 1px solid var(--line);
  background-image:
    linear-gradient(var(--sk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sk-grid) 1px, transparent 1px);
  background-size: 100% 25%, 8.3333% 100%;
}
[data-skin="cyber"] .today-item { border-radius: 0; background: var(--bg-soft); border: 1px solid var(--line); }
[data-skin="cyber"] .today-item .t-ico { border-radius: 0; background: rgba(0, 255, 255, .10); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-skin="cyber"] .feed-item { border-left: 2px solid rgba(0, 255, 255, .35); border-radius: 0; padding-left: 10px; }
[data-skin="cyber"] .feed-item.is-new { border-left-color: var(--cy-cyan); background: rgba(0, 255, 255, .05); }
[data-skin="cyber"] .feed-time,
[data-skin="cyber"] .rank-bar i,
[data-skin="cyber"] .key-src-bar i { font-family: var(--sk-mono); }
[data-skin="cyber"] .rank-bar i,
[data-skin="cyber"] .key-src-bar i { box-shadow: 0 0 12px rgba(0, 255, 255, .45); }
[data-skin="cyber"] .live-chip { border-radius: 0; font-family: var(--sk-mono); }

/* 登录页：中央一块被青光照亮的终端 */
[data-skin="cyber"] .login-wrap,
[data-skin="cyber"] .adm-login {
  background:
    radial-gradient(760px 380px at 50% 0%, rgba(0, 255, 255, .12), transparent 65%),
    radial-gradient(520px 260px at 82% 26%, rgba(255, 0, 255, .07), transparent 62%),
    var(--bg);
}
[data-skin="cyber"] .login-card {
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 60px -30px rgba(0, 255, 255, .9);
}
[data-skin="cyber"] .login-card h1 { font-family: var(--sk-display); letter-spacing: .08em; }

/* ---------- 十四之十一、代理端 ---------- */
[data-skin="cyber"] .ag-side { background: #060a0e; border-right: 1px solid var(--line); }
[data-skin="cyber"] .ag-wallet {
  background:
    linear-gradient(135deg, rgba(0, 255, 255, .16), rgba(255, 0, 255, .10)),
    #0a1016;
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: 0 0 34px -22px rgba(0, 255, 255, .9);
  clip-path: polygon(var(--sk-cut) 0, 100% 0, 100% calc(100% - var(--sk-cut)),
                     calc(100% - var(--sk-cut)) 100%, 0 100%, 0 var(--sk-cut));
}
[data-skin="cyber"] .ag-wallet-num { font-family: var(--sk-display); font-variant-numeric: tabular-nums; color: var(--ink); }
/* 钱包里的按钮压在渐变上：文字要足够亮，不能跟主题走 */
[data-skin="cyber"] .ag-w-btn:not(.ghost) { color: #04191c; background: rgba(180, 255, 255, .9); }
[data-skin="cyber"] .ag-w-btn.ghost { background: rgba(0, 255, 255, .10); color: #eafdff; border: 1px solid var(--line-2); }
[data-skin="cyber"] .ag-kpi { border-radius: 0; }
[data-skin="cyber"] .ag-kpi-num { font-family: var(--sk-display); font-variant-numeric: tabular-nums; color: var(--ink); }
[data-skin="cyber"] .ag-card, [data-skin="cyber"] .ag-live-card { border-radius: 0; }
[data-skin="cyber"] .ag-login { background: var(--bg); }
[data-skin="cyber"] .ag-login-bg {
  background:
    radial-gradient(680px 420px at 18% 12%, rgba(0, 255, 255, .16), transparent 62%),
    radial-gradient(560px 380px at 82% 18%, rgba(255, 0, 255, .10), transparent 60%),
    radial-gradient(700px 500px at 50% 108%, rgba(168, 85, 247, .12), transparent 62%);
}
[data-skin="cyber"] .ag-login-bg::after {
  background-image:
    linear-gradient(rgba(0, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, .12) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .4;
}
[data-skin="cyber"] .ag-chart { border-radius: 0; border: 1px solid var(--line); }

/* ---------- 十四之十二、切换器缩略图 ---------- */
.skin-prev.p-cyber { background: #05070a; }
.skin-prev.p-cyber .pv-bar { background: linear-gradient(100deg, #00ffff, #a855f7 60%, #ff00ff); }
.skin-prev.p-cyber .pv-card {
  background: #0a1016;
  border: 1px solid rgba(0, 255, 255, .55);
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0, 255, 255, .3);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.skin-prev.p-cyber::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .35) 2px 3px);
  opacity: .6;
}

/* ---------- 十四之十三、减少动态效果 ---------- */
/* 系统开了「减少动态效果」：故障停、光标停、hover 不位移。
   注意故障伪元素要 display:none —— 只把 animation 停掉，它会停在第一帧的
   "半透明切片"状态，看上去像字被切坏了一块。 */
@media (prefers-reduced-motion: reduce) {
  [data-skin="cyber"] .hero-title,
  [data-skin="cyber"] .hero-title .grad-text { animation: none; }
  [data-skin="cyber"] .hero-title .grad-text::before,
  [data-skin="cyber"] .hero-title .grad-text::after { display: none; }
  [data-skin="cyber"] .kx-caret { animation: none; opacity: 1; }
  [data-skin="cyber"] .kpi::after { animation: none; }
  [data-skin="cyber"] .clock-dot { animation: none; }
  [data-skin="cyber"] html::before { display: none; }
  [data-skin="cyber"] .card:hover,
  [data-skin="cyber"] .feature:hover,
  [data-skin="cyber"] .demo-card:hover,
  [data-skin="cyber"] .tpl-card:hover,
  [data-skin="cyber"] .price-card:hover,
  [data-skin="cyber"] .btn:hover { transform: none; animation: none; }
}

/* 移动端：切角收小，不然小卡片会被切掉太多内容 */
@media (max-width: 640px) {
  [data-skin="cyber"] { --sk-cut: 11px; --sk-cut-sm: 7px; }
  [data-skin="cyber"] .hero-title { letter-spacing: 0; }
}