/* ==========================================================================
   A 漫剧 · 主题系统 v2
   --------------------------------------------------------------------------
   设计目标：切换主题不只是换色，而是切换设计语言。
   - dark      : 深空夜，紫色发光 / 玻璃悬浮
   - mist      : 雾白晨，柔光半透 / 极简留白
   - paper     : 纸感护眼，纸纹纸纤 / 暖阴影 / 手作感
   - graphite  : 石墨蓝灰，工业风扁平 / 钢蓝高对比
   ========================================================================== */

/* ----------------------------- 1. Tokens ---------------------------------- */
:root,
html[data-theme="dark"] {
    color-scheme: dark;
    /* 表面层 */
    --ac-bg: #0e1018;
    --ac-bg-soft: #141622;
    --ac-bg-deep: #07090f;
    --ac-surface: #1a1d2b;
    --ac-surface-raised: #232739;
    --ac-surface-muted: #2c3146;
    --ac-glass: rgba(26, 29, 43, 0.62);
    --ac-glass-strong: rgba(26, 29, 43, 0.86);
    /* 边界 */
    --ac-border: #353a52;
    --ac-border-soft: #262a3d;
    --ac-border-strong: #4a5170;
    --ac-divider: rgba(255, 255, 255, 0.06);
    /* 文本 */
    --ac-text: #f3f4f6;
    --ac-text-soft: #d8dae3;
    --ac-text-muted: #9aa0b3;
    --ac-text-subtle: #6b7088;
    --ac-text-on-accent: #ffffff;
    /* 主色 */
    --ac-accent: #9333ea;
    --ac-accent-hover: #a855f7;
    --ac-accent-soft: #c084fc;
    --ac-accent-faint: rgba(147, 51, 234, 0.16);
    --ac-accent-glow: 0 0 0 1px rgba(168, 85, 247, 0.32), 0 0 22px rgba(168, 85, 247, 0.32);
    --ac-accent-grad: linear-gradient(135deg, #9333ea 0%, #6366f1 100%);
    --ac-accent-grad-hover: linear-gradient(135deg, #a855f7 0%, #818cf8 100%);
    --ac-hero-grad: linear-gradient(120deg, #312e81 0%, #6d28d9 45%, #1e1b4b 100%);
    /* 信息 / 状态 */
    --ac-info: #60a5fa;
    --ac-info-soft: #93c5fd;
    --ac-info-faint: rgba(96, 165, 250, 0.16);
    --ac-success: #22c55e;
    --ac-success-soft: #4ade80;
    --ac-success-faint: rgba(34, 197, 94, 0.18);
    --ac-warn: #f59e0b;
    --ac-warn-soft: #fbbf24;
    --ac-warn-faint: rgba(245, 158, 11, 0.18);
    --ac-danger: #ef4444;
    --ac-danger-soft: #f87171;
    --ac-danger-faint: rgba(239, 68, 68, 0.18);
    /* 圆角 / 阴影 */
    --ac-radius-xs: 6px;
    --ac-radius-sm: 10px;
    --ac-radius: 14px;
    --ac-radius-lg: 20px;
    --ac-radius-pill: 999px;
    --ac-elev-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 18px rgba(0, 0, 0, 0.28);
    --ac-elev-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 38px rgba(0, 0, 0, 0.42);
    --ac-elev-3: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 60px rgba(0, 0, 0, 0.55);
    --ac-shadow-raised: var(--ac-elev-2);
    --ac-focus-ring: rgba(168, 85, 247, 0.42);
    /* 背景纹理图层 */
    --ac-page-pattern:
        radial-gradient(800px 520px at -10% -20%, rgba(147, 51, 234, 0.22), transparent 60%),
        radial-gradient(720px 480px at 115% 105%, rgba(56, 189, 248, 0.14), transparent 65%),
        radial-gradient(520px 360px at 80% 5%, rgba(244, 114, 182, 0.10), transparent 70%);
    --ac-page-grain: none;
    /* 字体感 */
    --ac-font-weight-bold: 700;
    --ac-letter-spacing: 0;
}

/* ----------------------------- 2. 基础 ------------------------------------ */
html[data-theme] body {
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    transition: background-color 0.28s ease, color 0.28s ease;
    position: relative;
    min-height: 100vh;
}

/* 主题背景纹理层：z-index 为负，绝不抢模态/侧栏的层级 */
html[data-theme] body {
    isolation: isolate;
}

html[data-theme] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--ac-bg);
    background-image: var(--ac-page-pattern);
    background-attachment: fixed;
    opacity: 1;
    transition: opacity 0.4s ease;
}

html[data-theme] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--ac-page-grain);
    background-repeat: repeat;
    mix-blend-mode: multiply;
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

html[data-theme="dark"] body::after {
    mix-blend-mode: lighten;
}

/* CSS 变量过渡：让切主题流畅而不突兀 */
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
    transition-property: background-color, border-color, color, box-shadow, fill, stroke;
    transition-duration: 0.22s;
    transition-timing-function: ease;
}

/* 全局 form 控件继承主题 */
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
    color-scheme: inherit;
}

html[data-theme] ::selection {
    background: var(--ac-accent-faint);
    color: var(--ac-text);
}

/* ----------------------------- 3. 背景映射 -------------------------------- */
/* #13141c 是原始的页面主背景，应当映射到 --ac-bg（页面底） */
html[data-theme] .bg-\[\#13141c\] {
    background-color: var(--ac-bg) !important;
}

/* 这些是比页面底更深的局部黑色，映射到 --ac-bg-deep */
html[data-theme] .bg-\[\#101118\],
html[data-theme] .bg-\[\#0b0c12\],
html[data-theme] .bg-\[\#0f1018\],
html[data-theme] .bg-\[\#0f1118\] {
    background-color: var(--ac-bg-deep) !important;
}

html[data-theme] .bg-\[\#151722\],
html[data-theme] .bg-\[\#15131c\],
html[data-theme] .bg-\[\#161824\] {
    background-color: var(--ac-bg-soft) !important;
}

html[data-theme] .bg-\[\#1b1d29\],
html[data-theme] .bg-\[\#1e202e\] {
    background-color: var(--ac-surface) !important;
}

html[data-theme] .bg-\[\#252838\],
html[data-theme] .bg-\[\#25283a\],
html[data-theme] .bg-\[\#2d3142\] {
    background-color: var(--ac-surface-raised) !important;
}

html[data-theme] .bg-\[\#13141c\]\/90 {
    background-color: color-mix(in srgb, var(--ac-bg) 88%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-theme] .bg-gray-900 { background-color: var(--ac-bg-deep) !important; }
html[data-theme] .bg-gray-800 { background-color: var(--ac-surface) !important; }
html[data-theme] .bg-gray-700 { background-color: var(--ac-surface-raised) !important; }
html[data-theme] .bg-gray-600 { background-color: var(--ac-surface-muted) !important; }

html[data-theme] .bg-black\/30 { background-color: color-mix(in srgb, var(--ac-bg-deep) 50%, transparent) !important; }
html[data-theme] .bg-black\/40 { background-color: color-mix(in srgb, var(--ac-bg-deep) 65%, transparent) !important; }
html[data-theme] .bg-black\/50 { background-color: color-mix(in srgb, var(--ac-bg-deep) 75%, transparent) !important; }
html[data-theme] .bg-black\/60 { background-color: color-mix(in srgb, var(--ac-bg-deep) 82%, transparent) !important; }
html[data-theme] .bg-white\/5  { background-color: color-mix(in srgb, var(--ac-text) 5%, transparent) !important; }
html[data-theme] .bg-white\/10 { background-color: color-mix(in srgb, var(--ac-text) 8%, transparent) !important; }
html[data-theme] .bg-white\/15 { background-color: color-mix(in srgb, var(--ac-text) 12%, transparent) !important; }
html[data-theme] .bg-white\/20 { background-color: color-mix(in srgb, var(--ac-text) 16%, transparent) !important; }

/* ---- 主色：purple ---- */
html[data-theme] .bg-purple-500,
html[data-theme] .bg-purple-600,
html[data-theme] .bg-purple-700,
html[data-theme] .bg-purple-800,
html[data-theme] .active-tab,
html[data-theme] .active-task-tab {
    background-color: var(--ac-accent) !important;
    color: var(--ac-text-on-accent) !important;
}

html[data-theme] .hover\:bg-purple-500:hover,
html[data-theme] .hover\:bg-purple-600:hover,
html[data-theme] .hover\:bg-purple-700:hover {
    background-color: var(--ac-accent-hover) !important;
}

html[data-theme] .bg-purple-900\/10,
html[data-theme] .bg-purple-900\/20,
html[data-theme] .bg-purple-900\/25,
html[data-theme] .bg-purple-900\/30,
html[data-theme] .bg-purple-900\/40,
html[data-theme] .bg-purple-900\/50,
html[data-theme] .bg-purple-950\/20,
html[data-theme] .bg-purple-950\/30,
html[data-theme] .bg-purple-800\/30,
html[data-theme] .bg-purple-800\/35,
html[data-theme] .bg-purple-800\/40,
html[data-theme] .bg-purple-800\/50,
html[data-theme] .bg-purple-700\/30,
html[data-theme] .bg-purple-600\/0,
html[data-theme] .bg-purple-600\/20,
html[data-theme] .bg-purple-600\/30,
html[data-theme] .bg-purple-600\/40,
html[data-theme] .bg-purple-500\/10,
html[data-theme] .bg-purple-500\/15,
html[data-theme] .bg-purple-500\/20 {
    background-color: var(--ac-accent-faint) !important;
    color: var(--ac-accent-soft) !important;
}

/* ---- 信息：blue / indigo ---- */
html[data-theme] .bg-blue-500,
html[data-theme] .bg-blue-600,
html[data-theme] .bg-blue-700,
html[data-theme] .bg-indigo-500,
html[data-theme] .bg-indigo-600,
html[data-theme] .bg-indigo-700 {
    background-color: var(--ac-info) !important;
    color: var(--ac-text-on-accent) !important;
}

html[data-theme] .hover\:bg-blue-500:hover,
html[data-theme] .hover\:bg-blue-600:hover,
html[data-theme] .hover\:bg-blue-700:hover {
    background-color: color-mix(in srgb, var(--ac-info) 80%, var(--ac-accent)) !important;
}

html[data-theme] .bg-blue-900\/20,
html[data-theme] .bg-blue-900\/30,
html[data-theme] .bg-blue-900\/40,
html[data-theme] .bg-blue-900\/50,
html[data-theme] .bg-blue-950\/20,
html[data-theme] .bg-blue-500\/10,
html[data-theme] .bg-blue-500\/15,
html[data-theme] .bg-blue-500\/20,
html[data-theme] .bg-indigo-900\/20,
html[data-theme] .bg-indigo-900\/30,
html[data-theme] .bg-indigo-900\/40 {
    background-color: var(--ac-info-faint) !important;
    color: var(--ac-info-soft) !important;
}

/* ---- 状态：green / emerald ---- */
html[data-theme] .bg-green-500,
html[data-theme] .bg-green-600,
html[data-theme] .bg-emerald-500,
html[data-theme] .bg-emerald-600,
html[data-theme] .bg-emerald-700 {
    background-color: var(--ac-success) !important;
    color: var(--ac-text-on-accent) !important;
}

html[data-theme] .hover\:bg-green-500:hover,
html[data-theme] .hover\:bg-green-600:hover,
html[data-theme] .hover\:bg-emerald-500:hover,
html[data-theme] .hover\:bg-emerald-600:hover {
    background-color: var(--ac-success-soft) !important;
}

html[data-theme] .bg-green-400,
html[data-theme] .bg-emerald-400 {
    background-color: var(--ac-success-soft) !important;
}

html[data-theme] .bg-green-900\/20,
html[data-theme] .bg-green-900\/30,
html[data-theme] .bg-green-900\/40,
html[data-theme] .bg-green-950\/20,
html[data-theme] .bg-green-500\/10,
html[data-theme] .bg-green-500\/15,
html[data-theme] .bg-green-500\/20,
html[data-theme] .bg-emerald-900\/20 {
    background-color: var(--ac-success-faint) !important;
    color: var(--ac-success-soft) !important;
}

/* ---- 状态：red / rose ---- */
html[data-theme] .bg-red-400,
html[data-theme] .bg-red-500,
html[data-theme] .bg-red-600,
html[data-theme] .bg-red-700,
html[data-theme] .bg-rose-500,
html[data-theme] .bg-rose-600 {
    background-color: var(--ac-danger) !important;
    color: #fff !important;
}

html[data-theme] .hover\:bg-red-500:hover,
html[data-theme] .hover\:bg-red-600:hover,
html[data-theme] .hover\:bg-red-700:hover {
    background-color: var(--ac-danger-soft) !important;
}

html[data-theme] .bg-red-600\/40,
html[data-theme] .bg-red-600\/80,
html[data-theme] .bg-red-600\/90 {
    background-color: color-mix(in srgb, var(--ac-danger) 70%, transparent) !important;
}

html[data-theme] .bg-red-900\/10,
html[data-theme] .bg-red-900\/20,
html[data-theme] .bg-red-900\/30,
html[data-theme] .bg-red-900\/40,
html[data-theme] .bg-red-900\/50,
html[data-theme] .bg-red-950\/20 {
    background-color: var(--ac-danger-faint) !important;
    color: var(--ac-danger-soft) !important;
}

/* ---- 状态：yellow / amber ---- */
html[data-theme] .bg-yellow-300,
html[data-theme] .bg-yellow-400,
html[data-theme] .bg-yellow-500,
html[data-theme] .bg-yellow-500\/90,
html[data-theme] .bg-yellow-600,
html[data-theme] .bg-amber-500,
html[data-theme] .bg-amber-600,
html[data-theme] .bg-amber-700 {
    background-color: var(--ac-warn) !important;
    color: #fff !important;
}

html[data-theme] .bg-yellow-900\/30,
html[data-theme] .bg-yellow-900\/40,
html[data-theme] .bg-yellow-900\/50,
html[data-theme] .bg-amber-900\/25 {
    background-color: var(--ac-warn-faint) !important;
    color: var(--ac-warn-soft) !important;
}

/* ---- 辅助：cyan / teal / sky ---- */
html[data-theme] .bg-cyan-500,
html[data-theme] .bg-cyan-600,
html[data-theme] .bg-cyan-700,
html[data-theme] .bg-sky-500,
html[data-theme] .bg-sky-600,
html[data-theme] .bg-teal-500,
html[data-theme] .bg-teal-600 {
    background-color: color-mix(in srgb, var(--ac-info) 70%, var(--ac-accent) 20%) !important;
    color: var(--ac-text-on-accent) !important;
}

/* ----------------------------- 4. 悬停背景映射 ---------------------------- */
html[data-theme] .hover\:bg-gray-700:hover,
html[data-theme] .hover\:bg-gray-800:hover {
    background-color: var(--ac-surface-muted) !important;
}

html[data-theme] .hover\:bg-red-900\/20:hover,
html[data-theme] .hover\:bg-red-900\/30:hover,
html[data-theme] .hover\:bg-red-900\/40:hover {
    background-color: var(--ac-danger-faint) !important;
}

/* ----------------------------- 5. 边框映射 -------------------------------- */
html[data-theme] .border-gray-900,
html[data-theme] .border-gray-800,
html[data-theme] .border-gray-800\/50,
html[data-theme] .border-gray-700,
html[data-theme] .border-\[\#13141c\],
html[data-theme] .border-\[\#1b1d29\],
html[data-theme] .border-\[\#2d3142\] {
    border-color: var(--ac-border-soft) !important;
}

html[data-theme] .border-gray-600,
html[data-theme] .border-gray-500 {
    border-color: var(--ac-border) !important;
}

html[data-theme] .border-white\/10,
html[data-theme] .border-white\/20 {
    border-color: color-mix(in srgb, var(--ac-text) 14%, transparent) !important;
}

html[data-theme] .border-purple-400,
html[data-theme] .border-purple-500,
html[data-theme] .border-purple-600,
html[data-theme] .border-purple-700,
html[data-theme] .border-purple-500\/20,
html[data-theme] .border-purple-500\/30,
html[data-theme] .border-purple-500\/40,
html[data-theme] .border-purple-500\/50,
html[data-theme] .border-purple-500\/60,
html[data-theme] .border-purple-400\/30,
html[data-theme] .border-purple-700\/40,
html[data-theme] .border-purple-800\/30,
html[data-theme] .hover\:border-purple-500:hover,
html[data-theme] .hover\:border-purple-400:hover {
    border-color: var(--ac-accent-soft) !important;
}

html[data-theme] .border-blue-400,
html[data-theme] .border-blue-500,
html[data-theme] .border-blue-700,
html[data-theme] .border-blue-500\/50,
html[data-theme] .border-blue-400\/30,
html[data-theme] .border-indigo-500,
html[data-theme] .border-indigo-500\/30 {
    border-color: var(--ac-info-soft) !important;
}

html[data-theme] .border-green-500,
html[data-theme] .border-green-700,
html[data-theme] .border-green-500\/30,
html[data-theme] .border-green-700\/50,
html[data-theme] .border-emerald-500 {
    border-color: var(--ac-success-soft) !important;
}

html[data-theme] .border-red-400\/70,
html[data-theme] .border-red-500,
html[data-theme] .border-red-500\/30,
html[data-theme] .border-red-500\/40,
html[data-theme] .border-red-700,
html[data-theme] .border-red-900 {
    border-color: var(--ac-danger-soft) !important;
}

html[data-theme] .border-cyan-400,
html[data-theme] .border-cyan-500,
html[data-theme] .border-cyan-500\/40,
html[data-theme] .border-amber-500\/30,
html[data-theme] .border-yellow-700 {
    border-color: color-mix(in srgb, var(--ac-info-soft) 55%, var(--ac-warn) 45%) !important;
}

/* ----------------------------- 6. 文本映射 -------------------------------- */
html[data-theme] .text-white { color: var(--ac-text) !important; }
html[data-theme] .text-gray-100,
html[data-theme] .text-gray-200,
html[data-theme] .text-gray-300 { color: var(--ac-text-soft) !important; }
html[data-theme] .text-gray-400,
html[data-theme] .text-gray-500,
html[data-theme] .text-gray-600 { color: var(--ac-text-muted) !important; }
html[data-theme] .text-gray-700 { color: var(--ac-text-subtle) !important; }

html[data-theme] .text-purple-100,
html[data-theme] .text-purple-200,
html[data-theme] .text-purple-300,
html[data-theme] .text-purple-400,
html[data-theme] .text-purple-500,
html[data-theme] .text-indigo-200,
html[data-theme] .text-indigo-300,
html[data-theme] .text-indigo-400,
html[data-theme] .text-indigo-500,
html[data-theme] .hover\:text-purple-300:hover,
html[data-theme] .hover\:text-purple-400:hover {
    color: var(--ac-accent-soft) !important;
}

html[data-theme] .text-blue-200,
html[data-theme] .text-blue-300,
html[data-theme] .text-blue-400,
html[data-theme] .text-blue-500,
html[data-theme] .text-cyan-200,
html[data-theme] .text-cyan-300,
html[data-theme] .text-cyan-400,
html[data-theme] .hover\:text-blue-300:hover,
html[data-theme] .hover\:text-blue-400:hover {
    color: var(--ac-info-soft) !important;
}

html[data-theme] .text-green-100,
html[data-theme] .text-green-200,
html[data-theme] .text-green-300,
html[data-theme] .text-green-400,
html[data-theme] .text-green-500,
html[data-theme] .text-emerald-400 {
    color: var(--ac-success-soft) !important;
}

html[data-theme] .text-red-100,
html[data-theme] .text-red-200,
html[data-theme] .text-red-300,
html[data-theme] .text-red-400,
html[data-theme] .text-red-500 {
    color: var(--ac-danger-soft) !important;
}

html[data-theme] .text-yellow-100,
html[data-theme] .text-yellow-300,
html[data-theme] .text-yellow-400,
html[data-theme] .text-yellow-500,
html[data-theme] .text-amber-100,
html[data-theme] .text-amber-200,
html[data-theme] .text-amber-300,
html[data-theme] .text-amber-400,
html[data-theme] .text-orange-300 {
    color: var(--ac-warn-soft) !important;
}

/* ----------------------------- 7. 渐变映射（关键升级） ------------------- */
/*
   原来的 from-purple-X to-indigo-X 会因为 tailwind 注入 inline CSS 变量
   而绕过覆盖。这里通过覆盖 background-image 的方式把它们统一替换为
   主题感知的 --ac-accent-grad / --ac-hero-grad。
*/
html[data-theme] .bg-gradient-to-r.from-purple-500,
html[data-theme] .bg-gradient-to-r.from-purple-600,
html[data-theme] .bg-gradient-to-r.from-purple-900,
html[data-theme] .bg-gradient-to-r.from-indigo-900,
html[data-theme] .bg-gradient-to-r.from-violet-500,
html[data-theme] .bg-gradient-to-br.from-purple-500,
html[data-theme] .bg-gradient-to-br.from-purple-600,
html[data-theme] .bg-gradient-to-br.from-purple-900,
html[data-theme] .bg-gradient-to-br.from-purple-900\/70,
html[data-theme] .bg-gradient-to-br.from-purple-900\/80,
html[data-theme] .bg-gradient-to-br.from-emerald-900,
html[data-theme] .bg-gradient-to-br.from-emerald-900\/70,
html[data-theme] .bg-gradient-to-br.from-indigo-900,
html[data-theme] .bg-gradient-to-tr.from-purple-500,
html[data-theme] .bg-gradient-to-tr.from-purple-600 {
    background-image: var(--ac-accent-grad) !important;
    color: var(--ac-text-on-accent) !important;
}

/* 项目封面 / 占位卡片的"低饱和半透明"渐变变成主题感知的柔和渐变 */
html[data-theme] .bg-gradient-to-br.from-purple-900\/70.to-indigo-900\/70,
html[data-theme] .bg-gradient-to-br.from-purple-900\/80.to-indigo-900\/70,
html[data-theme] .bg-gradient-to-br.from-emerald-900\/70.to-indigo-900\/70 {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ac-accent) 32%, var(--ac-surface)) 0%,
        color-mix(in srgb, var(--ac-info) 22%, var(--ac-surface-raised)) 100%
    ) !important;
    color: var(--ac-text) !important;
}

html[data-theme] .hover\:from-purple-500:hover,
html[data-theme] .hover\:from-purple-600:hover {
    background-image: var(--ac-accent-grad-hover) !important;
}

/* hero 容器：dashboard-hero 是页面顶部欢迎条，单独走 hero 渐变 */
html[data-theme] .dashboard-hero {
    background-image: var(--ac-hero-grad) !important;
    color: var(--ac-text-on-accent) !important;
    border-radius: var(--ac-radius-lg) !important;
    box-shadow: var(--ac-elev-2) !important;
}

html[data-theme] .dashboard-hero__overlay {
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ac-accent) 32%, transparent) 0%,
        color-mix(in srgb, var(--ac-accent) 16%, transparent) 45%,
        transparent 100%
    ) !important;
}

/* ----------------------------- 8. 聚焦环 ---------------------------------- */
html[data-theme] .ring-purple-500,
html[data-theme] .focus\:ring-purple-500:focus,
html[data-theme] .focus\:ring-2:focus {
    --tw-ring-color: var(--ac-focus-ring) !important;
    box-shadow: 0 0 0 3px var(--ac-focus-ring) !important;
}

html[data-theme] .focus\:border-purple-500:focus,
html[data-theme] .focus\:border-purple-400:focus {
    border-color: var(--ac-accent) !important;
}

/* ----------------------------- 9. 通用语义组件 ---------------------------- */
html[data-theme] .card {
    background: var(--ac-surface) !important;
    border-color: var(--ac-border-soft) !important;
    color: var(--ac-text) !important;
    border-radius: var(--ac-radius) !important;
    box-shadow: var(--ac-elev-1);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

html[data-theme] .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ac-elev-2);
    border-color: var(--ac-border) !important;
}

html[data-theme] .input {
    background: var(--ac-bg-deep) !important;
    border-color: var(--ac-border) !important;
    color: var(--ac-text) !important;
    border-radius: var(--ac-radius-sm) !important;
}

html[data-theme] .input:focus {
    border-color: var(--ac-accent) !important;
    box-shadow: 0 0 0 3px var(--ac-focus-ring);
}

html[data-theme] .btn-primary {
    background-image: var(--ac-accent-grad) !important;
    color: var(--ac-text-on-accent) !important;
    border-radius: var(--ac-radius-sm) !important;
    box-shadow: var(--ac-accent-glow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

html[data-theme] .btn-primary:hover {
    background-image: var(--ac-accent-grad-hover) !important;
    transform: translateY(-1px);
    filter: brightness(1.04);
}

html[data-theme] .btn-primary:active {
    transform: translateY(0) scale(0.985);
}

html[data-theme] .btn-muted {
    background: var(--ac-surface-raised) !important;
    color: var(--ac-text-soft) !important;
    border-radius: var(--ac-radius-sm) !important;
}

html[data-theme] .btn-muted:hover {
    background: var(--ac-surface-muted) !important;
    color: var(--ac-text) !important;
}

html[data-theme] .nav-active {
    background: var(--ac-accent-faint) !important;
    border-color: var(--ac-accent-soft) !important;
    color: var(--ac-accent-soft) !important;
}

html[data-theme] .nav-idle,
html[data-theme] .table-th {
    color: var(--ac-text-muted) !important;
}

html[data-theme] .table-th,
html[data-theme] .table-td {
    border-color: var(--ac-border-soft) !important;
}

html[data-theme] .table-td { color: var(--ac-text-soft) !important; }

html[data-theme] .nav-btn:hover {
    background-color: var(--ac-accent-faint) !important;
}

html[data-theme] .shot-nav-active,
html[data-theme] .segment-card.is-active {
    border-color: var(--ac-accent-soft) !important;
    background-color: var(--ac-accent-faint) !important;
}

html[data-theme] .selectable-tile.is-selected {
    border-color: var(--ac-success) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac-success) 36%, transparent) !important;
}

/* ----------------------------- 10. 滚动条 --------------------------------- */
html[data-theme] .custom-scrollbar::-webkit-scrollbar-track,
html[data-theme] *::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--ac-bg-deep) 72%, transparent) !important;
}

html[data-theme] .custom-scrollbar::-webkit-scrollbar-thumb,
html[data-theme] *::-webkit-scrollbar-thumb {
    background: var(--ac-surface-muted) !important;
    border-radius: var(--ac-radius-pill);
}

html[data-theme] .custom-scrollbar::-webkit-scrollbar-thumb:hover,
html[data-theme] *::-webkit-scrollbar-thumb:hover {
    background: var(--ac-border-strong) !important;
}

/* ============================================================
   11. 新组件类（页面可直接使用，让设计语言更明确）
   ============================================================ */

/* 通用卡片：自动主题感知 + 抬升 */
.ac-card {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border-soft);
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    box-shadow: var(--ac-elev-1);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.ac-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ac-elev-2);
    border-color: var(--ac-border);
}

.ac-card--flat { box-shadow: none; }
.ac-card--flat:hover { transform: none; box-shadow: var(--ac-elev-1); }

/* 玻璃质感卡片（dark/graphite 表现最佳，mist 也好看） */
.ac-glass {
    background: var(--ac-glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--ac-border-soft);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-elev-2);
}

/* 渐变实心按钮 */
.ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--ac-radius-sm);
    font-weight: 700;
    color: var(--ac-text-on-accent);
    background-image: var(--ac-accent-grad);
    box-shadow: var(--ac-accent-glow);
    cursor: pointer;
    border: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-image 0.18s ease;
}

.ac-btn:hover {
    background-image: var(--ac-accent-grad-hover);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.ac-btn:active { transform: translateY(0) scale(0.985); }

.ac-btn--ghost {
    background-image: none;
    background-color: transparent;
    color: var(--ac-text-soft);
    border: 1px solid var(--ac-border);
    box-shadow: none;
}

.ac-btn--ghost:hover {
    background-color: var(--ac-surface-raised);
    color: var(--ac-text);
    border-color: var(--ac-accent-soft);
}

.ac-btn--danger {
    background-image: linear-gradient(135deg, var(--ac-danger) 0%, var(--ac-danger-soft) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac-danger) 35%, transparent), 0 8px 20px color-mix(in srgb, var(--ac-danger) 25%, transparent);
}

/* 圆形发光小徽章 */
.ac-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--ac-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--ac-accent-faint);
    color: var(--ac-accent-soft);
    border: 1px solid color-mix(in srgb, var(--ac-accent-soft) 35%, transparent);
}

.ac-pill--success {
    background: var(--ac-success-faint);
    color: var(--ac-success-soft);
    border-color: color-mix(in srgb, var(--ac-success-soft) 38%, transparent);
}

.ac-pill--danger {
    background: var(--ac-danger-faint);
    color: var(--ac-danger-soft);
    border-color: color-mix(in srgb, var(--ac-danger-soft) 38%, transparent);
}

.ac-pill--warn {
    background: var(--ac-warn-faint);
    color: var(--ac-warn-soft);
    border-color: color-mix(in srgb, var(--ac-warn-soft) 38%, transparent);
}

.ac-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

/* Logo 徽章：用在导航/页头处，颜色随主题 */
.ac-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ac-text-on-accent);
    background-image: var(--ac-accent-grad);
    box-shadow: var(--ac-accent-glow);
    letter-spacing: -0.02em;
    border-radius: var(--ac-radius-sm);
}

/* 头像：用主题渐变，配合环形高亮边 */
.ac-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--ac-text-on-accent);
    font-weight: 800;
    background-image: var(--ac-accent-grad);
    border: 2px solid transparent;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ac-avatar:hover {
    border-color: var(--ac-accent-soft);
    box-shadow: var(--ac-accent-glow);
}

.ac-avatar--lg {
    width: 6rem;
    height: 6rem;
    font-size: 2rem;
}

/* hero 主体：用在 dashboard 顶部欢迎条 */
.ac-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--ac-radius-lg);
    background-image: var(--ac-hero-grad);
    color: var(--ac-text-on-accent);
    box-shadow: var(--ac-elev-2);
    isolation: isolate;
}

.ac-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(220px 220px at 18% 30%, color-mix(in srgb, var(--ac-accent) 35%, transparent), transparent 70%),
        radial-gradient(280px 280px at 82% 70%, color-mix(in srgb, var(--ac-info) 28%, transparent), transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

.ac-hero > * { position: relative; z-index: 1; }

/* 浮动主题切换 dock —— 把视觉权重压低，避免抢戏 */
.theme-dock {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 24px);
    padding: 8px 10px 8px 12px;
    background: var(--ac-glass-strong);
    border: 1px solid var(--ac-border-soft);
    border-radius: var(--ac-radius-pill);
    box-shadow: var(--ac-elev-2);
    color: var(--ac-text);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.theme-dock__label {
    color: var(--ac-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0 2px 0 4px;
    white-space: nowrap;
    text-transform: uppercase;
}

.theme-dock__options {
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-dock__option {
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ac-border-soft);
    border-radius: var(--ac-radius-pill);
    background: var(--ac-surface);
    color: var(--ac-text);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.theme-dock__option:hover {
    border-color: var(--ac-accent-soft);
    transform: translateY(-1px);
    box-shadow: var(--ac-elev-1);
}

.theme-dock__option.is-active {
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px var(--ac-focus-ring);
}

.theme-dock__option:focus-visible {
    outline: none;
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px var(--ac-focus-ring);
}

.theme-dock__swatches {
    width: 18px;
    height: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.theme-dock__swatches span { min-width: 0; min-height: 0; }

@media (max-width: 640px) {
    .theme-dock { right: 12px; bottom: 12px; padding: 7px; }
    .theme-dock__label { display: none; }
    .theme-dock__option { width: 30px; height: 28px; }
}

/* ============================================================
   12. 主题特定的"质感增强"
   ============================================================ */

/* dark：让卡片在暗背景里有发光感 */
html[data-theme="dark"] .ac-card:hover,
html[data-theme="dark"] .card:hover {
    box-shadow: var(--ac-elev-2), 0 0 24px color-mix(in srgb, var(--ac-accent) 18%, transparent);
}

/* mist：玻璃质感 + 更柔的边 */

/* paper：纸纤微纹 + 温暖描边 */

/* paper：让按钮像盖印章 */

/* graphite：让卡片像金属面板（更硬的边、更精确的圆角） */

/* ============================================================
   13. 修正：禁用纹理过渡时的闪烁 + 减少动画偏好
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html[data-theme] *,
    html[data-theme] *::before,
    html[data-theme] *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* 全局图片不要被纹理层影响 */
html[data-theme] img,
html[data-theme] video,
html[data-theme] canvas { isolation: isolate; }

/* ============================================================
   14. 硬编码 box-shadow 修复（紫光 / 蓝光 → 主题色发光）
   ============================================================ */

/* 紫色光晕：rgba(147,51,234,*) → 主色光晕 */
html[data-theme] [class*="shadow-[0_0_"][class*="rgba(147,51,234"],
html[data-theme] [class*="shadow-[0_0_"][class*="rgba(168,85,247"],
html[data-theme] [class*="shadow-[0_0_"][class*="rgba(79,70,229"] {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ac-accent) 32%, transparent),
        0 6px 22px color-mix(in srgb, var(--ac-accent) 30%, transparent) !important;
}

/* 蓝色光晕：rgba(37,99,235,*) / rgba(59,130,246,*) → 信息色光晕 */
html[data-theme] [class*="shadow-[0_0_"][class*="rgba(37,99,235"],
html[data-theme] [class*="shadow-[0_0_"][class*="rgba(59,130,246"] {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ac-info) 30%, transparent),
        0 6px 20px color-mix(in srgb, var(--ac-info) 26%, transparent) !important;
}

/* ============================================================
   15. 任意值 border-color（border-[#xxx]）覆盖
   ============================================================ */
html[data-theme] .border-\[\#13141c\],
html[data-theme] .border-\[\#101118\],
html[data-theme] .border-\[\#1e202e\],
html[data-theme] .border-\[\#1b1d29\],
html[data-theme] .border-\[\#161824\] {
    border-color: var(--ac-border-soft) !important;
}

/* ============================================================
   16. 模态框 / 浮层底色 —— bg-black/XX 的 modal 背景
   ============================================================ */
html[data-theme] .bg-black\/70,
html[data-theme] .bg-black\/80,
html[data-theme] .bg-black\/90 {
    background-color: color-mix(in srgb, var(--ac-bg-deep) 88%, transparent) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 通用聚焦环（非 Tailwind 类） */
html[data-theme] button:focus-visible,
html[data-theme] a:focus-visible,
html[data-theme] [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ac-focus-ring);
    border-radius: var(--ac-radius-xs);
}

/* 全局 input 普通输入框（非 .input 类）也享受主题聚焦色 */
html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus {
    outline: none;
    border-color: var(--ac-accent) !important;
    box-shadow: 0 0 0 3px var(--ac-focus-ring);
}

/* ============================================================
   17. 移动端兜底层 (≤ 767px)
   --------------------------------------------------------------
   不动 HTML，一次性把全站手机适配的 70% 痛点拍平。
   - padding 大块容器在小屏降档
   - 极小字号 9~11px 一律抬到 12px
   - 圆形图标按钮 ≥ 44×44 满足 iOS HIG
   - 大 modal max-w 在窄屏自动收边
   - 底部固定层加 iOS 安全区
   - dashboard hero 缩 padding
   ============================================================ */
@media (max-width: 767px) {

    /* 1) padding 全局降档 */
    html[data-theme] .p-8  { padding: 1rem !important; }
    html[data-theme] .p-10 { padding: 1.25rem !important; }
    html[data-theme] .p-12 { padding: 1.5rem !important; }
    html[data-theme] .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    html[data-theme] .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    html[data-theme] .px-10 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    html[data-theme] .py-10 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

    /* 2) 极小字号一律 12px 起步 */
    html[data-theme] .text-\[9px\],
    html[data-theme] .text-\[10px\],
    html[data-theme] .text-\[11px\] {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    /* 3) 圆形/方形图标按钮（任务徽章、公告、关闭等）≥ 44×44 */
    html[data-theme] button.rounded-full.w-10.h-10,
    html[data-theme] button.rounded-full.w-9.h-9,
    html[data-theme] button.rounded-full.w-8.h-8 {
        width: 44px !important;
        height: 44px !important;
    }

    /* modal 的右上 × 关闭按钮（常见 text-2xl / text-3xl + leading-none） */
    html[data-theme] button.text-2xl,
    html[data-theme] button.text-3xl {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 4) 大 modal 在窄屏自动收边，留 0.75rem 左右余量 */
    html[data-theme] .max-w-2xl,
    html[data-theme] .max-w-3xl,
    html[data-theme] .max-w-4xl,
    html[data-theme] .max-w-5xl,
    html[data-theme] .max-w-6xl,
    html[data-theme] .max-w-7xl {
        max-width: calc(100vw - 1.5rem) !important;
    }

    /* 5) modal 内部网格在手机端塌成单列：常见 .grid-cols-2/3 + 详情对照表 */
    html[data-theme] .grid.grid-cols-2:not([class*="md:grid-cols"]):not([class*="sm:grid-cols"]),
    html[data-theme] .grid.grid-cols-3:not([class*="md:grid-cols"]):not([class*="sm:grid-cols"]) {
        grid-template-columns: 1fr !important;
    }

    /* 6) 底部浮动 dock / 任务面板加 iOS 小白条安全距 */
    html[data-theme] .theme-dock {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* 7) dashboard hero 视觉重量减半 */
    html[data-theme] .dashboard-hero {
        padding: 1.5rem 1.25rem !important;
        border-radius: var(--ac-radius) !important;
    }
    html[data-theme] .dashboard-hero__content {
        width: 100% !important;
    }
    html[data-theme] .dashboard-hero__title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    html[data-theme] .dashboard-hero__media {
        opacity: 0.18 !important;
        width: 50% !important;
    }
    html[data-theme] .dashboard-hero__button {
        padding: 0.7rem 1.25rem !important;
        font-size: 0.9rem !important;
    }

    /* 8) 表格横滑容器：iOS 惯性滚动 + 首列吸附（不依赖 :has，兼容旧 Safari） */
    html[data-theme] .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* 任意在 overflow-x-auto 里的 <table> 都享受首列吸附 */
    html[data-theme] .overflow-x-auto > table > thead > tr > th:first-child,
    html[data-theme] .overflow-x-auto > table > tbody > tr > th:first-child,
    html[data-theme] .overflow-x-auto > table > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        background: var(--ac-surface) !important;
        z-index: 2;
        box-shadow: 1px 0 0 var(--ac-border-soft);
    }

    /* 表头吸顶（在长表里看着舒服） */
    html[data-theme] .overflow-x-auto > table > thead > tr > th {
        position: sticky;
        top: 0;
        background: var(--ac-bg-soft) !important;
        z-index: 3;
    }
    /* 表头首列要同时吸顶 + 吸左，层级最高 */
    html[data-theme] .overflow-x-auto > table > thead > tr > th:first-child {
        z-index: 4;
        background: var(--ac-bg-soft) !important;
    }

    /* "还能横滑"的视觉提示：容器右侧外阴影 */
    html[data-theme] .overflow-x-auto {
        background:
            linear-gradient(to right, transparent calc(100% - 18px), color-mix(in srgb, var(--ac-bg-deep) 60%, transparent) 100%)
            right center / 18px 100% no-repeat,
            var(--ac-surface);
    }

    /* 9) 输入框最小 16px 防 iOS 自动放大（部分页面已有，此处兜底） */
    html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    html[data-theme] textarea,
    html[data-theme] select {
        font-size: max(16px, 1em);
    }

    /* 10) 长标题 h2/h3 略缩 */
    html[data-theme] .text-3xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    html[data-theme] .text-2xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }

    /* 11) 主题 dock 在小屏紧凑 */
    .theme-dock { padding: 6px 8px; }
    .theme-dock__option { width: 30px; height: 28px; }

    /* 12) 通用 modal 容器：上下挤到顶/底，腾出更多内容空间 */
    html[data-theme] .fixed.inset-0.flex.justify-center.items-center > div {
        margin: 0.75rem;
    }

    /* 13) 卡片/项目网格的 gap 缩小 */
    html[data-theme] .gap-6 { gap: 1rem !important; }
    html[data-theme] .gap-8 { gap: 1.25rem !important; }
}

/* iPhone 横屏狭窄高度的兜底 */
@media (max-height: 480px) and (orientation: landscape) {
    html[data-theme] .dashboard-hero { padding: 1rem 1.25rem !important; }
    html[data-theme] .dashboard-hero__title { font-size: 1.25rem !important; margin-bottom: 0.25rem !important; }
    html[data-theme] .dashboard-hero__copy { font-size: 0.75rem !important; margin-bottom: 0.75rem !important; }
}

/* ==========================================================================
   [UI-FIX 2026-06-19] 主题补丁：原生控件暗色化 / 统一禁用态 / 统一 toast
   ========================================================================== */

/* #2 自动填充 / placeholder / 勾选色 —— 修登录框 autofill 泛白、勾选色脱离主题 */
html[data-theme] input:-webkit-autofill,
html[data-theme] input:-webkit-autofill:hover,
html[data-theme] input:-webkit-autofill:focus,
html[data-theme] textarea:-webkit-autofill,
html[data-theme] select:-webkit-autofill {
    -webkit-text-fill-color: var(--ac-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ac-bg-deep) inset !important;
    box-shadow: 0 0 0 1000px var(--ac-bg-deep) inset !important;
    caret-color: var(--ac-text) !important;
    transition: background-color 9999s ease-in-out 0s;
}
html[data-theme] ::placeholder { color: var(--ac-text-subtle) !important; opacity: 1; }
html[data-theme] input[type="checkbox"],
html[data-theme] input[type="radio"] { accent-color: var(--ac-accent); }

/* #3 统一禁用态 —— 禁用按钮/控件要看得出来被禁用（不再满色发光，避免用户反复点） */
html[data-theme] .btn-primary:disabled,
html[data-theme] .btn-primary[aria-disabled="true"],
html[data-theme] .btn-muted:disabled,
html[data-theme] .ac-btn:disabled,
html[data-theme] button:disabled,
html[data-theme] [disabled] {
    opacity: .5 !important;
    filter: grayscale(.25);
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}
html[data-theme] button:disabled:hover,
html[data-theme] .btn-primary:disabled:hover { transform: none !important; }
html[data-theme] [aria-busy="true"] { pointer-events: none; cursor: progress; }

/* #4 统一 toast —— 供 theme.js 的 showToast 使用（主题感 + role=status/aria-live 可访问） */
.ac-toast-host {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 1400; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; max-width: min(92vw, 460px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-theme] .ac-toast {
    pointer-events: auto;
    padding: 10px 16px; border-radius: var(--ac-radius);
    font-size: 14px; line-height: 1.4; color: var(--ac-text);
    background: var(--ac-surface-raised); border: 1px solid var(--ac-border);
    box-shadow: var(--ac-elev-3);
    display: flex; align-items: center; gap: 8px;
    animation: acToastIn .22s ease both;
}
html[data-theme] .ac-toast::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ac-info); flex: none;
}
html[data-theme] .ac-toast--success::before { background: var(--ac-success); }
html[data-theme] .ac-toast--warn::before { background: var(--ac-warn); }
html[data-theme] .ac-toast--error::before { background: var(--ac-danger); }
html[data-theme] .ac-toast--success { border-color: color-mix(in srgb, var(--ac-success) 45%, var(--ac-border)); }
html[data-theme] .ac-toast--warn { border-color: color-mix(in srgb, var(--ac-warn) 45%, var(--ac-border)); }
html[data-theme] .ac-toast--error { border-color: color-mix(in srgb, var(--ac-danger) 45%, var(--ac-border)); }
@keyframes acToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html[data-theme] .ac-toast { animation: none; } }

/* ====================================================================
   fork 设计语言主题(非换色,各自字体+卡片构造+装饰+材质全变)。新增,
   现有 dark/mist/paper/graphite 不动。终端/极光走深色, 铅排/硬核/软陶浅色。
   ==================================================================== */

/* ========== 终端 · TTY — 全等宽 / 终端窗口卡 / 荧光绿 / 扫描线 ========== */
html[data-theme="terminal"] {
  color-scheme: dark;
  --ac-bg: #07090b; --ac-bg-soft: #0c0e14; --ac-bg-deep: #04050a;
  --ac-surface: #0c0e14; --ac-surface-raised: #11161d; --ac-surface-muted: #161c25;
  --ac-glass: rgba(12,14,20,.72); --ac-glass-strong: rgba(12,14,20,.92);
  --ac-border: #1d2530; --ac-border-soft: #1d2530; --ac-border-strong: #2b3645; --ac-divider: rgba(61,220,132,.12);
  --ac-text: #c8d3c8; --ac-text-soft: #aebbb0; --ac-text-muted: #8fa093; --ac-text-subtle: #5c6b60; --ac-text-on-accent: #07090b;
  --ac-accent: #3ddc84; --ac-accent-hover: #5ef0a0; --ac-accent-soft: #5ef0a0; --ac-accent-faint: rgba(61,220,132,.12);
  --ac-accent-glow: 0 0 0 1px rgba(61,220,132,.4), 0 0 16px rgba(61,220,132,.3);
  --ac-accent-grad: linear-gradient(135deg,#3ddc84,#2bbf6e); --ac-accent-grad-hover: linear-gradient(135deg,#5ef0a0,#3ddc84);
  --ac-hero-grad: linear-gradient(120deg,#0c1a12 0%,#0e2018 50%,#07090b 100%);
  --ac-info: #56b6ff; --ac-success: #3ddc84; --ac-warn: #ffb454; --ac-danger: #ff5f56;
  --ac-radius-xs: 0; --ac-radius-sm: 2px; --ac-radius: 6px; --ac-radius-lg: 8px;
  --ac-elev-1: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.5);
  --ac-elev-2: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.6);
  --ac-elev-3: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 38px rgba(0,0,0,.7);
  --ac-page-pattern: repeating-linear-gradient(0deg, rgba(61,220,132,.03) 0 1px, transparent 1px 3px);
  --ac-page-grain: none; --ac-letter-spacing: 0;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Noto Sans SC', monospace;
}
html[data-theme="terminal"] body { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Noto Sans SC', monospace; }

/* ========== 铅排 · 号外 — 衬线 / 卡=上粗下细黑rule / 黑红印刷 ========== */
html[data-theme="press"] {
  color-scheme: light;
  --ac-bg: #f4efe4; --ac-bg-soft: #efe8d9; --ac-bg-deep: #e8e0cf;
  --ac-surface: #faf6ec; --ac-surface-raised: #fffdf6; --ac-surface-muted: #efe8d9;
  --ac-glass: rgba(250,246,236,.82); --ac-glass-strong: rgba(250,246,236,.96);
  --ac-border: #1a1714; --ac-border-soft: #cabfa9; --ac-border-strong: #1a1714; --ac-divider: rgba(26,23,20,.14);
  --ac-text: #1a1714; --ac-text-soft: #3a342c; --ac-text-muted: #6b6258; --ac-text-subtle: #8a8070; --ac-text-on-accent: #fff;
  --ac-accent: #c0291f; --ac-accent-hover: #97211a; --ac-accent-soft: #d6584f; --ac-accent-faint: rgba(192,41,31,.1);
  --ac-accent-glow: none; --ac-accent-grad: linear-gradient(135deg,#c0291f,#a8241b); --ac-accent-grad-hover: linear-gradient(135deg,#a8241b,#7d1813);
  --ac-hero-grad: linear-gradient(120deg,#1a1714,#3a342c);
  --ac-info: #2b5a8c; --ac-success: #2f6b43; --ac-warn: #b07408; --ac-danger: #c0291f;
  --ac-radius-xs: 0; --ac-radius-sm: 0; --ac-radius: 0; --ac-radius-lg: 0; --ac-radius-pill: 2px;
  --ac-elev-1: none; --ac-elev-2: none; --ac-elev-3: none;
  --ac-page-pattern: none; --ac-page-grain: none; --ac-letter-spacing: 0;
  font-family: 'Songti SC', 'Noto Serif SC', 'STSong', Georgia, 'Times New Roman', serif;
}
html[data-theme="press"] body { font-family: 'Songti SC', 'Noto Serif SC', Georgia, serif; }
html[data-theme="press"] .ac-card { border: none; border-top: 2px solid #1a1714; border-bottom: 1px solid #1a1714; box-shadow: none; }
html[data-theme="press"] .ac-card:hover { border-top-color: #c0291f; box-shadow: none; transform: none; }

/* ========== 硬核 · BRUTAL — 3px黑边 / 硬偏移黑影 / 方格底 / 压缩字 ========== */
html[data-theme="brutal"] {
  color-scheme: light;
  --ac-bg: #ede9dd; --ac-bg-soft: #e4dfd0; --ac-bg-deep: #ddd7c5;
  --ac-surface: #faf6ec; --ac-surface-raised: #ffffff; --ac-surface-muted: #e4dfd0;
  --ac-glass: rgba(250,246,236,.9); --ac-glass-strong: #faf6ec;
  --ac-border: #0a0a0a; --ac-border-soft: #0a0a0a; --ac-border-strong: #0a0a0a; --ac-divider: rgba(10,10,10,.2);
  --ac-text: #0a0a0a; --ac-text-soft: #2a2a2a; --ac-text-muted: #555555; --ac-text-subtle: #777777; --ac-text-on-accent: #fff;
  --ac-accent: #2b5bff; --ac-accent-hover: #1f48d6; --ac-accent-soft: #5e80ff; --ac-accent-faint: rgba(43,91,255,.12);
  --ac-accent-glow: none; --ac-accent-grad: linear-gradient(135deg,#2b5bff,#1f48d6); --ac-accent-grad-hover: linear-gradient(135deg,#1f48d6,#1838b0);
  --ac-hero-grad: linear-gradient(120deg,#ffe600,#ffd000);
  --ac-info: #2b5bff; --ac-success: #00c853; --ac-warn: #ff8a00; --ac-danger: #ff2d2d;
  --ac-radius-xs: 0; --ac-radius-sm: 0; --ac-radius: 0; --ac-radius-lg: 0; --ac-radius-pill: 0;
  --ac-elev-1: 4px 4px 0 0 #0a0a0a; --ac-elev-2: 6px 6px 0 0 #0a0a0a; --ac-elev-3: 8px 8px 0 0 #0a0a0a;
  --ac-page-pattern: linear-gradient(rgba(10,10,10,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,.05) 1px, transparent 1px);
  --ac-page-grain: none; --ac-font-weight-bold: 800;
  font-family: 'Arial Narrow', 'Archivo', 'Helvetica Neue', 'PingFang SC', Arial, sans-serif;
}
html[data-theme="brutal"] body { font-family: 'Arial Narrow', 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
html[data-theme="brutal"] body::before { background-size: 24px 24px; }
html[data-theme="brutal"] .ac-card { border: 3px solid #0a0a0a; box-shadow: 6px 6px 0 0 #0a0a0a; }
html[data-theme="brutal"] .ac-card:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 0 #0a0a0a; }
html[data-theme="brutal"] .ac-btn, html[data-theme="brutal"] .btn-primary { border: 2px solid #0a0a0a !important; box-shadow: 3px 3px 0 0 #0a0a0a; border-radius: 0 !important; }

/* ========== 软陶 · Soft Clay — 同色 / 凸起凹陷柔影 / 无边圆体 ========== */
html[data-theme="clay"] {
  color-scheme: light;
  --ac-bg: #e6e9ef; --ac-bg-soft: #e6e9ef; --ac-bg-deep: #dde1ea;
  --ac-surface: #e6e9ef; --ac-surface-raised: #e6e9ef; --ac-surface-muted: #e6e9ef;
  --ac-glass: rgba(230,233,239,.7); --ac-glass-strong: rgba(230,233,239,.9);
  --ac-border: transparent; --ac-border-soft: transparent; --ac-border-strong: #d3d7e1; --ac-divider: rgba(150,160,180,.2);
  --ac-text: #41475a; --ac-text-soft: #545b70; --ac-text-muted: #5f677e; --ac-text-subtle: #848c9f; --ac-text-on-accent: #fff;
  --ac-accent: #6d7cff; --ac-accent-hover: #5563e8; --ac-accent-soft: #8b96ff; --ac-accent-faint: rgba(109,124,255,.14);
  --ac-accent-glow: none; --ac-accent-grad: linear-gradient(135deg,#6d7cff,#5563e8); --ac-accent-grad-hover: linear-gradient(135deg,#8b96ff,#6d7cff);
  --ac-hero-grad: linear-gradient(120deg,#eef1f6,#dde1ea);
  --ac-info: #6d7cff; --ac-success: #5fb39a; --ac-warn: #d9a066; --ac-danger: #e08585;
  --ac-radius-xs: 10px; --ac-radius-sm: 14px; --ac-radius: 20px; --ac-radius-lg: 26px;
  --ac-elev-1: -6px -6px 12px #ffffff, 6px 6px 14px #c5cad6;
  --ac-elev-2: -8px -8px 16px #ffffff, 8px 8px 18px #c5cad6;
  --ac-elev-3: -10px -10px 20px #ffffff, 10px 10px 22px #c5cad6;
  --ac-page-pattern: radial-gradient(120% 90% at 25% 0%, #eef1f6, #e2e5ec); --ac-page-grain: none;
  font-family: 'Nunito', 'Quicksand', 'PingFang SC', system-ui, sans-serif;
}
html[data-theme="clay"] body { font-family: 'Nunito','Quicksand','PingFang SC',system-ui,sans-serif; }
html[data-theme="clay"] .ac-card { border: none; box-shadow: -7px -7px 14px #ffffff, 7px 7px 16px #c5cad6; }
html[data-theme="clay"] .ac-card:hover { box-shadow: -9px -9px 18px #ffffff, 9px 9px 20px #c5cad6; transform: none; }

/* ========== 极光 · Aurora Glass — 流动mesh / 磨砂玻璃卡 / 霓虹 ========== */
html[data-theme="aurora"] {
  color-scheme: dark;
  --ac-bg: #0b1020; --ac-bg-soft: #11162b; --ac-bg-deep: #070a16;
  --ac-surface: rgba(255,255,255,.08); --ac-surface-raised: rgba(255,255,255,.12); --ac-surface-muted: rgba(255,255,255,.05);
  --ac-glass: rgba(255,255,255,.1); --ac-glass-strong: rgba(255,255,255,.18);
  --ac-border: rgba(255,255,255,.18); --ac-border-soft: rgba(255,255,255,.14); --ac-border-strong: rgba(255,255,255,.3); --ac-divider: rgba(255,255,255,.1);
  --ac-text: #f4f6ff; --ac-text-soft: rgba(244,246,255,.85); --ac-text-muted: rgba(244,246,255,.6); --ac-text-subtle: rgba(244,246,255,.42); --ac-text-on-accent: #fff;
  --ac-accent: #7c6ff0; --ac-accent-hover: #6354e8; --ac-accent-soft: #a99bff; --ac-accent-faint: rgba(124,111,240,.2);
  --ac-accent-glow: 0 0 0 1px rgba(124,111,240,.4), 0 0 22px rgba(124,111,240,.4);
  --ac-accent-grad: linear-gradient(135deg,#7c6ff0,#ec4899); --ac-accent-grad-hover: linear-gradient(135deg,#8b7bff,#f472b6);
  --ac-hero-grad: linear-gradient(120deg,#5b8def,#8b5cf6 50%,#ec4899);
  --ac-info: #38bdf8; --ac-success: #34d399; --ac-warn: #fbbf24; --ac-danger: #fb7185;
  --ac-radius-xs: 10px; --ac-radius-sm: 14px; --ac-radius: 22px; --ac-radius-lg: 28px;
  --ac-elev-1: 0 8px 32px rgba(20,16,60,.3), inset 0 1px 0 rgba(255,255,255,.25);
  --ac-elev-2: 0 12px 40px rgba(20,16,60,.4), inset 0 1px 0 rgba(255,255,255,.3);
  --ac-elev-3: 0 18px 50px rgba(20,16,60,.5), inset 0 1px 0 rgba(255,255,255,.35);
  --ac-page-pattern:
    radial-gradient(60% 60% at 15% 8%, rgba(91,141,239,.55), transparent 60%),
    radial-gradient(55% 55% at 88% 14%, rgba(139,92,246,.5), transparent 60%),
    radial-gradient(62% 62% at 78% 92%, rgba(236,72,153,.42), transparent 60%),
    radial-gradient(52% 52% at 16% 88%, rgba(34,211,238,.4), transparent 60%);
  --ac-page-grain: none;
  font-family: -apple-system, 'SF Pro Display', 'PingFang SC', 'Inter', system-ui, sans-serif;
}
html[data-theme="aurora"] .ac-card { backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }

/* ====================================================================
   设计语言主题的 dashboard-hero 修正:
   基础 .dashboard-hero 用 --ac-text-on-accent 文字 + --ac-accent 32% overlay,
   对浅底(brutal黄/clay浅)和暗底(terminal/press)会出现隐形或刺眼。逐套校正。
   ==================================================================== */

/* 终端: hero=暗终端窗口, 浅绿字, overlay压到很弱 + 绿描边 */
html[data-theme="terminal"] .dashboard-hero {
  color: #d8f5e5 !important; border: 1px solid #1d3a2a !important;
}
html[data-theme="terminal"] .dashboard-hero__overlay {
  background-image: linear-gradient(90deg, rgba(61,220,132,.12), transparent 72%) !important;
}

/* 铅排: hero=深墨条, 米白衬线字, overlay弱红(报头感) */
html[data-theme="press"] .dashboard-hero {
  color: #faf6ec !important;
}
html[data-theme="press"] .dashboard-hero__overlay {
  background-image: linear-gradient(90deg, rgba(192,41,31,.28), transparent 72%) !important;
}

/* 硬核: hero=纯荧光黄, 黑字, 无overlay, 3px黑边+硬投影 */
html[data-theme="brutal"] .dashboard-hero {
  color: #0a0a0a !important; border: 3px solid #0a0a0a !important;
  box-shadow: 8px 8px 0 0 #0a0a0a !important; border-radius: 0 !important;
}
html[data-theme="brutal"] .dashboard-hero__overlay { background-image: none !important; }
html[data-theme="brutal"] .dashboard-hero__button {
  background: #0a0a0a !important; color: #ffe600 !important;
  border: 2px solid #0a0a0a !important; box-shadow: 4px 4px 0 0 rgba(0,0,0,.35) !important; border-radius: 0 !important;
}

/* 软陶: hero=浅同色凸起, 深字, 无overlay, 神拟物柔影 */
html[data-theme="clay"] .dashboard-hero {
  color: #3a4056 !important;
  box-shadow: -8px -8px 16px #ffffff, 8px 8px 18px #c5cad6 !important;
}
html[data-theme="clay"] .dashboard-hero__overlay {
  background-image: radial-gradient(120% 140% at 18% 0%, rgba(109,124,255,.16), transparent 60%) !important;
}
html[data-theme="clay"] .dashboard-hero__button {
  background: var(--ac-accent) !important; color: #fff !important;
  box-shadow: -3px -3px 7px rgba(255,255,255,.6), 4px 4px 9px rgba(80,90,140,.4) !important;
}

/* 极光: hero=鲜活极光渐变, 白字(已对), overlay保留弱玻璃高光 */
html[data-theme="aurora"] .dashboard-hero {
  color: #ffffff !important; border: 1px solid rgba(255,255,255,.22) !important;
}
html[data-theme="aurora"] .dashboard-hero__overlay {
  background-image: linear-gradient(90deg, rgba(255,255,255,.16), transparent 60%) !important;
}

/* hero 背景: 必须用 .dashboard-hero.bg-gradient-to-r (0,3,1) 才能盖过
   .bg-gradient-to-r.from-indigo-900 的 accent-grad 重映射, 给每套专属 hero 底 */
html[data-theme="terminal"] .dashboard-hero.bg-gradient-to-r { background-image: linear-gradient(120deg,#0c1a12 0%,#0e2018 55%,#07090b 100%) !important; }
html[data-theme="press"]    .dashboard-hero.bg-gradient-to-r { background-image: linear-gradient(120deg,#1a1714,#3a342c) !important; }
html[data-theme="brutal"]   .dashboard-hero.bg-gradient-to-r { background-image: linear-gradient(120deg,#ffe600,#ffd400) !important; }
html[data-theme="clay"]     .dashboard-hero.bg-gradient-to-r { background-image: linear-gradient(120deg,#eef1f6,#dde1ea) !important; }
html[data-theme="aurora"]   .dashboard-hero.bg-gradient-to-r { background-image: linear-gradient(120deg,#5b8def,#8b5cf6 50%,#ec4899) !important; }

/* overlay 同样带 .bg-gradient-to-r.from-indigo-900 会被重映射成亮 accent-grad,
   必须用 .dashboard-hero__overlay.bg-gradient-to-r (0,3,1) 才能压住 */
html[data-theme="terminal"] .dashboard-hero__overlay.bg-gradient-to-r { background-image: linear-gradient(90deg, rgba(61,220,132,.10), transparent 70%) !important; }
html[data-theme="press"]    .dashboard-hero__overlay.bg-gradient-to-r { background-image: linear-gradient(90deg, rgba(192,41,31,.26), transparent 72%) !important; }
html[data-theme="brutal"]   .dashboard-hero__overlay.bg-gradient-to-r { background-image: none !important; }
html[data-theme="clay"]     .dashboard-hero__overlay.bg-gradient-to-r { background-image: radial-gradient(120% 140% at 18% 0%, rgba(109,124,255,.14), transparent 60%) !important; }
html[data-theme="aurora"]   .dashboard-hero__overlay.bg-gradient-to-r { background-image: linear-gradient(90deg, rgba(255,255,255,.14), transparent 60%) !important; }

/* hero 文字色: 700-716 的 .bg-gradient-to-r.from-indigo-900 重映射块(0,3,1)同时把
   color 设成了 --ac-text-on-accent, 必须用 .dashboard-hero.bg-gradient-to-r(0,3,1)+靠后 才压得住,
   标题/副文案无自身 color 会继承此处 */
html[data-theme="terminal"] .dashboard-hero.bg-gradient-to-r { color: #d8f5e5 !important; }
html[data-theme="press"]    .dashboard-hero.bg-gradient-to-r { color: #faf6ec !important; }
html[data-theme="brutal"]   .dashboard-hero.bg-gradient-to-r { color: #0a0a0a !important; }
html[data-theme="clay"]     .dashboard-hero.bg-gradient-to-r { color: #3a4056 !important; }
html[data-theme="aurora"]   .dashboard-hero.bg-gradient-to-r { color: #ffffff !important; }

/* ===========================================================================
   10. 缺口补全 remap (168 类) — 对 §3~§9 现有 remap 的"补全",不与之重复
   规则: 全部 html[data-theme] 前缀 + !important; 媒体真黑/遮罩/scrim 走特殊豁免
   现有已覆盖(本块不重复): bg-[#hex]暗底系/bg-gray-600~900/bg-black\/30~60/
   bg-white\/5~20/text-white/text-gray-100~700/purple/indigo 文字与 bg/边框
   =========================================================================== */

/* --------------------------------------------------------------------------
   10.1 文本映射补全 — 语义文字一律走基色 -soft(主题感知,保证对比)
   teal/sky/cyan → info; emerald → success; rose → danger; fuchsia/pink → accent;
   amber(含 /NN) → warn; 中性补 gray-800/900 → subtle
   -------------------------------------------------------------------------- */
html[data-theme] .text-teal-200,
html[data-theme] .text-teal-300,
html[data-theme] .text-sky-300 {
    color: var(--ac-info-soft) !important;
}
html[data-theme] .text-emerald-200,
html[data-theme] .text-emerald-300 {
    color: var(--ac-success-soft) !important;
}
html[data-theme] .text-rose-200,
html[data-theme] .text-rose-300,
html[data-theme] .text-rose-400 {
    color: var(--ac-danger-soft) !important;
}
html[data-theme] .text-fuchsia-300,
html[data-theme] .text-fuchsia-400,
html[data-theme] .text-pink-300 {
    color: var(--ac-accent-soft) !important;
}
html[data-theme] .text-amber-500,
html[data-theme] .text-amber-50\/90,
html[data-theme] .text-amber-100\/80,
html[data-theme] .text-amber-100\/90,
html[data-theme] .text-amber-300\/80 {
    color: var(--ac-warn-soft) !important;
}
html[data-theme] .text-purple-100\/90 {
    color: var(--ac-accent-soft) !important;
}
/* 彩色"新功能"卡正文 X-100/70 浅 pastel → 对应 -soft(随主题翻深/浅) */
html[data-theme] .text-emerald-100\/70 { color: var(--ac-success-soft) !important; }
html[data-theme] .text-teal-100\/70    { color: var(--ac-info-soft) !important; }
html[data-theme] .text-pink-100\/70    { color: var(--ac-accent-soft) !important; }
/* 白底徽章里的深主色字 → 走 accent-soft 保持随主题 */
html[data-theme] .text-purple-700      { color: var(--ac-accent-soft) !important; }

/* --------------------------------------------------------------------------
   10.2 背景映射补全
   -------------------------------------------------------------------------- */

/* (a) 中性背景剩余档: gray-500 → surface-muted; gray-700/20·600/25·900/30 半透明 */
html[data-theme] .bg-gray-500       { background-color: var(--ac-surface-muted) !important; }
html[data-theme] .bg-gray-600\/25,
html[data-theme] .bg-gray-500\/15,
html[data-theme] .bg-gray-700\/20,
html[data-theme] .bg-gray-900\/30 {
    background-color: color-mix(in srgb, var(--ac-surface-muted) 60%, transparent) !important;
}

/* (b) bg-black/NN 遮罩剩余档(现有仅 /30~/60) — 半透明黑随 bg-deep,保留压暗
   注意: 真正全屏看图/scrim 用下方 §10.6 专门豁免覆盖 */
html[data-theme] .bg-black\/20 { background-color: color-mix(in srgb, var(--ac-bg-deep) 35%, transparent) !important; }
html[data-theme] .bg-black\/45 { background-color: color-mix(in srgb, var(--ac-bg-deep) 70%, transparent) !important; }
html[data-theme] .bg-black\/55 { background-color: color-mix(in srgb, var(--ac-bg-deep) 78%, transparent) !important; }
html[data-theme] .bg-black\/75 { background-color: color-mix(in srgb, var(--ac-bg-deep) 90%, transparent) !important; }
html[data-theme] .bg-black\/85 { background-color: color-mix(in srgb, var(--ac-bg-deep) 92%, transparent) !important; }
html[data-theme] .bg-black\/95 { background-color: color-mix(in srgb, var(--ac-bg-deep) 96%, transparent) !important; }

/* (c) 任意值卡片 hex 补全: #181a25 是卡片 → surface; #1b1d29/1e202e 半透明 → surface */
html[data-theme] .bg-\[\#181a25\] { background-color: var(--ac-surface) !important; }
html[data-theme] .bg-\[\#1b1d29\]\/90,
html[data-theme] .bg-\[\#1e202e\]\/95 {
    background-color: color-mix(in srgb, var(--ac-surface) 90%, transparent) !important;
}
html[data-theme] .bg-\[\#1e202e\]\/60 {
    background-color: color-mix(in srgb, var(--ac-surface) 85%, transparent) !important;
}
/* hover hex(现有静态 hex 已映射,但 hover: 变体未覆盖,浅主题悬停会跳回深底) */
html[data-theme] .hover\:bg-\[\#2e3346\]:hover { background-color: var(--ac-surface-raised) !important; }

/* (d) 语义实心底剩余: blue-400/purple-400/pink-600/amber-300 */
html[data-theme] .bg-blue-400 { background-color: var(--ac-info) !important; color: var(--ac-text-on-accent) !important; }
html[data-theme] .bg-purple-400 { background-color: var(--ac-accent) !important; color: var(--ac-text-on-accent) !important; }
html[data-theme] .bg-pink-600 { background-color: var(--ac-accent) !important; color: var(--ac-text-on-accent) !important; }
html[data-theme] .bg-amber-300 { background-color: var(--ac-warn) !important; color: #fff !important; }

/* (e) 语义柔底(带 /NN) → 对应 -faint + -soft 文字(主题感知浅彩底+深彩字) */
/* success: green / emerald / teal */
html[data-theme] .bg-emerald-500\/10,
html[data-theme] .bg-emerald-500\/15,
html[data-theme] .bg-emerald-500\/20,
html[data-theme] .bg-teal-500\/15,
html[data-theme] .bg-teal-500\/20,
html[data-theme] .bg-teal-700\/40,
html[data-theme] .bg-teal-700\/50,
html[data-theme] .bg-green-600\/40,
html[data-theme] .bg-green-950\/30 {
    background-color: var(--ac-success-faint) !important;
    color: var(--ac-success-soft) !important;
}
/* danger: red / rose */
html[data-theme] .bg-red-500\/15,
html[data-theme] .bg-red-900\/25,
html[data-theme] .bg-rose-500\/10 {
    background-color: var(--ac-danger-faint) !important;
    color: var(--ac-danger-soft) !important;
}
/* warn: amber / yellow */
html[data-theme] .bg-amber-500\/15,
html[data-theme] .bg-amber-700\/40,
html[data-theme] .bg-amber-900\/10,
html[data-theme] .bg-amber-900\/20,
html[data-theme] .bg-amber-900\/30 {
    background-color: var(--ac-warn-faint) !important;
    color: var(--ac-warn-soft) !important;
}
/* info: blue / sky / cyan */
html[data-theme] .bg-cyan-500\/15,
html[data-theme] .bg-cyan-400\/10,
html[data-theme] .bg-blue-950\/30,
html[data-theme] .bg-indigo-700\/50 {
    background-color: var(--ac-info-faint) !important;
    color: var(--ac-info-soft) !important;
}
/* accent: purple / pink / fuchsia / violet */
html[data-theme] .bg-pink-500\/20,
html[data-theme] .bg-pink-700\/40,
html[data-theme] .bg-purple-700\/40,
html[data-theme] .bg-purple-700\/50 {
    background-color: var(--ac-accent-faint) !important;
    color: var(--ac-accent-soft) !important;
}

/* --------------------------------------------------------------------------
   10.3 边框映射补全
   中性 → border-soft; 语义 border-X-* → color-mix(语义 55%, transparent)
   -------------------------------------------------------------------------- */
/* 中性边框剩余 */
html[data-theme] .border-gray-800\/80,
html[data-theme] .border-gray-700\/50,
html[data-theme] .divide-gray-800 {
    border-color: var(--ac-border-soft) !important;
}
html[data-theme] .divide-gray-800 > * + * { border-color: var(--ac-border-soft) !important; }

/* 语义边框: success (green/emerald/teal) */
html[data-theme] .border-emerald-700\/40,
html[data-theme] .border-emerald-500\/30,
html[data-theme] .border-green-700\/60,
html[data-theme] .border-green-800\/40,
html[data-theme] .border-green-900\/60,
html[data-theme] .border-green-400\/30,
html[data-theme] .border-green-500\/40,
html[data-theme] .border-green-500\/60,
html[data-theme] .border-green-600\/60,
html[data-theme] .border-teal-500,
html[data-theme] .border-teal-600,
html[data-theme] .border-teal-500\/30,
html[data-theme] .border-teal-700\/40,
html[data-theme] .border-teal-700\/50 {
    border-color: color-mix(in srgb, var(--ac-success) 55%, transparent) !important;
}
/* 语义边框: danger (red/rose) */
html[data-theme] .border-red-700\/60,
html[data-theme] .border-red-800\/50,
html[data-theme] .border-red-900\/60,
html[data-theme] .border-red-500\/60,
html[data-theme] .border-red-400\/30,
html[data-theme] .border-rose-500,
html[data-theme] .border-rose-500\/30,
html[data-theme] .border-rose-500\/50 {
    border-color: color-mix(in srgb, var(--ac-danger) 55%, transparent) !important;
}
/* 语义边框: warn (amber/yellow) */
html[data-theme] .border-amber-400,
html[data-theme] .border-amber-500,
html[data-theme] .border-amber-700,
html[data-theme] .border-amber-500\/20,
html[data-theme] .border-amber-500\/40,
html[data-theme] .border-amber-700\/40,
html[data-theme] .border-amber-700\/50,
html[data-theme] .border-yellow-800\/40,
html[data-theme] .border-yellow-500\/60 {
    border-color: color-mix(in srgb, var(--ac-warn) 55%, transparent) !important;
}
/* 语义边框: info (blue/sky/cyan/indigo) */
html[data-theme] .border-blue-700\/40,
html[data-theme] .border-blue-700\/60,
html[data-theme] .border-blue-600\/60,
html[data-theme] .border-blue-500\/30,
html[data-theme] .border-blue-500\/40,
html[data-theme] .border-sky-700\/40,
html[data-theme] .border-cyan-400\/30,
html[data-theme] .border-cyan-500\/30,
html[data-theme] .border-indigo-700\/50 {
    border-color: color-mix(in srgb, var(--ac-info) 55%, transparent) !important;
}
/* 语义边框: accent (purple/pink/fuchsia) */
html[data-theme] .border-purple-900\/50,
html[data-theme] .border-purple-700\/50,
html[data-theme] .border-pink-700\/40,
html[data-theme] .border-pink-700\/50,
html[data-theme] .border-pink-500\/30,
html[data-theme] .border-fuchsia-500\/30 {
    border-color: color-mix(in srgb, var(--ac-accent) 55%, transparent) !important;
}

/* --------------------------------------------------------------------------
   10.4 渐变端点补全 — Tailwind 用 --tw-gradient-from/via/to 实现,必须覆写变量
   from/to-(purple|violet|indigo|blue) → accent 系
   from/to-(green|emerald|teal) → success 系; (rose|red) → danger; amber → warn
   from/to-black → bg-deep; from/to-gray → surface 系
   -------------------------------------------------------------------------- */
/* --- from-* (accent) --- */
html[data-theme] .from-blue-500,
html[data-theme] .from-blue-600,
html[data-theme] .from-purple-900\/40 {
    --tw-gradient-from: var(--ac-accent) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (success) --- */
html[data-theme] .from-green-500,
html[data-theme] .from-green-600,
html[data-theme] .from-teal-500,
html[data-theme] .from-teal-600,
html[data-theme] .from-emerald-900\/30,
html[data-theme] .from-emerald-900\/50,
html[data-theme] .from-teal-900\/50,
html[data-theme] .from-teal-900\/70 {
    --tw-gradient-from: var(--ac-success) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (danger) --- */
html[data-theme] .from-rose-500,
html[data-theme] .from-rose-600,
html[data-theme] .from-pink-900\/50,
html[data-theme] .from-pink-900\/70 {
    --tw-gradient-from: var(--ac-danger) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (warn) --- */
html[data-theme] .from-amber-900\/30 {
    --tw-gradient-from: var(--ac-warn) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (info) --- */
html[data-theme] .from-sky-900\/30 {
    --tw-gradient-from: var(--ac-info) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (accent: fuchsia) --- */
html[data-theme] .from-fuchsia-500,
html[data-theme] .from-fuchsia-600 {
    --tw-gradient-from: var(--ac-accent) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (gray → surface) --- */
html[data-theme] .from-gray-600 {
    --tw-gradient-from: var(--ac-surface-muted) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* --- from-* (black → bg-deep, 含半透明 caption 渐变端) --- */
html[data-theme] .from-black\/50 { --tw-gradient-from: color-mix(in srgb, var(--ac-bg-deep) 75%, transparent) var(--tw-gradient-from-position) !important; }
html[data-theme] .from-black\/80 { --tw-gradient-from: color-mix(in srgb, var(--ac-bg-deep) 90%, transparent) var(--tw-gradient-from-position) !important; }
html[data-theme] .from-black\/90 { --tw-gradient-from: color-mix(in srgb, var(--ac-bg-deep) 94%, transparent) var(--tw-gradient-from-position) !important; }
/* --- from-* 任意值半透明卡渐变端 #1e202e → surface --- */
html[data-theme] .from-\[\#1e202e\]\/60 { --tw-gradient-from: color-mix(in srgb, var(--ac-surface) 60%, transparent) var(--tw-gradient-from-position) !important; }
html[data-theme] .from-\[\#1e202e\]\/70 { --tw-gradient-from: color-mix(in srgb, var(--ac-surface) 70%, transparent) var(--tw-gradient-from-position) !important; }

/* --- to-* (accent: indigo/purple/blue/pink) --- */
html[data-theme] .to-indigo-500,
html[data-theme] .to-indigo-600,
html[data-theme] .to-purple-500,
html[data-theme] .to-purple-900,
html[data-theme] .to-sky-400,
html[data-theme] .to-indigo-900\/30 {
    --tw-gradient-to: var(--ac-accent-hover) var(--tw-gradient-to-position) !important;
}
html[data-theme] .to-pink-600,
html[data-theme] .to-fuchsia-500,
html[data-theme] .to-fuchsia-600 {
    --tw-gradient-to: var(--ac-accent-hover) var(--tw-gradient-to-position) !important;
}
/* --- to-* (success: emerald/teal/green) --- */
html[data-theme] .to-emerald-400,
html[data-theme] .to-emerald-500,
html[data-theme] .to-emerald-600,
html[data-theme] .to-teal-900\/40,
html[data-theme] .to-teal-900\/60,
html[data-theme] .to-green-900\/20 {
    --tw-gradient-to: color-mix(in srgb, var(--ac-success) 80%, var(--ac-surface)) var(--tw-gradient-to-position) !important;
}
/* --- to-* (danger: rose) --- */
html[data-theme] .to-rose-900\/40,
html[data-theme] .to-rose-900\/60 {
    --tw-gradient-to: color-mix(in srgb, var(--ac-danger) 80%, var(--ac-surface)) var(--tw-gradient-to-position) !important;
}
/* --- to-* (warn: orange) --- */
html[data-theme] .to-orange-500,
html[data-theme] .to-orange-900\/20 {
    --tw-gradient-to: color-mix(in srgb, var(--ac-warn) 85%, var(--ac-surface)) var(--tw-gradient-to-position) !important;
}
/* --- to-* (info: sky/cyan) --- */
html[data-theme] .to-sky-900\/40,
html[data-theme] .to-sky-900\/60,
html[data-theme] .to-cyan-900\/20 {
    --tw-gradient-to: color-mix(in srgb, var(--ac-info) 80%, var(--ac-surface)) var(--tw-gradient-to-position) !important;
}
/* --- to-* (gray → surface) --- */
html[data-theme] .to-gray-500 {
    --tw-gradient-to: var(--ac-surface-muted) var(--tw-gradient-to-position) !important;
}
/* --- to-* (black → bg-deep, 含 caption to-black/10) --- */
html[data-theme] .to-black\/10 { --tw-gradient-to: color-mix(in srgb, var(--ac-bg-deep) 16%, transparent) var(--tw-gradient-to-position) !important; }

/* --- via-* --- */
html[data-theme] .via-purple-900\/80 {
    --tw-gradient-via: color-mix(in srgb, var(--ac-accent) 80%, transparent) var(--tw-gradient-via-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}
html[data-theme] .via-fuchsia-500 {
    --tw-gradient-via: var(--ac-accent) var(--tw-gradient-via-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}
html[data-theme] .via-cyan-400 {
    --tw-gradient-via: var(--ac-info) var(--tw-gradient-via-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}
/* via-black/40 (caption 渐变中段) → bg-deep 半透明, 保持暗淡过渡 */
html[data-theme] .via-black\/40 {
    --tw-gradient-via: color-mix(in srgb, var(--ac-bg-deep) 60%, transparent) var(--tw-gradient-via-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

/* --------------------------------------------------------------------------
   10.5 聚焦环补全
   -------------------------------------------------------------------------- */
html[data-theme] .ring-purple-500\/60 {
    --tw-ring-color: var(--ac-focus-ring) !important;
    box-shadow: 0 0 0 3px var(--ac-focus-ring) !important;
}

/* ===========================================================================
   10.6 特殊组件 — "必须保持深色的媒体帧 / 灯箱 / scrim" 豁免, 别 remap 成浅色
   =========================================================================== */

/* (A) 媒体帧 letterbox: 裸 .bg-black(无斜杠/无任意值) 永远真黑 —— 钉死, 防误伤
   适用 object-cover/contain 的封面/分镜首帧/视频播放器/资产缩略图/拖拽定位框 */
html[data-theme] .bg-black:not([class*="\/"]):not([class*="\["]) {
    background-color: #000 !important;
}

/* (A2) 媒体帧内部的占位文字 / 角标 —— 帧恒黑, 故强制浅字, 不跟主题翻深
   覆盖: "未设尾帧/未渲染视频/等待合成" 占位 + 首帧/尾帧/视频 角标 */
html[data-theme] .bg-black:not([class*="\/"]) .text-gray-500,
html[data-theme] .bg-black:not([class*="\/"]) .text-gray-600,
html[data-theme] .bg-black:not([class*="\/"]) .text-gray-700,
html[data-theme] .bg-black:not([class*="\/"]) [id$="Placeholder"],
html[data-theme] .bg-black:not([class*="\/"]) [id$="placeholder"] {
    color: rgba(255, 255, 255, 0.72) !important;
}
/* 帧内彩色角标(text-X-200/300 over bg-black/70): 强制浅字 + 暗半透明底,不翻浅 */
html[data-theme] .bg-black:not([class*="\/"]) .bg-black\/70 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}
html[data-theme] .bg-black:not([class*="\/"]) .text-purple-200,
html[data-theme] .bg-black:not([class*="\/"]) .text-indigo-200,
html[data-theme] .bg-black:not([class*="\/"]) .text-green-200,
html[data-theme] .bg-black:not([class*="\/"]) .text-emerald-200,
html[data-theme] .bg-black:not([class*="\/"]) .text-teal-200 {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* (B) 全屏看图灯箱 / 模态遮罩 scrim —— 必须保持真实暗化, 浅主题不可洗成奶白
   用固定半透明真黑覆盖 §10.2 的 bg-deep 映射(这些 id 是"看图/压暗"容器) */
html[data-theme] #imagePreviewModal,
html[data-theme] #avatarPositionModal,
html[data-theme] #imagePreviewModalImg,
html[data-theme] .ac-lightbox-scrim {
    background-color: rgba(0, 0, 0, 0.92) !important;
}
/* 灯箱关闭按钮: 恒浅, 别在浅主题翻深而隐于黑底 */
html[data-theme] #imagePreviewModal .text-gray-400,
html[data-theme] #imagePreviewModal .hover\:text-white:hover {
    color: #e5e7eb !important;
}

/* (C) 媒体 caption 渐变上的标题: text-white 在暗渐变上需恒浅(否则深字压暗底) */
html[data-theme] .from-black\/90 .text-white,
html[data-theme] .from-black\/80 .text-white,
html[data-theme] .via-black\/40 .text-white,
html[data-theme] .ac-media-caption {
    color: #ffffff !important;
}

/* (D) 媒体帧专用语义类(供页面显式钉死真黑用, 防日后误加 remap) */
html[data-theme] .ac-media-frame { background: #000 !important; }
html[data-theme] .ac-media-frame .ac-media-chip,
html[data-theme] .ac-media-frame .ac-media-label {
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ===========================================================================
   10.7 实心语义底 + text-white 优先级修复
   §6 的 .text-white{color:--ac-text} 因源序靠后会压过实心底设的 text-on-accent,
   导致浅主题下 CTA 字翻深. 这里用更高特异度(双类)把 on-accent 抢回来.
   =========================================================================== */
html[data-theme] .bg-purple-500.text-white,
html[data-theme] .bg-purple-600.text-white,
html[data-theme] .bg-purple-700.text-white,
html[data-theme] .bg-indigo-600.text-white,
html[data-theme] .bg-blue-500.text-white,
html[data-theme] .bg-blue-600.text-white,
html[data-theme] .bg-blue-700.text-white,
html[data-theme] .bg-green-600.text-white,
html[data-theme] .bg-emerald-600.text-white,
html[data-theme] .bg-pink-600.text-white,
html[data-theme] .bg-purple-400.text-white,
html[data-theme] .bg-blue-400.text-white {
    color: var(--ac-text-on-accent) !important;
}
/* 实心 danger/warn 底配白字始终成立(它们底色饱和深),保持纯白 */
html[data-theme] .bg-red-500.text-white,
html[data-theme] .bg-red-600.text-white,
html[data-theme] .bg-rose-600.text-white,
html[data-theme] .bg-amber-500.text-white,
html[data-theme] .bg-amber-600.text-white,
html[data-theme] .bg-yellow-600.text-white {
    color: #fff !important;
}
/* Toast: ${color} text-white 同理, 渐变按钮 group-hover/hover text-white 不该翻深 */
html[data-theme] .bg-gradient-to-r.text-white,
html[data-theme] .bg-gradient-to-br.text-white,
html[data-theme] .bg-gradient-to-tr.text-white {
    color: var(--ac-text-on-accent) !important;
}

/* group-hover:text-white / hover:text-white 落在浅卡上会翻白消失 —— 不在媒体黑底时
   让它走主色字(可读); 媒体黑底内的已由 §10.6(C) 钉成纯白 */
html[data-theme] .group:hover .group-hover\:text-white,
html[data-theme] .hover\:text-white:hover {
    color: var(--ac-text) !important;
}

/* ===========================================================================
   10.8 页面局部 .status-* / .s-* 徽章(theme.css 不触及, 浅主题浅字压浅底撞色)
   重写为语义 faint 底 + 基色字, 浅/深主题皆可读
   =========================================================================== */
html[data-theme] .status-draft,
html[data-theme] .s-draft {
    background-color: var(--ac-surface-muted) !important;
    color: var(--ac-text-muted) !important;
}
html[data-theme] .status-script_ready,
html[data-theme] .status-done,
html[data-theme] .s-done {
    background-color: var(--ac-success-faint) !important;
    color: var(--ac-success) !important;
}
html[data-theme] .status-queued,
html[data-theme] .status-pending,
html[data-theme] .s-queued,
html[data-theme] .s-pending {
    background-color: var(--ac-info-faint) !important;
    color: var(--ac-info) !important;
}
html[data-theme] .status-composing,
html[data-theme] .status-generating,
html[data-theme] .s-generating {
    background-color: var(--ac-accent-faint) !important;
    color: var(--ac-accent) !important;
}
html[data-theme] .status-error,
html[data-theme] .s-error {
    background-color: var(--ac-danger-faint) !important;
    color: var(--ac-danger) !important;
}

/* ===========================================================================
   10.9 彩色"新功能"特性卡(emerald/teal/sky/pink 系)主题感知柔底
   原 from-X-900/NN 深 pastel 渐变在浅主题变脏暗斑; 改成 -faint 系柔底
   (用 .bg-gradient-to-br 双类提特异度压住 §10.4 的 from-* 端点覆写)
   =========================================================================== */
html[data-theme] .bg-gradient-to-br.from-emerald-900\/30.to-green-900\/20,
html[data-theme] .bg-gradient-to-br.from-emerald-900\/50.to-teal-900\/40,
html[data-theme] .bg-gradient-to-br.from-emerald-900\/50.to-teal-900\/60 {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--ac-success) 28%, var(--ac-surface)) 0%,
        color-mix(in srgb, var(--ac-success) 14%, var(--ac-surface-raised)) 100%) !important;
    color: var(--ac-text) !important;
}
html[data-theme] .bg-gradient-to-br.from-teal-900\/50.to-sky-900\/40,
html[data-theme] .bg-gradient-to-br.from-teal-900\/70.to-sky-900\/60 {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--ac-info) 28%, var(--ac-surface)) 0%,
        color-mix(in srgb, var(--ac-info) 14%, var(--ac-surface-raised)) 100%) !important;
    color: var(--ac-text) !important;
}
html[data-theme] .bg-gradient-to-br.from-pink-900\/50.to-rose-900\/40,
html[data-theme] .bg-gradient-to-br.from-pink-900\/70.to-rose-900\/60 {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--ac-accent) 28%, var(--ac-surface)) 0%,
        color-mix(in srgb, var(--ac-accent) 14%, var(--ac-surface-raised)) 100%) !important;
    color: var(--ac-text) !important;
}
html[data-theme] .bg-gradient-to-br.from-amber-900\/30.to-orange-900\/20 {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--ac-warn) 26%, var(--ac-surface)) 0%,
        color-mix(in srgb, var(--ac-warn) 13%, var(--ac-surface-raised)) 100%) !important;
    color: var(--ac-text) !important;
}
html[data-theme] .bg-gradient-to-br.from-sky-900\/30.to-cyan-900\/20 {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--ac-info) 26%, var(--ac-surface)) 0%,
        color-mix(in srgb, var(--ac-info) 13%, var(--ac-surface-raised)) 100%) !important;
    color: var(--ac-text) !important;
}
/* fuchsia/rose/orange 彩色实心渐变按钮(from-fuchsia/from-rose + text-white) →
   整条走 accent/danger grad 且字配 on-accent(对照已安全的 from-purple 按钮) */
html[data-theme] .bg-gradient-to-r.from-fuchsia-500,
html[data-theme] .bg-gradient-to-r.from-fuchsia-600,
html[data-theme] .bg-gradient-to-br.from-fuchsia-500,
html[data-theme] .bg-gradient-to-br.from-fuchsia-600 {
    background-image: var(--ac-accent-grad) !important;
    color: var(--ac-text-on-accent) !important;
}
html[data-theme] .bg-gradient-to-r.from-rose-500,
html[data-theme] .bg-gradient-to-r.from-rose-600 {
    background-image: linear-gradient(135deg,
        var(--ac-danger) 0%,
        color-mix(in srgb, var(--ac-danger) 70%, var(--ac-warn)) 100%) !important;
    color: #fff !important;
}

/* 白底徽章(bg-white text-purple-700)在浅主题与浅卡同色 → 改实心 accent 高亮 chip */
html[data-theme] .bg-white.text-purple-700 {
    background-color: var(--ac-accent) !important;
    color: var(--ac-text-on-accent) !important;
}
/* 裸 bg-white(实心,非媒体)→ surface, 避免与浅卡同色失去边界 */
html[data-theme] .bg-white:not([class*="\/"]):not(.text-purple-700) {
    background-color: var(--ac-surface) !important;
}


/* ===========================================================================
   10.X 对抗校验 — 对比度失败修正(per-theme 覆盖,追加在 §10 之后,源序靠后压住前面)
   规则: 全部 html[data-theme="X"] 提特异性做单主题覆盖;深底主题不动;
   仅修被点名的失败组合(实心语义底白字 / 缺失 -soft / -faint 变量 / 徽章基色字)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FIX A. dark 主题: 亮系语义实心底(warn/info/success)白字对比度不足
   --ac-warn #f59e0b / --ac-info #60a5fa / --ac-success #22c55e 都是高亮度,
   白字 2.1~2.5:1。改深字 var(--ac-bg-deep)(≈9:1)。danger(#ef4444)留白字大字可用。
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .bg-amber-300,
html[data-theme="dark"] .bg-amber-500.text-white,
html[data-theme="dark"] .bg-amber-600.text-white,
html[data-theme="dark"] .bg-yellow-600.text-white {
    color: var(--ac-bg-deep) !important;
}
html[data-theme="dark"] .bg-blue-400,
html[data-theme="dark"] .bg-blue-400.text-white,
html[data-theme="dark"] .bg-blue-500.text-white,
html[data-theme="dark"] .bg-blue-600.text-white {
    color: var(--ac-bg-deep) !important;
}
html[data-theme="dark"] .bg-green-600.text-white,
html[data-theme="dark"] .bg-emerald-600.text-white {
    color: var(--ac-bg-deep) !important;
}

/* dark 徽章: 基色字在暗 faint 底太深 → 改用更亮的 -soft */
html[data-theme="dark"] .status-composing,
html[data-theme="dark"] .status-generating,
html[data-theme="dark"] .s-generating {
    color: var(--ac-accent-soft) !important;
}
html[data-theme="dark"] .status-error,
html[data-theme="dark"] .s-error {
    color: var(--ac-danger-soft) !important;
}

/* ---------------------------------------------------------------------------
   FIX B. terminal 主题: 语义底是浅霓虹色,白字失败 → 改 var(--ac-text-on-accent)(深字)
   warn #ffb454 / danger #ff5f56;另徽章 draft 文字 muted 偏灰 → 提到 -soft(可选)
   --------------------------------------------------------------------------- */
html[data-theme="terminal"] .bg-amber-300,
html[data-theme="terminal"] .bg-amber-500.text-white,
html[data-theme="terminal"] .bg-amber-600.text-white,
html[data-theme="terminal"] .bg-yellow-600.text-white,
html[data-theme="terminal"] .bg-red-500.text-white,
html[data-theme="terminal"] .bg-red-600.text-white,
html[data-theme="terminal"] .bg-rose-600.text-white {
    color: var(--ac-text-on-accent) !important;
}
html[data-theme="terminal"] .bg-gradient-to-r.from-rose-500,
html[data-theme="terminal"] .bg-gradient-to-r.from-rose-600 {
    color: var(--ac-text-on-accent) !important;
}
html[data-theme="terminal"] .status-draft,
html[data-theme="terminal"] .s-draft {
    color: var(--ac-text-soft) !important;
}

/* ---------------------------------------------------------------------------
   FIX C. press 主题(浅 cream): ROOT-CAUSE — 缺失 -soft/-faint 语义变量,
   继承了 :root 的亮 pastel(暗底用),在 cream 上 1.3~2.7:1 全灭。
   在 press 块补深色 -soft/-faint;并加深 --ac-warn;补 accent-soft 给小字。
   --------------------------------------------------------------------------- */
html[data-theme="press"] {
    --ac-info-soft: #274e78;
    --ac-success-soft: #2a5e3b;
    --ac-warn-soft: #845706;
    --ac-danger-soft: #a8241b;
    --ac-info-faint: rgba(43, 90, 140, 0.12);
    --ac-success-faint: rgba(47, 107, 67, 0.13);
    --ac-warn-faint: rgba(176, 116, 8, 0.14);
    --ac-danger-faint: rgba(192, 41, 31, 0.10);
}
/* press: accent 映射的正文级文字用基色(更深)而非 -soft,满足 4.5:1 */
html[data-theme="press"] .text-fuchsia-300,
html[data-theme="press"] .text-fuchsia-400,
html[data-theme="press"] .text-pink-300,
html[data-theme="press"] .text-purple-100\/90,
html[data-theme="press"] .text-pink-100\/70,
html[data-theme="press"] .text-purple-700 {
    color: var(--ac-accent) !important;
}
/* press: warn 实心底白字仍偏低 → 深字 */
html[data-theme="press"] .bg-amber-300,
html[data-theme="press"] .bg-amber-500.text-white,
html[data-theme="press"] .bg-amber-600.text-white,
html[data-theme="press"] .bg-yellow-600.text-white {
    color: var(--ac-text) !important;
}

/* ---------------------------------------------------------------------------
   FIX D. brutal 主题(浅 near-white): ROOT-CAUSE — 同样缺 -soft/-faint,继承暗 pastel。
   补深 -soft/-faint;加深 --ac-success(让白字 CTA 可读);收紧 accent-soft;
   warn 实心底改深字;status-* 徽章改用(已修深的)-soft。
   --------------------------------------------------------------------------- */
html[data-theme="brutal"] {
    --ac-info-soft: #1a3799;
    --ac-success-soft: #007832;
    --ac-warn-soft: #995300;
    --ac-danger-soft: #991b1b;
    --ac-accent-soft: #1f48d6;
    --ac-info-faint: rgba(43, 91, 255, 0.12);
    --ac-success-faint: rgba(0, 200, 83, 0.16);
    --ac-warn-faint: rgba(255, 138, 0, 0.16);
    --ac-danger-faint: rgba(255, 45, 45, 0.14);
    --ac-success: #007832;
}
/* brutal: status-* 徽章基色字 → 改深 -soft */
html[data-theme="brutal"] .status-script_ready,
html[data-theme="brutal"] .status-done,
html[data-theme="brutal"] .s-done {
    color: var(--ac-success-soft) !important;
}
html[data-theme="brutal"] .status-error,
html[data-theme="brutal"] .s-error {
    color: var(--ac-danger-soft) !important;
}
html[data-theme="brutal"] .status-queued,
html[data-theme="brutal"] .status-pending,
html[data-theme="brutal"] .s-queued,
html[data-theme="brutal"] .s-pending {
    color: var(--ac-info-soft) !important;
}
/* brutal: warn 实心底白字失败 → 黑字(契合 brutal 高对比美学) */
html[data-theme="brutal"] .bg-amber-300,
html[data-theme="brutal"] .bg-amber-500.text-white,
html[data-theme="brutal"] .bg-amber-600.text-white,
html[data-theme="brutal"] .bg-yellow-600.text-white {
    color: var(--ac-text) !important;
}

/* ---------------------------------------------------------------------------
   FIX E. clay 主题(浅 grey): ROOT-CAUSE — 缺 -soft/-faint,继承暗 pastel,1.4~2.9:1 全灭。
   补深 -soft/-faint;加深 accent-soft;补 focus-ring 匹配 clay accent;
   status-* 徽章基色字 → 加深;warn 实心底改深字。
   --------------------------------------------------------------------------- */
html[data-theme="clay"] {
    --ac-info-soft: #3949c2;
    --ac-success-soft: #2f7d63;
    --ac-warn-soft: #9a6418;
    --ac-danger-soft: #b34a4a;
    --ac-accent-soft: #4a55c8;
    --ac-info-faint: rgba(57, 73, 194, 0.12);
    --ac-success-faint: rgba(47, 125, 99, 0.14);
    --ac-warn-faint: rgba(154, 100, 24, 0.14);
    --ac-danger-faint: rgba(179, 74, 74, 0.12);
    --ac-focus-ring: rgba(109, 124, 255, 0.55);
}
/* clay: status-* 徽章基色字在浅 faint 上太浅 → 加深(向文字色靠) */
html[data-theme="clay"] .status-script_ready,
html[data-theme="clay"] .status-done,
html[data-theme="clay"] .s-done {
    color: color-mix(in srgb, var(--ac-success) 60%, var(--ac-text)) !important;
}
html[data-theme="clay"] .status-queued,
html[data-theme="clay"] .status-pending,
html[data-theme="clay"] .s-queued,
html[data-theme="clay"] .s-pending {
    color: color-mix(in srgb, var(--ac-info) 60%, var(--ac-text)) !important;
}
html[data-theme="clay"] .status-composing,
html[data-theme="clay"] .status-generating,
html[data-theme="clay"] .s-generating {
    color: color-mix(in srgb, var(--ac-accent) 60%, var(--ac-text)) !important;
}
html[data-theme="clay"] .status-error,
html[data-theme="clay"] .s-error {
    color: color-mix(in srgb, var(--ac-danger) 60%, var(--ac-text)) !important;
}
/* clay: warn 实心底白字失败 → 深字 */
html[data-theme="clay"] .bg-amber-300,
html[data-theme="clay"] .bg-amber-500.text-white,
html[data-theme="clay"] .bg-amber-600.text-white,
html[data-theme="clay"] .bg-yellow-600.text-white {
    color: var(--ac-text) !important;
}

/* ---------------------------------------------------------------------------
   FIX F. aurora 主题(暗,玻璃面): accent 是中调紫 #7c6ff0,徽章基色字 3.1:1 不够 →
   改更亮的 -soft(#a99bff,5.09:1)。danger faint 在最亮玻璃面边缘 → 加深 faint 兜底。
   --------------------------------------------------------------------------- */
html[data-theme="aurora"] .status-composing,
html[data-theme="aurora"] .status-generating,
html[data-theme="aurora"] .s-generating {
    color: var(--ac-accent-soft) !important;
}
/* aurora: danger faint 在 surface-raised 玻璃上掉到 4.3:1 → 把底合成到 surface 固定加深 */
html[data-theme="aurora"] .status-error,
html[data-theme="aurora"] .s-error,
html[data-theme="aurora"] .bg-red-500\/15,
html[data-theme="aurora"] .bg-red-900\/25,
html[data-theme="aurora"] .bg-rose-500\/10 {
    background-color: color-mix(in srgb, var(--ac-danger) 22%, var(--ac-surface)) !important;
}


/* ============================================================================
   §11 自定义类补映射 — 各页 <style> 里写死色的自定义类(非Tailwind, §3~§10 remap抓不到)
   如 field-input/field-label/card/input/table/btn 等, 在浅主题下深底浅字撞色。
   全 html[data-theme] 前缀 + !important, 按亮度/语义映射到 --ac-*。
   语义徽章 status 与 s- 系已由 FIX 块处理, 此处不重复。
   ============================================================================ */

/* input fields: hardcoded dark bg to theme soft surface */
html[data-theme] .field-input { background-color: var(--ac-bg-soft) !important; border-color: var(--ac-border) !important; color: var(--ac-text) !important; }
html[data-theme] .field-input:focus { border-color: var(--ac-accent) !important; }

/* 标签 / 次要文字 / 表头 */
html[data-theme] .field-label,
html[data-theme] .nav-idle,
html[data-theme] .table-th { color: var(--ac-text-muted) !important; }
html[data-theme] .table-td { color: var(--ac-text-soft) !important; }

/* 卡片类 (background-color longhand, 简写里var会被丢) */
html[data-theme] .seg-card {
    background-color: var(--ac-surface) !important;
    border-color: var(--ac-border-soft) !important;
}

/* 按钮: 主按钮/激活tab→主色, 危险→danger, 灰按钮→muted表面 */
html[data-theme] .btn-primary,
html[data-theme] .active-tab {
    background-color: var(--ac-accent) !important;
    color: var(--ac-text-on-accent) !important;
}
html[data-theme] .btn-danger { background-color: var(--ac-danger) !important; color: #fff !important; }
html[data-theme] .btn-muted {
    background-color: var(--ac-surface-muted) !important;
    color: var(--ac-text) !important;
}

/* 选中/激活态边框: 原写死紫 → 统一主色(跟主题) */
html[data-theme] .nav-active,
html[data-theme] .preset-card,
html[data-theme] .segment-card,
html[data-theme] .episode-row,
html[data-theme] .shot-nav-active,
html[data-theme] .selectable-tile.is-selected,
html[data-theme] .angle-tile { border-color: var(--ac-accent) !important; }
html[data-theme] .nav-active,
html[data-theme] .seg-source-btn { color: var(--ac-accent) !important; }

/* dashboard hero 标题/副文案: 页面<style>写死 color:#fff !important,
   浅底hero(brutal黄/clay浅)会白字隐形 → 改继承容器(我的hero修正已按主题上色) */
html[data-theme] .dashboard-hero__title,
html[data-theme] .dashboard-hero__copy { color: inherit !important; }


/* [2026-07-04 T1对比度] clay/aurora 的琥珀/绿按钮底太浅托不住白字(实测1.67-2.5):
   warn/success 变量兼做文字色不能全局加深, 只在 button 上下文压深到 AA(白字>=4.5)。
   hover:bg-* 变体同被 [class*=] 命中, hover 变色让位于可读性。 */
html[data-theme="aurora"] button[class*="bg-amber-"],
html[data-theme="clay"] button[class*="bg-amber-"] {
    background-color: #92400e !important; background-image: none !important;
}
html[data-theme="aurora"] button[class*="bg-green-"],
html[data-theme="aurora"] button[class*="bg-emerald-"],
html[data-theme="clay"] button[class*="bg-green-"],
html[data-theme="clay"] button[class*="bg-emerald-"] {
    background-color: #047857 !important; background-image: none !important;
}
/* 字色单列 (0,3,2) 特异度, 压过 §6/§10.7 的各路 text-white 翻转 */
html[data-theme="aurora"] button[class*="bg-amber-"][class*="text-white"],
html[data-theme="clay"] button[class*="bg-amber-"][class*="text-white"],
html[data-theme="aurora"] button[class*="bg-green-"][class*="text-white"],
html[data-theme="aurora"] button[class*="bg-emerald-"][class*="text-white"],
html[data-theme="clay"] button[class*="bg-green-"][class*="text-white"],
html[data-theme="clay"] button[class*="bg-emerald-"][class*="text-white"] {
    color: #fff !important;
}

/* emerald-700/green-700 实心按钮不在 §10.7 名单, 深主题下底被映射成亮 success 配白字(实测1.16-2.8)
   —— 全主题钉回深绿实心+白字 */
html[data-theme] button[class*="bg-emerald-7"][class*="text-white"],
html[data-theme] button[class*="bg-green-7"][class*="text-white"] {
    background-color: #047857 !important; background-image: none !important; color: #fff !important;
}