/* ==========================================================================
   全站主题（电脑端）· 跟随用户个性化设置（色调模式 / 主题主色）
   - 仅当 <html> 上带有 data-uc-theme / data-uc-primary 时生效（登录后由 header.html 输出）
   - data-uc-theme: bright | dark（automatic 会在首屏前解析为 bright/dark）
   - data-uc-primary: blue / indigo / purple / pink / red / orange / amber / lime /
                      green / teal / cyan / brown / deep-orange
   ========================================================================== */

/* ---------------------------------------------------------------- 设计令牌 */
:root {
    /* 默认主色：站点原生蓝 #2563eb */
    --uc-primary-rgb: 37, 99, 235;

    --uc-bg: #f5f5f7;
    --uc-surface: #ffffff;
    --uc-surface-2: #f9fafb;
    --uc-surface-3: #f3f4f6;
    --uc-border: #eef0f4;
    --uc-border-strong: #e5e7eb;

    --uc-text: #374151;
    --uc-text-strong: #111827;
    --uc-muted: #6b7280;
    --uc-faint: #9ca3af;

    --uc-primary: rgb(var(--uc-primary-rgb));
    --uc-primary-ink: rgb(var(--uc-primary-rgb));
    --uc-primary-dark: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 86%, #000);
    --uc-primary-strong: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 84%, #000);
    --uc-primary-soft: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 10%, transparent);
    --uc-primary-ring: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 25%, transparent);

    --uc-green: #16a34a;
    --uc-green-soft: #e9f9ef;
    --uc-amber: #b45309;
    --uc-amber-soft: #fef4e4;
    --uc-red: #dc2626;
    --uc-red-soft: #fdeaea;
    --uc-violet: #7c3aed;
    --uc-violet-soft: #f1ecfe;
    --uc-cyan: #0e7490;
    --uc-cyan-soft: #e3f5f9;
    --uc-pink: #db2777;
    --uc-pink-soft: #fce7f3;
    --uc-indigo: #4f46e5;
    --uc-indigo-soft: #eceafd;
    --uc-teal: #0d9488;
    --uc-teal-soft: #e0f5f2;
    --uc-gold: #f5b301;
    --uc-gold-soft: #fef6e0;

    --uc-radius: 6px;
    --uc-radius-lg: 10px;
    --uc-shadow: 0 1px 2px rgba(26, 34, 51, .04);
    --uc-shadow-pop: 0 10px 30px rgba(26, 34, 51, .10);
}

/* 用户个性化主色映射（MDUI 调色板名 → 颜色） */
html[data-uc-primary="blue"]        { --uc-primary-rgb: 37, 99, 235; }
html[data-uc-primary="indigo"]      { --uc-primary-rgb: 79, 70, 229; }
html[data-uc-primary="purple"]      { --uc-primary-rgb: 147, 51, 234; }
html[data-uc-primary="pink"]        { --uc-primary-rgb: 219, 39, 119; }
html[data-uc-primary="red"]         { --uc-primary-rgb: 220, 38, 38; }
html[data-uc-primary="orange"]      { --uc-primary-rgb: 234, 88, 12; }
html[data-uc-primary="deep-orange"] { --uc-primary-rgb: 194, 65, 12; }
html[data-uc-primary="amber"]       { --uc-primary-rgb: 217, 119, 6; }
html[data-uc-primary="lime"]        { --uc-primary-rgb: 101, 163, 13; }
html[data-uc-primary="green"]       { --uc-primary-rgb: 22, 163, 74; }
html[data-uc-primary="teal"]        { --uc-primary-rgb: 13, 148, 136; }
html[data-uc-primary="cyan"]        { --uc-primary-rgb: 8, 145, 178; }
html[data-uc-primary="brown"]       { --uc-primary-rgb: 146, 64, 14; }

/* 深色模式令牌 */
html[data-uc-theme="dark"] {
    color-scheme: dark;
    --uc-bg: #0e1320;
    --uc-surface: #161c2b;
    --uc-surface-2: #1b2233;
    --uc-surface-3: #222a3c;
    --uc-border: #232b3d;
    --uc-border-strong: #2d3548;

    --uc-text: #c7d0e0;
    --uc-text-strong: #eef2fa;
    --uc-muted: #8b95a9;
    --uc-faint: #6b7688;

    --uc-primary-ink: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 62%, #ffffff);
    /* 深色模式下的按钮 hover 要「更亮」而不是「更暗」 */
    --uc-primary-strong: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 84%, #ffffff);
    --uc-primary-soft: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 24%, transparent);
    --uc-primary-ring: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 38%, transparent);

    --uc-green: #4ade80;
    --uc-green-soft: rgba(74, 222, 128, .14);
    --uc-amber: #fbbf24;
    --uc-amber-soft: rgba(251, 191, 36, .14);
    --uc-red: #f87171;
    --uc-red-soft: rgba(248, 113, 113, .14);
    --uc-violet: #c4b5fd;
    --uc-violet-soft: rgba(196, 181, 253, .14);
    --uc-cyan: #67e8f9;
    --uc-cyan-soft: rgba(103, 232, 249, .14);
    --uc-pink: #f9a8d4;
    --uc-pink-soft: rgba(249, 168, 212, .14);
    --uc-indigo: #a5b4fc;
    --uc-indigo-soft: rgba(165, 180, 252, .14);
    --uc-teal: #5eead4;
    --uc-teal-soft: rgba(94, 234, 212, .14);
    --uc-gold: #fbbf24;
    --uc-gold-soft: rgba(251, 191, 36, .14);

    --uc-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --uc-shadow-pop: 0 14px 40px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   一、主题主色（登录后即生效，浅色/深色通用）
   ========================================================================== */

/* 文本强调色 */
html[data-uc-primary] .text-blue-600,
html[data-uc-primary] .text-blue-500,
html[data-uc-primary] .text-blue-700,
html[data-uc-primary] .text-blue-800,
html[data-uc-primary] .hover\:text-blue-500:hover,
html[data-uc-primary] .hover\:text-blue-600:hover,
html[data-uc-primary] .hover\:text-blue-700:hover,
html[data-uc-primary] .hover\:text-blue-800:hover,
html[data-uc-primary] .group:hover .group-hover\:text-blue-600 {
    color: var(--uc-primary) !important;
}

/* 悬停切换为白色文字的元素（如爱思正版「获取」按钮）：
   上面的 .text-blue-600 使用了 !important，会盖过 Tailwind 的 group-hover:text-white，
   导致悬停时文字与主色背景同色而不可见，这里必须显式覆盖回来 */
html[data-uc-primary] .group:hover .group-hover\:text-white,
html[data-uc-primary] .hover\:text-white:hover {
    color: #ffffff !important;
}

/* 实底强调背景 */
html[data-uc-primary] .bg-blue-600,
html[data-uc-primary] .bg-blue-500,
html[data-uc-primary] .group:hover .group-hover\:bg-blue-600,
html[data-uc-primary] .bg-\[\#007AFF\] {
    background-color: var(--uc-primary) !important;
}

html[data-uc-primary] .bg-blue-700,
html[data-uc-primary] .hover\:bg-blue-700:hover,
html[data-uc-primary] .hover\:bg-\[\#0062cc\]:hover {
    background-color: var(--uc-primary-dark) !important;
}

/* 浅底强调背景 */
html[data-uc-primary] .bg-blue-50,
html[data-uc-primary] .hover\:bg-blue-50:hover {
    background-color: var(--uc-primary-soft) !important;
}

html[data-uc-primary] .bg-blue-50\/40,
html[data-uc-primary] .hover\:bg-blue-50\/40:hover {
    background-color: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 6%, transparent) !important;
}

html[data-uc-primary] .bg-blue-100,
html[data-uc-primary] .hover\:bg-blue-100:hover {
    background-color: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 16%, transparent) !important;
}

html[data-uc-primary] .hover\:bg-blue-200:hover {
    background-color: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 26%, transparent) !important;
}

/* 边框 / 描边 / 焦点环 */
html[data-uc-primary] .border-blue-500,
html[data-uc-primary] .hover\:border-blue-500:hover,
html[data-uc-primary] .focus\:border-blue-500:focus {
    border-color: var(--uc-primary) !important;
}

html[data-uc-primary] .focus\:border-blue-300:focus,
html[data-uc-primary] .border-blue-300,
html[data-uc-primary] .hover\:border-blue-200:hover,
html[data-uc-primary] .border-blue-200 {
    border-color: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 45%, transparent) !important;
}

html[data-uc-primary] .border-blue-100 {
    border-color: color-mix(in srgb, rgb(var(--uc-primary-rgb)) 26%, transparent) !important;
}

html[data-uc-primary] .ring-blue-500,
html[data-uc-primary] .focus\:ring-blue-500:focus,
html[data-uc-primary] .focus\:ring-blue-300:focus {
    --tw-ring-color: var(--uc-primary-ring) !important;
}

html[data-uc-primary] .from-blue-500 { --tw-gradient-from: var(--uc-primary) !important; }
html[data-uc-primary] .shadow-blue-500\/30 { --tw-shadow-color: var(--uc-primary-ring) !important; }

/* 合集页 Hero 横幅：跟随主题主色（未登录时保留默认蓝紫渐变） */
html[data-uc-primary] .collection-hero {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--uc-primary) 86%, #ffffff) 0%,
        var(--uc-primary) 48%,
        var(--uc-primary-dark) 100%
    ) !important;
}

/* ==========================================================================
   二、深色模式：全站浅色工具类 → 深色令牌
   ========================================================================== */

html[data-uc-theme="dark"] body {
    background-color: var(--uc-bg) !important;
    color: var(--uc-text);
}

html[data-uc-theme="dark"] ::selection { background: var(--uc-primary-soft); }

/* ---- 顶栏 ---- */
html[data-uc-theme="dark"] header.glassmorphism {
    background: rgba(20, 26, 40, .82) !important;
    border-bottom: 1px solid var(--uc-border);
}

html[data-uc-theme="dark"] header input {
    background: var(--uc-surface-2) !important;
    color: var(--uc-text) !important;
}

html[data-uc-theme="dark"] header input::placeholder { color: var(--uc-faint) !important; }

/* ---- 背景色 ---- */
html[data-uc-theme="dark"] .bg-white,
html[data-uc-theme="dark"] .hover\:bg-white:hover,
html[data-uc-theme="dark"] .focus\:bg-white:focus { background-color: var(--uc-surface) !important; }

html[data-uc-theme="dark"] .bg-white\/90 { background-color: rgba(22, 28, 43, .9) !important; }

html[data-uc-theme="dark"] .bg-gray-50,
html[data-uc-theme="dark"] .bg-slate-50,
html[data-uc-theme="dark"] .hover\:bg-gray-50:hover,
html[data-uc-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--uc-surface-2) !important; }

html[data-uc-theme="dark"] .bg-gray-100,
html[data-uc-theme="dark"] .bg-slate-100,
html[data-uc-theme="dark"] .hover\:bg-gray-100:hover,
html[data-uc-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--uc-surface-3) !important; }

html[data-uc-theme="dark"] .bg-gray-200,
html[data-uc-theme="dark"] .hover\:bg-gray-200:hover { background-color: #2b3346 !important; }

html[data-uc-theme="dark"] .hover\:bg-gray-300:hover { background-color: #333c52 !important; }

html[data-uc-theme="dark"] .bg-gray-500 { background-color: #4b5563 !important; }

/* 语义浅底 */
html[data-uc-theme="dark"] .bg-red-50    { background-color: var(--uc-red-soft) !important; }
html[data-uc-theme="dark"] .bg-green-50  { background-color: var(--uc-green-soft) !important; }
html[data-uc-theme="dark"] .bg-amber-50  { background-color: var(--uc-amber-soft) !important; }
html[data-uc-theme="dark"] .bg-emerald-50{ background-color: var(--uc-green-soft) !important; }
html[data-uc-theme="dark"] .bg-sky-50    { background-color: var(--uc-cyan-soft) !important; }
html[data-uc-theme="dark"] .bg-violet-50 { background-color: var(--uc-violet-soft) !important; }
html[data-uc-theme="dark"] .bg-red-100   { background-color: var(--uc-red-soft) !important; }
html[data-uc-theme="dark"] .bg-green-100 { background-color: var(--uc-green-soft) !important; }
html[data-uc-theme="dark"] .bg-purple-100{ background-color: var(--uc-violet-soft) !important; }

/* ---- 文字色 ---- */
html[data-uc-theme="dark"] .text-gray-900,
html[data-uc-theme="dark"] .text-slate-900,
html[data-uc-theme="dark"] .hover\:text-gray-900:hover { color: var(--uc-text-strong) !important; }

html[data-uc-theme="dark"] .text-gray-800,
html[data-uc-theme="dark"] .text-slate-800 { color: var(--uc-text-strong) !important; }

html[data-uc-theme="dark"] .text-gray-700,
html[data-uc-theme="dark"] .text-slate-700 { color: var(--uc-text) !important; }

html[data-uc-theme="dark"] .text-gray-600,
html[data-uc-theme="dark"] .text-slate-600,
html[data-uc-theme="dark"] .hover\:text-gray-600:hover { color: #a9b3c5 !important; }

html[data-uc-theme="dark"] .text-gray-500,
html[data-uc-theme="dark"] .text-slate-500 { color: var(--uc-muted) !important; }

html[data-uc-theme="dark"] .text-gray-400,
html[data-uc-theme="dark"] .text-slate-400 { color: var(--uc-faint) !important; }

html[data-uc-theme="dark"] .text-gray-300 { color: #5a6579 !important; }
html[data-uc-theme="dark"] .text-gray-200 { color: #4a5468 !important; }

/* 语义文字色提亮 */
html[data-uc-theme="dark"] .text-red-500,
html[data-uc-theme="dark"] .text-red-600,
html[data-uc-theme="dark"] .text-red-700,
html[data-uc-theme="dark"] .text-red-400 { color: var(--uc-red) !important; }

html[data-uc-theme="dark"] .text-green-600,
html[data-uc-theme="dark"] .text-green-700,
html[data-uc-theme="dark"] .text-green-500,
html[data-uc-theme="dark"] .text-green-400,
html[data-uc-theme="dark"] .text-emerald-600 { color: var(--uc-green) !important; }

html[data-uc-theme="dark"] .text-amber-600,
html[data-uc-theme="dark"] .text-amber-500 { color: var(--uc-amber) !important; }
html[data-uc-theme="dark"] .text-orange-600,
html[data-uc-theme="dark"] .text-orange-500 { color: #fb923c !important; }
html[data-uc-theme="dark"] .text-rose-500 { color: var(--uc-red) !important; }
html[data-uc-theme="dark"] .text-purple-600,
html[data-uc-theme="dark"] .text-violet-600 { color: var(--uc-violet) !important; }
html[data-uc-theme="dark"] .text-sky-600 { color: var(--uc-cyan) !important; }

/* ---- 边框 / 分隔线 ---- */
html[data-uc-theme="dark"] .border-gray-100,
html[data-uc-theme="dark"] .border-slate-100 { border-color: var(--uc-border) !important; }

html[data-uc-theme="dark"] .border-gray-200,
html[data-uc-theme="dark"] .border-slate-200,
html[data-uc-theme="dark"] .border-gray-200\/80,
html[data-uc-theme="dark"] .border-gray-200\/60 { border-color: var(--uc-border) !important; }

html[data-uc-theme="dark"] .border-gray-300 { border-color: var(--uc-border-strong) !important; }

html[data-uc-theme="dark"] .border-red-200   { border-color: var(--uc-red-soft) !important; }
html[data-uc-theme="dark"] .border-green-200 { border-color: var(--uc-green-soft) !important; }

html[data-uc-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--uc-border) !important;
}

/* ---- 占位符 / 焦点环 ---- */
html[data-uc-theme="dark"] .placeholder-gray-400::placeholder,
html[data-uc-theme="dark"] .placeholder\:text-gray-400::placeholder { color: var(--uc-faint) !important; }

html[data-uc-theme="dark"] .ring-gray-800,
html[data-uc-theme="dark"] .focus\:ring-gray-800:focus { --tw-ring-color: #2d3548 !important; }

html[data-uc-theme="dark"] .ring-gray-400,
html[data-uc-theme="dark"] .focus\:ring-gray-400:focus { --tw-ring-color: #3d4557 !important; }

/* ---- 页脚 ---- */
html[data-uc-theme="dark"] footer.bg-white {
    background: var(--uc-surface) !important;
    border-color: var(--uc-border) !important;
}

/* ---- PC 自定义弹窗 ---- */
html[data-uc-theme="dark"] .fv-mute-dialog-icon {
    background: #2a1f0b;
    color: #fbbf24;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog {
    background: var(--uc-surface) !important;
    border-color: var(--uc-border-strong) !important;
    box-shadow: var(--uc-shadow-pop) !important;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog-header {
    border-color: var(--uc-border) !important;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog-title {
    color: var(--uc-text-strong) !important;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog-content {
    color: var(--uc-text) !important;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog-close:hover {
    background: var(--uc-surface-3) !important;
    color: var(--uc-text-strong) !important;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog-button {
    background: var(--uc-surface-3) !important;
    border-color: var(--uc-border-strong) !important;
    color: var(--uc-text) !important;
}

html[data-uc-theme="dark"] .iosipa-pc-dialog-button.is-primary,
html[data-uc-theme="dark"] .iosipa-pc-dialog-button.is-primary:hover {
    background: var(--uc-primary) !important;
    border-color: var(--uc-primary) !important;
    color: #fff !important;
}

html[data-uc-theme="dark"] .iosipa-pc-toast {
    background: var(--uc-surface) !important;
    border-color: var(--uc-border-strong) !important;
    color: var(--uc-text-strong) !important;
    box-shadow: var(--uc-shadow-pop) !important;
}

/* ---- 论坛图片素材面板 ---- */
html[data-uc-theme="dark"] .fe-picker-count {
    color: var(--uc-muted) !important;
}

html[data-uc-theme="dark"] .fe-picker-count b {
    color: var(--uc-text-strong) !important;
}

html[data-uc-theme="dark"] .fe-picker-upload {
    background: color-mix(in srgb, var(--uc-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--uc-primary) 45%, transparent) !important;
    color: #93c5fd !important;
}

html[data-uc-theme="dark"] .fe-picker-upload:hover {
    background: color-mix(in srgb, var(--uc-primary) 28%, transparent) !important;
}

html[data-uc-theme="dark"] .fe-picker-item {
    background: var(--uc-surface-2) !important;
    border-color: var(--uc-border-strong) !important;
}

html[data-uc-theme="dark"] .fe-picker-item:hover {
    border-color: color-mix(in srgb, var(--uc-primary) 55%, transparent) !important;
}

html[data-uc-theme="dark"] .fe-picker-loading,
html[data-uc-theme="dark"] .fe-picker-empty {
    color: var(--uc-muted) !important;
}

/* ---- 滚动条（可选优化） ---- */
html[data-uc-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-uc-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2d3548;
    border: 3px solid var(--uc-bg);
    border-radius: 999px;
}
html[data-uc-theme="dark"] ::-webkit-scrollbar-track { background: var(--uc-bg); }