/* ============================================================
   皮肤系统 skins.css
   ------------------------------------------------------------
   机制：<html data-skin="deepblue|verdant|dark"> + CSS 自定义属性覆写。
   - :root（site.css）已有令牌即 deepblue 基底，本文件不重复定义；
   - verdant/dark 两个属性选择器只覆写「需要做差异的令牌」，零 CSS 复制；
   - admin.css 全部走 var()，因此后台随皮肤自动同步，无需单独维护；
   - 加载顺序：site.css → skins.css → admin.css（后台）/（前台）site.css → skins.css。
   常量：三套皮肤对应浏览器 theme-color 见 app/core.php 的 qx_skins()。
   ============================================================ */

/* =======================================================
   [1] 工业墨绿 —— 化工环保质感：墨绿品牌阶 + 琥珀点缀色
   中性色保持白底工业感（不翻转明暗），仅换品牌/强调色与深底色
   ======================================================= */
[data-skin="verdant"] {
  --brand-rgb: 21, 94, 75;
  --accent-rgb: 176, 120, 24;
  --brand: #155e4b;
  --brand-900: #03251b;
  --brand-800: #073a2c;
  --brand-700: #0a4a38;
  --brand-600: #0f5340;
  --brand-500: #155e4b;
  --brand-400: #3d8a72;
  --brand-300: #6fb496;
  --brand-100: #d6ece4;
  --brand-50: #eef7f3;
  --accent: #b07818;
  --accent-600: #8a5f12;
  --accent-100: #f3e8d2;
  --dark: #0b1f18;
  --dark-2: #10291f;
  --dark-3: #16352a;
  /* 深色表面（页脚 / 资质区 / 认证侧栏 / 后台侧栏） */
  --surface-dark: #0b1f18;
  --surface-dark-2: #091a13;
  --on-dark-link: #8ed0b6;
  --on-dark-bright: #a7e3c8;
  /* 光斑（hero / trust / auth-side / verify-banner / login-wrap） */
  --glow-brand: rgba(61, 138, 114, .22);
  --glow-brand-deep: rgba(61, 138, 114, .3);
  --glow-brand-strong: rgba(61, 138, 114, .38);
  --glow-brand-soft: rgba(21, 94, 75, .08);
  --glow-brand-mid: rgba(21, 94, 75, .16);
  --glow-brand-veil: rgba(21, 94, 75, .72);
  --glow-accent: rgba(176, 120, 24, .1);
  --glow-accent-mid: rgba(176, 120, 24, .16);
  --glow-accent-deep: rgba(176, 120, 24, .18);
  /* 品牌色投影/聚焦环：跟随品牌色 tint */
  --shadow-lg: 0 2px 6px rgba(16, 36, 52, .05), 0 28px 64px -28px rgba(21, 94, 75, .42);
  --shadow-brand: 0 10px 26px -14px rgba(21, 94, 75, .65);
  --ring-brand: 0 0 0 4px rgba(21, 94, 75, .12);
}
/* 墨绿：品牌蓝硬编码投影/横幅描边跟随换色 */
[data-skin="verdant"] .logo-mark { box-shadow: 0 6px 14px -6px rgba(21, 94, 75, .8); }
[data-skin="verdant"] .qi { box-shadow: 0 8px 18px -10px rgba(21, 94, 75, .8); }
[data-skin="verdant"] .btn.primary:hover { box-shadow: 0 14px 30px -14px rgba(21, 94, 75, .75); }
[data-skin="verdant"] .btn.primary,
[data-skin="verdant"] .btn.primary:hover {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 52%, var(--accent-600) 100%);
  border-color: transparent;
}
[data-skin="verdant"] .tabs a.on,
[data-skin="verdant"] .chips a.on,
[data-skin="verdant"] .next a:hover,
[data-skin="verdant"] .pager b,
[data-skin="verdant"] .qx-cta,
[data-skin="verdant"] .uc-hero {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, var(--accent-600) 100%);
}
[data-skin="verdant"] .qx-cta { color: #fff; }
[data-skin="verdant"] .quick a:nth-child(2) .qi { background: linear-gradient(135deg, var(--accent-600), var(--brand-400)); }
[data-skin="verdant"] .verify-banner { border-color: rgba(142, 208, 182, .32); }
[data-skin="verdant"] .cert:hover { border-color: rgba(142, 208, 182, .5); }
[data-skin="verdant"] .foot-badges span { border-color: rgba(142, 208, 182, .25); background: rgba(142, 208, 182, .08); }
[data-skin="verdant"] .footer::before { background: linear-gradient(90deg, transparent, rgba(142, 208, 182, .35), transparent); }

/* —— 工业墨绿：后台右侧内容区加一点浅绿色底，提升层次（面板仍为白色） —— */
[data-skin="verdant"] body.adm-body { background: linear-gradient(180deg, #f2f8f5 0%, #e8f3ed 100%); }
[data-skin="verdant"] .adm-main { background: transparent; }
[data-skin="verdant"] .stat,
[data-skin="verdant"] .panel,
[data-skin="verdant"] .tbl-wrap,
[data-skin="verdant"] .adm-top { background: var(--surface); }
[data-skin="verdant"] .tbl th { background: var(--brand-50); color: var(--brand-800); }
[data-skin="verdant"] .tbl tr:hover td { background: var(--brand-50); }
[data-skin="verdant"] .stat:hover,
[data-skin="verdant"] .kpi .stat:hover { border-color: var(--brand-300); }
[data-skin="verdant"] .btn:hover { border-color: var(--brand); color: var(--brand); }

/* =======================================================
   [2] 暗夜深空 —— 深色模式：中性色阶整体翻转，品牌蓝提亮为暗底可读亮青蓝
   ======================================================= */
[data-skin="dark"] {
  /* 品牌蓝 → 暗底可读的亮青蓝 */
  --brand-rgb: 74, 158, 204;
  --accent-rgb: 43, 184, 180;
  --brand: #4a9ecc;
  --brand-900: #0a2334;
  --brand-800: #0d2b40;
  --brand-700: #103a54;
  --brand-600: #17506e;
  --brand-500: #4a9ecc;
  --brand-400: #6fb6d8;
  --brand-300: #8ec8e4;
  --brand-100: #173a4f;
  --brand-50: #13293a;
  --accent: #2bb8b4;
  --accent-600: #22908d;
  --accent-100: #123b3a;
  /* 中性色阶翻转：文字由深转浅、背景由浅转深 */
  --ink: #e8eff5;
  --ink-2: #b9c8d4;
  --ink-3: #8ba0b0;
  --ink-4: #5f7789;
  --line: #23374a;
  --line-2: #1a2c3d;
  --line-strong: #31485e;
  --bg: #0f1c29;
  --bg-soft: #132231;
  --bg-mute: #172838;
  /* 表面（卡片 / 面板 / 表格 / 输入框 / 弹层） */
  --surface: #152536;
  --surface-soft: #12202e;
  --surface-hover: #1a2d40;
  --surface-dark: #0c1926;
  --surface-dark-2: #0a141f;
  --dark: #0a141f;
  --dark-2: #0e1c29;
  --dark-3: #132434;
  --on-dark: #f2f7fb;
  --on-dark-2: #c4d3e0;
  --on-dark-3: #8ba0b4;
  --on-dark-link: #7fc4e8;
  --on-dark-bright: #8fd0f5;
  /* 暗底光斑：降低亮度避免“发灰” */
  --glow-brand: rgba(74, 158, 204, .18);
  --glow-brand-deep: rgba(74, 158, 204, .24);
  --glow-brand-strong: rgba(74, 158, 204, .3);
  --glow-brand-soft: rgba(74, 158, 204, .08);
  --glow-brand-mid: rgba(74, 158, 204, .12);
  --glow-brand-veil: rgba(74, 158, 204, .24);
  --glow-accent: rgba(43, 184, 180, .1);
  --glow-accent-mid: rgba(43, 184, 180, .14);
  --glow-accent-deep: rgba(43, 184, 180, .16);
  /* 投影：改为黑基调（蓝 tint 在暗底上会显脏） */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 28px 64px -28px rgba(0, 0, 0, .7);
  --shadow-brand: 0 10px 26px -14px rgba(74, 158, 204, .5);
  --ring-brand: 0 0 0 4px rgba(74, 158, 204, .22);
  /* 功能色：暗底提亮 */
  --ok: #3ec98a;
  --warn: #e0b44a;
  --danger: #f0736a;
}

/* —— 暗夜深空：组件修正块（令牌覆盖不到的硬编码与反色场景） —— */
[data-skin="dark"] .topbar { background: transparent; }
[data-skin="dark"] .topbar::before { background: rgba(15, 28, 41, .82); }
[data-skin="dark"] .topbar.scrolled { background: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 28px -22px rgba(0, 0, 0, .8); }
[data-skin="dark"] .topbar.scrolled::before { background: rgba(15, 28, 41, .95); }
[data-skin="dark"] ::selection { color: var(--ink); }
[data-skin="dark"] .modal-mask { background: rgba(3, 10, 17, .72); }
[data-skin="dark"] .nav-scrim { background: rgba(3, 10, 17, .62); }
[data-skin="dark"] .logo-mark { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }
[data-skin="dark"] .qi { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); }
[data-skin="dark"] .btn.primary:hover { box-shadow: 0 14px 30px -14px rgba(74, 158, 204, .55); }
/* 深色底 + 品牌蓝文字（对比度修复层里写死为 brand-700）→ 提亮为 brand-300 */
[data-skin="dark"] .eyebrow,
[data-skin="dark"] .more,
[data-skin="dark"] .nav a.active,
[data-skin="dark"] .nav a:hover,
[data-skin="dark"] .hero-badges span,
[data-skin="dark"] .tag.brand,
[data-skin="dark"] .alert.info { color: var(--brand-300); }
/* 白底按钮上的品牌色文字：暗色皮肤下需回到深文字 */
[data-skin="dark"] .btn.white { color: var(--brand-800); }
/* 白底侧栏/徽标（.qbadge/.tag.dark 用 --surface-dark 兜底） */
[data-skin="dark"] .adm-side a.m.on { color: #08131f; }
/* 品牌实底 + 白字：暗色皮肤下品牌色被提亮为亮青蓝，白字会失去可读性
   → 这些填充型控件改用更深的品牌档位（深底 + 白字，符合暗色模式惯例） */
[data-skin="dark"] .btn.primary { background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-800) 100%); border-color: var(--brand-600); }
[data-skin="dark"] .logo-mark { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%); }
[data-skin="dark"] .qi { background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); }
[data-skin="dark"] .avatar { background: linear-gradient(135deg, var(--brand-600), var(--accent-600)); }
[data-skin="dark"] .search-box .ai-badge { background: linear-gradient(135deg, var(--brand-600), var(--accent-600)); }
[data-skin="dark"] .uc-hero { background: linear-gradient(110deg, var(--brand-800) 0%, var(--brand-600) 100%); }
[data-skin="dark"] .chips a.on,
[data-skin="dark"] .pager b,
[data-skin="dark"] .next a:hover,
[data-skin="dark"] .skip-link { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
[data-skin="dark"] .skip-link:focus { background: var(--brand-700); }
[data-skin="dark"] .search-box:focus-within { box-shadow: var(--ring-brand), var(--shadow-lg); }
/* 页脚弱化文字：改走 on-dark 令牌，避免硬编码蓝灰在暗底过暗 */
[data-skin="dark"] .foot-bottom { color: var(--on-dark-3); }
[data-skin="dark"] .footer li .ico { color: var(--on-dark-3); }
[data-skin="dark"] .trust .sec-head p, [data-skin="dark"] .trust .muted { color: var(--on-dark-3); }
[data-skin="dark"] .salary { color: #e8935a; }
[data-skin="dark"] .skeleton { background: linear-gradient(90deg, var(--line-2) 25%, var(--surface-hover) 50%, var(--line-2) 75%); background-size: 200% 100%; }

/* =======================================================
   [2b] 暗夜深空 · v3 新组件适配
   说明：v3 新增样式全部走语义令牌，这里只补「硬编码了某个皮肤档位」
        或「深色下需要反向处理」的少数场景。
   ======================================================= */
[data-skin="dark"] .btn.secondary { color: var(--brand-300); border-color: rgba(142, 200, 228, .35); background: rgba(74, 158, 204, .12); }
[data-skin="dark"] .btn.secondary:hover { color: var(--brand-300); background: rgba(74, 158, 204, .2); border-color: rgba(142, 200, 228, .55); }
[data-skin="dark"] .tabs a.on {
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  color: #fff;
}
[data-skin="dark"] .qx-cta {
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  color: #fff;
}
[data-skin="dark"] .search-box .ai-badge { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); }
[data-skin="dark"] .num-pos { color: color-mix(in srgb, var(--ok) 78%, var(--on-dark)); }
[data-skin="dark"] .rank-list li:nth-child(3) .rank-medal { color: #2b1a0b; }
[data-skin="dark"] .tabs a:hover { color: var(--brand-300); }
[data-skin="dark"] .field:focus-within > label,
[data-skin="dark"] .toc a:hover,
[data-skin="dark"] .uc-nav a.on,
[data-skin="dark"] .uc-nav a:hover,
[data-skin="dark"] .rank-list li > a:hover,
[data-skin="dark"] .qa-status { color: var(--brand-300); }
[data-skin="dark"] .hero-badges .ico,
[data-skin="dark"] .auth-trust .ico { color: var(--brand-300); }
/* v3 通用图标底片：暗底需提亮图标与描边，否则深蓝压在深色面上几乎不可见 */
[data-skin="dark"] .qx-icon-tile:not(.gradient):not(.dark) {
  color: var(--brand-300);
  background: rgba(74, 158, 204, .12);
  border-color: rgba(142, 200, 228, .28);
  box-shadow: none;
}
[data-skin="dark"] .hero-float .qx-icon-tile { color: var(--brand-300); }
[data-skin="dark"] .empty .ico { color: var(--brand-300) !important; background: rgba(74, 158, 204, .12); border-color: rgba(142, 200, 228, .3); }
[data-skin="dark"] .box-h { background: linear-gradient(180deg, var(--surface), var(--surface-soft)); }
[data-skin="dark"] .stats-strip { background: rgba(21, 37, 54, .66); }
[data-skin="dark"] .hero-badges span { background: rgba(21, 37, 54, .72); border-color: var(--line); }
[data-skin="dark"] .quick a { background: linear-gradient(180deg, var(--surface), var(--surface-soft)); }
[data-skin="dark"] .hero .search-box { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box; }
[data-skin="dark"] .cat-card { background: linear-gradient(180deg, var(--surface), var(--surface-soft)); }
[data-skin="dark"] .auth-card { background: rgba(21, 37, 54, .9); }
[data-skin="dark"] .footer { background: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%); }
[data-skin="dark"] .pkg .price,
[data-skin="dark"] .pay-amount,
[data-skin="dark"] .pay-total { background: linear-gradient(165deg, var(--brand-300) 10%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; }
[data-skin="dark"] .rank-list li:nth-child(1) .rank-medal,
[data-skin="dark"] .rank-list li:nth-child(2) .rank-medal,
[data-skin="dark"] .rank-list li:nth-child(3) .rank-medal { color: #1a2431; }

/* =======================================================
   [3] 深邃蓝 deepblue 后台增强（默认基底，仅后台）：极淡蓝渐变 + 表头浅蓝
   ======================================================= */
[data-skin="deepblue"] body.adm-body { background: linear-gradient(180deg, #eef4f9 0%, #e6eef5 100%); }
[data-skin="deepblue"] .tbl th { background: var(--brand-50); color: var(--brand-800); }
[data-skin="deepblue"] .tbl tr:hover td { background: var(--brand-50); }
[data-skin="deepblue"] .adm-main { background: transparent; }

/* =======================================================
   [4] 页脚皮肤切换器 .skin-switch
   页脚恒为深色表面，故全部使用 --on-dark* 令牌，三套皮肤下均可见
   ======================================================= */
.skin-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.skin-switch .ss-label { font-size: 12px; letter-spacing: 1px; color: var(--on-dark-3); }
.skin-switch .ss-dots { display: inline-flex; gap: 8px; }
.skin-switch .ss-dot { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--line-on-dark); background: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.skin-switch .ss-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--dot, var(--brand)); }
.skin-switch .ss-dot[data-skin-btn="deepblue"] { --dot: #0f5c8c; }
.skin-switch .ss-dot[data-skin-btn="verdant"] { --dot: #155e4b; }
.skin-switch .ss-dot[data-skin-btn="dark"] { --dot: #4a9ecc; }
.skin-switch .ss-dot:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .45); }
.skin-switch .ss-dot[aria-pressed="true"] { border-color: var(--on-dark); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.skin-switch .ss-dot:focus-visible { outline: 2px solid var(--on-dark-link); outline-offset: 2px; }