/* =============================================================================
   cc-skin-modern.css — 现代感皮肤（3 套主题变体）
   cnext design system · 个人 mark: cc

   包含：
   - 3 套 :root[data-theme] token 定义
     - business：商务风（深青绿主色 + 米黄底）
     - fresh：清新风（亮青色 + 浅玻璃）
     - cartoon：卡通风（粉色 + 硬边阴影 + 漫画字体）★ 用户最爱
   - 主题专属 body::before/::after 背景动画
   - 主题专属 keyframes
   - 主题专属组件 override（硬边阴影、漫画感、圆角风格等）

   引入顺序：cc-reset.css → cc-tokens.css → cc-structure.css → cc-skin-*.css

   ⚠ cartoon 主题需要：assets/cartoon-dashboard-bg.webp（同目录）
============================================================================= */

/* =============================================================================
   1. Business 主题 — 商务风
   深青绿 + 米黄底，适合后台/工具类应用
============================================================================= */
:root[data-theme="business"] {
  --bg-body: #eef1ee;
  --bg-sidebar: #111815;
  --bg-header: rgba(247, 249, 244, 0.9);
  --bg-card: rgba(255, 255, 250, 0.9);
  --bg-card-solid: #fffffb;
  --bg-elevated: #e5ebe2;
  --bg-secondary: #e5ebe2;
  --bg-hover: #eaf0e6;
  --bg-input: #f9fbf5;
  --bg-surface: #eef1ee;
  --bg-overlay: rgba(17, 24, 21, 0.46);

  --text-primary: #17201c;
  --text-secondary: #3d4d45;
  --text-muted: #6b786f; /* 对 --bg-card-solid >=4.5:1（WCAG AA 正文），当前 4.61:1 */

  --accent: #0f766e;
  --accent-hover: #0b5f58;
  --accent-soft: rgba(15, 118, 110, 0.13);
  --on-accent: #ffffff;

  --success: #16824d;
  --success-soft: rgba(22, 130, 77, 0.12);
  --warning: #a96a09;
  --warning-soft: rgba(169, 106, 9, 0.13);
  --danger: #b8322f;
  --danger-soft: rgba(184, 50, 47, 0.12);
  --info: #0284c7;
  --info-soft: rgba(2, 132, 199, 0.12);

  --border: rgba(46, 65, 55, 0.2);
  --border-hover: rgba(15, 118, 110, 0.42);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(34, 42, 33, 0.05);
  --shadow: 0 10px 30px rgba(38, 50, 36, 0.10);
  --shadow-lg: 0 24px 60px rgba(28, 35, 26, 0.18);

  --font: "IBM Plex Sans", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sidebar-width: 64px;
  --header-height: 56px;
  --glass: blur(18px) saturate(1.2);
  --hero-bg: linear-gradient(135deg, #111815 0%, #1a2f2b 38%, #0f766e 100%);

  --chart-from: #0f766e;
  --chart-to: #a96a09;
  --chart-area: rgba(15, 118, 110, 0.12);

  --datetime-scheme: light;
  --calendar-icon-filter: invert(32%) sepia(45%) saturate(861%) hue-rotate(126deg) brightness(88%);
}

/* Business 主题：暗色侧栏 + 米黄底，body 网格背景 */
:root[data-theme="business"] body {
  background-image:
    linear-gradient(90deg, rgba(15, 118, 110, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(169, 106, 9, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 12%, rgba(15, 118, 110, 0.10), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(169, 106, 9, 0.09), transparent 22%);
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
/* 注：business body::after + @keyframes cc-business-drift 已由 app.css 定义（后加载覆盖），此处删除避免重复 */

/* =============================================================================
   2. Fresh 主题 — 清新风
   亮青色 + 浅玻璃 + 大圆角，适合现代化应用
============================================================================= */
:root[data-theme="fresh"] {
  --bg-body: #eefbff;
  --bg-sidebar: rgba(238, 251, 255, 0.92);
  --bg-header: rgba(250, 254, 255, 0.84);
  --bg-card: rgba(255, 255, 255, 0.84);
  --bg-card-solid: #ffffff;
  --bg-elevated: #dcf8f3;
  --bg-secondary: #dcf8f3;
  --bg-hover: #e6fbf4;
  --bg-input: #f7fdff;
  --bg-surface: #eefbff;
  --bg-overlay: rgba(13, 37, 54, 0.34);

  --text-primary: #112434;
  --text-secondary: #315569;
  --text-muted: #5a798a; /* 对 --bg-card-solid >=4.5:1（WCAG AA 正文），当前 4.63:1 */

  --accent: #0891b2;
  --accent-hover: #0e7490;
  --accent-soft: rgba(8, 145, 178, 0.12);
  --on-accent: #ffffff;

  --success: #65a30d;
  --success-soft: rgba(101, 163, 13, 0.12);
  --warning: #f97316;
  --warning-soft: rgba(249, 115, 22, 0.13);
  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, 0.12);
  --info: #06b6d4;
  --info-soft: rgba(6, 182, 212, 0.12);

  --border: rgba(69, 119, 145, 0.18);
  --border-hover: rgba(8, 145, 178, 0.38);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  --shadow-sm: 0 2px 8px rgba(14, 116, 144, 0.07);
  --shadow: 0 14px 34px rgba(14, 116, 144, 0.10);
  --shadow-lg: 0 24px 58px rgba(14, 116, 144, 0.16);

  --font: "Nunito Sans", "Avenir Next", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sidebar-width: 64px;
  --header-height: 56px;
  --glass: blur(18px) saturate(1.16);
  --hero-bg: linear-gradient(135deg, #d4edf3 0%, #e8f5e6 55%, rgba(132, 204, 22, 0.16) 100%);

  --chart-from: #0891b2;
  --chart-to: #84cc16;
  --chart-area: rgba(8, 145, 178, 0.12);

  --datetime-scheme: light;
  --calendar-icon-filter: invert(37%) sepia(65%) saturate(1293%) hue-rotate(153deg) brightness(85%);
}

/* Fresh 主题：浅色玻璃感 + 漂浮几何 */
:root[data-theme="fresh"] body {
  background-image:
    radial-gradient(circle at 15% 12%, rgba(132, 204, 22, 0.18), transparent 22%),
    radial-gradient(circle at 85% 18%, rgba(8, 145, 178, 0.16), transparent 24%),
    linear-gradient(90deg, rgba(8, 145, 178, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(132, 204, 22, 0.055) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(220, 248, 243, 0.58));
  background-size: 100% 100%, 100% 100%, 38px 38px, 38px 38px, 100% 100%;
  background-attachment: fixed;
}
/* 注：fresh body::after + @keyframes cc-fresh-drift 已由 app.css 定义（后加载覆盖），此处删除避免重复 */

/* =============================================================================
   3. Cartoon 主题 — 卡通风 ★
   粉色 + 硬边阴影 + 漫画字体，最具辨识度的"玩趣"风格
   需要：assets/cartoon-dashboard-bg.webp
============================================================================= */
:root[data-theme="cartoon"] {
  --bg-body: #fff7e7;
  --bg-sidebar: #fff2cf;
  --bg-header: rgba(255, 250, 235, 0.93);
  --bg-card: rgba(255, 255, 250, 0.95);
  --bg-card-solid: #ffffff;
  --bg-elevated: #fff0d8;
  --bg-secondary: #fff0d8;
  --bg-hover: #fff3dd;
  --bg-input: #fffefa;
  --bg-surface: #fff7e7;
  --bg-overlay: rgba(38, 33, 54, 0.4);

  --text-primary: #28223f;
  --text-secondary: #4e4171;
  --text-muted: #7e6e95; /* 对 --bg-card-solid >=4.5:1（WCAG AA 正文），当前 4.61:1 */

  --accent: #ff6f9c;
  --accent-hover: #eb5a89;
  --accent-soft: rgba(255, 111, 156, 0.15);
  --on-accent: #ffffff;

  --success: #24b99a;
  --success-soft: rgba(36, 185, 154, 0.14);
  --warning: #ffd166;
  --warning-soft: rgba(255, 209, 102, 0.22);
  --danger: #f05252;
  --danger-soft: rgba(240, 82, 82, 0.14);
  --info: #5b8def;
  --info-soft: rgba(91, 141, 239, 0.14);

  /* 卡通特色：实色边框（不是半透明） */
  --border: #403456;
  --border-hover: #ff6f9c;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  /* 卡通特色：硬边阴影（带位移，无模糊） */
  --shadow-sm: 2px 2px 0 rgba(64, 52, 86, 0.55);
  --shadow: 4px 4px 0 rgba(64, 52, 86, 0.62);
  --shadow-lg: 7px 7px 0 rgba(64, 52, 86, 0.68);

  /* 卡通特色：漫画风字体 */
  --font: "Trebuchet MS", "Comic Sans MS", "Marker Felt", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sidebar-width: 64px;
  --header-height: 56px;
  --glass: blur(8px) saturate(1.1);
  --hero-bg: linear-gradient(135deg, #fff0e0 0%, #ffe8d8 50%, rgba(255, 111, 156, 0.12) 100%);

  --chart-from: #ff6f9c;
  --chart-to: #ffd166;
  --chart-area: rgba(255, 111, 156, 0.12);

  --datetime-scheme: light;
  --calendar-icon-filter: invert(49%) sepia(47%) saturate(1271%) hue-rotate(304deg) brightness(101%);
}

/* 卡通背景：纸质插画 + 漂浮图案 */
:root[data-theme="cartoon"] body {
  background:
    linear-gradient(rgba(255, 248, 229, 0.38), rgba(255, 248, 229, 0.38)),
    url('/assets/cartoon-dashboard-bg.webp') center / cover fixed;
}
/* 注：cartoon body::after + @keyframes cc-cartoon-float 已由 app.css 定义（后加载覆盖），此处删除避免重复 */

/* =============================================================================
   主题专属组件 override
   ============================================================================= */

/* ---------- Business 专属 ---------- */
:root[data-theme="business"] .header { box-shadow: 0 12px 28px rgba(17, 24, 21, 0.07); }
:root[data-theme="business"] .sidebar {
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05) inset, 14px 0 34px rgba(17, 24, 21, 0.10);
}
:root[data-theme="business"] .sidebar__logo {
  background: linear-gradient(135deg, #0f766e, #be7a15);
}
:root[data-theme="business"] .nav-item { color: rgba(255, 255, 255, 0.55); }
:root[data-theme="business"] .nav-item:hover {
  color: #ffffff; background: rgba(255, 255, 255, 0.10);
}
:root[data-theme="business"] .nav-item.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.88), rgba(169, 106, 9, 0.78));
}
:root[data-theme="business"] .nav-item.active::before { background: #ffffff; }
/* ---------- Fresh 专属 ---------- */
:root[data-theme="fresh"] .sidebar {
  box-shadow: 1px 0 0 rgba(8, 145, 178, 0.10), 16px 0 34px rgba(14, 116, 144, 0.10);
}
:root[data-theme="fresh"] .sidebar__logo {
  background: linear-gradient(135deg, #0891b2, #84cc16 62%, #f97316);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(8, 145, 178, 0.24);
}
:root[data-theme="fresh"] .nav-item,
:root[data-theme="fresh"] .mobile-tab-bar__btn { color: var(--text-muted); }
:root[data-theme="fresh"] .nav-item:hover,
:root[data-theme="fresh"] .mobile-tab-bar__btn:hover { color: var(--accent-hover); background: rgba(255, 255, 255, 0.72); }
:root[data-theme="fresh"] .nav-item.active,
:root[data-theme="fresh"] .mobile-tab-bar__btn.active { color: #ffffff; background: var(--accent); }
:root[data-theme="fresh"] .nav-item.active::before { background: var(--warning); }
:root[data-theme="fresh"] .badge { border-color: var(--accent); }
:root[data-theme="fresh"] .stat-card:nth-child(3n+1) .stat-card__icon { background: rgba(8, 145, 178, 0.12); color: var(--accent); }
:root[data-theme="fresh"] .stat-card:nth-child(3n+2) .stat-card__icon { background: rgba(249, 115, 22, 0.13); color: var(--warning); }
:root[data-theme="fresh"] .stat-card:nth-child(3n) .stat-card__icon { background: rgba(132, 204, 22, 0.16); color: var(--success); }

/* ---------- Cartoon 专属 ★ ---------- */
:root[data-theme="cartoon"] .card,
:root[data-theme="cartoon"] .stat-card,
:root[data-theme="cartoon"] .modal-content,
:root[data-theme="cartoon"] .toast,
:root[data-theme="cartoon"] .theme-picker,
:root[data-theme="cartoon"] .custom-select__dropdown,
:root[data-theme="cartoon"] .model-select-dropdown,
:root[data-theme="cartoon"] .dtp-panel { border-width: 2px; }
:root[data-theme="cartoon"] .card__header { border-bottom-width: 2px; }
:root[data-theme="cartoon"] .btn,
:root[data-theme="cartoon"] .input,
:root[data-theme="cartoon"] .tab-bar,
:root[data-theme="cartoon"] .key-display,
:root[data-theme="cartoon"] .json-block { border-width: 2px; }
:root[data-theme="cartoon"] .btn { box-shadow: 2px 2px 0 rgba(51, 42, 79, 0.8); }
:root[data-theme="cartoon"] .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(51, 42, 79, 0.88);
}
:root[data-theme="cartoon"] .btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(51, 42, 79, 0.88);
}
:root[data-theme="cartoon"] .btn--accent,
:root[data-theme="cartoon"] .btn--active {
  color: var(--on-accent) !important;
  text-shadow: 1px 1px 0 rgba(51, 42, 79, 0.4);
}
:root[data-theme="cartoon"] .btn:focus-visible,
:root[data-theme="cartoon"] .nav-item:focus-visible { outline-offset: 3px; }

:root[data-theme="cartoon"] .header { border-bottom-width: 2px; box-shadow: 0 3px 0 rgba(51, 42, 79, 0.85); }
:root[data-theme="cartoon"] .header__title { text-shadow: 1px 1px 0 rgba(247, 169, 40, 0.5); }

:root[data-theme="cartoon"] .sidebar {
  border-right-width: 2px;
  box-shadow: 4px 0 0 rgba(51, 42, 79, 0.85);
}
:root[data-theme="cartoon"] .sidebar__logo {
  background: linear-gradient(135deg, var(--accent), var(--warning));
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
}
:root[data-theme="cartoon"] .nav-item { color: var(--text-muted); }
:root[data-theme="cartoon"] .nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.58);
}
:root[data-theme="cartoon"] .nav-item.active {
  color: var(--on-accent);
  background: var(--accent);
}
:root[data-theme="cartoon"] .nav-item.active::before { background: var(--warning); }

:root[data-theme="cartoon"] .badge { border: 1.5px solid currentColor; font-weight: 800; }
:root[data-theme="cartoon"] .theme-picker__dot {
  border: 1.5px solid var(--border);
  box-shadow: 1px 1px 0 var(--border);
}
:root[data-theme="cartoon"] .switch__track { height: 22px; border: 2px solid var(--border); }
:root[data-theme="cartoon"] .switch--on .switch__track { background: var(--accent); border-color: var(--border); }
:root[data-theme="cartoon"] .stat-card:nth-child(3n+1) .stat-card__icon { background: rgba(0, 169, 143, 0.16); color: var(--success); }
:root[data-theme="cartoon"] .stat-card:nth-child(3n+2) .stat-card__icon { background: rgba(255, 93, 143, 0.16); color: var(--accent); }
:root[data-theme="cartoon"] .stat-card:nth-child(3n) .stat-card__icon { background: rgba(247, 169, 40, 0.22); color: #b56c00; }

/* =============================================================================
   4. Dark 主题 — 暗色风
   深底 + 亮蓝 accent，适合夜间/低光环境。只覆盖 token，组件层不动。
   sidebar/nav-item 走深色 override（参照 business 模式）。
============================================================================= */
:root[data-theme="dark"] {
  --bg-body: #0d1117;
  --bg-sidebar: #010409;
  --bg-header: rgba(22, 27, 34, 0.85);
  --bg-card: rgba(22, 27, 34, 0.9);
  --bg-card-solid: #161b22;
  --bg-elevated: #21262d;
  --bg-secondary: #21262d;
  --bg-hover: #1c2128;
  --bg-input: #0d1117;
  --bg-surface: #0d1117;
  --bg-overlay: rgba(1, 4, 9, 0.6);

  --text-primary: #e6edf3;
  --text-secondary: #9198a1;
  --text-muted: #7c8590; /* 对 --bg-card-solid >=4.5:1（WCAG AA 正文），当前 4.63:1；仍明显弱于 secondary#9198a1 */

  --accent: #2f81f7;
  --accent-hover: #4493f8;
  --accent-soft: rgba(47, 129, 247, 0.16);
  --on-accent: #ffffff;

  --success: #3fb950;
  --success-soft: rgba(63, 185, 80, 0.16);
  --warning: #d29922;
  --warning-soft: rgba(210, 153, 34, 0.16);
  --danger: #f85149;
  --danger-soft: rgba(248, 81, 73, 0.16);
  --info: #2f81f7;
  --info-soft: rgba(47, 129, 247, 0.16);

  --border: rgba(240, 246, 252, 0.1);
  --border-hover: rgba(47, 129, 247, 0.4);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);

  --font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sidebar-width: 64px;
  --header-height: 56px;
  --glass: blur(18px) saturate(1.3);
  --hero-bg: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1f2937 100%);

  --chart-from: #2f81f7;
  --chart-to: #d29922;
  --chart-area: rgba(47, 129, 247, 0.16);

  --datetime-scheme: dark;
  --calendar-icon-filter: invert(62%) sepia(60%) saturate(2200%) hue-rotate(207deg) brightness(95%);
}

/* Dark 主题：轻量暗色网格背景 */
:root[data-theme="dark"] body {
  background-image:
    linear-gradient(90deg, rgba(240, 246, 252, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 246, 252, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 12% 12%, rgba(47, 129, 247, 0.08), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(210, 153, 34, 0.06), transparent 24%);
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* Dark 主题 sidebar/nav 深色 override（参照 business） */
:root[data-theme="dark"] .sidebar {
  border-right-color: rgba(240, 246, 252, 0.06);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04) inset, 14px 0 34px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .sidebar__logo {
  background: linear-gradient(135deg, #2f81f7, #d29922);
}
:root[data-theme="dark"] .nav-item { color: rgba(230, 237, 243, 0.5); }
:root[data-theme="dark"] .nav-item:hover {
  color: #e6edf3; background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .nav-item.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(47, 129, 247, 0.85), rgba(210, 153, 34, 0.65));
}
:root[data-theme="dark"] .nav-item.active::before { background: #ffffff; }
:root[data-theme="dark"] .header { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
:root[data-theme="dark"] .mobile-tab-bar__btn.active {
  color: #ffffff; background: var(--accent);
}

/* ---------- 通用主题切换过渡（所有元素平滑切换）---------- */
.card, .modal-content, .header, .input, .stat-card, .theme-picker,
.btn, .toast, .nav-item, .sidebar, .key-display, .detail-section,
.tab-bar, .modal__header, .badge, .badge--success, .badge--danger, .badge--warning, .badge--muted, .badge--accent, .badge--info {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}